【第一版开发】

1.登录页面和用户中心增加昵称相关的处理逻辑
2.用户订阅源配置页面增加数据接口处理

src/common/cache.js

@@ -6,7 +6,12 @@ const cacheKey = {
     /**
      * 登录凭据
      */
-    TOKEN: "token"
+    TOKEN: "token",
+
+    /**
+     * 昵称
+     */
+    NICKNAME: "nickname"
 }
 
 export default cacheKey;

src/pages/login.vue

@@ -20,6 +20,7 @@
 
 <script setup>
 import { ref } from 'vue';
+import { onShow } from '@dcloudio/uni-app';
 import { userApi } from "@/apis/apis.js";
 import router from "@/common/router.js";
 import cacheKey from "@/common/cache.js";
@@ -75,6 +76,7 @@ const login = async () => {
 
     // 保存用户信息(token)
     uni.setStorageSync(cacheKey.TOKEN, token);
+    uni.setStorageSync(cacheKey.NICKNAME, formData.nickname);
 
     uni.showToast({
       title: "登录成功",
@@ -91,6 +93,14 @@ const login = async () => {
     uni.hideLoading();
   }
 };
+
+// 生命周期
+onShow(() => {
+  let nickname = uni.getStorageSync(cacheKey.NICKNAME);
+  if (nickname) {
+    loginFormData.value.nickname = nickname;
+  }
+});
 </script>
 
 <style lang="scss" scoped>

src/pages/subscriptionUserConfig.vue

@@ -2,16 +2,19 @@
   <view>
     <!-- 已订阅列表 -->
     <uni-list>
-      <uni-list-item v-for="(item, index) in productList" :key="item.id">
+      <uni-list-item v-for="(item, index) in subscriptionUserConfigList" :key="item.id">
         <template v-slot:body>
           <view class="item-box">
-            <view class="title">{{ item.title }}</view>
-            <view class="description">{{ item.subTitle }}</view>
+            <view @click="goSubscriptionSourceDetail(item)">
+              <view class="title">{{ item.title }}</view>
+              <view class="description">{{ item.subTitle }}</view>
+            </view>
             <view class="func-box">
-              <view class="date">剩余有效期：7天</view>
+              <view class="date">剩余有效期：{{ item.remainingDays }}天</view>
               <view class="switch-text">
-                <span>通知状态：开启中</span>
-                <switch color="#FFD800" style="transform:scale(0.7)" />
+                <span>通知状态：{{ item.pushOption == 'ENABLED' ? '开启中' : '关闭' }}</span>
+                <switch color="#FFD800" style="transform:scale(0.7)" :checked="item.pushOption == 'ENABLED'"
+                  @change="e => pushOptionSwitchChange(e, item)" />
               </view>
             </view>
           </view>
@@ -57,6 +60,18 @@ const goSubscriptionSourceDetail = (dataObj) => {
   });
 };
 
+/**
+ * 推送选项切换
+ * @param e switch开关事件
+ */
+const pushOptionSwitchChange = async (e, configObj) => {
+  await subscriptionApi.modifyPushOption({
+    id: configObj.id,
+    pushOption: e.detail.value ? 'ENABLED' : 'DISABLED'
+  });
+  loadData();
+}
+
 // 生命周期
 onShow(() => {
   loadData();
@@ -70,6 +85,8 @@ onPullDownRefresh(() => {
 
 <style lang="scss" scoped>
 .item-box {
+  width: 100%;
+
   .title {
     font-size: 29.17rpx;
     font-weight: 400;

src/pages/userCenter.vue

@@ -14,7 +14,7 @@
                 </view>
                 <span class="nickname">{{ userInfo.nickname }}</span>
               </view>
-              <view class="avatar-func" v-if="loginStatus">修改</view>
+              <view class="avatar-func" v-if="loginStatus" @click="modifyNickname">修改</view>
               <view class="avatar-func" v-else @click="login()">登录</view>
             </view>
           </template>
@@ -49,6 +49,24 @@
       </uni-list>
     </view>
 
+    <!-- 修改昵称弹出框 -->
+    <uni-popup ref="nicknameInputDialog" type="dialog" :is-mask-click="false">
+      <uni-popup-dialog mode="input" :before-close="true" title="修改昵称" confirmText="保存" @confirm="nicknameFormConfirm"
+        @close="nicknameFormClose">
+        <view class=".nickname-dialog">
+          <input class=".nickname" v-model="nicknameFormData.nickname" placeholder="请输入昵称" />
+        </view>
+
+        <view style="display: none">
+          <uni-forms ref="nicknameForm" :modelValue="nicknameFormData" :rules="nicknameFormRules" label-position="top"
+            :label-width="150" err-show-type="modal">
+            <uni-forms-item name="nickname">
+              <uni-easyinput type="text" placeholder="请输入昵称" v-model="nicknameFormData.nickname"></uni-easyinput>
+            </uni-forms-item>
+          </uni-forms>
+        </view>
+      </uni-popup-dialog>
+    </uni-popup>
   </view>
 </template>
 
@@ -60,6 +78,16 @@ import router from "@/common/router.js";
 import { userApi } from "@/apis/apis.js";
 import Avatar from 'vue-avatar/src/Avatar.vue';
 
+// 组件
+/**
+ * 昵称弹出框
+ */
+const nicknameInputDialog = ref(null);
+
+/**
+ * 昵称表单
+ */
+const nicknameForm = ref(null);
 
 // 属性
 /**
@@ -74,6 +102,31 @@ const userInfo = ref({
   nickname: ''
 });
 
+/**
+ * 昵称表单数据
+ */
+const nicknameFormData = ref({
+  nickname: null,
+});
+
+/**
+ * 昵称表单验证规则
+ */
+const nicknameFormRules = ref({
+  nickname: {
+    rules: [
+      {
+        required: true,
+        errorMessage: "昵称不能为空",
+      },
+      {
+        maxLength: 30,
+        errorMessage: "昵称不能超过{maxLength}个字符",
+      },
+    ],
+  },
+});
+
 // 方法
 /**
  * 登录
@@ -96,7 +149,10 @@ const logout = () => {
       if (res.cancel) {
         return;
       }
+      // 移除用户信息
       uni.removeStorageSync(cacheKey.TOKEN);
+      uni.removeStorageSync(cacheKey.NICKNAME);
+      // 跳转到主页
       uni.reLaunch({
         url: router.SUBSCRIPTION_SOURCE_MARKET_PAGE,
       });
@@ -111,6 +167,35 @@ const fetchUserInfo = async () => {
   userInfo.value = await userApi.queryUserInfo();
 };
 
+/**
+ * 修改昵称 
+ */
+const modifyNickname = (e) => {
+  nicknameFormData.value.nickname = userInfo.value.nickname;
+  nicknameInputDialog.value.open();
+};
+
+/**
+ * 昵称修改表单 提交
+ */
+const nicknameFormConfirm = async () => {
+  let data = await nicknameForm.value.validate();
+  await userApi.modifyNickname(data);
+  userInfo.value.nickname = nicknameFormData.value.nickname;
+  nicknameInputDialog.value.close();
+  uni.showToast({
+    title: "修改成功",
+    icon: "success",
+  });
+};
+
+/**
+ * 昵称修改表单 关闭
+ */
+const nicknameFormClose = async () => {
+  nicknameInputDialog.value.close();
+};
+
 // 生命周期
 onShow(() => {
   // 根据登录凭据判断登录状态
@@ -161,4 +246,25 @@ onShow(() => {
     color: #000000;
   }
 }
+
+.nickname-dialog {
+  width: 100%;
+  height: 100rpx;
+  border-radius: 8px;
+  background: #ffffff;
+  // 阴影
+  border: 0.5px solid #e4e4e4;
+
+  input {
+    width: 100%;
+    height: 100%;
+    font-size: 36rpx;
+    font-weight: 700;
+    letter-spacing: 0rpx;
+    line-height: 52.13rpx;
+    color: #000000;
+    border-radius: 24rpx;
+    text-align: center;
+  }
+}
 </style>