347 lines
8.0 KiB
Vue
347 lines
8.0 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<view class="flex-col group">
|
||
<view class="flex-row justify-between self-stretch">
|
||
<text class="font text">请选择拍摄人数和场地</text>
|
||
<image
|
||
class="image"
|
||
src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=72844e3602883267485f6c9dfe89862b.png"
|
||
@click="closePopup"
|
||
/>
|
||
</view>
|
||
<image
|
||
class="self-start image_2"
|
||
src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=eb8ebca982e7a2e39bcab657cf891791.png"
|
||
/>
|
||
<text class="self-start font text_2">拍摄人数</text>
|
||
</view>
|
||
<view class="flex-col justify-start relative group_2">
|
||
<view class="flex-row items-center relative section">
|
||
<image
|
||
class="image_5"
|
||
src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=c0ebdfc7cf144c161a3ad237d317f463.png"
|
||
@click="sub"
|
||
/>
|
||
<view class="flex-col justify-start items-center text-wrapper"><text class="text_4">{{ number }}</text></view>
|
||
<image
|
||
class="image_6"
|
||
src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=d8e6dd5d8dea22188afc18c9b7822b49.png"
|
||
@click="add"
|
||
/>
|
||
<text class="text_3">人</text>
|
||
</view>
|
||
<image
|
||
class="image_3 pos"
|
||
src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=025aa63cb7deb0cf1fa7cf4aeda1bef1.png"
|
||
/>
|
||
<image
|
||
class="image_4 pos_2"
|
||
src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=455931695b5f0c7008d1859ccaae1cb8.png"
|
||
/>
|
||
</view>
|
||
<view class="flex-col group_3">
|
||
<text class="self-start font text_5">拍摄场地</text>
|
||
|
||
<radio-group class="flex-row equal-division mt-17" @change="handlerRadioChange">
|
||
|
||
<view class="flex-col section_2 equal-division-item">
|
||
<view class="flex-row justify-between items-end self-stretch">
|
||
<image
|
||
class="image_7"
|
||
src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=1ad61435fde7f073544e2d6f400f1ac9.png"
|
||
/>
|
||
<radio class="section_3" color="#FFB6B9" :checked="true" value="室内"></radio>
|
||
</view>
|
||
<text class="self-start font_2 text_6 mt-5">室内</text>
|
||
</view>
|
||
|
||
<view class="flex-col section_2 equal-division-item ml-19">
|
||
<view class="flex-row justify-between items-end self-stretch">
|
||
<image
|
||
class="image_8"
|
||
src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=556966367522af83972375c476406b0b.png"
|
||
/>
|
||
<radio class="section_3" color="#FFB6B9" value="室外"></radio>
|
||
</view>
|
||
<text class="self-start font_2 text_6 mt-5">室外</text>
|
||
</view>
|
||
|
||
</radio-group>
|
||
</view>
|
||
<view class="flex-row justify-between items-center group_4">
|
||
<view class="flex-row items-center">
|
||
<view class="flex-col items-center shrink-0 section_4" @click="openFeeTips">
|
||
<text class="font_3">费用</text>
|
||
<text class="font_3">说明</text>
|
||
</view>
|
||
<text class="font text_7">定金：</text>
|
||
<text class="font text_8">￥129.00</text>
|
||
</view>
|
||
<view @click="jumpToOrder" class="flex-col justify-start items-center text-wrapper_2">
|
||
<text class="text_9">确定</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="feeTips" :maskClick="false" :animation="false">
|
||
<view class="fee-tips">
|
||
<feeTipsVue></feeTipsVue>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {nextTick, onMounted, ref} from 'vue'
|
||
import emitter from '../../../utils/emitter';
|
||
import feeTipsVue from './feeTips.vue';
|
||
const number = ref(1)
|
||
const field = ref('室内')
|
||
const feeTips = ref(null)
|
||
|
||
onMounted(() => {
|
||
emitter.on('closeFeeTips', () => {
|
||
nextTick(() => {
|
||
if (feeTips.value) {
|
||
feeTips.value.close()
|
||
}
|
||
})
|
||
})
|
||
})
|
||
|
||
const sub = () => {
|
||
if (number.value > 1) {
|
||
number.value --
|
||
}
|
||
}
|
||
const add = () => {
|
||
number.value ++
|
||
}
|
||
|
||
const handlerRadioChange = (e:any) => {
|
||
field.value = e.detail.value
|
||
}
|
||
|
||
const closePopup = () => {
|
||
emitter.emit('closeBookingPopup')
|
||
}
|
||
|
||
const openFeeTips = () => {
|
||
feeTips.value.open('center')
|
||
}
|
||
|
||
const jumpToOrder = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/book/photoProductsOrder/photoProductsOrder'
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
.fee-tips {
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
border-radius: 41.1rpx;
|
||
margin-top: -400rpx;
|
||
width: 650rpx;
|
||
height: 900rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.mt-17 {
|
||
margin-top: 31.88rpx;
|
||
}
|
||
.mt-5 {
|
||
margin-top: 9.38rpx;
|
||
}
|
||
.ml-19 {
|
||
margin-left: 35.63rpx;
|
||
}
|
||
.page {
|
||
padding-top: 43.13rpx;
|
||
background-color: #fffcf9;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
position: fixed;
|
||
bottom: 0;
|
||
}
|
||
.group {
|
||
padding: 0 37.5rpx;
|
||
}
|
||
.font {
|
||
font-size: 37.5rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 33.99rpx;
|
||
color: #000000;
|
||
}
|
||
.text {
|
||
margin: 3.75rpx 0;
|
||
line-height: 36.34rpx;
|
||
}
|
||
.image {
|
||
width: 52.5rpx;
|
||
height: 41.25rpx;
|
||
}
|
||
.image_2 {
|
||
margin-top: 28.13rpx;
|
||
width: 172.5rpx;
|
||
height: 174.38rpx;
|
||
}
|
||
.text_2 {
|
||
margin-top: 41.25rpx;
|
||
}
|
||
.group_2 {
|
||
margin-top: 18.75rpx;
|
||
padding-bottom: 31.88rpx;
|
||
}
|
||
.section {
|
||
margin: 0 37.5rpx;
|
||
padding: 125.63rpx 0 86.25rpx;
|
||
background-image: linear-gradient(180deg, #fdefef 0%, #fffcfa 100%);
|
||
border-radius: 18.75rpx;
|
||
box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
|
||
}
|
||
.image_5 {
|
||
margin-left: 249.38rpx;
|
||
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
||
width: 68.06rpx;
|
||
height: 71.04rpx;
|
||
}
|
||
.text-wrapper {
|
||
margin-left: 3.75rpx;
|
||
padding: 18.75rpx 0;
|
||
background-color: #fbdedf80;
|
||
width: 82.06rpx;
|
||
height: 71.04rpx;
|
||
}
|
||
.text_4 {
|
||
color: #323232b3;
|
||
font-family: Open Sans;
|
||
line-height: 35.04rpx;
|
||
}
|
||
.image_6 {
|
||
margin-left: 3.75rpx;
|
||
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
||
width: 68.06rpx;
|
||
height: 71.04rpx;
|
||
}
|
||
.text_3 {
|
||
margin-left: 22.5rpx;
|
||
color: #000000;
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 26.4rpx;
|
||
}
|
||
.image_3 {
|
||
width: 238.13rpx;
|
||
height: 271.88rpx;
|
||
}
|
||
.pos {
|
||
position: absolute;
|
||
left: 7.5rpx;
|
||
bottom: 0;
|
||
}
|
||
.image_4 {
|
||
width: 125.63rpx;
|
||
height: 200.63rpx;
|
||
}
|
||
.pos_2 {
|
||
position: absolute;
|
||
right: 65.63rpx;
|
||
bottom: 0;
|
||
}
|
||
.group_3 {
|
||
margin-top: 45rpx;
|
||
padding: 0 35.63rpx;
|
||
}
|
||
.text_5 {
|
||
margin-left: 3.75rpx;
|
||
}
|
||
.equal-division {
|
||
align-self: stretch;
|
||
}
|
||
.section_2 {
|
||
position: relative;
|
||
flex: 1 1 320.63rpx;
|
||
}
|
||
.equal-division-item {
|
||
padding: 18.75rpx 26.25rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 18.75rpx;
|
||
box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
|
||
height: 157.5rpx;
|
||
}
|
||
.image_7 {
|
||
opacity: 0.85;
|
||
border-radius: 18.75rpx;
|
||
width: 138.75rpx;
|
||
height: 84.38rpx;
|
||
}
|
||
.section_3 {
|
||
margin-right: 11.25rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 50%;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 24.21rpx;
|
||
color: #000000;
|
||
}
|
||
.text_6 {
|
||
margin-left: 45rpx;
|
||
}
|
||
.image_8 {
|
||
border-radius: 15rpx;
|
||
width: 138.75rpx;
|
||
height: 84.38rpx;
|
||
}
|
||
.group_4 {
|
||
margin-top: 37.5rpx;
|
||
padding: 30rpx 35.63rpx;
|
||
border-top: solid 1.88rpx #0000001f;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
}
|
||
.section_4 {
|
||
padding: 7.5rpx 0;
|
||
background-color: #ffb6b9;
|
||
border-radius: 9.38rpx;
|
||
width: 78.75rpx;
|
||
height: 67.5rpx;
|
||
}
|
||
.font_3 {
|
||
font-size: 22.5rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 26.25rpx;
|
||
color: #ffffff;
|
||
}
|
||
.text_7 {
|
||
margin-left: 22.5rpx;
|
||
line-height: 34.42rpx;
|
||
}
|
||
.text_8 {
|
||
line-height: 25.05rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
padding: 22.5rpx 0;
|
||
background-color: #ffb6b9;
|
||
border-radius: 187.5rpx;
|
||
width: 241.88rpx;
|
||
height: 76.88rpx;
|
||
}
|
||
.text_9 {
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 28.01rpx;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style> |