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.
323 lines
8.2 KiB
323 lines
8.2 KiB
3 years ago
|
<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>
|