HSW_WX/pages/mine/mine.vue

<template>
  <view>
    <img src="../../static/mine/banner.png" class="banner" />
    <div class="info">
      <div class="headerandwelcome">
        <img src="../../static/mine/head.png" alt="" class="header" />
        <div class="weltxt">
          {{ getUserLocalStorageInfo.user.truename }}，欢迎您！
        </div>
      </div>
      <div class="labelpage">
        <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 class="border"></div>
          </div>
        </div>
        <div
          v-if="!bindFlag"
          class="labelpage_row"
          style="margin-top: 48rpx"
          @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 class="border"></div>
          </div>
        </div>
        <div
          v-if="bindFlag"
          class="labelpage_row"
          style="margin-top: 48rpx"
          @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 class="border"></div>
          </div>
        </div>
        <div
          class="labelpage_row"
          style="margin-top: 48rpx"
          @click="bindPush()"
        >
          <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 class="border"></div>
          </div>
        </div>
        <div
          class="labelpage_row"
          style="margin-top: 48rpx"
          @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"
                style="width: 44rpx; height: 44rpx"
                alt=""
              />
            </div>
            <div class="border"></div>
          </div>
        </div>
        <div
          class="labelpage_row"
          style="margin-top: 48rpx"
          @click="outLogin()"
        >
          <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"
                style="width: 44rpx; 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);
          // HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY: "accept"
          // Zt7a0xK-gy0aBe0owXmHi98t46n9vxrlkiQwz3ThnfQ: "accept"
          // iwqrwmxwjgQrGXFdZ3_kqYXOU52bfREK1cQJGwreKRE: "accept"

          if (
            !itemSettings ||
            itemSettings["HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY"] !=
              "accept" ||
            itemSettings["Zt7a0xK-gy0aBe0owXmHi98t46n9vxrlkiQwz3ThnfQ"] !=
              "accept" ||
            itemSettings["iwqrwmxwjgQrGXFdZ3_kqYXOU52bfREK1cQJGwreKRE"] !=
              "accept"
          ) {
            wx.requestSubscribeMessage({
              tmplIds: [
                "HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY",
                "Zt7a0xK-gy0aBe0owXmHi98t46n9vxrlkiQwz3ThnfQ",
                "iwqrwmxwjgQrGXFdZ3_kqYXOU52bfREK1cQJGwreKRE",
              ],
              success: (res) => {
                if (
                  itemSettings["HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY"] &&
                  itemSettings["HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY"] ==
                    "reject"
                ) {
                  that.$showToast("未绑定所有消息通知");
                } else {
                  that.$showToast("绑定成功");
                }
                console.log(res);
              },
              fail(err) {
                console.log("失败！！！！！！！！！！！！_:", err);
              },
            });
          } else {
            that.$showToast("请勿重复绑定");
          }
        },
      });
    },
    async getWxUserById() {
      let { data } = await getWxUserById(getUserLocalStorageInfo().user.id);

      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">
.banner {
  width: 100%;
  height: 424rpx;
  position: absolute;
  z-index: 1;
}
.headerandwelcome {
  margin-bottom: 60rpx;
  height: 120rpx;
  width: 100%;
}
.info {
  position: absolute;
  width: calc(100% - 64rpx);
  margin: 60rpx 32rpx 0 32rpx;
  z-index: 2;
}
.header {
  height: 120rpx;
  width: 120rpx;
  margin-left: 15rpx;
  border-radius: 50%;
  float: left;
}
.weltxt {
  height: 120rpx;
  line-height: 120rpx;
  color: #ffffff;
  margin-left: 32rpx;
  float: left;
}
.labelpage {
  width: calc(100% - 96rpx);
  // height: 308rpx;
  padding: 96rpx 48rpx;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  background: #ffffff;
}
.labelpage_row {
  height: 83rpx;
  width: 100%;
  img {
    height: 44rpx;
    width: 44rpx;
    float: left;
    margin-right: 12rpx;
  }
  .labelpage_text {
    width: calc(100% - 64rpx);
    height: 44rpx;
    line-height: 44rpx;
    float: left;
  }
  .labelpage_name {
    height: 44rpx;
    line-height: 44rpx;
    float: left;
    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;
    float: left;
  }
}
</style>