322 lines
7.2 KiB
Vue
322 lines
7.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" >评价订单</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" @change="popupChange">
|
|
<view style="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; z-index: 9999999;margin: 40px auto;"
|
|
canvas-id="myQrcode"></canvas>
|
|
<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,
|
|
tabList: [{
|
|
id: 0,
|
|
title: '全部订单'
|
|
},
|
|
{
|
|
id: 1,
|
|
title: '维修中'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '待评价'
|
|
},
|
|
],
|
|
orderList: [
|
|
]
|
|
}
|
|
},
|
|
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
|
|
}
|
|
await request({
|
|
url: '/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
|
|
},
|
|
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
|
|
})
|
|
}, 60)
|
|
|
|
})
|
|
},
|
|
popupChange({show}) {
|
|
if (show) {
|
|
|
|
}
|
|
},
|
|
gotoDetail() {
|
|
uni.navigateTo({
|
|
url: '/pages/orderDetail/orderDetail'
|
|
})
|
|
},
|
|
gotoEvaluate() {
|
|
uni.navigateTo({
|
|
url: '/pages/orderDetail/evaluate'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.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> |