<!-- 扫码支付 -->
|
<template>
|
<view class="page">
|
<u-alert type="warning" closable description="安全提醒：请谨慎核对商家、订单信息，保护自己资金安全!"></u-alert>
|
<view class="pay-box">
|
<view class="u-font-26 color-666">应付金额</view>
|
<view class="u-m-t-14">
|
<text class="u-font-36 color-333 u-m-r-8">¥</text>
|
<text class="money">{{money.split(".")[0]}}</text>
|
<text class="u-font-40">.{{money.split(".")[1]}}</text>
|
</view>
|
</view>
|
|
<view v-if="discountInfo.shopDiscount!=1&&money*(1-discountInfo.shopDiscount)>=0.01" class="bg-fff u-m-h-32 u-m-t-20 u-p-h-32 u-br-10">
|
<view class="u-p-v-32 u-flex u-row-between u-border-bottom u-font-30 color-333">
|
<view>{{discountInfo.memberGradeName}}专属折扣</view>
|
<view>-{{ money*(1-discountInfo.shopDiscount).toFixed(2) }}</view>
|
</view>
|
</view>
|
<view v-if="canUseIntegral||canUseCoupon" class="u-p-h-32 bg-fff u-m-h-32 u-br-10">
|
<view class="u-font-28 u-m-t-32">选择优惠方式</view>
|
<view v-if="canUseIntegral" class="u-p-v-24 u-border-bottom u-flex u-m-t-10">
|
<image class="item-icon" style="align-self: flex-start;position: relative;top: -3rpx;" src="/static/integral.png" mode=""></image>
|
<view class="u-flex-1 u-m-h-16">
|
<view class="u-font-30">积分抵扣</view>
|
<view class="u-font-24 color-999 u-m-t-20">可用<text style="color: #D31F28;">{{integral}}</text>积分
|
</view>
|
</view>
|
<input-number @handleCount="changeInt" :value="canUseInt" :min="0" :max="maxIntegral">
|
</input-number>
|
</view>
|
<view v-if="canUseCoupon" class="u-flex u-p-v-32">
|
<image class="item-icon" src="/static/coupon-icon.png" mode=""></image>
|
<view class="u-font-30 u-flex-1 u-m-h-16">优惠券</view>
|
<view @click="showCoupon" class="u-flex">
|
<view v-if="couponInfo.id" class="tag-pain">
|
满{{parseFloat((couponInfo.thresholdValue/100).toFixed(2))}}元减{{parseFloat((couponInfo.discount/100).toFixed(2))}}元
|
</view>
|
<text v-else class="u-font-26">请选择</text>
|
<u-icon class="u-m-l-10" name="arrow-right" color="#333" size="13"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view class="bg-fff u-m-h-32 u-m-t-20 u-p-h-32 u-br-10">
|
<view v-if="discount" class="u-p-v-32 u-flex u-row-between u-border-bottom u-font-30 color-333">
|
<view>实际抵扣</view>
|
<view>-{{ discount }}</view>
|
</view>
|
<view class="u-p-v-32 u-flex u-row-between">
|
<view class="u-font-30 color-333">实付金额</view>
|
<view class="color-red">
|
<text class="u-font-26 u-m-r-6">¥</text>
|
<text class="u-font-34">{{ price }}</text>
|
</view>
|
</view>
|
</view>
|
|
<button class="pay-it" @click="pay">确定支付</button>
|
<!-- 优惠券弹窗 -->
|
<u-popup mode="bottom" :closeable="true" :show="couponShow" @close="couponShow = false" :round="10">
|
<view class="u-font-32 color-333 u-text-center u-p-t-30">优惠券</view>
|
<view v-if="checkCoupon.id" class="choose-coupon">
|
已选择优惠券1张，共抵扣￥{{parseFloat((checkCoupon.discount/100).toFixed(2))}}</view>
|
<!-- <view class="choose-coupon">选择优惠券</view> -->
|
<scroll-view scroll-y class="u-p-30 coupon-list">
|
<view @click="clickCoupon(item)" class="u-m-b-24 u-flex coupon" v-for="(item, index) in couponList" :key="index">
|
<view style="color: #D31F28;" class="u-p-h-28">
|
<view class="font-bold">
|
<text class="u-font-36">￥</text>
|
<text class="money">{{parseFloat(item.discount/100)}}</text>
|
</view>
|
<view class="u-font-24 u-m-t-20">满{{parseFloat(item.thresholdValue/100)}}元使用</view>
|
</view>
|
<view class="butt"></view>
|
<view class="u-p-30 u-flex-1 u-flex">
|
<view class="u-flex-1">
|
<view class="u-font-28 color-333 u-line-2">{{item.name}}</view>
|
<view class="u-font-22 color-999 u-m-t-20">
|
有效期至：{{$u.timeFormat(item.outTime, 'yyyy-mm-dd hh:MM')}}
|
</view>
|
</view>
|
<u-icon v-if="item.id==checkCoupon.id" name="checkmark-circle-fill" color="#D31F28" size="20">
|
</u-icon>
|
</view>
|
|
</view>
|
</scroll-view>
|
<view @click="getCoupon" class="coupon-btn">确定</view>
|
</u-popup>
|
<!-- 数字键盘 -->
|
<u-popup :show="bordShow" :overlay="false" @close="bordShow = false">
|
<key-bord @changeMoney="changeMoney" :num.sync="money" @close="bordShow = false" @pay="pay"></key-bord>
|
</u-popup>
|
<!-- 支付验证码 -->
|
<u-popup :show="codeShow" closeable mode="center" @close="codeShow = false">
|
<view class="u-p-h-40 u-p-b-40">
|
<view class="u-text-center u-p-t-20 u-m-b-30 u-font-34">请输入手机验证码</view>
|
<view class="u-text-center u-m-b-20 color-666">{{ shopInfo.shop_name }}</view>
|
<view class="u-flex u-row-center font-bold u-m-b-40"><text class="u-font-42">￥</text><text class="u-font-money">{{ price }}</text>
|
</view>
|
<u-code-input @finish="bankPay" v-model="smscode" mode="box" :focus="true"></u-code-input>
|
</view>
|
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import {
|
ACCESSTOKEN
|
} from '@/common/config.js';
|
import {
|
queryMyUseSweepPayMaxCoupon,
|
queryUseSweepPayCoupon,
|
getWechatConfigInfo,
|
saveWxOrder,
|
tlPay
|
} from '@/common/api/index'
|
import wx from 'weixin-js-sdk'; // 使用js-sdk
|
export default {
|
data() {
|
return {
|
cid: null,
|
bordShow: false, // 显示键盘
|
scoreWorth: 0,
|
shopInfo: {
|
shop_name: '',
|
scan_flag: '',
|
use_score_flag: 0, //商铺是否可用积分 0否 1是
|
user_coupon_flag: 0, //商铺是否可用优惠券 0否 1是
|
app_pay_use_score_flag: 0, //微信/支付宝是否可用积分 0否 1是
|
app_pay_use_coupon_flag: 0, //微信/支付宝是否可用优惠券 0否 1是
|
bank_pay_use_score_flag: 0, //银行卡支付是否可用积分 0否 1是
|
bank_pay_use_coupon_flag: 0, //银行卡支付是否可用优惠券 0否 1是
|
},
|
money: 0.00, // 金额
|
integral: 0, // 使用积分
|
canUseInt: 0, // 可用积分
|
couponList: [], // 优惠券
|
couponShow: false, // 优惠券弹窗
|
couponInfo: {
|
id: '',
|
discount: 0,
|
thresholdValue: 0
|
}, // 优惠券内容
|
payWay: 3, // 5支付宝 2微信 3银行卡
|
isNew: false,
|
codeShow: false,
|
smscode: '',
|
thpinfo: null,
|
canReset: false,
|
checkCoupon: {
|
id: null,
|
discount: 0,
|
thresholdValue: 0
|
},
|
discountInfo: {
|
memberGradeName: '',
|
shopDiscount: 10
|
}
|
};
|
},
|
watch: {
|
integralDiscount(val) {
|
if (this.couponInfo.id && val < this.couponInfo.thresholdValue) {
|
this.couponInfo = {
|
id: '',
|
discount: 0,
|
thresholdValue: 0
|
}
|
this.checkCoupon = {
|
id: '',
|
discount: 0,
|
thresholdValue: 0
|
}
|
}
|
}
|
},
|
computed: {
|
canUseIntegral() {
|
if (this.payWay == 3) { //银行卡
|
return this.shopInfo.use_score_flag && this.shopInfo.bank_pay_use_score_flag
|
} else {
|
return this.shopInfo.use_score_flag && this.shopInfo.app_pay_use_score_flag
|
}
|
|
},
|
canUseCoupon() {
|
if (this.payWay == 3) { //银行卡
|
return this.shopInfo.user_coupon_flag && this.shopInfo.bank_pay_use_coupon_flag
|
} else {
|
return this.shopInfo.user_coupon_flag && this.shopInfo.app_pay_use_coupon_flag
|
}
|
},
|
maxIntegral() {
|
if (this.couponInfo.id) {
|
const num = Math.ceil((this.money * this.discountInfo.shopDiscount - this.couponInfo.thresholdValue / 100) / (
|
this.scoreWorth / 100))
|
if (num < 0) {
|
return 0
|
}
|
return num
|
} else {
|
const num = Math.ceil((this.money * this.discountInfo.shopDiscount - this.couponInfo.thresholdValue / 100) / (
|
this.scoreWorth / 100))
|
if (num < 0) {
|
return 0
|
}
|
return num
|
}
|
},
|
integralDiscount() {
|
let num = 0;
|
num = parseInt(parseFloat((this.money * this.discountInfo.shopDiscount * 100).toPrecision(12)) - this.canUseInt *
|
this.scoreWorth);
|
return num;
|
},
|
discount() {
|
let num = 0;
|
num = ((this.canUseInt * this.scoreWorth + parseFloat(this.couponInfo.discount)) / 100).toFixed(2);
|
if (parseFloat(num) > parseFloat(this.money * this.discountInfo.shopDiscount)) {
|
return this.money * this.discountInfo.shopDiscount
|
}
|
return num;
|
},
|
price() {
|
let num = 0;
|
num = parseFloat((this.money * this.discountInfo.shopDiscount * 100).toPrecision(12)) - this.canUseInt * this
|
.scoreWorth - this.couponInfo
|
.discount;
|
num = num > 0 ? (num / 100).toFixed(2) : '0.00';
|
return num;
|
}
|
},
|
onLoad(opt) {
|
this.isNew = uni.getStorageSync('IS_NEW')
|
this.cid = uni.getStorageSync('CID')
|
this.discountInfo = uni.getStorageSync('DISCOUNT_INFO') || {
|
shopDiscount: 1
|
}
|
const token = uni.getStorageSync(ACCESSTOKEN) || null
|
this.shopInfo = uni.getStorageSync('SHOP_INFO')
|
if (opt.scoreWorth) {
|
this.scoreWorth = Number(opt.scoreWorth)
|
}
|
if (opt.integral) {
|
this.integral = Number(opt.integral)
|
}
|
if (opt.money) {
|
this.money = parseFloat(opt.money).toFixed(2)
|
let ds = parseFloat(this.discountInfo.shopDiscount)
|
let dis = this.money * 100 * (1 - ds)
|
let money = parseInt((this.money * 100 * ds))
|
if (dis < 1) {
|
money = parseInt((this.money * 100))
|
}
|
queryMyUseSweepPayMaxCoupon({
|
params: {
|
shopId: this.shopInfo.id,
|
money: money < 1 ? 1 : money
|
}
|
}).then(res => {
|
if (res && this.canUseCoupon) {
|
this.couponInfo = res
|
this.checkCoupon = res
|
}
|
|
})
|
}
|
if (opt.payWay) {
|
this.payWay = opt.payWay
|
}
|
if (opt.bankCardId) {
|
this.bankCardId = opt.bankCardId
|
}
|
this.init()
|
},
|
methods: {
|
// 更新金额
|
changeMoney(str) {
|
this.money = str;
|
},
|
// 展示键盘
|
showBord() {
|
this.bordShow = true;
|
},
|
init() {
|
uni.showLoading()
|
if (this.payWay == 2) {
|
const uri = encodeURIComponent(window.location)
|
getWechatConfigInfo({
|
url: uri
|
}).then(res => {
|
uni.hideLoading()
|
wx.config({
|
debug: false, // 开启调试模式
|
appId: res.appId, // 必填，公众号的唯一标识
|
timestamp: res.timestamp, // 必填，生成签名的时间戳
|
nonceStr: res.nonceStr, // 必填，生成签名的随机串
|
signature: res.signature, // 必填，签名
|
jsApiList: ['chooseWXPay'], // 必填，需要使用的 JS 接口列表
|
// openTagList: ['wx-open-launch-weapp'] //可选，需要使用的开放标签列表
|
});
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
}
|
},
|
// 更改积分
|
changeInt(num) {
|
this.canUseInt = num;
|
},
|
pay() {
|
this.bordShow = false
|
uni.showLoading()
|
const params = {
|
money: parseFloat((this.money * 100).toPrecision(12)),
|
shopId: this.shopInfo.id,
|
cid: this.cid,
|
payWay: this.payWay,
|
score: this.canUseInt,
|
couponDetailId: this.couponInfo.id
|
}
|
if (this.payWay == 3) {
|
params.bankCardId = this.bankCardId
|
}
|
saveWxOrder(params).then(res => {
|
uni.hideLoading()
|
try {
|
this.orderId = res.orderId
|
res.youHuiInfo.shopName = this.shopInfo.shop_name
|
this.youHuiInfo = res.youHuiInfo
|
if (res.isOk == 1) {
|
uni.navigateTo({
|
url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})
|
} else {
|
if (res.toPayMethod == 1) {
|
if (this.payWay == 3) {
|
this.smscode = ''
|
this.codeShow = true
|
}
|
} else if (res.toPayMethod == 2) {
|
if (this.payWay == 2) {
|
this.wxPay(res.paymentData)
|
}
|
if (this.payWay == 5) {
|
this.aliPay(res.paymentData)
|
}
|
} else if (res.toPayMethod == 3) {
|
window.location.href = res.paymentUrl
|
}
|
}
|
} catch (e) {
|
//TODO handle the exception
|
console.error(e);
|
}
|
|
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
},
|
// 微信支付
|
wxPay(res) {
|
/*setTimeout(() => {
|
wx.chooseWXPay({
|
timestamp: res.timeStamp, // 支付签名时间戳
|
nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
|
package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
|
signType: res.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
|
paySign: res.paySign, // 支付签名
|
success: function(res) {
|
// 支付成功后的回调函数
|
uni.navigateTo({
|
url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})
|
}
|
});
|
}, 200)*/
|
setTimeout(() => {
|
WeixinJSBridge.invoke(
|
'getBrandWCPayRequest', {
|
"appId": res.appId, //公众号ID，由商户传入
|
"timeStamp": res.timeStamp, //时间戳，自1970年以来的秒数
|
"nonceStr": res.nonceStr, //随机串
|
"package": res.package,
|
"signType": res.signType, //微信签名方式：
|
"paySign": res.paySign //微信签名
|
},
|
(res) => {
|
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
// 使用以上方式判断前端返回,微信团队郑重提示：
|
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
/*uni.navigateTo({
|
url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})*/
|
}
|
});
|
}, 200)
|
},
|
//支付宝支付
|
aliPay(res) {
|
ap.tradePay({
|
tradeNO: res.tradeNO
|
}, (res) => {
|
if (res.resultCode == 9000) {
|
/*uni.navigateTo({
|
url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})*/
|
// 支付成功
|
} else if (res.resultCode == 8000 || res.resultCode == 6001) {
|
// 正在处理中 || 取消
|
} else {
|
// 支付失败
|
}
|
});
|
},
|
//银行卡支付
|
bankPay(e) {
|
uni.showLoading()
|
tlPay({
|
orderId: this.orderId,
|
payWay: 3,
|
bankCardId: this.bankCardId,
|
smscode: e
|
}).then(res => {
|
uni.hideLoading()
|
uni.hideKeyboard()
|
this.codeShow = false
|
uni.navigateTo({
|
url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
},
|
//显示优惠券
|
showCoupon() {
|
uni.showLoading()
|
queryUseSweepPayCoupon({
|
params: {
|
cusid: this.shopInfo.cusid,
|
c: this.shopInfo.c,
|
money: parseFloat((this.money * 100).toPrecision(12)),
|
score: this.canUseInt
|
}
|
}).then(res => {
|
uni.hideLoading()
|
if (res.length > 0) {
|
this.couponList = res
|
this.checkCoupon = this.couponInfo
|
this.couponShow = true;
|
} else {
|
uni.showToast({
|
icon: 'none',
|
title: '暂无可用优惠券'
|
})
|
}
|
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
|
},
|
clickCoupon(item) {
|
if (this.checkCoupon.id == item.id) {
|
this.checkCoupon = {
|
id: '',
|
discount: 0,
|
thresholdValue: 0
|
}
|
} else {
|
this.checkCoupon = item
|
}
|
},
|
getCoupon() {
|
// item 为优惠券信息
|
this.couponInfo = this.checkCoupon;
|
this.couponShow = false;
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.page {
|
height: calc(100vh - 0px);
|
display: flex;
|
flex-direction: column;
|
line-height: 1;
|
}
|
|
.avg-img {
|
width: 80rpx;
|
height: 80rpx;
|
}
|
|
.pay-box {
|
text-align: center;
|
padding: 65rpx 0 42rpx;
|
}
|
|
.money {
|
font-size: 64rpx;
|
}
|
|
.tag-pain {
|
border: 1px solid #D31F28;
|
font-size: 22rpx;
|
color: #D31F28;
|
border-radius: 4rpx;
|
line-height: 1;
|
padding: 8rpx 4rpx;
|
}
|
|
.item-icon {
|
width: 38rpx;
|
height: 38rpx;
|
}
|
|
.pay-it {
|
position: absolute;
|
width: 686rpx;
|
height: 98rpx;
|
bottom: 0;
|
border-radius: 10rpx;
|
font-size: 34rpx;
|
color: #ffffff;
|
background-color: #de2d35;
|
margin: 32rpx;
|
}
|
|
.choose-coupon {
|
margin: 32rpx 32rpx 0;
|
border-radius: 10rpx;
|
background: #fff1f1;
|
padding: 26rpx 16rpx;
|
color: #D31F28;
|
font-size: 28rpx;
|
}
|
|
.coupon-list {
|
box-sizing: border-box;
|
height: calc(50vh - 44px);
|
}
|
|
.coupon {
|
background-color: rgba(255, 241, 241, 0.47);
|
height: 171rpx;
|
border: solid 1rpx #f85d64;
|
border-radius: 10rpx;
|
position: relative;
|
overflow: hidden;
|
}
|
|
.butt {
|
width: 1rpx;
|
height: 100%;
|
position: relative;
|
z-index: 9;
|
border-left: 1rpx dashed #f85d64;
|
}
|
|
.butt:before {
|
z-index: 10;
|
box-sizing: border-box;
|
position: absolute;
|
content: "";
|
width: 24rpx;
|
height: 12rpx;
|
border-bottom: 1rpx solid #f85d64;
|
border-right: 1rpx solid #f85d64;
|
border-left: 1rpx solid #f85d64;
|
border-radius: 0 0 24rpx 24rpx;
|
left: -12rpx;
|
background-color: #ffffff;
|
}
|
|
.butt:after {
|
box-sizing: border-box;
|
position: absolute;
|
content: "";
|
width: 24rpx;
|
height: 12rpx;
|
bottom: 0;
|
border-bottom: 1rpx solid #ffff;
|
border-right: 1rpx solid #f85d64;
|
border-left: 1rpx solid #f85d64;
|
border-top: 1rpx solid #f85d64;
|
border-radius: 24rpx 24rpx 0 0;
|
left: -12rpx;
|
background-color: #ffffff;
|
}
|
|
|
.coupon-btn {
|
margin: 0 32rpx;
|
height: 98rpx;
|
border-radius: 10rpx;
|
background-color: #D31F28;
|
font-size: 34rpx;
|
color: #fff;
|
line-height: 98rpx;
|
text-align: center;
|
}
|
|
.u-font-money {
|
font-size: 60rpx;
|
}
|
</style>
|
