390 lines
8.9 KiB
Vue
390 lines
8.9 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="bookUrl + '/component/cha.png'"
|
||
@click="closePopup"
|
||
/>
|
||
</view>
|
||
<image
|
||
class="self-start image_2"
|
||
:src="obj.introImg"
|
||
/>
|
||
<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="bookUrl + '/component/sub.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="bookUrl + '/component/add.png'"
|
||
@click="add"
|
||
/>
|
||
<text class="text_3">人</text>
|
||
</view>
|
||
<image
|
||
class="image_3 pos"
|
||
:src="bookUrl + '/component/duoren.png'"
|
||
/>
|
||
<image
|
||
class="image_4 pos_2"
|
||
:src="bookUrl + '/component/danren.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="bookUrl + '/component/shinei.png'"
|
||
/>
|
||
<radio class="section_3" color="#FFB6B9" value="室内" :checked="checked1" :disabled="disabled1"></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="bookUrl + '/component/shiwai.png'"
|
||
/>
|
||
<radio class="section_3" color="#FFB6B9" value="室外" :checked="checked2" :disabled="disabled2"></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">￥{{ totalPrice.toFixed(2) }}</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';
|
||
import { bookUrl } from '../../../common/globalImagesUrl';
|
||
const number = ref(1)
|
||
const field = ref('')
|
||
const feeTips = ref(null)
|
||
const obj = ref('')
|
||
const totalPrice = ref(0)
|
||
const shotScene = ref('')
|
||
const disabled1 = ref(false)
|
||
const disabled2 = ref(false)
|
||
const checked1 = ref(false)
|
||
const checked2 = ref(false)
|
||
const type = ref('')
|
||
|
||
onMounted(() => {
|
||
emitter.on('closeFeeTips', () => {
|
||
nextTick(() => {
|
||
if (feeTips.value) {
|
||
feeTips.value.close()
|
||
}
|
||
})
|
||
})
|
||
|
||
emitter.on('getProductsType', (val:any) => {
|
||
type.value = val
|
||
console.log('=================================================>', type.value)
|
||
})
|
||
|
||
emitter.on('getProductObj', (val:any) => {
|
||
obj.value = val
|
||
totalPrice.value = val.price * val.minNumber
|
||
number.value = obj.value.minNumber
|
||
shotScene.value = obj.value.shotScene
|
||
if (shotScene.value === '室内') {
|
||
disabled1.value = true
|
||
checked2.value = true
|
||
field.value = '室内'
|
||
} else {
|
||
disabled2.value = true
|
||
checked1.value = true
|
||
field.value = '室外'
|
||
}
|
||
console.log(totalPrice.value)
|
||
})
|
||
})
|
||
|
||
const sub = () => {
|
||
if (number.value > obj.value.minNumber) {
|
||
number.value --
|
||
totalPrice.value = number.value * obj.value.price
|
||
}
|
||
}
|
||
const add = () => {
|
||
if (number.value < obj.value.maxNumber) {
|
||
number.value ++
|
||
totalPrice.value = number.value * obj.value.price
|
||
}
|
||
}
|
||
|
||
const handlerRadioChange = (e:any) => {
|
||
field.value = e.detail.value
|
||
console.log(field.value)
|
||
}
|
||
|
||
const closePopup = () => {
|
||
emitter.emit('closeBookingPopup')
|
||
}
|
||
|
||
const openFeeTips = () => {
|
||
feeTips.value.open('center')
|
||
}
|
||
|
||
const jumpToOrder = () => {
|
||
if (field.value === '' || field.value === undefined || field.value === null) {
|
||
uni.showToast({
|
||
title: '请选择场地',
|
||
icon: 'error'
|
||
})
|
||
return ;
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/book/photoProductsOrder/photoProductsOrder?field=' + field.value + '&number=' + number.value + '&id=' + obj.value.id + '&type=' + type.value
|
||
})
|
||
}
|
||
|
||
</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> |