Skip to content

B
bigwood
Commit 62641282 authored by youjie's avatar youjie
Browse files
Options

no message

parent 342292e0
Show whitespace changes
Inline Side-by-side
Showing with 1033 additions and 27 deletions
src/api/axiosJava.ts 0 → 100644
View file @ 62641282
import { Data } from './../../node_modules/_vite@2.9.15@vite/dist/node/index.d';
import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
import message from '../utils/message'
import { i18n } from '../boot/i18n'
import router from '../router'
// import { message } from 'ant-design-vue'
// import Store from '../store'
// import { Notify } from 'quasar'
import * as OpenCC from 'opencc-js'
import { ApiResult } from 'src/@types/enumHelper';
import { dispatchAction } from 'src/store/utils';
import { UserActionsType } from 'src/store/modules/user/actions';
import { currentRouter } from 'src/router'
let {locale,t} =i18n.global
let converterTW = OpenCC.Converter({ from: 'cn', to: 'tw' }) //转繁
let datas: AxiosResponse // 接收需要转繁数据
/**
* get status code
* @param {AxiosResponse} response Axios response object
*/
const getErrorCode2text = (response: AxiosResponse): string => {
/** http status code */
const code = response.status
/** notice text */
let message = 'Request Error'
switch (code) {
case 400:
message = 'Request Error'
break
case 401:
message = 'Unauthorized, please login'
break
case 403:
message = '拒绝访问'
break
case 404:
message = '访问资源不存在'
break
case 408:
message = '请求超时'
break
case 500:
message = '位置错误'
break
case 501:
message = '承载服务未实现'
break
case 502:
message = '网关错误'
break
case 503:
message = '服务暂不可用'
break
case 504:
message = '网关超时'
break
case 505:
message = '暂不支持的 HTTP 版本'
break
default:
message = '位置错误'
}
return message
}
/**
* @returns {AxiosResponse} result
* @tutorial see more:https://github.com/onlyling/some-demo/tree/master/typescript-width-axios
* @example
* service.get<{data: string; code: number}>('/test').then(({data}) => { console.log(data.code) })
*/
const service = Axios.create({
baseURL: process.env.JAVA_URL_API,
timeout: 20000,
headers: {
'Content-Type': 'application/json',
'Referer-Viitto': currentRouter.path
}
})
/**
* @description 请求发起前的拦截器
* @returns {AxiosRequestConfig} config
*/
service.interceptors.request.use(
async (config: AxiosRequestConfig) => {
// 如果是获取token接口：
// if (config.url === '/auth/oauth/token') {
// //TODO:用户登录的特殊处理，
// } else {
// // 如果保存有token，则取，否则不添加Authorization
// if (localStorage.vuex && JSON.parse(localStorage.vuex).user?.token) {
// //TODO:Access_TOKEN 的获取，需要根据实际业务情况进行调整
// const token = Store.state.user?.token
// const tokenType = token.token_type
// const accessToken = token.access_token
// config.headers.Authorization = `${tokenType} ${accessToken}`
// }
// //TODO:包装一层MSG，但是微服务应该去掉此步骤
// config.data = {
// Msg: config.data
// }
// }
return config
},
error => {
//TODO: 新增网络请求异常处理业务
return Promise.reject(error)
}
)
/**
* @description 响应收到后的拦截器
* @returns {}
*/
service.interceptors.response.use(
/** 请求有响应 */
async (response: AxiosResponse) => {
if (response.status === 200) {
if(response.data.resultCode == ApiResult.TOKEN_ILLEGAL || response.data.resultCode == ApiResult.TOKEN_INVALID){
//router.push('/auth/login')
dispatchAction<UserActionsType>('user', 'setUserSignout', null)
window.location.reload()
}
if(locale.value=='zhTW'){
let stringifyData = converterTW(JSON.stringify(response))
datas = JSON.parse(stringifyData)
}else{
datas = response
}
return Promise.resolve(datas)
} else {
const __text = getErrorCode2text(response)
return Promise.reject(new Error(__text))
}
},
/** 请求无响应 */
(error: AxiosError) => {
let __emsg: string = error.message || ''
if (error.message) {
__emsg = error.message
}
if (error.response) {
__emsg = error.response.data.message ? error.response.data.message : error.response.data.data
}
// timeout
if (__emsg.indexOf('timeout') >= 0) {
__emsg = t('timeout')
}
//TODO: 结合接口实际情况进行权限判断
// if (error?.response?.status === 401) {
// if (router.currentRoute.value.path !== '/auth/login') {
// // Notify.create({
// // message: '登录凭证已过期，请重新登录',
// // color: 'warning',
// // textColor: 'dark',
// // icon: 'announcement'
// // })
// message.errorMsg(t('loginout'));
// router.push('/auth/login')
// }
// return Promise.reject(new Error('401'))
// }
return Promise.reject(new Error(__emsg))
}
)
export default service
src/api/requestJava.ts 0 → 100644
View file @ 62641282
import service from "./axiosJava";
import Store from '../store'
import md5 from "md5-ts";
import { HttpResponse } from "@/@types";
import * as OpenCC from 'opencc-js'
import { i18n } from '../boot/i18n'
let {locale} =i18n.global
let converterSW = OpenCC.Converter({ from: 'tw', to: 'cn' }) //转简
let datas: any // 接收需要转简数据
let language = '' as any //语言
let currencyCode = '' as any //币种
const request = (cmd:string,msg:any): Promise<HttpResponse>=>{
datas = msg
if(locale.value=='zhTW'){
// let stringifyData = converterSW(JSON.stringify(msg))
// datas = JSON.parse(stringifyData)
language = 'zh_TW'
currencyCode = 'TWD'
}else if(locale.value=='zhSW'){
language = 'zh_CN'
currencyCode = 'CNY'
}else if(locale.value=='koHG'){
language = 'ko_KR'
currencyCode = 'KRW'
}else if(locale.value=='jaRB'){
// language = 'JP_Y'
currencyCode = 'JPY'
}
msg = datas??{}
let token = "";
let key = "";
let groupId = 0
let timestamp = (new Date()).valueOf();
if (localStorage.vuex && JSON.parse(localStorage.vuex).user?.token) {
token = Store.state.user?.token?.access_token
key = Store.state.user?.secretKey
}
if (localStorage.vuex && JSON.parse(localStorage.vuex).user?.userDetail) {
groupId = Store.state.user?.userDetail?.groupId
}
var encodeMsg = encodeURIComponent(JSON.stringify(msg)).toLowerCase();
var md5Str = md5(`cmd=${cmd}&msg=${encodeMsg}&timestamp=${timestamp}&token=${token}&key=${key}`);
var postData = {
"groupId": groupId,
"msg": msg,
// "cmd": cmd,
// "timestamp": timestamp,
"token": token,
"sign": md5Str,
// "locale": language,
// "currencyCode": currencyCode
}
return service.post(process.env.JAVA_URL_API+cmd, postData)
}
export default request;
\ No newline at end of file
src/api/scattered.ts
View file @ 62641282
......@@ -14,7 +14,11 @@ class HotelService {
static async getUserCanUseCouponList(param:any): Promise<HttpResponse> {
return requestJava('/api/b2b/user/getUserCanUseCouponList', param)
}
//获取相似数据
//散客订单列表
static async GetB2BJapanHotelOrderList(param:any): Promise<HttpResponse> {
return request('sellorder_post_GetB2BJapanHotelOrderList', param)
}
//散客下单
static async GetHotelHotelBooking(param:any): Promise<HttpResponse> {
return request('dmc_post_Get_GetJAPAN_HotelBooking', param)
}
......
src/components/hotel/order/list/OrderList.vue
View file @ 62641282
......@@ -52,7 +52,7 @@
<template v-slot:header-cell-Room="props">
<q-th :props="props">
<div class="row items-center">
<span class="q-mr-mds">{{ props.col.label }}</span>
<span class="q-mr-md">{{ props.col.label }}</span>
<q-tooltip>{{ $t('hotelorder.priceTips') }}</q-tooltip>
<svg-icon icon="Code/Question-circle.svg" :size="14"></svg-icon>
</div>
......
src/components/hotel/order/list/OrderListHeader.vue
View file @ 62641282
<template>
<div class="rounded-borders bg-white row items-center q-pa-md">
<q-select v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderStatus" dense :options="status" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
<q-select v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderStatus" @update:model-value="setOrderStatus" dense :options="status" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
<q-input v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')" />
<q-field v-if="$q.platform.is.desktop" clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout class="col-2" style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
......
src/components/scattered/list/ListTable.vue
View file @ 62641282
......@@ -11,14 +11,17 @@
</div>
</template>
<template v-slot:body-cell-hotelName="props">
<q-td class="cursor-pointer" :props="props" @click="goUrl('/scattered/hotelDetails',props.row)">
<q-td class="cursor-pointer" :props="props" @click="goUrl('/scattered/HotelDetails',props.row)">
<span>{{props.row.hotelName}}</span>
</q-td>
</template>
<template v-slot:body-cell-reviewRating="props">
<q-td :props="props">
<div class="row no-wrap items-center">
<q-rating v-model="props.row.reviewRating" size="1.5em" color="orange" :max="props.row.reviewRating" readonly />
<q-rating v-model="props.row.reviewRating" size="1.5em" color="orange" :max="props.row.reviewRating"
icon="star_border"
icon-selected="star"
icon-half="star_half" no-dimming readonly />
<span class="q-ml-xs" v-if="props.row.reviewRating>0">{{props.row.reviewRating}}</span>
</div>
</q-td>
......
src/components/scattered/order/OrderList.vue 0 → 100644
View file @ 62641282
<template>
<div>
<q-card class="light-shadow q-pa-md bg-white rounded-borders q-my-md" flat>
<q-table separator="cell" :pagination="{rowsPerPage:100}" dense :rows="orders" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
<template v-slot:body-cell-HotelName="props">
<q-td :props="props">
<div class="cursor-pointer" @click="Detail(props.row)">
<q-img :src="props.row.HotelPic" spinner-color="drk" spinner-size="20px" width="50px" height="50px" mode="cover" />
<span class="q-mx-md">{{ props.row.HotelName }}</span>
</div>
</q-td>
</template>
<template v-slot:body-cell-OrderStatus="props">
<q-td :props="props">
<span :class="[props.row.typeInfo.Color]">{{ props.row.OrderStatus }}</span>
</q-td>
</template>
<template v-slot:bottom>
<q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" :input="true" @update:model-value="changePageHandler" />
</template>
</q-table>
</q-card>
<q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
</div>
<q-dialog v-model="showOrderdDetail">
<OrderdDetail></OrderdDetail>
</q-dialog>
</template>
<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import HotelService from '../../../api/scattered'
import { ApiResult } from '../../../@types/enumHelper'
import message from '../../../utils/message'
import { RoomType, StandardStatus } from '../../../@types'
import { getHotelOrderStatus, getHotelRoomType, moneyFormat } from '../../../utils/tools'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../../global/svg-icon.vue'
import { copyToClipboard, useQuasar } from 'quasar'
import { currentRouter } from '../../../router'
// import { UploadFileInfo,NTag,NUpload } from 'naive-ui'
// import { slice } from 'lodash'
import OrderdDetail from './OrderdDetail.vue'
export default defineComponent({
components: { OrderdDetail },
setup(props) {
const search = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any
const { t } = useI18n()
const $q = useQuasar()
watch(search, (n, o) => {
if (data.loading) return
data.pages.pageIndex = 1
data.orders = []
methods.initOrders()
})
const data = reactive({
showOrderdDetail: false,
orders: [] as Array<any>,
status: [] as Array<StandardStatus>,
rooms: [] as Array<RoomType>,
pages: {
pageIndex: 1,
pageSize: 10,
pageCount: 0
},
loading: false,
cols: [
{ name: 'HotelName', label: t('v101.scatteredOrderList.table1'), align: 'left' },
{ name: 'OrderID', label: t('v101.scatteredOrderList.table2'), field: (row: any) => row.OrderID, align: 'left' },
{ name: 'Number', label: t('v101.scatteredOrderList.table3'), field: (row: any) => row.Number, align: 'left' },
{ name: 'TotalPrice', label: t('v101.scatteredOrderList.table4'), field: (row: any) => row.TotalPrice.toFixed(2), align: 'left' },
{ name: 'CustomerPayMoney', label: t('v101.scatteredOrderList.table5'), field: (row: any) => row.CustomerPayMoney.toFixed(2), align: 'left' },
{ name: 'OrderStatus', label: t('v101.scatteredOrderList.table6'), align: 'left' },
{ name: 'CreateDateStr', label: t('v101.scatteredOrderList.table7'), field: (row: any) => row.CreateDateStr, align: 'left' }
] as any,
})
const methods = {
Detail(row:{}){
data.showOrderdDetail = true
},
initOrders() {
let param = Object.assign(data.pages, search)
data.loading = true
HotelService.GetB2BJapanHotelOrderList(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
r.data.data.pageData.forEach((x: any) => {
x.typeInfo = data.status.find(y => y.StatusName == x.OrderStatus) ?? data.status[1]
})
data.orders = r.data.data.pageData
data.pages.pageCount = r.data.data.pageCount
} else {
message.errorMsg(r.data.message)
}
data.loading = false
})
.catch(e => {
message.errorMsg(e.message)
data.loading = false
})
},
changePageHandler(n: any) {
data.pages.pageIndex = n
methods.initOrders()
},
init() {
data.status = getHotelOrderStatus()
data.rooms = getHotelRoomType()
methods.initOrders()
}
}
methods.init()
return {
...toRefs(data),
...methods,
moneyFormat
}
}
})
</script>
<style>
.light-border table,
.light-border table td,
.light-border .q-table__middle,
.light-border.borders,
.light-border table th {
border-color: #eee !important;
}
.light-border .room-item {
height: 28px;
line-height: 28px;
border-bottom: 1px solid #eee;
}
.light-border .room-item:last-child {
border-bottom: none;
}
.light-border .max-hotelname {
width: 140px;
height: 28px;
line-height: 28px;
}
.orderListDialog-title{
position: relative;
}
.orderListDialog-title span{
font-size: 20px;
}
.orderListDialog-close{
position: absolute;
right: 0;
top: -10px;
font-size: 26px;
}
.orderListDialog-bg{
background: #5098FF;
border-radius: 10px;
}
.orderListDialog-img{
background: url('../../../assets/images/wallet.png')no-repeat right #5098FF;
background-size: 97px 100%;
}
</style>
src/components/scattered/order/OrderListHeader.vue 0 → 100644
View file @ 62641282
<template>
<div class="rounded-borders bg-white row items-center q-pa-md">
<q-select v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.B2BSelectOrderState" @update:model-value="setOrderStatus" dense :options="status" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
<q-input v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.HotelName" dense standout :label="$t('v101.scatteredOrderList.first')" />
<div class="col"></div>
<q-btn color="primary" unelevated :label="$t('query')" @click="setQueryHandler"/>
</div>
<div class="rounded-borders bg-white q-pa-sm q-mt-md mobile-only">
<q-tabs v-model="search.B2BSelectOrderState" class="text-cyan" dense>
<q-tab :name="x.StatusId" :label="x.StatusName" v-for="x in status" @click="setOrderStatus(x.StatusId)"/>
</q-tabs>
</div>
</template>
<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { computed, defineComponent, inject, reactive, ref, toRefs } from 'vue'
import { OrderType, RoomType, StandardStatus } from '../../../@types'
import { getScatteredHotelOrderStatus, getHotelOrderType, getHotelRoomType } from '../../../utils/tools'
import { date,useQuasar } from 'quasar'
import svgIcon from '../../../global/svg-icon.vue'
export default defineComponent({
components: { },
setup(props) {
const qDateProxy = ref(null) as any
const $q = useQuasar()
const data = reactive({
status: [] as Array<StandardStatus>,
cancelStatus: {} as StandardStatus | undefined,
dateRangeFormat: '',
dateRange: {} as any,
rooms: [] as Array<RoomType>,
orderTypes: [] as Array<OrderType>,
canHide: false
})
const realSearch = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any
const search = reactive(JSON.parse(JSON.stringify(realSearch)))
const methods = {
initStatus() {
let allStatus = getScatteredHotelOrderStatus()
data.status = allStatus.filter((x: StandardStatus) => {
return x.StatusId != 4
})
data.cancelStatus = allStatus.find((x: StandardStatus) => {
return x.StatusId == 4
})
data.rooms = getHotelRoomType(true)
data.orderTypes = getHotelOrderType(true)
},
optionsFn(cd: any) {
return cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
},
dateRangeHandler(e: any) {
search.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`
search.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `
data.dateRangeFormat = `${search.StartTime} - ${search.EndTime} `
if (qDateProxy.value) qDateProxy.value.hide()
},
setQueryHandler(){
realSearch.B2BSelectOrderState=search.B2BSelectOrderState
realSearch.CustomerId=search.CustomerId
realSearch.HotelName=search.HotelName
},
setOrderStatus(statusId:number){
realSearch.B2BSelectOrderState=statusId
}
}
const searchCnt = computed(() => {
let setCnt = 0
return setCnt
})
methods.initStatus()
return {
...toRefs(data),
...methods,
search,
searchCnt
}
}
})
</script>
<style></style>
src/components/scattered/order/OrderdDetail.vue 0 → 100644
View file @ 62641282
<template>
<div class="q-pa-lg commonSure bg-white">
<div style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;" :style="{'width':$q.platform.is.desktop?'50vw':'100vw','min-width':$q.platform.is.desktop?'866px':'100vw',}">
<div class="q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
<div :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
<div class="mobile-only row items-center">
<!-- <div class="text-weight-bold fz20 ellipsis" style="width: 280px">{{ h.Name }}{{ h.Name }}{{ h.Name }}</div> -->
<q-icon class="text-grey-13 cursor-pointer text-right q-ml-sm" name="close" size="md" v-close-popup></q-icon>
</div>
<!-- <div class="text-weight-bold fz20 ellipsis desktop-only">{{ h.Name }}</div> -->
<!-- <div :class="{'q-ml-md':$q.platform.is.desktop}">
<q-rating v-model="h.Star" size="1.5em" color="orange" :max="h.Star" readonly />
</div> -->
</div>
<q-icon class="text-grey-13 cursor-pointer desktop-only" name="close" size="md" v-close-popup></q-icon>
</div>
<div class="col row bg-white rounded-border q-mb-md q-pa-lg">
<div class="col-5 row">
<q-img v-if="params.imgUrl" class="col-5 q-mr-lg" :src="params.imgUrl" style="height: auto;display: inline-block;" spinner-color="drk" spinner-size="20px" mode="cover"/>
<div class="col column q-pl-lg">
<div class="text-red fz18 text-weight-bold">{{dataList.hotelName}}</div>
<div class="q-pt-xs">
<q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
<span class="col fz14 text-weight-bold text-blick">{{dataList.address}}</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.fangxing')}}</span>
<span class="text-grey-9 q-pr-lg">
{{roomRateDetails?getGradeType(roomRateDetails.gradeType):''}}{{roomRateDetails?getRoomType(roomRateDetails.roomType):''}}
</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.xiyan')}}</span>
<span class="text-grey-9">
<template v-if="roomRateDetails.smoking==0">{{$t('v101.scatteredOrder.xiyan0')}}</template>
<template v-if="roomRateDetails.smoking==1">{{$t('v101.scatteredOrder.xiyan1')}}</template>
</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.cesuo')}}</span>
<span class="text-grey-9">
<template v-if="roomRateDetails.withBath==0">{{$t('v101.scatteredOrder.wu')}}</template>
<template v-if="roomRateDetails.withBath==1">{{$t('v101.scatteredOrder.you')}}</template>
</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.lutiankefang')}}</span>
<span class="text-grey-9">
<template v-if="roomRateDetails.withOpenAirBath==0">{{$t('v101.scatteredOrder.wu')}}</template>
<template v-if="roomRateDetails.withOpenAirBath==1">{{$t('v101.scatteredOrder.you')}}</template>
</span>
</div>
</div>
</div>
</div>
<div class="col column bg-white rounded-border q-mb-md">
<div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center text-weight-bold">
{{$t('v101.scatteredOrder.yudinxinx')}}
</div>
<div class="q-pa-lg column">
<div class="row items-center q-mb-md">
<span class="text-grey-6">{{$t('v101.scatteredOrder.fangxingxinxi')}}</span>
<div class="q-pl-lg">
<span class="q-pr-lg">
{{roomRateDetails?getGradeType(roomRateDetails.gradeType):''}}{{roomRateDetails?getRoomType(roomRateDetails.roomType):''}}
</span>
</div>
</div>
<div class="row items-center q-mb-md">
<span class="text-grey-6">{{$t('v101.scatteredOrder.ruzhurenshu')}}</span>
<div class="q-pl-lg">
<span>{{$t('v101.scatteredOrder.chengren')}} {{auditNum}} {{$t('v101.scatteredOrder.ren')}}</span>
<span class="q-pl-lg" v-if="childNum>0">{{$t('v101.scatteredOrder.ertong')}} {{childNum}} {{$t('v101.scatteredOrder.ren')}}</span>
<span class="q-pl-lg" v-if="isBaoChild">{{$t('v101.scatteredOrder.noertong')}}</span>
</div>
</div>
<div class="row items-center q-mb-md">
<span class="text-grey-6">{{$t('v101.scatteredOrder.ruzhuriqi')}}</span>
</div>
<div class="row items-center q-mb-md">
<span class="text-grey-6">{{$t('v101.scatteredOrder.fangjianshuliang')}}</span>
<div class="q-pl-lg row items-center">
<span v-if="dataList.roomGroup">{{dataList.roomGroup.length}}</span>
<div class="relative-position q-ml-md">
<q-icon class="absolute text-orange-6" style="left: 0;top: 1px;width: inherit;" name="information" size="18px"></q-icon>
<span class="q-pl-lg">
{{$t('v101.scatteredOrder.jinsheng')}}
<span class="text-orange">{{dataList.currentAllotment}}</span>
{{$t('v101.scatteredOrder.jian')}}
</span>
</div>
</div>
</div>
<div class="row no-wrap">
<span class="text-grey-6 row">{{$t('v101.scatteredOrder.fangfeiqingkuang')}}</span>
<div class="col q-pl-lg row wrap">
<template v-for="(item,index) in dataList.roomGroup">
<q-card flatv class="row items-end q-px-md q-pb-sm q-mr-md q-mb-md" v-for="subItem in item.rateGroup">
<div class="text-grey-9">{{subItem.stayDate}}</div>
<div class="q-ml-lg row items-end">
<span>円</span>
<span class="text-red text-weight-bold fz18 q-px-xs">
<span class="relative-position" style="top:3px">{{subItem.perAdultRateBySetCurrency?subItem.perAdultRateBySetCurrency:subItem.totalPerRoomRateBySetCurrency}}</span>
</span>
<span class="text-grey-6">/{{subItem.totalPerRoomRateBySetCurrency?$t('v101.scatteredOrder.wan'):$t('v101.scatteredOrder.ren')}}</span>
</div>
</q-card>
</template>
</div>
</div>
</div>
</div>
<div class="col column bg-white rounded-border q-mb-md">
<div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between">
<span class="text-weight-bold">{{$t('v101.scatteredOrder.ruzhuxinxi')}}</span>
</div>
<div class="q-px-lg q-py-lg">
<q-form
dense
class="row wrap"
>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"> {{$t('v101.scatteredOrder.ruzhushijian1')}}</span>
</div>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"> {{$t('v101.scatteredOrder.yudinren')}}</span>
</div>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"> {{$t('v101.scatteredOrder.dangqiandizhi')}}</span>
</div>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"> {{$t('v101.scatteredOrder.Email')}}</span>
</div>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"> {{$t('v101.scatteredOrder.dianhua')}}</span>
</div>
<div class="col-12 row">
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"><span class="text-red"></span> {{$t('v101.scatteredOrder.kehuxuqiu')}}</span>
</div>
</div>
</q-form>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRef, toRefs, provide, onMounted, inject, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../../config/dictionary'
import { date } from 'quasar'
import message from '../../../utils/message'
import { moneyFormat, dateDiffer } from '../../../utils/tools'
import HotelService from '../../../api/scattered'
import { currentRouter } from 'src/router'
import { HotelRate,HotelArea, useHotel } from '../../../utils/hotelRate'
import { isPhone, validatAlphabetsName } from '../../../utils/validate'
import { ApiResult } from 'src/@types/enumHelper'
export default defineComponent({
components: { },
props: {
HotelRow: {
type: Object,
require: false
},
hotelInfor: {
type: Object,
require: false
}
},
emits:['close'],
setup(props, context) {
const { t } = useI18n()
const qDateProxy = ref(null) as any
const qDateProxy2 = ref(null) as any
const qDateProxy3 = ref(null) as any
const guestLastName = ref(null) as any
const guestFirstName = ref(null) as any
const guestAddress = ref(null) as any
const guestEmail = ref(null) as any
const guestPhoneNumber = ref(null) as any
const data = reactive({
params:{
// hotelId:'',
sort:1,
displayFrom:1,
arrivalDate:'',
departureDate:'',
searchroomGroup:[],
roomOptionCd: '',
imgUrl: ''
},
getParamsMsg:{} as any,
urlParamsMsg:{} as any,
loading: false,
roomRateDetails: {} as any,
dataList: {} as any,
//确认MSG参数
sureMsg:{
dataId:'',
hotelId:'',
totalRoomCount:'',
arrivalDate:'',
checkInTime:'',
departureDate:'',
roomOptionCd:'',
totalChargeableRateInfo:'',
totalPriceJapanese:'',
roomGroup:[] as Array<any>,
guestLastName:'',
guestFirstName:'',
guestAddress:'',
guestPhoneNumber:'',
guestEmail:'',
//备注
guestRequest:'',
CustomerId:0,
HotelName:'',
HotelPic:'',
EmployeeIdStr:'',
OldTotalPrice:0,
CustomerPayMoney:0,
DiscountMoney:0,
OrderSource:2,
OrderForm:1,
},
ischeckInTimeSure: false,
auditNum:0,
childNum:0,
TotalChildCount:0,//孩子能否报入
chekedChildCount:0,//选了的儿童数
isBaoChild: false,
SettlementPrice : 0,
price: 0,
pickerBeginDateBefore:'',//入住时间前可选范围
pickerBeginDateAfter:'',//入住时间后可选范围
RoomTypeList: [] as Array<HotelArea>,//房间等级
scatteredRoomTypeList: [] as Array<HotelArea>,//散客房间类型
WeekList: [] as Array<HotelArea>,//周一至周日
checkInWeek: '',//周一至周日
checkOutWeek: '',
})
data.getParamsMsg = JSON.parse(localStorage.getItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER))
// watch(
// () => data.urlParamsMsg.hotelId,
// (o, n) => {
//
// }
// )
const methods = {
//获取房间等级
getRoomType(type) {
let gradeType = "";
switch (parseInt(type)) {
case 1:
gradeType = data.scatteredRoomTypeList[0].name;
break;
case 2:
gradeType = data.scatteredRoomTypeList[1].name;
break;
case 3:
gradeType = data.scatteredRoomTypeList[2].name;
break;
case 4:
gradeType = data.scatteredRoomTypeList[3].name;
break;
case 5:
gradeType = data.scatteredRoomTypeList[4].name;
break;
case 6:
gradeType = data.scatteredRoomTypeList[5].name;
break;
case 7:
gradeType = data.scatteredRoomTypeList[6].name;
break;
case 8:
gradeType = data.scatteredRoomTypeList[7].name;
break;
case 9:
gradeType = data.scatteredRoomTypeList[8].name;
break;
}
return gradeType;
},
//获取房型
getGradeType(type) {
let gradeType = "";
switch (parseInt(type)) {
case 1:
gradeType = data.RoomTypeList[0].name;
break;
case 2:
gradeType = data.RoomTypeList[1].name;
break;
case 3:
gradeType = data.RoomTypeList[2].name;
break;
case 4:
gradeType = data.RoomTypeList[3].name;
break;
case 5:
gradeType = data.RoomTypeList[4].name;
break;
case 6:
gradeType = data.RoomTypeList[5].name;
break;
}
return gradeType;
},
initHotel() {
data.loading = true
let param = Object.assign(data.params,data.urlParamsMsg)
HotelService.GetHotelRoomsList(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.dataList = r.data.data;
}
data.loading = false
}).catch(e => {
data.loading = false
message.errorMsg(e.message)
})
},
}
onMounted(()=>{
// methods.initHotel()
})
return { ...toRefs(data), ...methods,qDateProxy,qDateProxy2,qDateProxy3,guestLastName,guestFirstName,guestAddress,guestEmail,guestPhoneNumber }
}
})
</script>
<style>
.HotelSure-text{
width: 120px;
}
.ischeckInTimeSure .q-field__control{
border: 1px solid red;
}
.commonSure .yhqUl{
padding:0 20px;
margin:20px 0;
}
.commonSure .icon-xuanzhong2{
color: #31AA21;
}
.commonSure .sawtooth:hover {
cursor: pointer;
}
.commonSure .yhqUl .blue{
background-color: #8794E2;
}
.commonSure .yhqUl .blue:hover{
background-color: #6776D2;
}
.commonSure .yhqUl .blue ._time{
color: #4C58A4 !important;
}
.commonSure .yhqUl ._active{
background-color: #D9A24D;
}
.commonSure .yhqUl .blue._active{
background-color: #6776D2;
}
.commonSure ._trip_xiangqing_tips{
color: red !important;
font-size: 14px !important;
}
.commonSure ._trip_xiangqing_tips span{
color: #3965B0;
cursor: pointer;
}
.commonSure .yhqImg{
position: absolute;
right: 80px;
top: 10px;
width: 50px;
height: 50px;
}
.commonSure .yhqImg img{
width: 100%;
height: 100%;
display: block;
}
.commonSure .yhqUl .disab{
background-color: #7d7d7d !important;
}
</style>
\ No newline at end of file
src/i18n/zh-TW/index.ts
View file @ 62641282
......@@ -333,7 +333,7 @@ export default {
scattered: {
first: '散客預定',
second: '酒店檢索',
three: '散客訂單'
three: '酒店訂單'
},
car: {
first: '車輛預定',
......@@ -730,6 +730,9 @@ export default {
yudinren: '預定人',
xin: '姓',
ming: '名',
yingwen: '英文',
qingshuru: '請輸入',
zhengque: '正確的',
dangqiandizhi: '當前地址',
Email: 'Email',
dianhua: '電話',
......@@ -759,9 +762,23 @@ export default {
man: '滿',
shiyong: '使用',
youxiaoqi: '有效期',
notiaojian: '该优惠券不满足使用条件！'
notiaojian: '該優惠券不滿足使用條件！'
},
scatteredOrderList:{
state1: '待付款',
state2: '交易成功',
state3: '已取消',
first: '酒店名稱',
table1: '酒店名稱',
table2: '訂單編號',
table3: '房間數',
table4: '總金額',
table5: '實付',
table6: '訂單狀態',
table7: '下單日期',
}
}
//#endregion
}
src/pages/scattered/HotelOrder.vue 0 → 100644
View file @ 62641282
<template>
<div class="fix-height-subpage column no-wrap q-pa-md">
<order-list-header></order-list-header>
<div class="col q-mt-md">
<order-list></order-list>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, inject, provide, reactive, toRefs, onMounted } from 'vue';
import { currentRouter } from 'src/router'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../config/dictionary';
import OrderListHeader from '../../components/scattered/order/OrderListHeader.vue';
import OrderList from '../../components/scattered/order/OrderList.vue';
export default defineComponent({
components: { OrderListHeader, OrderList },
setup(props) {
let { setTitle } = useMetaModule()
const { t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('hotelorder.pageTitle')
setTitle(pageTitle.value)
const search=reactive({
B2BSelectOrderState:0,
CustomerId: "",
HotelName:''
})
// search.OrderId = currentRouter.currentRoute.value.params.orderId
provide(DirtionmaryHelper.HOTEL_ORDER_SEARCH,search)
const menu=inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value=15
const data = reactive({})
const methods = {}
onMounted(()=>{
})
return {...toRefs(data),...methods,search}
}
})
</script>
<style>
</style>
src/pages/scattered/HotelSure.vue
View file @ 62641282
<template>
<div class="q-pa-lg commonSure">
<div style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;" :style="{'width':$q.platform.is.desktop?'70vw':'100vw'}">
<div style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;" :style="{'width':$q.platform.is.desktop?'70vw':'100vw','min-width':$q.platform.is.desktop?'866px':'100vw',}">
<div class="bg-white rounded-border q-mb-md q-px-lg q-py-md">
<div class="row items-center text-orange-6">
<q-btn class="bg-orange-6 text-white" round size="sm" icon="person" />
......@@ -94,7 +94,7 @@
</div>
<div class="row items-center q-mb-md">
<span class="text-grey-6">{{$t('v101.scatteredOrder.ruzhuriqi')}}</span>
<div class="q-pl-lg row">
<div class="col q-pl-lg row no-wrap">
<div class="row items-center">
<q-field v-if="$q.platform.is.desktop" stack-label :label="$t('v101.scatteredOrder.ruzhushijian')" standout class="col-2" style="min-width: 200px" dense>
<div class="self-center full-width no-outline" tabindex="0">
......@@ -142,7 +142,7 @@
</div>
</div>
</div>
<div class="row no-wrap items-center">
<div class="row no-wrap">
<span class="text-grey-6 row">{{$t('v101.scatteredOrder.fangfeiqingkuang')}}</span>
<div class="col q-pl-lg row wrap">
<template v-for="(item,index) in dataList.roomGroup">
......@@ -194,7 +194,7 @@
size="xs"
filled
v-model="sureMsg.guestLastName"
:label="$t('v101.scatteredOrder.xin')"
:label="$t('v101.scatteredOrder.xin')+'('+$t('v101.scatteredOrder.yingwen')+')'"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || ' ']"
......@@ -208,7 +208,7 @@
size="xs"
filled
v-model="sureMsg.guestFirstName"
:label="$t('v101.scatteredOrder.ming')"
:label="$t('v101.scatteredOrder.ming')+'('+$t('v101.scatteredOrder.yingwen')+')'"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || ' ']"
......@@ -409,7 +409,7 @@
import HotelService from '../../api/scattered'
import { currentRouter } from 'src/router'
import { HotelRate,HotelArea, useHotel } from '../../utils/hotelRate'
import { isPhone } from '../../utils/validate'
import { isPhone, validatAlphabetsName } from '../../utils/validate'
import { ApiResult } from 'src/@types/enumHelper'
export default defineComponent({
components: { svgIcon },
......@@ -479,11 +479,11 @@
totalChargeableRateInfo:'',
totalPriceJapanese:'',
roomGroup:[] as Array<any>,
guestLastName:'优',
guestFirstName:'杰',
guestAddress:'東京豐洲日航都市酒店江東區豐洲6-4-20',
guestPhoneNumber:'18224442217',
guestEmail:'22310721242@qq.com',
guestLastName:'',
guestFirstName:'',
guestAddress:'',
guestPhoneNumber:'',
guestEmail:'',
//备注
guestRequest:'',
CustomerId:0,
......@@ -561,7 +561,11 @@
flag = !guestLastName.value.hasError && !guestFirstName.value.hasError && !guestAddress.value.hasError && !guestEmail.value.hasError && !guestPhoneNumber.value.hasError
if(!data.sureMsg.checkInTime) return data.ischeckInTimeSure = true
if(isPhone(data.sureMsg.guestPhoneNumber)==false) return
if(validatAlphabetsName(data.sureMsg.guestLastName)==false) return message.errorMsg(t('v101.scatteredOrder.xin')+t('v101.scatteredOrder.qingshuru')+t('v101.scatteredOrder.yingwen'))
if(validatAlphabetsName(data.sureMsg.guestFirstName)==false) return message.errorMsg(t('v101.scatteredOrder.ming'+t('v101.scatteredOrder.qingshuru')+t('v101.scatteredOrder.yingwen')))
if(isPhone(data.sureMsg.guestPhoneNumber)==false) return message.errorMsg(t('v101.scatteredOrder.qingshuru')+t('v101.scatteredOrder.zhengque')+t('v101.scatteredOrder.dianhua'))
if(!flag) return
data.sureMsg.hotelId = data.urlParamsMsg.hotelId;
......@@ -595,8 +599,6 @@
if(data.sureMsg.CustomerId==null||data.sureMsg.CustomerId==""){
data.sureMsg.CustomerId=0
}
console.log(data.sureMsg,'====')
// return
data.submLoading = true
let param = Object.assign(data.sureMsg)
HotelService.GetHotelHotelBooking(param)
......@@ -620,10 +622,6 @@
totalPnumber:num
}
localStorage.setItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER_MSG,JSON.stringify(msg))
// sessionStorage.setItem("HotelPayMsg", JSON.stringify(msg));
currentRouter.push({
path:"/HotelPayBefore",
})
} else {
message.errorMsg(r.data.message)
}
......
src/pages/scattered/hotelDetails.vue
View file @ 62641282
......@@ -16,7 +16,7 @@
<span class="text-grey-8 q-pl-xs">/{{$t('v101.scattered.qi')}}</span>
</div>
<div :class="{'q-ml-md':$q.platform.is.desktop}">
<q-rating v-model="h.roomReviewRating" size="1.5em" color="orange" :max="h.roomReviewRating" readonly />
<q-rating v-model="hotelSummary.reviewRating" size="1.5em" color="orange" :max="hotelSummary.reviewRating" readonly />
</div>
</div>
</div>
......
src/router/routes.ts
View file @ 62641282
......@@ -12,8 +12,9 @@ const routes: RouteRecordRaw[] = [
{ path: '/hotel/offer/:orderId', component: () => import('pages/hotel/ListOfQuotation.vue') },
{ path: '/personal', component: () => import('pages/personal/personal.vue')},
{ path: '/scattered', component: () => import('pages/scattered/HotelList.vue')},
{ path: '/scattered/hotelDetails/:hotelId/:groupBookingFlg/:lowrateBySetCurrency', component: () => import('pages/scattered/hotelDetails.vue')},
{ path: '/scattered/HotelDetails/:hotelId/:groupBookingFlg/:lowrateBySetCurrency', component: () => import('pages/scattered/hotelDetails.vue')},
{ path: '/scattered/HotelSure/:hotelId/:roomOptionCd', component: () => import('pages/scattered/HotelSure.vue')},
{ path: '/scattered/HotelOrder', component: () => import('pages/scattered/HotelOrder.vue')},
{ path: '/comingsoon', component: () => import('pages/ComingSoon.vue')}
]
},
......
src/utils/menus.ts
View file @ 62641282
......@@ -44,6 +44,12 @@ const useMenus={
url:'/scattered',
id:14,
parentId:13,
},
{
name:t('menu.scattered.three'),
url:'/scattered/HotelOrder',
id:15,
parentId:13,
}
]
})
......
src/utils/tools.ts
View file @ 62641282
......@@ -78,6 +78,24 @@ export function getHotelOrderStatus():Array<StandardStatus>{
return status
}
export function getScatteredHotelOrderStatus():Array<StandardStatus>{
let status=[] as Array<StandardStatus>
let text = [t('hotelorder.orderStatus.normal'),t('v101.scatteredOrderList.state1'),t('v101.scatteredOrderList.state2'),t('v101.scatteredOrderList.state3')]
let color = ['','positive','dark','orange','negative']
let icons = ['','update','done','offline_bolt','cached']
text.forEach((x,i:number)=>{
status.push({
StatusId:i,
StatusName:x,
Icon:icons[i],
Color:`text-${color[i]}`
})
})
return status
}
export function groupBy(array: any[], f: any){
const groups: {
[key: string]: any[];
......
src/utils/validate.ts
View file @ 62641282
......@@ -27,6 +27,12 @@ export function validatAlphabets(str: string) {
return reg.test(str)
}
/* 英文名*/
export function validatAlphabetsName(str: string) {
const reg = /[a-zA-z]$/
return reg.test(str)
}
export function isEmail(account:string):boolean {
let serchfind:boolean;
let regexp = new RegExp(/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment