Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
5f6fdd28 by 华明祺
Options

no message

1 parent f638433a
Inline Side-by-side
Showing 2 changed files with 235 additions and 233 deletions
src/viewsPc/booking/addInvoice.vue
......@@ -13,95 +13,95 @@
<el-row class="pd20" :gutter="20">
<el-col :span="24">
<!--已选订单-->
<div v-if="orderType!=6" class="border-info" v-for="b in list" :key="b.id">
<label class="blueTag" v-if="orderType == 0"> {{ language==0?'酒店订单':'HOTEL' }}</label>
<label class="orangeTag" v-if="b.orderType == 1"> {{ language==0?'车辆订单':'TRANSPORTATION' }}</label>
<label class="purpleTag" v-if="b.orderType == 2"> {{ language==0?'餐饮订单':'DINING' }}</label>
<label class="pinkTag" v-if="b.orderType == 3"> {{ language==0?'化妆订单':'MakeUp' }}</label>
<label class="yellowTag" v-if="b.orderType == 4"> {{ language==0?'拍摄订单':'Shooting'}}</label>
<label class="yellowTag" v-if="!b.orderType&&orderType==5">{{ language==0?'赛事报名':'REGISTRATION' }}</label>
<div v-for="b in list" v-if="orderType!=6" :key="b.id" class="border-info">
<label v-if="orderType == 0" class="blueTag"> {{ language==0?'酒店订单':'HOTEL' }}</label>
<label v-if="b.orderType == 1" class="orangeTag"> {{ language==0?'车辆订单':'TRANSPORTATION' }}</label>
<label v-if="b.orderType == 2" class="purpleTag"> {{ language==0?'餐饮订单':'DINING' }}</label>
<label v-if="b.orderType == 3" class="pinkTag"> {{ language==0?'化妆订单':'MakeUp' }}</label>
<label v-if="b.orderType == 4" class="yellowTag"> {{ language==0?'拍摄订单':'Shooting' }}</label>
<label v-if="!b.orderType&&orderType==5" class="yellowTag">{{ language==0?'赛事报名':'REGISTRATION' }}</label>
<h3 v-if="b.name">{{ b.name }}</h3>
<h3 v-if="b.cptName">{{ b.cptName }}</h3>
<div v-if="!b.orderType&&orderType==5">
<p v-if="b.groupName">{{ language==0?'团队名称':'Team name' }}：{{b.groupName}}</p>
<p v-if="b.payTime">{{ language==0?'支付时间':'Payment time' }}：{{b.payTime}}</p>
<p class="poPrice" v-if="b.totalPayAmount">{{paymentType!=2?'¥':'€'}} {{b.totalPayAmount}}</p>
<p v-if="b.groupName">{{ language==0?'团队名称':'Team name' }}：{{ b.groupName }}</p>
<p v-if="b.payTime">{{ language==0?'支付时间':'Payment time' }}：{{ b.payTime }}</p>
<p v-if="b.totalPayAmount" class="poPrice">{{ paymentType!=2?'¥':'€' }} {{ b.totalPayAmount }}</p>
</div>
<!-- 酒店订单-->
<!-- 酒店订单-->
<div v-if="b.orderType == 0">
<p>{{b.messageObj.roomInfo}}</p>
<p>{{b.messageObj.roomStayDate}}</p>
<p class="poPrice" v-if="b.totalStr">{{ b.paymentType==3?'€' :'¥' }}{{b.totalStr}}</p>
<p>{{ b.messageObj.roomInfo }}</p>
<p>{{ b.messageObj.roomStayDate }}</p>
<p v-if="b.totalStr" class="poPrice">{{ b.paymentType==3?'€' :'¥' }}{{ b.totalStr }}</p>
</div>
<!-- 接送订单-->
<!-- 接送订单-->
<div v-if="b.orderType == 1">
<p v-for="(car,index) in b.messageObj.carsList" :key="index" v-show="car.num>0">
<span>{{car.name}}：{{car.num}} 辆</span>
<p v-for="(car,index) in b.messageObj.carsList" v-show="car.num>0" :key="index">
<span>{{ car.name }}：{{ car.num }} 辆</span>
</p>
<p class="poPrice" v-if="b.total">{{ b.paymentType==3?'€' :'¥' }}{{b.totalStr}}</p>
<p v-if="b.total" class="poPrice">{{ b.paymentType==3?'€' :'¥' }}{{ b.totalStr }}</p>
</div>
<!-- 餐饮订单-->
<!-- 餐饮订单-->
<div v-if="b.orderType == 2">
<p v-for="(n,index) in b.messageObj.foodsList" :key="index">
<span v-if="n.num > 0">
{{n.name}}({{n.categoryName}}) <span>{{n.num}} 份</span>
{{ n.name }}({{ n.categoryName }}) <span>{{ n.num }} 份</span>
</span>
</p>
<p class="poPrice" v-if="b.total">{{ b.paymentType==3?'€' :'¥' }}{{b.total}}</p>
<p v-if="b.total" class="poPrice">{{ b.paymentType==3?'€' :'¥' }}{{ b.total }}</p>
</div>
<div v-if="b.orderType == 3 || b.orderType == 4">
<div>
{{language==0?'套餐名称：':''}}{{b.messageObj.packageName}}
{{ language==0?'套餐名称：':'' }}{{ b.messageObj.packageName }}
</div>
<div>
{{language==0?'预约时间：':''}}{{b.deliveryTime.slice(0,10)}} {{b.messageObj.timePeriod}}
{{ language==0?'预约时间：':'' }}{{ b.deliveryTime.slice(0,10) }} {{ b.messageObj.timePeriod }}
</div>
<p class="poPrice" v-if="b.total">{{ b.paymentType==3?'€' :'¥' }}{{b.totalStr}}</p>
<p v-if="b.total" class="poPrice">{{ b.paymentType==3?'€' :'¥' }}{{ b.totalStr }}</p>
</div>
</div>
<div class="border-info" v-if="orderType==6">
<label class="blueTag" >{{language==0?'票务订单':'Ticket'}}</label>
<div v-if="orderType==6" class="border-info">
<label class="blueTag">{{ language==0?'票务订单':'Ticket' }}</label>
<h3>{{ formDate.name }}</h3>
<div>
<p>地点：{{formDate.placeName}}</p>
<p>单价：{{paymentType!=2?'¥':'€'}}{{formDate.singlePrice}}</p>
<p>数量：{{formDate.seatList?.length}}张</p>
<p class="poPrice">{{paymentType!=2?'¥':'€'}}{{formDate.payAmount}}</p>
<p>地点：{{ formDate.placeName }}</p>
<p>单价：{{ paymentType!=2?'¥':'€' }}{{ formDate.singlePrice }}</p>
<p>数量：{{ formDate.seatList?.length }}张</p>
<p class="poPrice">{{ paymentType!=2?'¥':'€' }}{{ formDate.payAmount }}</p>
</div>
</div>
<div class="leftboderTT">{{ language == 0 ? '开票信息' : 'Invoice information' }}</div>
<div class="border-rr mt20 pd20">
<el-form class="mw500" :model="form" :label-width="language == 0 ?'100':'150'" :rules="rules" ref="formRef">
<el-form ref="formRef" class="mw500" :model="form" :label-width="language == 0 ?'100':'150'" :rules="rules">
<el-form-item :label="language == 0 ?'开票金额':'Amount'">
<span v-if="orderType==5||orderType==6" class="bigprice">{{paymentType!=2?'¥':'€'}}{{totalMoney}}</span>
<span v-else class="bigprice">{{paymentType!=3?'¥':'€'}}{{totalMoney}}</span>
<span v-if="orderType==5||orderType==6" class="bigprice">{{ paymentType!=2?'¥':'€' }}{{ totalMoney }}</span>
<span v-else class="bigprice">{{ paymentType!=3?'¥':'€' }}{{ totalMoney }}</span>
</el-form-item>
<el-form-item :label="language == 0 ?`发票形式`:'Invoice Form'" required prop="invoiceForm">
<el-radio-group v-model="form.invoiceForm">
<el-radio value="1">{{ language == 0 ? '电子发票' : 'E-invoice' }}</el-radio>
<!-- <el-radio value="2" v-if="kpType.indexOf('2')!=-1">{{ language == 0 ? '纸质普票' : 'Paper-invoice' }}</el-radio>-->
<!-- <el-radio value="3" v-if="kpType.indexOf('3')!=-1">{{ language == 0 ? '纸质专票' : 'Paper-special-invoice' }}</el-radio>-->
<!-- <el-radio value="2" v-if="kpType.indexOf('2')!=-1">{{ language == 0 ? '纸质普票' : 'Paper-invoice' }}</el-radio>-->
<!-- <el-radio value="3" v-if="kpType.indexOf('3')!=-1">{{ language == 0 ? '纸质专票' : 'Paper-special-invoice' }}</el-radio>-->
</el-radio-group>
</el-form-item>
<!-- <el-form-item :label="`邮寄地址`" v-else required>-->
<!-- <el-button plain type="primary" size="small" v-if="addrList.length==0" @click="goEditAddress">-->
<!-- +{{ language==0?'添加地址':'Add' }}-->
<!-- </el-button>-->
<!-- <div v-else class="flexCenter">-->
<!-- <div>-->
<!-- <div class="bigSize">{{nowAddress.contact}} {{nowAddress.phone}}</div>-->
<!-- <div class="smallSize">{{nowAddress.addName}}</div>-->
<!-- </div>-->
<!-- <a @click="goEditAddress" class="text-primary">-->
<!-- <el-icon><Switch /></el-icon>切换-->
<!-- </a>-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="`邮寄地址`" v-else required>-->
<!-- <el-button plain type="primary" size="small" v-if="addrList.length==0" @click="goEditAddress">-->
<!-- +{{ language==0?'添加地址':'Add' }}-->
<!-- </el-button>-->
<!-- <div v-else class="flexCenter">-->
<!-- <div>-->
<!-- <div class="bigSize">{{nowAddress.contact}} {{nowAddress.phone}}</div>-->
<!-- <div class="smallSize">{{nowAddress.addName}}</div>-->
<!-- </div>-->
<!-- <a @click="goEditAddress" class="text-primary">-->
<!-- <el-icon><Switch /></el-icon>切换-->
<!-- </a>-->
<!-- </div>-->
<!-- </el-form-item>-->
<el-form-item :label="language == 0 ?`发票类型`:'Invoice Type'" required prop="invoiceType">
<el-radio-group v-model="form.invoiceType">
<el-radio value="0">{{ language == 0 ? '企业' : 'Company' }}</el-radio>
......@@ -109,37 +109,38 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.invoiceType=='0'" :label="language == 0 ?`发票抬头`:'Invoice Title'" required prop="invoiceTitle">
<el-input v-model="form.invoiceTitle"/>
<el-input v-model="form.invoiceTitle" />
</el-form-item>
<el-form-item :label="language == 0 ?`税号`:'Duty Paragraph'" required v-if="form.invoiceType=='0'" prop="invoiceTfn">
<el-input v-model="form.invoiceTfn"/>
<el-form-item v-if="form.invoiceType=='0'" :label="language == 0 ?`税号`:'Duty Paragraph'" required prop="invoiceTfn">
<el-input v-model="form.invoiceTfn" />
</el-form-item>
<el-form-item :label="`邮箱`" v-if="form.invoiceForm=='1'" required>
<el-input v-if="orderType==6" v-model="form.invoiceEmail"/>
<el-input v-else v-model="form.address"/>
<el-form-item v-if="form.invoiceForm=='1'" :label="`邮箱`" required>
<el-input v-model="form.invoiceEmail" />
<!-- <el-input v-if="orderType==6" v-model="form.invoiceEmail"/>-->
<!-- <el-input v-else v-model="form.address"/>-->
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input type="textarea" v-model="form.remarks"/>
<el-input v-model="form.remarks" type="textarea" />
</el-form-item>
<div v-if="form.invoiceForm=='3'&&form.invoiceType=='0'">
<el-form-item :label="`地址`" required prop="invoiceAddress">
<el-input v-model="form.invoiceAddress"/>
<el-input v-model="form.invoiceAddress" />
</el-form-item>
<el-form-item :label="`电话`" required prop="invoicePhone">
<el-input v-model="form.invoicePhone"/>
<el-input v-model="form.invoicePhone" />
</el-form-item>
<el-form-item :label="`开户行`" required prop="invoiceBank">
<el-input v-model="form.invoiceBank"/>
<el-input v-model="form.invoiceBank" />
</el-form-item>
<el-form-item :label="`账户`" required prop="invoiceAccount">
<el-input v-model="form.invoiceAccount"/>
<el-input v-model="form.invoiceAccount" />
</el-form-item>
</div>
</el-form>
<div class="tip" v-if="remark">
<div v-if="remark" class="tip">
<label>{{ language == 0 ?'开票须知':'Invoice Notice' }}:</label>
<div v-html="remark"></div>
<div v-html="remark" />
</div>
</div>
</el-col>
......@@ -153,24 +154,24 @@
</el-col>
</el-row>
</el-card>
<div style="height: 60px;"></div>
<div style="height: 60px;" />
</div>
</div>
<address-list-dialog ref="dialogAddressListRef" @submit="getAddress"/>
<address-list-dialog ref="dialogAddressListRef" @submit="getAddress" />
<!-- 开票须知 -->
</template>
<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useStorage} from "@vueuse/core/index";
import AddressListDialog from "./component/addressList"
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import { useStorage } from '@vueuse/core/index'
import AddressListDialog from './component/addressList'
import dayjs from 'dayjs'
import {ElMessage,ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user";
import {getCurrentInstance} from "@vue/runtime-core";
import {submitTitckInvoice, invoice, TitckUpdateInvoice} from '@/viewsPc/seat/api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
import { getCurrentInstance } from '@vue/runtime-core'
import { submitTitckInvoice, invoice, TitckUpdateInvoice } from '@/viewsPc/seat/api/index'
import {
addressList,
editInvoice,
......@@ -178,12 +179,12 @@ import {
submitInvoice,
getInvoiceDetailBills,
getInvoiceDetail,
submitCptInvoice, getBaseInfoByActiveId, getLeagueInvoiceDetail, getLeagueInvoiceDetailPC,getInvoiceDetailMatch
} from "@/apiPc/booking";
import {getOrderDetail} from "@/viewsPc/seat/api/index";
submitCptInvoice, getBaseInfoByActiveId, getLeagueInvoiceDetail, getLeagueInvoiceDetailPC, getInvoiceDetailMatch
} from '@/apiPc/booking'
import { getOrderDetail } from '@/viewsPc/seat/api/index'
const {proxy} = getCurrentInstance()
const { proxy } = getCurrentInstance()
const user = useUserStore().user
const language = useStorage('language', 0)
......@@ -194,8 +195,8 @@ const form = ref({
invoiceType: '0'
})
const formDate = ref({})
const orderType=ref(1)
const paymentType=ref(1)
const orderType = ref(1)
const paymentType = ref(1)
const list = ref([])
const addrList = ref([])
const nowAddress = ref({})
......@@ -204,29 +205,29 @@ const kpType = ref('1')
const remark = ref('')
const rules = ref({
invoiceType: [
{required: true, message: language.value==0?'请选择发票类型':'Please select invoice type', trigger: 'change'}
{ required: true, message: language.value == 0 ? '请选择发票类型' : 'Please select invoice type', trigger: 'change' }
],
invoiceForm: [
{required: true, message: language.value==0?'请选择发票形式':'Please select invoice form', trigger: 'change'}
{ required: true, message: language.value == 0 ? '请选择发票形式' : 'Please select invoice form', trigger: 'change' }
],
invoiceTitle: [
{required: true, message: language.value==0?'请输入发票抬头':'Please enter invoice title', trigger: 'blur'}
{ required: true, message: language.value == 0 ? '请输入发票抬头' : 'Please enter invoice title', trigger: 'blur' }
],
invoiceTfn: [
{required: true, message: language.value==0?'请输入税号':'Please enter TFN', trigger: 'blur'}
{ required: true, message: language.value == 0 ? '请输入税号' : 'Please enter TFN', trigger: 'blur' }
],
invoiceAddress: [
{required: true, message: language.value==0?'请输入地址':'Please enter address', trigger: 'blur'}
{ required: true, message: language.value == 0 ? '请输入地址' : 'Please enter address', trigger: 'blur' }
],
invoicePhone: [
{required: true, message: language.value==0?'请输入电话':'Please enter phone', trigger: 'blur'}
{ required: true, message: language.value == 0 ? '请输入电话' : 'Please enter phone', trigger: 'blur' }
],
invoiceBank: [
{required: true, message: language.value==0?'请输入开户行':'Please enter bank', trigger: 'blur'}
{ required: true, message: language.value == 0 ? '请输入开户行' : 'Please enter bank', trigger: 'blur' }
],
invoiceAccount: [
{required: true, message: language.value==0?'请输入账户':'Please enter account', trigger: 'blur'}
],
{ required: true, message: language.value == 0 ? '请输入账户' : 'Please enter account', trigger: 'blur' }
]
})
const isEdit = ref(false)
let invoiceId
......@@ -234,24 +235,24 @@ let cptId
onMounted(() => {
orderType.value=route.query.orderType
paymentType.value=route.query.paymentType
if(route.query.orders){
let obj = JSON.parse(decodeURIComponent(route.query.orders)) || {}
if(obj.cptId){
orderType.value = route.query.orderType
paymentType.value = route.query.paymentType
if (route.query.orders) {
const obj = JSON.parse(decodeURIComponent(route.query.orders)) || {}
if (obj.cptId) {
cptId = obj.cptId
}else if(obj.activeId){
} else if (obj.activeId) {
cptId = obj.activeId
}else{
} else {
cptId = '1778253367748993026'
}
console.log(obj)
getRemark()
let arr = []
const arr = []
list.value.push(obj)
for (let bill of list.value) {
if(bill?.message){
for (const bill of list.value) {
if (bill?.message) {
bill.messageObj = JSON.parse(bill.message)
}
arr.push(bill.id)
......@@ -259,7 +260,7 @@ onMounted(() => {
form.value.orders = arr.toString()
console.log(list.value)
}
if(route.query.activeId){
if (route.query.activeId) {
cptId = route.query.activeId
}
if (route.query.totalMoney) {
......@@ -281,91 +282,90 @@ onMounted(() => {
getList()
}
if(user.userName.indexOf('@')>-1){
if (user.userName.indexOf('@') > -1) {
form.value.address = user.userName
}
route.query.orderSn&&getDataInfo()
route.query.orderSn && getDataInfo()
})
async function getDataInfo(){
const res =await getOrderDetail({orderSn:route.query.orderSn})
formDate.value=res.data
async function getDataInfo() {
const res = await getOrderDetail({ orderSn: route.query.orderSn })
formDate.value = res.data
}
function getList() {
if(route.query.type=='5'){
if (route.query.type == '5') {
getLeagueInvoiceDetailPC(invoiceId).then(res => {
// 订单
list.value = res.rows
console.log(list.value)
cptId = res.rows[0].activeId||res.rows[0].cptId
cptId = res.rows[0].activeId || res.rows[0].cptId
getRemark()
for (var bill of list.value) {
if (bill.messageObj)bill.messageObj = JSON.parse(bill.message)
}
});
})
} else {
getInvoiceDetailBills(invoiceId).then(res => {
// 订单
list.value = res.rows;
cptId = res.rows[0].activeId||res.rows[0].cptId
list.value = res.rows
cptId = res.rows[0].activeId || res.rows[0].cptId
getRemark()
for (var bill of list.value) {
bill.messageObj = JSON.parse(bill.message)
}
});
})
}
// 回显
if (orderType.value==6){
invoice(invoiceId).then(res=>{
if (orderType.value == 6) {
invoice(invoiceId).then(res => {
// console.log(res)
form.value = res.data;
form.value.invoiceForm='1'
form.value = res.data
form.value.invoiceForm = '1'
totalMoney.value = form.value.total
})
}else if(orderType.value==5){
} else if (orderType.value == 5) {
getInvoiceDetailMatch(invoiceId).then(res => {
form.value = res.data;
form.value = res.data
totalMoney.value = form.value.total
// if (form.value.invoiceForm == '1') {
// email.value = form.value.address
// }
// getAddrList()
});
}else{
})
} else {
getInvoiceDetail(invoiceId).then(res => {
form.value = res.data;
form.value = res.data
totalMoney.value = form.value.total
// if (form.value.invoiceForm == '1') {
// email.value = form.value.address
// }
// getAddrList()
});
})
}
}
function goEditAddress(id) {
var obj = {
title: language.value==0?'地址列表':'Address list',
title: language.value == 0 ? '地址列表' : 'Address list',
show: true,
id: id
}
proxy.$refs['dialogAddressListRef'].open(obj)
}
function getRemark() {
getBaseInfoByActiveId(cptId).then(res=>{
if(res.data){
getBaseInfoByActiveId(cptId).then(res => {
if (res.data) {
// remark.value = res.data.remarks
remark.value = res.data.remarks.replace(/\n/g, '<br>')
}
})
}
function getAddrList() {
addressList(user.userId).then(res=>{
addressList(user.userId).then(res => {
addrList.value = res.rows
if(addrList.value.length>0){
if (addrList.value.length > 0) {
nowAddress.value = addrList.value[0]
}
})
......@@ -375,16 +375,16 @@ function getAddress(obj) {
nowAddress.value = obj
}
function submit() {
if(orderType.value==6 && !form.value.invoiceEmail){
ElMessage.warning(language.value == 0 ?'请输入邮箱':'Please enter email')
if (orderType.value == 6 && !form.value.invoiceEmail) {
ElMessage.warning(language.value == 0 ? '请输入邮箱' : 'Please enter email')
return
}
if(orderType.value!=6 && !form.value.address){
ElMessage.warning(language.value == 0 ?'请输入邮箱':'Please enter email')
if (orderType.value != 6 && !form.value.address) {
ElMessage.warning(language.value == 0 ? '请输入邮箱' : 'Please enter email')
return
}
proxy.$refs['formRef'].validate((valid) => {
if(valid){
if (valid) {
// 提交确认
ElMessageBox.confirm(language.value == 0 ? '确认提交吗？' : 'Confirm to submit ?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
......@@ -394,8 +394,8 @@ function submit() {
form.value.activeId = cptId
form.value.total = totalMoney.value
form.value.version = 2
form.value.invoicePhone=paymentType.value
if (orderType.value==6) form.value.orders=route.query.orderSn
form.value.invoicePhone = paymentType.value
if (orderType.value == 6) form.value.orders = route.query.orderSn
if (isEdit.value) {
update()
} else {
......@@ -407,42 +407,39 @@ function submit() {
}
function update() {
if (orderType.value==6){
TitckUpdateInvoice(form.value).then(res=>{
//返回列表
if (orderType.value == 6) {
TitckUpdateInvoice(form.value).then(res => {
// 返回列表
backList()
})
}else if(orderType.value==5){
editInvoiceMatch(form.value).then(res=>{
//返回列表
} else if (orderType.value == 5) {
editInvoiceMatch(form.value).then(res => {
// 返回列表
backList()
})
}else{
editInvoice(form.value).then(res=>{
//返回列表
} else {
editInvoice(form.value).then(res => {
// 返回列表
backList()
})
}
}
function add() {
if(orderType.value==6){
submitTitckInvoice(form.value).then((res)=>{
if (orderType.value == 6) {
submitTitckInvoice(form.value).then((res) => {
backList()
})
}else if(list.value[0].orderType||list.value[0].orderType==0){
submitInvoice(form.value).then(res=>{
//返回列表
} else if (list.value[0].orderType || list.value[0].orderType == 0) {
submitInvoice(form.value).then(res => {
// 返回列表
backList()
})
} else {
submitCptInvoice(form.value).then(res=>{
//返回列表
submitCptInvoice(form.value).then(res => {
// 返回列表
backList()
})
}
}
function backList() {
router.push({
......
src/viewsPc/booking/hotelDetail.vue
<template>
<div>
<div class="box">
<el-card class="mt30" v-loading="loading">
<el-card v-loading="loading" class="mt30">
<el-row v-if="form" class="hotel" align="middle" :gutter="20">
<!-- <el-col :span="6">-->
<!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
......@@ -19,43 +19,45 @@
</div>
<div class="info">
<el-icon>
<Clock/>
<Clock />
</el-icon>
<span class="mr10">{{ language == 0 ? '入住时间' : 'Check-in' }}：{{ form?.checkInTime }}</span>
<span>{{ language == 0 ? '离店时间' : 'Check-out' }}：{{ form?.checkOutTime }}</span>
</div>
<div class="info esp">
<el-icon>
<MapLocation/>
<MapLocation />
</el-icon>
<span>{{ form?.addName }}</span>
</div>
<div v-if="form?.introduction" class="info pointer">
<div :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()"></div>
<div :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()" />
</div>
</el-col>
<el-col :span="8" class="text-right" v-if="language == 0">
<el-col v-if="language == 0" :span="8" class="text-right">
<div class="mapBox" @click="goMap">
<div id="map"></div>
<div id="map" />
</div>
</el-col>
</el-row>
<el-empty v-else :image="`/img/order_no.png`" :image-size="228" description=""/>
<el-empty v-else :image="`/img/order_no.png`" :image-size="228" description="" />
</el-card>
<div class="mt30">
<el-row :gutter="20">
<el-col :span="10">
<div class="imgbox hotelImg">
<el-image :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover"
:preview-src-list="form?.photos?.split(',')"/>
<el-image
:src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover"
:preview-src-list="form?.photos?.split(',')"
/>
</div>
</el-col>
<el-col :span="14">
<el-row class="h100" :gutter="20">
<el-col :span="8" class="oddmb" v-for="(p,index) in form?.photos?.split(',').slice(1,7)">
<el-col v-for="(p,index) in form?.photos?.split(',').slice(1,7)" :span="8" class="oddmb">
<div class="imgbox hotelImg">
<el-image :src="fillImgUrl(p)" fit="cover"/>
<el-image :src="fillImgUrl(p)" fit="cover" />
</div>
</el-col>
</el-row>
......@@ -70,7 +72,6 @@
{{ language == 0 ? '房型选择' : 'Available Rooms' }}
<span style="margin-left: 100px" @click="initTime">
<el-date-picker
@change="getDaysBetween"
v-model="hotTime"
type="daterange"
:disabled-date="disabledDateRZ"
......@@ -78,14 +79,17 @@
format="YYYY-MM-DD"
:clearable="false"
value-format="YYYY-MM-DD"
@change="getDaysBetween"
/>
</span>
</li>
</ul>
</div>
<div>
<div v-for="(r,index) in roomList" :key="index" class="room"
v-show="language==0?r.roomPrice>0:r.roomPriceEn>0">
<div
v-for="(r,index) in roomList" v-show="language==0?r.roomPrice>0:r.roomPriceEn>0" :key="index"
class="room"
>
<el-row :gutter="30" align="middle">
<el-col :span="4">
<div class="roomImg">
......@@ -96,18 +100,18 @@
<h3 class="name">{{ r.roomType }}</h3>
<el-row :gutter="10">
<el-col :span="8">{{ r.area }}m²</el-col>
<el-col :span="8" v-show="r.windowFlag==1"> {{ language == 0 ? '有窗' : 'With windows' }}</el-col>
<el-col :span="8" v-show="r.windowFlag==0"> {{ language == 0 ? '无窗' : 'Windowless' }}</el-col>
<el-col :span="8" v-show="r.bathroomFlag==1"> {{ language == 0 ? '热水洗浴' : 'Shower' }}</el-col>
<el-col v-show="r.windowFlag==1" :span="8"> {{ language == 0 ? '有窗' : 'With windows' }}</el-col>
<el-col v-show="r.windowFlag==0" :span="8"> {{ language == 0 ? '无窗' : 'Windowless' }}</el-col>
<el-col v-show="r.bathroomFlag==1" :span="8"> {{ language == 0 ? '热水洗浴' : 'Shower' }}</el-col>
<!-- <text v-show="r.bathroomFlag==0"> </text> -->
<el-col :span="8" v-show="r.addBedFlag==1"> {{ language == 0 ? '允许加床' : 'Extra bed' }}</el-col>
<el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">
<el-col v-show="r.addBedFlag==1" :span="8"> {{ language == 0 ? '允许加床' : 'Extra bed' }}</el-col>
<el-col v-if="r.breakfastNum&&r.breakfastNum > '0'" :span="8">
{{ r.breakfastNum }}{{ language == 0 ? '份早餐' : ' breakfasts' }}
</el-col>
<el-col :span="8" v-else>{{ language == 0 ? '无早餐' : 'No breakfast' }}</el-col>
<el-col v-else :span="8">{{ language == 0 ? '无早餐' : 'No breakfast' }}</el-col>
</el-row>
<div class="tagbox esp">
<span v-for="(t,index) in r.label?.split('，')" v-show="index<4">{{t}}</span>
<span v-for="(t,index) in r.label?.split('，')" v-show="index<4">{{ t }}</span>
<a v-show="r.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>
</div>
</el-col>
......@@ -117,24 +121,28 @@
}}<span>{{ language == 0 ? r.roomPrice : r.roomPriceEn }}</span></div>
</el-col>
<el-col :span="3">
<!-- :disabled="!r.useCount && !hotTime"-->
<el-button v-if="language==0" :class="{'forbid':!(!hotTime[0] || r.useCount>0)}"
@click="goOrder(r)" class="bg-lineg button">
<!-- :disabled="!r.useCount && !hotTime"-->
<el-button
v-if="language==0" :class="{'forbid':!(!hotTime[0] || r.useCount>0)}"
class="bg-lineg button" @click="goOrder(r)"
>
订
<div>{{ language == 0 ? '在线付' : 'Online' }}</div>
</el-button>
<el-button v-else style="color: #fff" :disabled="!r.useCount && !hotTime"
<el-button
v-else style="color: #fff" :disabled="!r.useCount && !hotTime"
:class="{'forbid':!(!hotTime[0] || r.useCount>0)}"
class="btn-lineG w100" round
type="primary" @click="goOrder(r)">
type="primary" @click="goOrder(r)"
>
Select
</el-button>
<div v-if="r.useCount>0">
<div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">
剩余 {{r.useCount}} 间
<div v-if="language == 0" class="text-center text-primary mt10 fontsize14 pointer">
剩余 {{ r.useCount }} 间
</div>
<div class="text-center text-primary mt10 fontsize14" v-else>
{{r.useCount}} Remaining rooms
<div v-else class="text-center text-primary mt10 fontsize14">
{{ r.useCount }} Remaining rooms
</div>
</div>
......@@ -142,7 +150,7 @@
</el-row>
</div>
<el-empty v-if="roomList.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>
<el-empty v-if="roomList.length == 0" :image="`/img/order_no.png`" :image-size="228" description="" />
</div>
</el-card>
</div>
......@@ -150,18 +158,18 @@
</template>
<script setup>
import {useRouter} from "vue-router";
import {ref, reactive, onMounted, getCurrentInstance} from "vue";
import {useRoute} from "vue-router";
import {dayjs} from 'element-plus'
import {getHotelById, getHotelRooms, checkRoomPayByUserId} from "@/apiPc/booking"
import {getBaseInfoByActiveId} from "@/apiPc/booking";
import { useRouter } from 'vue-router'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import { dayjs } from 'element-plus'
import { getHotelById, getHotelRooms, checkRoomPayByUserId } from '@/apiPc/booking'
import { getBaseInfoByActiveId } from '@/apiPc/booking'
const {proxy} = getCurrentInstance()
const { proxy } = getCurrentInstance()
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import {ElMessageBox} from "element-plus";
import { useStorage } from '@vueuse/core/index'
import useUserStore from '@/store/modules/user'
import { ElMessageBox } from 'element-plus'
const user = useUserStore().user
const useStore = useUserStore
......@@ -179,7 +187,7 @@ const roomList = ref([])
const map = ref(null)
const formTime = ref({})
let baseHotTime;
let baseHotTime
onMounted(() => {
console.log(route.params)
......@@ -194,7 +202,6 @@ onMounted(() => {
getData()
})
})
function initTime() {
......@@ -229,7 +236,7 @@ function getData() {
})
getRoomList()
}
function getRoomList(){
function getRoomList() {
query.value.hotelId = route.query.id
query.value.rzStart = hotTime.value ? hotTime.value[0] : null
query.value.rzEnd = hotTime.value ? hotTime.value[1] : null
......@@ -240,59 +247,59 @@ function getRoomList(){
}
function initMap() {
// const TMap = (window as any).TMap
var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
var map = new TMap.Map("map", {
center: center,//设置地图中心点坐标
zoom: 17, //设置地图缩放级别
});
var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
//创建InfoWindow实例，并进行初始化
var center = new TMap.LatLng(form.value.latitude, form.value.longitude)// 设置中心点坐标'
var map = new TMap.Map('map', {
center: center, // 设置地图中心点坐标
zoom: 17 // 设置地图缩放级别
})
var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude)// 创建一个坐标
// 创建InfoWindow实例，并进行初始化
var infowindow = new TMap.InfoWindow({
content: form.value.address, //信息窗口内容
position: infoWindowLocation,//显示信息窗口的坐标
content: form.value.address, // 信息窗口内容
position: infoWindowLocation, // 显示信息窗口的坐标
map: map,
offset: {x: 0, y: -32}
});
infowindow.close();
offset: { x: 0, y: -32 }
})
infowindow.close()
var marker = new TMap.MultiMarker({
map: map,
//样式定义
// 样式定义
styles: {
"myStyle": new TMap.MarkerStyle({
"anchor": {x: 16, y: 32}
'myStyle': new TMap.MarkerStyle({
'anchor': { x: 16, y: 32 }
})
},
//点标记数据数组
// 点标记数据数组
geometries: [{
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
'id': '1', // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
// "styleId": 'myStyle', //指定样式id
"position": new TMap.LatLng(form.value.latitude, form.value.longitude), //点标记坐标位置
"properties": {//自定义属性
"title": form.value.name
'position': new TMap.LatLng(form.value.latitude, form.value.longitude), // 点标记坐标位置
'properties': { // 自定义属性
'title': form.value.name
}
}
]
})
marker.on("click", function (evt) {
//设置infoWindow
infowindow.open(); //打开信息窗
infowindow.setPosition(evt.geometry.position);//设置信息窗位置
marker.on('click', function(evt) {
// 设置infoWindow
infowindow.open() // 打开信息窗
infowindow.setPosition(evt.geometry.position)// 设置信息窗位置
})
}
function goOrder(room) {
if(!hotTime.value[0]){
proxy.$modal.msgError(language.value == 0 ?'请先选择入住日期':'Please choose the date of check-in first')
if (!hotTime.value[0]) {
proxy.$modal.msgError(language.value == 0 ? '请先选择入住日期' : 'Please choose the date of check-in first')
return
}
if(room.useCount<=0){
ElMessageBox.confirm(language.value == 0 ? `您当前选择的日期是${hotTime.value[0]}至 ${hotTime.value[1]}，该时间段暂无可预订房间，请选择其他日期` :
`You currently select the check-in date of ${hotTime.value[0]} to ${hotTime.value[1]}, there is no room available for booking at this time period, please choose another date`, {type: 'warning'}).then({
if (room.useCount <= 0) {
ElMessageBox.confirm(language.value == 0 ? `您当前选择的日期是${hotTime.value[0]}至 ${hotTime.value[1]}，该时间段暂无可预订房间，请选择其他日期`
: `You currently select the check-in date of ${hotTime.value[0]} to ${hotTime.value[1]}, there is no room available for booking at this time period, please choose another date`, { type: 'warning' }).then({
})
return
}
ElMessageBox.confirm(language.value == 0 ? '你当前选择的入住时间为' + hotTime.value[0] + '至' + hotTime.value[1] + '，是否确定？' : 'Your current check-in time is' + hotTime.value[0] + '~' + hotTime.value[1] + 'Are you sure?', {type: 'warning'}).then({}).then(() => {
ElMessageBox.confirm(language.value == 0 ? '你当前选择的入住时间为' + hotTime.value[0] + '至' + hotTime.value[1] + '，是否确定？' : 'Your current check-in time is' + hotTime.value[0] + '~' + hotTime.value[1] + 'Are you sure?', { type: 'warning' }).then({}).then(() => {
checkRoomPayByUserId(room.hotelId).then(res => {
if (res.data == -100) {
ElMessageBox.confirm(
......@@ -301,12 +308,12 @@ function goOrder(room) {
{
confirmButtonText: language.value == 1 ? 'Go My Reservation ' : '前往我的预订',
// cancelButtonText: language.value==1?'Continue to book':'继续预订',
type: 'warning',
type: 'warning'
}
).then((res) => {
console.log(res)
router.push({
name: 'myReservation',
name: 'myReservation'
})
})
// .catch((res) => {
......@@ -318,8 +325,6 @@ function goOrder(room) {
goNext(room)
})
})
}
function goNext(room) {
......@@ -333,7 +338,7 @@ function goNext(room) {
hotelName: form.value.name,
checkInTime: form.value.checkInTime,
start: hotTime.value[0],
end: hotTime.value[1],
end: hotTime.value[1]
}
})
}
......@@ -352,7 +357,7 @@ function getDaysBetween() {
}
function disabledDateRZ(date) {
//判读今天大与form.value.hqStart
// 判读今天大与form.value.hqStart
if (formTime.value.hqStart) {
const today = dayjs().format('YYYY-MM-DD')
if (formTime.value.hqStart < today) {
......@@ -369,8 +374,8 @@ function goMap() {
// var tencentMapUrl = "https://map.qq.com/";
// window.location.href = tencentMapUrl;
var url = `https://map.qq.com/?type=gcj02&lat=${form.value.latitude}&lng=${form.value.longitude}`
var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + form.value.latitude + "," + form.value.longitude + "&referer=yellowpage";
window.open(url, "_blank")
var mapUrl_tx = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:' + form.value.latitude + ',' + form.value.longitude + '&referer=yellowpage'
window.open(url, '_blank')
}
</script>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!