设置

litian

2024-03-21 05707c8c6adb1042597c52091ad25ed64d15bb55

设置

 packagePersonal/pages/userSetting/index.js

@@ -7,7 +7,18 @@
  data: {
    userInfo: {},
    defaultAvatarUrl: 'https://cdn-we-retail.ym.tencent.com/miniapp/usercenter/icon-user-center-avatar@2x.png',
    visible: false
    userInfoBox: false,
    editType: '',
    userInfoForm: {
      phone: '',
      email: '',
      captcha: '',
      code: '',
    },
    phoneError: false,
    emailError: false,
    imgCode: '',
    countDown: 0,
  },

  /**
@@ -79,7 +90,235 @@
      }
    });
  },
  //修改用户类型
  editUserInfo(e) {
    console.log(e)
    let { info } = e.currentTarget.dataset
    if (!this.data.userInfoBox) {
      this.setData({
        userInfoBox: true,
        editType: info,
        "userInfoForm.captcha": "",
        "userInfoForm.code": ""
      });
    }
    this.getImgCapcha()
  },
  onVisibleChange(e) {
    this.setData({
      userInfoBox: e.detail.visible,
      countDown: 0,
    });
  },

  //输入手机号
  onPhoneInput(e) {
    console.log(e)
    const { phoneError } = this.data;
    const isPhoneNumber = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(e.detail.value);
    if (phoneError === isPhoneNumber) {
      this.setData({
        phoneError: !isPhoneNumber,
        "userInfoForm.phone": e.detail.value,
      });
    }
  },

  onEmailInput(e) {
    const { emailError } = this.data;
    const isPhoneNumber = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(e.detail.value);
    if (emailError === isPhoneNumber) {
      this.setData({
        emailError: !isPhoneNumber,
        "userInfoForm.email": e.detail.value,
      });
    }
  },

  getImgCapcha() {
    app.MG.identity.getImgCode().then((res) => {
      this.setData({
        imgCode: 'data:image/png;base64,' + res,
      });
    })
  },
  //图形验证码
  onCaptchaInput(e) {
    this.setData({
      "userInfoForm.captcha": e.detail.value,
    });
  },

  //短信邮箱验证码
  onCodeInput(e) {
    this.setData({
      "userInfoForm.code": e.detail.value,
    });
  },

  getPhoneCode() {
    if (this.data.userInfoForm.phone && this.data.userInfoForm.captcha) {
      app.MG.identity
        .getPhoneCode({
          phoneNumber: this.data.userInfoForm.phone,
          imageCaptcha: this.data.userInfoForm.captcha,
          appRefCode: app.config.appRefCode
        })
        .then((res) => {
          if (res == '验证码发送成功') {
            wx.showToast({
              title: res,
              icon: 'none',
              duration: 1000
            })
            // 开启短信验证倒计时
            this.getSecond(60)
          } else {
            wx.showToast({
              title: res,
              icon: 'none',
              duration: 1000
            })
            this.getImgCapcha()
          }
        })
    } else {
      wx.showToast({
        title: '请填写手机号或图形验证码',
        icon: 'none',
        duration: 1000
      })
    }
  },
  getSecond(time) {
    let timer = null
    if (!timer) {
      let countDown = time;
      this.setData({
        countDown: time,
      });
      timer = setInterval(() => {
        countDown--
        this.setData({
          countDown: countDown,
        });
        if (this.data.countDow == 0) {
          clearInterval(timer)
          timer = null
        }
      }, 1000)
    }
  },

  getEmailCode() {
    console.log(this.data.userInfoForm.email)
    if (this.data.userInfoForm.email && this.data.userInfoForm.captcha) {
      app.MG.identity
        .getEmailCode({
          sendEmail: this.data.userInfoForm.email,
          captcha: this.data.userInfoForm.captcha,
          appRefCode: app.config.appRefCode
        })
        .then((res) => {
          if (res == true) {
            wx.showToast({
              title: '验证码已发送',
              icon: 'none',
              duration: 1000
            })
            // 开启短信验证倒计时
            this.getSecond(60)
          } else {
            wx.showToast({
              title: '邮箱验证码发送失败',
              icon: 'none',
              duration: 1000
            })
            this.getImgCapcha()
          }
        })
    } else {
      wx.showToast({
        title: '请填写邮箱或图形验证码',
        icon: 'none',
        duration: 1000
      })
    }
  },

  confirmInfo() {
    if (this.data.changeType == 'phone') {
      let query = {
        phoneNumber: this.data.userInfoForm.phone,
        phoneCaptcha: this.data.userInfoForm.code
      }
      app.MG.identity.userSetPhoneNumber(query).then((res) => {
        if (res == '验证码过期或错误') {
          wx.showToast({
            title: res + ',请稍后重试',
            icon: 'none',
            duration: 1000
          })
        } else if (res == '此手机号码已被其它账号绑定') {
          wx.showToast({
            title: res + ',请更换其他手机号。',
            icon: 'none',
            duration: 1000
          })
        } else {
          wx.showToast({
            title: res,
            icon: 'none',
            duration: 1000
          })

          this.setData({
            userInfoBox: false,
          });
          this.getUserInfo()
        }
      })
    } else if (this.data.editType == 'email') {
      let query = {
        eMail: this.data.userInfoForm.email,
        captcha: this.data.userInfoForm.code
      }

      app.MG.identity.bindingEmail(query).then((res) => {
        if (res == '验证码过期') {
          wx.showToast({
            title: res + ',请稍后重试。',
            icon: 'none',
            duration: 1000
          })
        } else if (res == '此邮箱已被其它账号绑定') {
          wx.showToast({
            title: res + ',请更换其他邮箱。',
            icon: 'none',
            duration: 1000
          })

        } else if (res == '验证码无效') {
          wx.showToast({
            title: res,
            icon: 'none',
            duration: 1000
          })
        } else {
          wx.showToast({
            title: res,
            icon: 'none',
            duration: 1000
          })
          this.setData({
            userInfoBox: false,
          });
          this.getUserInfo()
        }
      })
    }

  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */

 packagePersonal/pages/userSetting/index.json

@@ -2,6 +2,8 @@
  "navigationBarTitleText": "设置",
  "usingComponents": {
    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-avatar": "tdesign-miniprogram/avatar/avatar"
    "t-avatar": "tdesign-miniprogram/avatar/avatar",
    "t-popup": "tdesign-miniprogram/popup/popup",
    "t-input": "tdesign-miniprogram/input/input"
  }
}

 packagePersonal/pages/userSetting/index.wxml

@@ -13,28 +13,71 @@
  </view>
  <view class="itemList">
    <view class="label">手机号码</view>
    <view class="content">{{userInfo.phoneNumber || '未绑定手机号'}}</view>
    <view class="content" data-info="{{'phone'}}" bindtap="editUserInfo">{{userInfo.phoneNumber || '未绑定手机号'}}</view>
    <t-icon name="chevron-right" size="40rpx" color="#C2C2C2" />
  </view>
  <view class="itemList">
    <view class="label">邮箱</view>
    <view class="content">{{userInfo.Email}}</view>
    <view class="content" data-info="{{'email'}}" bindtap="editUserInfo">{{userInfo.Email}}</view>
    <t-icon name="chevron-right" size="40rpx" color="#C2C2C2" />
  </view>
</view>
<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom">
  <view class="block">
    <view class="header">
      <view class="title">请选择您的用户类型</view>
    </view>
    <view class="body">
  <t-popup visible="{{userInfoBox}}" bind:visible-change="onVisibleChange" placement="bottom">
    <view class="block">
      <view class="body">
        <view class="from-item" wx:if="{{editType == 'phone'}}">
          <view class="label"> 手机号： </view>
          <view class="item-content">
            <view class="inputBox1">
              <t-input placeholder="输入手机号码" borderless value="{{userInfoForm.phone}}" type="number" tips="{{phoneError ? '手机号输入不正确' : ''}}" bindchange="onPhoneInput" />
            </view>
          </view>
        </view>
        <view class="from-item" wx:if="{{editType == 'email'}}">
          <view class=" label"> 邮箱： </view>
          <view class="item-content">
            <view class="inputBox1">
              <t-input placeholder="输入邮箱" borderless value="{{userInfoForm.email}}" type="number" tips="{{emailError ? '邮箱输入不正确' : ''}}" bindchange="onEmailInput" />
            </view>
          </view>
        </view>
        <view class="from-item">
          <view class="label"> 图形验证码： </view>
          <view class="item-content">
            <view class="inputBox">
              <t-input placeholder="输入图形验证码" borderless value="{{userInfoForm.captcha}}" type="number" bindchange="onCaptchaInput" />
            </view>
            <view class="code">
              <image src="{{imgCode}}" class="imgCode hover" bindtap="getImgCapcha" />
            </view>
          </view>

      <view wx:for="{{userTypeList}}" wx:for-item="item" wx:for-index="index" wx:key="index" data-info="{{item}}" bindtap="tabUserTypeClick" class="{{item.value === userTypeActive ? 'activeItem item' : 'item'}}">
        {{ item.lable }}
        </view>
        <view class="from-item" wx:if="{{editType == 'phone'}}">
          <view class="label"> 短信验证码： </view>
          <view class="item-content">
            <view class="inputBox">
              <t-input placeholder="输入短信验证码" borderless value="{{userInfoForm.code}}" type="number" bindchange="onCodeInput" />
            </view>
            <view class="code">
              <button class="btn" bindtap="getPhoneCode">{{countDown > 0 ? countDown : '获取短信验证码'}}</button>
            </view>
          </view>
        </view>
        <view class="from-item" wx:if="{{editType == 'email'}}">
          <view class="label"> 邮箱验证码： </view>
          <view class="item-content">
            <view class="inputBox">
              <t-input placeholder="输入邮箱验证码" borderless value="{{userInfoForm.code}}" type="number" bindchange="onCodeInput" />
            </view>
            <view class="code">
              <button class="btn" bindtap="getEmailCode">获取邮箱验证码</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="submit" bindtap="submit">确定</button>
      <button class="submit" bindtap="confirmInfo">确定</button>
    </view>
  </view>
