484 lines
12 KiB
Vue
484 lines
12 KiB
Vue
|
||
<template>
|
||
<view class="page">
|
||
<view class='bj_able'>
|
||
<view class="totalMoney">
|
||
<view class='able_text' v-if="exchange_type==2">{{__('可用积分数量')}}（{{userInfo.user_points}}）</view>
|
||
<view class='able_text' v-else>{{__('可用余额')}}（{{userInfo.user_money}}）</view>
|
||
</view>
|
||
<view class='able_input'>
|
||
<view class='able_fuhao'>{{Currency}}</view>
|
||
<input class='input_lab' type="digit" @input="inputnum" maxlength="8" @blur="blur" v-model='deliveryNum'></input>
|
||
<view class='pict_fal' @click="clearnum">
|
||
<image class='fal_pic' src='/static/images/false.png'></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pay">
|
||
<view class="coupon" @click="suitcouponlist" v-if="CouponEnabeld==true&&isCoupon">
|
||
<view><text style='letter-spacing: 2.4rpx;font-size:26rpx;'>{{__('优惠券')}}</text></view>
|
||
<view style="color:#db384c;">-{{Currency}}{{DiscountMoney}}
|
||
<text class="m-cell-ft"></text></view>
|
||
</view>
|
||
<view class="coupon" v-if="MaxUsableCash>0&&isECashCard">
|
||
<view class=""><text style='font-size:26rpx;'>{{__('余额抵扣')}}</text><text style="font-size:24rpx;color: #333333;">({{__('可使用')}}{{Currency}}{{MaxUsableCash}})</text></view>
|
||
<view class=""><text class="" v-if="isBalance" style="position:absolute;right:19%;color:#db384c">{{Currency}}{{balance}}</text>
|
||
<switch checked @change="switchChange" style="transform:scale(0.6);position:absolute;right:36rpx" />
|
||
</view>
|
||
</view>
|
||
<view class=" payments"><label style='letter-spacing: 2.4rpx;font-size:26rpx;'>{{__('实付款')}}</label><text style="color:#db384c">{{Currency}}{{realPayMoney}}</text></view>
|
||
</view>
|
||
<form report-submit="true" @submit="paysubmit" v-if='isSubmit'><button class="payment" formType="submit">{{__('确认兑换')}}</button></form>
|
||
<form report-submit="true" v-else><button class="payment" formType="submit">{{__('确认兑换')}}</button></form>
|
||
<view class="explain" v-if="Description">
|
||
<view class="title">{{__('买单说明：')}}</view>
|
||
<view class="content">{{Description}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-top-default">
|
||
<navigator url='/pages/index/index' open-type="switchTab" class="u-back2">
|
||
<image src='https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/gohome.png'></image>
|
||
</navigator>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapMutations } from "vuex";
|
||
|
||
export default {
|
||
data: function () {
|
||
return {
|
||
money: "",
|
||
nodiscount: "",
|
||
discount: "",
|
||
isshow: false,
|
||
deliveryNum: "",
|
||
isshow1: false,
|
||
shop_discount: 10,
|
||
totalMoney: "",
|
||
payment: 0,
|
||
info: [],
|
||
orderNum: "",
|
||
formId: "",
|
||
time: "",
|
||
Description: "",
|
||
MoneyLimit: "",
|
||
CouponEnabeld: "",
|
||
discountvalue: "",
|
||
nodiscountvalue: "",
|
||
DiscountMoney: "0.00",
|
||
couponItemId: 0,
|
||
IsUseCoupon: 1,
|
||
MaxUsableCash: 0,
|
||
MaxUsableECardCash: 0,
|
||
MaxUsableExtraCash: 0,
|
||
balance: 0,
|
||
realMoney: 0,
|
||
isBalance: true,
|
||
eCardCash: 0,
|
||
extraCash: 0,
|
||
realPayMoney: 0,
|
||
isECashCard: true,
|
||
isCoupon: true,
|
||
isSubmit: true,
|
||
Currency: __("￥"),
|
||
store_id: 0,
|
||
title: "",
|
||
exchange_type: 1, //1:money->积分 2:积分->money
|
||
};
|
||
},
|
||
computed: mapState([
|
||
"Config",
|
||
"StateCode",
|
||
"notice",
|
||
"plantformInfo",
|
||
"shopInfo",
|
||
"userInfo",
|
||
"hasLogin",
|
||
]),
|
||
onLoad(options) {
|
||
uni.setNavigationBarTitle({
|
||
title: this.__("积分兑换"),
|
||
});
|
||
|
||
var that = this;
|
||
that.setData({
|
||
exchange_type: options.type ? options.type : 1,
|
||
});
|
||
|
||
if (that.exchange_type == 1) {
|
||
that.title = "余额兑换积分";
|
||
} else {
|
||
that.title = "积分转余额";
|
||
}
|
||
|
||
that.$.setNavigationBarTitle({
|
||
title: that.title,
|
||
});
|
||
|
||
that.getPlantformInfo(function (plantform) {
|
||
that.forceUserInfo(function (user) {
|
||
that.setData({
|
||
Currency: " ",
|
||
store_id: 1001,
|
||
});
|
||
|
||
that.load(options);
|
||
});
|
||
});
|
||
},
|
||
|
||
onUnload() {
|
||
// 离开页面，注销事件
|
||
var that = this;
|
||
this.notice.removeNotification("RefreshCoupon1", that);
|
||
},
|
||
methods: {
|
||
...mapMutations([
|
||
"login",
|
||
"logout",
|
||
"getPlantformInfo",
|
||
"forceUserInfo",
|
||
"getUserInfo",
|
||
"reloadUserResource",
|
||
]),
|
||
|
||
load: function (options) {
|
||
var store_id = 1001;
|
||
|
||
var a = {
|
||
store_id: store_id,
|
||
};
|
||
//console.log("val+++++", a);
|
||
var that = this;
|
||
},
|
||
clearnum: function (a) {
|
||
//console.info(111)
|
||
this.setData({
|
||
deliveryNum: "",
|
||
realPayMoney: "",
|
||
});
|
||
},
|
||
inputnum: function (e) {
|
||
let that = this;
|
||
|
||
let num = e.detail.value;
|
||
|
||
//购买积分
|
||
if (that.exchange_type == 1) {
|
||
let need_money = num * that.Config.POINTS_VAUE_RATE;
|
||
|
||
if (need_money > that.userInfo.user_money) {
|
||
num = Math.ceil(
|
||
that.userInfo.user_money / that.Config.POINTS_VAUE_RATE
|
||
);
|
||
|
||
that.$.alert(that.$.sprintf("最多兑换 %d 积分", num));
|
||
|
||
this.setData({
|
||
deliveryNum: num,
|
||
});
|
||
} else {
|
||
}
|
||
|
||
this.setData({
|
||
realPayMoney: num * that.Config.POINTS_VAUE_RATE,
|
||
});
|
||
} else {
|
||
//积分转余额
|
||
if (num > that.userInfo.user_points) {
|
||
num = that.userInfo.user_points;
|
||
|
||
that.$.alert(
|
||
that.$.sprintf("积分最多可用 %d", that.userInfo.user_points)
|
||
);
|
||
|
||
this.setData({
|
||
deliveryNum: that.userInfo.user_points,
|
||
});
|
||
} else {
|
||
}
|
||
|
||
this.setData({
|
||
realPayMoney: num * that.Config.POINTS_VAUE_RATE,
|
||
});
|
||
}
|
||
},
|
||
blur: function (a) {
|
||
let that = this;
|
||
/^\d{1,10}(\.\d{1,2})?$/.test(a.detail.value) ||
|
||
that.$.showModal({
|
||
title: "提示",
|
||
content: "请输入正确金额",
|
||
});
|
||
},
|
||
paysubmit: function (a) {
|
||
var that = this;
|
||
if (that.$.isNull(this.deliveryNum) || 0 == this.deliveryNum)
|
||
return that.$.showModal({
|
||
title: "提示",
|
||
content: "请输入积分总数",
|
||
});
|
||
|
||
if (!/^\d{1,10}(\.\d{1,2})?$/.test(that.deliveryNum))
|
||
return that.$.showModal({
|
||
title: "提示",
|
||
content: "请输入正确金额",
|
||
});
|
||
|
||
let url = that.Config.URL.user.money2points;
|
||
let tips = that.$.sprintf(
|
||
"确认{￥%.2f兑换%i积分?",
|
||
that.realPayMoney,
|
||
that.deliveryNum
|
||
);
|
||
//购买积分
|
||
if (that.exchange_type == 1) {
|
||
} else {
|
||
url = that.Config.URL.user.points2money;
|
||
tips = that.$.sprintf(
|
||
"确认%i积分转为余额￥%.2f?",
|
||
that.deliveryNum,
|
||
that.realPayMoney
|
||
);
|
||
}
|
||
|
||
//确认提示
|
||
that.$.confirm(
|
||
tips,
|
||
function (n) {
|
||
if (n.confirm) {
|
||
// 初始化页面
|
||
that.$.request({
|
||
type: "post",
|
||
url: url,
|
||
data: { points_num: that.deliveryNum },
|
||
dataType: "json",
|
||
success: function (data, status, msg, code) {
|
||
if (200 == status) {
|
||
that.$.alert(that.__("转赠成功！"));
|
||
|
||
setTimeout(function () {
|
||
that.reloadUserResource(function (user_info) {
|
||
that.$.gopage("/integral/integral/record");
|
||
});
|
||
}, 2e3);
|
||
} else {
|
||
that.$.alert(msg);
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
true
|
||
);
|
||
},
|
||
gotopay: function () {},
|
||
switchChange: function (a) {
|
||
a.detail.value
|
||
? this.setData({
|
||
realPayMoney: this.realMoney,
|
||
isBalance: true,
|
||
})
|
||
: this.setData({
|
||
realPayMoney: this.payment,
|
||
isBalance: false,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|
||
|
||
<style lang="scss">
|
||
@import "../../styles/_variables";
|
||
.totalMoney {
|
||
width: 90%;
|
||
display: flex;
|
||
margin: 24rpx auto 0;
|
||
justify-content: space-betwee;
|
||
height: 92rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
.totalMoney label {
|
||
width: 54%;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size: 26rpx;
|
||
color: #000;
|
||
}
|
||
.totalMoney input {
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size: 26rpx;
|
||
text-align: right;
|
||
margin-right: 20rpx;
|
||
}
|
||
.nodiscount {
|
||
width: 90%;
|
||
margin: 51rpx auto 20rpx auto;
|
||
}
|
||
.check {
|
||
height: 58rpx;
|
||
line-height: 58rpx;
|
||
font-size: 26rpx;
|
||
color: #808080;
|
||
}
|
||
.discount {
|
||
height: 85rpx;
|
||
line-height: 90rpx;
|
||
padding: 0 40rpx;
|
||
background: #fff;
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
margin: 24rpx 0;
|
||
}
|
||
.pay {
|
||
padding: 0 40rpx;
|
||
background: #fff;
|
||
}
|
||
.coupon {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 98rpx;
|
||
line-height: 98rpx;
|
||
font-size: 26rpx;
|
||
color: #000;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
}
|
||
.payments {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 98rpx;
|
||
line-height: 98rpx;
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
}
|
||
.payment {
|
||
width: 90%;
|
||
height: 80rpx;
|
||
line-height: 82rpx;
|
||
background: #db384c;
|
||
color: #fff;
|
||
margin-top: 50rpx;
|
||
}
|
||
.explain {
|
||
width: 90%;
|
||
margin: 50rpx auto;
|
||
}
|
||
.title {
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
}
|
||
.content {
|
||
font-size: 24rpx;
|
||
color: #717171;
|
||
margin-top: 10rpx;
|
||
}
|
||
.m-cell-ft::after {
|
||
content: " ";
|
||
display: inline-block;
|
||
height: 12rpx;
|
||
width: 12rpx;
|
||
border-width: 4rpx 4rpx 0 0;
|
||
border-color: #999;
|
||
border-style: solid;
|
||
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||
position: relative;
|
||
margin-top: -8rpx;
|
||
top: -4rpx;
|
||
right: -4rpx;
|
||
}
|
||
.u-back2 image {
|
||
border-radius: 100%;
|
||
width: 77rpx;
|
||
height: 77rpx;
|
||
border: 1px solid #eee;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
|
||
z-index: 999;
|
||
opacity: 0.8;
|
||
line-height: 77rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.bj_able {
|
||
background: #fff;
|
||
width: 92%;
|
||
margin: 0 auto;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
.able_text {
|
||
letter-spacing: 2rpx;
|
||
width: 80%;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size: 26rpx;
|
||
color: #000;
|
||
}
|
||
.able_input {
|
||
width: 90%;
|
||
margin: 20rpx auto 0 auto;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
height: 110rpx;
|
||
display: flex;
|
||
}
|
||
.able_fuhao {
|
||
font-family: PingFangSC-Medium;
|
||
font-size: 60rpx;
|
||
color: #000;
|
||
letter-spacing: 0.84rpx;
|
||
text-align: center;
|
||
line-height: 94rpx;
|
||
margin-right: 10rpx;
|
||
font-weight: bold;
|
||
} /* .input_lab { float: left; width: 75%; height: 100%; } */
|
||
.checkbox {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 26rpx;
|
||
color: #7b7b7b;
|
||
letter-spacing: 0.5rpx;
|
||
text-align: center;
|
||
}
|
||
.no_lab {
|
||
width: 90%;
|
||
display: flex;
|
||
margin: 24rpx auto 0;
|
||
justify-content: space-betwee;
|
||
height: 98rpx;
|
||
border-radius: 8rpx;
|
||
line-height: 98rpx;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
}
|
||
.pict_fal {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
position: absolute;
|
||
top: 161rpx;
|
||
right: 9%;
|
||
}
|
||
.fal_pic {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
.input_lab {
|
||
width: 87%;
|
||
font-family: UICTFontTextStyleBody;
|
||
font-size: 74rpx;
|
||
height: 74rpx; /* line-height:74rpx; */ /* padding:8rpx 0; */
|
||
min-height: 83rpx;
|
||
line-height: normal;
|
||
box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
-webkit-box-sizing: border-box;
|
||
vertical-align: middl;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|