新增支付
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<view class="border-bottom pt-20">
|
||||
<el-form ref="form" :model="form1" label-width="80px" :rules="form1.props.rules">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<view class="flex flex-wrap justify-start items-start">
|
||||
<view class="w-25p">
|
||||
<el-form-item label="商品名称">
|
||||
<el-select v-model="form1.data.goodsId" placeholder="请选择商品" @change="selectGoods">
|
||||
<el-option
|
||||
@@ -13,50 +13,20 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="规格型号">
|
||||
<el-select v-model="form1.data.model" placeholder="请选择">
|
||||
<template v-if=" goodsAttributes.find(attr => attr.label === '规格型号')">
|
||||
<el-option
|
||||
v-for="(item, index) in goodsAttributes.find(attr => attr.label === '规格型号').values"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</template>
|
||||
</view>
|
||||
<view class="w-25p" v-for="(item, index) in goodsAttributes" :key="index">
|
||||
<el-form-item :label="item.label">
|
||||
<el-select v-model="form1.data.model[item.label]" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(item, index) in item.values"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="其他数据">
|
||||
<el-select v-model="form1.data.otherData" placeholder="请选择">
|
||||
<template v-if=" goodsAttributes.find(attr => attr.label === '其他数据')">
|
||||
<el-option
|
||||
v-for="(item, index) in goodsAttributes.find(attr => attr.label === '其他数据').values"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="执行标准">
|
||||
<el-select v-model="form1.data.standard" placeholder="请选择">
|
||||
<template v-if="form1.data.goodsId">
|
||||
<el-option
|
||||
v-for="(item, index) in goodsAttributes.find(attr => attr.label === '执行标准').values"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</view>
|
||||
</view>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="单件长度">
|
||||
@@ -233,7 +203,7 @@ export default {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
goodsId: null,
|
||||
model: null,
|
||||
model: [],
|
||||
otherData: null,
|
||||
materialQuality: null,
|
||||
singleLength: null,
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<text class="w-15p">单价</text>
|
||||
<text class="w-15p">小计</text>
|
||||
</view>
|
||||
<view class="flex justify-start items-start my-20" v-for="(item, index) in info.goods">
|
||||
<view class="flex justify-start items-start my-20" v-for="(item, index) in info.goods" :key="index">
|
||||
<text class="w-15p">
|
||||
<image :src="item.goodsCover" mode="aspectFit" class="goods-cover"/>
|
||||
</text>
|
||||
@@ -72,7 +72,9 @@
|
||||
</el-row>
|
||||
<view class="mt-20 w-50p flex flex-col justify-center items-center m-a">
|
||||
<text class="text-main font-bold text-40 mb-20">订单金额:￥{{ info.amount }}</text>
|
||||
<el-button type="primary" round :disabled="!phone || !name || addressIndex.length < 3" @click="onPay">立即支付</el-button>
|
||||
<el-button type="primary" round :disabled="!phone || !name || addressIndex.length < 3" @click="onPay">
|
||||
立即支付
|
||||
</el-button>
|
||||
</view>
|
||||
<div class="pay-price" v-if="billQRCode">
|
||||
<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
|
||||
@@ -91,6 +93,7 @@ import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
||||
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
||||
import areas from "@/uni_modules/vk-uview-ui/libs/address/areas.json";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const OpenSdk = require('../../user/lib/base').default;
|
||||
|
||||
const sdk = new OpenSdk({
|
||||
@@ -111,7 +114,8 @@ export default {
|
||||
addressDetail: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
billQRCode: null
|
||||
billQRCode: null,
|
||||
checkPayInterval: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -122,23 +126,38 @@ export default {
|
||||
id: this.id
|
||||
}
|
||||
})
|
||||
if (this.info.orderStatus === 1) {
|
||||
this.$message({
|
||||
type:'success',
|
||||
message: '订单已支付成功'
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$router.push({
|
||||
path: '/pages/user/order',
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
onPay() {
|
||||
const requestTimestamp = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
const timestamp = dayjs().format('YYYYmmddHHmmSS')
|
||||
console.log(timestamp)
|
||||
console.log(requestTimestamp)
|
||||
const timestamp = dayjs().format('YYYYMMDDHHmmss')
|
||||
const goods = []
|
||||
let goodsName = this.info.goods[0].goodsName
|
||||
goods.push({goodsName})
|
||||
if (this.info.goods.length > 1) goodsName += `等${this.info.goods.length - 1}件商品`
|
||||
let data = {
|
||||
queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
|
||||
timestamp,
|
||||
nonce: 'rp84ufhfn20yneo3tp',
|
||||
content: {
|
||||
billNo: this.info.orderNo,
|
||||
requestTimestamp,
|
||||
mid: '898201612345678',
|
||||
tid: '88880001',
|
||||
instMid: 'QRPAYDEFAULT',
|
||||
totalAmount: 1,
|
||||
notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
|
||||
notifyUrl: 'https://fc-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/pay_notify',
|
||||
goods
|
||||
}
|
||||
}
|
||||
/**
|
||||
@@ -150,6 +169,11 @@ export default {
|
||||
if (result.errCode === 'SUCCESS') {
|
||||
this.showQrcode = true
|
||||
this.billQRCode = result.billQRCode
|
||||
setTimeout(() => {
|
||||
this.checkPayInterval = setInterval(() => {
|
||||
this.getInfo()
|
||||
}, 1000)
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
+339
-328
@@ -1,379 +1,390 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>购买增值服务</span>
|
||||
</div>
|
||||
<div class="grade-list">
|
||||
<div class="item">
|
||||
<div class="item-box" style="background-color: #f7f7f7">
|
||||
<div class="title">业务编号</div>
|
||||
<div class="title">服务项目</div>
|
||||
<div class="title">计价方式</div>
|
||||
<div class="title">收费标准</div>
|
||||
<div class="title">检查单位</div>
|
||||
<div class="title">选择服务</div>
|
||||
<div class="title">备注</div>
|
||||
<template>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>购买增值服务</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-for="(item, index) in gradeList" :key="index" @click="onChange(index)">
|
||||
<div class="item-box">
|
||||
<div class="title">{{ item.code }}</div>
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div class="title">{{ item.type }}</div>
|
||||
<div class="title">{{ item.price }}</div>
|
||||
<div class="title">{{ item.company }}</div>
|
||||
<div class="title"><el-radio v-model="item.select" :label="1" @click.stop="onSelect(index)">{{ item.select === 1 ? '已选' : ''}}</el-radio></div>
|
||||
<div class="title">{{ item.comments }}</div>
|
||||
<div class="grade-list">
|
||||
<div class="item">
|
||||
<div class="item-box" style="background-color: #f7f7f7">
|
||||
<div class="title">业务编号</div>
|
||||
<div class="title">服务项目</div>
|
||||
<div class="title">计价方式</div>
|
||||
<div class="title">收费标准</div>
|
||||
<div class="title">检查单位</div>
|
||||
<div class="title">选择服务</div>
|
||||
<div class="title">备注</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-for="(item, index) in gradeList" :key="index" @click="onChange(index)">
|
||||
<div class="item-box">
|
||||
<div class="title">{{ item.code }}</div>
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div class="title">{{ item.type }}</div>
|
||||
<div class="title">{{ item.price }}</div>
|
||||
<div class="title">{{ item.company }}</div>
|
||||
<div class="title">
|
||||
<el-radio v-model="item.select" :label="1" @click.stop="onSelect(index)">
|
||||
{{ item.select === 1 ? '已选' : '' }}
|
||||
</el-radio>
|
||||
</div>
|
||||
<div class="title">{{ item.comments }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payment">
|
||||
<div class="sub-title">支付方式</div>
|
||||
<div class="content">
|
||||
<el-radio-group v-model="paymentIndex" class="ml-4">
|
||||
<el-radio v-for="(item,index) in payment" :key="index" :label="index"
|
||||
size="large">{{ item }}</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-price">
|
||||
<div class="sub-title">支付金额：￥{{ money }}元</div>
|
||||
</div>
|
||||
<div class="pay-price">
|
||||
<div class="sub-desc">购买即代表同意<text>《用户购买协议》</text></div>
|
||||
</div>
|
||||
<div class="pay-price" v-if="billQRCode">
|
||||
<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
|
||||
<div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
|
||||
<el-button type="success" @click="onPayStatus">已完成支付</el-button>
|
||||
</div>
|
||||
<el-button v-else type="danger" @click="onPay">立即支付</el-button>
|
||||
</el-card>
|
||||
<div class="payment">
|
||||
<div class="sub-title">支付方式</div>
|
||||
<div class="content">
|
||||
<el-radio-group v-model="paymentIndex" class="ml-4">
|
||||
<el-radio v-for="(item,index) in payment" :key="index" :label="index"
|
||||
size="large">{{ item }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-price">
|
||||
<div class="sub-title">支付金额：￥{{ money }}元</div>
|
||||
</div>
|
||||
<div class="pay-price">
|
||||
<div class="sub-desc">购买即代表同意
|
||||
<text>《用户购买协议》</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-price" v-if="billQRCode">
|
||||
<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
|
||||
<div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
|
||||
<el-button type="success" @click="onPayStatus">已完成支付</el-button>
|
||||
</div>
|
||||
<el-button v-else type="danger" @click="onPay">立即支付</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UQRCode from 'uqrcodejs';
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const OpenSdk = require('../lib/base').default;
|
||||
// const OpenSdk = require('ums-sdk-nodejs').default;
|
||||
|
||||
const sdk = new OpenSdk({
|
||||
appId: '10037e6f6823b20801682b6a5e5a0006',
|
||||
appKey: '1c4e3b16066244ae9b236a09e5b312e8'
|
||||
appId: '10037e6f6823b20801682b6a5e5a0006',
|
||||
appKey: '1c4e3b16066244ae9b236a09e5b312e8'
|
||||
})
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
paymentIndex: 0,
|
||||
payment: ["银联支付"],
|
||||
money: 5000,
|
||||
showQrcode: false,
|
||||
billQRCode: '',
|
||||
gradeIndex: 0,
|
||||
gradeList: [
|
||||
{
|
||||
id: 1,
|
||||
code: 'JJX001',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 1,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
code: 'JJX002',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
code: 'JJX003',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
code: 'JJX004',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
code: 'JJX005',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 1,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
code: 'JJX006',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
code: 'JJX007',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
code: 'JJX008',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
paymentIndex: 0,
|
||||
payment: ["银联支付"],
|
||||
money: 5000,
|
||||
showQrcode: false,
|
||||
billQRCode: '',
|
||||
gradeIndex: 0,
|
||||
gradeList: [
|
||||
{
|
||||
id: 1,
|
||||
code: 'JJX001',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 1,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
code: 'JJX002',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
code: 'JJX003',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
code: 'JJX004',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
code: 'JJX005',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 1,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
code: 'JJX006',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
code: 'JJX007',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
code: 'JJX008',
|
||||
name: '供应商实力考查',
|
||||
type: '元/次',
|
||||
price: 150,
|
||||
company: '金久信',
|
||||
select: 0,
|
||||
comments: '实现视频并记录存档，收集相关纸质文件'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
vk.userCenter.getCurrentUserInfo({
|
||||
success: (data) => {
|
||||
if (data.userInfo.businessCard) {
|
||||
this.form1.data = data.userInfo.businessCard
|
||||
}
|
||||
// 成功后的逻辑
|
||||
console.log('用户信息: ', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
vk.userCenter.getCurrentUserInfo({
|
||||
success: (data) => {
|
||||
if (data.userInfo.businessCard) {
|
||||
this.form1.data = data.userInfo.businessCard
|
||||
}
|
||||
// 成功后的逻辑
|
||||
console.log('用户信息: ', data);
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
onChange(index) {
|
||||
this.gradeIndex = index
|
||||
},
|
||||
onSelect(index){
|
||||
if(this.gradeList[index].select === 1){
|
||||
this.gradeList[index].select = 0
|
||||
}else{
|
||||
this.gradeList[index].select = 1
|
||||
}
|
||||
},
|
||||
onPay() {
|
||||
const date = new Date()
|
||||
const requestTimestamp = dayjs(date).format('YYYY-MM-DD HH:MM:ss')
|
||||
const timestamp = dayjs(date).format('YYYYmmddHHmmSS')
|
||||
console.log(timestamp)
|
||||
console.log(requestTimestamp)
|
||||
let data = {
|
||||
queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
|
||||
timestamp,
|
||||
nonce: 'rp84ufhfn20yneo3tp',
|
||||
content: {
|
||||
requestTimestamp,
|
||||
mid: '898201612345678',
|
||||
tid: '88880001',
|
||||
instMid: 'QRPAYDEFAULT',
|
||||
totalAmount: 1,
|
||||
notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
|
||||
},
|
||||
onChange(index) {
|
||||
this.gradeIndex = index
|
||||
},
|
||||
onSelect(index) {
|
||||
if (this.gradeList[index].select === 1) {
|
||||
this.gradeList[index].select = 0
|
||||
} else {
|
||||
this.gradeList[index].select = 1
|
||||
}
|
||||
},
|
||||
onPay() {
|
||||
const date = new Date()
|
||||
const requestTimestamp = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
const timestamp = dayjs().format('YYYYMMDDHHmmss')
|
||||
let data = {
|
||||
queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
|
||||
timestamp,
|
||||
nonce: 'rp84ufhfn20yneo3tp',
|
||||
content: {
|
||||
requestTimestamp,
|
||||
mid: '898201612345678',
|
||||
tid: '88880001',
|
||||
instMid: 'QRPAYDEFAULT',
|
||||
totalAmount: 1,
|
||||
notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 调用函数
|
||||
*/
|
||||
sdk.exec(data).then(res => {
|
||||
const h = this.$createElement;
|
||||
const result = JSON.parse(res);
|
||||
if (result.errCode === 'SUCCESS') {
|
||||
this.showQrcode = true
|
||||
this.billQRCode = result.billQRCode
|
||||
// this.$alert('', '请打开手机微信，扫一扫完成支付', {
|
||||
// confirmButtonText: '确定',
|
||||
// callback: action => {
|
||||
// this.$message({
|
||||
// type: 'success',
|
||||
// message: `已完成支付`
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
}
|
||||
})
|
||||
},
|
||||
dateFormat(fmt, date) {
|
||||
const opt = {
|
||||
"Y+": date.getFullYear().toString(), // 年
|
||||
"m+": (date.getMonth() + 1).toString(), // 月
|
||||
"d+": date.getDate().toString(), // 日
|
||||
"H+": date.getHours().toString(), // 时
|
||||
"M+": date.getMinutes().toString(), // 分
|
||||
"S+": date.getSeconds().toString() // 秒
|
||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||
};
|
||||
let ret
|
||||
for (let k in opt) {
|
||||
ret = new RegExp("(" + k + ")").exec(fmt)
|
||||
if (ret) {
|
||||
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
||||
}
|
||||
;
|
||||
}
|
||||
;
|
||||
return fmt
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 调用函数
|
||||
*/
|
||||
sdk.exec(data).then(res => {
|
||||
const h = this.$createElement;
|
||||
const result = JSON.parse(res);
|
||||
if (result.errCode === 'SUCCESS') {
|
||||
this.showQrcode = true
|
||||
this.billQRCode = result.billQRCode
|
||||
// this.$alert('', '请打开手机微信，扫一扫完成支付', {
|
||||
// confirmButtonText: '确定',
|
||||
// callback: action => {
|
||||
// this.$message({
|
||||
// type: 'success',
|
||||
// message: `已完成支付`
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
}
|
||||
})
|
||||
},
|
||||
dateFormat(fmt, date) {
|
||||
const opt = {
|
||||
"Y+": date.getFullYear().toString(), // 年
|
||||
"m+": (date.getMonth() + 1).toString(), // 月
|
||||
"d+": date.getDate().toString(), // 日
|
||||
"H+": date.getHours().toString(), // 时
|
||||
"M+": date.getMinutes().toString(), // 分
|
||||
"S+": date.getSeconds().toString() // 秒
|
||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||
};
|
||||
let ret
|
||||
for (let k in opt) {
|
||||
ret = new RegExp("(" + k + ")").exec(fmt)
|
||||
if (ret) {
|
||||
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
||||
};
|
||||
};
|
||||
return fmt
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.clearfix {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.grade-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
border: 1px solid #eee;
|
||||
|
||||
.item-box {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
border-right: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 230px;
|
||||
|
||||
.price {
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 2px solid #bf2b28 !important;
|
||||
|
||||
.item-box {
|
||||
.title {
|
||||
color: #bf2b28;
|
||||
}
|
||||
|
||||
.info {
|
||||
.price {
|
||||
color: #bf2b28;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-top: 20px solid transparent;
|
||||
border-right: 20px solid #bf2b28;
|
||||
border-left: 20px solid transparent;
|
||||
border-bottom: 20px solid #bf2b28;
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
.item {
|
||||
position: relative;
|
||||
border: 1px solid #eee;
|
||||
|
||||
.el-icon-check {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: #fff;
|
||||
.item-box {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
border-right: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 230px;
|
||||
|
||||
.price {
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 2px solid #bf2b28 !important;
|
||||
|
||||
.item-box {
|
||||
.title {
|
||||
color: #bf2b28;
|
||||
}
|
||||
|
||||
.info {
|
||||
.price {
|
||||
color: #bf2b28;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-top: 20px solid transparent;
|
||||
border-right: 20px solid #bf2b28;
|
||||
border-left: 20px solid transparent;
|
||||
border-bottom: 20px solid #bf2b28;
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
|
||||
.el-icon-check {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-card {
|
||||
margin-top: 20px;
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: #bf2b28;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-left: 5px solid #bf2b28;
|
||||
padding-left: 10px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.sub-desc{
|
||||
color: #808080;
|
||||
margin-bottom: 20px;
|
||||
text{
|
||||
color: #bf2b28;
|
||||
}
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-left: 5px solid #bf2b28;
|
||||
padding-left: 10px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.sub-desc {
|
||||
color: #808080;
|
||||
margin-bottom: 20px;
|
||||
|
||||
text {
|
||||
color: #bf2b28;
|
||||
}
|
||||
}
|
||||
|
||||
.bzj-readme {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.payment {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pay-price {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pay-desc {
|
||||
font-size: 16px;
|
||||
line-height: 2em;
|
||||
font-size: 16px;
|
||||
line-height: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="flex justify-center items-start main-wrap">
|
||||
<view class="flex-col flex-col justify-center items-center bg-white text-40 left-wrap pointer">
|
||||
<view class="flex justify-center items-center" :class="[activeIndex === 0 ? 'active' : '' ]"
|
||||
@click="changeActive(0)">
|
||||
<text class="ml-20">询价管理</text>
|
||||
</view>
|
||||
<view class="flex justify-center items-center" :class="[activeIndex === 1 ? 'active' : '' ]"
|
||||
@click="changeActive(1)">
|
||||
<text class="ml-20">订单管理</text>
|
||||
</view>
|
||||
<view class="flex justify-center items-center" :class="[activeIndex === 2 ? 'active' : '' ]"
|
||||
@click="changeActive(2)">
|
||||
<text class="ml-20">合同管理</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-1200 m-a bg-white p-40">
|
||||
<el-table :data="tableData" style="width: 100%" border stripe>
|
||||
<el-table-column prop="orderNo" label="订单号" width="200"/>
|
||||
<el-table-column label="订单类型">
|
||||
<template v-slot="{ row }">
|
||||
<span>{{ row.type === 0 ? '普通订单' : '金久信自营订单' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品列表" width="250">
|
||||
<template v-slot="{ row }">
|
||||
<view class="flex flex-col justify-start items-start">
|
||||
<view v-for="(item, index) in row.goods" :key="index" class="flex justify-start items-start">
|
||||
<image :src="item.goodsCover" class="goods-cover"/>
|
||||
<view class="ml-20 flex flex-col justify-start items-start">
|
||||
<text class="text-main font-bold">{{ item.goodsName }}</text>
|
||||
<text class="mt-20">x{{ item.num }}</text>
|
||||
</view>
|
||||
<text class="ml-20">小计: ￥{{ item.num * item.goodsPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="订单金额"/>
|
||||
<el-table-column prop="payAmount" label="支付金额"/>
|
||||
<el-table-column label="订单状态">
|
||||
<template v-slot="{ row }">
|
||||
<span v-if="row.orderStatus === 0">待支付</span>
|
||||
<span v-if="row.orderStatus === 1">已支付</span>
|
||||
<span v-if="row.orderStatus === 2">待收货</span>
|
||||
<span v-if="row.orderStatus === 3">已完成</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="_add_time_str" label="下单时间"/>
|
||||
</el-table>
|
||||
</view>
|
||||
</view>
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
<right-bar></right-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "order",
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
activeIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeActive(index) {
|
||||
this.list = []
|
||||
this.mode = 'list'
|
||||
if (index !== 2) this.activeIndex = index
|
||||
if (index === 0) {
|
||||
} else if (index === 1) this.getOrderList()
|
||||
else if (index === 2) {
|
||||
vk.navigateTo({
|
||||
url: '/pages/contract/index'
|
||||
})
|
||||
}
|
||||
},
|
||||
async getOrderList() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/order/kh/getList'
|
||||
})
|
||||
this.tableData = rows
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.tab) {
|
||||
this.changeActive(parseInt(options.tab))
|
||||
} else {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.main-wrap {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
|
||||
.left-wrap {
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
left: -300px;
|
||||
top: 0;
|
||||
|
||||
view {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #a92924;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-cover{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user