xdd-uniapp-new/pkg_user/views/personalData.vue

<template>
  <view class="user-personalData">
    <view class="top-box" :style="{'backgroundImage':`url(${webUrl}/20220925102928757633.png)`}">
      <view class="flex ai-center">
        <image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
        <view style="position: relative" @tap="chooseImage">
          <image class="cover" :src="avatar"/>
          <image class="btn-change" :src="webUrl+'/20220925111121285647.png'"/>
        </view>
        <view>
          <view class="name">{{ userInfo.nickname }}</view>
          <view class="phone">绑定手机号：{{ userInfo.phone || '未绑定' }}</view>
        </view>
      </view>
    </view>

    <view class="cell-box">

      <view class="cell flex jc-between ai-center">
        <view class="flex ai-center">
          <view class="title">昵称</view>
          <view class="value">
            <input type="text" v-model="userInfo.nickname"/>
          </view>
        </view>
        <view class="icon">
          <image :src="webUrl+'/20220903145836941399.png'"/>
        </view>
      </view>

      <view class="cell flex jc-between ai-center">
        <view class="flex ai-center">
          <view class="title">ID号</view>
          <view class="value">{{ userInfo.uid }}</view>
        </view>
        <view class="icon">
          <image :src="webUrl+'/20220925102920713727.png'" style="width: 40rpx;height: 40rpx"/>
        </view>
      </view>

      <view class="cell flex jc-between ai-center" @click="bindPhone">
        <view class="flex ai-center">
          <view class="title">手机号</view>
          <view class="value">{{ userInfo.phone || '未绑定' }}</view>
        </view>
        <view class="icon">
          <image :src="webUrl+'/20220903145836941399.png'"/>
        </view>
      </view>

      <view class="cell flex jc-between ai-center" @click="payPwdClick">
        <view class="flex ai-center">
          <view class="title">支付密码</view>
          <view class="value"></view>
        </view>
        <view class="icon">
          <image :src="webUrl+'/20220903145836941399.png'"/>
        </view>
      </view>

    </view>

    <button class="btn-save" @click="submit">保存修改</button>

<!--    <view class="list">-->
<!--      <view class="item acea-row row-between-wrapper">-->
<!--        <view>昵称</view>-->
<!--        <view class="input">-->
<!--          <input type="text" v-model="userInfo.nickname"/>-->
<!--        </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" @click="bindPhone">-->
<!--        <view>手机号</view>-->
<!--        <view class="input acea-row row-between-wrapper">-->
<!--          <input type="text" disabled v-if="userInfo.phone" v-model="userInfo.phone" class="id"/>-->
<!--          <input type="text" v-else value="未绑定" disabled class="id"/>-->
<!--          <text class="iconfont icon-jiantou"></text>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="item acea-row row-between-wrapper" @click="payPwdClick">-->
<!--        <view>支付密码</view>-->
<!--        <view class="input acea-row row-right">-->
<!--          <text class="iconfont icon-jiantou"></text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
<!--    <view class="modifyBnt bg-color-lightred" @click="submit">保存修改</view>-->
    <view
        class="logOut cart-color acea-row row-center-wrapper"
        @click="logout"
        v-if="$deviceType=='app'"
    >退出登录
    </view>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import {trim, isWeixin, chooseImage, uploadImage} from "@/utils";
import {
  postUserEdit,
  getLogout,
  switchH5Login
} from "@/api/user";
import cookie from "@/utils/store/cookie";
import store from "@//store";
import dayjs from "dayjs";
import ImageCropper from "@/pkg_user/components/invinbg-image-cropper/invinbg-image-cropper.vue";

export default {
  name: "PersonalData",
  components: {
    ImageCropper
  },
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      avatar: "",
      isWeixin: false,
      currentAccounts: 0,
      switchUserInfo: [],
      userIndex: 0,
      tempFilePath: '',
      cropFilePath: '',
    };
  },
  computed: mapGetters(["userInfo"]),
  mounted: function () {
    this.avatar = this.userInfo.avatar;
    this.isWeixin = isWeixin();
  },
  onShow: function () {
    //获取用户信息
    this.$store.dispatch("getUser", true);
  },
  methods: {
    confirm(e) {
      this.tempFilePath = '';
      this.cropFilePath = e.detail.tempFilePath;

      uploadImage(this.cropFilePath, img => {
        console.log(img)
        this.avatar = img;
        this.cropFilePath = '';
      })
    },
    cancel() {
      console.log('canceled')
    },
    bindPhone: function () {
      this.$yrouter.push("/pkg_user/views/bindPhone");
    },
    payPwdClick: function () {
      //先判断用户是否绑定过手机
      if (this.userInfo.phone) {
        //再判断用户是否设置过支付密码
        if (this.userInfo.hasPwdPay) {
          //修改支付密码
          this.$yrouter.push("/pkg_user/views/payPassword");
        } else {
          //设置支付密码
          this.$yrouter.push("/pkg_user/views/payPassword?isSetMode=true");
        }
      } else {
        //跳转到绑定手机
        this.$yrouter.push("/pkg_user/views/bindPhone");
      }
    },
    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);
      }
    },
    chooseImage() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          this.tempFilePath = res.tempFilePaths.shift()
        }
      });
    },

    submit: function () {
      let userInfo = this.userInfo;
      let that = this;
      postUserEdit({
        nickname: trim(this.userInfo.nickname),
        avatar: this.avatar
      }).then(
          res => {
            that.$store.dispatch("userInfo", true);
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
            setTimeout(function () {
              that.$yrouter.back();
            }, 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: function (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">
.user-personalData {
  min-height: 100vh;
  background: #F9F9F9;

  view {
    box-sizing: border-box;
  }

  .top-box {
    width: 100vw;
    height: 332.5rpx;
    padding: 94rpx 0 0 104rpx;
    background-size: 750rpx 332.5rpx;
    color: #FFFFFF;

    .cover {
      width: 136rpx;
      height: 136rpx;
      border-radius: 50%;
      margin-right: 42rpx;
    }

    .btn-change {
      position: absolute;
      top: 100rpx;
      left: 13rpx;
      width: 110rpx;
      height: 44rpx;
    }

    .name {
      font-size: 32rpx;
      line-height: 48rpx;
      font-weight: bold;
    }

    .phone {
      margin-top: 22rpx;
      font-size: 28rpx;
      line-height: 40rpx;
    }
  }

  .cell-box {
    margin: 54rpx 32rpx;
    padding: 0 25rpx;
    border-radius: 12rpx;
    background: #FFFFFF;

    .cell:last-child {
      border-bottom: none;
    }

    .cell {
      padding: 32rpx 0 20rpx;
      border-bottom: 1rpx solid #E8E9E9;
      font-size: 28rpx;
      line-height: 40rpx;

      .title {
        width: 112rpx;
        margin-right: 40rpx;
        color: #333333;
        font-weight: bold;
      }

      .value {
        color: #999999;
      }

      .icon {
        image {
          width: 26rpx;
          height: 26rpx;
        }
      }
    }
  }

  .btn-save {
    margin: 0 32rpx;
    background: #FE5261;
    color: #FFFFFF;
    font-size: 32rpx;
  }
}
</style>