441 lines
10 KiB
Vue
441 lines
10 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 my-radio" @change="handlerRadioChange">
|
|
|
|
<view class="flex-col section_2 equal-division-item" v-if="!disabled1">
|
|
<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" v-if="!disabled2">
|
|
<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, onUnmounted, ref} from 'vue'
|
|
import emitter from '../../../utils/emitter';
|
|
import feeTipsVue from './feeTips.vue';
|
|
import { bookUrl } from '../../../common/globalImagesUrl';
|
|
import { baseUrl } from '../../../api/request';
|
|
import { dealResult } from '../../../common/globalFunction';
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { getFonts } from '../../../common/globalFont';
|
|
|
|
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('')
|
|
const cookie = wx.getStorageSync('cookie')
|
|
|
|
|
|
onLoad(() => {
|
|
getFonts()
|
|
})
|
|
|
|
const closeFeeTipsHandler = () => {
|
|
nextTick(() => {
|
|
if (feeTips.value) {
|
|
feeTips.value.close()
|
|
}
|
|
})
|
|
}
|
|
|
|
const getProductsTypeHandler = (val:any) => {
|
|
type.value = val
|
|
console.log('=================================================>', type.value)
|
|
}
|
|
|
|
const getProductObjHandler = (val:any) => {
|
|
obj.value = val
|
|
totalPrice.value = val.price * val.minNumber
|
|
number.value = obj.value.minNumber
|
|
shotScene.value = obj.value.shotScene
|
|
if (shotScene.value === '室内') {
|
|
disabled2.value = true
|
|
checked1.value = true
|
|
field.value = '室内'
|
|
} else if (shotScene.value === '室外'){
|
|
disabled1.value = true
|
|
checked2.value = true
|
|
field.value = '室外'
|
|
}
|
|
console.log(totalPrice.value)
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
emitter.on('closeFeeTips', closeFeeTipsHandler)
|
|
|
|
emitter.on('getProductsType', getProductsTypeHandler)
|
|
|
|
emitter.on('getProductObj', getProductObjHandler)
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
emitter.off('closeFeeTips', closeFeeTipsHandler)
|
|
|
|
emitter.off('getProductsType', getProductsTypeHandler)
|
|
|
|
emitter.off('getProductObj', getProductObjHandler)
|
|
})
|
|
|
|
|
|
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 = async () => {
|
|
if (field.value === '' || field.value === undefined || field.value === null) {
|
|
uni.showToast({
|
|
title: '请选择场地',
|
|
icon: 'error'
|
|
})
|
|
return ;
|
|
}
|
|
|
|
let res = await checkPhotoProducts()
|
|
if (!dealResult(res)) return ;
|
|
|
|
uni.navigateTo({
|
|
url: '/pages/book/photoProductsOrder/photoProductsOrder?field=' + field.value + '&number=' + number.value + '&id=' + obj.value.id + '&type=' + type.value
|
|
})
|
|
}
|
|
|
|
|
|
|
|
const checkPhotoProducts = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/advanceOrder/check/photoProducts',
|
|
method: 'POST',
|
|
header: {
|
|
cookie
|
|
},
|
|
data: {
|
|
id: obj.value.id
|
|
}
|
|
})
|
|
return res
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.my-radio {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.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: FZSongKeBenXiuKaiS-R-GB;
|
|
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: FZSongKeBenXiuKaiS-R-GB;
|
|
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;
|
|
width: 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> |