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.
324 lines
11 KiB
324 lines
11 KiB
<template>
|
|
<view>
|
|
<block v-if="isload">
|
|
<view class="container">
|
|
<view class="info-box">
|
|
<view class="info-item">
|
|
<text class="t1">商户名称:</text>
|
|
<text class="t2">{{name}}</text>
|
|
</view>
|
|
<view class="info-item" v-if="mdlist.length>0">
|
|
<text class="t1">选择门店:</text>
|
|
<text class="t2" @tap="selectmd">{{mdlist[mdkey].name}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="t1">支付金额:</text>
|
|
<view class="t2 flex-y-center" style="justify-content:flex-end"><input type="digit" @input="inputMoney" value="" placeholder="请输入金额"></input> 元</view>
|
|
</view>
|
|
</view>
|
|
<view class="info-box">
|
|
<view class="dkdiv-item flex" v-if="userinfo.discount>0 && userinfo.discount<10">
|
|
<text class="f1">{{t('会员')}}折扣({{userinfo.discount*100/100}}折)</text>
|
|
<text class="f2" style="color: #e94745;">-￥{{disprice}}</text>
|
|
</view>
|
|
<view class="dkdiv-item flex">
|
|
<text class="f1">{{t('优惠券')}}</text>
|
|
<text class="f2" @tap="showCouponList" style="color:#e94745">{{couponrid!=0?couponList[couponkey].couponname:'请选择'+t('优惠券')}}</text>
|
|
<image class="f3" :src="event_rul + '/static/img/static/img/arrowright.png'"></image>
|
|
</view>
|
|
<view class="dkdiv-item flex">
|
|
<checkbox-group @change="scoredk" class="flex" style="width:100%">
|
|
<text class="f1">{{userinfo.score*1}} {{t('积分')}}可抵扣 <text style="color:#e94745">{{userinfo.dkmoney*1}}</text> 元</text>
|
|
<view class="f2">使用{{t('积分')}}抵扣
|
|
<checkbox value="1" style="margin-left:6px;transform:scale(.8)"></checkbox>
|
|
</view>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
<view class="info-box">
|
|
<view class="info-item">
|
|
<text class="t1">实付金额:</text>
|
|
<text class="t2">￥{{paymoney}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="op">
|
|
<view class="btn" @tap="topay" :style="{background:t('color1')}">去支付</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="couponvisible" class="popup__container">
|
|
<view class="popup__overlay" @tap.stop="handleClickMask"></view>
|
|
<view class="popup__modal">
|
|
<view class="popup__title">
|
|
<text class="popup__title-text">请选择{{t('优惠券')}}</text>
|
|
<image :src="event_rul + '/static/img/static/img/close.png'" class="popup__close" style="width:36rpx;height:36rpx" @tap.stop="handleClickMask"/>
|
|
</view>
|
|
<view class="popup__content">
|
|
<couponlist :couponlist="couponList" :choosecoupon="true" :selectedrid="couponrid" @chooseCoupon="chooseCoupon"></couponlist>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<loading v-if="loading"></loading>
|
|
<dp-tabbar :opt="opt"></dp-tabbar>
|
|
<popmsg ref="popmsg"></popmsg>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
opt:{},
|
|
loading:false,
|
|
isload: false,
|
|
menuindex:-1,
|
|
|
|
bid:0,
|
|
hiddenmodalput: true,
|
|
wxpayst:'',
|
|
alipay:'',
|
|
paypwd: '',
|
|
moneypay: '',
|
|
mdlist: "",
|
|
name: "",
|
|
userinfo: "",
|
|
couponList: [],
|
|
couponrid: 0,
|
|
coupontype: 1,
|
|
usescore: 0,
|
|
money: 0,
|
|
disprice: 0,
|
|
dkmoney: 0,
|
|
couponmoney: 0,
|
|
paymoney: 0,
|
|
mdkey: 0,
|
|
couponvisible: false,
|
|
couponkey: 0,
|
|
|
|
event_rul: app.globalData.event_url,
|
|
};
|
|
},
|
|
|
|
onLoad: function (opt) {
|
|
this.opt = app.getopts(opt);
|
|
this.bid = this.opt.bid || 0;
|
|
this.getdata();
|
|
},
|
|
onPullDownRefresh: function () {
|
|
this.getdata();
|
|
},
|
|
methods: {
|
|
|
|
getdata: function () {
|
|
var that = this; //获取产品信息
|
|
that.loading = true;
|
|
app.get('ApiMaidan/maidan', {bid:that.bid}, function (res) {
|
|
that.loading = false;
|
|
if (res.status == 0) {
|
|
app.alert(res.msg, function () {
|
|
app.goback();
|
|
});
|
|
return;
|
|
}
|
|
var userinfo = res.userinfo;
|
|
var couponList = res.couponList;
|
|
var mdlist = res.mdlist;
|
|
that.wxpayst = res.wxpayst;
|
|
that.alipay = res.alipay;
|
|
that.couponList = res.couponList;
|
|
that.mdlist = res.mdlist;
|
|
that.moneypay = res.moneypay;
|
|
that.name = res.name;
|
|
that.userinfo = res.userinfo;
|
|
that.loaded();
|
|
|
|
if (mdlist.length > 0) {
|
|
app.getLocation(function (res) {
|
|
var latitude = res.latitude;
|
|
var longitude = res.longitude;
|
|
var speed = res.speed;
|
|
var accuracy = res.accuracy;
|
|
|
|
for (var i in mdlist) {
|
|
mdlist[i].juli = that.GetDistance(latitude, longitude, mdlist[i].latitude, mdlist[i].longitude);
|
|
}
|
|
|
|
mdlist = mdlist.sort(that.compare('juli'));
|
|
console.log(mdlist);
|
|
that.mdlist = mdlist;
|
|
});
|
|
}
|
|
});
|
|
},
|
|
modalinput: function () {
|
|
this.$refs.dialogInput.open()
|
|
},
|
|
//选择门店
|
|
selectmd: function (e) {
|
|
var that = this;
|
|
var itemlist = [];
|
|
var mdlist = this.mdlist;
|
|
for (var i = 0; i < mdlist.length; i++) {
|
|
itemlist.push(mdlist[i].name + (mdlist[i].juli ? ' 距离:' + mdlist[i].juli + '千米' : ''));
|
|
}
|
|
uni.showActionSheet({
|
|
itemList: itemlist,
|
|
success: function (res) {
|
|
if(res.tapIndex >= 0){
|
|
that.mdkey = res.tapIndex;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//积分抵扣
|
|
scoredk: function (e) {
|
|
var usescore = e.detail.value[0];
|
|
if (!usescore) usescore = 0;
|
|
this.usescore = usescore;
|
|
this.calculatePrice();
|
|
},
|
|
inputMoney: function (e) {
|
|
console.log(e);
|
|
var money = e.detail.value;
|
|
if (!money) money = 0;
|
|
var money = parseFloat(money);
|
|
if (money <= 0) money = 0;
|
|
this.money = money;
|
|
this.calculatePrice();
|
|
},
|
|
cancel: function () {
|
|
this.hiddenmodalput = true;
|
|
},
|
|
//计算价格
|
|
calculatePrice: function () {
|
|
var that = this;
|
|
var money = parseFloat(that.money); //+商品总价
|
|
if (that.userinfo.discount > 0 && that.userinfo.discount < 10) {
|
|
var disprice = Math.round(money * (1 - 0.1 * that.userinfo.discount) * 100) / 100; //-会员折扣
|
|
} else {
|
|
var disprice = 0;
|
|
}
|
|
if (that.usescore) {
|
|
var dkmoney = parseFloat(that.userinfo.dkmoney); //-积分抵扣
|
|
} else {
|
|
var dkmoney = 0;
|
|
}
|
|
var couponmoney = parseFloat(that.couponmoney); //-优惠券抵扣
|
|
var paymoney = money - disprice - couponmoney - dkmoney; // 商品金额 - 会员折扣 - 优惠券抵扣 - 积分抵扣
|
|
if (paymoney < 0) paymoney = 0;
|
|
paymoney = paymoney.toFixed(2);
|
|
that.paymoney = paymoney;
|
|
that.disprice = disprice;
|
|
},
|
|
chooseCoupon: function (e) {
|
|
var couponrid = e.rid;
|
|
var couponkey = e.key;
|
|
|
|
if (couponrid == this.couponrid) {
|
|
this.couponkey = 0;
|
|
this.couponrid = 0;
|
|
this.coupontype = 1;
|
|
this.couponmoney = 0;
|
|
this.couponvisible = false;
|
|
} else {
|
|
var couponList = this.couponList;
|
|
var couponmoney = couponList[couponkey]['money'];
|
|
var coupontype = couponList[couponkey]['type'];
|
|
if (coupontype == 4) {
|
|
couponmoney = this.freightprice;
|
|
}
|
|
this.couponkey = couponkey;
|
|
this.couponrid = couponrid;
|
|
this.coupontype = coupontype;
|
|
this.couponmoney = couponmoney;
|
|
this.couponvisible = false;
|
|
}
|
|
this.calculatePrice();
|
|
},
|
|
topay: function (e) {
|
|
var that = this;
|
|
var money = that.money;
|
|
var couponrid = that.couponrid;
|
|
var usescore = that.usescore;
|
|
|
|
if (that.mdlist.length > 0) {
|
|
var mdid = that.mdlist[that.mdkey].id;
|
|
} else {
|
|
var mdid = 0;
|
|
}
|
|
app.post('ApiMaidan/maidan', {bid:that.bid,money: money,couponrid: couponrid,usescore: usescore,mdid: mdid}, function (res) {
|
|
if (res.status == 0) {
|
|
app.error(res.msg);
|
|
return;
|
|
}
|
|
app.goto('/pages/pay/pay?id='+res.payorderid);
|
|
});
|
|
},
|
|
showCouponList: function () {
|
|
this.couponvisible = true;
|
|
},
|
|
handleClickMask: function () {
|
|
this.couponvisible = false;
|
|
},
|
|
GetDistance: function (lat1, lng1, lat2, lng2) {
|
|
var radLat1 = lat1 * Math.PI / 180.0;
|
|
var radLat2 = lat2 * Math.PI / 180.0;
|
|
var a = radLat1 - radLat2;
|
|
var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
|
|
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
|
|
s = s * 6378.137; // EARTH_RADIUS;
|
|
s = Math.round(s * 100) / 100;
|
|
return s;
|
|
},
|
|
compare: function (property) {
|
|
return function (a, b) {
|
|
var value1 = a[property];
|
|
var value2 = b[property];
|
|
return value1 - value2;
|
|
};
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.info-box{width:94%;margin:0 3%;margin-top:30rpx;border-radius:16rpx;overflow:hidden;padding:0 20rpx;background: #fff;}
|
|
.info-item{ display:flex;align-items:center;width: 100%; padding: 0 3%; border-bottom: 1px #f3f3f3 solid;}
|
|
.info-item:last-child{border:none}
|
|
.info-item .t1{ width: 200rpx; height: 120rpx; line-height: 120rpx; color: #000; }
|
|
.info-item .t2{ height: 120rpx;line-height: 120rpx; color: #000;text-align:right;flex:1;font-size:30rpx}
|
|
.info-item .t2 input{height:80rpx;line-height:80rpx;border:1px solid #f5f5f5;padding:0 5px;width:240rpx;font-size:32rpx;margin-right:10rpx}
|
|
|
|
.dkdiv{margin-top:20rpx}
|
|
.dkdiv-item{ width: 100%; padding:30rpx 3%; background: #fff;border-top:1px #ededed dashed;}
|
|
.dkdiv-item:first-child{border-top:0}
|
|
.dkdiv-item .f1{ }
|
|
.dkdiv-item .f2{ text-align:right;flex:1}
|
|
.dkdiv-item .f3{ width: 40rpx; height: 40rpx;}
|
|
|
|
.fpay-btn{ width: 90%; margin: 0 5%; height: 80rpx; line-height: 80rpx; margin-top: 40rpx; float: left; border-radius: 10rpx; color: #fff; background: #1aac19; border: none; font-size: 30rpx; }
|
|
.fpay-btn2{ width: 90%; margin: 0 5%; height: 80rpx; line-height: 80rpx; margin-top: 20rpx; float: left; border-radius: 10rpx; color: #fff; background: #e2cc05; border: none; font-size: 30rpx; }
|
|
|
|
.mendian{width:90%; line-height: 60rpx;border-radius: 10rpx;padding:30rpx 5%;height:800rpx;overflow-y: scroll;border: none;border-radius:5px; -webkit-animation-duration: .5s; animation-duration: .5s;}
|
|
.mendian label{display: flex;align-items: center;border-bottom: 1px solid #f5f5f5;padding: 20rpx 0;color:#333}
|
|
.mendian input{margin-right: 10rpx}
|
|
.submit{ text-align: center}
|
|
.mendian button{ padding: 20rpx 60rpx;border-radius:40rpx;border: 0;margin-top:20rpx;color: #fff; background: #31C88E }
|
|
|
|
.i-as{position:fixed;width:100%;box-sizing:border-box;left:0;right:0;bottom:0;background:#f7f7f8;transform:translate3d(0,100%,0);transform-origin:center;transition:all .2s ease-in-out;z-index:900;visibility:hidden}
|
|
.i-as-show{transform:translate3d(0,0,0);visibility:visible}
|
|
.i-as-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:900;transition:all .2s ease-in-out;opacity:0;visibility:hidden}
|
|
.i-as-mask-show{opacity:1;visibility:visible}
|
|
.i-as-header{background:#fff;text-align:center;position:relative;font-size:30rpx;color:#555;height:80rpx;line-height:80rpx}
|
|
.i-as-header::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-bottom-width:1px}
|
|
.i-as-cancel{margin-top:20rpx}
|
|
.i-as-cancel button{ border:0}
|
|
.i-as-cancel button::after {border: 0;}
|
|
.i-as-content{ height:700rpx;width:710rpx;margin:20rpx;}
|
|
|
|
|
|
.op{width:96%;margin:20rpx 2%;display:flex;align-items:center;margin-top:40rpx}
|
|
.op .btn{flex:1;height:100rpx;line-height:100rpx;background:#07C160;width:90%;margin:0 10rpx;border-radius:10rpx;color: #fff;font-size:28rpx;font-weight:bold;display:flex;align-items:center;justify-content:center}
|
|
.op .btn .img{width:48rpx;height:48rpx;margin-right:20rpx}
|
|
</style>
|