483 lines
13 KiB
Vue
483 lines
13 KiB
Vue
|
|
|
|
<template>
|
|
<mescroll-uni ref="mescrollRef" top="80rpx" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
|
:down="downOption" :up="upOption" >
|
|
<view class="order-list">
|
|
<view v-for="(item, index) in orderList" :key="index" class="order-item bg-white m-t-20" v-if="orderList.length">
|
|
<router-link :to="{path: '/bundle/pages/order_details/order_details', query: {id: item.id}}">
|
|
<view class="order-header flex row-between">
|
|
<view class="flex">
|
|
<view v-if="item.order_type == 1" class="m-r-10">
|
|
<u-tag text="秒杀" size="mini" type="primary" mode="plain" />
|
|
</view>
|
|
<view v-if="item.order_type == 2" class="m-r-10">
|
|
<u-tag text="拼团" size="mini" type="primary" mode="plain" />
|
|
</view>
|
|
<view v-if="item.order_type == 3" class="m-r-10">
|
|
<u-tag text="砍价" size="mini" type="primary" mode="plain" />
|
|
</view>
|
|
</view>
|
|
<shop-title :shop="item.shop"></shop-title>
|
|
<view :class="item.order_status == 4 ? 'muted' : 'primary'">
|
|
{{getOrderStatus(item.order_status)}}
|
|
</view>
|
|
</view>
|
|
<view class="order-con">
|
|
<order-goods :list="item.order_goods" :isJumpGoods="false"></order-goods>
|
|
<view class="all-price flex row-right">
|
|
<text class="muted xs">共{{item.goods_count}}件商品，实付款：</text>
|
|
<price-format weight="500" :subscript-size="30" :first-size="30" :second-size="30"
|
|
:price="item.order_amount"></price-format>
|
|
</view>
|
|
</view>
|
|
<view class="order-footer flex"
|
|
v-if="item.cancel_btn || item.delivery_btn || item.take_btn || item.del_btn || item.pay_btn || item.comment_btn || item.pay_status">
|
|
<view style="flex: 1">
|
|
<view class="primary flex sm" v-if="getCancelTime(item.order_cancel_time) > 0">
|
|
<u-count-down separator="zh"
|
|
:timestamp="getCancelTime(item.order_cancel_time)" :separator-color="colorConfig.primary"
|
|
:color="colorConfig.primary" :separator-size="26" :font-size="26" bg-color="transparent"
|
|
@end="refresh"></u-count-down>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.cancel_btn">
|
|
<button size="sm" class="plain br60 lighter" hover-class="none"
|
|
@tap.stop="cancelOrder(item.id)">
|
|
取消订单
|
|
</button>
|
|
</view>
|
|
<view v-if="item.delivery_btn" @tap.stop="">
|
|
<router-link
|
|
:to="{path: '/bundle/pages/goods_logistics/goods_logistics', query: {id: item.id}}">
|
|
<button size="sm" class="btn plain br60 lighter" hover-class="none">查看物流</button>
|
|
</router-link>
|
|
</view>
|
|
<view v-if="item.content_btn" @tap.stop="" class="m-l-20">
|
|
<router-link
|
|
:to="{path: '/bundle/pages/order_details/order_details', query: {id: item.id}}">
|
|
<button size="sm" class="btn plain br60 lighter" hover-class="none">查看内容</button>
|
|
</router-link>
|
|
</view>
|
|
<view v-if="item.del_btn">
|
|
<button size="sm" class="btn plain br60 lighter" hover-class="none"
|
|
@tap.stop="delOrder(item.id)">删除订单</button>
|
|
</view>
|
|
<view v-if="item.pay_btn" class="m-l-20">
|
|
<button size="sm" class="btn bg-primary br60 white" @tap.stop="payNow(item.id)">
|
|
立即付款
|
|
</button>
|
|
</view>
|
|
<view v-if="item.comment_btn" class="m-l-20">
|
|
<button size="sm" hover-class="none" class="btn plain btn br60 primary red">
|
|
去评价
|
|
</button>
|
|
</view>
|
|
<view v-if="item.take_btn" class="m-l-20">
|
|
<button size="sm" class="btn plain br60 primary red" hover-class="none"
|
|
@tap.stop="comfirmOrder(item.id)">确认收货</button>
|
|
</view>
|
|
|
|
<view class="m-l-20" v-if="item.pay_btn == 0">
|
|
<u-upload :custom-btn="true" ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
|
|
@on-success="onSuccess" :action="action" :show-upload-list="false" @on-uploaded="allUpload">
|
|
<view slot="addBtn" class="slot-btn">
|
|
<button size="sm" class="btn plain br60 primary red upBtn" hover-class="none" @tap="uploadChange(item.id,index)">上传合同</button>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
<view class="pre-box" v-if="item.frontend_array.length > 0">
|
|
<view class="pre-item" v-for="(items, indexs) in item.frontend_array" :key="indexs">
|
|
<image class="pre-item-image" :src="linkURL + items" mode="aspectFill" @tap.stop="doPreviewImage(indexs,index)"></image>
|
|
</view>
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
</view>
|
|
<order-dialog ref="orderDialog" :order-id="orderId" :type="type" @confirm="confirmDialog"></order-dialog>
|
|
<loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
|
|
|
|
<view class="download">
|
|
<button class="bg-primary br60 white btn" size="mini"
|
|
@click="contractDownload()">下载合同</button>
|
|
</view>
|
|
|
|
</mescroll-uni>
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
|
|
import {
|
|
getOrderList,
|
|
cancelOrder,
|
|
delOrder,
|
|
confirmOrder,
|
|
getContractDownload,
|
|
getContractUpload
|
|
} from '@/api/order';
|
|
import {baseURL} from '@/config/app';
|
|
import { setTimeout } from "timers";
|
|
export default {
|
|
mixins: [MescrollMixin, MescrollMoreItemMixin],
|
|
data() {
|
|
return {
|
|
orderList: [],
|
|
downOption: {
|
|
auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
|
|
},
|
|
upOption: {
|
|
auto: false, // 不自动加载
|
|
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
|
empty: {
|
|
icon: '/static/images/order_null.png',
|
|
tip: '暂无订单~', // 提示
|
|
fixed: true
|
|
}
|
|
},
|
|
showCancel: false,
|
|
type: 0,
|
|
orderId: "",
|
|
showLoading: false,
|
|
orderUploadText:{
|
|
index:'',
|
|
id:''
|
|
},
|
|
action: baseURL + '/api/file/formimage',
|
|
linkURL:baseURL + '/',
|
|
uploadImages:[]
|
|
};
|
|
},
|
|
props: {
|
|
orderType: {
|
|
type: String
|
|
}
|
|
},
|
|
created() {
|
|
uni.$on("refreshorder", () => {
|
|
this.refresh()
|
|
})
|
|
|
|
uni.$on('payment', params => {
|
|
setTimeout(() => {
|
|
if (params.result) {
|
|
this.$toast({ title: "支付成功" })
|
|
this.refresh()
|
|
} else {
|
|
this.$toast({ title: "支付失败" })
|
|
}
|
|
}, 500)
|
|
})
|
|
},
|
|
destroyed() {
|
|
uni.$off("payment")
|
|
uni.$off("refreshorder")
|
|
},
|
|
methods: {
|
|
async confirmDialog() {
|
|
const { type, orderId } = this
|
|
let res = null
|
|
switch (type) {
|
|
case 0:
|
|
res = await cancelOrder(orderId);
|
|
break;
|
|
|
|
case 1:
|
|
res = await delOrder(orderId);
|
|
break;
|
|
|
|
case 2:
|
|
res = await confirmOrder(orderId);
|
|
break;
|
|
}
|
|
|
|
if (res.code == 1) {
|
|
this.refresh()
|
|
this.$toast({
|
|
title: res.msg
|
|
});
|
|
}
|
|
},
|
|
dialogOpen() {
|
|
this.$refs.orderDialog.open()
|
|
},
|
|
refresh() {
|
|
this.mescroll.resetUpScroll()
|
|
},
|
|
delOrder(id) {
|
|
this.orderId = id
|
|
this.type = 1
|
|
this.$nextTick(() => {
|
|
this.dialogOpen();
|
|
});
|
|
},
|
|
|
|
comfirmOrder(id) {
|
|
this.orderId = id
|
|
this.type = 2
|
|
this.$nextTick(() => {
|
|
this.dialogOpen();
|
|
});
|
|
},
|
|
|
|
cancelOrder(id) {
|
|
this.orderId = id
|
|
this.type = 0
|
|
this.$nextTick(() => {
|
|
this.dialogOpen();
|
|
});
|
|
},
|
|
|
|
payNow(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/payment/payment?from=${'order'}&order_id=${id}`
|
|
})
|
|
},
|
|
|
|
upCallback(page) {
|
|
let pageNum = page.num; // 页码, 默认从1开始
|
|
let pageSize = page.size; // 页长, 默认每页10条
|
|
let {
|
|
orderType,
|
|
} = this;
|
|
getOrderList({
|
|
page_size: pageSize,
|
|
page_no: pageNum,
|
|
type: orderType
|
|
}).then(({
|
|
data
|
|
}) => {
|
|
let curPageData = data.list;
|
|
let curPageLen = curPageData.length;
|
|
let hasNext = !!data.more;
|
|
if (page.num == 1) this.orderList = [];
|
|
this.orderList = this.orderList.concat(curPageData);
|
|
this.mescroll.endSuccess(curPageLen, hasNext);
|
|
})
|
|
},
|
|
|
|
// 下载合同
|
|
contractDownload() {
|
|
uni.showLoading({
|
|
title:'加载中...'
|
|
});
|
|
let that = this;
|
|
getContractDownload().then(({
|
|
data
|
|
}) => {
|
|
let downloadUrl = baseURL + '/' + data.path;
|
|
uni.downloadFile({
|
|
url: downloadUrl,
|
|
success: (res) => {
|
|
console.log(res)
|
|
if (res.statusCode === 200) {
|
|
uni.saveFile({
|
|
tempFilePath: res.tempFilePath,
|
|
success: function (red) {
|
|
uni.hideLoading();
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '文件已保存：' + red.savedFilePath,
|
|
cancelText: '我知道了',
|
|
confirmText: '打开文件',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.openDocument({
|
|
filePath: red.savedFilePath,
|
|
showMenu: true,
|
|
success: (sus) => {
|
|
console.log('成功打开');
|
|
}
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
fail: function (err) {
|
|
that.$toast({
|
|
title: '保存失败'
|
|
})
|
|
}
|
|
});
|
|
}
|
|
},
|
|
fail: function (err) {
|
|
that.$toast({
|
|
title: '下载失败，请重新下载'
|
|
})
|
|
}
|
|
});
|
|
})
|
|
},
|
|
// 获取上传的节点
|
|
uploadChange(id,index) {
|
|
let that =this;
|
|
that.orderUploadText.index = index;
|
|
that.orderUploadText.id = id;
|
|
console.log(that.orderUploadText.id,that.orderUploadText.index)
|
|
},
|
|
onSuccess(e) {
|
|
let that = this;
|
|
that.uploadImages.push(e.data.base_uri);
|
|
that.orderList[that.orderUploadText.index].frontend_array = that.uploadImages;
|
|
that.$nextTick(() => {
|
|
that.$refs['uUpload'][that.orderUploadText.index].lists;
|
|
});
|
|
that.$set(that.orderList[that.orderUploadText.index].frontend_array);
|
|
},
|
|
|
|
allUpload(lists){
|
|
let that = this;
|
|
const result = lists.map(item => item.response.data.base_uri).join(',');
|
|
setTimeout(()=>{
|
|
let params = {
|
|
order_id:that.orderUploadText.id,
|
|
path:result
|
|
}
|
|
getContractUpload(params).then(({
|
|
code
|
|
}) => {
|
|
if(code == 1) {
|
|
uni.showToast({
|
|
title: '上传成功',
|
|
icon: 'success'
|
|
});
|
|
that.uploadImages = [];
|
|
}
|
|
})
|
|
},200)
|
|
},
|
|
|
|
// 预览图片
|
|
doPreviewImage(indexs, index) {
|
|
let that = this;
|
|
const images = that.orderList[index].frontend_array.map(item => {
|
|
return that.linkURL + item
|
|
});
|
|
uni.previewImage({
|
|
urls: images,
|
|
current:indexs,
|
|
success: () => {
|
|
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: '预览图片失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
},
|
|
computed: {
|
|
getOrderStatus() {
|
|
return (status) => {
|
|
let text = ''
|
|
switch (status) {
|
|
case 0:
|
|
text = '待支付';
|
|
break;
|
|
case 1:
|
|
text = '待发货';
|
|
break;
|
|
case 2:
|
|
text = '待收货';
|
|
break;
|
|
case 3:
|
|
text = '已完成';
|
|
break;
|
|
case 4:
|
|
text = '订单已关闭';
|
|
break;
|
|
}
|
|
return text
|
|
}
|
|
},
|
|
getCancelTime() {
|
|
return (time) => time - Date.now() / 1000
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.order-list {
|
|
min-height: calc(100vh - 80rpx);
|
|
padding: 0 20rpx;
|
|
overflow: hidden;
|
|
padding-bottom: 120rpx !important;
|
|
.order-item {
|
|
border-radius: 10rpx;
|
|
|
|
.order-header {
|
|
height: 80rpx;
|
|
padding: 0 24rpx;
|
|
border-bottom: 1px dotted #E5E5E5;
|
|
}
|
|
|
|
.all-price {
|
|
text-align: right;
|
|
padding: 0 24rpx 20rpx;
|
|
}
|
|
|
|
.order-footer {
|
|
height: 100rpx;
|
|
border-top: $-solid-border;
|
|
padding: 0 24rpx;
|
|
|
|
.plain {
|
|
border: 1px solid #BBBBBB;
|
|
|
|
&.red {
|
|
border-color: $-color-primary;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.download {
|
|
position: fixed;
|
|
left:0%;
|
|
bottom:0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
padding:14rpx 0;
|
|
background-color: #fff;
|
|
border-top: 1px solid #ececec;
|
|
box-shadow: 0 0 30rpx rgba(0,0,0,0.1);
|
|
.btn {
|
|
width: 88%;
|
|
margin: 0 auto;
|
|
font-size: 30rpx;
|
|
display: block;
|
|
background: linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36));
|
|
}
|
|
}
|
|
|
|
|
|
.pre-box {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pre-item {
|
|
width: 120rpx;
|
|
border-radius: 6rpx;
|
|
height: 120rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin-bottom: 20rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.pre-item-image {
|
|
width: 100%;
|
|
height: 120rpx;
|
|
}
|
|
</style>
|