464 lines
12 KiB
Vue
464 lines
12 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">
|
||
<scroll-view style="height: 100%;" scroll-y="true" class="itemContent" @scrolltolower="onReachBottomCus"
|
||
refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
|
||
<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.orderStatus]">
|
||
{{ getStatus(item.orderStatus,item.mainStatus,item.payType) }}
|
||
</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 v-if="item.payMoney">
|
||
共计
|
||
<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' && item.payType == '01'" @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.orderStatus === '1' && !item.commentDesc">评价订单</view>
|
||
</view>
|
||
</view>
|
||
<view class="no-data" v-if="orderList.length==0">
|
||
<image class="" src="@/static/images/nothing.png" ></image>
|
||
</view>
|
||
</scroll-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';
|
||
import {getToken,getUserInfo} from '@/utils/auth'
|
||
|
||
export default {
|
||
components: {
|
||
tabBarVue,
|
||
VNavigationBar
|
||
},
|
||
data() {
|
||
return {
|
||
payShow: false,
|
||
activeKey: 0,
|
||
imageUrl: '',
|
||
tabList: [
|
||
{
|
||
id: 0,
|
||
title: '维修中'
|
||
},
|
||
{
|
||
id: 1,
|
||
title: '待支付'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '待评价'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '全部订单'
|
||
},
|
||
],
|
||
orderList: [],
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
//下来刷新状态
|
||
isTriggered:false,
|
||
changeActive: false
|
||
}
|
||
},
|
||
onLoad() {
|
||
if(!getToken()){
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
})
|
||
}else {
|
||
this.orderList = []
|
||
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}`;
|
||
},
|
||
/**
|
||
* 上滑加载数据
|
||
*/
|
||
onReachBottomCus() {
|
||
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
||
if (this.pageNo * this.pageSize >= this.total) {
|
||
uni.$u.toast('没有更多数据了')
|
||
return
|
||
}
|
||
//页码+1,调用获取数据的方法获取第二页数据
|
||
this.pageNo++
|
||
//此处调用自己获取数据列表的方法
|
||
this.getList()
|
||
},
|
||
/**
|
||
* 下拉刷新数据
|
||
*/
|
||
onRefresherrefresh(){
|
||
this.isTriggered = true
|
||
this.pageNo = 1
|
||
this.total = 0
|
||
this.messageList = []
|
||
this.getList()
|
||
},
|
||
async getList() {
|
||
let data = {
|
||
pageSize: this.pageSize,
|
||
pageNo: this.pageNo
|
||
}
|
||
switch (this.activeKey) {
|
||
case 0:
|
||
//维修中
|
||
data.selectType = "working"
|
||
break;
|
||
case 1:
|
||
//待支付
|
||
data.selectType = "waitingPay"
|
||
break;
|
||
case 2:
|
||
//待评价
|
||
data.selectType = 'waitingComment'
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
if (this.changeActive){
|
||
this.orderList = []
|
||
}
|
||
this.changeActive = false
|
||
await request({
|
||
url: '/app-api/repair/order-info/page',
|
||
method: 'get',
|
||
params: data,
|
||
tenantIdFlag:false
|
||
}).then((res) => {
|
||
if (res.code === 200) {
|
||
//判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
|
||
if (this.pageNo != 1) {
|
||
this.orderList = this.orderList.concat(res.data.records)
|
||
} else {
|
||
this.orderList = res.data.records
|
||
}
|
||
//将获取的总条数赋值
|
||
this.total = res.data.total
|
||
this.isTriggered = false
|
||
}
|
||
})
|
||
},
|
||
changeTabFun(id) {
|
||
this.activeKey = id
|
||
this.changeActive = true
|
||
this.pageNo = 1
|
||
this.total = 0
|
||
this.getList()
|
||
},
|
||
/**
|
||
* 获取工单的状态
|
||
* @param orderStatus 订单是否支付 0未支付 1已支付
|
||
* @param mainStatus 工单主状态
|
||
* @param payType 支付方式
|
||
* @returns {string}
|
||
*/
|
||
getStatus(orderStatus,mainStatus,payType) {
|
||
let str = "";
|
||
if("0"==orderStatus){
|
||
//未支付的情况下，返回工单的状态
|
||
if("04"==mainStatus){
|
||
//待派工
|
||
str = "待派工"
|
||
}else if("05"==mainStatus){
|
||
//维修中
|
||
str = "维修中"
|
||
}else if("01"==mainStatus){
|
||
//待结算
|
||
if(!payType){
|
||
str = "待结算"
|
||
}else{
|
||
str = "待支付"
|
||
}
|
||
}else if("06"==mainStatus){
|
||
//挂单/记账
|
||
str = "挂单/记账"
|
||
}else if("02"==mainStatus){
|
||
//已结账
|
||
str = "已结账"
|
||
}else if("03"==mainStatus){
|
||
//已作废
|
||
str = "已作废"
|
||
}
|
||
}else{
|
||
//已支付
|
||
str = "已支付"
|
||
}
|
||
return str;
|
||
},
|
||
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
|
||
})
|
||
}
|
||
},
|
||
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: 100%;
|
||
padding: 0 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;
|
||
height: calc(100% - 65px);
|
||
|
||
.orderItem {
|
||
margin-bottom:10rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.no-data{
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|