<!-- 扫码支付 -->
|
<template>
|
<view class="page">
|
<u-loading-page :loading="loading"></u-loading-page>
|
<block v-if="shopInfo.scanFlag==1">
|
<view class="shop u-flex u-row-between">
|
<view class="u-m-r-30">
|
<view class="u-font-26 color-666 u-m-b-10">付款给</view>
|
<view class="u-font-34 color-333">{{ shopInfo.shopName }}</view>
|
</view>
|
<u-image width="88rpx" height="88rpx" shape="circle" errorIcon="/static/store-logo.png" loadingIcon="/static/store-logo.png" :src="shopInfo.logoImage||'/static/store-logo.png'" bgColor="#fff"></u-image>
|
</view>
|
<view class="u-p-24 bg-fff u-m-32 u-br-10">
|
<view class="u-flex u-row-between">
|
<view class="u-font-28 color-666">金额</view>
|
<view v-if="!onlineId" @click="buyerNote='';showRemark=true;" class="remark">添加备注</view>
|
</view>
|
<view v-if="smoney" class="u-p-v-20 u-flex u-col-bottom u-border-bottom u-relative money-box">
|
<view class="money-icon color-333 lh-1">¥</view>
|
<view class="u-flex-1 u-flex u-col-bottom u-m-l-10" style="height: 80rpx;">
|
<view class="money-num lh-1">{{ smoney }}</view>
|
</view>
|
</view>
|
<view v-else class="u-p-v-20 u-flex u-col-bottom u-border-bottom u-relative money-box">
|
<view class="money-icon color-333 lh-1">¥</view>
|
<view class="u-flex-1 u-flex u-col-bottom u-m-l-10" style="height: 80rpx;">
|
<view v-if="money" class="money-num lh-1">{{ money }}</view>
|
<view :class="['cursor',{'cursor-act':!money&&bordShow}]"></view>
|
<view v-if="!money" class="u-font-50 color-999 lh-1">请输入金额</view>
|
<view :class="['cursor',{'cursor-act':money&&bordShow}]"></view>
|
</view>
|
<view class="mask" @click="showBord"></view>
|
</view>
|
<view v-if="payWay==2" class="u-tips-color u-p-t-24">
|
<wx-open-launch-weapp id="launch-btn" appid="wx47b3b5ca64bc7d5d" path="pages/index/index">
|
<script type="text/wxtag-template">
|
<style>
|
.txt {
|
font-size: 13px;
|
color: #999
|
}
|
|
.btn {
|
font-size: 13px;
|
color: #1E8BE0
|
}
|
</style>
|
<span class="txt">微信搜索或点击打开</span>
|
<span class="btn">【冀优邮】</span>
|
<span class="txt">小程序，享更多优惠！</span>
|
</script>
|
</wx-open-launch-weapp>
|
</view>
|
</view>
|
<block v-if="useCoupon">
|
<view class="bg-fff u-m-32 u-br-10">
|
<view class="u-flex u-p-24 u-border-bottom">
|
<!-- <u-icon name="coupon-fill" size="60rpx" color="#D31F28"></u-icon> -->
|
<view class="u-font-32 u-flex-1 u-m-h-16">优惠券</view>
|
<view @click="showCoupon" class="u-flex">
|
<block v-if="couponInfo.id">
|
<view v-if="couponInfo.discountType==1" class="tag-pain">
|
满{{ $utils.fenToYuan(couponInfo.thresholdValue) }}元减{{ $utils.fenToYuan(couponInfo.discount) }}元券
|
</view>
|
<view v-if="couponInfo.discountType==2" class="tag-pain">
|
{{ $utils.accMul(couponInfo.discount, 10) }}折券
|
</view>
|
</block>
|
<view v-else class="u-font-28 lh-1 u-tips-color">请选择</view>
|
<u-icon class="u-m-l-10" name="arrow-right" color="#999" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
</block>
|
<block v-if="payWay==2&&shopInfo.userCouponFlag==1&&discount">
|
<view class="u-m-32 u-br-10 bg-fff">
|
<view class="u-p-24 u-flex u-row-between u-border-bottom">
|
<view class="u-font-32 color-333">抵扣金额</view>
|
<view class="color-green">- {{ discount }}</view>
|
</view>
|
<view class="u-p-24 u-flex u-row-between u-br-10 bg-fff">
|
<view class="u-font-32 color-333">实付金额</view>
|
<view class="color-red">
|
<text class="u-font-26 u-m-r-6">¥</text>
|
<text class="u-font-34">{{ payMoney }}</text>
|
</view>
|
</view>
|
</view>
|
</block>
|
<button class="pay-it" @click="checkLocation">付款</button>
|
<view v-if="bordShow" style="height: 470rpx"></view>
|
<!-- 数字键盘 -->
|
<u-popup zIndex="500" :show="bordShow" :overlay="false" @close="bordShow = false">
|
<key-bord @changeMoney="changeMoney" :num.sync="money" @close="bordShow = false" @pay="checkLocation"></key-bord>
|
</u-popup>
|
<!-- 优惠券弹窗 -->
|
<u-popup v-if="payWay==2" 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张，可抵扣￥{{ discount1 }}
|
</view>
|
<scroll-view scroll-y class="u-p-30 coupon-list">
|
<u-loadmore v-if="!couponList" status="loading"/>
|
<u-empty v-else-if="couponList.length===0" mode="coupon" icon="/static/no_coupon.png" text="暂无优惠券可用!"></u-empty>
|
<block v-else>
|
<view @click="clickCoupon(item)" class="u-m-b-24 u-flex coupon" v-for="(item, index) in couponList" :key="index">
|
<view class="num-box">
|
<view v-if="item.discountType==1" class="font-bold" style="color: #D31F28;">
|
<text class="u-font-36">￥</text>
|
<text class="money">{{ $utils.fenToYuan(item.discount) }}</text>
|
</view>
|
<view v-if="item.discountType==2" class="font-bold" style="color: #D31F28;">
|
<text class="money">{{ $utils.accMul(item.discount, 10) }}</text>
|
<text class="u-font-36">折</text>
|
</view>
|
<view v-if="item.orderMax" class="u-font-24 u-m-t-20">低于{{ $utils.fenToYuan(item.orderMax) }}元可用</view>
|
<view v-else-if="item.thresholdValue" class="u-font-24 u-m-t-20">满{{ $utils.fenToYuan(item.thresholdValue) }}元可用</view>
|
<view v-else class="u-font-24 u-m-t-20">无门槛</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-32 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="24">
|
</u-icon>
|
</view>
|
</view>
|
</block>
|
</scroll-view>
|
<view @click="getCoupon" class="coupon-btn">确定</view>
|
</u-popup>
|
<!-- 备注弹窗 -->
|
<u-modal showCancelButton :show="showRemark" title="备注" confirmColor="#D31F28" @close="showRemark = false" @cancel="showRemark = false" @confirm="showRemark = false">
|
<view style="border: 1rpx solid #eee;width: 100%">
|
<u--textarea v-model="buyerNote" placeholder="请输入备注内容" maxlength="100" none count></u--textarea>
|
</view>
|
|
</u-modal>
|
</block>
|
<view v-if="shopInfo.scanFlag==0" class="empty-box">
|
<image src="/static/empty.png" class="empty"></image>
|
<view class="tips">{{ tips }}</view>
|
<view @click="clickDone" class="clickDone">关闭</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
config,
|
ACCESSTOKEN,
|
CHECK_LOCATION
|
} from 'common/config.js';
|
import {
|
queryShopByCid,
|
queryShopByShopId,
|
getOnlineId,
|
userLogin,
|
queryUseSweepPayCoupon,
|
getWechatConfigInfo,
|
closeOrder,
|
saveOrder,
|
} from 'common/api/index'
|
|
import wx from 'weixin-js-sdk'; // 使用js-sdk
|
|
export default {
|
data() {
|
return {
|
smoney: '',
|
tips: '该商户暂未开通支付功能',
|
loading: false,
|
remark: '',
|
buyerNote: '',
|
showRemark: false,
|
UNIONID: null,
|
payWay: this.$utils.getPlat(), //2 微信 5支付宝 15云闪付
|
cid: '', //码牌id C扫B静态码时有
|
activityQrcodeId: '', //动态收款码 C扫B动态码时有
|
shopId: '', //商户id C扫B动态码时有
|
bordShow: false, // 显示键盘
|
onlineId: '', //冀优邮线上订单id
|
orderId: '', //
|
shopInfo: {
|
cusid: '',
|
shopName: '',
|
logoImage: '',
|
scanFlag: -1,
|
useScoreFlag: -1, //商铺是否可用积分 0否 1是
|
userCouponFlag: -1, //商铺是否可用优惠券 0否 1是
|
},
|
lat: '', //纬度
|
lng: '', //经度
|
money: '', // 金额
|
token: null,
|
isNew: false, // 是否新用户，新用户查询不到积分和银行卡
|
canReset: false,
|
couponShow: false, // 优惠券弹窗
|
couponList: null, // 优惠券
|
couponInfo: {
|
id: '',
|
discount: 0,
|
thresholdValue: 0
|
}, // 优惠券内容
|
checkCoupon: {
|
id: null,
|
discount: 0,
|
thresholdValue: 0
|
},
|
};
|
},
|
computed: {
|
useCoupon() {
|
if(this.onlineId){
|
return this.couponInfo.id!=''
|
}
|
return this.payWay==2&&this.shopInfo.userCouponFlag==1
|
},
|
discount1() {
|
if(!(this.money || 0)||!this.checkCoupon.id){
|
return 0
|
}
|
if (this.checkCoupon.discountType == 1) {
|
const num = this.$utils.fenToYuan(this.checkCoupon.discount)
|
return parseFloat(num);
|
}
|
const dis = 1 - parseFloat(this.checkCoupon.discount)
|
const dic = Math.floor(this.$utils.accMul(this.money,100) * dis)
|
return this.$utils.fenToYuan(dic).toFixed(2);
|
},
|
discount() {
|
if(!(this.money || 0)||!this.couponInfo.id){
|
return 0
|
}
|
if (this.couponInfo.discountType == 1) {
|
const num = this.$utils.fenToYuan(this.couponInfo.discount)
|
return parseFloat(num);
|
}
|
const dis = 1 - parseFloat(this.couponInfo.discount)
|
const dic = Math.floor(this.$utils.accMul(this.money,100) * dis)
|
return this.$utils.fenToYuan(dic).toFixed(2);
|
},
|
payMoney() {
|
if(this.discount===0||!Number(this.money || 0)){
|
return 0
|
}
|
const num = this.$utils.accMul(this.money,100) - this.$utils.accMul(this.discount,100);
|
return this.$utils.fenToYuan(num).toFixed(2);
|
}
|
},
|
onLoad(opt) {
|
uni.setStorageSync('CID', opt.cid)
|
uni.setStorageSync('SHOPID', opt.shopId)
|
uni.setStorageSync('SMONEY', opt.smoney)
|
uni.setStorageSync('AQCI', opt.activityQrcodeId)
|
this.UNIONID = uni.getStorageSync('UNIONID') || null
|
this.isNew = uni.getStorageSync('IS_NEW')
|
if (opt.smoney) {
|
this.smoney = opt.smoney
|
this.money = opt.smoney
|
}else if (opt.onlineId) {
|
this.onlineId = opt.onlineId
|
this.init()
|
} else if (opt.activityQrcodeId) {
|
this.activityQrcodeId = opt.activityQrcodeId
|
} else {
|
this.bordShow = true
|
}
|
if (opt.shopId) {
|
this.shopId = opt.shopId
|
this.init()
|
}
|
if (opt.cid) {
|
this.cid = opt.cid
|
this.init()
|
}
|
if (opt.code || opt.auth_code || opt.userAuthCode) {
|
let params = {
|
code: opt.code
|
}
|
let code = opt.code
|
if (this.payWay == 2 && opt.state == 1) { //微信
|
params.getUserInfo = 1
|
}
|
if (this.payWay == 5) { //支付宝
|
params.code = opt.auth_code
|
}
|
if (this.payWay == 15) { //云闪付
|
code = opt.userAuthCode
|
}
|
const cd = uni.getStorageSync('cd')
|
if (code === cd) {
|
return
|
}
|
uni.setStorageSync('cd', code)
|
userLogin({
|
platform: this.payWay,
|
params
|
}).then(res => {
|
this.getToken(res)
|
})
|
}
|
|
},
|
methods: {
|
/*关闭页面*/
|
clickDone() {
|
let browser = navigator.userAgent.toLowerCase();
|
if (browser.match(/Alipay/i) == "alipay") {
|
//这个可以关闭安卓系统的手机
|
document.addEventListener("AlipayJSBridgeReady", function () {
|
AlipayJSBridge.call("closeWindow");
|
},
|
false
|
);
|
//这个可以关闭ios系统的手机
|
AlipayJSBridge.call('closeWebview'); //支付宝
|
} else if (browser.match(/MicroMessenger/i) == "micromessenger") {
|
//这个可以关闭安卓系统的手机
|
document.addEventListener("WeixinJSBridgeReady", function () {
|
WeixinJSBridge.call("closeWindow");
|
},
|
false
|
);
|
//这个可以关闭ios系统的手机
|
WeixinJSBridge.call("closeWindow");
|
} else {
|
window.opener = null; //如果没有这行和下面的一行则会出现上面的第二个询问框。
|
window.open(' ', '_self', ' ');
|
window.close()
|
}
|
},
|
/*登录*/
|
getToken(res) {
|
this.token = res.token
|
if (res.openid) {
|
uni.setStorageSync('OPENID', res.openid)
|
}
|
if (res.unionid) {
|
uni.setStorageSync('UNIONID', res.unionid)
|
}
|
if (res.aLiUserId) {
|
uni.setStorageSync('ALIUSERID', res.aLiUserId)
|
}
|
if (res.cloudPayUserId) {
|
uni.setStorageSync('UNIONPAYID', res.cloudPayUserId)
|
}
|
this.UNIONID = res.unionid
|
uni.setStorageSync(ACCESSTOKEN, res.token)
|
uni.setStorageSync('IS_NEW', res.isNew)
|
this.isNew = res.isNew
|
if (!this.onlineId&&!res.isNew && !uni.$u.test.isEmpty(this.money)) {
|
this.queryUseSweepPayCoupon()
|
}
|
},
|
/*授权unionid*/
|
toRegister() {
|
if (this.payWay == 2) {
|
const redirect_uri = encodeURIComponent(`${config.webURL}/pay/scanpay?cid=${this.cid || ''}&shopId=${this.shopId || ''}&activityQrcodeId=${this.activityQrcodeId || ''}&smoney=${this.smoney || ''}&onlineId=${this.onlineId||''}`)
|
uni.clearStorageSync()
|
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=1#wechat_redirect`
|
}
|
},
|
// 更新金额
|
changeMoney(str) {
|
this.money = str;
|
this.couponInfo = {
|
id: '',
|
discount: 0,
|
thresholdValue: 0
|
} // 优惠券内容
|
this.checkCoupon = {
|
id: null,
|
discount: 0,
|
thresholdValue: 0
|
}
|
},
|
// 展示键盘
|
showBord() {
|
this.bordShow = true;
|
},
|
init() {
|
this.loading = true
|
let timer = setTimeout(() => {
|
this.shopInfo.scanFlag = 0
|
this.tips = '当前用户过多，请稍后重试～_～'
|
this.loading = false
|
}, 2000)
|
let api = queryShopByCid
|
let params = {
|
cid: this.cid
|
}
|
if (this.cid) {
|
api = queryShopByCid
|
params = {
|
cid: this.cid
|
}
|
}
|
if (this.shopId) {
|
api = queryShopByShopId
|
params = {
|
shopId: this.shopId
|
}
|
}
|
if (this.onlineId) {
|
api = getOnlineId
|
params = {
|
onlineId: this.onlineId
|
}
|
}
|
//获取商铺信息
|
api({
|
params
|
}).then(res => {
|
clearTimeout(timer)
|
this.loading = false
|
if (!uni.$u.test.isEmpty(res.logoImage)) {
|
res.logoImage = config.baseURL + res.logoImage
|
}
|
this.shopInfo = res
|
if(this.onlineId){
|
this.smoney = this.$utils.fenToYuan(res.totalPrice)
|
this.money = this.$utils.fenToYuan(res.totalPrice)
|
if(res.couponId){
|
this.couponInfo = {
|
id: res.couponId,
|
thresholdValue: res.thresholdValue,
|
discount: res.discount,
|
discountType: res.discountType,
|
}
|
}
|
}
|
}).catch((err) => {
|
clearTimeout(timer)
|
this.shopInfo.scanFlag = 0
|
this.tips = err.description || '当前用户过多，请稍后重试～_～'
|
this.loading = false
|
})
|
|
if (this.payWay == 2) {
|
const uri = encodeURIComponent(window.location)
|
getWechatConfigInfo({
|
url: uri
|
}).then(res => {
|
wx.config({
|
debug: false, // 开启调试模式
|
appId: res.appId, // 必填，公众号的唯一标识
|
timestamp: res.timestamp, // 必填，生成签名的时间戳
|
nonceStr: res.noncestr, // 必填，生成签名的随机串
|
signature: res.signature, // 必填，签名
|
jsApiList: ['hideAllNonBaseMenuItem','getLocation'], // 必填，需要使用的JS接口列表
|
openTagList: ['wx-open-launch-weapp'] //可选，需要使用的开放标签列表
|
});
|
wx.ready( ()=> {
|
wx.hideAllNonBaseMenuItem();
|
if(CHECK_LOCATION){
|
this.wxGetLocation(null)
|
}
|
})
|
})
|
}
|
if(this.payWay == 5){
|
ap.hideOptionButton();
|
this.apGetLocation(null)
|
}
|
},
|
apGetLocation(callback){
|
ap.getLocation((res)=> {
|
console.log('apGetLocation',res)
|
if(res.latitude){
|
this.lat = parseFloat(res.latitude).toFixed(6); // 纬度，浮点数，范围为90 ~ -90
|
this.lng = parseFloat(res.longitude).toFixed(6); // 经度，浮点数，范围为180 ~ -180。
|
if(callback) callback()
|
}else{
|
uni.showModal({
|
title: '提示',
|
content: "获取地理位置失败，无法进行支付！",
|
confirmText: '重新授权',
|
cancelText: '退出',
|
success: ret=>{
|
if(ret.confirm){
|
this.apGetLocation(callback)
|
}else{
|
this.clickDone()
|
}
|
}
|
})
|
}
|
})
|
},
|
wxGetLocation(callback){
|
wx.getLocation({
|
type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
|
complete: (res)=> {
|
if(res.errMsg==="getLocation:ok"){
|
this.lat = parseFloat(res.latitude).toFixed(6); // 纬度，浮点数，范围为90 ~ -90
|
this.lng = parseFloat(res.longitude).toFixed(6); // 经度，浮点数，范围为180 ~ -180。
|
if(callback) callback()
|
}else{
|
uni.showModal({
|
title: '提示',
|
content: "获取地理位置失败，无法进行支付！",
|
confirmText: '重新授权',
|
cancelText: '退出',
|
success: ret=>{
|
if(ret.confirm){
|
this.wxGetLocation(callback)
|
}else{
|
this.clickDone()
|
}
|
}
|
})
|
}
|
}
|
});
|
},
|
// 获取会员相关信息
|
showCoupon() {
|
if(this.onlineId){
|
return
|
}
|
if (this.UNIONID||this.payWay==5) {
|
if (uni.$u.test.isEmpty(this.money)) {
|
uni.$u.toast('请输入金额！')
|
return
|
}
|
this.couponList = null
|
this.couponShow = true
|
this.queryUseSweepPayCoupon()
|
} else {
|
this.toRegister()
|
}
|
},
|
//获取用户优惠券
|
queryUseSweepPayCoupon() {
|
//2 微信 5支付宝 15云闪付
|
const applyPayWayStr = {
|
2: 1,
|
5: 2,
|
15: 3
|
}
|
queryUseSweepPayCoupon({
|
params: {
|
score: 0,
|
applyPayWayStr: applyPayWayStr[this.payWay],
|
cusid: this.shopInfo.id,
|
money: this.$utils.accMul(this.money,100),
|
}
|
}).then(res => {
|
this.couponList = res
|
}).catch(() => {
|
this.couponList = []
|
})
|
},
|
//选择优惠券
|
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;
|
},
|
checkLocation(){
|
if(!CHECK_LOCATION){
|
this.pay()
|
return
|
}
|
if (uni.$u.test.isEmpty(this.money)) {
|
uni.$u.toast('请输入金额！')
|
return
|
}
|
if(!this.lat){
|
if(this.payWay == 2){
|
this.wxGetLocation(this.pay)
|
}
|
if(this.payWay == 5){
|
this.apGetLocation(this.pay)
|
}
|
}else{
|
this.pay()
|
}
|
},
|
//确认支付
|
pay() {
|
if (uni.$u.test.isEmpty(this.money)) {
|
uni.$u.toast('请输入金额！')
|
return
|
}
|
this.bordShow = false
|
// 金额 this.money
|
uni.showLoading({
|
title: '下单中',
|
mask: true
|
})
|
let params = {
|
money: this.$utils.accMul(this.money,100),
|
shopId: this.shopInfo.id,
|
payWay: this.payWay,
|
buyerNote: this.buyerNote,
|
score: 0,
|
couponDetailId: this.couponInfo.id,
|
lat: this.lat,
|
lng: this.lng
|
}
|
if (this.activityQrcodeId) {
|
params.activityQrcodeId = this.activityQrcodeId
|
}
|
if (this.cid) {
|
params.cid = this.cid
|
}
|
if (this.onlineId) {
|
params = {payWay: this.payWay,onlineId: this.onlineId}
|
}
|
//生成订单
|
saveOrder(params).then(res => {
|
uni.hideLoading()
|
try {
|
this.orderId = res.orderId
|
res.youHuiInfo.shopName = this.shopInfo.shopName
|
this.youHuiInfo = res.youHuiInfo
|
if (this.payWay == 2) {
|
this.wxPay(res.paymentData)
|
}
|
if (this.payWay == 5) {
|
this.aliPay(res.paymentData)
|
}
|
if (this.payWay == 15) {
|
this.aliPay(res.paymentUrl)
|
}
|
} 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) {
|
// 正在处理中 || 取消
|
} else if (res.resultCode == 6001) {
|
// 取消
|
this.closeOrder()
|
} else {
|
// 支付失败
|
this.closeOrder()
|
}
|
});
|
},
|
closeOrder() {
|
uni.showLoading({
|
title: '取消支付中',
|
mask: true
|
})
|
closeOrder({
|
params: {
|
id: this.orderId,
|
}
|
}).then(res => {
|
uni.hideLoading()
|
}).catch(()=>{
|
uni.hideLoading()
|
})
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.page {
|
height: calc(100vh - 0px);
|
background-color: #EDEDED;
|
border-top: 1px solid #EDEDED;
|
box-sizing: border-box;
|
}
|
|
.shop {
|
padding: 50rpx 32rpx 10px;
|
}
|
|
.avg-img {
|
width: 88rpx;
|
height: 88rpx;
|
border-radius: 44rpx;
|
background-color: #ffffff;
|
}
|
|
|
.money {
|
font-size: 40rpx;
|
}
|
|
|
.money-icon {
|
position: relative;
|
bottom: 6rpx;
|
font-size: 42rpx;
|
color: #666;
|
margin-right: 10rpx;
|
}
|
|
.money-num {
|
font-size: 72rpx;
|
}
|
|
.pay-it {
|
position: absolute;
|
width: 686rpx;
|
height: 98rpx;
|
bottom: 0;
|
border-radius: 10rpx;
|
font-size: 34rpx;
|
color: #ffffff;
|
background-color: #de2d35;
|
margin: 32rpx;
|
}
|
|
.item-icon {
|
width: 38rpx;
|
height: 38rpx;
|
}
|
|
.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: block;
|
}
|
|
100% {
|
opacity: 1;
|
display: block;
|
}
|
}
|
|
.cursor {
|
width: 1px;
|
height: 70rpx;
|
}
|
|
.cursor-act {
|
width: 1px;
|
background-color: #999;
|
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 {
|
margin: 120rpx auto 0;
|
position: relative;
|
width: 680rpx;
|
height: 100rpx;
|
}
|
|
.wx-app {
|
position: absolute;
|
width: 680rpx;
|
height: 100rpx;
|
}
|
|
.coupon {
|
background-color: rgba(255, 241, 241, 0.47);
|
height: 171rpx;
|
border: solid 1rpx #f85d64;
|
border-radius: 10rpx;
|
position: relative;
|
overflow: hidden;
|
}
|
.num-box{
|
width: 200rpx;
|
text-align: center;
|
}
|
.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(60vh - 44px);
|
}
|
|
|
.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;
|
}
|
|
.remark {
|
color: #1E8BE0
|
}
|
|
.lh-1 {
|
line-height: 1;
|
}
|
|
.coupon-btn {
|
margin: 0 30rpx 30rpx;
|
height: 98rpx;
|
border-radius: 10rpx;
|
background-color: #D31F28;
|
font-size: 34rpx;
|
color: #fff;
|
line-height: 98rpx;
|
text-align: center;
|
}
|
|
.empty-box {
|
height: calc(80vh - 64rpx);
|
margin: 32rpx;
|
background-color: #fff;
|
border-radius: 10rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
.tips {
|
font-size: 28rpx;
|
color: #999;
|
margin: 60rpx 0;
|
}
|
|
.empty {
|
width: 291rpx;
|
height: 302rpx;
|
}
|
|
.clickDone {
|
font-size: 34rpx;
|
color: #fff;
|
width: 331rpx;
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 61rpx;
|
background: linear-gradient(0deg, #D31F28 0%, #D31F28 100%), linear-gradient(270deg, #F62B20 13.24%, #FC4E0B 111.68%), #D9D9D9;
|
}
|
}
|
</style>
|
