设置界面，添加绑定手机号界面

src/pages.json

@@ -474,6 +474,47 @@
 		}
 	],
 	"subPackages": [
+		{
+			"root": "setting",
+			"pages": [
+				{
+					"path": "myNew/index",
+					"style": {
+						"navigationBarTitleText": "设置",
+						"navigationBarBackgroundColor": "#2cb8d4",
+						"navigationBarTextStyle": "white",
+						"app-plus": {
+							"softinputNavBar": "none",
+							"titleNView": false
+						}
+					}
+				},
+				{
+					"path": "myNew/security",
+					"style": {
+						"navigationBarTitleText": "账号安全",
+						"navigationBarBackgroundColor": "#2cb8d4",
+						"navigationBarTextStyle": "white",
+						"app-plus": {
+							"softinputNavBar": "none",
+							"titleNView": false
+						}
+					}
+				},
+				{
+					"path": "myNew/phone",
+					"style": {
+						"navigationBarTitleText": "绑定手机号",
+						"navigationBarBackgroundColor": "#2cb8d4",
+						"navigationBarTextStyle": "white",
+						"app-plus": {
+							"softinputNavBar": "none",
+							"titleNView": false
+						}
+					}
+				}
+			]
+		},
 		{
 			"root": "points",
             "pages": [
@@ -568,7 +609,7 @@
 							"softinputNavBar": "none",
 							"titleNView": false
 						}
-						
+
 					}
 				},{
 					"path": "productDetails/paymentSuccessful",

src/pages/index/index.vue

@@ -388,6 +388,11 @@ export default {
           if (res.data.code == 200) {
             uni.setStorageSync('wx_copenid', res.data.data.copenid)
             uni.setStorageSync('access-token', res.data.data.token)
+            if(res.data.data.cphone === null){
+              uni.navigateTo({
+                url: '/setting/myNew/phone'
+              })
+            }
           }
         })
       }
@@ -846,4 +851,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/pages/my/my.vue

@@ -10,7 +10,7 @@
 					<view class="level" v-if="userInfo.cNickName">一星用户</view>
 				</view>
 			</view>
-			<view class="r flex flex-col">
+			<view class="r flex flex-col" v-if="userInfo.cNickName" @click="goSettPage()">
 				<u-icon name="setting" color="#000" size="36rpx"></u-icon>
 				<text>设置</text>
 			</view>
@@ -30,7 +30,7 @@
 								fontSize: '22rpx',
 								color: '#fff',
 								background: 'linear-gradient(90deg, #FB8948 0%, #FE5B31 100%)'
-							}" 
+							}"
 							@click="goPay"
 						>去使用</u-button>
 					</view>
@@ -50,7 +50,7 @@
 							fontSize: '22rpx',
 							color: '#fff',
 							background: 'var(--theme-color-gradient)'
-						}" 
+						}"
 						@click="goPay"
 					>去充值</u-button>
 				</view>
@@ -68,7 +68,7 @@
 			<view class="order-card">
 				<view class="item" v-for="(item, index) in orderIcons" :key="index" @click="goToPage(item, 'tab')">
 					<u-badge v-if="item.badge > 0" absolute
-						:value="item.badge" 
+						:value="item.badge"
 						:offset="[-4, -10]"
 						:customStyle="{ zIndex: 1 }"
 					></u-badge>
@@ -107,7 +107,7 @@
 			<swiper class="swiper" :indicator-dots="true" indicator-color="#D9D9D9" indicator-active-color="#0879FF">
 				<swiper-item v-for="(sitem, i) in splitData" :key="i">
 					<u-grid :col="4" :border="false">
-						<u-grid-item v-for="(item, k) in sitem" :key="k" 
+						<u-grid-item v-for="(item, k) in sitem" :key="k"
 							customStyle="padding-top: 10rpx; padding-bottom: 20rpx;"
 							@click="goToPage(item)">
 							<image class="icon" :src="item.icon" mode="aspectFit"></image>
@@ -118,11 +118,11 @@
 			</swiper>
 		</view>
 
-		<u-modal :show="show" 
-			title="退回提示" 
+		<u-modal :show="show"
+			title="退回提示"
 			:content="modalText.content"
-			showCancelButton 
-			confirmText="去修改" 
+			showCancelButton
+			confirmText="去修改"
 			confirmColor="#27aea7"
 			@cancel="show = false"
 			@confirm="onConfirm"
