250 lines
9.4 KiB
Vue
250 lines
9.4 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 使用标题栏 -->
|
|
<status-nav class="statush" :statusBackw="true" :whereCome="whereCome*1" :statusTitle="true" :title-val="'我的订单'" :tabcolor="'#ffffff'">
|
|
</status-nav>
|
|
<view class="bacb" :style="{paddingTop:statusHNH+'px'}">
|
|
<view class="disaa fon28 padding-sx20" :style="{top:ordertop}" style="position: fixed;left: 0;right: 0;z-index: 10;background-color: #FFFFFF;border-bottom: 1rpx solid #EEEEEE;">
|
|
<view @tap="tapTab(index)" :class="current==index?'colorf78':''" v-for="(item,index) in tabArr"
|
|
:key="index">{{item}}</view>
|
|
</view>
|
|
</view>
|
|
<swiper :current="current" @change="changec" :style="{height: (heightone-(statusHNH+40)) +'px',paddingTop:40+'px'}">
|
|
<swiper-item class="swiper-item" v-for="(itemarr,indexarr) in dataArr.length" :key="indexarr">
|
|
<scroll-view scroll-y="true" :style="{height: (height-(statusHNH+40)) +'px'}">
|
|
<view v-if="dataArr[indexarr].length!=0" :class="'active'+index" v-for="(item,index) in dataArr[indexarr]" :key="index"
|
|
class="padding-sx20 fon28 bacb margin-sx20 padding-zy30 item-box" style="border-radius: 5rpx;">
|
|
<view class="fon24 color6 margin-s10">订单号：{{item.orderId}}</view>
|
|
<view v-for="(itemsk,indexsk) in item.skuList" :key="indexsk" class="borbot margin-sx20">
|
|
<view @tap="checkDetail(itemsk.spu_id,index)" class="disac posir padding-sx10 margin-x20">
|
|
<image class="radius10 flexs goodsImg" :src="itemsk.src" mode="aspectFill"></image>
|
|
<view class="margin-zy20" style="width: 52%;">
|
|
<view class="fon32 clips2">{{itemsk.title}}</view>
|
|
<view class="fon24 color9 margin-sx10 clips1">{{itemsk.cate}}</view>
|
|
<view class="fon24 color6">X{{itemsk.num}}</view>
|
|
</view>
|
|
<view class="orderRight">
|
|
<view class="fon24 colorf78 margin-x10">{{['','待发货','待收货','待评价','待付款'][item.status]}}</view>
|
|
<view>￥<text class="fon36 bold">{{itemsk.price}}</text>.0</view>
|
|
<view class="fon26 disac orderRights" style="" v-if="indexsk==(item.skuList.length-1)">
|
|
<view class="flexs">实付款：</view><text class="colorf78">￥{{item.allprice}}.0</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="disac jcend">
|
|
<!-- 查看物流 -->
|
|
<view v-if="item.status==2" @tap="checkLogistics(item.orderId)" class="myorderbtn">查看物流</view>
|
|
<!-- 晒单评价 -->
|
|
<view v-if="item.status==3" @tap="goPing(index)" class="myorderbtn">{{pingCon}}</view>
|
|
<!-- 申请售后 -->
|
|
<view v-if="(item.status==2 || item.status==3) && item.is_after_sale==0" @tap="saleAfter(index)" class="myorderbtn">{{shouCon}}</view>
|
|
<!-- 确认收获 -->
|
|
<view v-if="item.status==2" @tap="confrimEv(index)" class="myorderbtn confrimbtn">确认收货</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="dataArr[indexarr].length==0" class="zanwu">暂无订单记录</view>
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<backTop :showTop="showTop" @backTop="backTop"></backTop>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import backTop from '@/components/backTop.vue';
|
|
export default {
|
|
components:{
|
|
backTop
|
|
},
|
|
data() {
|
|
return {
|
|
whereCome:0,
|
|
tabArr: ['全部', '待发货', '待收货', '待评价'],
|
|
current: 0,
|
|
dataArr: [[],[],[],[]],
|
|
height: 750,
|
|
heightone:'',
|
|
showTop:false,
|
|
ordertab:'ordertop',
|
|
tag:'all',
|
|
total:'',
|
|
size:50,
|
|
page:1,
|
|
pingCon:'评价晒单',
|
|
shouCon:'申请售后',
|
|
statusHNH:uni.getStorageSync('statusHNH')
|
|
}
|
|
},
|
|
onShow() {
|
|
this.$toolAll.tools.guoq()
|
|
},
|
|
onLoad(options) {
|
|
// console.log(options);
|
|
this.whereCome = options.index
|
|
if(options.num!=undefined) this.current = options.num
|
|
|
|
// let obj = uni.createSelectorQuery().select('.ptwo-box')
|
|
// obj.boundingClientRect(function (data) { // data - 各种参数
|
|
// console.log(data.height)
|
|
// }).exec()
|
|
// let obj1 = uni.createSelectorQuery().select('.statush')
|
|
// obj1.boundingClientRect(function (data) { // data - 各种参数
|
|
// console.log(data.height)
|
|
// }).exec()
|
|
this.checkList()
|
|
this.setHeight();
|
|
},
|
|
onPageScroll(e) {
|
|
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
|
},
|
|
methods: {
|
|
// 查询订单列表事件
|
|
checkList(){//tag传参 all:全部 waiting_comment:待评价 paid:已付款 expired:已过期 shipped:已发货 waiting:待付款
|
|
let ya = this
|
|
this.dataArr = [[],[],[],[]]
|
|
this.$requst.post('user/order',{tag:this.tag,page:this.page,size:this.size}).then(res=>{
|
|
// console.log('订单数据',res);
|
|
if(res.code==0){
|
|
if(res.data.list.length!=0){
|
|
let list = []
|
|
res.data.list.forEach(item=>{
|
|
let numStatus = ''
|
|
let newArr = []
|
|
if(item.status=='paid') numStatus = 1
|
|
if(item.status=='shipped') numStatus = 2
|
|
if(item.status=='completed') numStatus = 3
|
|
if(item.status=='waiting') numStatus = 4
|
|
item.skus.forEach(itemone=>{
|
|
let orderObj = {
|
|
danId:itemone.id,
|
|
spu_id:itemone.spu_id,
|
|
src:this.$http + itemone.sku_cover,
|
|
title:itemone.spu_name,
|
|
cate:itemone.sku_name,
|
|
num:itemone.num,
|
|
price:itemone.price/100,
|
|
}
|
|
newArr.push(orderObj)
|
|
// this.pingCon = '追加评价'
|
|
})
|
|
let listObj = {
|
|
id:item.id,
|
|
orderId:item.order_id,
|
|
allprice:item.price/100,
|
|
is_after_sale:item.is_after_sale,
|
|
status:numStatus,
|
|
skuList:newArr,
|
|
original_price:item.original_price/100
|
|
}
|
|
ya.dataArr[0].push(listObj)
|
|
if(numStatus==1){ya.dataArr[1].push(listObj)}
|
|
if(numStatus==2){ya.dataArr[2].push(listObj)}
|
|
if(numStatus==3){ya.dataArr[3].push(listObj)}
|
|
})
|
|
// console.log(ya.dataArr);
|
|
}
|
|
}
|
|
},error=>{})
|
|
},
|
|
confrimEv(index){
|
|
// console.log('id:',this.dataArr[this.current][index].id);//订单ID
|
|
uni.showModal({
|
|
content:'是否确认收货？',
|
|
cancelText:'否',
|
|
cancelColor:'#999999',
|
|
confirmText:'是',
|
|
confirmColor:'#ff7800',
|
|
success: (res) => {
|
|
if(res.confirm){
|
|
this.$requst.post('order/accepted',{order_id:this.dataArr[this.current][index].id}).then(res=>{
|
|
// console.log('确认收货返回数据：',res);
|
|
if(res.code==0){
|
|
this.$toolAll.tools.showToast('收货成功(*^▽^*)')
|
|
this.checkList()
|
|
}
|
|
},error=>{})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
backTop(){
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 300
|
|
});
|
|
},
|
|
goPing(index){//去评价事件
|
|
// console.log(this.current,this.dataArr[this.current]);
|
|
uni.setStorageSync('orderPing',this.dataArr[this.current][index])
|
|
uni.navigateTo({
|
|
url:'/pagesA/evaluate/evaluate'
|
|
})
|
|
},
|
|
tapTab(index) {//tab改变事件
|
|
this.current = index
|
|
// this.qiehuanEv(index)
|
|
},
|
|
changec(e) {//滑动事件
|
|
// console.log(e);
|
|
this.current = e.detail.current
|
|
// this.qiehuanEv(this.current)
|
|
},
|
|
qiehuanEv(index){
|
|
let ya = this
|
|
switch (index){
|
|
case 0:
|
|
this.tag = 'all'
|
|
break;
|
|
case 1:
|
|
this.tag = 'paid'
|
|
break;
|
|
case 2:
|
|
this.tag = 'shipped'
|
|
break;
|
|
case 3:
|
|
this.tag = 'waiting_comment'
|
|
break;
|
|
}
|
|
setTimeout(function(){
|
|
ya.checkList()
|
|
},500)
|
|
},
|
|
setHeight() {
|
|
let windowHeight = uni.getSystemInfoSync().screenHeight; //页面可见区域
|
|
// console.log(windowHeight);
|
|
this.heightone = windowHeight
|
|
// windowHeight = windowHeight - 44; //页面可见区域 - 在线购物条高度
|
|
var query = uni.createSelectorQuery();
|
|
query.in(this).select('.item-box').boundingClientRect(rect => {
|
|
// if (rect) {
|
|
this.height = windowHeight; //页面可见区域 - 头部高度
|
|
// console.log(this.height);
|
|
// }
|
|
}).exec();
|
|
},
|
|
checkLogistics(orderId){//查询物流事件
|
|
uni.navigateTo({
|
|
url:'/pagesA/viewLogistics/viewLogistics?orderId='+orderId
|
|
})
|
|
},
|
|
saleAfter(index){//售后服务事件
|
|
uni.setStorageSync('afterOrder',this.dataArr[this.current][index])
|
|
uni.navigateTo({
|
|
url:'/pagesA/applyAfterSales/applyAfterSales'
|
|
})
|
|
},
|
|
checkDetail(id,index){//查看详情事件
|
|
// console.log('订单ID',id);
|
|
uni.navigateTo({
|
|
url:'/pagesA/productDetail/productDetail?id='+id
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|