jiangchengfeiyi-xiaochengxu/pages/text.vue
2024-12-04 10:39:41 +08:00

840 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
<template>
<view class="addres">
<view>{{Status.addressSnapshot.name}}</view>
<view>{{Status.addressSnapshot.phone}}</view>
<view>{{Status.addressSnapshot.region}}</view>
<view>{{Status.addressSnapshot.detailAddress}}</view>
</view>
<view>订单编号{{Status.orderNumber}}</view>
<view>{{Status.orderStatus}}</view>
<view v-for="i in Status.orderItemList" :key="i" >
<image :src="i.goodSnapshot.goodImg" style="height: 50px;width: 50px;"></image>
</view>
<view v-for="i in Status.orderItemList" :key="i" >
{{i.goodSnapshot.name}}
</view>
<view v-for="i in Status.orderItemList" :key="i" >
{{i.goodSnapshot.type}}
</view>
<view v-for="i in Status.orderItemList" :key="i" >
{{i.goodSnapshot.price}}
</view>
<view v-if="Status.orderStatus==='待支付'" >去支付</view>
<view v-if="Status.orderStatus==='待发货'" >取消订单</view>
<view v-if="Status.orderStatus==='已发货'" >确认收货</view>
<view v-if="Status.orderStatus==='售后'" >售后详情</view>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import { onLoad } from "@dcloudio/uni-app";
const Status = ref({})
console.log(Status.value,34)
onLoad((options) => {
Status.value = JSON.parse(options.info);
console.log(Status.value,111)
console.log(Status.value.orderStatus,222)
})
</script>
<style>
</style> -->
<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">
<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>
<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 page" >
<view class="flex-col justify-start items-start relative group" @click="goToContact()"> <!-- @click="goToContact()" -->
<view class="section"></view>
<text class="font text pos">填写预约信息</text>
<view class="flex-col section_2 pos_2">
<view class="flex-row justify-between items-center group_2">
<view class="flex-row items-center">
<image class="shrink-0 image"
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=8bde7b2f7a6da1a009b89295a48cc8ec.png" />
<text class="font_2 text_2 ml-7">联系人:张三</text>
<text class="font_2 text_3 ml-7">15888610253</text>
</view>
<image class="image_2"
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=10d9d3f5abdae8518f3c6c3fa1bbb544.png" />
</view>
<view class="flex-row justify-between items-center group_3">
<view class="flex-row items-center">
<image class="image"
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=c6dac3074d9c4e4d6286c07f0ea03db5.png" />
<view class="flex-col items-start ml-9">
<text class="font_3">到店日期2024-10-15</text>
<text class="mt-2 font_3">具体场次上午场09:30-12:00</text>
</view>
</view>
<image class="image_2"
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=10d9d3f5abdae8518f3c6c3fa1bbb544.png" />
</view>
</view>
</view>
<view class="flex-col group_4">
<text class="self-start font text_4">选择预约类别</text>
<view class="mt-14 flex-col justify-start self-stretch section_3">
<view class="flex-row equal-division">
<view class=" clickable-item " @click="showWhole('0')">
<image class="image_3"
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQdGvHpRx-paishe.png" />
<text class="mt-2 font_4 text_5">整套约拍</text>
</view>
<view class=" ml-23 clickable-item" @click="showOwn('1')">
<image class="image_3"
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FWJdpNSbl-000.png" />
<text class="mt-2 font_4">自带服装</text>
</view>
</view>
</view>
</view>
<template v-if="zhi === '0'" >
<view class="flex-col section_7" >
<view class="flex-col group_5">
<text class="self-start font text_6">选择服装价位</text>
<view class="flex-row items-center self-stretch section_8 view" v-for="(item,index) in Whole" :key="item" @click="goToText(index)" >
<image :src="item.image" class="shrink-0 image_4"></image>
<view class="flex-col flex-1 ml-13">
<view class="self-start font_2 text_7">{{item.clothesType}}</view>
<view class="flex-row items-baseline self-stretch mt-11">
<text class="font_2">价位:</text>
<view class="font_6 text_8 ml-1">¥{{item.minPrice}}--{{item.maxPrice}}</view>
</view>
<view class="self-stretch font_7 text_9 mt-11">{{item.brief}}</view>
</view>
<view class="flex-row shrink-0 ml-21">
<view class="flex-col justify-start items-center button"><text class="font_5">选择</text></view>
<image class="ml-8 image_5"
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=7d16fc8dfa328fc97ff273ebeab9bc18.png" />
</view>
</view>
</view>
<view class="flex-col">
<view class="flex-col group_6">
<view class="flex-col">
<text class="self-start font text_15">选择拍摄场景</text>
<view class="flex-row self-stretch mt-15">
<view class="flex-row justify-center items-center section_9">
<image class="image_7"
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDSCeqARd-shinei.png" />
<text class="ml-16 font_8 text_16">室内</text>
<checkbox class="ml-16" name="location" value="室内"></checkbox>
</view>
<view class="flex-row justify-center items-center section_9 ml-23">
<image class="image_7"
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgfjDWgWY-shiwai.png" />
<text class="ml-16 font_8 text_17">室外</text>
<checkbox class="ml-16" name="location" value="室外"></checkbox>
</view>
</view>
</view>
<view class="mt-26 flex-row justify-center items-center" @click="openPopup1">
<image class="badge"
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FkWvkHOaM-0e7d6a68aaa19d61293070fa98a3ae13.png" />
<text class="ml-4 font_7 text_18">预约须知</text>
</view>
</view>
</view>
</view>
</template>
<template v-if="zhi === '1'" >
<view class="flex-col section_7">
<view class="flex-col group_5">
<text class="self-start font text_6">选择服务</text>
<view class="flex-row items-center self-stretch section_8 view" v-for="item in Own" :key="item" >
<image :src="item.img" class="shrink-0 image_4"></image>
<view class="flex-col flex-1 ml-13">
<view class="self-start font_2 text_7">{{item.name}}</view>
<view class="flex-row items-baseline self-stretch mt-11">
<text class="font_2">价位:</text>
<view class="font_6 text_8 ml-1">¥{{item.price}}</view>
</view>
<view class="self-stretch font_7 text_9 mt-11">{{item.title}}</view>
</view>
<view class="flex-row shrink-0 ml-21">
<checkbox></checkbox>
</view>
</view>
</view>
<view class="flex-col">
<view class="flex-col group_6">
<view class="flex-col">
<text class="self-start font text_15">选择拍摄场景</text>
<view class="flex-row self-stretch mt-15">
<view class="flex-row justify-center items-center section_9">
<image class="image_7"
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDSCeqARd-shinei.png" />
<text class="ml-16 font_8 text_16">室内</text>
<checkbox class="ml-16" name="location" value="室内"></checkbox>
</view>
<view class="flex-row justify-center items-center section_9 ml-23">
<image class="image_7"
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgfjDWgWY-shiwai.png" />
<text class="ml-16 font_8 text_17">室外</text>
<checkbox class="ml-16" name="location" value="室外"></checkbox>
</view>
</view>
</view>
<view class="flex-row self-stretch section_12">
<image class="shrink-0 self-center image_66"
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FbtvtZqGC-kefu.png" />
<view class="flex-col shrink-0 self-start group_10">
<text class="self-start font_2 text_12">联系客服</text>
<text class="mt-10 self-stretch font_66">请提供详细的问题描述,以便我们更快地为您解决问题。</text>
</view>
<image class="shrink-0 self-center image image_77"
src="https://ide.code.fun/api/image?token=67303857c471750012de63be&name=136eb7cb0ccc86c9685bc319ce005613.png" />
</view>
<view class="mt-26 flex-row justify-center items-center" @click="openPopup1">
<image class="badge"
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FkWvkHOaM-0e7d6a68aaa19d61293070fa98a3ae13.png" />
<text class="ml-4 font_7 text_18">预约须知</text>
</view>
</view>
</view>
</view>
</template>
<view class="flex-row justify-between items-center section_11">
<view class="flex-row items-center group_7">
<view class="flex-col justify-start items-start shrink-0 relative">
<text class="font_8">定金:</text>
<image class="image_2 pos_4"
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=3393d3563afcfe7dedbadba1ea5328a0.png" />
</view>
<text class="font_6 text_19">88.</text>
<text class="text_21">00</text>
</view>
<view class="flex-row items-center">
<view class="flex-row button_3" @click="openPopup2">
<text class="text_22">费用说明</text>
<image class="shrink-0 image_8 ml-3"
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=0455b173571a47fdc438588e788f26c5.png" />
</view>
<view class="ml-10 flex-col justify-start items-center button_2">
<text class="font_4 text_20">确定预约</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
import { baseUrl } from '../api/request';
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: '妆发预约',
price: '20',
title: '包括底妆,眉毛,眼妆,腮红和唇妆,根据您的肤色和服装风格进行个性化设计'
},
{
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDFNymmCN-sheying.png',
name: '摄影服务',
price: '15',
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 goToText = (index) =>{
console.log(index);
uni.navigateTo({
url:"/pages/booking/CostumeDisplay/CostumeDisplay?info="
+ JSON.stringify(Whole.value[index])
})
}
const goToContact = ()=>{
uni.navigateTo({
url:'/pages/mine/Contact/Contact'
})
}
console.log(Whole.value[1])
</script>
<style lang="scss" scoped>
.ml-7 {
margin-left: 13.13rpx;
}
.ml-9 {
margin-left: 16.88rpx;
}
.ml-13 {
margin-left: 24.38rpx;
}
.ml-21 {
margin-left: 39.38rpx;
}
.ml-1 {
margin-left: 1.88rpx;
}
.mt-15 {
margin-top: 28.13rpx;
}
.ml-23 {
margin-left: 43.13rpx;
}
.mt-11 {
margin-top: 20.63rpx;
}
.ml-3 {
margin-left: 5.63rpx;
}
.page {
padding-top: 45rpx;
background-color: #f5f5dc;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.font_66 {
font-size: 22.5rpx;
font-family: Open Sans;
line-height: 26.25rpx;
color: #898989;
}
.group {
padding-top: 11.25rpx;
}
.section {
margin-left: 71.25rpx;
background-color: #ffffff00;
border-radius: 18.75rpx;
width: 281.25rpx;
height: 281.25rpx;
}
.font {
font-size: 30rpx;
font-family: Open Sans;
line-height: 27.75rpx;
color: #323232;
}
.text {
line-height: 27.96rpx;
}
.pos {
position: absolute;
left: 21.62rpx;
top: 0;
}
.section_2 {
padding-left: 33.75rpx;
padding-right: 28.13rpx;
background-color: #fffef8;
border-radius: 18.75rpx;
}
.pos_2 {
position: absolute;
left: 20.63rpx;
right: 20.63rpx;
top: 53.63rpx;
}
.group_2 {
padding: 31.88rpx 0 15rpx;
border-bottom: solid 1.88rpx #e2e0e0;
}
.image {
width: 43.13rpx;
height: 43.13rpx;
}
.font_2 {
font-size: 26.25rpx;
font-family: Open Sans;
line-height: 24.3rpx;
color: #323232;
}
.text_2 {
line-height: 24rpx;
}
.text_3 {
line-height: 24rpx;
}
.image_2 {
width: 33.75rpx;
height: 33.75rpx;
}
.group_3 {
padding: 22.5rpx 0 37.5rpx;
}
.font_3 {
font-size: 26.25rpx;
font-family: Open Sans;
line-height: 31.88rpx;
color: #323232;
}
.group_4 {
margin-top: 26.25rpx;
padding: 0 30rpx;
}
.text_4 {
line-height: 27.69rpx;
}
.section_3 {
padding: 31.88rpx 0;
background-color: #fffef8;
border-radius: 18.75rpx;
}
.equal-division {
margin: 0 41.25rpx;
}
.section_4 {
flex: 1 1 281.25rpx;
}
.image_3 {
width: 192rpx;
height: 192rpx;
}
.font_4 {
font-size: 30rpx;
font-family: Inter;
line-height: 27.75rpx;
color: #323232;
}
.text_5 {
line-height: 27.99rpx;
}
.section_5 {
position: relative;
flex: 1 1 281.25rpx;
}
.clickable-item {
padding: 15rpx 0 41.25rpx;
background-color: white;
border-radius: 18.75rpx;
height: 281.25rpx;
flex: 1 1 281.25rpx;
align-items: center;
display: flex;
flex-direction: column;
box-sizing: border-box;
flex-shrink: 0;
}
.clickable-item.selected {
background-color: #f08b00;
}
.clickable-item.selected::after {
background-color: #f08b00;
}
.section_6 {
background-color: #ffffff99;
border-radius: 18.75rpx;
width: 281.25rpx;
height: 281.25rpx;
}
.pos_3 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.section_7 {
margin-top: 30rpx;
padding-bottom: 46.88rpx;
background-color: #fff3c3;
}
.group_5 {
padding: 30rpx 30rpx 37.5rpx;
}
.text_6 {
line-height: 27.86rpx;
}
.section_8 {
margin-top: 16.88rpx;
padding: 26.25rpx 26.25rpx 26.25rpx 39.38rpx;
background-color: #fffef8;
border-radius: 18.75rpx;
}
.view {
margin-top: 41.25rpx;
}
.image_4 {
border-radius: 9.38rpx;
width: 118.13rpx;
height: 151.88rpx;
}
.text_7 {
line-height: 24.26rpx;
}
.text_77 {
line-height: 24.96rpx;
}
.font_6 {
font-size: 33.75rpx;
font-family: Open Sans;
line-height: 24.3rpx;
color: #ff3c3c;
}
.text_8 {
line-height: 24.81rpx;
}
.button {
padding: 7.5rpx 0;
background-color: #fbb612;
border-radius: 9.38rpx;
width: 75rpx;
height: 37.5rpx;
}
.button2 {
padding: 7.5rpx 0;
background-color: #f5f5dc;
border-radius: 50rpx;
width: 37.5rpx;
height: 37.5rpx;
}
.font_5 {
font-size: 22.5rpx;
font-family: Open Sans;
line-height: 20.72rpx;
color: #ffffff;
}
.image_5 {
width: 37.5rpx;
height: 37.5rpx;
}
.text_10 {
line-height: 24.15rpx;
}
.text_12 {
line-height: 24.81rpx;
}
.text-wrapper {
padding: 7.5rpx 0;
background-color: #d9d9d9;
border-radius: 9.38rpx;
width: 75rpx;
height: 37.5rpx;
}
.text_11 {
line-height: 20.61rpx;
}
.image_6 {
width: 118.13rpx;
height: 151.88rpx;
}
.image_66 {
border-radius: 9.38rpx;
width: 93.75rpx;
height: 118.13rpx;
}
.text_14 {
line-height: 24.23rpx;
}
.divider {
margin: 0 22.5rpx;
background-color: #ff8550;
height: 1.88rpx;
}
.group_6 {
padding: 22.5rpx 30rpx 0;
}
.text_15 {
line-height: 27.64rpx;
}
.section_9 {
flex: 1 1 322.5rpx;
padding: 26.25rpx 0;
background-color: #fffef8;
border-radius: 18.75rpx;
height: 153.75rpx;
}
.image_7 {
border-radius: 9.38rpx;
width: 123.75rpx;
height: 101.25rpx;
}
.image_77 {
margin-left: 48.75rpx;
}
.font_8 {
font-size: 26.25rpx;
font-family: Inter;
line-height: 24.3rpx;
color: #000000;
}
.group_10 {
margin-left: 22.5rpx;
margin-top: 15rpx;
width: 405rpx;
}
.text_16 {
line-height: 24.21rpx;
}
.section_10 {
background-color: #ffffff;
border-radius: 50%;
width: 33.75rpx;
height: 33.75rpx;
border-left: solid 1.88rpx #c4c4c4;
border-right: solid 1.88rpx #c4c4c4;
border-top: solid 1.88rpx #c4c4c4;
border-bottom: solid 1.88rpx #c4c4c4;
}
.text_17 {
line-height: 24.09rpx;
}
.badge {
width: 28.13rpx;
height: 28.13rpx;
}
.font_7 {
font-size: 22.5rpx;
font-family: Open Sans;
line-height: 20.72rpx;
color: #8a8a8a;
}
.text_13 {
line-height: 21.38rpx;
}
.text_9 {
line-height: 21.36rpx;
}
.text_18 {
color: #000000;
line-height: 20.77rpx;
}
.section_11 {
margin-top: 48.75rpx;
padding: 15rpx 22.5rpx;
background-color: #fffef8;
}
.group_7 {
width: 180.06rpx;
}
.group_77{
margin-left: 37.5rpx;
}
.pos_4 {
position: absolute;
right: 0;
bottom: 0;
}
.text_19 {
color: #fbb612;
font-weight: 700;
line-height: 24.84rpx;
}
.text_21 {
color: #fbb612;
font-size: 26.25rpx;
font-family: Open Sans;
font-weight: 700;
line-height: 19.29rpx;
}
.button_3 {
padding: 9.38rpx 11.25rpx;
background-color: #d9d9d9;
border-radius: 9.38rpx;
height: 37.5rpx;
}
.text_22 {
color: #323232;
font-size: 18.75rpx;
font-family: Inter;
line-height: 17.36rpx;
}
.image_8 {
width: 18.75rpx;
height: 18.75rpx;
}
.button_2 {
padding: 26.25rpx 0;
background-color: #fbb612;
border-radius: 75rpx;
width: 238.13rpx;
height: 82.5rpx;
}
.text_20 {
color: #ffffff;
}
.section_12 {
margin: 26.25rpx 16.88rpx 0 11.25rpx;
padding: 15rpx 26.25rpx;
background-color: #fffef8;
border-radius: 18.75rpx;
}
@import url(/common/css/global.css);
</style>