547 lines
13 KiB
Vue
547 lines
13 KiB
Vue
<template>
|
|
<view style="height: 100%;">
|
|
<scroll-view scroll-y="true" class="info-wrap" v-if="type == 'member'">
|
|
<view class="header">会员充值</view>
|
|
<view class="headimg-content" v-if="memberInfo">
|
|
<view class="headimg"><image :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.img('public/uniapp/default_img/head.png')"></image></view>
|
|
<view class="header-info">
|
|
<view class="name">
|
|
<text>{{ memberInfo.nickname }}</text>
|
|
<text v-if="memberInfo.member_level" class="level-name">{{ memberInfo.member_level_name }}</text>
|
|
<button type="default" @click="switchMember()" class="primary-btn">切换会员</button>
|
|
</view>
|
|
<view class="header-info-item">
|
|
<view>手机号：{{ memberInfo.mobile || '--' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="headimg-content" v-else>
|
|
<view class="headimg"><image :src="$util.img('public/uniapp/default_img/head.png')"></image></view>
|
|
<view class="header-info">
|
|
<view class="name">
|
|
<text>散客</text>
|
|
<button type="default" @click="switchMember()" class="primary-btn">登录会员</button>
|
|
</view>
|
|
<view class="header-info-item"><view>手机号：--</view></view>
|
|
</view>
|
|
</view>
|
|
<view class="form-box">
|
|
<view class="form-content">
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="required"></text>
|
|
充值方式：
|
|
</view>
|
|
<view class="form-inline search-wrap">
|
|
<uni-data-checkbox v-model="rechargeType" selectedColor="#8558FA" :localdata="rechargeTypeList"></uni-data-checkbox>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item" v-if="rechargeType == 2">
|
|
<view class="form-label">
|
|
<text class="required">*</text>
|
|
充值金额：
|
|
</view>
|
|
<view class="form-inline search-wrap"><input type="number" class="form-input" v-model="rechargeMoney" /></view>
|
|
</view>
|
|
|
|
<view class="form-item" v-if="rechargeType == 1">
|
|
<view class="form-label">
|
|
<text class="required">*</text>
|
|
充值金额：
|
|
</view>
|
|
<view class="form-inline ">
|
|
<view class="label-list">
|
|
<view
|
|
class="form-label"
|
|
:class="{ active: rechargeIndex == index }"
|
|
@click="rechargeIndex = index"
|
|
v-for="(item, index) in memberRecharge"
|
|
:key="index"
|
|
>
|
|
<view class="price">{{ item.buy_price }}元</view>
|
|
<view class="balance">到账{{ item.face_value }}元</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item" v-if="reward">
|
|
<view class="form-label">
|
|
<text class="required">*</text>
|
|
充值优惠：
|
|
</view>
|
|
<view class="form-inline">
|
|
<view class="content-box">
|
|
<view class="content-gift" v-if="memberRecharge[rechargeIndex].growth">
|
|
<i class="iconfont iconchengchangzhi"></i>
|
|
赠送{{ memberRecharge[rechargeIndex].growth }}成长值
|
|
</view>
|
|
<view class="content-gift" v-if="memberRecharge[rechargeIndex].point">
|
|
<i class="iconfont iconjifen"></i>
|
|
赠送{{ memberRecharge[rechargeIndex].point }}积分
|
|
</view>
|
|
<view class="content-gift" v-if="memberRecharge[rechargeIndex].coupon_id">
|
|
<i class="iconfont iconyouhuiquan1"></i>
|
|
赠送优惠券 X{{ memberRecharge[rechargeIndex].coupon_id.split(',').length }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="gift-remark"
|
|
v-if="rechargeType == 1 && memberRecharge.length > 0 && memberRecharge[rechargeIndex] && memberRecharge[rechargeIndex].goods_data != undefined"
|
|
>
|
|
备注：赠送的产品需线下提货，赠送的项目可在线下进行使用
|
|
</view>
|
|
|
|
<view class="action-btn"><button type="primary" class="primary-btn" @click="pay()">充值</button></view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="info-wrap payment-info-wrap" v-if="type == 'pay'">
|
|
<nc-payment ref="payment" :supportBalance="false" @cancel="cancelPayment" @success="paySuccess" @getMemberInfo="getMemberInfo" :outTradeNo="outTradeNo"></nc-payment>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniDataCheckbox from '@/components/uni-data-checkbox/uni-data-checkbox.vue';
|
|
export default {
|
|
components: {
|
|
uniDataCheckbox
|
|
},
|
|
name: 'ncMember',
|
|
props: {},
|
|
data() {
|
|
return {
|
|
type: 'member',
|
|
memberId: 0,
|
|
flag: false,
|
|
//充值卡相关
|
|
memberRecharge: [],
|
|
rechargeMoney: 0,
|
|
rechargeType: 1,
|
|
rechargeIndex: 0,
|
|
rechargeTypeList: [
|
|
{
|
|
text: '充值套餐',
|
|
value: 1
|
|
},
|
|
{
|
|
text: '自定义金额',
|
|
value: 2
|
|
}
|
|
],
|
|
orderData: {
|
|
pay_money: 0,
|
|
goods_info: null,
|
|
remark: ''
|
|
},
|
|
outTradeNo: '',
|
|
isRepeat: false,
|
|
remark: ''
|
|
};
|
|
},
|
|
created() {
|
|
this.getMemberRechange();
|
|
if (this.memberInfo) {
|
|
this.memberId = this.memberInfo.member_id;
|
|
}
|
|
},
|
|
methods: {
|
|
switchMember() {
|
|
this.$emit('switchMember');
|
|
},
|
|
|
|
//充值卡相关
|
|
getMemberRechange() {
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/recharge/activity',
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
this.memberRecharge = res.data;
|
|
if (this.memberRecharge.length > 0) {
|
|
for (let i in this.memberRecharge) this.memberRecharge[i]['money'] = this.memberRecharge[i]['price'];
|
|
this.calculation();
|
|
} else {
|
|
this.rechargeType = 2;
|
|
this.rechargeTypeList[0].disable = true;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
getMemberInfo() {
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/member/info',
|
|
data: {
|
|
member_id: this.memberInfo.member_id
|
|
},
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
this.$store.commit('setMemberInfo', res.data);
|
|
} else {
|
|
this.$util.showToast({ title: '未获取到会员信息' });
|
|
}
|
|
}
|
|
});
|
|
},
|
|
calculation() {
|
|
let pay_money = this.rechargeType == 1 ? this.memberRecharge[this.rechargeIndex]['price'] : this.rechargeMoney;
|
|
this.orderData.pay_money = parseFloat(pay_money);
|
|
},
|
|
pay() {
|
|
if (!this.memberInfo || (this.memberInfo && !this.memberInfo.member_id)) {
|
|
this.type = 'member';
|
|
this.switchMember();
|
|
return false;
|
|
}
|
|
|
|
if (this.rechargeType == 1 && !this.memberRecharge[this.rechargeIndex]) {
|
|
this.$util.showToast({ title: '请选择充值套餐' });
|
|
return;
|
|
}
|
|
if (this.rechargeType == 2 && (isNaN(parseInt(this.rechargeMoney)) || parseInt(this.rechargeMoney) <= 0)) {
|
|
this.$util.showToast({ title: '请输入正确的充值金额' });
|
|
return;
|
|
}
|
|
|
|
let data = {
|
|
member_id: this.memberInfo.member_id,
|
|
remark: this.remark
|
|
};
|
|
if (this.rechargeType == 1) {
|
|
data.sku_array = [{ recharge_id: this.memberRecharge[this.rechargeIndex].recharge_id }];
|
|
} else {
|
|
data.sku_array = [{ money: this.rechargeMoney }];
|
|
}
|
|
data.sku_array = JSON.stringify(data.sku_array);
|
|
|
|
if (this.isRepeat) return;
|
|
this.isRepeat = true;
|
|
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/cashierordercreate/rechargecreate',
|
|
data: data,
|
|
success: res => {
|
|
this.isRepeat = false;
|
|
if (res.code == 0) {
|
|
this.outTradeNo = res.data.out_trade_no;
|
|
this.type = 'pay';
|
|
} else {
|
|
this.$util.showToast({ title: res.message });
|
|
}
|
|
}
|
|
});
|
|
},
|
|
cancelPayment() {
|
|
this.type = 'member';
|
|
this.calculation();
|
|
},
|
|
paySuccess() {
|
|
let that = this;
|
|
this.type = 'member';
|
|
this.orderData.pay_money = 0;
|
|
this.orderData.goods_info = null;
|
|
this.outTradeNo = '';
|
|
this.remark = '';
|
|
this.calculation();
|
|
if (this.memberInfo) this.memberId = this.memberInfo.member_id;
|
|
this.getMemberInfo();
|
|
}
|
|
},
|
|
computed: {
|
|
reward() {
|
|
if (this.rechargeType == 1 && this.memberRecharge.length > 0 && this.memberRecharge[this.rechargeIndex]) {
|
|
let data = this.memberRecharge[this.rechargeIndex];
|
|
if (data.point || data.growth || data.coupon) return true;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
rechargeMoney: function(nval, oval) {
|
|
this.calculation();
|
|
},
|
|
rechargeIndex: function(nval, oval) {
|
|
this.calculation();
|
|
},
|
|
type: function(nval) {
|
|
let bool = nval == 'member' ? true : false;
|
|
this.$emit('actionBtnShwoFn', bool);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.header {
|
|
height: 0.66rem;
|
|
line-height: 0.66rem;
|
|
text-align: left;
|
|
border-bottom: 0.01rem solid #e6e6e6;
|
|
color: #303133;
|
|
font-size: 0.14rem;
|
|
}
|
|
|
|
.search-wrap {
|
|
.search-box {
|
|
padding-top: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
height: calc(100% - 0.86rem);
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.search-title {
|
|
font-size: 0.18rem;
|
|
color: #303133;
|
|
}
|
|
.search-content {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 0.3rem;
|
|
input {
|
|
height: 0.5rem;
|
|
width: 60%;
|
|
max-width: 5rem;
|
|
background: #ffffff;
|
|
padding-left: 0.2rem;
|
|
border: 0.01rem solid #cccccc;
|
|
box-sizing: border-box;
|
|
font-size: 0.18rem;
|
|
}
|
|
button {
|
|
margin: 0;
|
|
width: 1.2rem;
|
|
height: 0.5rem;
|
|
font-size: 0.18rem;
|
|
text-align: center;
|
|
line-height: 0.5rem;
|
|
margin-right: 0.15rem;
|
|
}
|
|
}
|
|
.search-desc {
|
|
color: #909399;
|
|
font-size: 0.14rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
.search-tips {
|
|
color: $primary-color;
|
|
font-size: 0.14rem;
|
|
margin-top: 0.15rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-wrap {
|
|
position: relative;
|
|
height: 100%;
|
|
&.payment-info-wrap {
|
|
border-left: 0.01rem solid #e6e6e6;
|
|
padding-left: 0.2rem;
|
|
}
|
|
.headimg-content {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 0.2rem;
|
|
.headimg {
|
|
width: 0.7rem;
|
|
height: 0.7rem;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.header-info {
|
|
margin-left: 0.15rem;
|
|
flex: 1;
|
|
.name {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.16rem;
|
|
color: #303133;
|
|
.level-name {
|
|
background: #ffffff;
|
|
border: 0.01rem solid $primary-color;
|
|
border-radius: 0.02rem;
|
|
font-size: 0.12rem;
|
|
color: $primary-color;
|
|
margin-left: 0.15rem;
|
|
min-width: 0.65rem;
|
|
height: 0.22rem;
|
|
text-align: center;
|
|
line-height: 0.22rem;
|
|
}
|
|
.primary-btn {
|
|
padding: 0 0.1rem;
|
|
width: 0.7rem;
|
|
font-size: $uni-font-size-sm;
|
|
margin: 0;
|
|
height: 0.24rem;
|
|
line-height: 0.24rem;
|
|
margin-left: 0.1rem;
|
|
}
|
|
}
|
|
.header-info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 0.1rem;
|
|
justify-content: space-between;
|
|
view {
|
|
text-align: left;
|
|
font-size: 0.14rem;
|
|
color: #303133;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-data-list {
|
|
padding: 0 0.15rem;
|
|
margin-top: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.form-box {
|
|
.form-content {
|
|
margin-top: 0.2rem;
|
|
.gift-remark {
|
|
margin-left: 1.3rem;
|
|
color: #999;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
.form-item {
|
|
margin-bottom: 0.1rem;
|
|
display: flex;
|
|
|
|
.form-label {
|
|
width: 1.3rem;
|
|
text-align: right;
|
|
padding-right: 0.1rem;
|
|
box-sizing: border-box;
|
|
height: 0.32rem;
|
|
line-height: 0.32rem;
|
|
.required {
|
|
color: red;
|
|
margin-right: 0.03rem;
|
|
}
|
|
}
|
|
.form-inline {
|
|
flex: 1;
|
|
width: 0;
|
|
line-height: 0.32rem;
|
|
margin-right: 0.1rem;
|
|
box-sizing: border-box;
|
|
.form-input {
|
|
width: 2.3rem;
|
|
border-width: 0.01rem;
|
|
border-style: solid;
|
|
background-color: #fff;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
border-radius: 0.02rem;
|
|
padding-left: 0.1rem;
|
|
height: 0.32rem;
|
|
line-height: 0.32rem;
|
|
font-size: 0.14rem;
|
|
border-color: #e6e6e6;
|
|
border-radius: 0.02rem;
|
|
}
|
|
.form-textarea {
|
|
border-width: 0.01rem;
|
|
border-style: solid;
|
|
background-color: #fff;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
border-radius: 0.02rem;
|
|
padding-left: 0.1rem;
|
|
line-height: 0.32rem;
|
|
font-size: 0.14rem;
|
|
border-color: #e6e6e6;
|
|
}
|
|
button {
|
|
// width: calc(50% - 0.05rem);
|
|
display: inline-block;
|
|
margin-right: 0.1rem;
|
|
&:nth-child(2) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.label-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.form-label {
|
|
padding: 0.05rem 0.15rem;
|
|
border: 0.01rem solid #e6e6e6;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: 0 0.1rem 0.1rem 0;
|
|
cursor: pointer;
|
|
flex-direction: column;
|
|
width: unset;
|
|
height: unset;
|
|
white-space: nowrap;
|
|
.balance {
|
|
color: #999;
|
|
}
|
|
.price {
|
|
font-size: 0.17rem;
|
|
font-weight: 600;
|
|
}
|
|
&.active {
|
|
border-color: $primary-color;
|
|
color: $primary-color;
|
|
background-color: rgba(133, 88, 250, 0.1);
|
|
.balance {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-gift {
|
|
background-color: #f8f8f8;
|
|
padding: 0.04rem 0.1rem;
|
|
margin-bottom: 0.15rem;
|
|
font-size: 0.13rem;
|
|
i {
|
|
color: $primary-color;
|
|
margin-right: 0.05rem;
|
|
}
|
|
text {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
.search-wrap {
|
|
position: relative;
|
|
i {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0.1rem;
|
|
transform: translateY(-50%);
|
|
border-left: 0.01rem solid #e6e6e6;
|
|
line-height: 0.3rem;
|
|
padding-left: 0.1rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.action-btn {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0.15rem;
|
|
button {
|
|
height: 0.4rem;
|
|
line-height: 0.4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|