chanyishenghuo-uniapp/pages/user/PersonalData/index.vue

<template>
  <view class="personal-data">
    <view class="wrapper">
      <view class="wrapList">
        <view class="item acea-row row-between-wrapper on">
          <view class="picTxt acea-row row-between-wrapper">
            <view class="pictrue" @tap="chooseImage">
              <div class="pictrue">
                <img :src="avatar" />
              </div>
              <!-- <image :src="`${$VUE_APP_RESOURCES_URL}/images/alter.png`" class="alter" /> -->
            </view>
            <view class="text">
              <view class="name line1">{{ userInfo.nickname }}</view>
              <view class="phone">
                绑定手机号：
                <text v-if="userInfo.phone">{{ userInfo.phone }}</text>
                <text v-else>未绑定</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="item acea-row row-between-wrapper">
        <view>昵称</view>
        <view class="input">
          <input type="text" disabled v-model="userInfo.nickname" />
        </view>
      </view>
			<view class="item acea-row row-between-wrapper">
			  <view>真实姓名</view>
			  <view class="input">
			    <input type="text"  placeholder="请填写真实姓名" placeholder-style="color:#EA533E" v-model="userInfo.realName" />
			  </view>
			</view>
			<view class="item acea-row row-between-wrapper">
			  <view>身份证号码</view>
			  <view class="input">
			    <input type="idcard" placeholder="请填写真实身份证号码" maxlength="18" v-model="userInfo.idCard" />
			  </view>
			</view>
      <!-- <view class="item acea-row row-between-wrapper">
        <view>ID号</view>
        <view class="input acea-row row-between-wrapper">
          <input type="text" :value="userInfo.uid" disabled class="id" />
          <text class="iconfont icon-suozi"></text>
        </view>
      </view> -->
      <view class="item acea-row row-between-wrapper">
        <view>手机号</view>
        <view class="input">
          <input type="text" v-if="userInfo.phone" v-model="userInfo.phone" />
          <input type="text" v-else placeholder="未绑定" v-model="userInfo.phone" disabled class="id" />
        </view>
      </view>
			<view class="item acea-row row-between-wrapper">
			  <view>验证码</view>
			  <view class="acea-row row-middle ">
			  	<view class="input-box acea-row row-middle row-right">
			  		<input type="text" v-model="verifyCode" maxlength="6" placeholder="请输入短信验证码" />
			  	</view>
			  	<view class="countdown" :class="disabled ? 'default' : ''" @click="sendCode">
			  		{{disabled ? second + '秒后重新发送' : '发送验证码'}}
			  	</view>
			  </view>
			</view>
			<view class="item acea-row row-between-wrapper">
			  <view>区域</view>
			  <view class="input">
			    <picker @change="bindPickerChange"  mode="region" :range="array">
							<view class="uni-input">{{city}}</view>
					</picker>
			  </view>
			</view>
			<view class="item acea-row row-between-wrapper">
			  <view>常住地址</view>
			  <view class="input">
			    <input type="text" v-model="addres" placeholder="请输入常住地址" />
			  </view>
			</view>
			<view class="item acea-row row-between-wrapper">
			  <view>紧急联系人</view>
			  <view class="input">
			    <input type="text" v-model="contacts" placeholder="请输入紧急联系人" />
			  </view>
			</view>
      <!-- 
        <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
          <view>密码</view>
          <view class="input acea-row row-between-wrapper">
            <text>点击修改密码</text>
            <text class="iconfont icon-suozi"></text>
          </view>
        </view>
      -->
    </view>
		<view class="tips">会员信息仅用于身份确认，不做他用。</view>
		<view class="argeement-box">
				<checkbox-group  @change="argeementClick">
					<checkbox value="1" style="transform:scale(0.7);position: relative; top: 3rpx;" :checked="isCheck" />
				</checkbox-group>
				<view class="acea-row">
					我已阅读并同意
					<navigator url="/pages/authorization/agreementPage"  open-type="navigate" style="color: rgb(255, 50, 50);">《用户协议及隐私政策》</navigator>
				</view>
		</view>
    <view class="modifyBnt" @click="submit">保存修改</view>
    <!-- #ifndef MP-WEIXIN -->
    <view
      class="logOut cart-color acea-row row-center-wrapper"
      @click="logout"
    >退出登录</view>
    <!-- #endif -->
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import { trim, isWeixin, chooseImage } from "@/utils";
import { getVerificationCode } from "@/api/serverTeacher"
import { VUE_APP_API_URL } from "@/config";
import {
  postUserEdit,
  getLogout,
  switchH5Login,
  getUserInfo,
} from "@/api/user";
import cookie from "@/utils/store/cookie";
import store from "@//store";
import dayjs from "dayjs";

