137 lines
3.1 KiB
Vue
137 lines
3.1 KiB
Vue
<template>
|
|
<up-sticky bgColor="#fff" style="padding: 20rpx;">
|
|
<up-tabs :list="tabsLst" :itemStyle="{ width: '50vw', paddingBottom: '20rpx' }" lineColor='#50C758'
|
|
:current='currentTab' @change="tabsChange"></up-tabs>
|
|
</up-sticky>
|
|
<view class="content" v-if="lists.length">
|
|
<view class="card" v-for="(item,index) in lists" :key="item.id">
|
|
<view class="head">
|
|
<view class="">
|
|
{{item.system_store_name}}
|
|
</view>
|
|
<view v-if="currentTab==0" style="text-decoration: underline;text-underline-offset: 5rpx;"
|
|
@click="hdClick(item)">
|
|
提货码
|
|
</view>
|
|
</view>
|
|
<view class="card-li" v-if="currentTab==0">
|
|
<text class="lab">预约时间：</text>{{item.times}}
|
|
</view>
|
|
<view class="card-li" v-if="currentTab==1">
|
|
<text class="lab">提货时间：</text>{{item.update_time}}
|
|
</view>
|
|
<view class="card-li" style="display: flex;justify-content: space-between;">
|
|
<view class="">
|
|
<text class="lab">商品信息：</text>{{item.store_name}}
|
|
</view>
|
|
<view class="">
|
|
x{{item.nums}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<up-empty v-else mode="history" style="margin-top: 20vh;" text='没有更多内容了'>
|
|
</up-empty>
|
|
|
|
<view class="mask" v-if='showVerifyPop' @click="showVerifyPop=false">
|
|
<view
|
|
style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: white;padding: 20rpx;">
|
|
<up-image :src="orderData.verify_img" width="710rpx" height="105rpx"></up-image>
|
|
<view style="font-weight: bold;color: #333;font-size: 26;text-align: center;margin-top: 20rpx;">
|
|
提货码 {{orderData.verify_code}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive
|
|
} from "vue"
|
|
import {
|
|
UserProductStorageLogApi
|
|
} from "@/api/order.js"
|
|
import useUserStore from "@/store/user";
|
|
|
|
const userStore = useUserStore().userInfo;
|
|
const currentTab = ref(0)
|
|
const showVerifyPop = ref(false)
|
|
const orderData = reactive({})
|
|
const tabsLst = reactive([{
|
|
name: '已预约'
|
|
},
|
|
{
|
|
name: '已提货'
|
|
},
|
|
|
|
]);
|
|
|
|
const tabsChange = (e) => {
|
|
currentTab.value = e.index
|
|
getLists()
|
|
}
|
|
|
|
|
|
const lists = ref([{}])
|
|
const getLists = async () => {
|
|
let res = await UserProductStorageLogApi({
|
|
uid: userStore.id,
|
|
status: currentTab.value
|
|
})
|
|
lists.value = res.data.lists
|
|
}
|
|
|
|
const hdClick = (item) => {
|
|
orderData.verify_code = item.verify_code
|
|
orderData.verify_img = item.verify_img
|
|
showVerifyPop.value = true
|
|
}
|
|
|
|
getLists()
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
|
|
.card {
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
// padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
|
|
.head {
|
|
background-color: #50C758;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
color: white;
|
|
padding: 20rpx;
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card-li {
|
|
padding: 0 20rpx;
|
|
margin-top: 10rpx;
|
|
|
|
.lab {
|
|
color: #989898;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mask {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99999 !important;
|
|
}
|
|
</style> |