wanghongjun
2 years ago
5 changed files with 310 additions and 1 deletions
@ -0,0 +1,263 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="item-pay"> |
|||
<view class="item-pay-con"> |
|||
<view class="item-pay-con-ti">选择支付方式</view> |
|||
<button class="item-pay-con-bu" :class="{'item-pay-con-bu-show': payType === items.value}" v-for="items in payTypeArr" @click="changePayType(items.value)">{{items.title}}</button> |
|||
</view> |
|||
|
|||
<view class="item-pay-con"> |
|||
<view class="item-pay-con-ti"> |
|||
认证缴费订单 |
|||
</view> |
|||
<view class="item-pay-con-tab"> |
|||
<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<uni-th width="140" align="center">订单号</uni-th> |
|||
<uni-th width="120" align="center">姓名</uni-th> |
|||
<uni-th align="center">订单金额</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableList" :key="index"> |
|||
<uni-td>{{ item.pay_no }}</uni-td> |
|||
<uni-td> |
|||
<view class="name">认证缴费订单</view> |
|||
</uni-td> |
|||
<uni-td align="center">{{ item.address }}</uni-td> |
|||
</uni-tr> |
|||
</uni-table> |
|||
<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item-pay"> |
|||
<image class="item-pay-img" v-if="is_show_img" :src="pay_image"></image> |
|||
<text class="item-pay-prompt" v-if="is_show_img">请扫码支付！</text> |
|||
<button class="item-pay-sub" :disabled="isDisabled" @click="handlerPay">确认支付</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import * as GoodsApi from '@/api/goods' |
|||
import uniTable from "@/uni_modules/uni-table/components/uni-table/uni-table" |
|||
import uniTr from "@/uni_modules/uni-table/components/uni-tr/uni-tr" |
|||
import uniTh from "@/uni_modules/uni-table/components/uni-th/uni-th" |
|||
import uniTd from "@/uni_modules/uni-table/components/uni-td/uni-td" |
|||
import uniPagination from "@/uni_modules/uni-pagination/components/uni-pagination/uni-pagination" |
|||
|
|||
export default { |
|||
name: "payment", |
|||
components: { |
|||
'uni-table': uniTable, |
|||
'uni-tr': uniTr, |
|||
'uni-th': uniTh, |
|||
'uni-td': uniTd, |
|||
'uni-pagination': uniPagination, |
|||
}, |
|||
data () { |
|||
return { |
|||
tableList: [], |
|||
payTypeArr: [ |
|||
{ |
|||
title: '网银支付', |
|||
value: 15 |
|||
},{ |
|||
title: '支付宝', |
|||
value: 12 |
|||
}, |
|||
], |
|||
payType: 15, |
|||
loading: false, |
|||
selectedIndexs: [], |
|||
pageSize: 10, // 每页数据量 |
|||
pageCurrent: 1, // 当前页 |
|||
total: 0, // 数据总量 |
|||
good_money: 0, // 交易金额 |
|||
isDisabled: false, // 按钮禁用 |
|||
is_show_img: false, // 显示图片 |
|||
pay_image: '', // 显示图片 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.selectedIndexs = [] |
|||
this.getTableList() |
|||
}, |
|||
methods: { |
|||
// 切换支付类型 |
|||
changePayType(val) { |
|||
this.payType = val |
|||
}, |
|||
// 分页触发 |
|||
change(e) { |
|||
this.$refs.table.clearSelection() |
|||
this.selectedIndexs.length = 0 |
|||
this.getData(e.current) |
|||
}, |
|||
// 获取订单列表 |
|||
getTableList(pageNo = 1) { |
|||
const app = this |
|||
let param = { |
|||
userid : uni.getStorageSync("accountId"), |
|||
isok : 2, |
|||
} |
|||
return new Promise((resolve, reject) => { |
|||
GoodsApi.paymentList(param).then(res => { |
|||
if (res.resultCode === "00000000") { |
|||
app.tableList = res.data |
|||
//app.good_money = res.data[0].paysum |
|||
} else { |
|||
app.$error(res.errMsg); |
|||
} |
|||
resolve() |
|||
}).catch(reject) |
|||
}) |
|||
}, |
|||
// 确认支付 |
|||
handlerPay () { |
|||
const app = this |
|||
let shopnameArr = [] |
|||
let shop_price_arr = [] |
|||
app.tableList.forEach((item) => { |
|||
shopnameArr.push = item.pay_no |
|||
shop_price_arr.push = item.paysum |
|||
}) |
|||
let shopname = shopnameArr.join(',') |
|||
let shop_price = shop_price_arr.join(',') |
|||
let new_shop_Name = '' |
|||
let Merchant_id = uni.getStorageSync("Merchant_id") // 商户id |
|||
let accountId = uni.getStorageSync("accountId") // 用户isli |
|||
|
|||
//计算交易金额 |
|||
let manyMony = 0; |
|||
manyMony = (Number(app.good_money * 100)).toFixed(0); |
|||
|
|||
let payment = { |
|||
amount: manyMony, //交易金额 |
|||
app_id: Merchant_id, //发送请求的公司id |
|||
body: "认证缴费订单", //订单描述 |
|||
businesstype: 1001, //交易类型1001-销售收款，2001-消费付款 |
|||
ordernumber: shopname, //订单号 |
|||
paymenttypeid: app.payType, //12支付宝，13微信 15 网银支付 |
|||
subpaymenttypeid: app.payType, //12支付宝，13微信 15 网银支付 |
|||
businesstime: app.getDayTimer(new Date()), |
|||
buyer: accountId, //客户(买方) 用户isli |
|||
chargeuptype: 2, //收支类型1-收入2-支出, |
|||
goodsname: "认证缴费订单", //商品名称 |
|||
orderamount: manyMony, //订单金额(单位分) |
|||
payorderid: shopname, //交易流水号 |
|||
price: shop_price, //商品单价(单位分) |
|||
seller: accountId, //商户(卖方) |
|||
settlementamount: manyMony, //结算金额(分) |
|||
settlementtype: 2, //结算方式:1-转账充值;2-内部转账 |
|||
totalqty: 1 //商品数量 |
|||
} |
|||
|
|||
if (new_shop_Name == "") { |
|||
app.isDisabled = true |
|||
payment.body = encodeURIComponent(payment.body, "ut-8") |
|||
payment.goodsname = encodeURIComponent(payment.goodsname, "ut-8") |
|||
//确认支付接口 |
|||
let paramArr = ''; |
|||
for (let key in payment) { |
|||
paramArr.push(key + '=' + payment[key]) |
|||
} |
|||
let paramStr = '?' + paramArr.join('&') |
|||
GoodsApi.certificationPay(paramStr).then(res => { |
|||
if (res.resultCode == '00000000') { |
|||
if (app.payType != 15) { |
|||
app.is_show_img = true |
|||
app.pay_image = res.data.qrcodeurl |
|||
} else { |
|||
app.$success('支付成功') |
|||
this.getTableList() |
|||
} |
|||
} |
|||
}) |
|||
|
|||
} else { |
|||
app.$error(new_shop_Name + "无法购买") |
|||
} |
|||
}, |
|||
//转换时间 |
|||
getDayTimer (data) { |
|||
let date = new Date(data) |
|||
let y = date.getFullYear() |
|||
let m = date.getMonth() + 1 |
|||
m = m < 10 ? ('0' + m) : m |
|||
let d = date.getDate() |
|||
d = d < 10 ? ('0' + d) : d |
|||
let currentdate = y + '-' + m + '-' + d; |
|||
let hh = date.getHours() |
|||
hh = hh < 10 ? ('0' + hh) : hh |
|||
let mm = date.getMinutes() |
|||
mm = mm < 10 ? ('0' + mm) : mm |
|||
let ss = date.getSeconds() |
|||
ss = ss < 10 ? ('0' + ss) : ss |
|||
let time = hh + ':' + mm + ':' + ss; |
|||
return currentdate + " " + time |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
width: 100%; |
|||
|
|||
.item-pay { |
|||
|
|||
|
|||
.item-pay-con { |
|||
margin-top: 30rpx; |
|||
padding-top: 30rpx; |
|||
|
|||
.item-pay-con-ti { |
|||
height: 50rpx; |
|||
margin-left: 20rpx; |
|||
padding-left: 10px; |
|||
border-left: #407ac4 10rpx solid; |
|||
display: flex; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
|
|||
.item-pay-con-bu { |
|||
width: 200rpx; |
|||
margin-top: 30rpx; |
|||
margin-left: 50rpx; |
|||
border-radius: 15rpx; |
|||
display: inline-block; |
|||
border: #e5e5e5 1rpx solid; |
|||
background-color: #e5e5e5; |
|||
} |
|||
.item-pay-con-bu-show { |
|||
background-color: #defedc; |
|||
} |
|||
|
|||
} |
|||
|
|||
.item-pay-sub { |
|||
color: #ffffff; |
|||
margin-top: 200rpx; |
|||
background-color: #407ac4; |
|||
} |
|||
|
|||
.item-pay-img { |
|||
width: 200px; |
|||
height: 200px; |
|||
margin-top: 15%; |
|||
margin-left: 25%; |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
.item-pay-prompt { |
|||
display: block; |
|||
text-align: center; |
|||
color: red; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue