feat: 激活码;

components/center/popupActivate.vue

@@ -0,0 +1,111 @@
+<template>
+  <uv-popup 
+    ref="popup"
+    :overlayOpacity="0.8"
+    :customStyle="{
+      backgroundColor: 'transparent',
+    }"
+  >
+    <view class="flex content">
+      <template v-if="mode === 'activate'">
+        <image class="popup-bg" src="@/static/image/center/activate-code.png"></image>
+
+        <view class="flex popup-btns">
+          <button plain class="btn-simple" @click="close">
+            <image class="popup-btn" src="@/static/image/center/cancel.png"></image>
+          </button>
+          <button plain class="btn-simple" @click="onConfirm">
+            <image class="popup-btn" src="@/static/image/center/confirm.png"></image>
+          </button>
+        </view>
+
+        <uv-input 
+          v-model="activateCode"
+          :focus="true"
+          inputAlign="center"
+          color="#3DFEE0"
+          fontSize="45rpx"
+          border="none"
+          :customStyle="{
+            backgroundColor: 'transparent',
+            width: '250rpx',
+            height: '63rpx',
+            position: 'absolute',
+            top: '216rpx',
+            left: '160rpx',
+          }"
+        ></uv-input>
+      </template>
+      <template v-else>
+        <!-- todo: 切换切图 "你还不是代理商" -->
+        <image class="popup-bg" src="@/static/image/center/activate-code.png"></image>
+        <view class="flex popup-btns">
+          <button plain class="btn-simple" @click="close">
+            <image class="popup-btn" src="@/static/image/center/cancel.png"></image>
+          </button>
+          <button plain class="btn-simple" @click="mode = 'activate'" >
+            <image class="popup-btn" src="@/static/image/center/activate.png"></image>
+          </button>
+        </view>
+      </template>
+    </view>
+  </uv-popup>
+</template>
+
+<script>
+	export default {
+    props: {
+      isAgent: {
+        type: String,
+        default: null
+      }
+    },
+		data() {
+			return {
+        mode: '',
+        activateCode: '',
+      }
+    },
+    methods: {
+      open(isAgent) {
+        this.mode = isAgent ? 'activate' : ''
+        this.$refs.popup.open();
+      },
+      close() {
+        this.$refs.popup.close();
+      },
+      onConfirm() {
+        // todo
+
+        // submit activateCode and update userInfo
+
+        this.close()
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+.content {
+  position: relative;
+  flex-direction: column;
+  width: 570rpx;
+}
+
+.popup {
+  &-bg {
+    width: 514rpx; height: 355rpx;
+  }
+
+  &-btns {
+    justify-content: space-between; 
+    margin-top: 56rpx;
+    width: 100%;
+  }
+
+  &-btn {
+    width: 265rpx; 
+    height: 84rpx;
+  }
+}
+</style>

pages/index/center.vue

@@ -42,7 +42,7 @@
 							将于<text class="activate-highlight">{{ agentDeadline }}</text>到期
 						</view>
 					</view>
-					<view class="btn-activate">
+					<view class="btn-activate" @click="onActivate">
 						<image src="@/static/image/center/btn-activate-again.png"></image>
 					</view>
 				</template>
@@ -50,7 +50,7 @@
 					<view class="activate-tips">
 						升级成为代理商享受更多权益
 					</view>
-					<view class="btn-activate">
+					<view class="btn-activate" @click="onActivate">
 						<image src="@/static/image/center/btn-activate.png"></image>
 					</view>
 				</template>
@@ -131,6 +131,8 @@
 			<image src="@/static/image/center/service.png" mode=""></image>
 		</view>
 
+		<popupActivate ref="popupActivate"></popupActivate>
+
 		<tabber select="center" />
 	</view>
 </template>
@@ -140,7 +142,7 @@
 	import {
 		mapGetters
 	} from 'vuex'
-	import userShopCommission from '@/components/userShop/userShopCommission.vue'
+	import popupActivate from '@/components/center/popupActivate.vue'
 	
 	const URL_MAPPING = { // state -> url
 		'-1': '/pages_order/sharing/personal',
@@ -152,14 +154,14 @@
 	export default {
 		components: {
 			tabber,
-			userShopCommission,
+			popupActivate,
 		},
 		computed: {
 			...mapGetters(['userShop']),
 		},
 		data() {
 			return {
-				isAgent: true,
+				isAgent: false,
 				agentDeadline: '2025年12月31日',
 				notice: '如果您在使用中有任何问题或建议，请联系客服',
 				updateList: [
@@ -235,13 +237,13 @@
 				// todo
 			},
 			onActivate() {
-				// todo
+				this.$refs.popupActivate.open(this.isAgent)
 			},
 			goToSharingDetail(id, state) {
 				uni.navigateTo({
 					url: `${URL_MAPPING[state]}?id=${id}`
 				})
-			}
+			},
 		}
 	}
 </script>