export default {
  name: "PersonalData",
  components: {
    // VueCoreImageUpload
  },
  data: function () {
    return {
      avatar: "",
      isWeixin: false,
      currentAccounts: 0,
      switchUserInfo: [],
      userIndex: 0,
			disabled: false,
			second: 60,
			time: null,
			city: '省/市/区',
			verifyCode:'',
			address: '',
			contacts: '',
			isCheck: false
    };
  },
  computed: mapGetters(["userInfo"]),
  mounted: function () {
    this.avatar = this.userInfo.avatar;
    this.isWeixin = isWeixin();
    this.getUserInfo();
		this.userInfo.city ? this.city = this.userInfo.city : '省/市/区';
  },
  methods: {
		argeementClick(e){
			e.detail.value > 0 ? this.isCheck = true : this.isCheck = false
		},
		bindPickerChange(e){
			this.city = e.detail.value.join(' ')
		},
		sendCode(){
			var reg=/^1[3456789]\d{9}$/;
			if (this.userInfo.phone === '') {
				uni.showModal({
					title: '手机号码不能为空',
					type: 'none'
				});
				return 
			} else if(!reg.test(this.userInfo.phone)){
				uni.showModal({
					title: '请输入有效的手机号码',
					type: 'none'
				});
				return 
			} else{
				getVerificationCode({phone:this.userInfo.phone}).then((res)=>{
					if(res.success){
						uni.showToast({
							title:'短信已发送！'
						})
						if(this.disabled == false){
							clearInterval(this.timer)
							this.disabled = true;
							this.timer = setInterval(()=>{   //设置延迟执行
								this.timeup()
							},1000);
						}
					} else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		},
		timeup(){
			this.second = this.second - 1;
			if (this.second == 0) {
				this.second = 60;
				this.disabled = false
				clearInterval(this.timer)
				return;
			}
		},
    goChangePassword() {
      this.$yrouter.push("/pages/user/ChangePassword/index");
    },
    switchAccounts: function (index) {
      let that = this;
      this.userIndex = index;
      let userInfo = this.switchUserInfo[this.userIndex];
      if (this.switchUserInfo.length <= 1) return true;
      if (userInfo === undefined) {
        uni.showToast({
          title: "切换的账号不存在",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (userInfo.user_type === "h5") {
        switchH5Login()
          .then(({ data }) => {
            uni.hideLoading();
            const expires_time = dayjs(data.expires_time);
            store.commit("login", data.token, expires_time);
            that.$emit("changeswitch", false);
            location.reload();
          })
          .catch((err) => {
            uni.hideLoading();
            uni.showToast({
              title:
                err.msg || err.response.data.msg || err.response.data.message,
              icon: "none",
              duration: 2000,
            });
          });
      } else {
        cookie.set("loginType", "wechat", 60);
        uni.hideLoading();
        this.$store.commit("logout");
        this.$emit("changeswitch", false);
      }
    },
    getUserInfo: function () {
      let that = this;
      getUserInfo().then((res) => {
        // let switchUserInfo = res.data.switchUserInfo;
        // for (let i = 0; i < switchUserInfo.length; i++) {
        //   if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
        //   if (
        //     !that.isWeixin &&
        //     switchUserInfo[i].user_type != "h5" &&
        //     switchUserInfo[i].phone === ""
        //   )
        //     switchUserInfo.splice(i, 1);
        // }
        // that.$set(this, "switchUserInfo", switchUserInfo);
      });
    },
    chooseImage() {
      chooseImage((img) => {
        console.log(img);
        this.avatar = img;
      });
    },

    submit: function () {
      let userInfo = this.userInfo;
			console.log(userInfo)
			if(!this.isCheck){
				uni.showToast({
					title:'请填阅读并勾选用户协议',
					icon: "none"
				})
				return 
			}
			if(userInfo.realName == '' || userInfo.realName == null){
				uni.showToast({
					title:'请填写真实姓名',
					icon: "none"
				})
				return 
			}
			if(this.verifyCode == ''){
				uni.showModal({
					title: '请输入手机短信验证码',
					type: 'none'
				});
				return 
			}
      postUserEdit({
        nickname: trim(this.userInfo.nickname),
        avatar: this.avatar,
				realName: trim(this.userInfo.realName),
				idCard: this.userInfo.idCard,
				code: this.verifyCode,
				phone: this.userInfo.phone,
				city: this.city,
				address: this.address,
				contacts: this.contacts
      }).then(
        (res) => {
					if(res.success){
						this.$store.dispatch("userInfo", true);
						uni.showToast({
						  title: res.msg,
						  icon: "none",
						  duration: 2000,
						});
						setTimeout(()=>{
							this.$yrouter.back();
						},2000)
					} else{
						uni.showToast({
						  title: res.msg,
						  icon: "none",
						  duration: 2000,
						});
					}
        },
        (err) => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: "none",
            duration: 2000,
          });
        }
      );
    },
    logout: function () {
      uni.showModal({
        title: "提示",
        content: "确认退出登录?",
        success: (res) => {
          if (res.confirm) {
            getLogout()
              .then((res) => {
                this.$store.commit("logout");
                this.$yrouter.replace({
                  path: "/pages/user/Login/index",
                  query: {},
                });
              })
              .catch((err) => {});
          } else if (res.cancel) {
            // console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>
<style scoped lang="less">
	.personal-data .list .item{
		font-size: 28rpx !important;
	}
	.modifyBnt{
		height: 80rpx !important;
		line-height: 80rpx !important;
		font-size: 32rpx !important;
		background: #F99C10;
	}
	.countdown{
		min-width: 140rpx;
		height: 58rpx;
		padding: 0 10rpx;
		font-size: 24rpx;
		background-color: #F99C10;
		color: #fff;
		line-height: 58rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.tips{
		color: #F99C10;
		font-size: 28rpx;
		line-height: 34rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}
	.default{
		background: #999;
		color: #fff;
	}
	.input-box{
		text-align: right;
		input{
			width: 80%;
			margin-right: 10rpx;
		}
	}
	.argeement-box{
		font-size: 24rpx;
		color: #666;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: start;
		padding-left: 20rpx;
	}
	.argeement-box view{
		width: 60%;
	}
</style>