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> |