<!-- 扫码支付 -->
|
<template>
|
<view class="page">
|
<view class="shop u-flex u-row-between">
|
<view class="u-m-r-30">
|
<view class="u-font-28 color-666 u-m-b-10">付款给</view>
|
<view class="u-font-34 font-bold color-333">{{ shopInfo.shop_name }}</view>
|
</view>
|
<image :src="shopInfo.logo_image||'/static/imgs/store-logo.png'" class="avg-img"></image>
|
</view>
|
<view class="u-p-48 bg-fff u-flex-1 content">
|
<view class="u-font-28 color-666">金额</view>
|
<view class="u-p-v-20 u-flex u-border-bottom u-relative">
|
<view class="money-icon color-333">¥</view>
|
<view class="u-flex-1 u-flex u-m-l-10" style="height: 80rpx;">
|
<view v-if="money" class="money-num">{{ money }}</view>
|
<view :class="['cursor',{'cursor-act':!money&&bordShow}]"></view>
|
<view v-if="!money" class="u-font-50 color-999">请输入金额</view>
|
<view :class="['cursor',{'cursor-act':money&&bordShow}]"></view>
|
</view>
|
<view class="mask" @click="showBord"></view>
|
</view>
|
<image v-if="isNew&&(this.payWay == 2&&!UNIONID)" @click="toRegister" class="reg-btn" src="/static/register-btn.png" mode=""></image>
|
</view>
|
<button class="pay-it" @click="pay">付款</button>
|
<!-- 数字键盘 -->
|
<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>
|
</view>
|
</template>
|
|
<script>
|
import {
|
config,
|
ACCESSTOKEN
|
} from 'common/config.js';
|
import {
|
queryShop,
|
userLogin,
|
queryMyUseSweepPayMaxCoupon,
|
closeOrder,
|
saveOrder,
|
} from 'common/api/index'
|
|
export default {
|
data() {
|
return {
|
UNIONID: null,
|
payWay: this.$utils.getPlat(),
|
cid: '',
|
bordShow: true, // 显示键盘
|
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: '', // 金额
|
couponInfo: null, // 优惠券内容
|
token: null,
|
isNew: false, // 是否新用户，新用户查询不到积分和银行卡
|
canReset: false,
|
end: 0,
|
count: 0,
|
};
|
},
|
onLoad(opt) {
|
this.isNew = uni.getStorageSync('IS_NEW')
|
// uni.setStorageSync('OPENID' + this.payWay, opt.code)
|
uni.showLoading()
|
if (opt.cid) {
|
this.cid = opt.cid
|
uni.setStorageSync('CID', opt.cid)
|
this.init()
|
}
|
if (opt.code || opt.auth_code) {
|
let code = opt.code
|
if (this.payWay == 5) {
|
code = opt.auth_code
|
}
|
this.end++
|
userLogin({
|
platform: this.payWay,
|
params: {
|
code
|
}
|
}).then(res => {
|
this.getToken(res)
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
}
|
|
},
|
onShow() {
|
this.UNIONID = uni.getStorageSync('UNIONID' + this.payWay) || null
|
this.token = uni.getStorageSync(ACCESSTOKEN) || null
|
if (this.canReset && this.token && !this.isNew) {
|
this.end = 0
|
this.count = 0
|
uni.showLoading()
|
this.getUserInfo()
|
}
|
this.canReset = true
|
},
|
methods: {
|
getToken(res) {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
this.token = res.token
|
if (res.openid) {
|
uni.setStorageSync('OPENID' + this.payWay, res.token)
|
}
|
if (res.unionid) {
|
uni.setStorageSync('UNIONID' + this.payWay, res.token)
|
}
|
uni.setStorageSync(ACCESSTOKEN, res.token)
|
uni.setStorageSync('IS_NEW', res.isNew)
|
this.isNew = res.isNew
|
if (!res.isNew) {
|
this.getUserInfo()
|
}
|
},
|
toRegister() {
|
if (this.UNIONID) {
|
uni.navigateTo({
|
url: '/pay/register?cid=' + this.cid
|
})
|
}
|
if (this.payWay == 2) {
|
const redirect_uri = encodeURIComponent(`${config.webURL}/pay/scanpay?cid=${opt.query.cid}`)
|
window.location.href =
|
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.wx_appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
|
}
|
|
},
|
// 更新金额
|
changeMoney(str) {
|
this.money = str;
|
},
|
// 展示键盘
|
showBord() {
|
this.bordShow = true;
|
},
|
init() {
|
this.end += 1
|
//获取商铺信息
|
queryShop({
|
params: {
|
cid: this.cid
|
}
|
}).then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
if (res.logo_image) {
|
try {
|
let arr = JSON.parse(res.logo_image)
|
res.logo_image = config.sftpURL + arr[0].path
|
} catch (e) {
|
//TODO handle the exception
|
res.logo_image = ''
|
}
|
}
|
this.shopInfo = res
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
},
|
// 获取会员相关信息
|
getUserInfo() {
|
this.end += 1
|
//获取用户优惠券
|
queryMyUseSweepPayMaxCoupon({
|
params: {
|
shopId: this.shopInfo.id
|
}
|
}).then(res => {
|
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
this.couponInfo = res
|
}).catch(() => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
})
|
},
|
//跳转营销页面
|
toDiscount() {
|
const shopInfo = encodeURIComponent(JSON.stringify(this.shopInfo))
|
if (!this.isNew) { //是会员
|
if (this.integral > 0 || this.couponInfo) { //有优惠券或积分
|
if (this.payWay == 3 && (this.shopInfo.bank_pay_use_score_flag || this.shopInfo
|
.bank_pay_use_coupon_flag)) { //银行卡支付
|
|
uni.navigateTo({
|
url: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
|
})
|
return false
|
} else if ((this.shopInfo.use_score_flag && this.shopInfo.app_pay_use_score_flag) || (this
|
.shopInfo
|
.user_coupon_flag && this.shopInfo.app_pay_use_coupon_flag)) {
|
uni.navigateTo({
|
url: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
|
})
|
return false
|
} else if (this.discount.shopDiscount != 1) {
|
uni.navigateTo({
|
url: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
|
})
|
return false
|
} else {
|
return true
|
}
|
} else if (this.discount.shopDiscount != 1) {
|
uni.navigateTo({
|
url: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
|
})
|
return false
|
} else {
|
return true
|
}
|
} else {
|
return true
|
}
|
},
|
//确认支付
|
pay() {
|
if (uni.$u.test.isEmpty(this.money)) {
|
uni.$u.toast('请输入金额！')
|
return
|
}
|
this.bordShow = true
|
// return this.toDiscount() //判断是否需要跳转营销页面
|
if (this.toDiscount()) {
|
// 金额 this.money
|
uni.showLoading()
|
const params = {
|
money: parseFloat((this.money * 100).toPrecision(12)),
|
shopId: this.shopInfo.id,
|
cid: this.cid,
|
payWay: this.payWay,
|
score: 0,
|
couponDetailId: ''
|
}
|
if (this.payWay == 3) {
|
params.bankCardId = this.bankCardId
|
}
|
//生成订单
|
saveOrder(params).then(res => {
|
uni.hideLoading()
|
try {
|
this.orderId = res.orderId
|
res.youHuiInfo.shopName = this.shopInfo.shop_name
|
this.youHuiInfo = res.youHuiInfo
|
if (this.payWay == 2) {
|
this.wxPay(res.paymentData)
|
}
|
if (this.payWay == 5) {
|
this.aliPay(res.paymentData)
|
}
|
} catch (e) {
|
//TODO handle the exception
|
console.error(e);
|
}
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
}
|
|
},
|
// 微信支付
|
wxPay(res) {
|
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: `/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})
|
} else {
|
this.closeOrder()
|
}
|
});
|
}, 200)
|
},
|
//支付宝支付
|
aliPay(res) {
|
ap.tradePay({
|
tradeNO: res.tradeNO
|
}, (res) => {
|
if (res.resultCode == 9000) {
|
uni.navigateTo({
|
url: `/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})
|
// 支付成功
|
} else if (res.resultCode == 8000 || res.resultCode == 6001) {
|
// 正在处理中 || 取消
|
} else {
|
this.closeOrder()
|
// 支付失败
|
}
|
});
|
},
|
closeOrder() {
|
closeOrder({
|
id: this.orderId,
|
}).then(res => {
|
})
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.page {
|
height: calc(100vh - 0px);
|
display: flex;
|
flex-direction: column;
|
}
|
|
.shop {
|
padding: 50rpx 64rpx;
|
}
|
|
.avg-img {
|
width: 94rpx;
|
height: 94rpx;
|
border-radius: 10rpx;
|
background-color: #ffffff;
|
}
|
|
.content {
|
border-radius: 40rpx 40rpx 0 0;
|
}
|
|
.money {
|
font-size: 40rpx;
|
color: #333;
|
}
|
|
.money-icon {
|
font-size: 70rpx;
|
// font-weight: bold;
|
margin-right: 20rpx;
|
}
|
|
.money-num {
|
font-size: 96rpx;
|
// font-weight: bold;
|
}
|
|
.pay-it {
|
position: absolute;
|
width: 686rpx;
|
height: 98rpx;
|
bottom: 0;
|
border-radius: 10rpx;
|
font-size: 34rpx;
|
color: #ffffff;
|
background-color: #de2d35;
|
margin: 32rpx;
|
}
|
|
.bank-card-ad {
|
padding-top: 50rpx;
|
background-image: url(~@/static/bank-card-ad1.png);
|
background-size: 100% auto;
|
background-position: top center;
|
background-repeat: no-repeat;
|
}
|
|
.pay-icon {
|
align-self: flex-start;
|
width: 48rpx;
|
height: 48rpx;
|
margin-right: 20rpx;
|
}
|
|
.tag {
|
background-color: #F35656;
|
font-size: 20rpx;
|
color: #fff;
|
border-radius: 4rpx;
|
line-height: 1;
|
padding: 4rpx;
|
}
|
|
.tag-pain {
|
border: 1px solid #D31F28;
|
font-size: 22rpx;
|
color: #D31F28;
|
border-radius: 4rpx;
|
line-height: 1;
|
padding: 8rpx 4rpx;
|
}
|
|
.mask {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
bottom: 0;
|
z-index: 101;
|
background-color: rgba(0, 0, 0, 0);
|
}
|
|
@keyframes cursor-blinks {
|
0% {
|
opacity: 1;
|
display: block;
|
}
|
|
50% {
|
opacity: 0;
|
display: none;
|
}
|
|
100% {
|
opacity: 1;
|
display: block;
|
}
|
}
|
|
.cursor {
|
border-left: 1px solid transparent;
|
height: 80rpx;
|
}
|
|
.cursor-act {
|
border-left: 1px solid #333;
|
animation: cursor-blinks 1s infinite steps(1, start);
|
}
|
|
.reg-btn {
|
display: block;
|
margin-top: 30rpx;
|
width: 654rpx;
|
height: 198rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.u-font-money {
|
font-size: 60rpx;
|
}
|
|
.bankCard-list {
|
height: 50vh;
|
width: 750rpx;
|
box-sizing: border-box;
|
|
.pay-icon {
|
align-self: center;
|
}
|
}
|
|
.add-icon {
|
width: 50rpx;
|
height: 50rpx;
|
border-radius: 25rpx;
|
background: #ffc0c38f;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.shuka {
|
width: 678rpx;
|
height: 45rpx;
|
position: relative;
|
left: -10rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.btn {
|
/* position: fixed;
|
bottom: 100rpx; */
|
margin: 0 auto;
|
margin-top: 120rpx;
|
position: relative;
|
width: 680rpx;
|
height: 100rpx;
|
}
|
|
.wx-app {
|
position: absolute;
|
width: 680rpx;
|
height: 100rpx;
|
}
|
</style>
|