</t-popup>
  </t-popup>
</view>

 packagePersonal/pages/userSetting/index.wxss

@@ -11,9 +11,10 @@
  justify-content: space-between !important;
}

.label {
.itemList .label {
  font-weight: bold;
  width: 180rpx;
  font-size: 32rpx;
}

.contentImg {
@@ -34,4 +35,87 @@
.content {
  flex: 1;
  color: #5C5C5C;
  font-size: 32rpx;
}

.block {
  width: 100vw;
  background: #fff;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}

.block .body {
  padding: 40rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.block .body .from-item {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.block .body .from-item .label {
  width: 170rpx;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
}

.block .body .from-item .item-content {
  padding: 10rpx;
  flex: 1;
  display: flex;
}

.inputBox1 {
  width: 540rox;
  height: 72rpx;
  border: 2rpx solid #D9D9D9;
  flex: 1;
}

.block .body .inputBox {
  width: 280rpx;
  height: 72rpx;
  border: 2rpx solid #D9D9D9;
}

.t-input {
  padding: 10rpx !important;
}

.imgCode {
  height: 72rpx;
  width: 200rpx;
}

.code {
  width: 200rpx;
  height: 72rpx;
  margin-left: 20rpx;
}

.btn {
  width: 200rpx;
  height: 72rpx;
  padding: 0 10rpx !important;
  background: #ff6c00;
  border: 2rpx solid #ff6c00;
  color: #fff;
  font-size: 28rpx;
}

.footer {
  width: 80%;
  margin: 10rpx auto;
}

.submit {
  background: #ff6c00;
  color: #fff;
  border-radius: 50rpx;
}

 pages/personalCenter/index.js

@@ -318,6 +318,12 @@
    }
  },

  onPageScroll(e) {
    this.setData({
      isWhite: e.scrollTop > 20 ? true : false
    })
  },

  /**
   * 用户点击右上角分享
   */