jsm-mall-h5-front/src/pages/bind.vue

<template>
  <view v-if="code">
    <view class="hangkuai">允许小程序使用我的</view>
    <view class="hangkuai">
      <text>向我发送服务通知</text>
      <img src="@/static/open.png">
    </view>
    <view class="hangkuai">
      <text>接受工单通知</text>
      <img src="@/static/open.png">
    </view>
    <view class="zhuangtai" v-if="bindStatus != 0"><text>{{ bindStatusName[bindStatus] }}</text></view>
    <view class="anniuyangs" v-if="bindStatus == 1 && wx_url != ''">
      <view @click="confirm">授权接收订阅消息</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      appid: "",
      code: "",
      bindStatusName: ["", "未授权", "已授权"],
      bindStatus: 0,
      wx_url: ""
    }
  },
  onLoad({ appid, code, state }) {
    this.appid = appid || state
    this.code = code
    if (appid && !code) {
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid
        }&redirect_uri=${location.href
        }&response_type=code&scope=snsapi_userinfo&state=${this.appid
        }#wechat_redirect`;
    } else {
      // 获取绑定状态
      this.$api.post('/user/pub/auth', {
        code: this.code,
        pubAppId: this.appid,
      }).then(res => {
        this.bindStatus = res.data ? 1 : 2;
        this.wx_url = res.data;
      })
    }
  },
  methods: {
    confirm() {
      window.open(this.wx_url)
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #fff;
}

.hangkuai {
  width: 100%;
  height: 90rpx;
  box-sizing: border-box;
  padding: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  img {
    height: 38rpx;
  }

  &:nth-child(1) {
    background: #efefef;
  }

  &:nth-child(2),
  &:nth-child(3) {
    border-bottom: 1rpx solid #eee;
  }
}

.zhuangtai {
  width: 100%;
  height: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.anniuyangs {
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  padding: 16rpx;

  view {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00e266;
    border-radius: 6rpx;
    color: #fff;
  }
}
</style>