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.
314 lines
7.4 KiB
314 lines
7.4 KiB
<template> |
|
<view class="goodsManage-page"> |
|
<view class="nav acea-row row-around"> |
|
<view class="item" :class="{ on: type === 0 }" @click="changeType(0)"> |
|
<view>待付款</view> |
|
</view> |
|
<view class="item" :class="{ on: type == 1 }" @click="changeType(1)"> |
|
<view>待发货</view> |
|
</view> |
|
<view class="item" :class="{ on: type == 2 }" @click="changeType(2)"> |
|
<view>已发货</view> |
|
</view> |
|
<view class="item" :class="{ on: type == 3 }" @click="changeType(3)"> |
|
<view>已完成</view> |
|
</view> |
|
<view class="item" :class="{ on: type == 4 }" @click="changeType(4)"> |
|
<view>退款&售后</view> |
|
</view> |
|
</view> |
|
<view class="goods-list-box"> |
|
<view class="no-order" v-if="orderList.length == 0"><image src="https://download.cyjyyjy.com/no-order2.png"></image></view> |
|
<view class="goods-item" v-else v-for="item in orderList" :key="item"> |
|
<view class="order-info acea-row row-between-wrapper"> |
|
<view class="info-left acea-row"> |
|
<view class="tips"> |
|
<text v-if="type == 0">待付款</text> |
|
<text v-if="type == 1">待发货</text> |
|
<text v-if="type == 2">已发货</text> |
|
<text v-if="type == 3">已完成</text> |
|
<text v-if="type == 4">退款中</text> |
|
</view> |
|
<view class="order-num">{{item.orderId}}</view> |
|
</view> |
|
<view class="create-time">{{item.createTime}}</view> |
|
</view> |
|
<view class="item-top acea-row" v-for="(cart,cartInfoIndex) in item.cartInfo"> |
|
<image class="goods-img" :src="cart.productInfo.image" mode="aspectFill"></image> |
|
<view class="info-box"> |
|
<view class="title acea-row row-between-wrapper"> |
|
<view class="line1 goods-name">{{ cart.productInfo.storeName }}</view> |
|
</view> |
|
<!-- <view class="colG">编码：1233</view> --> |
|
<view class="money">￥{{cart.productInfo.attrInfo.price}}</view> |
|
<view class="price-box acea-row row-between-wrapper"> |
|
<view class="colG">{{cart.productInfo.attrInfo.sku}}</view> |
|
<view class="colG">X{{ cart.cartNum }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="total-price-box acea-row row-right row-middle"> |
|
<view class="colG">共{{item.cartInfo.length}}件(含快递费)</view> |
|
<view class="total-price">￥{{item.payPrice}}</view> |
|
</view> |
|
<!-- <view class="logistics-box" v-if="type == 2 || type == 3"> |
|
<view class="name-box"> |
|
<view class="label">收件人:</view> |
|
<view>张三</view> |
|
</view> |
|
<view class="name-box"> |
|
<view class="label">收件电话:</view> |
|
<view>13688089909</view> |
|
</view> |
|
<view class="name-box"> |
|
<view class="label">收件地址:</view> |
|
<view>武汉市 洪山区 卓刀泉南路南湖小区8栋1502号</view> |
|
</view> |
|
</view> --> |
|
<view class="btn-box acea-row row-right"> |
|
<view class="close-btn" v-if="type == 0">关闭订单</view> |
|
<view class="tip-btn" v-if="type == 0">提醒付款</view> |
|
<view class="tip-btn" v-if="type == 1" @click="toSendGoods(item)">发货</view> |
|
<view class="tip-btn" v-if="type == 2" @click="toLogisics(item)">查看物流</view> |
|
<view class="close-btn" v-if="type == 4">联系客服</view> |
|
<view class="tip-btn" v-if="type == 4">同意退款</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getOrderData, getOrderList } from '@/api/order' |
|
export default{ |
|
data(){ |
|
return { |
|
type: 0, |
|
orderList: [], |
|
page: 1, |
|
limit: 20, |
|
loading: true, |
|
orderType: 'SELL' |
|
} |
|
}, |
|
onShow() { |
|
console.log(this.$yroute.query.type) |
|
if(this.$yroute.query.type) { |
|
this.type = this.$yroute.query.type |
|
} |
|
this.getOrderList() |
|
}, |
|
|
|
onReachBottom() { |
|
this.getOrderList() |
|
}, |
|
onPullDownRefresh() { |
|
this.goodsList = [] |
|
this.page = 1 |
|
this.loading = true |
|
this.getOrderList() |
|
}, |
|
methods:{ |
|
getOrderList() { |
|
if (!this.loading) return |
|
const { page, limit, type } = this |
|
getOrderList({ |
|
page, |
|
limit, |
|
type, |
|
orderType: this.orderType |
|
}).then(res => { |
|
if(this.page > 1) { |
|
this.orderList = this.orderList.concat(res.data) |
|
} else{ |
|
this.orderList = res.data |
|
} |
|
this.loading = res.data.length >= this.limit |
|
uni.stopPullDownRefresh() |
|
}) |
|
}, |
|
changeType(idx){ |
|
this.type = idx |
|
this.goodsList = [] |
|
this.page = 1 |
|
this.loading = true |
|
this.getOrderList() |
|
}, |
|
//发货 |
|
toSendGoods(item){ |
|
this.$yrouter.push({ |
|
path: '/pages/user/sendGoods/index', |
|
query:{ |
|
orderId: item.orderId |
|
} |
|
}) |
|
}, |
|
//查看物流 |
|
toLogisics(item){ |
|
this.$yrouter.push({ |
|
path: '/pages/order/Logistics/index', |
|
query:{ |
|
id: item.orderId |
|
} |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
.goodsManage-page{ |
|
width: 100%; |
|
min-height: 100vh; |
|
background: #EEEEEE; |
|
} |
|
.nav{ |
|
width: 100%; |
|
background-color: #fff; |
|
// padding: 12rpx 0; |
|
color: #707070; |
|
font-size: 28rpx; |
|
padding-top: 12rpx; |
|
position: fixed; |
|
top: 0; |
|
.item{ |
|
padding-bottom: 12rpx; |
|
} |
|
.on{ |
|
font-weight: 500; |
|
color: #000; |
|
border-bottom: 6rpx solid #000; |
|
} |
|
} |
|
.no-order{ |
|
padding: 90rpx 0; |
|
width: 100%; |
|
text-align: center; |
|
image{ |
|
width: 422rpx; |
|
height: 508rpx; |
|
} |
|
} |
|
.goods-list-box{ |
|
width: 100%; |
|
padding: 90rpx 40rpx 32rpx; |
|
.goods-item{ |
|
width: 100%; |
|
padding: 32rpx 22rpx 16rpx; |
|
border-radius: 12rpx; |
|
background: #fff; |
|
font-size: 28rpx; |
|
margin-bottom: 32rpx; |
|
.goods-img{ |
|
width: 116rpx; |
|
height: 116rpx; |
|
border-radius: 12rpx; |
|
margin-right: 24rpx; |
|
} |
|
.order-info{ |
|
font-size: 24rpx; |
|
color: #CECECE; |
|
margin-bottom: 30rpx; |
|
.tips{ |
|
min-width: 60rpx; |
|
height: 30rpx; |
|
padding: 0 4rpx; |
|
background: #FFA47E; |
|
text-align: center; |
|
line-height: 30rpx; |
|
border-radius: 4rpx; |
|
color: #fff; |
|
font-size: 20rpx; |
|
margin-right: 12rpx; |
|
} |
|
.create-time{ |
|
color: #000; |
|
} |
|
} |
|
.item-top{ |
|
margin-bottom: 22rpx; |
|
border-bottom: 2rpx solid #ECECEC; |
|
padding-bottom: 24rpx; |
|
} |
|
.info-box{ |
|
width: calc(100% - 140rpx); |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
|
|
} |
|
.title{ |
|
line-height: 40rpx; |
|
color: #333333; |
|
.goods-name{ |
|
width: 80%; |
|
} |
|
} |
|
.colG{ |
|
font-size: 22rpx; |
|
color: #b7b7b7; |
|
} |
|
.money{ |
|
color: #000; |
|
font-weight: 500; |
|
line-height: 40rpx; |
|
} |
|
.total-price-box{ |
|
width: 100%; |
|
.total-price{ |
|
color: #000; |
|
font-size: 32rpx; |
|
font-weight: 500; |
|
margin-left: 40rpx; |
|
} |
|
} |
|
.btn-box{ |
|
border-top: 2rpx solid #ECECEC; |
|
width: 100%; |
|
padding: 16rpx 0 0; |
|
margin-top: 28rpx; |
|
font-size: 28rpx; |
|
image{ |
|
width: 28rpx; |
|
height: 28rpx; |
|
margin-right: 6rpx; |
|
} |
|
view{ |
|
width: 168rpx; |
|
height: 68rpx; |
|
border: 2rpx solid #D2D2D2; |
|
border-radius: 38rpx; |
|
text-align: center; |
|
line-height: 68rpx; |
|
color: #000; |
|
margin-left: 20rpx; |
|
} |
|
.close-btn{ |
|
color: #000000; |
|
border-color: #D2D2D2; |
|
} |
|
.tip-btn{ |
|
color: #000; |
|
border-color: #000; |
|
} |
|
} |
|
.logistics-box{ |
|
width: 100%; |
|
background: #F5F5F5; |
|
padding: 20rpx; |
|
color: #1d1d1d; |
|
border-radius: 8px; |
|
margin-top: 22rpx; |
|
.name-box{ |
|
width: 100%; |
|
display: flex; |
|
margin-bottom: 12rpx; |
|
.label{ |
|
min-width: 140rpx; |
|
color: #BFBFBF; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|