506 lines
10 KiB
Vue
506 lines
10 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="aspectFill" />
|
||
</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="desc2(item.activity_id)">查看自提点
|
||
<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)">去领取</view>
|
||
</view>
|
||
</view>
|
||
<!-- <u-empty font-size="100rpx" icon-size="100rpx" v-if="goodsList.length == 0" text="暂无内容" mode="order"></u-empty> -->
|
||
|
||
<div v-if="orderList.length == 0" class="empty">
|
||
<u-empty icon-size="100rpx" text=" " mode="order"></u-empty>
|
||
<div>暂无内容</div>
|
||
</div>
|
||
|
||
</view>
|
||
<view class="order" v-if="currentIdx == 1">
|
||
<u-dropdown>
|
||
<u-dropdown-item v-model="value1" :options="options1" @change="headerSelectClick"></u-dropdown-item>
|
||
</u-dropdown>
|
||
|
||
<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.title, item.qrcode)">去使用</view>
|
||
</view>
|
||
</view>
|
||
|
||
<div v-if="orderList.length == 0" class="empty">
|
||
<u-empty icon-size="100rpx" text=" " mode="order"></u-empty>
|
||
<div>暂无内容</div>
|
||
</div>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { request } from '../../utils/index.js';
|
||
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(idx) {
|
||
this.currentIdx = idx
|
||
},
|
||
desc2(id) {
|
||
// 处理查看自提点逻辑
|
||
uni.navigateTo({
|
||
url: `../pickPoint/index.vue?id=${id}`
|
||
})
|
||
},
|
||
desc(total, id) {
|
||
// 处理去领取逻辑
|
||
uni.navigateTo({
|
||
url: `../receive/index.vue?id=${id}`
|
||
});
|
||
},
|
||
async getActiveList() {
|
||
let that = this
|
||
const res = await request('/wechat/shop/shop_list', 'POST', {
|
||
page_num: that.data.page_num,
|
||
page_size: that.data.page_size,
|
||
user_id: 68
|
||
}, {
|
||
'ctoken': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkZWFsZXJfaWQiOjAsImV4cCI6MTc0NDI2NDk1NiwiaW1nIjoiL3N0YXRpYy9pbWFnZXMvMjAyNS0wNC0wOC9pREVEV1NDR2tnYlc4YzhhYjZkODc0MjYzMzZmODM0MzMzNTE0NjAzNjdmOC5wbmciLCJtc2hvcF9pZCI6NDIsIm9wZW5faWQiOiJvVWlWajQ5NDNDODZjTXViZU1WQnIyRktzQV8wIiwicm9sZV9pZCI6MSwidXNlcl9pZCI6NjcsInVzZXJfbmFtZSI6IuW-ruS_oeeUqOaItyIsIndzaG9wX2lkIjo0Mn0.pHtbo4GS92iq8BNHFqn7mu6-Ah07XgM_KED-Y1BzmMI',
|
||
silent: false // 是否静默 默认为true， 展示loading 加载弹窗
|
||
})
|
||
console.log(res)
|
||
|
||
|
||
// util.postUrl(apiArr.getActiveList, {
|
||
// page_num: that.data.page_num,
|
||
// page_size: that.data.page_size,
|
||
// // community_id:''
|
||
// }, res => {
|
||
// let flag = false
|
||
// if (res.rows && res.rows.length == that.data.page_size) {
|
||
// flag = true
|
||
// } else {
|
||
// flag = false
|
||
// }
|
||
// res.rows.forEach(item => {
|
||
// item.photo = util.img_url + item.photo
|
||
// })
|
||
// that.setData({
|
||
// goodsList: that.data.goodsList.concat(res.rows || []),
|
||
// page_num: that.data.page_num + 1,
|
||
// flag
|
||
// })
|
||
// })
|
||
},
|
||
},
|
||
onReady() {
|
||
|
||
},
|
||
onload(option) {
|
||
that.getActiveList()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
.empty{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999999;
|
||
margin-top: 80rpx;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.tabList {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
background: #F9F9F9;
|
||
padding: 30rpx 5rpx;
|
||
}
|
||
|
||
.tabItem {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #555555;
|
||
position: relative;
|
||
}
|
||
|
||
.active {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
position: relative;
|
||
}
|
||
|
||
.active::after {
|
||
content: '';
|
||
filter: blur(10.899999618530273rpx);
|
||
width: 368rpx;
|
||
height: 10rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -30rpx;
|
||
transform: translateX(-50%);
|
||
background: #FF512A;
|
||
}
|
||
|
||
.active::before {
|
||
content: '';
|
||
width: 368rpx;
|
||
height: 10rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -30rpx;
|
||
transform: translateX(-50%);
|
||
background: #FF512A;
|
||
}
|
||
|
||
.line {
|
||
width: 1rpx;
|
||
height: 30rpx;
|
||
background-color: #E6E6E6;
|
||
}
|
||
|
||
.drawTit {
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #222222;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 20rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.drawTit image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.stride {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 26rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.strideItem {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #222222;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.strideItem image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.stideIcon {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-top: -30rpx;
|
||
}
|
||
|
||
.gray {
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.goodsItem_left {
|
||
display: flex;
|
||
}
|
||
|
||
.goodsImg {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.goodsmsg {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin-left: 24rpx;
|
||
}
|
||
|
||
.name {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.num {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.goodsItem_right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.right_top {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.right_top image {
|
||
width: 15rpx;
|
||
height: 28rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.goodsItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 30rpx 20rpx;
|
||
}
|
||
|
||
.right_bottom {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
width: 150rpx;
|
||
height: 50rpx;
|
||
background: #FF512A;
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.drawMsg {
|
||
padding: 30rpx 20rpx;
|
||
width: 500rpx;
|
||
}
|
||
|
||
.drawMsg_tit {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
padding-bottom: 30rpx;
|
||
border-bottom: 1rpx solid #F5F5F5;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.drawMsg_con {
|
||
margin-top: 30rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.drawMsg_con view {
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.vrawMsg_btn {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
width: 150rpx;
|
||
height: 50rpx;
|
||
background: #D5AC66;
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
margin: 0 auto;
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
|
||
.main {
|
||
margin: 30rpx 18rpx 0 20rpx;
|
||
}
|
||
|
||
.item_header {
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.item_left {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.item_right {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.right_left {
|
||
flex: 1;
|
||
}
|
||
|
||
.shop_title {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.shop_num {
|
||
margin-top: 8rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.shop_time {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #555555;
|
||
margin-top: 23rpx;
|
||
}
|
||
|
||
.right_status {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FF512A;
|
||
}
|
||
|
||
.item_bottom {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
background: #FF512A;
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
padding: 10rpx 23rpx;
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
.look {
|
||
background: #999999;
|
||
}
|
||
|
||
.use {
|
||
background: #D5AC66;
|
||
margin-right: 0;
|
||
}
|
||
</style> |