309 lines
9.1 KiB
Vue
309 lines
9.1 KiB
Vue
<template>
|
||
<view v-if="isLoading">
|
||
<status-nav :ifReturn="true" navBarTitle="订单管理" :ifBackMy="ifBackMy" :marginBottom="0"></status-nav>
|
||
<!-- 订单搜索 -->
|
||
<view class="order-search">
|
||
<input class="input font30 pad-zy40 color-66 radius20 border-box" v-model="order_coding" type="text" placeholder="请输入订单编号" confirm-type="search" @confirm="doSearch" placeholder-style="color:#666666">
|
||
</view>
|
||
<!-- 订单导航 -->
|
||
<view class="order-nav-bg mar-s30" :style="{top:newTop+'px'}">
|
||
<scroll-view scroll-x="true" :scroll-left="tabsScrollLeft" @scroll="scroll">
|
||
<view class="order-nav flex" id="tab_list" :style="{width:navWidth}">
|
||
<view id="tab_item" class="item font30 color-8c radius20" :class="activeIndex == index?'cur':''" v-for="(item,index) in orderNav" @tap="changeNav(index,item.tag)">{{item.title}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 订单列表 -->
|
||
<view class="order-list">
|
||
<view class="order-item" @tap.stop="toDetail(item.id)" v-for="(item,index) in orderList" :key="index">
|
||
<view class="order-code flex">
|
||
<text>订单号：{{item.coding}}</text>
|
||
<text class="status color-red" v-if="item.status=='waiting'">{{item.status_text}}</text>
|
||
<text class="status" style="color: #02d20b;" v-if="item.status=='paid' || item.status=='shipped'">{{item.status_text}}</text>
|
||
<text class="status color-99" v-if="item.status=='completed' || item.status=='closed'">{{item.status_text}}</text>
|
||
</view>
|
||
<view class="item-bg">
|
||
<view class="item flex" v-for="(item1,index1) in item.skus" :key="index1">
|
||
<view class="img"><image :src="item1.spu_cover" mode="widthFix"></image></view>
|
||
<view class="txt">
|
||
<view class="title clips1">{{item1.spu_name}}</view>
|
||
<view class="specs clips2">规格：{{item1.sku_name}}</view>
|
||
<view class="price flex">
|
||
<text>￥{{item1.price}}</text>
|
||
<view><text>x</text>{{item1.num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="total-price flex">
|
||
<text>合计：￥{{item.price}}</text>
|
||
<view class="btns flex" v-if="item.status == 'waiting'">
|
||
<view class="btn border-box" @tap.stop="cancleEv(item.coding)">取消订单</view>
|
||
<view class="btn btn-01 border-box" @tap.stop="payEv(item.coding)">立即支付</view>
|
||
</view>
|
||
<view class="btns flex" v-if="item.status == 'paid'">
|
||
<view class="btn border-box" @tap.stop="cancleEv(item.coding)">取消订单</view>
|
||
</view>
|
||
<view class="btns flex" v-if="item.status == 'shipped'">
|
||
<view class="btn btn-02 border-box background-orange" @tap.stop="affirmEv(item.id)">确认收货</view>
|
||
</view>
|
||
<view class="btns flex" v-if="item.status == 'completed' || item.status == 'closed'">
|
||
<view class="btn border-box" @tap.stop="buyAgain(index)">再次购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 到底啦 -->
|
||
<view class="no-more font24" style="margin: 0;padding: 25rpx 0;" v-if="total!==0&&totalAll==total"><text>—— 到底啦 ——</text></view>
|
||
<!-- 没有内容 -->
|
||
<nothing-page v-if="total==0&&totalAll == total" content="还没有相关订单哟(*^▽^*)"></nothing-page>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getCartInfo} from '@/jsFile/public-api.js';
|
||
import {mapState} from 'vuex'//引入mapState
|
||
export default {
|
||
data() {
|
||
return {
|
||
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
|
||
orderNav:[
|
||
{title:'全部',tag:'all'},
|
||
{title:'待付款',tag:'waiting'},
|
||
{title:'已下单',tag:'paid'},
|
||
{title:'已发货',tag:'shipped'},
|
||
{title:'已完成',tag:'completed'},
|
||
],
|
||
activeIndex:0,
|
||
scrollLeft:0,
|
||
tabsScrollLeft:0,
|
||
navWidth:'', //导航宽度
|
||
orderList:[],
|
||
flag:true,
|
||
isLoading:false,
|
||
total:0,
|
||
totalAll:-1,
|
||
page: 1,
|
||
size: 10,
|
||
tag: 'all',
|
||
order_coding:'', //订单号
|
||
ifBackMy:false,
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
if(op.tag){this.tag = op.tag;}
|
||
if(op.index){this.activeIndex = op.index;}
|
||
if(op.backTag){this.ifBackMy = true;}
|
||
this.navWidth = this.orderNav.length*150 - 20 + 'rpx';
|
||
// 分类切换效果
|
||
this.setTabList();
|
||
},
|
||
onShow() {
|
||
this.orderList=[];
|
||
this.getOrderList();
|
||
},
|
||
onReachBottom(e) {
|
||
if(this.orderList.length<this.total){
|
||
this.page++;
|
||
this.getOrderList();
|
||
}
|
||
},
|
||
// 分享到微信
|
||
onShareAppMessage() {
|
||
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline(res){
|
||
|
||
},
|
||
methods: {
|
||
// 导航切换
|
||
changeNav(index,tag) {
|
||
this.total=0;
|
||
this.totalAll=-1;
|
||
this.activeIndex = index;
|
||
this.tag = tag;
|
||
this.orderList=[];
|
||
this.page = 1;
|
||
this.order_coding = '';
|
||
this.getOrderList();
|
||
// 分类切换效果
|
||
this.setTabList();
|
||
},
|
||
// 搜索订单
|
||
doSearch(){
|
||
this.orderList = [];
|
||
this.activeIndex = 0;
|
||
this.tag = 'all'
|
||
// 获取订单列表
|
||
this.getOrderList();
|
||
},
|
||
// 获取订单列表
|
||
getOrderList(){
|
||
uni.showLoading({
|
||
title:'加载中'
|
||
});
|
||
let params = {
|
||
page: this.page,
|
||
size: this.size,
|
||
tag: this.tag,
|
||
order_coding:this.order_coding,
|
||
}
|
||
this.$requst.get('/api/user/order',params).then(res=>{
|
||
console.log(res,'订单列表')
|
||
if(res.data.length!=0){
|
||
this.total = res.data.total;
|
||
let newArr = [];
|
||
res.data.list.forEach(item=>{
|
||
let obj = {
|
||
id: item.id, //id
|
||
coding: item.coding, //订单号
|
||
price: item.price, //总价
|
||
status: item.status, //订单状态英文
|
||
status_text: item.status_text, //订单状态中文
|
||
skus: item.skus ,//订单详情
|
||
}
|
||
newArr.push(obj);
|
||
})
|
||
this.orderList = this.orderList.concat(newArr);
|
||
if(this.orderList.length == this.total){
|
||
this.totalAll = this.total;
|
||
}
|
||
}
|
||
uni.hideLoading();
|
||
this.isLoading = true;
|
||
})
|
||
},
|
||
// 去详情
|
||
toDetail(id){
|
||
uni.navigateTo({
|
||
url:`/pagesA/order/detail?id=${id}`
|
||
})
|
||
},
|
||
// 取消订单
|
||
cancleEv(coding){
|
||
let params = {
|
||
order_coding: coding //订单号
|
||
}
|
||
this.$requst.post('/api/order/cancel',params).then(res=>{
|
||
if(res.code==0) {
|
||
this.$toolAll.tools.showToast('取消订单成功(*^▽^*)');
|
||
this.orderList = [];
|
||
this.page = 1;
|
||
this.getOrderList();
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 确认收货
|
||
affirmEv(id){
|
||
let params = {
|
||
order_id: id //订单号
|
||
}
|
||
this.$requst.post('/api/order/accepted',params).then(res=>{
|
||
if(res.code==0) {
|
||
this.$toolAll.tools.showToast('确认收货成功(*^▽^*)');
|
||
this.orderList = [];
|
||
this.page = 1;
|
||
this.getOrderList();
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 再次购买
|
||
buyAgain(index){
|
||
let buyList = [];
|
||
let newArr = this.orderList[index];
|
||
newArr.skus.forEach(item=>{
|
||
let obj = {
|
||
sku_coding: item.coding,
|
||
num: item.num
|
||
}
|
||
buyList.push(obj);
|
||
})
|
||
uni.setStorageSync('buyList',buyList);
|
||
uni.navigateTo({
|
||
url:'/pages/cart/settlement'
|
||
})
|
||
},
|
||
|
||
// 立即支付
|
||
payEv(coding){
|
||
this.$requst.post('/api/order/pay',{order_coding:coding}).then(res=>{
|
||
if(res.code==0) {
|
||
console.log(res,'立即支付');
|
||
// 调用微信支付
|
||
this.callPayMent(res.data.payment_params)
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 调用微信支付
|
||
callPayMent(data){
|
||
//调起支付
|
||
wx.requestPayment({
|
||
'timeStamp': data.timeStamp,
|
||
'nonceStr': data.nonceStr,
|
||
'package': data.package,
|
||
"signType": data.signType,
|
||
'paySign': data.sign,
|
||
'success': function (res) { // 接口调用成功的回调函数
|
||
console.log('支付成功:',res);
|
||
this.$toolAll.tools.showToast('支付成功(*^▽^*)');
|
||
uni.navigateTo({
|
||
url:`/pages/cart/finish`
|
||
})
|
||
},
|
||
'fail': function (res) { // 接口调用失败的回调函数
|
||
console.log('支付失败:' + JSON.stringify(res));
|
||
}
|
||
})
|
||
},
|
||
|
||
// 分类切换效果
|
||
setTabList() {
|
||
this.$nextTick(() => {
|
||
if (this.orderNav.length > 0) {
|
||
//计算左滑距离
|
||
this.setLeft()
|
||
}
|
||
})
|
||
},
|
||
|
||
//计算左滑距离
|
||
setLeft() {
|
||
let lineLeft = 0;
|
||
this.getElementData('#tab_list', (data) => {
|
||
let list = data[0];
|
||
this.getElementData('#tab_item', (res) => {
|
||
let el = res[this.activeIndex]
|
||
lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
|
||
this.tabsScrollLeft = this.scrollLeft + lineLeft
|
||
})
|
||
})
|
||
},
|
||
|
||
// 获取DOM距离
|
||
getElementData(el, callback) {
|
||
uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
|
||
callback(data[0]);
|
||
});
|
||
},
|
||
|
||
// 滚动
|
||
scroll(e) {
|
||
this.scrollLeft = e.detail.scrollLeft;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|