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.
315 lines
7.4 KiB
315 lines
7.4 KiB
3 years ago
|
<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 #FF6D31;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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: #FF6D31;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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: #FF6D31;
|
||
|
|
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: #FF6D31;
|
||
|
|
border-color: #FF6D31;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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>
|