hlm_pl_mall_h5/pages/member/setting/AccountSet.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="div member-account-set" v-if="user">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="账号设置" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div main-content">
            <view class="div menu-list">
                <view class="div" v-show="(user.member_mobilebind && user.member_mobile) || (user.member_emailbind && user.member_email)" @click='popupVisible("password")'>
                    <flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">修改登录密码</text></flex-line>
                </view>
                <view class="div" v-show="(user.member_mobilebind && user.member_mobile) || (user.member_emailbind && user.member_email)" @click='popupVisible("paypwd")'>
                    <flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">修改支付密码</text></flex-line>
                </view>
                <view class="div" @click='popupVisible("mobile")'>
                    <flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">{{(user.member_mobilebind?'修改':'绑定')+'手机'}}</text><text class="span" slot="right">{{user.member_mobile}}</text></flex-line>
                </view>
                <view class="div" @click='popupVisible("email")'>
                    <flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">{{(user.member_emailbind?'修改':'绑定')+'邮箱'}}</text><text class="span" slot="right">{{user.member_email}}</text></flex-line>
                </view>
            </view>
            <view class="div pt-10 pb-10">
                <view class="div common-btn ds-button-large" @click="_logout">退出登录</view>
            </view>
        </view>

        <!--修改手机-->
        <uni-popup background-color="#fff" ref="editMobileVisible" type="right" >
            <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
            <view class="div common-header-wrap">
                <view :style="'height:'+navHeight+'px'"></view>
                <view class="common-header-holder"></view>
                <view class="common-header-fixed">
                <title-header />
                <uni-nav-bar :title="(user.member_mobilebind?'修改':'绑定')+'手机'" class="common-header" left-icon="back" @clickLeft="hidePopup('editMobileVisible')">
                </uni-nav-bar>
            </view>
            </view>
            <view class="div common-popup-content">
                <flex-line class="field-line menu-item" :show-border="true"><text class="span field-name">手机</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="mobile" type="number" :attr="{ oninput: 'if(value.length>11)value=value.slice(0,11)' }" /></view></flex-line>
                <flex-line class="field-line" :show-border="true"><text class="span field-name">验证码</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="verifyCodeMobile" type="number" :attr="{ oninput: 'if(value.length>6)value=value.slice(0,6)' }" /><view @click="sendVerifyCodeMobile" class="div common-btn send-btn">{{sendStateTextMobile}}</view></view></flex-line>
                <view class="div common-btn ds-button-large mt-10" @click='updateMobile' >提交</view>
            </view>
        </view>
        </uni-popup>

        <!--修改邮箱-->
        <uni-popup background-color="#fff" ref="editEmailVisible" type="right" >
            <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
            <view class="div common-header-wrap">
                <view :style="'height:'+navHeight+'px'"></view>
                <view class="common-header-holder"></view>
                <view class="common-header-fixed">
                <title-header />
                <uni-nav-bar :title="(user.member_emailbind?'修改':'绑定')+'邮箱'" class="common-header" left-icon="back" @clickLeft="hidePopup('editEmailVisible')">
                </uni-nav-bar>
            </view>
            </view>
            <view class="div common-popup-content">
				<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
                <view class="main-content">
					<flex-line class="field-line menu-item" :show-border="true"><text class="span field-name">邮箱</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="email" /></view></flex-line>
					<view class="div common-btn ds-button-large mt-10" @click="sendVerifyCodeEmail">提交</view>
				</view>
				</scroll-view>
			</view>
        </view>
        </uni-popup>

        <!--修改登录密码-->
        <uni-popup background-color="#fff" ref="editPasswordVisible" type="right" >
            <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
            <view class="div common-header-wrap">
                <view :style="'height:'+navHeight+'px'"></view>
                <view class="common-header-holder"></view>
                <view class="common-header-fixed">
                <title-header />
                <uni-nav-bar title="修改登录密码" class="common-header" left-icon="back" @clickLeft="hidePopup('editPasswordVisible')">
                </uni-nav-bar>
            </view>
            </view>
            <view class="div common-popup-content">
				<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
                <flex-line class="field-line menu-item" :show-border="true"><text class="span field-name">新密码</text><view class="div field-line-right" slot="right"><input class="field-input" type="password" v-model="password1" /></view></flex-line>
                <flex-line class="field-line menu-item" :show-border="true"><text class="span field-name">确认密码</text><view class="div field-line-right" slot="right"><input class="field-input" type="password" v-model="password2" /></view></flex-line>
                <view class="div common-btn ds-button-large mt-10" @click='updatePassword' >提交</view>
				</scroll-view>
            </view>
        </view>
        </uni-popup>

        <!--修改支付密码-->
        <uni-popup background-color="#fff" ref="editPaypwdVisible" type="right" >
            <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
            <view class="div common-header-wrap">
                <view :style="'height:'+navHeight+'px'"></view>
                <view class="common-header-holder"></view>
                <view class="common-header-fixed">
                <title-header />
                <uni-nav-bar title="修改支付密码" class="common-header" left-icon="back" @clickLeft="hidePopup('editPaypwdVisible')">
                </uni-nav-bar>
            </view>
            </view>
            <view class="div common-popup-content">
				<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
                <flex-line class="field-line menu-item" :show-border="true"><text class="span field-name">新密码</text><view class="div field-line-right" slot="right"><input class="field-input" type="password" v-model="paypwd1" /></view></flex-line>
                <flex-line class="field-line menu-item" :show-border="true"><text class="span field-name">确认密码</text><view class="div field-line-right" slot="right"><input class="field-input" type="password" v-model="paypwd2" /></view></flex-line>
                <view class="div common-btn ds-button-large mt-10" @click="updatePaypwd">提交</view>
				</scroll-view>
            </view>
        </view>
        </uni-popup>

        <uni-popup background-color="#fff" ref="sendAuthCode" type="right" >
            <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
            <view class="div common-header-wrap">
                <view :style="'height:'+navHeight+'px'"></view>
                <view class="common-header-holder"></view>
                <view class="common-header-fixed">
                <title-header />
                <uni-nav-bar title="身份验证" class="common-header" left-icon="back" @clickLeft="hidePopup('sendAuthCode')">
                </uni-nav-bar>
            </view>
            </view>
            <view class="div common-popup-content">
				<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
                <common-send-code @checkSuccess="checkSuccess" />
				</scroll-view>
            </view>
        </view>
        </uni-popup>
    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import { mapState, mapMutations } from 'vuex'
