template-parking-h5/src/components/wx-points-commit/wx-points-commit.vue

<template>
  <view class="box" v-if="show" @touchmove.stop.prevent>
    <view class="boxIn">
      <view class="content">
        <image class="commit-star" src="https://cnsh-kerry-crm-prod.oss-cn-shanghai.aliyuncs.com/images/wx-points/points-commit.png"> </image>
        <image v-if="custTypeId === 0" class="commit-logo-default" src="https://cnsh-kerry-crm-prod.oss-cn-shanghai.aliyuncs.com/images/wx-points/kerry.png"> </image>
        <image v-else class="commit-logo-ko" src="https://cnsh-kerry-crm-prod.oss-cn-shanghai.aliyuncs.com/images/wx-points/ko.png"> </image>
        <view class="logo"> </view>
        <view class="title"> 您有消费积分未领取 </view>
        <view class="text"> 如您的微信支付积分未到账，请于消费当日申请领取 </view>
        <view @click="toWxPointsAuth" class="commit-btn" :class="{ 'commit-btn--blue': custTypeId === 1, 'commit-btn--green': custTypeId === 2 }"> 去领取 </view>
        <image @click="close" class="commit-cancel" src="https://cnsh-kerry-crm-prod.oss-cn-shanghai.aliyuncs.com/images/wx-points/close.svg"> </image>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { kipGetPointsConfig } from '@/utils/api-kip.js';
const app = getApp();
export default {
  props: {},
  created() {
    // this.handleGetPointsConfig()
  },
  watch: {},
  data() {
    return {
      pointsConfig: null,
      show: false,
      clickToWxPointsAuth: false,
    };
  },
  computed: {
    // custTypeId: 0 默认版本，1 上海静安 2 上海浦东
    ...mapState({
      // custTypeId: 0
      custTypeId: (state) => state.custTypeId,
    }),
  },
  methods: {
    checkoutLogin() {
      const pages = getCurrentPages();
      let url = '/' + pages[pages.length - 1].route;
      pages[pages.length - 1].$vm.$refs.child.login(url, () => {
        this.toWxPointsAuth();
      });
    },
    handleGetPointsConfig() {
      kipGetPointsConfig()
        .then((resp) => {
          const result = resp.data;
          // codes,wxAuth,aliAuth
          this.pointsConfig = result;
          if (result) {
            if (result && result.codes) {
              // codes,wxAuth,aliAuth
              this.pointsConfig = result;
              this.checkoutLogin();
            } else {
              if (result.code && result.code === '300000') {
                this.checkoutLogin();
              } else {
                uni.showToast({
                  icon: 'none',
                  mask: true,
                  duration: 2000,
                  title: result.errorMessage || result.message || '出错了，请稍后再试',
                });
              }
            }
          } else {
            if (resp.code && resp.code === '300000') {
              this.checkoutLogin();
            } else {
              uni.showToast({
                icon: 'none',
                mask: true,
                duration: 2000,
                title: resp.message,
              });
            }
          }
        })
        .catch((e) => {
          uni.showToast({
            icon: 'none',
            mask: true,
            title: '请求错误',
          });
        });
    },
    async toWxPointsAuth() {
      console.log('授权微信无感积分');
      if (this.clickToWxPointsAuth) {
        console.log('授权微信无感积分重复点击');
        return;
      }
      await this.handleGetPointsConfig();
      this.clickToWxPointsAuth = true;
      var myPluginInterface = requirePlugin('myPlugin');
      uni.showLoading();
      const _this = this;
      await myPluginInterface.getLocation(app.globalData.openId).then((res) => {
        const that = _this;
        if (res.return_code === 0) {
          uni.navigateTo({
            url: `plugin://myPlugin/index?openid=${app.globalData.openId}&mch_id=${that.pointsConfig.mchId}&member_status=${that.pointsConfig.wxAuth ? 1 : 0}`,
            success: function () {
              that.close();
              uni.hideLoading();
              that.clickToWxPointsAuth = false;
            },
          });
        } else if (res.return_code === '102') {
          uni.showModal({
            title: '提示',
            content: '请您在”定位服务“中允许”微信”使用位置信息， 并允许该小程序使用定位功能',
            showCancel: false,
            confirmText: '确认',
            success: function (res) {
              that.close();
              that.clickToWxPointsAuth = false;
            },
          });
          uni.hideLoading();
        } else {
          that.clickToWxPointsAuth = false;
        }
      });
    },
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
  },
};
</script>
<style>
.box {
  position: fixed;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}

.boxIn {
  position: relative;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  width: calc(100% - 110px);
  height: 232px;
  background: #ffffff;
  border-radius: 8px;
  margin: 0 auto;
  margin-top: 280px;
}

.commit-star {
  position: absolute;
  width: calc(100vw - 40px);
  height: calc(48.1vw - 23.6px);
  top: calc(11.8px - 24.05vw);
  left: -33px;
}

.commit-logo-default {
  width: 84px;
  height: 20px;
  position: relative;
  display: block;
  top: 15px;
  left: 30px;
}

.commit-logo-ko {
  width: 80px;
  height: 20px;
  position: relative;
  display: block;
  top: 15px;
  left: 35px;
}

.logo {
  height: 35px;
  border-bottom: 1rpx solid rgba(151, 151, 151, 0.1);
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-top: 22px;
}

.text {
  width: 180px;
  margin: 0 auto;
  margin-top: 8px;
  color: #999;
  font-size: 12px;
  text-align: center;
}

.commit-btn {
  width: calc(100vw - 180px);
  height: 40px;
  margin: 0 auto;
  margin-top: 17px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background: #644a79;
  border-radius: 25px;
  box-shadow: 3px 3px 12px 0px #644a79;
}

.commit-btn--blue {
  box-shadow: 3px 3px 12px 0px #13358e;
  background: #13358e;
}

.commit-btn--green {
  box-shadow: 3px 3px 12px 0px #25673c;
  background: #25673c;
}

.commit-cancel {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 56px;
  width: 32px;
  height: 32px;
}
</style>