zhangtianning
1 year ago
parent
8737255adc
commit
733e29ec26
@ -0,0 +1,676 @@ |
||||
<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"> |
||||
<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> |
||||
</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() { |
||||
this.getList() |
||||
|
||||
}, |
||||
onLoad() { |
||||
|
||||
}, |
||||
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%; |
||||
} |
||||
.head-info{ |
||||
padding:22upx 20upx; |
||||
.searchContent{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
position: relative; |
||||
::v-deep .uni-input-placeholder{ |
||||
margin-left:90upx; |
||||
z-index:10; |
||||
} |
||||
.search{ |
||||
position: absolute; |
||||
top:20upx; |
||||
left:26upx; |
||||
z-index:9; |
||||
} |
||||
::v-deep .u-input{ |
||||
flex:1; |
||||
margin-right:28upx; |
||||
} |
||||
::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> |
||||
Loading…
Reference in new issue