@@ -146,7 +146,7 @@ export default {
 			show: false,
 			userInfo: {},
 			// 优惠券数量
-			couponNum: 0, 
+			couponNum: 0,
 			// 收藏数量
 			collectNum: 0,
 			// 审核
@@ -194,7 +194,7 @@ export default {
 		}
 	},
 	onLoad() {
-		
+
 	},
 	onShow() {
 		this.getData();
@@ -241,7 +241,7 @@ export default {
 					this.modalText.content = res.data.data.reasonRefusal;
 					// 审核已通过
 					if (this.auditStatus == 1) {
-						
+
 					}
 				} else {
 					this.auditStatus = -1;
@@ -323,6 +323,13 @@ export default {
       uni.navigateTo({
         url: '/points/home/index'
       });
+    },
+    //跳转至设置界面
+    goSettPage(){
+      if (!this.$utils.checkLogin({ type: 'modal' })) return;
+      uni.navigateTo({
+        url: '/setting/myNew/index'
+      });
     },
 		onLogin() {
 			if (this.$utils.checkLogin()) return;
@@ -424,7 +431,7 @@ export default {
 			border: 1rpx solid #FFFFFF;
 			border-radius: 20rpx;
 			background: linear-gradient(180deg, #FFFDFB 0%, #FFFFFF 100%);
-		
+
 			.num {
 				font-weight: 400;
 				font-size: 22rpx;
@@ -578,7 +585,7 @@ export default {
 		display: flex;
 		align-items: center;
 		justify-content: space-around;
-		
+
 		.item {
 			position: relative;
 			display: flex;
@@ -599,4 +606,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

src/setting/myNew/index.vue

@@ -0,0 +1,111 @@
+<script>
+import {logout, getInfo} from '@/api/index.js'
+export default {
+  data() {
+    return {
+      userInfo: {},
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  methods:{
+    // 用户数据
+    getData() {
+      this.userInfo = {};
+      getInfo().then(res => {
+        if (res.data.code == 200) {
+          this.userInfo = res.data.data;
+          uni.setStorageSync('wx_phone', res.data.data.cPhone);
+        }
+      })
+    },
+    goSetting(){
+      uni.navigateTo({
+        url: '/setting/myNew/security'
+      })
+    },
+    // 退出登录
+    onLogout() {
+      uni.showModal({
+        title: '确定退出登录吗',
+        success: (res) => {
+          if (res.confirm) {
+            logout().then(res => {
+              if (res.data.code == 200) {
+                uni.removeStorageSync('access-token')
+                this.$router.go(0)
+                uni.showToast({
+                  title: '已退出登录',
+                  icon: 'none'
+                })
+              }
+            })
+          }
+        }
+      })
+    },
+  }
+}
+</script>
+
+<template>
+  <view class="sett-box">
+    <view class="userInfo">
+      <u-avatar :src="userInfo.cIcon" size="80rpx"/>
+      <text>{{ userInfo.cNickName }}</text>
+    </view>
+    <u-cell :titleStyle="{fontWeight: 500}" title="账号安全" isLink class="security" @click="goSetting()"></u-cell>
+    <view class="logOut" @click="onLogout()">退出登录</view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.sett-box{
+  width: 750rpx;
+  height: 100vh;
+  background: #F5F8F8;
+  padding:36rpx 40rpx;
+  position: relative;
+  .userInfo{
+    width: 678rpx;
+    height: 128rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx;
+    padding: 24rpx;
+    line-height: 80rpx;
+    display: flex;
+    margin-bottom:24rpx;
+    text{
+      margin-left: 20rpx;
+      display: inline-block;
+    }
+  }
+  .security{
+    width: 678rpx;
+    height: 88rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx 24rpx 24rpx 24rpx;
+    ::v-deep .u-cell__body{
+      padding: 25rpx 30rpx;
+    }
+    ::v-deep .u-line{
+      display: none;
+    }
+  }
+  .logOut{
+    width: 670rpx;
+    height: 84rpx;
+    background: #FFFFFF;
+    border-radius: 60rpx 60rpx 60rpx 60rpx;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 28rpx;
+    color: #333333;
+    line-height: 84rpx;
+    text-align: center;
+    position: absolute;
+    bottom: 110rpx;
+  }
+}
+</style>

src/setting/myNew/phone.vue

@@ -0,0 +1,213 @@
+<script>
+export default {
+  data() {
+    return {
+      phone: '',
+      code: '',
+      countdown: 60,
+      timer: null,
+      isSendingCode: false,
+      isBinding: false
+    }
+  },
+  computed: {
+    canGetCode() {
+      return this.phone && this.validatePhone(this.phone) && !this.isSendingCode && this.countdown === 60
+    },
+    canBind() {
+      return this.phone && this.validatePhone(this.phone) && this.code && this.code.length === 6 && !this.isBinding
+    }
+  },
+  methods: {
+    validatePhone(phone) {
+      const reg = /^1[3-9]\d{9}$/
+      return reg.test(phone)
+    },
+    getCode() {
+      if (this.isSendingCode || this.countdown < 60) return
+
+      if (!this.phone) {
+        uni.showToast({
+          title: '请输入手机号',
+          icon: 'none'
+        })
+        return
+      }
+
+      if (!this.validatePhone(this.phone)) {
+        uni.showToast({
+          title: '请输入正确的手机号',
+          icon: 'none'
+        })
+        return
+      }
+
+      this.isSendingCode = true
+
+      uni.showToast({
+        title: '验证码已发送',
+        icon: 'success'
+      })
+
+      this.startCountdown()
+      this.isSendingCode = false
+    },
+    startCountdown() {
+      this.countdown = 60
+      this.timer = setInterval(() => {
+        this.countdown--
+        if (this.countdown <= 0) {
+          clearInterval(this.timer)
+          this.countdown = 60
+          this.timer = null
+        }
+      }, 1000)
+    },
+    bindPhone() {
+      if (this.isBinding) return
+
+      if (!this.phone) {
+        uni.showToast({
+          title: '请输入手机号',
+          icon: 'none'
+        })
+        return
+      }
+
+      if (!this.validatePhone(this.phone)) {
+        uni.showToast({
+          title: '请输入正确的手机号',
+          icon: 'none'
+        })
+        return
+      }
+
+      if (!this.code || this.code.length !== 6) {
+        uni.showToast({
+          title: '请输入6位验证码',
+          icon: 'none'
+        })
+        return
+      }
+
+      this.isBinding = true
+
+      uni.showToast({
+        title: '绑定成功',
+        icon: 'success'
+      })
+
+      setTimeout(() => {
+        uni.setStorageSync('wx_phone', this.phone)
+        uni.navigateBack()
+      }, 1500)
+    }
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+  }
+}
+</script>
+
+<template>
+  <view class="sett-box">
+    <view class="input-box">
+      <u-input
+        v-model="phone"
+        type="number"
+        border="none"
+        maxlength="11"
+        placeholder="请输入手机号"
+        placeholder-style="color: #999"
+        class="input-item"
+      ></u-input>
+    </view>
+
+    <view class="input-box code-box">
+      <u-input
+        v-model="code"
+        type="number"
+        border="none"
+        maxlength="6"
+        placeholder="请输入手机验证码"
+        placeholder-style="color: #999"
+        class="input-item code-input"
+      ></u-input>
+      <view class="code-btn" :class="{ disabled: !canGetCode }" @click="getCode">
+        <text v-if="countdown === 60">获取验证码</text>
+        <text v-else>{{ countdown }}s 后重新获取</text>
+      </view>
+    </view>
+
+    <view class="bind-btn">
+      <u-button
+        :disabled="!canBind"
+        :loading="isBinding"
+        type="primary"
+        @click="bindPhone">绑定</u-button>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.sett-box{
+  width: 750rpx;
+  height: 100vh;
+  background: #F5F8F8;
+  padding:36rpx 40rpx;
+}
+
+.input-box {
+  width: 678rpx;
+  height: 92rpx;
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  margin-bottom: 36rpx;
+  display: flex;
+  align-items: center;
+  padding: 0 30rpx;
+
+  .input-item {
+    flex: 1;
+  }
+}
+
+.code-box {
+  .code-input {
+    flex: 1;
+  }
+
+  .code-btn {
+    width: 200rpx;
+    text-align: right;
+    font-size: 28rpx;
+    color: #2DB1A8;
+    line-height: 88rpx;
+
+    &.disabled {
+      color: #2DB1A8;
+    }
+  }
+}
+
+.bind-btn {
+  margin-top: 120rpx;
+
+  ::v-deep .u-button {
+    width: 678rpx;
+    height: 84rpx;
+    border-radius: 60rpx;
+    font-size: 28rpx;
+    background: linear-gradient(90deg, #2DB1A8 0%, #33BCB0 100%);
+    border: none;
+  }
+
+  ::v-deep .u-button--disabled {
+    background: #E0E0E0 !important;
+    color: #999 !important;
+  }
+}
+</style>

src/setting/myNew/security.vue

@@ -0,0 +1,44 @@
+<script>
+export default {
+  data() {
+    return {
+      phone:uni.getStorageSync('wx_phone')
+    }
+  },
+  methods:{
+    goSettPhone(){
+      uni.navigateTo({
+        url: '/setting/myNew/phone'
+      })
+    },
+  }
+}
+</script>
+
+<template>
+  <view class="sett-box">
+    <u-cell :titleStyle="{fontWeight: 500}" title="手机号码" :value="phone || '去绑定'" isLink class="security" @click="goSettPhone()"></u-cell>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.sett-box{
+  width: 750rpx;
+  height: 100vh;
+  background: #F5F8F8;
+  padding:36rpx 40rpx;
+  position: relative;
+  .security{
+    width: 678rpx;
+    height: 88rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx 24rpx 24rpx 24rpx;
+    ::v-deep .u-cell__body{
+      padding: 25rpx 30rpx;
+    }
+    ::v-deep .u-line{
+      display: none;
+    }
+  }
+}
+</style>