|
|
@@ -1,63 +1,89 @@
|
|
|
<template>
|
|
|
- <div class="orderlist" v-if="orderList.length">
|
|
|
- <div class="o_item" v-for="(i,s) in orderList" :key="s" @click="entrance(i)">
|
|
|
- <div class="p1 flex_r flex_jb">
|
|
|
- <span class="name_tit ellipsis">{{ i.restaurant_name }}</span>
|
|
|
- <span class="status">{{ typeto(i.status) }}</span>
|
|
|
- </div>
|
|
|
- <div class="p2 flex_r flex_jb" v-if="i.type == 0">
|
|
|
- <div class="goods ellipsis">
|
|
|
- <div class="imgs" v-for="(a,b) in i.orderGoods" :key="b">
|
|
|
- <img :src="a.product_img" alt="" class="g_img">
|
|
|
- <div class="na ellipsis">{{ a.product_name }}</div>
|
|
|
+ <div class="orders">
|
|
|
+ <div class="tabs flex_r flex_jse">
|
|
|
+ <div v-for="(i,s) in tabs" :key="s" :class="{active:activeKey==i.key}" @click="ontab(i.key)">{{i.text}}</div>
|
|
|
+ </div>
|
|
|
+ <template v-if="activeKey == 1">
|
|
|
+ <div class="orderlist" v-if="orderList.length">
|
|
|
+ <div class="o_item" v-for="(i,s) in orderList" :key="s" @click="entrance(i)">
|
|
|
+ <div class="p1 flex_r flex_jb">
|
|
|
+ <span class="name_tit ellipsis">{{ i.restaurant_name }}</span>
|
|
|
+ <span class="status">{{ typeto(i.status) }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="g_amount"><span class="amount dinB">{{ i.actually_paid || i.pay_amount }}</span></div>
|
|
|
- </div>
|
|
|
- <div class="p2 flex_r flex_jb" v-else-if="i.type == 1">
|
|
|
- <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
|
|
|
- <div class="info flex_c flex_jb">
|
|
|
- <p class="pt">{{ a.product_name }}</p>
|
|
|
- <p class="p">{{ a.number }}张</p>
|
|
|
- <p class="p">实付 ￥{{ i.actually_paid || i.pay_amount }}</p>
|
|
|
- <p class="p">{{ neaten1(i.product_detail,i.type) }}</p>
|
|
|
+ <div class="p2 flex_r flex_jb" v-if="i.type == 0">
|
|
|
+ <div class="goods ellipsis">
|
|
|
+ <div class="imgs" v-for="(a,b) in i.orderGoods" :key="b">
|
|
|
+ <img :src="a.product_img" alt="" class="g_img">
|
|
|
+ <div class="na ellipsis">{{ a.product_name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="g_amount"><span class="amount dinB">{{ i.actually_paid || i.pay_amount }}</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="p2 flex_r flex_jb" v-else-if="i.type == 1">
|
|
|
+ <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
|
|
|
+ <div class="info flex_c flex_jb">
|
|
|
+ <p class="pt">{{ a.product_name }}</p>
|
|
|
+ <p class="p">{{ a.number }}张</p>
|
|
|
+ <p class="p">实付 ￥{{ i.actually_paid || i.pay_amount }}</p>
|
|
|
+ <p class="p">{{ neaten1(i.product_detail,i.type) }}</p>
|
|
|
+ </div>
|
|
|
+ <image class="poster" mode="aspectFill" :src="a.product_img" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <image class="poster" mode="aspectFill" :src="a.product_img" />
|
|
|
+ <div class="p2 flex_r flex_jb" v-else-if="[2,3,6].includes(i.type)">
|
|
|
+ <div class="goods good2 ellipsis">
|
|
|
+ <div class="p" v-for="(a,b) in i.orderGoods" :key="b">{{ a.product_name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="g_amount"><span class="amount dinB">{{ i.actually_paid || i.pay_amount }}</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="p2 flex_r flex_jb" v-else-if="i.type == 4">
|
|
|
+ <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
|
|
|
+ <div class="info flex_c flex_jb">
|
|
|
+ <p class="pt">{{ a.product_name }}</p>
|
|
|
+ <p class="p">{{ a.number }}间</p>
|
|
|
+ <p class="p">实付 ￥{{ i.actually_paid || i.pay_amount }}</p>
|
|
|
+ <p class="p" v-if="a.attachment">{{ neaten2(a.attachment,i.type) }}</p>
|
|
|
+ </div>
|
|
|
+ <image class="poster" mode="aspectFill" :src="a.product_img" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="p2 flex_r flex_jb" v-else-if="i.type == 5">
|
|
|
+ <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
|
|
|
+ <image class="poster" mode="aspectFill" :src="a.product_img" />
|
|
|
+ <div class="info flex_c flex_jb">
|
|
|
+ <p class="pt">{{ a.product_name }}</p>
|
|
|
+ <p class="p">{{ a.number }}张</p>
|
|
|
+ <p class="p">实付 ￥{{ i.actually_paid || i.pay_amount }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="p3">下单时间：{{ i.create_time }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="p2 flex_r flex_jb" v-else-if="[2,3,6].includes(i.type)">
|
|
|
- <div class="goods good2 ellipsis">
|
|
|
- <div class="p" v-for="(a,b) in i.orderGoods" :key="b">{{ a.product_name }}</div>
|
|
|
- </div>
|
|
|
- <div class="g_amount"><span class="amount dinB">{{ i.actually_paid || i.pay_amount }}</span></div>
|
|
|
+ <div class="zanwu" v-else>
|
|
|
+ <img src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/5a3c6b1e2d098aa6695394c927c38586545188b8png" alt="" class="zanwuimg">
|
|
|
+ <view class="zanwutxt">暂无订单信息</view>
|
|
|
</div>
|
|
|
- <div class="p2 flex_r flex_jb" v-else-if="i.type == 4">
|
|
|
- <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
|
|
|
- <div class="info flex_c flex_jb">
|
|
|
- <p class="pt">{{ a.product_name }}</p>
|
|
|
- <p class="p">{{ a.number }}间</p>
|
|
|
- <p class="p">实付 ￥{{ i.actually_paid || i.pay_amount }}</p>
|
|
|
- <p class="p" v-if="a.attachment">{{ neaten2(a.attachment,i.type) }}</p>
|
|
|
+ </template>
|
|
|
+ <template v-if="activeKey == 2">
|
|
|
+ <div class="orderlist" v-if="selfSupportList.length">
|
|
|
+ <div class="o_item" v-for="(i,s) in selfSupportList" :key="s" @click="entrance(i)">
|
|
|
+ <div class="p1 flex_r flex_jb">
|
|
|
+ <span class="name_tit ellipsis">{{ i.name }}</span>
|
|
|
</div>
|
|
|
- <image class="poster" mode="aspectFill" :src="a.product_img" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="p2 flex_r flex_jb" v-else-if="i.type == 5">
|
|
|
- <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
|
|
|
- <image class="poster" mode="aspectFill" :src="a.product_img" />
|
|
|
- <div class="info flex_c flex_jb">
|
|
|
- <p class="pt">{{ a.product_name }}</p>
|
|
|
- <p class="p">{{ a.number }}张</p>
|
|
|
- <p class="p">实付 ￥{{ i.actually_paid || i.pay_amount }}</p>
|
|
|
+ <div class="p2 flex_r flex_jb">
|
|
|
+ <div class="goods good2 ">金额</div>
|
|
|
+ <div class="g_amount"><span class="amount dinB">{{ i.order_amount }}</span></div>
|
|
|
</div>
|
|
|
+ <div class="p3">订单编号：{{ i.order_no }}</div>
|
|
|
+ <div class="p3 mt-10">下单时间：{{ i.create_time }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="p3">下单时间：{{ i.create_time }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="zanwu" v-else>
|
|
|
- <img src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/5a3c6b1e2d098aa6695394c927c38586545188b8png" alt="" class="zanwuimg">
|
|
|
- <view class="zanwutxt">暂无订单信息</view>
|
|
|
+ <div class="zanwu" v-else>
|
|
|
+ <img src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/5a3c6b1e2d098aa6695394c927c38586545188b8png" alt="" class="zanwuimg">
|
|
|
+ <view class="zanwutxt">暂无订单信息</view>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -69,6 +95,17 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
orderList: [],
|
|
|
+ tabs: [
|
|
|
+ { key: 1, text: "我的订单" },
|
|
|
+ { key: 2, text: "快捷买单" },
|
|
|
+ ],
|
|
|
+ activeKey: 1,
|
|
|
+ Query: {
|
|
|
+ page: 1,
|
|
|
+ rows: 20,
|
|
|
+ },
|
|
|
+ pageData: {},
|
|
|
+ selfSupportList: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -81,43 +118,103 @@ export default {
|
|
|
},
|
|
|
typeto(va) {
|
|
|
switch (va) {
|
|
|
- case 0: return "待支付";
|
|
|
- case 1: return "已下单";
|
|
|
- case 2: return "已完成";
|
|
|
- case 3: return "下单失败";
|
|
|
- case 4: return "失败";
|
|
|
- default: return ""
|
|
|
+ case 0:
|
|
|
+ return "待支付";
|
|
|
+ case 1:
|
|
|
+ return "已下单";
|
|
|
+ case 2:
|
|
|
+ return "已完成";
|
|
|
+ case 3:
|
|
|
+ return "下单失败";
|
|
|
+ case 4:
|
|
|
+ return "失败";
|
|
|
+ default:
|
|
|
+ return ""
|
|
|
}
|
|
|
},
|
|
|
entrance(i) {
|
|
|
if (i.type == 0) this.goto('/pagesB/orderingfood/detail', { trade_no: i.trade_no, brand_id: i.brand_id })
|
|
|
else if (i.type == 1) this.goto('/pagesB/cinema/cinemaTicket', { tradeNo: i.trade_no })
|
|
|
- else if ([2,3].includes(i.type)) this.goto('/pagesB/directCharge/orderDetail', { trade_no: i.trade_no })
|
|
|
+ else if ([2, 3].includes(i.type)) this.goto('/pagesB/directCharge/orderDetail', { trade_no: i.trade_no })
|
|
|
else if (i.type == 4) this.goto('/pagesB/hotel/orderDetail', { trade_no: i.trade_no })
|
|
|
else if (i.type == 5) this.goto('/pagesB/scenicSpotTicket/orderDetail', { trade_no: i.trade_no })
|
|
|
else if (i.type == 6) this.goto('/pagesB/prepaidRefill/orderDetail', { trade_no: i.trade_no })
|
|
|
},
|
|
|
- neaten1(va,type){
|
|
|
- if(va && type == 1){
|
|
|
+ neaten1(va, type) {
|
|
|
+ if (va && type == 1) {
|
|
|
let arr = JSON.parse(va)
|
|
|
return arr.map(item => item.seatName).join("，")
|
|
|
}
|
|
|
},
|
|
|
- neaten2(va,type){
|
|
|
- if(type == 4){
|
|
|
+ neaten2(va, type) {
|
|
|
+ if (type == 4) {
|
|
|
let da = JSON.parse(va)
|
|
|
return `${da.windowType}，${da.breakfast}，${da.bedType}，${da.useableArea}`
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ ontab(va) {
|
|
|
+ // uni.showLoading({title: '加载中'})
|
|
|
+ this.activeKey = va
|
|
|
+ },
|
|
|
+ getList(page) {
|
|
|
+ if (page) {
|
|
|
+ this.list = []
|
|
|
+ this.Query.page = 1
|
|
|
+ }
|
|
|
+ post("v1/merchant/ordersList", this.Query).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ let da = res.data.data
|
|
|
+ delete res.data.data
|
|
|
+ this.pageData = res.data
|
|
|
+ this.selfSupportList = [...this.selfSupportList, ...da]
|
|
|
+ this.Query.page++
|
|
|
+ uni.hideLoading()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
},
|
|
|
onLoad(da) {
|
|
|
this.getorderList()
|
|
|
+ this.getList()
|
|
|
},
|
|
|
onShow() {},
|
|
|
mounted() {},
|
|
|
+ computed: {
|
|
|
+ isShow1() {
|
|
|
+ return this.orderList.length && this.activeKey == 1
|
|
|
+ },
|
|
|
+ isShow2() {
|
|
|
+ return this.selfSupportList.length && this.activeKey == 2
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.Query.page < this.pageData.last_page) this.getList();
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang='scss'>
|
|
|
+.tabs {
|
|
|
+ padding: 30rpx 0 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 18rpx;
|
|
|
+
|
|
|
+ .active {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ width: 88rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background-color: #2E57FD;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 2rpx;
|
|
|
+ bottom: -8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.orderlist {
|
|
|
padding: 28rpx 32rpx;
|
|
|
}
|
|
|
@@ -127,6 +224,7 @@ export default {
|
|
|
padding: 25rpx 30rpx;
|
|
|
border-radius: 16rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
+ // box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
@@ -184,8 +282,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .good2{
|
|
|
- .p{
|
|
|
+ .good2 {
|
|
|
+ .p {
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
}
|
|
|
@@ -193,28 +291,35 @@ export default {
|
|
|
.Movie {
|
|
|
// padding: 25rpx 28rpx;
|
|
|
width: 100%;
|
|
|
- .info,.poster{
|
|
|
+
|
|
|
+ .info,
|
|
|
+ .poster {
|
|
|
vertical-align: text-top;
|
|
|
}
|
|
|
- .info{
|
|
|
+
|
|
|
+ .info {
|
|
|
width: calc(100% - 180rpx);
|
|
|
min-height: 220rpx;
|
|
|
- p{
|
|
|
+
|
|
|
+ p {
|
|
|
font-size: 26rpx;
|
|
|
color: #666;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
- .pt{
|
|
|
+
|
|
|
+ .pt {
|
|
|
font-weight: bold;
|
|
|
color: #000;
|
|
|
font-size: 30rpx;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
- .p{
|
|
|
+
|
|
|
+ .p {
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
- .poster{
|
|
|
+
|
|
|
+ .poster {
|
|
|
width: 150rpx;
|
|
|
height: 220rpx;
|
|
|
border-radius: 12rpx;
|
|
|
@@ -243,4 +348,8 @@ export default {
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.mt-10 {
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
</style>
|
DaMowang