AstraZeneca_uniapp/pages/mine/mine.vue

<template>
  <view class="mine">
    <img src="../../static/mine/banner.png" class="banner" />
    <div class="title-mine">我的</div>
    <div class="info">
      <div class="headerandwelcome">
        <img src="../../static/mine/head.png" alt="" class="header" />
        <div class="welcome">
          <div class="title">欢迎您！</div>
          <div class="weltxt">
            189*******12345
            <!-- {{ getUserLocalStorageInfo.user.phone }} -->
          </div>
        </div>
      </div>

      <div style="border-radius: 2rem; padding: 6rpx 32rpx; background: white">
        <div class="labelpage_row">
          <img height="44rpx" src="../../static/mine/versionicon.png" alt="" />

          <div class="labelpage_text">
            <div class="labelpage_name">当前版本号</div>
            <div class="labelpage_value">v1.0.1</div>
          </div>
        </div>
        <div v-if="!bindFlag" class="labelpage_row" @click="bindWxId()">
          <img height="44rpx" src="../../static/mine/versionicon.png" alt="" />
          <div class="labelpage_text">
            <div class="labelpage_name">绑定微信账号</div>
            <!-- <div class="labelpage_value">v1.0.1</div> -->
          </div>
        </div>
        <div v-if="bindFlag" class="labelpage_row" @click="unbindWxId()">
          <img height="44rpx" src="../../static/mine/versionicon.png" alt="" />

          <div class="labelpage_text">
            <div class="labelpage_name">解绑微信账号</div>
            <!-- <div class="labelpage_value">v1.0.1</div> -->
          </div>
        </div>
        <div class="labelpage_row" @click="bindPush()">
          <img src="../../static/mine/versionicon.png" alt="" />

          <div class="labelpage_text">
            <div class="labelpage_name">绑定消息推送</div>
            <!-- <div class="labelpage_value">v1.0.1</div> -->
          </div>
        </div>
        <div class="labelpage_row" @click="editPassWord()">
          <img height="44rpx" src="../../static/mine/editpassword.png" alt="" />

          <div class="labelpage_text">
            <div class="labelpage_name">密码修改</div>
            <div class="labelpage_value">
              <img
                src="../../static/mine/youjiantou.png"
                height="44rpx"
                alt=""
              />
            </div>
            <!-- <div class="border"></div> -->
          </div>
        </div>
        <div class="labelpage_row" @click="outLogin()" style="border: none">
          <img height="44rpx" src="../../static/mine/outicon.png" alt="" />
          <div class="labelpage_text">
            <div class="labelpage_name">退出账号</div>
            <div class="labelpage_value">
              <img
                src="../../static/mine/youjiantou.png"
                height="44rpx"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>
<script>
import {
  getUserInfo,
  getUserLocalStorageInfo,
  bindWxOpenId,
  getWxUserById,
  unbindWxId,
} from "@/js_sdk/http";
export default {
  data() {
    return {
      userInfo: {},
      bindFlag: 1,
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
    };
  },
  onLoad() {
    this.getWxUserById();
    //option为object类型，会序列化上个页面传递的参数
    // this.getUserInfo(); //打印出上个页面传递的参数。
  },

  methods: {
    bindPush() {
      let that = this;
      // wx.requestSubscribeMessage({
      //   tmplIds: [
      //     "HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY",
      //     "Zt7a0xK-gy0aBe0owXmHi98t46n9vxrlkiQwz3ThnfQ",
      //     "iwqrwmxwjgQrGXFdZ3_kqYXOU52bfREK1cQJGwreKRE",
      //   ],
      //   success(res) {
      //     console.log(res);
      //   },
      // });
      wx.getSetting({
        withSubscriptions: true,
        success(res) {
          var itemSettings = res.subscriptionsSetting.itemSettings;
          console.log(itemSettings);
          if (
            itemSettings["HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY"] ==
            "accept"
          ) {
            that.$showToast("请勿重复绑定");
          }
          if (
            itemSettings &&
            itemSettings["HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY"] ==
              "accept"
          ) {
            return false;
          } else {
            wx.showModal({
              title: "授权",
              content: "是否进行订阅授权？",
              success(res) {
                if (res.confirm) {
                  //获取订阅权限
                  wx.requestSubscribeMessage({
                    tmplIds: [
                      "HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY",
                      "Zt7a0xK-gy0aBe0owXmHi98t46n9vxrlkiQwz3ThnfQ",
                      "iwqrwmxwjgQrGXFdZ3_kqYXOU52bfREK1cQJGwreKRE",
                    ],
                    success: (res) => {
                      console.log("成功！！！！！！！！！！！！_:", res);
                    },
                    fail(err) {
                      console.log("失败！！！！！！！！！！！！_:", err);
                    },
                  });
                } else if (res.cancel) {
                  console.log("用户点击取消");
                }
              },
            });
          }
        },
      });
    },
    async getWxUserById() {
      let { data } = await getWxUserById(getUserLocalStorageInfo().user.id);
      console.log("data.bindFlag", data.bindFlag);
      this.bindFlag = data.bindFlag ? true : false;

      console.log(data);
    },
    async unbindWxId() {
      let data = await unbindWxId({
        userId: getUserLocalStorageInfo().user.id,
      });
      this.getWxUserById();
      this.$showToast("解绑成功");
    },
    bindWxId() {
      let _this = this;
      wx.login({
        success: async function (res) {
          if (res.code) {
            var code = res.code; // 获取到用户的临时登录凭证 code
            // 发送 code 到服务器端
            let data = await bindWxOpenId({
              code: res.code,
              userId: getUserLocalStorageInfo().user.id,
            });
            console.log(data.errmsg);
            if (data.errmsg == "成功") {
              // _this.$showToast("绑定成功");
              uni.showToast({
                title: "绑定成功",
                duration: 500,
              });
              _this.getWxUserById();
            } else {
              uni.showToast({
                title: data.errMsg,
                duration: 500,
              });
            }
            console.log(data);
            // ...
          } else {
            console.log("登录失败！" + res.errMsg);
          }
        },
      });
    },
    outLogin() {
      wx.showModal({
        title: "提示！",
        content: "是否确认退出登录？",
        success: function (res) {
          if (res.confirm) {
            uni.clearStorageSync();
            uni.reLaunch({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
    editPassWord() {
      uni.navigateTo({
        url: "/pages/subPackages/password/index",
      });
    },
    async getUserInfo() {
      let data = await getUserInfo();
      this.userInfo = data.data;
    },
  },
};
</script>
<style scoped lang="scss">
.mine {
  .welcome {
    margin-left: 32rpx;

    .title {
      font-weight: bold;
      font-size: 48rpx;
      color: #18172a;
    }
  }

  .banner {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 1;
  }
  .headerandwelcome {
    display: flex;
    align-items: center;
    margin-bottom: 60rpx;
    height: 120rpx;
    width: 100%;
  }
  .title-mine {
    position: absolute;
    top: 110rpx;
    width: 100%;
    text-align: center;
    color: #18172a;
    font-weight: 400;
    font-size: 36rpx;
  }
  .info {
    position: absolute;
    top: 260rpx;
    width: calc(100% - 64rpx);
    margin: 0 32rpx 0 32rpx;
    z-index: 2;
  }
  .header {
    height: 120rpx;
    width: 120rpx;
    margin-left: 15rpx;
    border-radius: 50%;
  }
  .weltxt {
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    margin-top: 12rpx;
  }
  .labelpage {
    // width: calc(100% - 96rpx);
    // height: 308rpx;
    // padding: 96rpx 48rpx;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    background: #ffffff;
  }
  .labelpage_row {
    border-bottom: 1px solid rgba(230, 230, 230, 1);

    display: flex;
    // width: 686rpx;
    padding: 32rpx;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    background: white;
    // padding: 32rpx;
    // height: 83rpx;
    // width: 100%;
    img {
      height: 44rpx;
      width: 44rpx;
      margin-right: 24rpx;
    }
    .labelpage_text {
      display: flex;
      justify-content: space-between;
      // height: 44rpx;
      align-items: center;
      width: 580rpx;
      // line-height: 44rpx;
    }
    .labelpage_name {
      // height: 44rpx;
      // line-height: 44rpx;
      // width: 440rpx;
      font-size: 28rpx;
      color: #081640;
      font-weight: 400;
    }
    .labelpage_value {
      height: 44rpx;
      // line-height: 44rpx;
      float: right;
      font-size: 28rpx;
      color: #1d18bc;
      font-weight: 400;
    }
    // .border {
    //   margin-top: 48rpx;
    //   width: 100%;
    //   height: 1rpx;
    //   border-bottom: 2rpx solid #e6e6e6;
    // }
  }
}
</style>