561 lines
15 KiB
Vue
561 lines
15 KiB
Vue
<template>
|
||
<!-- 弹窗 -->
|
||
<uni-popup ref="popup1" v-if="showPopup1" :mask-click="false" background-color="white">
|
||
<view style="text-align: center;margin: 10px;font-size: 18px;">预约须知</view>
|
||
<view style="margin: 0 20px;">1.成功预约的顾客需按照预定时间前往店内挑选相应级别的服装。
|
||
为确保衣物在体验过程中的完好无损，顾客需根据所选服装的级别补缴尾款以及相应的押金。
|
||
拍摄结束后，店铺将依据衣物的实际状况评估是否扣除押金。</view>
|
||
<view style="margin: 0 20px;">
|
||
2.其中部分物品商家可提供，属于增值服务（如一次性隐形眼镜、
|
||
一次性粉扑等属于服务费以外的赠送服务，买家可选择自带用品，不影响服务价格），
|
||
需要买家自己准备的，客服需要提前告诉买家（如胸贴等贴身物品）
|
||
</view>
|
||
<button @click="close1" style="width: 50%;background-color:#f2b600;border-radius: 30px;margin-top: 20px;
|
||
margin-bottom: 20px;">我知道了</button>
|
||
</uni-popup>
|
||
<uni-popup ref="popup2" v-if="showPopup2" :mask-click="false" background-color="white">
|
||
<scroll-view style="height: 400px;width: 100%;" scroll-y="true">
|
||
<view style="text-align: center;margin: 10px;font-size: 18px;">费用说明</view>
|
||
<view style="margin: 10px;"> 一、费用支付流程</view>
|
||
<view style="margin: 0 20px;">
|
||
<view>1.确定等级：您将根据个人需求选择合适的服装价位区间，并完成预约操作。</view>
|
||
<view>2.预约成功：预约成功后，您需前往店铺挑选对应等级的服装。</view>
|
||
<view>3.补缴尾款及押金：在挑选服装时，您需要补缴尾款（扣除已支付定金后的剩余服务或商品费用）以及押金（用于保障服装归还时的完好）。</view>
|
||
</view>
|
||
<view style="margin: 10px;"> 二、尾款具体事项</view>
|
||
<view style="margin: 0 20px;">
|
||
<view>1.租赁服装：若您选择租赁我们店铺没有的服装，租赁费用将在您支付尾款时一并结算。无论拍摄是否进行，租赁费用均不予退还。</view>
|
||
<view>2.购买服装：如您希望购买我们店铺的服装，且我们同意购买，将按照服装的稀有程度分等级定价。您需按照所选等级支付尾款。</view>
|
||
<view>3.定制服务：若您自带衣服，我们提供妆发及摄影服务。若需我们额外购买服装，将按照上述等级定价，您需支付相应的尾款。</view>
|
||
</view>
|
||
<view style="margin: 10px;"> 三、定金与押金说明</view>
|
||
<view style="margin: 0 20px;">
|
||
<view>1.定金：预约时支付的定金用于确认您的预约意向，定金不予退还。</view>
|
||
<view>2.押金：拍摄完成后，我们将根据服装的归还情况决定是否扣除押金。若服装无损坏，押金将全额退还。</view>
|
||
</view>
|
||
<view style="margin: 10px;"> 四、特殊情况处理</view>
|
||
<view style="margin: 0 20px;">
|
||
<view> 若因特殊情况您需要取消预约，请及时与我们联系。未拍摄情况下，定金不予退还，已支付的租赁费用亦不退还。</view>
|
||
</view>
|
||
</scroll-view>
|
||
<button @click="close2" style="width: 50%;background-color:#f2b600;border-radius: 30px;margin-top: 20px;
|
||
margin-bottom: 20px;">我知道了</button>
|
||
</uni-popup>
|
||
|
||
<view class="flex-col justify-start relative page">
|
||
<view class="section"></view>
|
||
<text class="font text pos">选择预约类别</text>
|
||
<view class="flex-row equal-division group">
|
||
<view class="flex-col equal-division-item section_2" @click="showWhole('0')">
|
||
<image class="self-start image"
|
||
src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=e29908fd7c3623fbb6854b38b828c5b8.png" />
|
||
<text class="self-center font mt-7">整套约拍</text>
|
||
</view>
|
||
<view class="ml-48 flex-col equal-division-item section_3" @click="showWhole('1')">
|
||
<image class="self-start image"
|
||
src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=ca4da1e3507e3276bd2cf0946c8322bd.png" />
|
||
<text class="mt-8 self-center font text_2">自带服装</text>
|
||
</view>
|
||
</view>
|
||
<template v-if="zhi === '0'">
|
||
<text class="font text_3 pos_2">选择服装类别</text>
|
||
<view class="flex-col section_4 pos_3">
|
||
<view class="flex-col list">
|
||
<view class="flex-row justify-between section_5" v-for="(item,index) in Whole" :key="item"
|
||
@click="goToText(index)">
|
||
<view class="flex-row items-end self-center">
|
||
<image class="image_2" :src="item.image" />
|
||
<view class="ml-20 flex-col group_2">
|
||
<text class="self-start font_2 text_4">{{item.clothesType}}</text>
|
||
<view class="flex-row items-center self-stretch group_3">
|
||
<view class="group_4">
|
||
<text class="font_2">价位</text>
|
||
<text class="font_4">：</text>
|
||
</view>
|
||
<text class="ml-6 font_3 text_5">￥{{item.minPrice}}-{{item.maxPrice}}</text>
|
||
</view>
|
||
<text class="self-stretch font_5 text_6">{{item.brief}}</text>
|
||
</view>
|
||
</view>
|
||
<image class="self-start image_3 image_4"
|
||
src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=eee721f36de3196113485ea7e5c6b5ad.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="zhi === '1'">
|
||
<text class="font text_3 pos_2">选择服务</text>
|
||
<view class="flex-col section_4 pos_3">
|
||
<view class="flex-col list">
|
||
<view class="flex-row justify-between section_5"v-for="(item,index) in Own" :key="item">
|
||
<view class="flex-row items-end self-center">
|
||
<image class="image_2" :src="item.img" />
|
||
<view class="ml-20 flex-col group_2">
|
||
<text class="self-start font_2 text_4">{{item.name}}</text>
|
||
<text class="font_33 text_55">{{item.title}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view style="background-color: #f2b600;width: 200rpx;"> -->
|
||
<view class="flex-row self-stretch mt-104" style="width: 150rpx;">
|
||
<view class="flex-col justify-start items-center image-wrapper_2" @click="add(index)">
|
||
-
|
||
</view>
|
||
<view class="ml-2 flex-col justify-start items-center text-wrapper-6" style="margin-left: 8px;margin-right: 8px;">
|
||
{{ item.num }}</view>
|
||
<view class="ml-2 flex-col justify-start items-center image-wrapper_3" @click="jian(index)">
|
||
+
|
||
</view>
|
||
</view>
|
||
<!-- </view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="mt-22 flex-row justify-between items-center section_9">
|
||
<view class="flex-row">
|
||
<image class="shrink-0 self-center image_9"
|
||
src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=0ed6323496056f793bd3c25b3dcd9eb6.png" />
|
||
<text class="self-start text_15">88.</text>
|
||
<text class="self-center font_2 text_14">定金：</text>
|
||
<text class="self-center text_17">00</text>
|
||
<view class="flex-row shrink-0 section_10" @click="openPopup2">
|
||
<text class="text_18">费用说明</text>
|
||
<image class="shrink-0 image_10 ml-3"
|
||
src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=0455b173571a47fdc438588e788f26c5.png" />
|
||
</view>
|
||
</view>
|
||
<view class="flex-col justify-start items-center text-wrapper"><text class="font text_16">确定预约</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted
|
||
} from 'vue'
|
||
import {
|
||
baseUrl
|
||
} from '@/api/request'
|
||
const items = ref([null, null, null, null]);
|
||
onMounted(() => {
|
||
getWhole()
|
||
})
|
||
const displayItem = ref([])
|
||
const Whole = ref([{}])
|
||
const getWhole = async () => {
|
||
const res = await uni.request({
|
||
url: baseUrl + '/clothesGrade/list',
|
||
method: 'POST',
|
||
header: {
|
||
cookie: wx.getAccountInfoSync('cookie')
|
||
},
|
||
data: {
|
||
|
||
}
|
||
})
|
||
if (res.data.code === 1) {
|
||
Whole.value = res.data.data
|
||
} else {
|
||
uin.showtoast({
|
||
icon: 'error',
|
||
title: '获取失败'
|
||
})
|
||
}
|
||
}
|
||
const Own = ref([{
|
||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FObQGBPnJ-zhuangfa.png',
|
||
name: '妆发预约',
|
||
num:0,
|
||
title: '包括底妆，眉毛，眼妆，腮红和唇妆，根据您的肤色和服装风格进行个性化设计'
|
||
},
|
||
{
|
||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDFNymmCN-sheying.png',
|
||
name: '摄影服务',
|
||
num:0,
|
||
title: '提供专业的摄影棚和灯光设备，为客户打造舒适的拍摄环境'
|
||
}
|
||
])
|
||
const zhi = ref('0')
|
||
|
||
const showWhole = (zhiValue) => {
|
||
zhi.value = zhiValue
|
||
// console.log(zhi.value)
|
||
}
|
||
|
||
const showOwn = (zhiValue) => {
|
||
zhi.value = zhiValue
|
||
// console.log(zhi.value)
|
||
}
|
||
|
||
const close1 = () => {
|
||
popup1.value.close()
|
||
}
|
||
const close2 = () => {
|
||
popup2.value.close()
|
||
}
|
||
|
||
const popup1 = ref(null)
|
||
const popup2 = ref(null)
|
||
const showPopup1 = ref(false)
|
||
const showPopup2 = ref(false)
|
||
|
||
const openPopup1 = () => {
|
||
showPopup1.value = true;
|
||
popup1.value.open('center');
|
||
}
|
||
|
||
const openPopup2 = () => {
|
||
showPopup2.value = true;
|
||
popup2.value.open('center');
|
||
}
|
||
|
||
const closePopup1 = () => {
|
||
showPopup1.value = false;
|
||
}
|
||
|
||
const closePopup2 = () => {
|
||
showPopup2.value = false;
|
||
}
|
||
const selectedLocation = ref(null)
|
||
const handleFormSubmit = () => {
|
||
selectedLocation.value = null
|
||
}
|
||
//室内室外
|
||
const handleLocationChange = (e) => {
|
||
selectedLocation.value = e.detail.value
|
||
console.log(selectedLocation.value)
|
||
}
|
||
const goToText = (index) => {
|
||
console.log(index)
|
||
uni.navigateTo({
|
||
url: "/pages/booking/CostumeDisplay/CostumeDisplay?info=" + JSON.stringify(Whole.value[index].id)
|
||
});
|
||
console.log(Whole.value[index].id)
|
||
}
|
||
const goToContact = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/Contact/Contact'
|
||
})
|
||
}
|
||
//计步器
|
||
const add = (index) => {
|
||
if(Own.value[index].num >0){
|
||
Own.value[index].num -= 1
|
||
}
|
||
}
|
||
const jian = (index) => {
|
||
Own.value[index].num += 1
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mt-104 {
|
||
margin-top: 60rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.image-wrapper_2 {
|
||
padding: 11.25rpx 0;
|
||
background-color: #f8dedf;
|
||
border-radius: 5.63rpx 0rpx 0rpx 5.63rpx;
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.text-wrapper_6 {
|
||
padding: 15rpx 0 11.25rpx;
|
||
background-color: #f5f5dc;
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.image-wrapper_3 {
|
||
padding: 11.25rpx 0;
|
||
background-color: #f8dedf;
|
||
border-radius: 0rpx 5.63rpx 5.63rpx 0rpx;
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.image_33 {
|
||
width: 33.75rpx;
|
||
height: 33.75rpx;
|
||
}
|
||
.mt-7 {
|
||
margin-top: 13.13rpx;
|
||
}
|
||
|
||
.ml-3 {
|
||
margin-left: 5.63rpx;
|
||
}
|
||
.font_33 {
|
||
font-size: 22.5rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 25.13rpx;
|
||
color: #8a8a8a;
|
||
}
|
||
.text_55 {
|
||
margin-top: 26.25rpx;
|
||
line-height: 26.25rpx;
|
||
width: 280rpx;
|
||
}
|
||
.font_7 {
|
||
font-size: 22.5rpx;
|
||
font-family: Open Sans;
|
||
line-height: 20.72rpx;
|
||
color: #8a8a8a;
|
||
}
|
||
.text_9 {
|
||
line-height: 21.36rpx;
|
||
}
|
||
.mt-11 {
|
||
margin-top: 20.63rpx;
|
||
}
|
||
.page {
|
||
background-color: #ffffff;
|
||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.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=675fbf94797f850011f2bedf&name=17e1ca160ffb13e8723517aa1cebf07e.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 750rpx;
|
||
height: 1728.75rpx;
|
||
}
|
||
|
||
.equal-division {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 136.88rpx;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.group {
|
||
width: 650.63rpx;
|
||
}
|
||
|
||
.image {
|
||
width: 192rpx;
|
||
height: 192rpx;
|
||
}
|
||
|
||
.equal-division-item {
|
||
flex: 1 1 279.38rpx;
|
||
}
|
||
|
||
.section_2 {
|
||
padding: 7.5rpx 26.25rpx 41.25rpx;
|
||
opacity: 0.85;
|
||
background-color: #ffffff;
|
||
border-radius: 18.75rpx;
|
||
height: 281.25rpx;
|
||
}
|
||
|
||
.section_3 {
|
||
padding: 7.5rpx 22.5rpx 41.25rpx;
|
||
background-color: #ffffffcc;
|
||
border-radius: 18.75rpx;
|
||
height: 281.25rpx;
|
||
}
|
||
|
||
.font {
|
||
font-size: 30rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 28.59rpx;
|
||
color: #323232;
|
||
}
|
||
|
||
.text {
|
||
line-height: 27.69rpx;
|
||
}
|
||
|
||
.pos {
|
||
position: absolute;
|
||
left: 31.35rpx;
|
||
top: 49.84rpx;
|
||
}
|
||
|
||
.text_2 {
|
||
line-height: 29.42rpx;
|
||
}
|
||
|
||
.text_3 {
|
||
line-height: 28.84rpx;
|
||
}
|
||
|
||
.pos_2 {
|
||
position: absolute;
|
||
left: 48.06rpx;
|
||
top: 537.66rpx;
|
||
}
|
||
|
||
.section_4 {
|
||
background-color: #ffffff6c;
|
||
border-radius: 37.5rpx 37.5rpx 0 0;
|
||
}
|
||
|
||
.pos_3 {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 581.25rpx;
|
||
}
|
||
|
||
.list {
|
||
padding: 50.63rpx 45rpx;
|
||
}
|
||
|
||
.section_5 {
|
||
margin-right: 15rpx;
|
||
padding: 13.13rpx 3.75rpx 37.5rpx 43.13rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 18.75rpx;
|
||
margin: 5px;
|
||
}
|
||
|
||
.image_2 {
|
||
border-radius: 9.38rpx;
|
||
width: 118.13rpx;
|
||
height: 151.88rpx;
|
||
}
|
||
|
||
.group_2 {
|
||
margin-bottom: 3.75rpx;
|
||
}
|
||
|
||
.font_2 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 24.3rpx;
|
||
color: #323232;
|
||
}
|
||
|
||
.text_4 {
|
||
line-height: 25.43rpx;
|
||
}
|
||
|
||
.group_3 {
|
||
margin-top: 26.25rpx;
|
||
}
|
||
|
||
.group_4 {
|
||
line-height: 24.3rpx;
|
||
height: 24.3rpx;
|
||
}
|
||
|
||
.font_4 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 16.8rpx;
|
||
color: #323232;
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 33.75rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 24.3rpx;
|
||
color: #ff3c3c;
|
||
}
|
||
|
||
.text_5 {
|
||
line-height: 22.54rpx;
|
||
}
|
||
|
||
.image_3 {
|
||
width: 35.63rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
|
||
.image_4 {
|
||
margin-top: 67.5rpx;
|
||
}
|
||
|
||
.font_5 {
|
||
font-size: 22.5rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 21.98rpx;
|
||
color: #898989;
|
||
}
|
||
|
||
.text_6 {
|
||
margin-top: 7.5rpx;
|
||
line-height: 22.24rpx;
|
||
}
|
||
|
||
.section_9 {
|
||
padding: 39.38rpx 30rpx 13.13rpx;
|
||
background-color: #ffffff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.image_9 {
|
||
margin-left: 67.5rpx;
|
||
width: 33.75rpx;
|
||
height: 33.75rpx;
|
||
}
|
||
|
||
.text_15 {
|
||
color: #fb1212;
|
||
font-size: 33.75rpx;
|
||
font-family: Open Sans;
|
||
font-weight: 700;
|
||
line-height: 24.84rpx;
|
||
}
|
||
|
||
.text_14 {
|
||
margin-left: -146.25rpx;
|
||
color: #000000;
|
||
line-height: 24.09rpx;
|
||
}
|
||
|
||
.text_17 {
|
||
margin-left: 75rpx;
|
||
color: #fb1212;
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
font-weight: 700;
|
||
line-height: 19.29rpx;
|
||
}
|
||
|
||
.section_10 {
|
||
margin-left: 26.25rpx;
|
||
padding: 7.5rpx 11.25rpx;
|
||
background-color: #d9d9d9;
|
||
border-radius: 9.38rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
|
||
.text_18 {
|
||
color: #323232;
|
||
font-size: 18.75rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 18.32rpx;
|
||
}
|
||
|
||
.image_10 {
|
||
width: 18.75rpx;
|
||
height: 18.75rpx;
|
||
}
|
||
|
||
.text-wrapper {
|
||
padding: 26.25rpx 0;
|
||
background-color: #e79ea1;
|
||
border-radius: 75rpx;
|
||
width: 238.13rpx;
|
||
height: 82.5rpx;
|
||
}
|
||
|
||
.text_16 {
|
||
color: #ffffff;
|
||
line-height: 28.01rpx;
|
||
}
|
||
|
||
@import url(/common/css/global.css);
|
||
</style> |