zhishifufei_uniapp/pages/special/member_recharge.vue

<template>
  <BaseContainer>
    <NavBar title="会员管理" backGround="#100C09" titleFontColor='#FFFFFF' backIcon='/static/icon/arrow-left-white.png' />
    <view class="member-recharge">
      <view v-if="userInfo" class=" boxs user-section flex flex-center-x">
        <image :src="getImgPath(userInfo.avatar)" />
        <view class="text">
          <view class="name">{{ userInfo.nickname }}</view>
          <view v-if="userInfo.level && userInfo.is_permanent" class="info">永久会员</view>
          <view v-else-if="userInfo.level && !userInfo.is_permanent && userInfo.surplus" class="info">
            您的会员剩余{{ userInfo.surplus }}天
          </view>
          <view v-else class="info">开通会员立享会员尊享权益</view>
        </view>
        <view @click="scrollToList" class="scroll-btn" v-if="userInfo.level">续费会员</view>
        <view @click="scrollToList" class="scroll-btn" v-else-if="!userInfo.is_permanent">开通会员</view>
      </view>
      <!-- 会员权益 -->
      <view v-if="interests.length" class=" boxs rights-section">
        <view class="title">
          <view class="inner">会员尊享权益</view>
        </view>
        <view class="right-list">
          <view v-for="item in interests" :key="item.id" class="right-item">
            <view class="img-wrap">
              <image :src="item.pic" class="img" />
            </view>
            <view class="name">{{ item.name }}</view>
            <view class="info">{{ item.explain }}</view>
          </view>
        </view>
      </view>
      <!-- 会员套餐 -->
      <view v-if="cardList.length" class="card-section boxs" id="flag">
        <view class="title">
          <view class="inner">我的服务</view>
        </view>
        <view class="radio-group">
          <view class="card-label pos" @click="handleToggleCard" v-for="(item, idx) of cardList" :key="item.id">
            <view class="label-body" :class="{ active: item.id == cardChecked.id }">
              <view class="name">{{ item.title }}</view>
              <view class="money">
                ￥<text>{{ item.price }}</text>
              </view>
              <view class="delete">￥{{ item.original_price }}</view>
            </view>
            <view class="abs full" :data-idx="idx"></view>
          </view>
        </view>
        <view class="confirm-btn flex flex-center" @click="loginUser(1)">
          {{ userInfo && userInfo.level ? "立即续费" : "立即开通" }}
        </view>
        <view class="tip">
          已有卡密兑换会员，<text @click="loginUser(2)">点击兑换</text>
        </view>
      </view>
      <!-- 会员说明 -->
      <view v-if="description.length" class="detail-section boxs">
        <view class="title">会员说明：</view>
        <view class="describe-list">
          <view class="describe-item" v-for="item in description" :key="item.id">{{
            item.text
            }}</view>
        </view>
      </view>
      <!-- 兑换弹窗 -->
      <view :class="{ mask: exchangeShow }" @click="exchangeShow = false"></view>
      <view :class="{ show: exchangeShow }" class="exchange-dialog">
        <button class="close" @click="exchangeShow = false">
          <i class="iconfont iconguanbi2"></i>
        </button>
        <view class="title">
          <view class="inner">激活会员卡</view>
        </view>
        <view class="content">
          <input v-model.trim="member_code" type="text" placeholder="请输入卡号" />
          <input v-model.trim="member_pwd" type="password" placeholder="请输入卡密" />
        </view>
        <view class="shade">
          <button class="flex flex-center" @click="loginUser(3)">确认激活</button>
        </view>
      </view>
      <!-- 支付弹窗 -->
      <PayDialog :open.sync="payDialogOpen" :money="cardChecked && cardChecked.price"
        :special_id="cardChecked && cardChecked.id" :pay_type_num="pay_type_num" :is-wechat="isWechat"
        :is-alipay="isAlipay" :template-id="templateId" :wxpay-h5="wxpayH5" :is-balance="false" @change="changeVal" />
    </view>
  </BaseContainer>
</template>

