387 lines
9.9 KiB
Vue
387 lines
9.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<VNavigationBar titleColor="rgba(0,0,0,0.9)" leftTitle="true" backgroundColor="transparent" title="我的订单">
|
|||
|
|
</VNavigationBar>
|
|||
|
|
<view class="body">
|
|||
|
|
<view class="tabList">
|
|||
|
|
<view @click="changeTabFun(item.id)" v-for="(item, index) in tabList" :key="index" class="tabItem"
|
|||
|
|
:class="{actived: item.id === activeKey}">
|
|||
|
|
{{ item.title }}
|
|||
|
|
<view v-if="activeKey === item.id" class="activeLine"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="orderList">
|
|||
|
|
<view v-for="(item, index) in orderList" :key="index" class="orderItem">
|
|||
|
|
<view class="line1">
|
|||
|
|
<view class="orderNo">
|
|||
|
|
订单编号：{{ item.orderNo }}
|
|||
|
|
</view>
|
|||
|
|
<text class="orderStatus" :class="['status_' + item.status]">
|
|||
|
|
{{ getStatus(item.orderStatus) }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="orderInfo">
|
|||
|
|
<image class="orderInfoIcon" src="@/static/icons/Frame28.png" mode="aspectFit"></image>
|
|||
|
|
<text class="orderInfoText">{{ item.goodsTitle }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="orderInfo">
|
|||
|
|
<image class="orderInfoIcon" src="@/static/icons/Frame27.png" mode="aspectFit"></image>
|
|||
|
|
<text class="orderInfoText">{{ item.tenantName | 蓝安-中鑫之宝 }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="line2">
|
|||
|
|
<view>
|
|||
|
|
共计
|
|||
|
|
<text class="orderAmountUnit">￥</text>
|
|||
|
|
<text class="orderAmount">{{ item.payMoney }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text>{{ formatTimestamp(item.createTime) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="line3">
|
|||
|
|
<view v-if="item.orderStatus == '0'" @click="goPay(item)" class="showOrder">支付</view>
|
|||
|
|
<view v-if="item.goodsType == '2'" @click="gotoDetail(item)" class="showOrder">查看订单</view>
|
|||
|
|
<view @click="gotoEvaluate(item)" class="evaluate" v-if="item.goodsType == '2' && item.orderStatus === '1' && !item.commentDesc">评价订单</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" @change="popupChange">
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
style="position: relative;padding: 30rpx;border-radius:20rpx;width: 600rpx;background-color: #fff;display: flex;align-items: center;row-gap: 10rpx;flex-direction: column;">
|
|||
|
|
<canvas style="width:200px; height: 200px;"
|
|||
|
|
canvas-id="myQrcode"></canvas>
|
|||
|
|
<img id="dl-pay-img" style="width: 200px; height: 200px;position: absolute;top: 30rpx;" :key="imageUrl"
|
|||
|
|
:src="imageUrl"/>
|
|||
|
|
<view class="popup-title">长按识别图中二维码支付</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
<tabBarVue msg="2"></tabBarVue>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '../../utils/request';
|
|||
|
|
import VNavigationBar from '@/components/VNavigationBar.vue'
|
|||
|
|
import tabBarVue from '@/components/tabBar/tabBar.vue'
|
|||
|
|
import drawQrcode from 'weapp-qrcode';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
tabBarVue,
|
|||
|
|
VNavigationBar
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
payShow: false,
|
|||
|
|
activeKey: 0,
|
|||
|
|
pageNum: 1,
|
|||
|
|
totalPages: 0,
|
|||
|
|
imageUrl: '',
|
|||
|
|
tabList: [{
|
|||
|
|
id: 0,
|
|||
|
|
title: '全部订单'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '维修中'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
title: '待评价'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
orderList: [],
|
|||
|
|
changeActive: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.orderList = []
|
|||
|
|
this.getList()
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (this.pageNum >= this.totalPages) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '没有下一页数据',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.pageNum++
|
|||
|
|
this.getList()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
formatTimestamp(timestamp) {
|
|||
|
|
// 将时间戳转换为Date对象
|
|||
|
|
const date = new Date(timestamp);
|
|||
|
|
// 获取年月日时分秒
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|||
|
|
const day = date.getDate().toString().padStart(2, '0');
|
|||
|
|
const hours = date.getHours().toString().padStart(2, '0');
|
|||
|
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
|||
|
|
const seconds = date.getSeconds().toString().padStart(2, '0');
|
|||
|
|
// 组合成日期时间字符串
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|||
|
|
},
|
|||
|
|
async getList() {
|
|||
|
|
let data = {
|
|||
|
|
pageSize: 20,
|
|||
|
|
pageNo: this.pageNum
|
|||
|
|
}
|
|||
|
|
switch (this.activeKey) {
|
|||
|
|
case 0:
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
data.status = "06"
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
data.status = '00'
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
if (this.changeActive){
|
|||
|
|
this.orderList = []
|
|||
|
|
}
|
|||
|
|
this.changeActive = false
|
|||
|
|
await request({
|
|||
|
|
url: '/userClient/order/page',
|
|||
|
|
method: 'get',
|
|||
|
|
params: data
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
this.orderList = this.orderList.concat(res.rows)
|
|||
|
|
let total = res.total
|
|||
|
|
this.totalPages = Math.ceil(total / this.pageSize);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
changeTabFun(id) {
|
|||
|
|
this.activeKey = id
|
|||
|
|
this.changeActive = true
|
|||
|
|
this.getList()
|
|||
|
|
},
|
|||
|
|
getStatus(status) {
|
|||
|
|
switch (status) {
|
|||
|
|
case '0':
|
|||
|
|
return '待支付'
|
|||
|
|
case '1':
|
|||
|
|
return '已支付'
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async goPay(data) {
|
|||
|
|
let that = this
|
|||
|
|
await request({
|
|||
|
|
url: '/userClient/pay/toPay',
|
|||
|
|
method: 'get',
|
|||
|
|
params: {orderId: data.id}
|
|||
|
|
}).then((ress) => {
|
|||
|
|
|
|||
|
|
wx.requestPayment({
|
|||
|
|
timeStamp: ress.data.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
|
|||
|
|
nonceStr: ress.data.nonceStr, // 随机字符串，长度为32个字符以下。
|
|||
|
|
package: ress.data.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
|
|||
|
|
signType: ress.data.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
|
|||
|
|
paySign: ress.data.paySign, // 签名，详见签名生成算法
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log('成功',res);
|
|||
|
|
if( res.errMsg = 'requestPayment:ok'){
|
|||
|
|
uni.showToast({
|
|||
|
|
title:'支付成功'
|
|||
|
|
})
|
|||
|
|
this.getList()
|
|||
|
|
}
|
|||
|
|
// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
convertToImage() {
|
|||
|
|
|
|||
|
|
uni.canvasToTempFilePath({
|
|||
|
|
|
|||
|
|
canvasId: 'myQrcode',
|
|||
|
|
success: function (res) {
|
|||
|
|
// 在H5平台下，tempFilePath 为 base64
|
|||
|
|
// this.imageUrl = res.tempFilePath.replace(/[\r\n]/g, "")
|
|||
|
|
document.getElementById("dl-pay-img").setAttribute("src", res.tempFilePath.replace(/[\r\n]/g, ""))
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
console.log(this.imageUrl, 200);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
popupChange({show}) {
|
|||
|
|
if (show) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
gotoDetail(row) {
|
|||
|
|
if (row.goodsType === '2'){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages-order/orderDetail/orderDetail?ticketsId=' + row.goodsId
|
|||
|
|
})
|
|||
|
|
}else {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages-order/orderDetail/orderDetail'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
gotoEvaluate(row) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages-order/orderDetail/evaluate?info=' + encodeURIComponent(JSON.stringify(row))
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.container {
|
|||
|
|
height: 100%;
|
|||
|
|
background: #F3F5F7;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
color: #333333;
|
|||
|
|
|
|||
|
|
.body {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 0;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabList {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
|
|||
|
|
.tabItem {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
position: relative;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
|
|||
|
|
&.actived {
|
|||
|
|
color: #0174F6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.activeLine {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 96rpx;
|
|||
|
|
height: 6rpx;
|
|||
|
|
background: #0174F6;
|
|||
|
|
border-radius: 4rpx 4rpx 0rpx 0rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.orderList {
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
row-gap: 20rpx;
|
|||
|
|
|
|||
|
|
.orderItem {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line1 {
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
|
|||
|
|
.orderNo {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 0;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #858BA0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status_1 {
|
|||
|
|
color: #0174F6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status_2 {
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.orderInfo {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
column-gap: 10rpx;
|
|||
|
|
|
|||
|
|
.orderInfoIcon {
|
|||
|
|
width: 28rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.orderInfoText {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line2 {
|
|||
|
|
margin: 30rpx 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #858BA0;
|
|||
|
|
|
|||
|
|
.orderAmountUnit {
|
|||
|
|
color: #F92C2C;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.orderAmount {
|
|||
|
|
color: #F92C2C;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line3 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
|
|||
|
|
.showOrder, .evaluate {
|
|||
|
|
width: 172rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|||
|
|
border: 2rpx solid #0174F6;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #0174F6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.evaluate {
|
|||
|
|
border: 1rpx solid #EEEEEE;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|