feat:提交代码

components.d.ts

@@ -20,6 +20,7 @@ declare module '@vue/runtime-core' {
     CXBEmpty: typeof import('./src/components/CXBEmpty/CXBEmpty.vue')['default']
     CXBNotLoginButton: typeof import('./src/components/CXBNotLoginButton/CXBNotLoginButton.vue')['default']
     CXBPhoneLoginButton: typeof import('./src/components/CXBPhoneLoginButton/CXBPhoneLoginButton.vue')['default']
+    CXBPhonePopup: typeof import('./src/components/CXBPhonePopup/CXBPhonePopup.vue')['default']
     CXBPrivacyPopup: typeof import('./src/components/CXBPrivacyPopup/CXBPrivacyPopup.vue')['default']
     CXBSkuPopup: typeof import('./src/components/CXBSkuPopup/CXBSkuPopup.vue')['default']
     CXBUserINdexHeader: typeof import('./src/components/CXBUserIndexHeader/CXBUserINdexHeader.vue')['default']

src/components/CXBPhonePopup/CXBPhonePopup.vue

@@ -0,0 +1,166 @@
+<template>
+
+
+  <view class="privacy" v-if="data.showPrivacy">
+    <view class="content">
+      <view class="title">隐私保护指引</view>
+      <view class="des">
+        在使用当前小程序服务之前，请仔细阅读
+        <text class="link" @click="openPrivacyContract">{{ data.privacyContractName }}</text>
+        。如果你同意{{ data.privacyContractName }}，请点击“同意”开始使用。
+      </view>
+      <view class="btns">
+        <button class="item " @click="exitMiniProgram">拒绝</button>
+        <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+	
+	
+const isShowOverlay = ref(true)
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  today: {
+    type: Number,
+    default: 0
+  },
+  day: {
+    type: Number,
+    default: 0
+  }
+})
+
+const show = ref(props.show || false)
+
+
+// 同意隐私协议
+function handleAgreePrivacyAuthorization() {
+  // const that = this;
+  wx.requirePrivacyAuthorize({
+    success: res => {
+      data.showPrivacy = false;
+      uni.setStorageSync('PRIVACY', {
+        privacyContractName: data.privacyContractName,
+        showPrivacy: false
+      })
+      // getApp().globalData.showPrivacy = false;
+    }
+  });
+}
+
+
+// 拒绝隐私协议
+function exitMiniProgram() {
+  const that = this;
+  uni.showModal({
+    content: '如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗?',
+    success: res => {
+      if (res.confirm) {
+        that.showPrivacy = false;
+        uni.exitMiniProgram({
+          success: () => {
+            console.log('退出小程序成功');
+          }
+        });
+      }
+    }
+  });
+}
+// 跳转协议页面
+function openPrivacyContract() {
+  wx.openPrivacyContract({
+    fail: () => {
+      uni.showToast({
+        title: '网络错误',
+        icon: 'error'
+      });
+    }
+  });
+}
+
+</script>
+
+<style lang="scss" scoped>
+.privacy {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .content {
+    width: 85vw;
+    padding: 50rpx;
+    box-sizing: border-box;
+    background: #fff;
+    border-radius: 16rpx;
+    .title {
+      text-align: center;
+      color: #333;
+      font-weight: bold;
+      font-size: 34rpx;
+    }
+    .des {
+      font-size: 26rpx;
+      color: #666;
+      margin-top: 40rpx;
+      text-align: justify;
+      line-height: 1.6;
+      .link {
+        color: #F94032;
+        text-decoration: underline;
+      }
+    }
+    .btns {
+      margin-top: 60rpx;
+      display: flex;
+      justify-content: space-between;
+      .item {
+        justify-content: space-between;
+        width: 244rpx;
+        height: 80rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 16rpx;
+        box-sizing: border-box;
+        border: none;
+        border: 1px solid #ccc;
+
+      }
+      .reject {
+        background: #f4f4f5;
+        color: #909399;
+      }
+      .agree {
+        background: #F94032;
+        color: #fff;
+      }
+    }
+  }
+}
+button {
+  margin: 0;
+  padding: 0;
+  outline: none;
+  border-radius: 0;
+  background-color: transparent;
+  line-height: inherit;
+}
+button::after {
+  border: none;
+}
+
+
+</style>

src/subPages/pages/my-profile/changePhone.vue