<script>
  import { getRebateAmount, getUserInfo } from "@/api/auth";
  import {
    exchangeMember,
    getMemberData,
    getMemberInitData,
    getMemberShipList,
  } from "@/api/member";
  import { getSpecialTemplateIds, aliPayApp, aliPayWap } from "@/api/special";
  import PayDialog from "@/components/PayDialog/index.vue";

  export default {
    data() {
      return {
        exchangeShow: false, // 是否显示兑换弹窗
        loginShow: false, // 是否显示登录弹窗
        userInfo: null, // 用户信息
        interests: [], // 会员权益
        description: [], // 会员说明
        cardList: [], // 会员套餐
        cardChecked: null, // 选中的套餐
        member_code: "", // 卡号
        member_pwd: "", // 卡密
        surplus: 0,
        siteName: "", // 站点名称
        isWechat: false, // 是否是微信
        id: 0,
        payDialogOpen: false, // 是否显示支付弹窗
        isAlipay: true, // 是否开启支付宝支付
        pay_type_num: 10,

        templateId: "", // 订阅通知模板id
        wxpayH5: false, // 是否开启微信H5支付
        rebateMoney: 0,
        isShareDisplaySwitch: false, // 是否显示分享返佣
        isOpenWeixing: false
      };
    },
    computed: {
      url() {
        return this.isWechat ? "/pages/index/login" : "/pages/login/phone_check";
      },
    },
    components: {
      PayDialog,
    },
    watch: {
      cardChecked(value) {
        if (value.is_free) {
          this.rebateMoney = 0;
        } else {
          this.rebateAmount();
        }
      },
    },
    onShow() {
      if (this.isOpenWeixing && this.orderId) {
        this.$util.wxh5PayIsSuccess(this.orderId, 1, this)
        this.isOpenWeixing = false
      }
      this.getUserInfo();
    },
    onLoad() {
      this.loginUser();
      this.getData();
      if (this.isWechat) {
        this.mapleApi = mapleWx($jssdk());
        this.subscribe();
      }
    },
    methods: {
      scrollToList() {
        const query = uni.createSelectorQuery().in(this);
        query
          .select("#flag")
          .boundingClientRect((data) => {
            uni.pageScrollTo({
              scrollTop: data.top,
            });
          })
          .exec();
      },
      getData() {
        getMemberInitData().then(({ data }) => {
          const { siteName, isAlipay, isWechat, wxpayH5, is_share_display_switch } = data;
          Object.assign(this, {
            siteName,
            isAlipay,
            isWechat,
            wxpayH5,
            is_share_display_switch,
          });
        });
      },
      handleToggleCard(e) {
        const { idx } = e.target.dataset;
        if (idx === undefined) return;
        const item = this.cardList[idx];
        if (!item) return;
        this.cardChecked = item;
      },
      // 订阅通知模板id
      subscribe() {
        getSpecialTemplateIds(this.pay_type_num, this.cardChecked.id).then(({ msg }) => {
          this.templateId = msg;
        });
      },
      loginUser(type) {
        this.$util.checkLogin(() => {
          switch (type) {
            case 1:
              this.payDialogOpen = true;
              break;
            case 2:
              this.exchangeShow = true;
              break;
            case 3:
              this.exchange();
              break;
            default:
              this.getUserInfo();
              this.getMemberData();
              this.getMemberList();
              break;
          }
        }, true);
      },
      // 用户信息
      getUserInfo() {
        getUserInfo().then(({ data }) => {
          this.userInfo = data;
        });
      },
      // 会员权益、说明
      getMemberData() {
        getMemberData().then(({ data }) => {
          this.interests = data.interests;
          this.description = data.description;
        });
      },
      // 会员套餐
      getMemberList() {
        getMemberShipList().then(({ data }) => {
          data.forEach((item) => {
            item.price = Number(item.price);
            item.original_price = Number(item.original_price);
          });
          this.cardList = data;
          this.cardChecked = data[0] || null;
        });
      },
      pay_order(data) {
        this.orderId = data.data.result.orderId || "";
        switch (data.data.status) {
          case "PAY_ERROR":
          case "ORDER_EXIST":
          case "ORDER_ERROR":
            this.extendOrder(data.msg);
            break;
          case "WECHAT_PAY":
            this.wechatPay(data.data.result.jsConfig);
            break;
          case "WECHAT_H5_PAY":
            this.payDialogOpen = false;
            this.$util.wechatH5Pay(data.data.result.jsConfig, this);
            break;
          case "WECHAT_ROUTINE_PAY":
            this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
            break;
          /*  case "ZHIFUBAO_PAY":
             window.location.assign(
               $h.U({
                 c: "alipay",
                 a: "index",
                 q: {
                   info: data.data.result,
                   params: "member",
                 },
               })
             );
             break; */
          case "SUCCESS":
            this.successOrder(data.msg);
            break;
          case "ZHIFUBAO_PAY":
            this.aliPay(data.data.result, "member")
            break;
          case 'TOUTIAO_PAY':
            this.$util.toutiaoPay(data.data.result.jsConfig, this);
            break;
          case 'KUAISHOU_PAY':
            this.$util.kuaishouPay(data.data.result.jsConfig, this);
            break
        }
      },
      aliPay(msn, type) {
        this.$util.aliPay(msn, type, this)
      },
      wechatPay: function (config) {
        this.$util.weixinpay(config, this)
      },
      successOrder(msg) {
        this.$util.showMsg(msg || "领取成功");
        setTimeout(() => {
          this.payDialogOpen = false;
          this.getUserInfo();
          this.getMemberList();
        }, 500);
      },
      extendOrder(msg) {
        if (typeof msg === "object") {
          if (msg.errMsg === "chooseWXPay:cancel") {
            msg = "微信支付取消";
          } else {
            msg = "支付失败";
          }
        } else {
          msg = "支付失败";
        }
        this.$util.showMsg(msg);
        this.payment = true;
      },
      close() {
        this.popupShow = false;
      },
      getUrlStr() {
        var queryStr = {};
        location.search.replace(/([^?&=]+)=([^&]+)/g, function (_, k, v) {
          queryStr[k] = v;
        });
        return queryStr;
      },
      // 激活
      async exchange() {
        if (!this.member_code) {
          this.$util.showMsg("请输入卡号");
          return false;
        } else if (!this.member_pwd) {
          this.$util.showMsg("请输入卡密");
          return false;
        }
        uni.showLoading({ mask: true });
        await exchangeMember(this.member_code, this.member_pwd).then(res => {
          uni.hideLoading();
          this.exchangeShow = false;
          this.$util.showMsg(res.msg);
          this.getUserInfo();
        }).catch(err => {
          uni.hideLoading();
          this.$util.showMsg(err.msg);
        })
      },
      enter() {
        this.loginShow = true;
      },
      payClose(value) {
        this.payment = value;
      },
      //关闭登录
      loginClose(value) {
        this.loginShow = false;
        value && this.logComplete();
      },
      //登录完成回调事件
      logComplete() {
        this.loginShow = false;
      },
      //所有插件回调处理事件
      changeVal(opt) {
        if (typeof opt != "object") opt = {};
        var action = opt.action || "";
        var value = opt.value || "";
        this[action] && this[action](value);
      },
      // 获取返佣金额
      rebateAmount() {
        getRebateAmount(this.cardChecked.id, 1).then(({ data }) => {
          this.rebateMoney = parseFloat(data.brokeragePrice);
        });
      },
      // 生成分享海报
      createSharePoster: function () {
        var vm = this;
        var imagePromise = new Promise(function (resolve, reject) {
          var image = new Image();
          image.crossOrigin = "anonymous";
          image.src = spreadPosterUrl + "?" + new Date().getTime();
          (image.onload = function () {
            resolve(image);
          }),
            (image.onerror = function () {
              reject("error-image");
            });
        }),
          qrcodePromise = new Promise(function (resolve, reject) {
            resolve(new QRCode(document.createElement("canvas"), url));
          });
        Promise.all([imagePromise, qrcodePromise])
          .then(function (sources) {
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");
            canvas.width = 600;
            canvas.height = 960;

            context.fillStyle = "#FFFFFF";
            context.fillRect(0, 0, 600, 960);

            context.drawImage(sources[0], 0, 0, 600, 740);
            context.drawImage(sources[1]._el.firstElementChild, 108, 775, 150, 150);

            context.font = "22px sans-serif";
            context.fillStyle = "#999999";
            context.textBaseline = "top";

            var text = "邀您加入" + siteName;
            var list = [];
            var start = 0;
            for (var i = 0; i <= text.length; i++) {
              if (context.measureText(text.slice(start, i)).width > 198) {
                list.push(text.slice(start, i - 1));
                start = i - 1;
              }
            }
            if (start !== text.length) {
              list.push(text.slice(start));
            }
            if (list.length > 3) {
              list.length = 3;
              for (var j = 0; j <= list[2].length; j++) {
                if (context.measureText(list[2].slice(0, j) + "……").width > 198) {
                  list[2] = list[2].slice(0, j - 1) + "……";
                  break;
                }
              }
            }
            list.push("长按识别或扫码进入");
            for (var k = 0; k < list.length; k++) {
              context.fillText(list[k], 294, 775 + (150 / list.length) * k);
            }

            layer.photos({
              photos: {
                data: [
                  {
                    src: canvas.toDataURL("image/jpeg"),
                  },
                ],
              },
              anim: 5,
            });
            canvas = null;
          })
          .catch(function (err) {
            $h.pushMsg(err);
          });
      },
      rebateAction(value) {
        switch (value) {
          case "close":
            this.rebateMoney = 0;
            break;
          case "share":
            this.createSharePoster();
            break;
        }
      },
    },
  };
</script>

<style scoped lang="scss"></style>