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.
 
 
 
 
 

583 lines
17 KiB

<template>
<view>
<view class="fixed-lt w-full z-999 header_box" :style="{'padding-top': sysHeight + 'px'}">
<view class="h-80 px-20 flex-y-center" @click="goPage(3)">
<text class="iconfont icon-ic_leftarrow fs-40 colorfff"></text>
<!-- #ifdef MP-WEIXIN -->
<view class=" h-58 rd-30 flex-y-center">
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="flex-1 h-58 flex-y-center ml-20">
<!-- #endif -->
<text class="colorfff">我的订单</text>
</view>
</view>
<view class="flex-1 rd-30 bgfot flex-y-center px-32 ml-20 h-80-lh-80" style="width:700rpx;margin: 38rpx auto;">
<text class="iconfont icon-ic_search fs-24 colorfff"></text>
<input v-model="keyword" confirm-type="search" @focus="searchFocus" @confirm="inputConfirm"
class="pl-18 flex-1 fs-24" placeholder="请输入商品名称" placeholder-class="text--w111-999" />
</view>
<view class="h-100 w-full px-32 flex-between-center fs-26 colorhui1" v-show="!focus" style="margin-top: -38rpx;">
<view class="">
<text :class="orderStatus === '' ? 'active' : ''" @click="statusClick('')">全部</text>
<view v-if='orderStatus===""' class="hengxian"></view>
</view>
<view class="">
<text :class="orderStatus === 0 ? 'active' : ''" @click="statusClick(0)">待付款</text>
<view v-if='orderStatus===0' class="hengxian"></view>
</view>
<view class="">
<text :class="orderStatus === 1 ? 'active' : ''" @click="statusClick(1)">待发货</text>
<view v-if='orderStatus==1' class="hengxian"></view>
</view>
<view class="">
<view class="relative">
<text :class="orderStatus === 2 ? 'active' : ''" @click="statusClick(2)">待收货/核销</text>
<uni-badge class="uni-badge-left-margin" v-if="orderData.received_count > 0" :text="orderData.received_count"></uni-badge>
</view>
<view v-if='orderStatus==2' class="hengxian"></view>
</view>
<view class="">
<text :class="orderStatus === 3 ? 'active' : ''" @click="statusClick(3)">待评价</text>
<view v-if='orderStatus==3' class="hengxian"></view>
</view>
</view>
</view>
<view class="pt-32 pl-20 pr-20" :style="{'margin-top':marTop - 50 + 'px'}" v-show="focus">
<view class="fs-28 text--w111-333 fw-500 lh-40rpx mb-24 acea-row row-between-wrapper">
<view>历史搜索</view>
<view class="iconfont icon-ic_delete text--w111-999 fs-28" @click="delHistory"></view>
</view>
<view class="flex flex-wrap">
<text class="inline-block max-200 h-56 line1 lh-56rpx rd-28rpx bg--w111-fff px-24 fs-24 text--w111-666 text-center mr-24 mb-16"
v-for="(item,index) in historyList" :key="index" @click="goSearch(item)">{{item}}</text>
<text
</view>
</view>
<view class="px-20" :style="{'margin-top':marTop + 'px'}" v-show="!focus">
<view class="order_card bgfot rd-24rpx pt-32 pb-32 pl-24 pr-24"
v-for="(item, index) in orderList" :key="index" @click="goOrderDetails(item.order_id)">
<view class="flex-between-center">
<view class="flex-y-center">
<text v-if="item.pink_name"
class="h-32 bg-color-huang px-6 rd-6rpx fs-20 border_con font-num acea-row row-middle pd-9-13">
{{item.pink_name}}</text>
<text class="fs-28 lh-40rpx colorhui1 pl-16">{{item._add_time}}</text>
</view>
<view class="fs-26">
<view class="colorhuang">
<text>{{item._status._title}}</text>
<text v-if="item.refund.length">{{item.is_all_refund?',退款中':',部分退款中'}}</text>
</view>
</view>
</view>
<view class="mt-26" v-if="item.cartInfo.length && item.cartInfo.length == 1">
<view class="flex justify-between" v-for="(items, i) in item.cartInfo" :key="i">
<view class="flex">
<easy-loadimage
mode="widthFix"
:image-src="items.productInfo.image"
width="136rpx"
height="136rpx"
borderRadius="16rpx"></easy-loadimage>
<view class="ml-20">
<view class="w-346 fs-28 colorhui1 lh-40rpx line2"> {{items.productInfo.store_name }}
</view>
<view class="w-346 fs-24 colorhui lh-34rpx line1 mt-12">{{items.productInfo.attrInfo.suk}}</view>
</view>
</view>
<view>
<!-- <baseMoney v-if="items.productInfo.attrInfo" :money="items.productInfo.attrInfo.price"
symbolSize="20" integerSize="32" decimalSize="20" incolor="#333333" weight></baseMoney>
<baseMoney v-else :money="items.productInfo.price" symbolSize="20" integerSize="32"
decimalSize="20" incolor="#333333" weight></baseMoney> -->
<baseMoney :money="item.pay_price" symbolSize="20" integerSize="32" decimalSize="20"
incolor="#D64D22" color='#D64D22' weight></baseMoney>
<view class="fs-24 colorhui lh-34rpx text-right">共{{item.total_num}}件</view>
</view>
</view>
</view>
<view class="mt-26 relative" v-if="item.cartInfo.length && item.cartInfo.length > 1">
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-560" show-scrollbar="false">
<view class="inline-block mr-16" v-for="(items,i) in item.cartInfo" :key="i">
<easy-loadimage
mode="widthFix"
:image-src="items.productInfo.image"
width="136rpx"
height="136rpx"
borderRadius="16rpx"></easy-loadimage>
</view>
</scroll-view>
<view class="abs-rt h-136 flex-col flex-center">
<baseMoney :money="item.pay_price" symbolSize="20" integerSize="32" decimalSize="20"
incolor="#D64D22" color='#D64D22' weight></baseMoney>
<view class="fs-24 colorhui lh-34rpx text-right">{{item.total_num}}</view>
</view>
</view>
<view class="h-72 rd-8rpx bgfot2 mt-26 px-20 flex-between-center">
<view>
<text class="colorhui fs-26">{{item._status._title}}</text>
<text class="colorhui fs-26 pl-20">{{item._status._msg}}</text>
</view>
<text class="iconfont icon-ic_rightarrow fs-24 colorhui"></text>
</view>
<view class="mt-32 flex-between-center">
<!-- <text class="fs-24 font-num" v-if="item._status._type == 0">{{item._status._msg}}</text> -->
<text></text>
<view class="flex">
<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-btn-hui colorfff"
v-if="item._status._type == 0 || item._status._type == 9"
@tap.stop="showModalChange(item.order_id, 3)">取消订单</view>
<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color-huang colorhei"
v-if="item._status._type == 0" @click.stop="goPay(item.order_id)">立即支付</view>
<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
v-else-if="item._status._type == 3" @click.stop="goOrderDetails(item.order_id)">立即评价</view>
<!-- <view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
v-if="item._status._type == 4" @tap.stop="showModalChange(item.order_id, 2)">删除订单</view> -->
</view>
</view>
</view>
<block v-if="orderList.length == 0 && !loading">
<emptyPage title="暂无订单信息~" :src="keyword ? '/statics/images/noSearch.gif' : '/statics/images/noOrder.gif'"></emptyPage>
</block>
<view class="loadingicon flex-center" v-if="orderList.length > 0">
<text class="loading iconfont icon-ic_Refresh" :hidden="loading == false"></text>
<text class="fs-26 pb-32">{{ loadTitle }}</text>
</view>
</view>
<!-- 确认框 -->
<tuiModal
:show="showModal"
:title="modalTitle"
:content="modalContent"
:maskClosable="false"
@click="handleClick"
@cancel="hideModal"></tuiModal>
</view>
</template>
<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
import {
getOrderList,
orderData,
orderCancel,
orderDel,
orderPay
} from '@/api/order.js';
import { openOrderSubscribe } from '@/utils/SubscribeMessage.js';
import home from '@/components/home';
import tuiModal from "@/components/tui-modal/index.vue"
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
import emptyPage from '@/components/emptyPage.vue';
import colors from '@/mixins/color.js';
import Loading from '@/components/Loading/index.vue'
export default {
components: {
Loading,
home,
emptyPage,
tuiModal
},
mixins: [colors],
data() {
return {
sysHeight:sysHeight,
loaded: false,
loading: false, //是否加载中
loadend: false, //是否加载完毕
loadTitle: '加载更多', //提示语
orderList: [], //订单数组
orderData: {}, //订单详细统计
orderStatus: '', //订单状态
orderType: '', //订单类型
page: 1,
limit: 20,
pay_close: false,
pay_order_id: '',
totalPrice: '0',
isAuto: false, //没有授权的不会自动授权
isShowAuth: false, //是否隐藏授权
keyword: '',
marTop:0,
focus:false,
// 搜索历史
historyList: [],
// 临时搜索列表
tempStorage: [],
//确认模态框
showModal:false,
modalTitle:'',
modalContent:'',
modalType:0,
orderId:''
};
},
computed: {
...mapGetters(['isLogin']),
fixedTop() {
// #ifdef MP || APP-PLUS
return this.sysHeight + 'px'
// #endif
return this.data
// #ifndef MP
return 0
// #endif
}
},
onShow() {
uni.removeStorageSync('form_type_cart');
this.page = 1;
this.loadend = false;
this.orderList = [];
if (this.isLogin) {
this.getFun();
} else {
toLogin()
}
},
onPageScroll(object) {
uni.$emit('scroll');
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
if (options.status) this.orderStatus = (options.status == undefined && options.status != 0) ? '' : parseInt(
options.status);
if (options.type) this.orderType = (options.type == undefined && options.type != 0) ? '' : parseInt(
options.type);
this.getMarTop();
},
methods: {
delHistory(){
this.tempStorage = []
this.historyList = []
uni.setStorageSync('orderHistoryList', this.tempStorage);
},
getFun() {
this.getOrderData();
this.getOrderList();
},
onLoadFun() {
this.getFun();
this.isShowAuth = false;
},
getMarTop(){
let that = this;
setTimeout(() => {
// 获取小程序头部高度
let info = uni.createSelectorQuery().in(this).select(".header_box");
info.boundingClientRect(function(data) {
that.marTop = data.height
}).exec()
}, 100)
},
/**
* 获取订单统计数据
*
*/
getOrderData: function() {
let that = this;
orderData({type: this.orderType,search: this.keyword}).then(res => {
that.$set(that, 'orderData', res.data);
});
},
showModalChange(orderId, type){
this.orderId = orderId;
this.modalType = type;
if(type == 1){
this.modalTitle = '确认收货';
this.modalContent = '为保障权益,请收到货确认无误后,再确认收货';
}else if(type == 2){
this.modalTitle = '删除订单';
this.modalContent = '确定删除该订单?';
}else if(type == 3){
this.modalTitle = '温馨提示';
this.modalContent = '确认取消该订单?';
}
this.showModal = true;
},
handleClick(e){
let index = e.index;
if(index == 1){
if(this.modalType == 1){
orderTake(this.orderId).then(res => {
this.showModal = false;
this.goSearch('');
this.getOrderData();
}).catch(err => {
return this.$util.Tips({
title: err
});
})
}else if(this.modalType == 2){
orderDel(this.orderId).then(res=>{
this.showModal = false;
this.goSearch('');
this.getOrderData();
})
}else if(this.modalType == 3){
this.showModal = false;
orderCancel(this.orderId).then(()=>{
this.goSearch('');
this.getOrderData();
})
}
}else{
this.showModal = false;
}
},
hideModal(){
this.showModal = false;
},
/**
* 取消订单
*
*/
cancelOrder: function(index, order_id) {
let that = this;
if (!order_id)
return that.$util.Tips({
title: '缺少订单号无法取消订单'
});
orderCancel(order_id)
.then(res => {
return that.$util.Tips({
title: res.msg,
icon: 'success'
},
function() {
that.orderList.splice(index, 1);
that.$set(that, 'orderList', that.orderList);
that.$set(that.orderData, 'unpaid_count', that.orderData.unpaid_count - 1);
that.getOrderData();
}
);
})
.catch(err => {
return that.$util.Tips({
title: err
});
});
},
goPay: function(order_id) {
// uni.reLaunch({
// url: `/pages/goods/cashier/index?order_id=${order_id}&from_type=order`
// })
uni.navigateTo({
url: `/pages/goods/cashier/index?order_id=${order_id}&from_type=order`
})
},
goOrderDetails: function(order_id) {
if (!order_id)
return that.$util.Tips({
title: '缺少订单号无法查看订单详情'
});
// #ifdef MP
uni.showLoading({
title: '正在加载'
});
openOrderSubscribe()
.then(() => {
uni.hideLoading();
uni.navigateTo({
url: '/pages/goods/order_details/index?order_id=' + order_id
})
})
.catch(err => {
uni.hideLoading();
});
// #endif
// #ifndef MP
uni.navigateTo({
url: '/pages/goods/order_details/index?order_id=' + order_id
});
// #endif
},
/**
* 切换类型
*/
statusClick: function(status) {
console.log('status',status);
if (this.loading) return
if (status === this.orderStatus) return;
this.orderStatus = status;
this.loadend = false;
this.page = 1;
this.$set(this, 'orderList', []);
this.getOrderList();
},
searchFocus(){
try {
this.historyList = []
this.tempStorage = []
let arr = uni.getStorageSync('orderHistoryList')
if (arr.length > 0) {
this.historyList = Array.from(new Set(arr))
} else {
this.historyList = []
}
this.tempStorage = this.historyList
} catch (e) {}
this.focus = true;
},
goSearch(keyword){
this.loadend = false;
this.loading = false;
this.keyword = keyword;
this.page = 1;
this.orderList = [];
this.getOrderList();
},
inputConfirm(){
this.loadend = false;
this.loading = false;
this.page = 1;
this.orderList = [];
this.getOrderData();
this.getOrderList();
setTimeout(e => {
let arr = this.tempStorage;
if(this.keyword !== ''){
arr.unshift(this.keyword);
this.tempStorage = [...Array.from(new Set(arr))];
uni.setStorageSync('orderHistoryList', this.tempStorage);
}
}, 1000)
},
/**
* 获取订单列表
*/
getOrderList: function() {
let that = this;
if (that.loadend) return;
if (that.loading) return;
that.loading = true;
that.loadTitle = '加载更多';
getOrderList({
status: that.orderStatus,
type: that.orderType,
page: that.page,
limit: that.limit,
search: this.keyword
})
.then(res => {
let list = res.data || [];
let loadend = list.length < that.limit;
that.orderList = that.$util.SplitArray(list, that.orderList);
that.$set(that, 'orderList', that.orderList);
that.loadend = loadend;
that.loading = false;
that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
that.page = that.page + 1;
that.focus = false;
})
.catch(err => {
that.loading = false;
that.loadTitle = '加载更多';
});
},
/**
* 删除订单
*/
delOrder: function(order_id, index) {
let that = this;
uni.showModal({
title: '删除订单',
content: '确定删除该订单',
success: function(res) {
if (res.confirm) {
orderDel(order_id)
.then(res => {
that.orderList.splice(index, 1);
that.$set(that, 'orderList', that.orderList);
that.$set(that.orderData, 'unpaid_count', that.orderData
.unpaid_count - 1);
that.getOrderData();
return that.$util.Tips({
title: '删除成功',
icon: 'success'
});
})
.catch(err => {
return that.$util.Tips({
title: err
});
});
} else if (res.cancel) {
return that.$util.Tips({
title: '已取消'
});
}
}
});
},
goPage(type, url){
if(type == 1){
uni.navigateTo({
url
})
}else if(type == 2){
uni.switchTab({
url
})
}else if(type == 3){
uni.navigateBack();
}
},
},
onReachBottom: function() {
this.getOrderList();
}
};
</script>
<style scoped lang="scss">
.border_con {
border: 1px solid var(--view-theme);
}
.border_ccc {
border: 1rpx solid #ccc;
}
.active {
color: #FAAD35;
// font-weight: 500;
// font-size: 30rpx;
}
.abs-rt {
position: absolute;
top: 0;
right: 0;
}
.order_card ~ .order_card{
margin-top:20rpx;
}
.btn ~ .btn{
margin-left: 16rpx;
}
.uni-badge-left-margin {
position: absolute;
top: -16rpx;
right: -30rpx;
/deep/ .uni-badge--error {
background-color: var(--view-theme) !important;
}
.uni-badge {
color: var(--view-theme);
border: 1px solid var(--view-theme);
z-index: 29;
}
}
</style>