Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
0ac2721e by zhangmeng
Options

化妆

1 parent 0beb5d2d
Inline Side-by-side
Showing 6 changed files with 364 additions and 246 deletions
src/apiPc/booking.js
......@@ -224,6 +224,14 @@ export function makeUpDetail(data) {
})
}
export function getActivityMealVoListByStudioId(data) {
return request({
url: `/ota/activityMeal/getActivityMealVoListByStudioId`,
method: 'get',
params:data
})
}
export function getMealConfList(data) {
return request({
url: `/ota/mealConfig/getMealConfList`,
......@@ -231,3 +239,28 @@ export function getMealConfList(data) {
params:data
})
}
export function submitOrderMeal(data) {
return request({
url: `/ota/norder/submitOrderMeal`,
method: 'post',
data
})
}
export function getMealOrderInfo(data) {
return request({
url: `/ota/orderMeal/getMealOrderInfo`,
method: 'get',
params:data
})
}
export function getMealOrderInfoByLogex(data) {
return request({
url: `/ota/orderMeal/getMealOrderInfoByLogex`,
method: 'get',
params:data
})
}
......
src/routerPc/en.js
......@@ -410,7 +410,7 @@ export const constantRoutes = [
meta: { title: 'Makeup Appointment' }
},
{
path: 'makeUp/:cptId/:id/:orderId',
path: 'makeUp/:cptId/:id/:lasId',
component: () => import('@/viewsPc/booking/makeUpOrder.vue'),
name: 'makeUpOrder',
meta: { title: 'Makeup Reservation' }
......
src/viewsPc/booking/component/makeUpCalendar.vue
......@@ -10,14 +10,18 @@
<el-row justify="center" align='middle' >
<div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>
<div>
<el-date-picker
v-model="value2"
type="datetimerange"
range-separator="-"
start-placeholder="Start date"
end-placeholder="End date"
size="small"
/>
<!-- <el-date-picker-->
<!-- v-model="value2"-->
<!-- type="daterange"-->
<!-- range-separator="-"-->
<!-- start-placeholder="Start date"-->
<!-- end-placeholder="End date"-->
<!-- format="YYYY-MM-DD"-->
<!-- value-format="YYYY-MM-DD"-->
<!-- size="small"-->
<!-- @change="changee"-->
<!-- />-->
<el-input readonly v-model="value2" type="text" size="small" style="width: 280px"></el-input>
</div>
<div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>
</el-row>
......@@ -25,9 +29,10 @@
<el-col :span="7">
<div style="text-align: right;padding-right: 10px">
<el-date-picker
v-model="currentDate"
type="datetime"
v-model="currentDate1"
type="date"
placeholder="YYYY-MM-DD"
format="YYYY-MM-DD"
size="small"
@change="dateChange"
/>
......@@ -47,20 +52,27 @@
<li v-for="n in schList" :key="n.id" @click="goMatch(n)">
<el-row style="width: 100%">
<div style="margin-right: 25px">
<el-image style="width: 90px;height: 115px" src="@/assets/dance/banner.png" fit="cover" />
<el-image style="width: 90px;height: 115px" :src="fillImgUrl(n.photos?.split(',')[0]) " fit="cover" />
</div>
<div style="flex: 1" >
<div class="hz-title">A套餐</div>
<div class="hz-title">{{ n.name }}</div>
<div>
<el-row justify="space-between">
<el-row class="hz-p">
<div style="margin-right: 80px">项目: <span style="margin-right: 20px">发型x1</span> <span>化妆x1</span> </div>
<div style="margin-right: 80px">服务: 化妆x1 </div>
<div>剩余 <span class="sign">6</span>名额 </div>
<el-row class="hz-p" style="flex: 1">
<el-col :span="8">
<div >{{ language==0?'套餐说明':'Package Description' }}: <span style="margin-right: 20px">{{n.introduction}}</span></div>
</el-col>
<el-col :span="8">
<div>{{ language==0?'剩余':'' }}<span class="sign">{{ n.num-n.counts }}</span>{{language==0?'名额':'Places Remaining' }} </div>
</el-col>
<el-col :span="8">
<div >{{n.goHome==1?language==0?'上门化妆':'Door-to-door makeup':''}}</div>
</el-col>
</el-row>
<el-row>
<div class="zh-margin" style="font-size: 36px;color: #ff8124"><span style="font-size: 24px">￥ </span> 120</div>
<el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
<div class="zh-margin" style="font-size: 36px;color: #ff8124"><span style="font-size: 24px">{{ language==0?'¥':'€'}} </span> {{language==0?n.mealPrice:n.mealPriceEn}}</div>
<el-button :disabled="n.num-n.counts<=0" class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
</el-row>
</el-row>
</div>
......@@ -82,16 +94,19 @@ import {dayjs} from "element-plus";
import {useRoute,useRouter} from 'vue-router'
import * as booking from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "/@/store/modules/user";
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route=useRoute()
const currentDate = ref(new Date())
const calendarRange = ref([dayjs('2024-07-17').toDate(), dayjs('2024-07-17').toDate()])
const currentDate1 = ref(new Date())
const calendarRange = ref([dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())])
const schList = ref([])
const loading = ref(false)
const query = ref({
currentDate: dayjs(new Date()).format('YYYY-MM-DD') ,
// id:route.params.id
lasId:route.params.id,
})
const value1=ref('')
const value2=ref('')
......@@ -100,34 +115,46 @@ const value2=ref('')
getScheduleList()
function getScheduleList() {
loading.value = true
// query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
booking.getMealConfList(query.value).then(res=>{
query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
booking.getActivityMealVoListByStudioId(query.value).then(res=>{
loading.value = false
schList.value = res.data
})
}
function selectDate(date) {
console.log(dayjs(date).format('YYYY-MM-DD'))
query.value.currentDate = dayjs(date).format('YYYY-MM-DD')
console.log(currentDate.value)
currentDate1.value= currentDate.value=dayjs(date).toDate()
console.log(date)
getScheduleList()
}
function dateChange(){
query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
currentDate.value=currentDate1.value
calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
getScheduleList()
console.log(currentDate.value)
console.log(currentDate1.value)
}
function goMatch(n) {
if (!user) {
useUserStore().setVisitor()
return
}
router.push({
name: 'makeUpOrder',
params: {
orderId: n.cptId
lasId: n.id
},
query: {
matchId: n.cptId
}
// query: {
// matchId: n.cptId
// }
})
}
function changee(){
console.log(value2.value)
}
</script>
<style scoped lang="scss">
......@@ -283,7 +310,7 @@ function goMatch(n) {
line-height: 26px;
text-align: center;
background-color: #fff;
margin: 0 16px 5px 16px;
margin: 0 16px -2px 16px;
cursor:pointer
}
</style>
......
src/viewsPc/booking/makeUpOrder.vue
......@@ -9,75 +9,79 @@
<el-card>
<div class='order-header'>
<div class="title">
Mango 美妆工作室
{{formData.name }}
</div>
<el-row class="hz-row" >
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
<OfficeBuilding/>
</el-icon>
成立 6 年 |
{{ language==0?'成立':'Established for'}} <span class="sign" style="padding-top: 2px">6</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
<UserFilled/>
</el-icon>
12 名化妆师 |
<span class="sign" style="padding-top: 2px"> {{ formData.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
<PhoneFilled/>
</el-icon>
1535891241234 |
<span style="padding-top: 2px">
{{ formData.contact }}
</span>
&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
</el-icon>
江苏省1412341234
{{formData.rearks}}
</el-row>
<hr>
<hr style="border:1px solid #D3D1F6 ">
<el-row class="table">
<div style="margin-right: 50px">
<el-image style="width:55px;height: 70px " src="" fit="cover" />
<el-image style="width:55px;height: 70px " :src="fillImgUrl(formDatas.photos?.split(',')[0]) " fit="cover" />
</div>
<el-row style="flex: 1">
<div style="flex: 1">
<div style="margin-bottom: 20px;">预约日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">2024.03.11</span></div>
<div>套餐名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">A套餐</span></div>
<div>套餐名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.name }}</span></div>
</div>
<div style="flex: 1">
<div style="margin-bottom: 20px">预约时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">09:00~12:00</span> </div>
<div>服务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">上门化妆</span></div>
<div>上门化妆 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.goHome==1?'是':'否' }}</span></div>
</div>
<div style="flex: 1">
<div style="margin-bottom: 20px">化妆项目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">化妆x1 发型x1</span></div>
<div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">￥450</span></div>
<div style="margin-bottom: 20px">套餐说明&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{formDatas.introduction}}</span></div>
<div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">{{language==0? '￥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div>
</div>
</el-row>
</el-row>
</div>
<br>
<div class="yu">预约时间</div>
<el-row style="width: 100%" >
<el-button v-for="v in radioList" @click="handleRadio(v)" :disabled="v.num-v.counts<=0" class="radioBox" :class="{'radioBoxbg':v.flag}">
<div>
<div>{{ v.nameStart }}-{{ v.nameEnd }}</div>
<div>(剩余: <span class="sing">{{ v.num-v.counts }}</span> 个)</div>
</div>
</el-button>
</el-row>
<br>
<div class="yu">预约信息</div>
<br>
<div class="form-order">
<el-form :model="form" style="width: 600px" :label-width="language==0?'140px':'160px'" :rules="rules" ref="formRef">
<el-form-item :label="language==0?'预约时间':'Appointment Time'" required>
<el-date-picker
@change="getDaysBetween"
v-model="rzRange"
type="daterange"
:disabled-date="disabledDateRZ"
:placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
value-format="YYYY-MM-DD"/>
</el-form-item>
<el-form-item :label="language==0?'预约数量':'Appointment Time'" required>
<el-input-number v-model="form.number" :min="1" :max="10" label="描述文字"/>
<el-form :model="form" style="width: 800px" :label-width="language==0?'140px':'200px'" :rules="rules" ref="formRef">
<el-form-item :label="language==0?'预约数量':'Number Of Reservations'" required prop="num">
<el-input-number style="width: 100%" v-model.trim="form.num" :min="1" :max="10" @change="changNum"/>
</el-form-item>
<el-form-item :label="language==0?'预约联系人':'Appointment Time'" required>
<el-input v-model="form.number" :min="1" :max="10" label="描述文字"/>
<el-form-item :label="language==0?'预约联系人':'Appointment Contact'" required prop="contacts">
<el-input v-model.trim="form.contacts" :min="1" :max="10" />
</el-form-item>
<el-form-item :label="language==0?'联系电话':'Appointment Time'" required>
<el-input v-model="form.number" :min="1" :max="10" label="描述文字"/>
<el-form-item :label="language==0?'联系电话':'Contact Number'" required prop="phone">
<el-input v-model.trim="form.phone" :min="1" :max="13" />
</el-form-item>
<el-form-item :label="language==0?'备注':'Appointment Time'" required>
<el-input type="textarea" :rows="3" v-model="form.number" :min="1" :max="10" label="描述文字"/>
<el-form-item :label="language==0?'备注':'Remarks'" prop="remarks">
<el-input type="textarea" :rows="3" v-model.trim="form.remarks" :min="1" :max="10" />
</el-form-item>
</el-form>
</div>
......@@ -235,13 +239,15 @@
<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {ref, reactive, onMounted,getCurrentInstance} from "vue";
import {useStorage} from "@vueuse/core/index";
import {checkResidueRoom, getBaseInfoByActiveId, newsSubmitOrderHotel} from "@/apiPc/booking"
import {checkResidueRoom, getBaseInfoByActiveId, newsSubmitOrderHotel, submitOrderMeal} from "@/apiPc/booking"
import * as booking from "@/apiPc/booking"
import dayjs from 'dayjs'
import {ElMessage, ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user";
import {formatDate} from "/@/utils";
const { proxy } = getCurrentInstance()
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
......@@ -251,12 +257,15 @@ const hotelName = ref('')
const canOrderNum = ref(0)
const lform = ref({})
const form = ref({
isAddbed: '0',
num: '1',
roomNum: 0,
addNum: 0,
ddDate: '14:00',
phone: user?.phonenumber || '',
})
const formData=ref({})
const formDatas=ref({})
const timeVal=ref(null)
const rzRange = ref([])
const rzUserArr = ref([])
const money = ref(0)
......@@ -343,20 +352,62 @@ const ddDateArr = ref([
label: '02:00'
}
])
const rules = ref({})
const rules = ref({
num: [
{ required: true, message: '预约数量不能为空', trigger: 'blur' },
],
contacts: [
{ required: true, message: '请输入预约联系人', trigger: 'blur' },
],
phoned: [
{ required: true, message: '请输入联系电话', trigger: 'change' },
],
})
const radioList=ref([])
let usedays = 0
onMounted(() => {
console.log(route.query)
room.value = JSON.parse(decodeURIComponent(route.query.room))
console.log(room.value)
hotelName.value = route.query.hotelName
money.value = 0
// initDays()
getData()
getRadioList()
})
function getData() {
booking.makeUpDetail({ activityId: route.params.cptId,
studioId:route.params.id}).then(res => {
formData.value = res.data
}).catch(err => {
console.log(err)
})
}
getScheduleList()
function getScheduleList() {
booking.getActivityMealVoListByStudioId({lasId:route.params.id,lasmId:route.params.lasId}).then(res=>{
formDatas.value={}
res.data.forEach(v=>{
if (v.id==route.params.lasId) formDatas.value=v
})
console.log(formDatas.value)
})
}
function getRadioList(){
booking.getMealConfList({ lasmId:route.params.lasId}).then(res => {
radioList.value = res.data
radioList.value.forEach(item=>{
item.flag=false
})
console.log(radioList.value)
}).catch(err => {
console.log(err)
})
}
function initDays() {
getBaseInfoByActiveId(route.params.cptId).then(res => {
booking.getMealConfList({ lasmId:route.params.lasId}).then(res => {
lform.value = res.data
// if(lform.value.hqStart){
// const today = dayjs()
......@@ -385,176 +436,37 @@ function disabledDateRZ(date) {
return true
}
function changeRoomNum(e) {
if (form.value.addNum > e) {
form.value.addNum = e
}
console.log(e)
rzUserArr.value.length = e
countMoney()
}
function changeAddBed(e) {
if (e == '0') {
form.value.addNum = 0
}
changeBed()
}
function changeBed() {
countMoney()
}
function checkreRooms() {
var obj = {
ahrId: room.value.id,
rzStart: rzRange.value[0],
rzEnd: rzRange.value[1]
}
checkResidueRoom(obj).then(res => {
canOrderNum.value = res.data.useCount
})
}
function getDaysBetween(e) {
console.log('入住时间arr', e, rzRange.value)
var d1 = Date.parse(e[0])
var d2 = Date.parse(e[1])
if (d1 == d2) {
usedays = 0
ElMessage.error(language == 0 ? '入住时间跨度需大于一天' : 'The duration of the stay must be more than one day.')
// console.trace()
rzRange.value = []
return
} else {
var days = (d2 - d1) / (1 * 24 * 60 * 60 * 1000);
usedays = days
}
countMoney()
var startTime = getDate(rzRange.value[0]);
var endTime = getDate(rzRange.value[1]);
var dateArr = [];
while ((endTime.getTime() - startTime.getTime()) > 0) {
var year = startTime.getFullYear();
var month = (startTime.getMonth() + 1).toString().length === 1 ? "0" + (parseInt(startTime.getMonth()
.toString(), 10) + 1) : (startTime.getMonth() + 1);
var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
dateArr.push(year + "-" + month + "-" + day);
startTime.setDate(startTime.getDate() + 1);
}
choseRooms.value = dateArr;
checkreRooms()
}
function getDate(datestr) {
var temp = datestr.split("-");
if (temp[1] === '01') {
temp[0] = parseInt(temp[0], 10) - 1;
temp[1] = '12';
} else {
temp[1] = parseInt(temp[1], 10) - 1;
}
//new Date()的月份入参实际都是当前值-1
var date = new Date(temp[0], temp[1], temp[2]);
return date
}
function countMoney() {
if (language.value == 0) {
money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
.addNum * usedays)).toFixed(2)
} else {
money.value = ((room.value.roomPriceEn * form.value.roomNum * usedays) + (room.value.bedPriceEn * form.value
.addNum * usedays)).toFixed(2)
}
// console.log(usedays,money.value)
}
function submit() {
if (!user) {
useUserStore().setReLogin()
useUserStore().setVisitor()
return
}
if (usedays == 0) {
ElMessage.warning(language.value == 0 ? '入住时间跨度需大于一天' : 'Check-in time must be greater than one day')
return
}
if (form.value.roomNum == 0) {
ElMessage.warning(language.value == 0 ? '请选择房间数量' : 'Please select the number of rooms')
return
}
if (!form.value.phone) {
ElMessage.warning(language.value == 0 ? '请填写手机号' : 'Please fill in the phone number')
return
}
form.value.rzStart = rzRange.value[0]
form.value.rzEnd = rzRange.value[1]
let arr = []
for (var n of rzUserArr.value) {
if (n == '' || n == undefined) {
// '请填写入住人信息'
ElMessage.warning(language.value == 0 ? '请填写入住人信息' : 'Please fill in the check-in information')
return
} else {
arr.push(n)
}
}
form.value.rzUsers = arr.toString()
form.value.activeId = room.value.activityId
form.value.ahId = room.value.hotelId
form.value.ahrId = room.value.id
form.value.orderName = hotelName.value
form.value.roomName = room.value.roomType
form.value.roomPhoto = room.value.photo
var str = ''
var str2 = ''
if (language.value == 0) {
if (form.value.addNum && form.value.addNum > 0) {
str = `加床${form.value.addNum}张`
} else {
str = `未加床`
}
if (room.value.breakfastNum && room.value.breakfastNum > 0) {
str2 = `${room.value.breakfastNum}份早餐`
} else {
str2 = `无早餐`
}
form.value.room = `${form.value.roomNum} 间 · ${usedays}晚 · ${str} · ${str2}`
console.log(form.value.room)
}
if (language.value == 1) {
if (form.value.addNum && form.value.addNum > 0) {
str = `have ${form.value.addNum} extra bed`
} else {
str = `No extra bed`
}
if (room.value.breakfastNum && room.value.breakfastNum > 0) {
str2 = `${room.value.breakfastNum} breakfast`
} else {
str2 = `No breakfast`
}
form.value.room = `${form.value.roomNum} rooms · ${usedays} night·${str}·${str2}`
console.log(form.value.room)
}
if (!timeVal.value)return proxy.$modal.msgError('请选择预约时间!', )
proxy.$refs['formRef'].validate(valid=>{
if (valid){
form.value.total=money.value
form.value.orderName=formData.value.name
form.value.dcStart='2024-05-29'
form.value.activeId=route.params.cptId
form.value.asId=route.params.id
form.value.asmId=route.params.lasId
form.value.asmcId=timeVal.value.id
form.value.packageName=formDatas.value.name
form.value.timePeriod= timeVal.value.nameStart+'-'+timeVal.value.nameEnd
console.log(form.value)
// 提交确认
ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
type: 'warning'
}).then(() => {
newsSubmitOrderHotel(form.value).then(res => {
booking.submitOrderMeal(form.value).then(res => {
if (res.data) {
if (res.data.roomNum == -100) {
ElMessage.warning(language.value == 0 ? '剩余房间数不足' : 'The remaining number of rooms is insufficient')
checkreRooms()
ElMessage.warning(language.value == 0 ? '预定时间不足' : 'The remaining number of rooms is insufficient')
getRadioList()
} else {
//去付钱
router.push({
......@@ -562,19 +474,52 @@ function submit() {
query: {
orderId: res.data.orderId,
money: res.data.total,
type: 'hotel'
type: 'makeUp'
}
})
}
} else {
ElMessage.warning(language.value == 0 ? '无可预订的房间' : 'No rooms available to book')
ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No rooms available to book')
}
}).catch(err => {
ElMessage.warning(language.value == 0 ? '无可预订的房间' : 'No rooms available to book')
ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No rooms available to book')
})
})
}else {
return proxy.$message.warning(language.value == 0 ? '请填写完整信息' : 'Please fill in the complete information')
}
})
}
function handleRadio(v){
timeVal.value=null
radioList.value.forEach(t=>{
if(v.id==t.id){
t.flag=true
v.flag =true
timeVal.value=v
changeMaony()
}else{
t.flag=false
}
})
}
function changNum (){
changeMaony()
}
function changeMaony(){
if(timeVal.value&&form.value.num){
if (language.value==0){
money.value= formDatas.value.mealPrice * form.value.num
}else{
money.value= formDatas.value.mealPriceEn * form.value.num
}
}
}
</script>
<style scoped lang="scss">
......@@ -665,4 +610,28 @@ function submit() {
}
}
.radioBox{
border: 1px dashed #acacac;
height: 60px;
width: 156px;
text-align: center;
line-height: 29px;
margin: 10px;
padding: 0;
span{
width: 100%;
height: 100%;
}
}
.radioBoxbg{
background-color: #ecebfc;
border: 1px solid #453DEA;
color:#453DEA;
}
.sing{
color:#453DEA;
}
</style>
......
src/viewsPc/booking/pay.vue
......@@ -27,7 +27,6 @@
</el-row>
</div>
</div>
<div v-if="type == 'car'">
<div class="leftboderTT">{{ language == 0 ? '路线信息' : 'Car Information' }}</div>
<div class="border-info mt20">
......@@ -53,7 +52,25 @@
</el-row>
</div>
</div>
<div v-if="type == 'makeUp'">
<div class="leftboderTT">{{ language == 0 ? '化妆信息' : 'Hotel Information' }}</div>
<div class="border-info mt20">
<h3>{{ formInfo.studioName }}</h3>
<el-row>
<el-col>
{{ language == 0 ?'地址':'Address' }}：
<span v-if="language == 0">{{ formInfo.remarks }} {{ form.cityName }} {{ form.areaName }} </span>
{{ form.address }}
</el-col>
<el-col>
{{ language == 0 ?'套餐':'Package' }}：{{ formInfo.mealName }} <span style="margin-left: 40px">{{ language==0?'价格':'Price' }}</span><span class="price">{{language==0? '￥'+formInfo.mealPrice:'€'+ formInfo.mealPriceEn}}</span>
</el-col>
<el-col>
{{ language == 0 ?'套餐说明':'Package Description' }}：{{ formInfo.introduction}}
</el-col>
</el-row>
</div>
</div>
<div class="leftboderTT">{{ language == 0 ? '预订信息' : 'Booking information' }}</div>
......@@ -127,6 +144,22 @@
<el-col :lg="8" :md="12" :sm="12" :xs="24">{{ language==0?'联系方式':'Contact Phone' }}：{{ form.phone }}</el-col>
<el-col :span="24" >{{ language==0?'备注':'Remarks' }}：{{ form.remarks || '-' }}</el-col>
</el-row>
<el-row v-if="type == 'makeUp'">
<el-col :lg="8" :md="12" :sm="12" :xs="24">
<div class="mb10">{{ language==0?'化妆时间':'Makeup time' }}：
<!-- {{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;' }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'}}-->
{{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+ form.nameStart }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+form.nameEnd}}
</div>
</el-col>
<el-col :lg="12" :md="12" :sm="12" :xs="24">
<div class="mb10">{{ language==0?'预约数':'Number of appointments' }}：{{ form.num }} </div>
</el-col>
<el-col :lg="8" :md="12" :sm="12" :xs="24">
<div class="mb10">{{ language==0?'联系人':'Contact Person' }}：{{ form.contacts }}</div>
</el-col>
<el-col :lg="8" :md="12" :sm="12" :xs="24">{{ language==0?'联系方式':'Contact Phone' }}：{{ form.phone }}</el-col>
<el-col :span="24" >{{ language==0?'备注':'Remarks' }}：{{ form.remarks }}</el-col>
</el-row>
</div>
<el-row justify="space-between" align="middle">
......@@ -169,7 +202,7 @@
<div class="leftboderTT">{{ language == 0 ? '选择支付方式' : 'Choose payment method' }}</div>
<div class="mt20">
<el-radio-group v-model="payType">
<el-radio-group v-model="payType" >
<el-radio value="2" v-if="language==0" border>
<!-- 微信-->
<svg t="1709002960407" class="icon" viewBox="0 0 3152 1024" version="1.1"
......@@ -298,7 +331,14 @@ import useUserStore from "@/store/modules/user";
import FileUpload from "@/components/FileUpload";
import {useStorage} from "@vueuse/core/index";
import {ElMessage} from "element-plus";
import {cancelOrder, cancelOrder2, getCarBilldetailbyId, getFoodBilldetailbyId} from "@/apiPc/booking";
import {
cancelOrder,
cancelOrder2,
getCarBilldetailbyId,
getFoodBilldetailbyId,
getMealOrderInfoByLogex
} from "@/apiPc/booking";
import dayjs from 'dayjs'
import {delPerson} from "@/api/exam/person";
const isLogin = ref(false)
......@@ -306,12 +346,12 @@ const language = useStorage('language', 0)
const totalFee = ref('')
const wePayCodeUrl = ref('')
const form = ref({})
const formInfo=ref({})
const type = ref('')
const errorBox = ref(false)
const hideconfirmbtn = ref(false)
const user = useUserStore().user
console.log(route.query.orderId)
// 1763462073870237698
if (useUserStore().user) {
isLogin.value = true
......@@ -336,8 +376,12 @@ onMounted(() => {
case '2':
type.value = 'food'
break
case '3':
type.value = 'makeUp'
break
}
}
getData()
})
......@@ -384,6 +428,12 @@ function getData() {
errorBox.value = true
})
}
if(type.value=='makeUp') {
MakeUpOrder()
MakeUpIno()
}
console.log(payType.value)
}
function goHome() {
......@@ -391,6 +441,7 @@ function goHome() {
}
function goPay() {
debugger
if (payType.value == '2') {
booking.createWePay({orderId: orderId.value}).then(res => {
wePayCodeUrl.value = res.data
......@@ -428,6 +479,26 @@ function showLogin() {
useUserStore().setReLogin()
}
function MakeUpOrder(){
booking.getMealOrderInfo({orderId: orderId.value}).then(res => {
form.value=res.data
totalFee.value=language.value==0?form.value.total:form.value.totalEn
}).catch(err => {
console.log(err)
errorBox.value = true
})
}
function MakeUpIno(){
booking.getMealOrderInfoByLogex({orderId: orderId.value}).then(res=>{
formInfo.value=res.data
})
.catch((e) => {
console.log(e)
errorBox.value = true
})
}
const cancel = () => {
//取消订单
proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' :`Are you sure to cancel the order?`).then(() => {
......@@ -451,6 +522,8 @@ const unsubscribe = () => {
})
})
}
</script>
<style scoped lang="scss">
......@@ -606,4 +679,8 @@ const unsubscribe = () => {
font-size: 16px;
margin-top: 10px
}
.price{
color:orange;
}
</style>
......
src/viewsPc/center/myReservation.vue
......@@ -15,6 +15,8 @@
<label class="blueTag" v-if="b.orderType == 0"> {{ language==0?'酒店':'HOTEL' }} </label>
<label class="purpleTag" v-if="b.orderType == 1"> {{ language==0?'车辆':'TRANSPORTATION' }} </label>
<label class="orangeTag" v-if="b.orderType == 2"> {{ language==0?'餐饮':'DINING' }} </label>
<label class="orangeTag" v-if="b.orderType == 3"> {{ language==0?'化妆':'MakeUp' }} </label>
<span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span>
</div>
......@@ -57,6 +59,12 @@
<p>{{language==0?'配送日期':'Delivery Date'}}：{{b.extJsonObj.dcEnd }} ~ {{b.extJsonObj.dcEnd}}</p>
</div>
<div v-if="b.orderType==3">
<h3 class="name">{{b.name}}</h3>
<p v-if="language==0">
{{dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[0]+'-'+dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[1] }}
</p>
</div>
</el-col>
<el-col :lg="6">
<div v-if="b.orderType == 0">
......@@ -67,6 +75,9 @@
</div>
<div v-if="b.orderType == 2">
</div>
<div v-if="b.orderType == 3">
<p>{{ b.extJsonObj.packageName }}</p>
</div>
</el-col>
<el-col :lg="4" class="text-center">
<span class="text-warning"> {{ language==0?'¥':'€' }}
......@@ -76,8 +87,7 @@
<el-col :lg="4" >
<div class="text-right mb20 text-danger">
<el-countdown value-style="color:#E60012;font-size:16px;" v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" format="mm:ss"
:value="b.countdown" @finish="finish(b)"/>
<el-countdown value-style="color:#E60012;font-size:16px;" v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" format="mm:ss" :value="b.countdown" @finish="finish(b)"/>
</div>
<div class="text-right">
......@@ -102,6 +112,7 @@ import {onMounted} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";
import {newbilllist} from "@/apiPc/common";
import useUserStore from "@/store/modules/user";
import dayjs from 'dayjs'
const router = useRouter()
const language= useStorage('language',0)
const list = ref([])
......@@ -118,11 +129,12 @@ function getList() {
newbilllist({createById:user.userId}).then(res=>{
list.value = res.rows
for (var b of list.value) {
b.messageObj = JSON.parse(b.message)
b.messageObj = JSON.parse(b.message) || {}
b.extJsonObj = JSON.parse(b.extJson) || {}
if(b.surplus&&b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')){
b.countdown = Date.now() + Number((b.surplus.split(',')[0]*60 + b.surplus.split(',')[1])*10)
console.log(b.countdown)
const a=Number(b.surplus.split(',')[0]*60)
const c=Number(b.surplus.split(',')[1]*10)
b.countdown = Date.now() + a+c
}
}
})
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!