You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
8.2 KiB
322 lines
8.2 KiB
<template> |
|
<view class="zhuangtai"> |
|
<view @click="genggai(1)"> |
|
<!-- <image :src='state==1?"../../static/quanbu.png":"../../static/quanbuw.png"'></image> --> |
|
<view :style="state==1?'color: #ffffff;':''">全部</view> |
|
<view :style="state==1?'background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);':''"></view> |
|
</view> |
|
<view @click="genggai(2)"> |
|
<!-- <image :src='state==2?"../../static/dzf.png":"../../static/dzfw.png"'></image> --> |
|
<view :style="state==2?'color: #ffffff;':''">待支付</view> |
|
<view :style="state==2?'background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);':''"></view> |
|
</view> |
|
<view @click="genggai(3)"> |
|
<!-- <image :src='state==3?"../../static/yzf.png":"../../static/yzfw.png"'></image> --> |
|
<view :style="state==3?'color: #ffffff;':''">已完成</view> |
|
<view :style="state==3?'background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);':''"></view> |
|
</view> |
|
<view @click="genggai(4)"> |
|
<!-- <image :src='state==4?"../../static/yqx.png":"../../static/yqxw.png"'></image> --> |
|
<view :style="state==4?'color: #ffffff;':''">已取消</view> |
|
<view :style="state==4?'background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);':''"></view> |
|
</view> |
|
</view> |
|
<scroll-view class="scv" scroll-y="true" @scrolltoupper='shuaxing' @scrolltolower='jiazai' > |
|
<view class="order_content"> |
|
<view @click="godetalis(item)" v-if="orderlist.length>0" v-for="(item,index) in orderlist"> |
|
<view> |
|
<view> |
|
<view>订单号 {{item.orderNumber}}</view> |
|
</view> |
|
<view v-if="item.orderState==2||item.orderState==6" style="color:#0CE4BE ;" >{{item.orderState==2?'已付款':item.orderState==6?'已完成':''}}</view> |
|
<view v-if="item.orderState==4||item.orderState==5||item.orderState==7" style="color:#8D8C9F ;" >{{item.orderState==4?'退款中':item.orderState==5?'已取消':item.orderState==7?'已关闭':''}}</view> |
|
<view v-if="item.orderState==3" style="color:#FFA337 ;" >发放中</view> |
|
<view v-if="item.orderState==1" style="color:#ff0000 ;" >待付款</view> |
|
</view> |
|
<view> |
|
<image :src="item.surfacePlot"></image> |
|
<view> |
|
<view>{{item.collectionName}}</view> |
|
<!-- <view v-if="item.orderState==7">{{'下单时间:'+item.createdTime}}</view> |
|
<view v-if="item.orderState==1&&item.expirationTime">{{'关闭时间:'+item.expirationTime}}</view> |
|
<view v-if="item.orderState==1&&!item.expirationTime">{{'下单时间:'+item.createdTime}}</view> --> |
|
<view> |
|
<view> |
|
<image :src="item.writerAvatar"></image> |
|
<view>{{item.artistName}}</view> |
|
</view> |
|
<view>X {{item.numberDeals}}</view> |
|
</view> |
|
<!-- <view>{{item.expirationTime?'关闭时间'+item.expirationTime:}}</view> --> |
|
<view> |
|
<view>{{item.createdTime}}</view> |
|
<view>￥{{item.price}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view v-if="item.orderState==1" class="buttons"> |
|
<view @click.stop="quxiao(item)">取消订单</view> |
|
<view @click.stop="zhifu(item)">立即付款</view> |
|
</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</template> |
|
|
|
<script> |
|
import {criticismorder,paypayreload,paypayResult} from '@/api/user.js' |
|
import {ref} from 'vue' |
|
export default { |
|
setup() { |
|
let state=ref(1) |
|
let orderlist=ref([]) |
|
let pageNum=1 |
|
let pageSize=10; |
|
function genggai(val){ |
|
state.value=val |
|
dindan() |
|
} |
|
function dindan(){ |
|
criticismorder({type:state.value,pageNum,pageSize}).then(res=>{ |
|
console.log(res); |
|
orderlist.value=res.rows |
|
orderlist.value.map(item=>{ |
|
item.price=item.price.split('.')[0]+'.'+item.price.split('.')[1].substring(0,2) |
|
}) |
|
}) |
|
} |
|
dindan() |
|
function godetalis(item){ |
|
uni.navigateTo({ |
|
url:'../orderdetails/orderdetails?id='+item.id |
|
}) |
|
} |
|
function jiazai(){ |
|
pageNum++ |
|
criticismorder({type:state.value,pageNum,pageSize}).then(res=>{ |
|
console.log(res); |
|
res.rows.map(item=>{ |
|
item.price=item.price.split('.')[0]+'.'+item.price.split('.')[1].substring(0,2) |
|
orderlist.value.push(item) |
|
}) |
|
}) |
|
} |
|
function shuaxing(){ |
|
pageNum=1 |
|
dindan() |
|
} |
|
function zhifu(item){ |
|
paypayreload({id:item.id}).then(res=>{ |
|
console.log(res); |
|
if(res.msg=='该订单已经过期'){ |
|
dindan() |
|
return |
|
} |
|
uni.navigateTo({ |
|
url:'../payorder/payorder?id='+res.msg |
|
}) |
|
}) |
|
} |
|
function quxiao(item){ |
|
uni.showModal({ |
|
title: '提示', |
|
content: '确认取消订单？', |
|
success: function (res) { |
|
if (res.confirm) { |
|
paypayResult({id:item.id,orderStatus:5}).then(res=>{ |
|
console.log(res); |
|
if(res.code==200){ |
|
shuaxing() |
|
} |
|
}) |
|
} else if (res.cancel) { |
|
console.log('用户点击取消'); |
|
} |
|
} |
|
}); |
|
|
|
} |
|
return { |
|
state, |
|
genggai, |
|
godetalis, |
|
orderlist, |
|
jiazai, |
|
shuaxing, |
|
quxiao, |
|
zhifu |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.scv{ |
|
height: 81vh; |
|
} |
|
.order_content{ |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
// margin-top: 30upx; |
|
padding: 32upx; |
|
box-sizing: border-box; |
|
>view{ |
|
width: 686upx; |
|
// height: 348upx; |
|
background: #23262F; |
|
border-radius: 12upx; |
|
opacity: 1; |
|
display: flex; |
|
flex-direction: column; |
|
margin-bottom: 24upx; |
|
.buttons{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-end; |
|
padding: 30upx; |
|
box-sizing: border-box; |
|
>view:nth-of-type(1){ |
|
width: 188upx; |
|
height: 64upx; |
|
border-radius: 58upx; |
|
opacity: 1; |
|
border: 1upx solid #8D8C9F; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #8D8C9F; |
|
font-size: 28upx; |
|
font-weight: 500; |
|
margin-right: 30upx; |
|
} |
|
>view:nth-of-type(2){ |
|
width: 188upx; |
|
height: 64upx; |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%); |
|
border-radius: 58upx; |
|
opacity: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #FFFFFF; |
|
font-size: 28upx; |
|
font-weight: 500; |
|
} |
|
} |
|
>view:nth-of-type(1){ |
|
padding:28upx 28upx; |
|
box-sizing: border-box; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
border-bottom:1upx solid #373737; |
|
>view{ |
|
display: flex; |
|
font-size: 28upx; |
|
font-weight: 400; |
|
align-items: center; |
|
>view{ |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
} |
|
} |
|
} |
|
>view:nth-of-type(2){ |
|
display: flex; |
|
padding: 36upx 28upx; |
|
flex: 1; |
|
width: 100%; |
|
box-sizing: border-box; |
|
>image{ |
|
width: 190upx; |
|
height: 203upx; |
|
border-radius: 26upx; |
|
margin-right: 28upx; |
|
} |
|
>view{ |
|
display: flex; |
|
flex-direction: column; |
|
box-sizing: border-box; |
|
>view:nth-of-type(1){ |
|
font-size: 32upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
} |
|
>view:nth-of-type(2){ |
|
flex: 1; |
|
width: 400upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
>view:nth-of-type(1){ |
|
display: flex; |
|
align-items: center; |
|
>image{ |
|
width: 56upx; |
|
height: 56upx; |
|
border-radius: 50%; |
|
margin-right: 18upx; |
|
} |
|
>view{ |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #8D8C9F; |
|
} |
|
} |
|
>view:nth-of-type(2){ |
|
font-size: 24upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
} |
|
} |
|
>view:nth-of-type(3){ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
>view:nth-of-type(1){ |
|
font-size: 24upx; |
|
font-weight: bold; |
|
color: #8D8C9F; |
|
} |
|
>view:nth-of-type(2){ |
|
font-size: 32upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.zhuangtai{ |
|
width: 686upx; |
|
display: flex; |
|
justify-content: space-between; |
|
margin: auto; |
|
padding-top: 60upx; |
|
position: sticky; |
|
top: 84upx; |
|
left: 0; |
|
background-color: #141417; |
|
z-index: 10; |
|
padding-bottom: 40upx; |
|
>view{ |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
>view:nth-of-type(1){ |
|
font-size: 32upx; |
|
font-weight: 500; |
|
color: #8D8C9F; |
|
margin-bottom: 10upx; |
|
} |
|
>view:nth-of-type(2){ |
|
width: 34upx; |
|
height: 6upx; |
|
border-radius: 12upx; |
|
} |
|
} |
|
} |
|
</style>
|
|
|