353 lines
8.5 KiB
Vue
353 lines
8.5 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
|
||
@click="closePopup"
|
||
class="image"
|
||
:src="clothesRentUrl + '/component/cha.png'"
|
||
/>
|
||
</view>
|
||
<view class="flex-row self-stretch group_2">
|
||
<image
|
||
class="shrink-0 image_2" mode="aspectFill"
|
||
:src="publicPath + photoProductsInfo.introImg"
|
||
/>
|
||
<view class="flex-col shrink-0 group_3 ml-13">
|
||
<text class="self-stretch font_2 text_2">{{ photoProductsInfo.name }}</text>
|
||
<text class="mt-48 self-start font_2 text_3">￥{{ photoProductsInfo.price.toFixed(2) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col self-stretch">
|
||
<view class="flex-col justify-start items-start relative">
|
||
<view class="group_4"></view>
|
||
<text class="font_2 text_4 pos">妆造服务</text>
|
||
</view>
|
||
<view class="flex-row">
|
||
<view :style="styleObj1" class="flex-col justify-start items-center text-wrapper" @click="selectStatus(true)">
|
||
<text :style="fontObj1" class="font_3 text_5">本店上妆</text>
|
||
</view>
|
||
<view :style="styleObj2" class="flex-col justify-start items-center text-wrapper ml-17" @click="selectStatus(false)">
|
||
<text :style="fontObj2" class="font_3 text_6">无需妆造</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<text class="self-start font_2 text_7">拍摄场地</text>
|
||
|
||
<radio-group class="flex-row equal-division my-radio" @change="changeRadioStatus">
|
||
|
||
<view class="flex-col section equal-division-item" v-if="isShow1">
|
||
<view class="flex-row justify-between items-end self-stretch">
|
||
<image
|
||
class="image_3"
|
||
:src="clothesRentUrl + '/component/indoor.png'"
|
||
/>
|
||
<!-- <view class="section_2"></view> -->
|
||
<radio class="section_2" color="#FFB6B9" value="室内" :checked="checked1"></radio>
|
||
</view>
|
||
<text class="self-start font_3 text_8 mt-5">室内</text>
|
||
</view>
|
||
|
||
<view class="flex-col section equal-division-item" v-if="isShow2">
|
||
<view class="flex-row justify-between items-end self-stretch">
|
||
<image
|
||
class="image_4"
|
||
:src="clothesRentUrl + '/component/outdoor.png'"
|
||
/>
|
||
<!-- <view class="section_2"></view> -->
|
||
<radio class="section_2" color="#FFB6B9" value="室外" :checked="checked2"></radio>
|
||
</view>
|
||
<text class="self-start font_3 text_8 mt-5">室外</text>
|
||
</view>
|
||
|
||
</radio-group>
|
||
|
||
|
||
</view>
|
||
<view class="flex-row justify-between items-center group_5">
|
||
<view class="flex-row items-baseline">
|
||
<text class="font text_9">定金：</text>
|
||
<text class="font text_10">￥{{ photoProductsInfo.price.toFixed(2) }}</text>
|
||
</view>
|
||
<view @click="gotoSubmitOrderPage" class="flex-col justify-start items-center text-wrapper_2"><text class="text_11">确定</text></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {onMounted, onUnmounted, ref} from 'vue'
|
||
import { clothesRentUrl } from '../../../common/globalImagesUrl';
|
||
import emitter from '../../../utils/emitter';
|
||
import { publicPath } from '../../../common/globalImagesUrl';
|
||
import { dealResult } from '../../../common/globalFunction';
|
||
import { baseUrl } from '../../../api/request';
|
||
import { getFonts } from '../../../common/globalFont';
|
||
let style1 = { borderColor: '#FFB6B9', backgroundColor: '#FBDEDF'}
|
||
let style2 = { borderColor: '#C3C3C3', backgroundColor: '#fff' }
|
||
|
||
let fontStyle1 = { color: '#E79EA1' }
|
||
let fontStyle2 = { color: '#323232' }
|
||
|
||
const cookie = wx.getStorageSync('cookie')
|
||
const isShow1 = ref(true)
|
||
const isShow2 = ref(true)
|
||
const checked1 = ref(true)
|
||
const checked2 = ref(false)
|
||
|
||
const photoProductsInfo = ref({})
|
||
const styleObj1 = ref(style1)
|
||
const styleObj2 = ref(style2)
|
||
const fontObj1 = ref(fontStyle1)
|
||
const fontObj2 = ref(fontStyle2)
|
||
let point = true
|
||
let scene = '室内'
|
||
|
||
const closePopup = () => {
|
||
emitter.emit('closeClothesAttributePlusPopup')
|
||
}
|
||
const getPhotoProductsInfoHandler = (val) => {
|
||
console.log(val)
|
||
photoProductsInfo.value = val
|
||
if (val.shotScene === '室内') {
|
||
isShow2.value = false
|
||
checked1.value = true
|
||
scene = '室内'
|
||
} else if (val.shotScene === '室外') {
|
||
isShow1.value = false
|
||
checked2.value = true
|
||
scene = '室外'
|
||
}
|
||
}
|
||
|
||
const changeRadioStatus = (e) => {
|
||
scene = e.detail.value
|
||
}
|
||
|
||
const selectStatus = (val) => {
|
||
if (point && !val ) {
|
||
styleObj1.value = style2
|
||
styleObj2.value = style1
|
||
fontObj1.value = fontStyle2
|
||
fontObj2.value = fontStyle1
|
||
|
||
point = !point
|
||
}
|
||
|
||
if (!point && val) {
|
||
styleObj1.value = style1
|
||
styleObj2.value = style2
|
||
fontObj1.value = fontStyle1
|
||
fontObj2.value = fontStyle2
|
||
|
||
point = !point
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
getFonts()
|
||
emitter.on('getPhotoProductsInfo', getPhotoProductsInfoHandler)
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
emitter.off('getPhotoProductsInfo', getPhotoProductsInfoHandler)
|
||
})
|
||
|
||
|
||
const gotoSubmitOrderPage = async () => {
|
||
let res = await checkPhotoProducts()
|
||
if (!dealResult(res)) return ;
|
||
|
||
uni.navigateTo({
|
||
url: '/pages/book/photoProductsOrder/photoProductsOrder?isMakeup=' + point + '&scene=' + scene + '&id=' + photoProductsInfo.value.id
|
||
})
|
||
}
|
||
|
||
const checkPhotoProducts = async () => {
|
||
const res = await uni.request({
|
||
url: baseUrl + '/advanceOrder/check/photoProducts',
|
||
method: 'POST',
|
||
header: {
|
||
cookie
|
||
},
|
||
data: {
|
||
id: photoProductsInfo.value.id
|
||
}
|
||
})
|
||
return res
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.my-radio {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.ml-13 {
|
||
margin-left: 24.38rpx;
|
||
}
|
||
.ml-17 {
|
||
margin-left: 31.88rpx;
|
||
}
|
||
.mt-5 {
|
||
margin-top: 9.38rpx;
|
||
}
|
||
.ml-19 {
|
||
margin-left: 35.63rpx;
|
||
}
|
||
.page {
|
||
background-color: #ffffff;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
}
|
||
.group {
|
||
padding: 37.5rpx 22.5rpx;
|
||
border-bottom: solid 1.88rpx #0000001f;
|
||
}
|
||
.font {
|
||
font-size: 37.5rpx;
|
||
font-family: FangZhengFonts;
|
||
color: #323232;
|
||
}
|
||
.text {
|
||
margin: 3.75rpx 0;
|
||
line-height: 36.34rpx;
|
||
}
|
||
.image {
|
||
margin-right: 3.75rpx;
|
||
width: 52.5rpx;
|
||
height: 41.25rpx;
|
||
}
|
||
.group_2 {
|
||
margin-top: 35.63rpx;
|
||
}
|
||
.image_2 {
|
||
border-radius: 18.75rpx;
|
||
width: 198.75rpx;
|
||
height: 200.63rpx;
|
||
}
|
||
.group_3 {
|
||
position: relative;
|
||
margin-right: 112.5rpx;
|
||
margin-bottom: 7.5rpx;
|
||
width: 369.38rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 33.75rpx;
|
||
font-family: FangZhengFonts;
|
||
line-height: 30.58rpx;
|
||
color: #323232;
|
||
}
|
||
.text_2 {
|
||
line-height: 41.25rpx;
|
||
}
|
||
.text_3 {
|
||
margin-left: 7.5rpx;
|
||
line-height: 22.54rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
.group_4 {
|
||
margin-left: 26.25rpx;
|
||
border-radius: 9.38rpx;
|
||
width: 123.75rpx;
|
||
height: 97.95rpx;
|
||
}
|
||
.text_4 {
|
||
line-height: 32.31rpx;
|
||
}
|
||
.pos {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.text-wrapper {
|
||
padding: 15rpx 0;
|
||
background-color: #ffffff;
|
||
border-radius: 37.5rpx;
|
||
width: 159.38rpx;
|
||
height: 54.38rpx;
|
||
border: solid 1.88rpx #c3c3c3;
|
||
}
|
||
.font_3 {
|
||
font-size: 26.25rpx;
|
||
font-family: FangZhengFonts;
|
||
line-height: 24.21rpx;
|
||
color: #323232;
|
||
}
|
||
.text_5 {
|
||
line-height: 24.41rpx;
|
||
}
|
||
.text_6 {
|
||
line-height: 23.89rpx;
|
||
}
|
||
.text_7 {
|
||
margin-top: 33.75rpx;
|
||
}
|
||
.equal-division {
|
||
align-self: stretch;
|
||
margin: 41.25rpx 15rpx 0;
|
||
}
|
||
.section {
|
||
position: relative;
|
||
width: 320.63rpx;
|
||
}
|
||
.equal-division-item {
|
||
padding: 18.75rpx 22.5rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 18.75rpx;
|
||
height: 157.5rpx;
|
||
border: solid 1.88rpx #c3c3c3;
|
||
}
|
||
.image_3 {
|
||
opacity: 0.85;
|
||
border-radius: 18.75rpx;
|
||
width: 138.75rpx;
|
||
height: 84.38rpx;
|
||
}
|
||
.section_2 {
|
||
margin-right: 15rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 50%;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.text_8 {
|
||
margin-left: 45rpx;
|
||
}
|
||
.image_4 {
|
||
border-radius: 15rpx;
|
||
width: 138.75rpx;
|
||
height: 84.38rpx;
|
||
}
|
||
.group_5 {
|
||
padding: 37.5rpx 22.5rpx 31.88rpx;
|
||
}
|
||
.text_9 {
|
||
line-height: 34.42rpx;
|
||
}
|
||
.text_10 {
|
||
color: #e79ea1;
|
||
line-height: 25.05rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
padding: 22.5rpx 0;
|
||
background-color: #e79ea1;
|
||
border-radius: 187.5rpx;
|
||
width: 241.88rpx;
|
||
height: 76.88rpx;
|
||
}
|
||
.text_11 {
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
font-family: FangZhengFonts;
|
||
line-height: 28.01rpx;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style> |