You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
461 lines
15 KiB
461 lines
15 KiB
10 months ago
|
<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="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>
|