@@ -0,0 +1,229 @@
+<template>
+	<div  class="login-container">
+		<view class="input-content" >
+			<nut-input disabled v-model="state.oldPhone" placeholder="请输入新手机号" clearable type="number">
+				<template #right>
+					<nut-button type='primary' size="small" @click="handleGetCode" :loading="state.isAuthVerify">
+						{{ state.buttonText }}
+					</nut-button>
+				</template>
+			</nut-input>
+			<nut-input v-model="state.phone" placeholder="请输入新手机号" clearable type="number">
+			</nut-input>
+			<nut-input v-model="state.code" placeholder="请输入验证码" clearable type="number">
+			</nut-input>
+		</view>
+		<div class="flex w-full" >
+			<div class="p-3 w-full">
+				<nut-button type="primary" @click="handleLogin" block :disabled="!isFormVerify">确定</nut-button>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import {authVerify } from "~/apis/auth.api";
+	import {updateUserInfo} from "~/apis/user";
+	import Cache from "~/utils/cache";
+	import { IMG_CDN_URL } from '~/config/app'
+	import { useUserStore } from "~/stores/userStore";
+	const state = reactive({
+		phone: '',
+		oldPhone:'',
+		code: '',
+		spread: '',
+		pwd: '',
+		isAuthVerify: false,
+		buttonText: '获取验证码',
+	})
+	
+	onLoad((options : any) => {
+		state.oldPhone = options.userPhone
+		console.log("===options.userPhone",options.userPhone);
+	})
+
+	function sendCode() {
+		if (state.isAuthVerify) return
+		state.isAuthVerify = true
+		let n = 60;
+		state.buttonText = "剩余 " + n + "s";
+		const run = setInterval(() => {
+			n = n - 1;
+			if (n < 0) {
+				clearInterval(run);
+				n = 0
+			}
+			state.buttonText = "剩余 " + n + "s";
+			if (state.buttonText === "剩余 " + 0 + "s") {
+				state.isAuthVerify = false;
+				state.buttonText = "重新获取";
+			}
+		}, 1000);
+	}
+
+	const isFormVerify = computed(() => {
+		if (state.phone !== '' && state.code !== '') {
+			return true
+		}
+	})
+	
+	
+	
+	function handleGetCode() {
+		if (!state.oldPhone) {
+			return uni.showToast({
+				title: '请填写手机号码',
+				icon: 'none'
+			})
+		}
+		if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(state.oldPhone)) {
+			return uni.showToast({
+				title: '请输入正确的手机号码',
+				icon: 'none'
+			})
+		}
+
+		state.isAuthVerify = true
+		authVerify(state.oldPhone).then(res => {
+			state.isAuthVerify = false
+			sendCode()
+		}).catch(res => {
+		})
+	}
+	
+	
+	function handleLogin() {
+		uni.showLoading({
+			title: '提交中...'
+		});
+		
+		if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(state.phone)) {
+			return uni.showToast({
+				title: '请输入正确的手机号码',
+				icon: 'none'
+			})
+		}
+		
+		let params = {
+			phone: state.phone,
+			sms_code: state.code,
+		}
+		updateUserInfo({
+			...params
+		}).then(authRes => {
+			uni.showToast({
+			  title: '修改成功',
+			  icon: 'none'
+			}).then(() => {
+			//	uni.$emit('isUploadInfo')
+			  setTimeout(() => {
+			    const userStore = useUserStore()
+			    userStore.logout()
+			    uni.switchTab({
+			        url: '/pages/home/index'
+			    })
+			  }, 200)
+			})
+		}).catch((errorMsg) => {
+			console.log(errorMsg)
+			uni.showToast({
+				title: errorMsg,
+				icon: 'none'
+			})
+		})
+	}
+	
+	
+</script>
+
+<route lang="yaml">
+style:
+  navigationBarTitleText: 修改手机号
+</route>
+
+<style>
+	page {
+		background: #f8f8f8;
+	}
+</style>
+<style scoped lang="scss">
+	.login-container {
+		display: flex;
+		flex-direction: column;
+		
+		
+		.phone-content{
+			display: flex;
+			flex-direction: column;
+			margin-top: 20rpx;
+			padding-top: 48rpx;
+			padding-left: 40rpx;
+			background: #FFFFFF;
+			border-radius: 8rpx 8rpx 0rpx 0rpx;
+		}
+		
+		.item-title{
+			font-size:22rpx ;
+			color: #7B7B7B;
+			margin-bottom: 28rpx;
+		}
+		
+		.item-value{
+			font-size:30rpx ;
+			color: #333;
+		}
+		
+		.item-content{
+			display: flex;
+			width: 100%;
+			flex-direction: row;
+			align-items: center;
+			
+		}
+		.item-line{
+			height: 1rpx;
+			color: #D8D8D8;
+			width: 100%;
+			margin-top: 36rpx;
+			margin-bottom: 36rpx;
+		}
+
+		.input-content {
+			display: flex;
+			flex-direction: column;
+			width:100%;
+		}
+
+		.logo-icon {
+			width: 200rpx;
+			height: 200rpx;
+			margin-top: 160rpx;
+			margin-bottom: 120rpx;
+		}
+
+		.choose-content {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			margin-bottom: 20rpx;
+
+			.choose-item {
+				font-size: 32rpx;
+				color: #333;
+				padding: 20rpx;
+				font-weight: bolder;
+			}
+
+			.choose-default-item {
+				font-size: 32rpx;
+				color: #999;
+				padding: 20rpx;
+			}
+
+			.choose-line {
+				width: 1rpx;
+				background-color: #999;
+				height: 30rpx;
+			}
+		}
+	}
+</style>

