453 lines
11 KiB
Vue
453 lines
11 KiB
Vue
<template>
|
||
<view class="flex-col justify-start relative page">
|
||
<view class="shrink-0 section"></view>
|
||
<view class="flex-col section_2 pos">
|
||
<view class="flex-row justify-between group">
|
||
<view class="flex-col justify-start items-center text-wrapper" @click="changeState(0)">
|
||
<text class="font text">全部</text>
|
||
<view class="flex-col justify-start items-center" v-if="isShow[0]" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 5rpx;"></view>
|
||
</view>
|
||
<view class="flex-col justify-start" @click="changeState(1)">
|
||
<text class="font text_2">待拍摄</text>
|
||
<view class="flex-col justify-start items-center" v-if="isShow[1]" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 5rpx;"></view>
|
||
</view>
|
||
<view class="flex-col justify-start" @click="changeState(2)">
|
||
<text class="font text_3">已付款</text>
|
||
<view class="flex-col justify-start items-center" v-if="isShow[2]" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 5rpx;"></view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="flex-col justify-start items-center group_2"><view class="section_3"></view></view> -->
|
||
</view>
|
||
<view class="flex-col pos_2">
|
||
<view class="flex-col mt-20 list-item" v-for="(item, index) in items" :key="index">
|
||
<view class="flex-col">
|
||
<view class="flex-row items-center group_3" style="display: flex; justify-content: space-between; align-items: center;">
|
||
|
||
<view style="display: flex; align-items: center; height: 30rpx;">
|
||
<view class="group_4">
|
||
<text class="font_2">订单号</text>
|
||
<text class="font_3 text_4">：</text>
|
||
</view>
|
||
<view><text class="font_4 text_5">E20241005095840091406189</text></view>
|
||
</view>
|
||
|
||
<view>
|
||
<text class="font_5 text_6">{{ formattedTime }}</text>
|
||
<text class="font_6 text_7">待拍摄</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="flex-row group_5">
|
||
<image
|
||
class="image"
|
||
src="https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=1c1a8926b9cbd08850c51818af39ae2b.png"
|
||
/>
|
||
<view class="flex-col items-start flex-1 group_6 ml-19">
|
||
<text class="font_7 text_8">汉服—曲裾系列</text>
|
||
<text class="font_8 mt-43">￥138.00</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col mt-17">
|
||
<view class="flex-col section_4">
|
||
<text class="self-start font_7 text_9">预约信息</text>
|
||
<view class="mt-8 flex-col self-stretch">
|
||
<text class="self-start font_7 text_10">预约门店：哈尔滨师范大学</text>
|
||
<view class="flex-row justify-between items-center self-stretch group_7">
|
||
<text class="font_7 text_11">到店时间：2025-03-10 16:00</text>
|
||
<image
|
||
class="image_2"
|
||
src="https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=d52c7b6dae8656c06b3be0bbcd17f959.png"
|
||
@click="nav"
|
||
/>
|
||
</view>
|
||
<view class="flex-row justify-between items-baseline self-stretch">
|
||
<text class="font_9">拍摄人数：1人</text>
|
||
<text class="font_10 text_12" @click="nav">导航</text>
|
||
</view>
|
||
</view>
|
||
<text class="mt-8 self-start font_7 text_13">拍摄场地：室外</text>
|
||
</view>
|
||
<view class="flex-row justify-end items-center group_8">
|
||
<text class="font_2 text_14">实付款：</text>
|
||
<text class="font_8">￥138.00</text>
|
||
</view>
|
||
<view class="flex-row justify-center group_9">
|
||
<view class="flex-col justify-start items-center text-wrapper_2">
|
||
<text class="font_6 text_15">联系客服</text>
|
||
</view>
|
||
<view class="ml-10 flex-col justify-start items-center text-wrapper_2" @click="openCancelBookingOrderPopup">
|
||
<text class="font_6">取消订单</text>
|
||
</view>
|
||
<view class="ml-10 flex-col justify-start items-center text-wrapper_3">
|
||
<text class="font_11 text_16">去付款</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="cancelBookingOrder" :maskClick="true" :animation="false">
|
||
<view class="cancel-booking-order">
|
||
<cancelOrderVue></cancelOrderVue>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {computed, nextTick, onMounted, onUnmounted, ref} from 'vue'
|
||
import emitter from '../../../utils/emitter';
|
||
import cancelOrderVue from '../component/cancelOrder.vue';
|
||
const items = ref([null, null, null])
|
||
const isShow = ref([true, false, false])
|
||
const cancelBookingOrder = ref(null)
|
||
|
||
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
startCountdown()
|
||
emitter.on('closeCancelOrderPopup', () => {
|
||
nextTick(() => {
|
||
if (cancelBookingOrder.value) {
|
||
cancelBookingOrder.value.close()
|
||
}
|
||
})
|
||
})
|
||
})
|
||
|
||
|
||
onUnmounted(() => {
|
||
if (timer) {
|
||
clearInterval(timer)
|
||
}
|
||
})
|
||
|
||
let timer = null;
|
||
// 尝试从 localStorage 获取上次保存的倒计时时间
|
||
const savedTime = wx.getStorageSync('remainingTime');
|
||
const remainingTime = ref(savedTime ? parseInt(savedTime) : 1800); // 30分钟 (1800秒)
|
||
|
||
// 计算分钟和秒
|
||
const formattedTime = computed(() => {
|
||
const minutes = Math.floor(remainingTime.value / 60);
|
||
const seconds = remainingTime.value % 60;
|
||
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
||
});
|
||
|
||
const startCountdown = () => {
|
||
// 每秒更新一次倒计时
|
||
timer = setInterval(() => {
|
||
if (remainingTime.value > 0) {
|
||
remainingTime.value--;
|
||
wx.setStorageSync('remainingTime', remainingTime.value.toString());
|
||
} else {
|
||
cancelOrder(); // 倒计时结束，取消订单
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
const cancelOrder = () => {
|
||
// 这里调用取消订单的接口
|
||
// 假设 cancelOrderApi 是一个取消订单的请求
|
||
console.log('订单已取消'); // 实际取消订单的代码
|
||
wx.removeStorageSync('remainingTime');
|
||
clearInterval(timer); // 清除定时器
|
||
};
|
||
|
||
|
||
|
||
const openCancelBookingOrderPopup = () => {
|
||
cancelBookingOrder.value.open('center')
|
||
}
|
||
|
||
|
||
|
||
|
||
const changeState = (index:any) => {
|
||
if (!isShow.value[index]) {
|
||
for (var i = 0; i < 3; i ++ ) {
|
||
if (i == index) {
|
||
isShow.value[i] = true
|
||
} else {
|
||
isShow.value[i] = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const nav = () => {
|
||
wx.openLocation({
|
||
latitude: 45.867741,
|
||
longitude: 126.560037,
|
||
name: '哈尔滨师范大学(松北校区)',
|
||
address: '黑龙江省哈尔滨市呼兰区利民经济开发区师大路1号',
|
||
success: (res) => {
|
||
console.log(res)
|
||
}
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.cancel-booking-order {
|
||
// height: 800rpx;
|
||
margin-top: -150rpx;
|
||
}
|
||
.ml-19 {
|
||
margin-left: 35.63rpx;
|
||
}
|
||
.mt-43 {
|
||
margin-top: 80.63rpx;
|
||
}
|
||
.mt-17 {
|
||
margin-top: 31.88rpx;
|
||
}
|
||
.page {
|
||
background-color: #ffffff;
|
||
overflow: hidden;
|
||
background-image: url('https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=629e4a3490be730bb94900bbb4f3ab0a.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
}
|
||
.section {
|
||
background-image: url('https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=629e4a3490be730bb94900bbb4f3ab0a.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 750rpx;
|
||
height: 100vh;
|
||
}
|
||
.section_2 {
|
||
padding-left: 80.63rpx;
|
||
padding-right: 71.25rpx;
|
||
background-color: #EBE7E4;
|
||
}
|
||
.pos {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
}
|
||
.group {
|
||
padding: 13.75rpx 0 0rpx;
|
||
}
|
||
.text-wrapper {
|
||
width: 91.88rpx;
|
||
}
|
||
.font {
|
||
font-size: 30rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
color: #000000;
|
||
}
|
||
.text {
|
||
line-height: 48.48rpx;
|
||
}
|
||
.text_2 {
|
||
line-height: 48.24rpx;
|
||
}
|
||
.text_3 {
|
||
line-height: 47.43rpx;
|
||
}
|
||
.group_2 {
|
||
// border-left: solid 99.38rpx #e79ea1;
|
||
// border-right: solid 99.38rpx #e79ea1;
|
||
}
|
||
.section_3 {
|
||
background-color: #e79ea1;
|
||
width: 99.38rpx;
|
||
height: 5.63rpx;
|
||
}
|
||
.pos_2 {
|
||
position: absolute;
|
||
left: 37.5rpx;
|
||
right: 37.5rpx;
|
||
top: 112.5rpx;
|
||
}
|
||
.list-item {
|
||
padding: 22.5rpx 0 22.5rpx;
|
||
background-color: #fffcfa;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.list-item:first-child {
|
||
margin-top: 0;
|
||
}
|
||
.list-item:last-child {
|
||
margin-bottom: 50rpx;
|
||
}
|
||
.group_3 {
|
||
padding: 0 15rpx 18.75rpx;
|
||
border-bottom: solid 1.88rpx #dbdbdb;
|
||
}
|
||
.group_4 {
|
||
line-height: 25.84rpx;
|
||
height: 25.84rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 25.84rpx;
|
||
color: #323232;
|
||
}
|
||
.font_3 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 17.53rpx;
|
||
color: #323232;
|
||
}
|
||
.text_4 {
|
||
line-height: 16.8rpx;
|
||
}
|
||
.font_4 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 17.53rpx;
|
||
color: #323232;
|
||
}
|
||
.text_5 {
|
||
font-size: 28.13rpx;
|
||
line-height: 25.84rpx;
|
||
}
|
||
.font_5 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 17.53rpx;
|
||
color: #e79ea1;
|
||
}
|
||
.text_6 {
|
||
// margin-left: 45rpx;
|
||
}
|
||
.font_6 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 25.84rpx;
|
||
color: #e79ea1;
|
||
}
|
||
.text_7 {
|
||
margin-left: 3.75rpx;
|
||
line-height: 24.71rpx;
|
||
}
|
||
.group_5 {
|
||
padding: 15rpx 15rpx 0;
|
||
}
|
||
.image {
|
||
width: 120rpx;
|
||
height: 133.13rpx;
|
||
}
|
||
.group_6 {
|
||
margin-bottom: 3.75rpx;
|
||
}
|
||
.font_8 {
|
||
font-size: 33.75rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 22.54rpx;
|
||
color: #e79ea1;
|
||
}
|
||
.section_4 {
|
||
margin: 0 22.5rpx;
|
||
padding: 22.5rpx 18.75rpx;
|
||
background-color: #f4f4f4;
|
||
border-radius: 9.38rpx;
|
||
}
|
||
.font_7 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 25.84rpx;
|
||
color: #000000;
|
||
}
|
||
.text_9 {
|
||
font-size: 28.13rpx;
|
||
line-height: 26.25rpx;
|
||
}
|
||
.text_8 {
|
||
font-size: 28.13rpx;
|
||
line-height: 27.36rpx;
|
||
}
|
||
.text_10 {
|
||
line-height: 25.33rpx;
|
||
}
|
||
.group_7 {
|
||
margin-top: 3.75rpx;
|
||
}
|
||
.text_11 {
|
||
line-height: 24.51rpx;
|
||
}
|
||
.image_2 {
|
||
// margin-right: 7.5rpx;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.font_9 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 23.79rpx;
|
||
color: #000000;
|
||
}
|
||
.font_10 {
|
||
font-size: 22.5rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 21.09rpx;
|
||
color: #000000;
|
||
}
|
||
.text_12 {
|
||
margin-right: 3.75rpx;
|
||
}
|
||
.text_13 {
|
||
line-height: 24.21rpx;
|
||
}
|
||
.group_8 {
|
||
padding: 30rpx 22.5rpx 22.5rpx;
|
||
border-bottom: solid 1.88rpx #dbdbdb;
|
||
}
|
||
.text_14 {
|
||
font-size: 28.13rpx;
|
||
line-height: 26.7rpx;
|
||
}
|
||
.group_9 {
|
||
padding: 20.63rpx 22.5rpx 0 150rpx;
|
||
}
|
||
.text_15 {
|
||
line-height: 25.54rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
padding: 15rpx 0;
|
||
background-color: #ffffff;
|
||
border-radius: 75rpx;
|
||
width: 153.75rpx;
|
||
height: 56.25rpx;
|
||
border-left: solid 1.88rpx #e79ea1;
|
||
border-right: solid 1.88rpx #e79ea1;
|
||
border-top: solid 1.88rpx #e79ea1;
|
||
border-bottom: solid 1.88rpx #e79ea1;
|
||
}
|
||
.text-wrapper_3 {
|
||
padding: 15rpx 0;
|
||
background-color: #e79ea1;
|
||
border-radius: 75rpx;
|
||
width: 153.75rpx;
|
||
height: 56.25rpx;
|
||
}
|
||
.font_11 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 25.84rpx;
|
||
color: #ffffff;
|
||
}
|
||
.text_16 {
|
||
line-height: 24rpx;
|
||
}
|
||
|
||
/* 去掉滚动条样式 */
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style>
|