381 lines
9.2 KiB
Vue
381 lines
9.2 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="" mode="aspectFit"></image>
|
||
<text class="orderInfoText">{{ item.goodsTitle }}</text>
|
||
</view>
|
||
<view class="orderInfo">
|
||
<image class="orderInfoIcon" src="" 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 @click="goPay(item)" class="showOrder">支付</view>
|
||
<view @click="gotoDetail(item)" class="showOrder">查看订单</view>
|
||
<view @click="gotoEvaluate(item)" class="evaluate" v-if="item.payTime && !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: '/pay/toPay',
|
||
method: 'get',
|
||
params: {orderId: data.id}
|
||
}).then((res) => {
|
||
|
||
this.$refs.popup.open()
|
||
setTimeout(() => {
|
||
|
||
drawQrcode({
|
||
width: 200,
|
||
height: 200,
|
||
canvasId: 'myQrcode',
|
||
text: res.data.code_url
|
||
})
|
||
that.convertToImage()
|
||
}, 60)
|
||
})
|
||
},
|
||
|
||
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/orderDetail/orderDetail?ticketsId=' + row.goodsId
|
||
})
|
||
}else {
|
||
uni.navigateTo({
|
||
url: '/pages/orderDetail/orderDetail'
|
||
})
|
||
}
|
||
},
|
||
gotoEvaluate(row) {
|
||
uni.navigateTo({
|
||
url: '/pages/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;
|
||
background: #ddd;
|
||
}
|
||
|
||
.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>
|