365 lines
15 KiB
Vue
365 lines
15 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 活动订单 -->
|
||
<view class="order-tab">
|
||
<view class="order-tab-item" :class="{active : order.stateType == 'all'}" @click="orderTab('all')">
|
||
全部
|
||
</view>
|
||
<view class="order-tab-item" :class="{active : order.stateType == 'unpay'}" @click="orderTab('unpay')">
|
||
待支付
|
||
</view>
|
||
<view class="order-tab-item" :class="{active : order.stateType == 'paid'}" @click="orderTab('paid')">
|
||
{{order.orderType == 'welfare' || order.orderType == 'rights' ? '待发货' : '已支付'}}
|
||
</view>
|
||
<view class="order-tab-item" :class="{active : order.stateType == 'delivered'}" @click="orderTab('delivered')" v-if="order.orderType == 'welfare' || order.orderType == 'rights'">
|
||
已发货
|
||
</view>
|
||
<view class="order-tab-item" :class="{active : order.stateType == 'completed'}" @click="orderTab('completed')" v-else>
|
||
已完成
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 列表 -->
|
||
<view class="order-content" v-if="order.orderArr.length > 0">
|
||
<view class="order-content-li" v-for="(item,index) in order.orderArr" :key="index">
|
||
<view class="uni-border-down order-store">
|
||
<view class="order-store-title nowrap">{{ item.orderid }}</view>
|
||
<view class="order-store-stateText red" v-if="item.state_text == '未支付' || item.status_text == '未支付'">
|
||
{{ item.state_text ||item.status_text }}
|
||
</view>
|
||
<view class="order-store-stateText green" v-else-if="item.state_text == '已支付' || item.status_text == '已支付'">
|
||
{{ item.state_text || item.status_text }}
|
||
</view>
|
||
<view class="order-store-stateText" v-else>{{ item.state_text || item.status_text }}</view>
|
||
</view>
|
||
<view class="order-goods">
|
||
<image class="order-goods-cover" v-if="item.items" :src="item.items.cover" mode="aspectFill"></image>
|
||
<image class="order-goods-cover" v-else-if="item.source" :src="item.source.right.cover" mode="aspectFill"></image>
|
||
<view class="order-goods-content">
|
||
<!-- 名称 -->
|
||
<view class="order-goods-content-name nowrap" v-if="item.items">{{ item.items.title }}</view>
|
||
<view class="order-goods-content-name nowrap" v-else-if="item.source">{{ item.source.right.title }}</view>
|
||
|
||
<!-- 权益标签 实物或券 -->
|
||
<view class="orderVirtual" v-if="order.orderType == 'welfare'">{{ item.type_text }}</view>
|
||
<view class="orderVirtual" v-else-if="order.orderType == 'welfareGoods'">{{ item.type_text }}</view>
|
||
<view class="orderVirtual" :class="{active : item.items.type != 'virtual'}" v-else>
|
||
<block v-if="item.items.type == 'virtual'">红包电子券</block>
|
||
<block v-else>实物券</block>
|
||
</view>
|
||
|
||
<!-- 权益购买数量 -->
|
||
<view class="order-goods-content-price nowrap" v-if="item.items">
|
||
<text>￥{{ item.items.price }}</text> × {{ item.items.qty ? item.items.qty : '1' }}
|
||
</view>
|
||
<view class="order-goods-content-price nowrap" v-else-if="item.source">
|
||
<text>￥{{ item.source.welfare.price }}</text>× 1
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="uni-border-top order-btns">
|
||
<navigator class="order-btn" :url="'/pages/order/orderData?id=' + item.orderid + '&orderType=' + order.orderType">订单详情</navigator>
|
||
<!-- 取消订单 -->
|
||
<view class="order-btn" @click="orderDelete(item.orderid)" v-if="item.canCancel == true">取消订单</view>
|
||
<block v-if="item.can">
|
||
<view class="order-btn" @click="orderDelete(item.orderid)" v-if="item.can.cancel == true">取消订单</view>
|
||
</block>
|
||
<!-- 立即支付 -->
|
||
<view class="order-btn order-btn-back" @click="submitPay(item.orderid)" v-if="item.canPay == true">立即支付</view>
|
||
<block v-if="item.can">
|
||
<view class="order-btn order-btn-back" @click="submitPay(item.orderid)" v-if="item.can.pay == true">立即支付</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pack-center pages-hint" v-else>
|
||
<image src="/static/img/null_icon.png"></image>
|
||
<view>暂无订单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { welfare, welfareCoupons, orders, ordersCoupons, cancel, welfaresCancel } from '@/apis/interfaces/user'
|
||
import { rightsSingle } from '@/apis/interfaces/rights'
|
||
import { welfSingle } from '@/apis/interfaces/welfares'
|
||
export default {
|
||
data() {
|
||
return {
|
||
order: {
|
||
orderType : '', // 订单来源
|
||
stateType : 'all', // 状态
|
||
orderArr : [] // 列表
|
||
},
|
||
load: {
|
||
page : 1, // 第一页
|
||
allpage : 0, // 总页数
|
||
has_more: false, // 是否有分页
|
||
show : false // 是否有下一页数据
|
||
},
|
||
finished : false, // 商品列表没有更多商品是否显示
|
||
LoadData : false // 数据加载完渲染
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.order.orderType = options.orderType
|
||
},
|
||
onShow() {
|
||
// 获取商品活动订单
|
||
this.orderInfo();
|
||
},
|
||
methods:{
|
||
// 商品活动订单
|
||
orderInfo() {
|
||
if (this.load.page == 1) {
|
||
this.order.orderArr = [];
|
||
}
|
||
let url = ''
|
||
if(this.order.orderType == 'welfare') url = welfare
|
||
if(this.order.orderType == 'welfareGoods') url = welfareCoupons
|
||
if(this.order.orderType == 'rights') url = orders
|
||
if(this.order.orderType == 'rightsCoupons') url = ordersCoupons
|
||
url({
|
||
type : this.order.stateType,
|
||
page : this.load.page
|
||
}).then(res=>{
|
||
this.order.orderArr = this.order.orderArr.concat(res.data)
|
||
this.load.allpage = res.page.total_page
|
||
this.load.has_more = res.page.has_more
|
||
})
|
||
},
|
||
|
||
// tabs
|
||
orderTab(state){
|
||
if(this.order.stateType != state){
|
||
this.order.stateType = state
|
||
// 获取商品活动订单
|
||
this.orderInfo()
|
||
}
|
||
},
|
||
|
||
// 取消订单
|
||
orderDelete(orderId) {
|
||
uni.showModal({
|
||
title : '订单取消',
|
||
content : '确认取消吗？',
|
||
success : res=> {
|
||
if (res.confirm) {
|
||
let url = ''
|
||
if(this.order.orderType == 'welfare' || this.order.orderType == 'welfareGoods') url = welfaresCancel
|
||
if(this.order.orderType == 'rights' || this.order.orderType == 'rightsCoupons') url = cancel
|
||
url(orderId).then(res=>{
|
||
// 获取商品活动订单
|
||
this.orderInfo()
|
||
})
|
||
} else if (res.cancel) {
|
||
uni.showToast({
|
||
title : '取消',
|
||
icon : 'loading',
|
||
duration: 1000
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 支付选择弹出
|
||
submitPay(orderid) {
|
||
let new_activity_type = '',
|
||
new_deliver = ''
|
||
// welfareGoods welfare
|
||
if(this.order.orderType == 'welfare') {
|
||
new_activity_type = 'welfare'
|
||
new_deliver = 0
|
||
this.welfSingleData(orderid).then(res => {
|
||
this.navigateUrl(res.trade_no,res.amount,new_deliver,new_activity_type)
|
||
})
|
||
}
|
||
else if(this.order.orderType == 'welfareGoods') {
|
||
new_activity_type = 'welfare'
|
||
new_deliver = 1
|
||
this.welfSingleData(orderid).then(res => {
|
||
this.navigateUrl(res.trade_no,res.amount,new_deliver,new_activity_type)
|
||
})
|
||
}
|
||
else if(this.order.orderType == 'rights') {
|
||
new_activity_type = 'right'
|
||
new_deliver = 0
|
||
this.rightsSingleData(orderid).then(res => {
|
||
this.navigateUrl(res.trade_no,res.amount,new_deliver,new_activity_type)
|
||
})
|
||
}
|
||
else {
|
||
new_activity_type = 'right'
|
||
new_deliver = 1
|
||
this.rightsSingleData(orderid).then(res => {
|
||
this.navigateUrl(res.trade_no,res.amount,new_deliver,new_activity_type)
|
||
})
|
||
}
|
||
},
|
||
|
||
// 周五福利单订单
|
||
welfSingleData(tradeNo) {
|
||
return new Promise((resolve, reject) => {
|
||
welfSingle(tradeNo).then(res=>{
|
||
resolve(res)
|
||
})
|
||
})
|
||
},
|
||
|
||
// 权益单订单
|
||
rightsSingleData(tradeNo) {
|
||
return new Promise((resolve, reject) => {
|
||
rightsSingle(tradeNo).then(res=>{
|
||
resolve(res)
|
||
})
|
||
})
|
||
},
|
||
|
||
// 跳转收银台
|
||
navigateUrl(orderid,newPrice,new_deliver,new_activity_type) {
|
||
uni.navigateTo({
|
||
url: "/pages/cashier/index?tradeNo=" + orderid + '&price=' + newPrice + "&deliver=" + new_deliver + "&activity_type=" + new_activity_type + "&type=default"
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 活动订单
|
||
.order-tab {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
z-index: 9;
|
||
background: white;
|
||
.order-tab-item {
|
||
font-size: 28rpx;
|
||
width: 25%;
|
||
text-align: center;
|
||
border-bottom: solid 2rpx #f7f7f7;
|
||
color: #464854;
|
||
background: white;
|
||
position: relative;
|
||
&.active {
|
||
color: #f57e32;
|
||
}
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 30rpx;
|
||
height: 4rpx;
|
||
background: transparent;
|
||
left: calc(50% - 15rpx);
|
||
bottom: -2rpx;
|
||
}
|
||
&.active::after {
|
||
background: #f57e32;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 订单列表 */
|
||
.order-content {
|
||
padding: 80rpx 0 20rpx 0;
|
||
.order-content-li {
|
||
background: white;
|
||
margin-top: 20rpx;
|
||
position: relative;
|
||
.order-store {
|
||
padding: 20rpx;
|
||
border-bottom: solid 1rpx #f3f3f3;
|
||
display: flex;
|
||
.order-store-title {
|
||
flex: 1;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
.order-store-stateText {
|
||
color: #e6b329;
|
||
font-size: 26rpx;
|
||
&.red {
|
||
color: #e92344;
|
||
}
|
||
&.green {
|
||
color: #79b300;
|
||
}
|
||
}
|
||
}
|
||
.order-goods {
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.order-goods-cover {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
vertical-align: top;
|
||
border-radius: 4rpx;
|
||
}
|
||
.order-goods-content {
|
||
position: absolute;
|
||
left: 190rpx;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
width: calc(100% - 210rpx);
|
||
.order-goods-content-name {
|
||
margin-bottom: 10rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
.orderVirtual {
|
||
background: #88be2d;
|
||
color: #fff;
|
||
border-radius: 4rpx;
|
||
display: inline-block;
|
||
font-size: 24rpx;
|
||
padding: 2rpx 8rpx;
|
||
&.active {
|
||
background: #f57e32;
|
||
}
|
||
}
|
||
.order-goods-content-price {
|
||
color: #747788;
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
font-size: 28rpx;
|
||
text {
|
||
color: #f57e32;
|
||
display: inline-block;
|
||
margin-right: 10rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.order-btns {
|
||
font-size: 25rpx;
|
||
display: flex;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
flex-direction: row-reverse;
|
||
.order-btn {
|
||
margin-left: 20rpx;
|
||
height: 52rpx;
|
||
line-height: 50rpx;
|
||
box-sizing: border-box;
|
||
border: solid 1rpx #747788;
|
||
padding: 0 20rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
.order-btn-back {
|
||
border-color: #f57e32;
|
||
color: #f57e32;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|