230 lines
10 KiB
Vue
230 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'订单管理'" :statusTitle="true"></status-nav>
|
||
<!-- 自定义二级分类 -->
|
||
<view class="isTopf bacf" :style="{top:statusHNH+'px'}">
|
||
<scroll-view scroll-x>
|
||
<view id="daoh" class="disjbac pad-s20 mar-zy30">
|
||
<view @tap="chooseNav(indexn)" class="posir pad-s20 pad-zy20 pad-x30 flexs mar-y10" style="text-align: center;" :class="activeIndex==indexn?'activeD':''" :style="{color:activeIndex==indexn?'#3875F6':'#000000'}" v-for="(itemn,indexn) in statusList" :key="indexn">{{itemn}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view :style="{paddingTop:(statusHNH+12+chuTop)+'px'}" class="pad-sx20 pad-zy32">
|
||
<view v-for="(item,index) in orderList" :key="index" class="radius20 bacf pad20 mar-x20 order-item-box">
|
||
<view class="bbot disjbac pad-x20 mar-x20"><view class="fon28 col3 bold">{{item.isShop==0?'商城订单':'积分商城订单'}}</view><view class="fon24 col9">{{item.establish}}</view></view>
|
||
<view class="disjbac fon24"><view class="col3">订单号：{{item.orderNum}}</view><view class="bold" :class="(item.orderStatus==1 || item.orderStatus==2 || item.orderStatus==3) ? 'colf8':'col9'">{{['','待付款','待发货','待核验','待收货','交易完成'][item.orderStatus]}}</view></view>
|
||
<view v-for="(itemc,indexc) in item.childrenList" :key="indexc" class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
||
<navigator url="/pagesB/shopDetail/shopDetail" hover-class="none">
|
||
<image :src="itemc.imgSrc" class="flexs" mode="aspectFill"></image>
|
||
</navigator>
|
||
<view class="width100 disjb fc" style="height: 166rpx;">
|
||
<view>
|
||
<navigator url="/pagesB/shopDetail/shopDetail" hover-class="none">
|
||
<view class="fon28 col3 bold clips2">{{itemc.title}}</view>
|
||
</navigator>
|
||
<view class="order-sy">试用</view>
|
||
</view>
|
||
<view class="disjbac mar-s10">
|
||
<view class="colf8 fon32 bold"><span v-if="item.isShop==0">￥</span>{{itemc.price}}</view>
|
||
<view class="fon28 col6 mar-y40">x{{itemc.num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fon28 col3 pad-s20 disjbac">
|
||
<view class="flexs"><span v-if="item.isShop==0">合计：{{item.total}}.00</span><span v-else>合计积分：{{item.total}}</span></view>
|
||
<view class="width100 disac" style="justify-content: flex-end;">
|
||
<view @tap="isCancle=true" v-if="item.orderStatus != 0 && item.orderStatus != 5" class="order-cancle">取消订单</view>
|
||
<view v-if="item.orderStatus == 1" class="order-btn">付款</view>
|
||
<view @tap="isHeyan=true" v-if="item.orderStatus == 3" class="order-btn">线下核销</view>
|
||
<!-- <view class="order-btn">单人拼团</view> -->
|
||
<view @tap="confirmReceipt(item.id)" v-if="item.orderStatus == 4" class="order-btn">确认收货</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 待核验弹框 -->
|
||
<view v-if="isHeyan" @tap="isHeyan=false" class="disjcac tc posAll" style="z-index: 3;">
|
||
<view class="bacf width100 radius20 pad30 posir" style="margin: 0 128rpx;" @tap.stop="isHeyan=true">
|
||
<view class="fon28 col3">订单二维码</view>
|
||
<view class="mar-sx30">
|
||
<image src="/static/public/member-head.png" style="width: 325rpx;height: 325rpx;" mode=""></image>
|
||
</view>
|
||
<view class="fon24 col3">
|
||
<view class=" mar-s40 mar-x20">工作人员扫码核销订单</view>
|
||
<view>订单未完成前请勿出示二维码</view>
|
||
</view>
|
||
<image @tap.stop="isHeyan=false" src="/static/public/closequan.png" class="posia heyan-close" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- 取消订单弹框 -->
|
||
<view v-if="isCancle" @tap.stop="isCancle=false" class="posAll">
|
||
<view class="bacf posixzy order-cancle-tk" @tap.stop="isCancle=true">
|
||
<view>
|
||
<view class="bbot pad-sx20 posir">
|
||
<view class="fon28 bold col3 width100" style="text-align: center;">取消订单</view>
|
||
<image class="posia" @tap.stop="isCancle=false" src="/static/public/cha-close.png" style="width: 40rpx;height: 40rpx;right: 50rpx;top: 20rpx;" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="pad-zy32 pad-sx20" style="color: #5B5B5B;">
|
||
<view class="fon24" style="line-height: 40rpx;">
|
||
<view>温馨提示：</view>
|
||
<view>订单取消需要提交工作人员审核，商品金额将原路径返还账户，订单一旦取消，系统无法恢复。</view>
|
||
</view>
|
||
<view @tap.stop="chooseReason(indexy)" v-for="(itemy,indexy) in reasonList" :key="indexy" class="disac mar-s40">
|
||
<image v-if="itemy.isActive" src="/static/public/chooseFS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
|
||
<image v-else src="/static/public/cancle-FS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
|
||
<view class="mar-z20 fon28">{{itemy.title}}</view>
|
||
</view>
|
||
<!-- 确认取消按钮 -->
|
||
<view @tap.stop="confirmEv" class="confirm-btn">确认取消</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusHNH:uni.getStorageSync('statusHNH'),
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
chuTop:'',//导航高度
|
||
activeIndex:'',
|
||
statusList:['全部','待付款','待发货','待核验','待收货','已完成'],
|
||
// 取消订单原因
|
||
reasonList:[
|
||
{title:'不想要了/买多了/买错了',isActive:true},
|
||
{title:'地址信息填写错误',isActive:false},
|
||
{title:'其他原因',isActive:false},
|
||
],
|
||
isHeyan:false,//是否线下审核
|
||
isCancle:false,//是否取消订单
|
||
orderList:[
|
||
{
|
||
id:1,
|
||
establish:'2021-09-06 20:30',//创建时间
|
||
orderNum:'1234567890',//订单号
|
||
childrenList:[
|
||
{imgSrc:'/static/public/member-head.png',title:'【99募门美人1000单位FUE技术案例招募门美人',price:3888,num:2},
|
||
{imgSrc:'/static/public/member-head.png',title:'【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人1000单位FUE技术案例招募门美人',price:3888,num:2},
|
||
],
|
||
orderStatus:5,//1 待付款，2 待发货，3 待核验，4 待收货，5 交易已完成
|
||
isShop:0,//0 商城订单,1 积分商城订单
|
||
total: 15552//合计
|
||
},
|
||
{
|
||
id:2,
|
||
establish:'2021-09-06 20:30',//创建时间
|
||
orderNum:'1234567890',//订单号
|
||
childrenList:[
|
||
{imgSrc:'/static/public/member-head.png',title:'【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人1000单位FUE技术案例招募门美人',price:3888,num:2},
|
||
],
|
||
orderStatus:3,//1 待付款，2 待发货，3 待核验，4 待收货，5 交易已完成
|
||
isShop:0,//0 商城订单,1 积分商城订单
|
||
total: 15552//合计
|
||
},
|
||
{
|
||
id:3,
|
||
establish:'2021-09-06 20:30',//创建时间
|
||
orderNum:'1234567890',//订单号
|
||
childrenList:[
|
||
{imgSrc:'/static/public/member-head.png',title:'【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人1000单位FUE技术案例招募门美人',price:3888,num:2},
|
||
{imgSrc:'/static/public/member-head.png',title:'【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人1000单位FUE技术案例招募门美人',price:3888,num:2},
|
||
],
|
||
orderStatus:4,//1 待付款，2 待发货，3 待核验，4 待收货，5 交易已完成
|
||
isShop:0,//0 商城订单,1 积分商城订单
|
||
total: 15552//合计
|
||
},
|
||
{
|
||
id:4,
|
||
establish:'2021-09-06 20:30',//创建时间
|
||
orderNum:'1234567890',//订单号
|
||
childrenList:[
|
||
{imgSrc:'/static/public/member-head.png',title:'【99皮皮节】【种植发际线】100美人',price:3888,num:2},
|
||
{imgSrc:'/static/public/member-head.png',title:'【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人1000单位FUE技术案例招募门美人',price:3888,num:2},
|
||
],
|
||
orderStatus:1,//1 待付款，2 待发货，3 待核验，4 待收货，5 交易已完成
|
||
isShop:0,//0 商城订单,1 积分商城订单
|
||
total: 15552//合计
|
||
},
|
||
{
|
||
id:5,
|
||
establish:'2021-09-06 20:30',//创建时间
|
||
orderNum:'1234567890',//订单号
|
||
childrenList:[
|
||
{imgSrc:'/static/public/member-head.png',title:'【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人1000单位FUE技术案例招募门美人',price:3888,num:2},
|
||
{imgSrc:'/static/public/member-head.png',title:'【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人1000单位FUE技术案例招募门美人',price:3888,num:2},
|
||
],
|
||
orderStatus:2,//1 待付款，2 待发货，3 待核验，4 待收货，5 交易已完成
|
||
isShop:1,//0 商城订单,1 积分商城订单
|
||
total: 15552//合计
|
||
}
|
||
],
|
||
zanList:[],//暂存列表数据
|
||
}
|
||
},
|
||
onShow() {
|
||
this.$toolAll.tools.isLogin()
|
||
},
|
||
onLoad(options) {
|
||
const query = wx.createSelectorQuery()
|
||
query.select('#daoh').boundingClientRect((rect) => {
|
||
// console.log('状态栏+标题栏：',rect);
|
||
this.chuTop = rect.height
|
||
}).exec()
|
||
options.index==undefined ? this.activeIndex = 0 : this.activeIndex = options.index;
|
||
this.zanList = this.orderList;
|
||
this.checkList(this.activeIndex);
|
||
},
|
||
methods: {
|
||
chooseNav(index){
|
||
this.activeIndex = index;
|
||
this.checkList(index)
|
||
},
|
||
checkList(index){//查询订单列表
|
||
if(index==0) {
|
||
this.orderList = this.zanList;
|
||
} else {
|
||
this.orderList = this.zanList.filter(item=>{
|
||
return item.orderStatus==index;
|
||
});
|
||
}
|
||
},
|
||
chooseReason(index){//取消订单原因选择事件
|
||
this.reasonList.forEach(item=>item.isActive = false);
|
||
this.reasonList[index].isActive = true;
|
||
},
|
||
confirmEv(){//确认取消订单事件
|
||
this.isCancle = false;
|
||
let con = '';
|
||
this.reasonList.forEach(item=>{
|
||
if(item.isActive) con = item.title;
|
||
})
|
||
},
|
||
confirmReceipt(id){//确认收货事件
|
||
console.log(id);
|
||
this.$requst.post('order/accepted',{order_id:id}).then(res=>{
|
||
if(res.code==0){
|
||
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.activeD::after{
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 8rpx;
|
||
background: #3875F6;
|
||
width: 100%;
|
||
}
|
||
</style>
|