zhangjing/ysdH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[本时生活h5端]

Browse Source
This commit is contained in:
张慢慢
2023-06-21 17:19:58 +08:00
commit ebb9575bd0
284 changed files with 39689 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
pages/order/order.vue Normal file
View File

@@ -0,0 +1,364 @@
<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>