import { logout, getMemberInfo } from '../../../api/member'
import CommonSendCode from '../common/CommonSendCode'
import { updateUserMobile, updateUserPassword, updateUserPaypwd, bindUserMobile, bindUserEmail } from '../../../api/memberSetting'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    CommonSendCode
  },
  name:'MemberSetting',
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      authType: 'mobile',
      paypwd1: '',
      paypwd2: '',
      mobile: '',
      email: '',
      password1: '',
      password2: '',
      verifyCodeMobile: '',
      canSendMobile: true,
      timeIntervalMobile: false,
      sendStateTextMobile: '发送',
      canSendEmail: true,
      timeIntervalEmail: false,
      sendStateTextEmail: '发送'

    }
  },
  beforeDestroy: function () {
    clearInterval(this.timeIntervalMobile)
    clearInterval(this.timeIntervalEmail)
  },
  created: function () {
    this.getMemberInfo()
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      user: state => state.member.info
    })
  },
  mounted(){

    // #ifdef  MP-WEIXIN

    this.navHeight = uni.getMenuButtonBoundingClientRect().top

    // #endif

    this.screenWidth=uni.getSystemInfoSync().screenWidth

  },
  methods:{
    getMemberInfo(){
    getMemberInfo().then(res => {
      this.memberUpdate({info:res.result.member_info})
      if (!res.result.member_info.member_emailbind) { // 如果没有绑定邮箱则输入项自动填写上次的邮箱
        this.email = res.result.member_info.member_email
      }
      if (!res.result.member_info.member_mobilebind) { // 如果没有绑定手机则输入项自动填写上次的手机
        this.mobile = res.result.member_info.member_mobile
      }
    }, error => {}
    )
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapMutations({
      memberUpdate: 'memberUpdate',
      memberEdit: 'memberEdit',
      memberLogout: 'memberLogout'
    }),
    _logout () {
		console.log("退出登录")
      logout(this.user.member_name).then(res => {
		console.log(res)
        this.memberLogout()
		uni.navigateTo({url:'/pages/home/memberlogin/Login'})
      },error=> {
		  console.log(error)
        uni.showToast({icon:'none',title: error.message})
      })
    },
    popupVisible (authType) {
      this.authType = authType
      switch (authType) {
        case 'mobile':
          if (this.user.member_mobilebind && this.user.member_mobile) { // 已绑定手机则需要验证
            this.showPopup('sendAuthCode')
          } else {
            this.showPopup('editMobileVisible')
          }
          break
        case 'email':
          if (this.user.member_emailbind && this.user.member_email) { // 已绑定邮箱则需要验证
            this.showPopup('sendAuthCode')
          } else {
            this.showPopup('editEmailVisible')
          }
          break
        case 'password':
          this.showPopup('sendAuthCode')
          break
        case 'paypwd':
          this.showPopup('sendAuthCode')
          break
      }
    },
    checkSuccess () {
      this.hidePopup('sendAuthCode')
      switch (this.authType) {
        case 'mobile':
          this.showPopup('editMobileVisible')
          break
        case 'email':
          this.showPopup('editEmailVisible')
          break
        case 'password':
          this.showPopup('editPasswordVisible')
          break
        case 'paypwd':
          this.showPopup('editPaypwdVisible')
          break
      }
    },
    // 更改绑定手机号
    updateMobile () {
      updateUserMobile(this.verifyCodeMobile).then(res => {
        this.memberEdit({ member_mobile: this.mobile, member_mobilebind: 1 })
        uni.showToast({icon:'none',title: res.message})
        this.getMemberInfo()
        this.hidePopup('editMobileVisible')
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    // 更改登录密码
    updatePassword () {
      updateUserPassword(this.password1, this.password2).then(res => {
        uni.showToast({icon:'none',title: res.message})
        this.getMemberInfo()
        this.hidePopup('editPasswordVisible')
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    // 更改支付密码
    updatePaypwd () {
      updateUserPaypwd(this.paypwd1, this.paypwd2).then(res => {
        uni.showToast({icon:'none',title: res.message})
        this.getMemberInfo()
        this.hidePopup('editPaypwdVisible')
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    // 发送手机验证码
    sendVerifyCodeMobile () {
      if (!this.canSendMobile) {
        return
      }
      bindUserMobile(this.mobile).then(res => {
        this.memberEdit({ member_mobile: this.mobile, member_mobilebind: 0 })
        this.canSendMobile = false
        let second = 60
        uni.showToast({icon:'none',title: res.message})
        let _this = this
        this.timeIntervalMobile = setInterval(function () {
          if (second <= 0) {
            _this.canSendMobile = true
            _this.sendStateTextMobile = '发送'
            clearInterval(_this.timeIntervalMobile)
          }else{
              _this.sendStateTextMobile = second + 's'
          }

          second--
        }, 1000)
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    // 发送邮箱验证码
    sendVerifyCodeEmail () {
      if (!this.canSendEmail) {
        return
      }
      bindUserEmail(this.email).then(res => {
        this.memberEdit({ member_email: this.email, member_emailbind: 0 })
        this.canSendEmail = false
        let second = 60
        uni.showToast({icon:'none',title: res.message})
        let _this = this
        this.timeIntervalEmail = setInterval(function () {
          if (second <= 0) {
            _this.canSendEmail = true
            _this.sendStateTextEmail = '发送'
            clearInterval(_this.timeIntervalEmail)
          }else{
              _this.sendStateTextEmail = second + 's'
          }

          second--
        }, 1000)
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>

<style  lang="scss" scoped>
    .main-content{background: #fff;padding:0 $pageSpace}
    .common-popup-content{padding:0 $pageSpace;box-sizing: border-box}
    .send-btn{border:1px solid $primaryColor;color:$primaryColor;min-width: 2rem}
  .member-account-set {position:relative;z-index:100;
      .menu-list{
          .menu-item {
              .right-arrow{transform: rotate(-90deg);color:#ddd;font-size:$fontSize;}
          }
      }
  }
</style>