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.
252 lines
8.3 KiB
252 lines
8.3 KiB
<template>
|
|
<view style="height: 100%;display: flex;flex-direction: column;align-items: center;">
|
|
<view
|
|
style="display: flex;flex-direction: column;align-items: center;overflow-y: scroll;flex:1;padding-top: 60rpx;">
|
|
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;">
|
|
{{convertSecondsToHMS(page.countdown)}}
|
|
</view>
|
|
<view>
|
|
<text style="color: black;font-size: 35rpx;font-weight: bold;">￥</text>
|
|
<text style="color: black;font-size: 70rpx;font-weight: bold;">{{data.price}}</text>
|
|
</view>
|
|
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;">
|
|
{{data.goods}}
|
|
</view>
|
|
|
|
<view style="background: #ffffff;margin-top: 100rpx;border-radius: 20rpx;width: calc(100vw - 40rpx);">
|
|
<radio-group @change="radioChange">
|
|
<label
|
|
style="width: 100%;height: 120rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;"
|
|
v-for="(item, index) in page.real" :key="index">
|
|
<view style="width: 100%;height: 120rpx;display: flex;flex-direction: row;align-items: center;">
|
|
<image :src="item.image" style="width: 55rpx;height: 55rpx;margin-left: 25rpx;"></image>
|
|
<text style="flex: 1;font-size: 30rpx;margin-left: 6rpx;">{{item.pay}}</text>
|
|
<radio style="transform:scale(0.8);margin-right: 25rpx;" :checked="index==0"
|
|
:value="index+''" :activeBackgroundColor="item.btnColor" />
|
|
</view>
|
|
<view v-if="index != page.real.length-1"
|
|
style="width: 93%;height: 1px;background-color: #f1f2f3;"></view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="btn" :style="{'background': page.real[page.selected].btnColor}" @click="createOrder">
|
|
{{page.submitText}}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
http
|
|
} from '../../utils/pay_http.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
page: {
|
|
// 本插件提供的支付方式
|
|
supports: [{
|
|
payType: 'wxpay',
|
|
pay: '微信',
|
|
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADcUlEQVR4nO2ZfVLaUBDAdyFCAGekJyg9Qb2BMBX/lZ4APEHxBOIJSk+gnqD0X6EFT6A9QfUExZkCAUK2u1iYNF98+CiR8ptR92Xy8X4vm7cvEWFD2IqEjf9DJN3UMwMTihyunZgGV+2ccQ8++Iqk6vGPFkCZw9AQAah28v1TDl14iqQa8apF8IHD0BFB+NQ57LsG2CUi6dQ36QeHoSWu4RtnmrlEknW9QkBnHIaYyGkv36tyMOVFiiDgeTdvVMDGVmSdbEUWAx+QoIVR/rHgHmxwXcoCQQaQCgSwx5uWYsUieBMFqPzKGy2Yg2QjWSCyygB0wM2FWIkIn+AxAliYV8DJH6EqC73m5lwoF+EU+h7bSWTbuXabm0uTbqbTg2GvRQhvuTkTpSKqJCaITN80anxnDrgZiDIRPugxpiUyqiSEVEMvElGZAPa5GYg6EYy+7x52axw+C7kLw5FxbFlQ4VucAUYWhdaMBasSEUmp7lF/n8OlEYGBaXBnx3cgzZukI19iGpZlMZi81i8JqcibPVEiwmPmWrAJ0rlZqSYr68EIzoioBFPwgaftkn3We5rJRp859ESJiNcSetxBk24BoydeKbdb17MWQpFsAnzhR/5ddXZIkEHpm72fHHqCKkR6+b7rGCFZj9cI4DjCb3E7WuJc7o4IjADOOIWyYINPME0j8CFRjxP/8WSlIk+dpiaHY3inNvHgcmjDnUZ+rE1ESF7H77yKGh/gm0Z+rFwkriVeSdpw6CL1VS9ZFl1wOAUJr2I7UAlKIyfyzAW9bisRmVVD+FmRlNrjPW84jSrzpJETrwGxo0aER7h7ZJTABxnNIUTTnVznjptLwYNxSwEVXomIEJRez8U5aXihTAQRL7uHxgmHShnXj6HB9YgyEIAyEWHWs7IMyYZ+Qbai6YdaEa4TGMHTzjvjEhQwr4SgVGRCJIInz5FJNVP7ZJoXFPBwO1mJyKxZzA+Z3WQBCTT+EJHmTXOzGhHbSWXVyt9KjvmkrZ0o3DiL4O43/WBk4T6SlSUA3nc57NecwNf8m0VFooA5TdPvBmZP0mPpzi3CSkRkKiYLspxjGfhHrERkHWxFwsbGiHD1cn03cInI/B70LhAGvL4buESEjfhn6IQwyvhJCL4iwlOaYQGB0txcGwTYjmtUc6aTnUCRl8RWJGxsjMhvudpkUV3iI98AAAAASUVORK5CYII=',
|
|
btnColor: '#FE9039'
|
|
}],
|
|
// 可使用的方式，主要是对App,h5可进行定义，微信小程序定时时无效(因为仅支持微信支付)
|
|
use: [0],
|
|
real: [],
|
|
selected: 0,
|
|
countdown: 0,
|
|
submitText: '确认支付',
|
|
cancleText: '订单已取消'
|
|
},
|
|
data: {
|
|
price: '价格',
|
|
goods: '商品名称',
|
|
remainder: 60000,
|
|
// 生成待支付订单时后台返回的,具体地址是啥，参数是啥由后台提供
|
|
// 唯一支付方式固定为type参数
|
|
pay_url: {
|
|
url: '底梦哲提供，王鹏飞进行组装成绝对地址返回',
|
|
// 底梦哲提接口传参要求，王鹏飞进行组装
|
|
params: {
|
|
// 此参数由本工具进行返回，后台不需要传
|
|
type: '支付方式，由本框架提供',
|
|
// ...更多参数
|
|
}
|
|
},
|
|
// 由前端去设置，查看订单的详情地址
|
|
return_url: '订单详情的地址'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
wxPay(order, o) {
|
|
|
|
wx.requestPayment({
|
|
appId: order.appid,
|
|
timeStamp: order.timeStamp, //创建订单时间戳
|
|
nonceStr: order.nonceStr,
|
|
package: order.package, // 订单包
|
|
signType: order.signType, // 加密方式统一'MD5'
|
|
paySign: order.sign, // 后台支付签名返回
|
|
success(res) {
|
|
// 数据源转换成字符
|
|
let data = JSON.stringify(o)
|
|
// 转码传输
|
|
let value = encodeURIComponent(data)
|
|
uni.redirectTo({
|
|
url: '/uni_modules/common-pay/pages/success/success?data=' +
|
|
value
|
|
})
|
|
},
|
|
fail(res) {
|
|
try {
|
|
if (err.errMsg != 'requestPayment:fail cancel') {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '支付失败'
|
|
})
|
|
}
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
}
|
|
}
|
|
})
|
|
},
|
|
convertSecondsToHMS(seconds) {
|
|
var hours = Math.floor(seconds / (60 * 60)); // 计算小时
|
|
seconds %= (60 * 60); // 取余得到不足1小时的秒数
|
|
|
|
var minutes = Math.floor(seconds / 60); // 计算分钟
|
|
seconds %= 60; // 取余得到不足1分钟的秒数
|
|
|
|
let result = '支付剩余时间 '
|
|
if (hours > 0) {
|
|
result += (hours < 10 ? '0' + hours : hours) + ":" + (minutes < 10 ? '0' + minutes : minutes) + ":" + (
|
|
seconds < 10 ? '0' + seconds : seconds)
|
|
} else {
|
|
// 不显示小时，直接显示 分钟：秒
|
|
if (minutes > 0) {
|
|
result += (minutes < 10 ? '0' + minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds)
|
|
} else {
|
|
result += "00:" + (seconds < 10 ? '0' + seconds : seconds)
|
|
}
|
|
}
|
|
|
|
return result
|
|
},
|
|
startCountdown() {
|
|
setInterval(() => {
|
|
if (this.page.countdown > 0) {
|
|
this.page.countdown--;
|
|
} else {
|
|
// 秒杀倒计时结束的操作，例如弹出提示或触发秒杀请求
|
|
this.page.submitText = this.page.cancleText
|
|
}
|
|
}, 1000);
|
|
},
|
|
radioChange: function(evt) {
|
|
this.page.selected = parseInt(evt.detail.value)
|
|
},
|
|
createOrder() {
|
|
|
|
if (this.page.cancleText === this.page.submitText) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: this.page.cancleText
|
|
})
|
|
return
|
|
}
|
|
|
|
// 额外组装type
|
|
let payType = this.page.real[this.page.selected].payType
|
|
this.data.pay_url.params.type = payType
|
|
|
|
let o = this.data
|
|
o.color = this.page.real[this.page.selected].btnColor
|
|
o.pay = this.page.real[this.page.selected].pay
|
|
|
|
http({
|
|
url: this.data.pay_url.url,
|
|
data: this.data.pay_url.params
|
|
}).then((res) => {
|
|
if ('wxpay' === payType) {
|
|
this.wxPay(res.data, o)
|
|
}
|
|
}).catch((err) => {
|
|
console.log('fail', JSON.stringify(err));
|
|
});
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
|
|
try {
|
|
// 跳转携带数据
|
|
this.data = JSON.parse(options.data)
|
|
} catch (e) {
|
|
this.data = JSON.parse(decodeURIComponent(options.data))
|
|
}
|
|
|
|
this.page.countdown = this.data.remainder;
|
|
if (this.page.countdown <= 0) {
|
|
this.page.submitText = this.page.cancleText
|
|
} else {
|
|
// 开始倒计时
|
|
this.startCountdown();
|
|
}
|
|
|
|
// ToDo h5，app下生效
|
|
// 将来支持配置
|
|
// #ifdef APP || H5
|
|
|
|
// #endif
|
|
// 微信下生效
|
|
// #ifdef MP-WEIXIN
|
|
// 微信不支持配置
|
|
this.page.use = [0]
|
|
// #endif
|
|
|
|
for (var i = 0; i < this.page.use.length; i++) {
|
|
this.page.real.push(this.page.supports[this.page.use[i]])
|
|
}
|
|
|
|
if (this.page.real.length < 1) {
|
|
uni.showModal({
|
|
content: '未正确配置支付方式',
|
|
showCancel: false,
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
});
|
|
return
|
|
}
|
|
|
|
// if (this.page.real.length == 1) {
|
|
// // 仅有一个选择时直接调用支付接口
|
|
// this.createOrder()
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
uni-page-body,
|
|
page {
|
|
background-color: #f1f3f5;
|
|
height: 100%;
|
|
}
|
|
|
|
.btn {
|
|
width: calc(100% - 40rpx);
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
border-radius: 50rpx;
|
|
margin-bottom: 30rpx;
|
|
margin-top: 30rpx;
|
|
color: #fff;
|
|
}
|
|
</style>
|