src/subPages/pages/my-profile/index.vue

@@ -3,7 +3,6 @@
 import {UPLOAD_URL} from "~/utils/http";
 import {getToken} from "~/utils/auth";
 import {updateUserInfo} from "~/apis/user";
-
 const userStore = useUserStore()
 const showSexPicker = ref(false)
 const sexPopupValue = ref()
@@ -13,7 +12,6 @@ const sexColumns = ref([
 ])
 
 const formData = reactive({
-  phone: '',
   nickname: '',
   sex: '1',
   birthday: '',
@@ -22,6 +20,7 @@ const formData = reactive({
   tempFile: { path: '' },
   mark: ''
 })
+const userPhone=ref('')
 // const sex
 const sexPopupConfirm = ({ selectedValue, selectedOptions }) => {
   console.log(selectedValue)
@@ -50,10 +49,32 @@ onLoad(async () => {
     formData.sex = userInfo.sex
     formData.avatar = userInfo.avatar
     formData.mark = userInfo.mark
-    formData.phone = userInfo.phone
+    userPhone.value = userInfo.phone
+	console.log("=== userPhone.value", userPhone.value);
   }
+  
+  // uni.$on('isUploadInfo',async ()=>{
+  // 	 await userStore.getUserInfo()
+  // 	 console.log(userStore.userInfo)
+  // 	if (userStore.userInfo) {
+  // 	  const userInfo = userStore.userInfo
+  // 	  formData.nickname = userInfo.nickname
+  // 	  formData.birthday = userInfo.birthday
+  // 	  formData.sex = userInfo.sex
+  // 	  formData.avatar = userInfo.avatar
+  // 	  formData.mark = userInfo.mark
+  // 	  userPhone.value = userInfo.phone
+  // 	}
+  // })
 })
 
+function onPhoneClick(){
+	console.log("===userPhone.value",userPhone.value);
+	uni.navigateTo({
+		url:`/subPages/pages/my-profile/changePhone?userPhone=${userPhone.value}`
+	})
+}
+
 function onChooseAvatar({ detail }) {
   console.log()
   formData.avatar = detail.avatarUrl
@@ -99,10 +120,8 @@ function handleSubmit() {
     avatar: formData.avatar,
     nickname: formData.nickname,
     sex: formData.sex,
-    // birthday: formData.birthday,
     birthday: currentDate.value,
     mark: formData.mark,
-	phone: formData.phone
   }).then(res => {
     if (res) {
       uni.showToast({
@@ -199,8 +218,8 @@ function handleSubmit() {
     <div
         class="bg-white rounded-md text-sm flex justify-between p-3  f-hairline-bottom">
       <div class="">手机号</div>
-      <div class="flex items-center">
-        <div><input placeholder="请填写手机号" v-model="formData.phone" class="text-right"/></div>
+      <div class="flex items-center" @click="onPhoneClick">
+        <div><input disabled="true" placeholder="请填写手机号" v-model="userPhone" class="text-right"/></div>
         <div
             class="f-text-color-2 i-tabler-chevron-right transform transition-300"
         />
@@ -228,6 +247,7 @@ function handleSubmit() {
     </div>
 
   </div>
+  
 </template>
 
 

uni-pages.d.ts

@@ -113,6 +113,7 @@ interface NavigateToOptions {
        "/subPages/pages/movies/nearbyCinemas" |
        "/subPages/pages/movies/orderDetail" |
        "/subPages/pages/movies/orderList" |
+       "/subPages/pages/my-profile/changePhone" |
        "/subPages/pages/my-profile/index" |
        "/subPages/pages/order/comment" |
        "/subPages/pages/order/detail" |