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.
769 lines
16 KiB
769 lines
16 KiB
<template>
|
|
<view>
|
|
<view class="head-info">
|
|
<!-- 搜索 -->
|
|
<view class="searchContent">
|
|
<u-search height="50" @search="getListAfter" @custom="getListAfter" placeholder="输入订单编号"
|
|
v-model="keyword"></u-search>
|
|
<!-- <u-input v-model="keyword" placeholder="输入订单编号/收件人名字/电话商品名称"/> -->
|
|
<!-- <u-icon name="search" class="search"></u-icon> -->
|
|
<!-- <view class="filter" @click="getFilterHandle">
|
|
<image src=":src="$picUrl+'/static/news3/filter.png" mode="widthFix"></image>
|
|
<text>筛选</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<!-- 分类列表 -->
|
|
<view class="container">
|
|
<view class="classify-list">
|
|
<view class="list" v-for="(item,index) in classList" :class="{'action':classifyShow==item.id}"
|
|
@click="onClassify(item,index)" :key="index">
|
|
<text>{{item.name}}</text>
|
|
<text class="line" v-show="classifyShow==item.id"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shopContent">
|
|
<view class="shopItem" v-for="(item,index) in goodsList" :key="index" v-if="goodsList.length>0">
|
|
<view class="orderInfo">
|
|
<text>订单号：{{item.order_no}}</text>
|
|
<text class="statusText">{{item.state_text}}</text>
|
|
</view>
|
|
<view class="shopItemInfo" v-for="(p,i) in item.goods" :key="i">
|
|
<image :src="p.goods_image"></image>
|
|
<view class="priceCon">
|
|
<text class="num">x{{p.total_num}}</text>
|
|
<view class="priceText">
|
|
<text style="font-size: 26upx;">¥</text>
|
|
<text>{{p.total_price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="totalNum">
|
|
<text>含运费¥{{item.third_money}}</text>
|
|
<text>共计：</text>
|
|
<text>¥{{item.order_price}}</text>
|
|
</view>
|
|
<view class="remark">
|
|
<view class="remarkTitle">
|
|
收件人姓名： {{item.address_name}}
|
|
</view>
|
|
<view class="remarkContent">
|
|
{{item.remark}}
|
|
</view>
|
|
</view>
|
|
<view class="btnGroup">
|
|
<view class="btn info" v-show="item.state_text=='待发货'||item.state_text=='待付款'">修改地址</view>
|
|
<view class="btn primary" v-show="item.state_text=='待发货'||item.state_text=='待付款'"
|
|
@click="goJump('/pages/news3/updatePrice',item)">修改价格</view>
|
|
<view class="btn primary" v-show="item.state_text=='待发货'"
|
|
@click="goJump('/pages/news3/sendOutGoods',item)">发货</view>
|
|
<view class="btn info" v-show="item.state_text=='refund'">拒绝</view>
|
|
<view class="btn primary" v-show="item.state_text=='refund'">同意</view>
|
|
<view class="btn info" v-show="item.state_text=='cancel'||item.state_text=='complete'">删除订单</view>
|
|
<view class="btn info" @click="afterSale=true" v-show="item.state_text=='receipt'">转至售后</view>
|
|
<view class="btn primary" v-show="item.state_text=='receipt'">修改物流</view>
|
|
</view>
|
|
</view>
|
|
<u-empty text="暂无数据显示哦～" v-else mode="list"></u-empty>
|
|
</view>
|
|
<u-popup v-model="show" mode="bottom" border-radius="10" :closeable="true">
|
|
<view class="filterContent">
|
|
<view class="filterTitle">
|
|
订单筛选
|
|
</view>
|
|
<view class="filterItem">
|
|
<view class="filterItemContent">
|
|
<view class="itemTitle">
|
|
下单时间
|
|
</view>
|
|
<view class="timeContainer">
|
|
<u-input v-model="startTime" type="select" @click="getTime('start')" disabled
|
|
placeholder="起始时间" />
|
|
<text>-</text>
|
|
<u-input v-model="endTime" type="select" @click="getTime('end')" disabled
|
|
placeholder="终止时间" />
|
|
</view>
|
|
</view>
|
|
<view class="filterItemContent">
|
|
<view class="itemTitle">
|
|
来源
|
|
</view>
|
|
<view class="selectContainer">
|
|
<view @click="setResourceIndex(index)"
|
|
:class="sourceIndex==index?'selectItem active':'selectItem'"
|
|
v-for="(item,index) in selectList" :key="item.id">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="filterItemContent">
|
|
<view class="itemTitle">
|
|
支付方式
|
|
</view>
|
|
<view class="selectContainer">
|
|
<view @click="setpayIndex(index)" :class="payIndex==index?'selectItem active':'selectItem'"
|
|
v-for="(item,index) in payList" :key="item.id">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btnGroup">
|
|
<view class="resetBtn">
|
|
重置
|
|
</view>
|
|
<view class="confrim">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-picker mode="time" z-index="99999" v-model="timeShow"></u-picker>
|
|
</u-popup>
|
|
<u-popup v-model="afterSale" width="80%" border-radius="10" :closeable="true" mode="center">
|
|
<view class="afterSales">
|
|
<view class="filterTitle">
|
|
确定转移至售后
|
|
</view>
|
|
<view class="filterItem">
|
|
<view class="filterItemContent">
|
|
<view class="itemTitle">
|
|
上传照片 <text style="color:#FF5042">*</text><text>最多可传5张图片</text>
|
|
</view>
|
|
<u-upload :fileList="finishImageList" :previewFullImage="true" @afterRead="afterRead"
|
|
:maxCount="8" width="180" height="180" upload-text="上传照片" @delete="deletePic" name="1"
|
|
multiple></u-upload>
|
|
</view>
|
|
<view class="filterItemContent">
|
|
<view class="itemTitle">
|
|
备注
|
|
</view>
|
|
<u-input v-model="remark" placeholder="请输入您的留言" type="textarea" :auto-height="true" />
|
|
</view>
|
|
|
|
</view>
|
|
<view class="submit">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<afterSale ref='afterSales'></afterSale>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import afterSale from './components/afterSales.vue'
|
|
import * as newFunApi from '@/api/newFun'
|
|
import * as Api from '@/api/dealer/order'
|
|
export default {
|
|
components: {
|
|
afterSale
|
|
},
|
|
data() {
|
|
return {
|
|
classifyShow: 'all',
|
|
classList: [{
|
|
id: 'all',
|
|
name: '全部',
|
|
}, {
|
|
id: 'delivery',
|
|
name: '待发货',
|
|
}, {
|
|
id: 'receipt',
|
|
name: '待验收',
|
|
}, {
|
|
id: 'pay',
|
|
name: '待付款',
|
|
}, {
|
|
id: 'complete',
|
|
name: '已完成',
|
|
}, {
|
|
id: 'refund',
|
|
name: '售后订单',
|
|
}, {
|
|
id: 'apply_cancel',
|
|
name: '待取消',
|
|
}, {
|
|
id: 'cancel',
|
|
name: '已取消',
|
|
},
|
|
|
|
],
|
|
goodsList: [
|
|
|
|
],
|
|
show: false,
|
|
timeShow: false,
|
|
selectList: [{
|
|
id: 1,
|
|
name: '预售'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '秒杀'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '拼团'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '砍价'
|
|
},
|
|
],
|
|
payList: [{
|
|
id: 1,
|
|
name: '微信支付'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '好友代付'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '线下支付'
|
|
},
|
|
],
|
|
sourceIndex: 0,
|
|
payIndex: 0,
|
|
startTime: null,
|
|
endTime: null,
|
|
pageNum: 1,
|
|
keyword: "",
|
|
total: 1,
|
|
pageNum: 1,
|
|
// classList: [
|
|
// {
|
|
// id: 0,
|
|
// name: '全部',
|
|
// },{
|
|
// id: 1,
|
|
// name: '待付款',
|
|
// },{
|
|
// id: 2,
|
|
// name: '待发货',
|
|
// },{
|
|
// id: 3,
|
|
// name: '售后订单',
|
|
// },{
|
|
// id: 4,
|
|
// name: '已退款',
|
|
// },{
|
|
// id: 5,
|
|
// name: '已完成',
|
|
// },{
|
|
// id: 6,
|
|
// name: '已删除',
|
|
// },
|
|
// {
|
|
// id: 7,
|
|
// name: '待收货',
|
|
// }
|
|
// ],
|
|
|
|
}
|
|
},
|
|
onReady(options) {
|
|
// this.getList()
|
|
|
|
},
|
|
onLoad(options) {
|
|
console.log('--------');
|
|
// console.log(options);
|
|
this.classifyShow = options.type;
|
|
this.getList();
|
|
console.log("会员管理带来的user_id", options.user_id)
|
|
},
|
|
onPageScroll(e) {
|
|
|
|
},
|
|
|
|
methods: {
|
|
// 获取当前标签项的值
|
|
// getTabValue() {
|
|
// const app = this
|
|
// if (app.classList.length) {
|
|
// return app.classList[app.curTab].id
|
|
// }
|
|
// return -1
|
|
// },
|
|
// 获取提现列表
|
|
async getList() {
|
|
uni.showLoading({
|
|
title: "加载中"
|
|
})
|
|
const app = this
|
|
return new Promise((resolve, reject) => {
|
|
Api.list({
|
|
dataType: app.classifyShow,
|
|
page: app.pageNum
|
|
})
|
|
.then(result => {
|
|
console.log(result);
|
|
// 合并新数据
|
|
// const newList = result.data.list
|
|
// app.list.data = getMoreListData(newList, app.list, pageNo)
|
|
uni.hideLoading();
|
|
app.goodsList = app.goodsList.concat(result.data.list.data)
|
|
app.total = result.data.list.total
|
|
resolve(app.goodsList)
|
|
})
|
|
})
|
|
},
|
|
// async getList() {
|
|
// uni.showLoading({
|
|
// title:"加载中"
|
|
// })
|
|
// let {status, message, data} = await newFunApi.shopOrderList({
|
|
// dataType: this.classifyShow,
|
|
// page: this.pageNum,
|
|
// searchValue: this.keyword
|
|
// });
|
|
// if(status == 200){
|
|
// uni.hideLoading();
|
|
// this.goodsList = this.goodsList.concat(data.list.data)
|
|
// this.total = data.list.total
|
|
// }
|
|
// },
|
|
|
|
goJump(path, value) {
|
|
uni.navigateTo({
|
|
url: path + '?item=' + JSON.stringify(value),
|
|
})
|
|
},
|
|
getListAfter() {
|
|
this.goodsList = [];
|
|
this.getList()
|
|
},
|
|
getLable(val) {
|
|
// let arr = this.classList.filter(item=>{
|
|
// return val==item.id
|
|
// })
|
|
// return arr[0].name
|
|
},
|
|
onSearch() {
|
|
uni.navigateTo({
|
|
url: ''
|
|
})
|
|
},
|
|
onClassify(item, index) {
|
|
this.classifyShow = item.id;
|
|
this.getListAfter()
|
|
},
|
|
setResourceIndex(index) {
|
|
this.sourceIndex = index;
|
|
},
|
|
setpayIndex(index) {
|
|
this.payIndex = index;
|
|
},
|
|
getTime(val) {
|
|
console.log("ooo")
|
|
this.timeShow = true;
|
|
},
|
|
getFilterHandle() {
|
|
console.log("uu")
|
|
this.$refs.afterSales.afterSale = true;
|
|
}
|
|
|
|
},
|
|
onReachBottom() {
|
|
if (this.goodsList.length <= this.total) {
|
|
this.pageNum++;
|
|
this.getList();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
background-color: #F7F8FA;
|
|
min-height: 100%;
|
|
}
|
|
|
|
::v-deep .u-empty {
|
|
padding: 100rpx 0;
|
|
}
|
|
|
|
::v-deep .u-content {
|
|
height: 62rpx !important;
|
|
line-height: 62rpx !important;
|
|
background-color: #fff !important;
|
|
width: 600rpx !important;
|
|
}
|
|
|
|
.head-info {
|
|
padding: 22upx 20upx;
|
|
|
|
.searchContent {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
background-color: #fff !important;
|
|
border-radius: 28rpx;
|
|
|
|
::v-deep .uni-input-placeholder {
|
|
margin-left: 10upx;
|
|
z-index: 10;
|
|
background-color: #fff !important;
|
|
}
|
|
.search {
|
|
position: absolute;
|
|
top: 20upx;
|
|
left: 26upx;
|
|
z-index: 9;
|
|
}
|
|
|
|
::v-deep .u-input {
|
|
flex: 1;
|
|
margin-right: 28upx;
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
::v-deep .uni-input-input {
|
|
|
|
background: #FFFFFF;
|
|
border-radius: 30px 30px 30px 30px;
|
|
opacity: 1;
|
|
padding-left: 80upx;
|
|
width: calc(100% - 80upx);
|
|
|
|
}
|
|
|
|
.filter {
|
|
display: flex;
|
|
width: 100upx;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 34upx;
|
|
height: auto;
|
|
}
|
|
|
|
text {
|
|
font-size: 24upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #616161;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.classify-list {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
|
|
.list {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 18%;
|
|
height: 100%;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #3B3B3B;
|
|
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 10rpx;
|
|
// width: 60%;
|
|
// height: 8rpx;
|
|
background: linear-gradient(to right, #f8f893, #fe9d00);
|
|
// border-radius: 10rpx;
|
|
transform: translate(-50%, 0);
|
|
|
|
width: 60upx;
|
|
height: 8upx;
|
|
background: #FF6257;
|
|
border-radius: 29px 29px 29px 29px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.action {
|
|
text {
|
|
font-size: 32rpx;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopContent {
|
|
|
|
|
|
.shopItem {
|
|
margin-bottom: 14upx;
|
|
padding: 36upx;
|
|
background-color: #fff;
|
|
|
|
.orderInfo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
text {
|
|
font-size: 28upx;
|
|
color: #707070;
|
|
|
|
}
|
|
}
|
|
|
|
.shopItemInfo {
|
|
display: flex;
|
|
margin-top: 40upx;
|
|
|
|
image {
|
|
width: 180upx;
|
|
height: 180upx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.priceCon {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
margin-left: 40upx;
|
|
|
|
.num {
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #1E1E1E;
|
|
|
|
}
|
|
|
|
.priceText {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text {
|
|
font-size: 32upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #F21A1C;
|
|
font-weight: bold;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.totalNum {
|
|
text-align: right;
|
|
margin-top: 70upx;
|
|
|
|
text:first-child {
|
|
font-size: 24upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #B7B7B7;
|
|
|
|
}
|
|
|
|
text:nth-child(2) {
|
|
font-size: 32upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
margin: 0 10upx;
|
|
|
|
}
|
|
|
|
text:nth-child(3) {
|
|
font-size: 32upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #F21A1C;
|
|
|
|
}
|
|
}
|
|
|
|
.remark {
|
|
background: #F8F8F8;
|
|
border-radius: 0px 0px 0px 0px;
|
|
opacity: 1;
|
|
padding: 20upx;
|
|
margin-top: 20upx;
|
|
|
|
.remarkTitle {
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
|
|
}
|
|
|
|
.remarkContent {
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #939393;
|
|
margin-top: 8upx;
|
|
}
|
|
}
|
|
|
|
.btnGroup {
|
|
display: flex;
|
|
margin-top: 28upx;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
|
|
.btn {
|
|
width: 180upx;
|
|
height: 56upx;
|
|
background: #FFFFFF;
|
|
border-radius: 50px 50px 50px 50px;
|
|
opacity: 1;
|
|
font-size: 14px;
|
|
line-height: 56upx;
|
|
text-align: center;
|
|
margin-left: 12upx;
|
|
}
|
|
|
|
.info {
|
|
border: 1px solid #9F9F9F;
|
|
color: #8B8B8B;
|
|
|
|
}
|
|
|
|
.primary {
|
|
border: 1px solid #F63116;
|
|
color: #F83F11;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.filterContent {
|
|
padding: 32upx;
|
|
|
|
.filterTitle {
|
|
font-size: 32upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #303030;
|
|
text-align: center;
|
|
}
|
|
|
|
.filterItem {
|
|
.filterItemContent {
|
|
margin-top: 40upx;
|
|
|
|
.itemTitle {
|
|
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #303030;
|
|
margin-bottom: 20upx;
|
|
|
|
}
|
|
|
|
.timeContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
::v-deep .uni-input-wrapper {
|
|
background: #F3F3F3;
|
|
border-radius: 22px 22px 22px 22px;
|
|
opacity: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
::v-deep .u-input__right-icon {
|
|
display: none;
|
|
}
|
|
|
|
text {
|
|
margin: 16upx;
|
|
}
|
|
}
|
|
|
|
.selectContainer {
|
|
display: flex;
|
|
|
|
.selectItem {
|
|
flex: 1;
|
|
margin: 0 10upx;
|
|
height: 70upx;
|
|
line-height: 66upx;
|
|
text-align: center;
|
|
background: #F3F3F3;
|
|
border-radius: 22px 22px 22px 22px;
|
|
opacity: 1;
|
|
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #A1A1A1;
|
|
|
|
}
|
|
|
|
.active {
|
|
border: 1px solid #F83F11;
|
|
color: #F21A1C;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnGroup {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 100upx;
|
|
padding-bottom: 60upx;
|
|
|
|
.resetBtn {
|
|
width: 216upx;
|
|
height: 70upx;
|
|
line-height: 66upx;
|
|
background: #DBDBDB;
|
|
border-radius: 22px 22px 22px 22px;
|
|
opacity: 1;
|
|
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.confrim {
|
|
width: 216upx;
|
|
height: 70upx;
|
|
text-align: center;
|
|
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
|
|
border-radius: 50px 50px 50px 50px;
|
|
opacity: 1;
|
|
line-height: 66upx;
|
|
font-size: 28upx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
margin-left: 24upx;
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|