320 lines
8.6 KiB
Vue
320 lines
8.6 KiB
Vue
<template>
|
||
<view>
|
||
<view class="box">
|
||
<view class="tabList">
|
||
<view :class="['tabItem', currentIdx == 0 ? 'active' : '']" @click="changeIdx(0)">活动列表</view>
|
||
<view class="line"></view>
|
||
<view :class="['tabItem', currentIdx == 1 ? 'active' : '']" @click="changeIdx(1)">我的订单</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="currentIdx == 0">
|
||
<view class="drawTit">
|
||
领取说明
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/explain.png" mode="widthFix"
|
||
@click="onChangeShow" />
|
||
</view>
|
||
<view class="stride">
|
||
<view class="strideItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myReservation_icon1.png" mode="widthFix" />
|
||
手机下单
|
||
</view>
|
||
<view class="stideIcon">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myres_icon.png" mode="widthFix" />
|
||
</view>
|
||
<view class="strideItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myReservation_icon2.png" mode="widthFix" />
|
||
到店核销
|
||
</view>
|
||
<view class="stideIcon">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myres_icon.png" mode="widthFix" />
|
||
</view>
|
||
<view class="strideItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myReservation_icon3.png" mode="widthFix" />
|
||
订单完成
|
||
</view>
|
||
<view class="stideIcon">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myres_icon.png" mode="widthFix" />
|
||
</view>
|
||
<view class="strideItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myReservation_icon4.png" mode="widthFix" />
|
||
领取礼品
|
||
</view>
|
||
</view>
|
||
<view class="gray"></view>
|
||
|
||
|
||
<view class="goodsItem" v-if="goodsList.length != 0" v-for="(item, index) in goodsList" :key="index">
|
||
<view class="goodsItem_left">
|
||
<view class="goodsImg">
|
||
<image :src="item.photo" mode="" />
|
||
</view>
|
||
<view class="goodsmsg">
|
||
<view class="name">{{ item.title }}</view>
|
||
<view class="num">{{ item.total }}个</view>
|
||
</view>
|
||
</view>
|
||
<view class="goodsItem_right">
|
||
<view class="right_top" @click="headerLookClick">查看自提点
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/filter_more.png" mode="" />
|
||
</view>
|
||
<view class="right_bottom" @click="desc(item.activity_id, item.total)">去领取</view>
|
||
</view>
|
||
</view>
|
||
<u-empty v-if="goodsList.length == 0" iconSize="100rpx" text="暂无内容" mode="order" textSize="24"></u-empty>
|
||
|
||
</view>
|
||
<view class="order" v-if="currentIdx == 1">
|
||
<!-- 自行封装下拉组件 -->
|
||
<dropdown :options="option1" @change2="headerSelectClick"/>
|
||
|
||
<view class="main" v-if="orderList.length != 0" v-for="(item, index) in orderList" :key="index">
|
||
<view class="item_header">
|
||
<image src="https://huishang.magicany.cc/static/xiaoqu/2024/09/14/66e4ed5abe092.jpg" mode=""
|
||
class="item_left" />
|
||
<view class="item_right">
|
||
<view class="right_left">
|
||
<view class="shop_title">{{ item.activity.title }}</view>
|
||
<view class="shop_num">{{ item.num }}个</view>
|
||
<view class="shop_time">{{ item.activity.sign_end }}可用</view>
|
||
</view>
|
||
<view class="right_status">{{ statusType[item.status] }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="item_bottom" v-if="item.status === 1">
|
||
<view class="btn" :data-id="item.activity_id" :data-orderId="item.id" data-name="modify"
|
||
@click="headerPickClick(item.activity_id, item.id, 'modify')">修改数量</view>
|
||
<view class="btn look" @click="headerLookClick">查看自提点</view>
|
||
<view class="btn use" @click="headerGoPayClick(item.activity.title, item.qrcode)">去使用</view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-empty v-if="orderList.length == 0" iconSize="100rpx" text="暂无内容" mode="order" textSize="24"></u-empty>
|
||
|
||
</view>
|
||
<u-popup :show="show" mode="center" @close="onChangeShow" :round="10" closeOnClickOverlay>
|
||
<view class="drawMsg">
|
||
<view class="drawMsg_tit">领取规则说明</view>
|
||
<view class="drawMsg_con">
|
||
<view>1.用户需要通过官方小程序完成商品预约， 成功后将生成唯一电子凭证（含二维码+8 位验证码）预约凭证仅限本人使用。</view>
|
||
<view> 2.预约成功后请在规定时间内自提，逾期未领取，系统自动作废，商品领取权益终止。</view>
|
||
</view>
|
||
<view class="vrawMsg_btn" @click="onChangeShow">知道了</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { request, picUrl, NavgateTo } from '../../utils/index';
|
||
import { apiArr } from '../../api/reservation';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusType: {
|
||
1: '待核销',
|
||
2: '已核销',
|
||
3: '已取消'
|
||
},
|
||
show: false,
|
||
currentIdx: 0,
|
||
option1: [{
|
||
text: '全部',
|
||
value: 0
|
||
},
|
||
{
|
||
text: '待使用',
|
||
value: 1
|
||
},
|
||
{
|
||
text: '已完成',
|
||
value: 2
|
||
},
|
||
],
|
||
orderList: [],
|
||
value1: 0,
|
||
|
||
page_num: 1,
|
||
page_size: 10,
|
||
flag: false,
|
||
|
||
goodsList: [],
|
||
orderList: [],
|
||
}
|
||
},
|
||
methods: {
|
||
changeIdx(e) {
|
||
this.currentIdx = e;
|
||
this.page_num = 1;
|
||
this.flag = false;
|
||
this.orderList = [];
|
||
this.goodsList = [];
|
||
|
||
if (e == 0) {
|
||
uni.setNavigationBarTitle({
|
||
title: '我的商品',
|
||
})
|
||
this.getActiveList();
|
||
} else {
|
||
uni.setNavigationBarTitle({
|
||
title: '我的订单',
|
||
})
|
||
this.getOrderList();
|
||
}
|
||
},
|
||
|
||
headerPickClick(id, orderId, name) {
|
||
NavgateTo(`/reservation/receive/index?id=${id}&name=${name}&orderId=${orderId}`, {isLogin: false })
|
||
},
|
||
|
||
headerGoPayClick(title, pic) {
|
||
console.log('去使用', title, pic);
|
||
NavgateTo(`/reservation/ticketCode/index?pic=${pic}&name=${title}`, {isLogin: false })
|
||
},
|
||
|
||
// 筛选指定状态订单
|
||
headerSelectClick(item) {
|
||
console.log('1', item.detail.__args__[0].value);
|
||
let detail = {
|
||
text: item.detail.__args__[0].text,
|
||
value: item.detail.__args__[0].value,
|
||
}
|
||
console.log('item', detail);
|
||
this.page_num = 1;
|
||
this.flag = false,
|
||
this.orderList = [],
|
||
this.getOrderList(detail);
|
||
},
|
||
|
||
onChangeShow() {
|
||
this.show = !this.show;
|
||
},
|
||
|
||
desc(id, total) {
|
||
console.log('NavgateTo', id);
|
||
console.log('totaltotaltotal', total);
|
||
if (total === 0) {
|
||
uni.showToast({
|
||
title: '暂无可领取数量',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
NavgateTo(`/reservation/receive/index?id=${id}`, {isLogin: false });
|
||
},
|
||
|
||
headerLookClick() {
|
||
uni.getLocation({
|
||
type: "gcj02",
|
||
success(res) {
|
||
NavgateTo(`/reservation/pickPoint/index?lat=${res.latitude}&log=${res.longitude}`, { isLogin: false })
|
||
},
|
||
fail(err) {
|
||
console.log('errr', err);
|
||
}
|
||
})
|
||
},
|
||
|
||
//商品列表
|
||
async getActiveList() {
|
||
const res = await request(apiArr.getActiveList, 'POST', {
|
||
page_num: this.page_num,
|
||
page_size: this.page_size,
|
||
})
|
||
let flag = false;
|
||
if (res?.rows && res?.rows?.length == this.page_size) {
|
||
flag = true
|
||
} else {
|
||
flag = false
|
||
}
|
||
res?.rows.forEach(item => {
|
||
item.photo = picUrl + item.photo
|
||
});
|
||
|
||
this.goodsList = this.goodsList.concat(res.rows || []);
|
||
this.page_num = this.page_num + 1;
|
||
this.flag = flag;
|
||
},
|
||
|
||
//我的订单
|
||
async getOrderList(status) {
|
||
const { page_num, page_size } = this;
|
||
|
||
console.log('13231', page_num, page_size);
|
||
let parmas = {
|
||
page_num,
|
||
page_size,
|
||
};
|
||
|
||
if (status) {
|
||
parmas = {
|
||
...parmas,
|
||
status: status.value,
|
||
}
|
||
}
|
||
const res = await request(apiArr.getReserationList, 'POST', parmas);
|
||
console.log('reeee', res);
|
||
|
||
if ((res?.rows && res?.rows?.length === 0) || !res?.rows) {
|
||
uni.showToast({
|
||
title: '暂无订单数据',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
};
|
||
let flag = false
|
||
if (res?.rows?.length == this.page_size) {
|
||
flag = true
|
||
} else {
|
||
flag = false
|
||
}
|
||
|
||
res?.rows?.forEach(item => {
|
||
item.photo = picUrl + item.photo
|
||
})
|
||
|
||
this.orderList = this.goodsList.concat(res.rows || []);
|
||
this.page_num = page_num + 1;
|
||
this.flag = flag;
|
||
|
||
},
|
||
|
||
},
|
||
onReady() {
|
||
|
||
},
|
||
|
||
|
||
onShow() {
|
||
// 页面加载时重置数据
|
||
this.page_num = 1;
|
||
this.flag = false;
|
||
this.orderList = [];
|
||
this.goodsList = [];
|
||
if(this.currentIdx == 0){
|
||
this.getActiveList()
|
||
}else{
|
||
this.getOrderList()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom() {
|
||
if(this.flag){
|
||
if(this.currentIdx == 0){
|
||
this.getActiveList()
|
||
}else{
|
||
this.getOrderList()
|
||
}
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |