Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
427bbc09 by zhangmeng
Options

票务

1 parent b40d8e59
Inline Side-by-side
Showing 1 changed file with 189 additions and 96 deletions
src/viewsPc/center/myReservation.vue
......@@ -2,74 +2,85 @@
<div>
<el-card :body-style="{'padding':'0'}">
<div class="indexTitle">
<h3 class="leftboderTT">{{ language==0?'我的预订':'My reservation' }}
<h3 class="leftboderTT">{{ language == 0 ? '我的预订' : 'My reservation' }}
</h3>
<!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'发票开具':'Invoice' }}</el-button>-->
<!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'我的发票':'My Invoice' }}</el-button>-->
<!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'发票开具':'Invoice' }}</el-button>-->
<!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'我的发票':'My Invoice' }}</el-button>-->
</div>
<el-empty :image="`/img/order_no.png`" :image-size="228" v-if="list?.length == 0"/>
<el-empty v-if="list?.length == 0" :image="`/img/order_no.png`" :image-size="228"/>
<div class="pd20">
<div v-for="b in list" class="item">
<div class="title">
<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>
<label class="orangeTag" v-if="b.orderType == 4"> {{ language==0?'拍摄':'Shooting ' }} </label>
<span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span>
<label v-if="b.orderType == 0" class="blueTag"> {{ language == 0 ? '酒店' : 'HOTEL' }} </label>
<label v-if="b.orderType == 1" class="purpleTag"> {{ language == 0 ? '车辆' : 'TRANSPORTATION' }} </label>
<label v-if="b.orderType == 2" class="orangeTag"> {{ language == 0 ? '餐饮' : 'DINING' }} </label>
<label v-if="b.orderType == 3" class="orangeTag"> {{ language == 0 ? '化妆' : 'MakeUp' }} </label>
<label v-if="b.orderType == 4" class="orangeTag"> {{ language == 0 ? '拍摄' : 'Shooting ' }} </label>
<span>{{ language == 0 ? '订单编号：' : 'No.' }} {{ b.id }}</span>
</div>
<div class="status-po">
<span class="bg-warning" v-if="b.status == '0'&&b.surplus!='0,0'&&b.surplus!='0'">
{{ language == 0 ?'待支付':'Unpaid' }}
<span v-if="b.status == '0'&&b.surplus!='0,0'&&b.surplus!='0'" class="bg-warning">
{{ language == 0 ? '待支付' : 'Unpaid' }}
</span>
<span class="bg-warning" v-if="b.status == '0'&&(b.surplus=='0,0'||b.surplus=='0')">{{ language == 0 ? '已取消' : 'Canceled' }}</span>
<span class="bg-blue" v-if="b.status == '1'">{{ language == 0 ?'支付成功':'successful' }}</span>
<span class="bg-warning" v-if="b.status == '2'">{{ language == 0 ? '已取消' : 'Canceled' }}</span>
<span class="bg-danger" v-if="b.status == '3'||b.status == '4'">{{ language == 0 ? '已退订' : 'Refunded' }}</span>
<span class="bg-danger" v-if="b.status == '7'">{{ language == 0 ? '退款审核中' : 'Refund in review' }}</span>
<span v-if="b.status == '0'&&(b.surplus=='0,0'||b.surplus=='0')" class="bg-warning">{{
language == 0 ? '已取消' : 'Canceled'
}}</span>
<span v-if="b.status == '1'" class="bg-blue">{{ language == 0 ? '支付成功' : 'successful' }}</span>
<span v-if="b.status == '2'" class="bg-warning">{{ language == 0 ? '已取消' : 'Canceled' }}</span>
<span v-if="b.status == '3'||b.status == '4'" class="bg-danger">{{
language == 0 ? '已退订' : 'Refunded'
}}</span>
<span v-if="b.status == '7'" class="bg-danger">{{
language == 0 ? '退款审核中' : 'Refund in review'
}}</span>
</div>
<el-row class="pd20 mt10" justify="space-between" align="middle">
<el-row align="middle" class="pd20 mt10" justify="space-between">
<el-col :lg="9" :md="12" :sm="12" :xs="24">
<div v-if="b.orderType == 0">
<h3 class="name">{{b.name}}</h3>
<p v-if="language==0">{{b.messageObj?.roomStayDate}}</p>
<p v-else>{{b.messageObj?.roomStayDate.replace('共',' total ').replace('晚',' days')}}</p>
<p>{{b.messageObj?.roomInfo}}</p>
<h3 class="name">{{ b.name }}</h3>
<p v-if="language==0">{{ b.messageObj?.roomStayDate }}</p>
<p v-else>{{ b.messageObj?.roomStayDate.replace('共', ' total ').replace('晚', ' days') }}</p>
<p>{{ b.messageObj?.roomInfo }}</p>
</div>
<div v-if="b.orderType == 1">
<h3 class="name">{{b.name}}</h3>
<h3 class="name">{{ b.name }}</h3>
<div v-for="(car,index) in b.messageObj.carsList" :key="index">
<p v-if="car.num>0">{{car.typeName}}：{{car.name}}：{{car.num}} {{ language==0?'辆':'Cars' }}</p>
<p v-if="car.num>0">{{ car.typeName }}：{{ car.name }}：{{ car.num }} {{
language == 0 ? '辆' : 'Cars'
}}</p>
</div>
<!-- <p>{{b.messageObj}}</p>-->
<!-- <p>{{b.extJsonObj}}</p>-->
<!-- <p>{{b.messageObj}}</p>-->
<!-- <p>{{b.extJsonObj}}</p>-->
</div>
<div v-if="b.orderType == 2">
<h3 class="name">{{b.name}}</h3>
<h3 class="name">{{ b.name }}</h3>
<div v-for="(n,index) in b.messageObj.foodsList" :key="index">
<p v-if="n.num > 0">
{{n.name}}({{n.categoryName}}) * <span>{{n.num}} {{language==0?'份':'pcs'}}</span>
{{ n.name }}({{ n.categoryName }}) * <span>{{ n.num }} {{ language == 0 ? '份' : 'pcs' }}</span>
</p>
</div>
<p>{{language==0?'配送日期':'Delivery Date'}}：{{b.extJsonObj.dcEnd }} ~ {{b.extJsonObj.dcEnd}}</p>
<p>{{ language == 0 ? '配送日期' : 'Delivery Date' }}：{{ b.extJsonObj.dcEnd }} ~
{{ b.extJsonObj.dcEnd }}</p>
</div>
<div v-if="b.orderType==3 ||b.orderType == 4">
<h3 class="name">{{b.name}}</h3>
<p >
{{dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[0]+'-'+dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[1] }}
<h3 class="name">{{ b.name }}</h3>
<p>
{{
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" :md="12" :sm="12" :xs="24">
<div v-if="b.orderType == 0">
<p>{{b.messageObj?.roomName}}</p>
<p>{{b.messageObj?.roomInfo}}</p>
<p>{{ b.messageObj?.roomName }}</p>
<p>{{ b.messageObj?.roomInfo }}</p>
</div>
<div v-if="b.orderType == 1">
</div>
......@@ -80,27 +91,36 @@
</div>
</el-col>
<el-col :lg="3" :md="6" :sm="6" :xs="6" class="text-center">
<span class="text-warning"> {{ language==0?'¥':'€' }}
<span class="bigMoney">{{language==0?b.total:b.totalEn}}</span>
<span class="text-warning"> {{ language == 0 ? '¥' : '€' }}
<span class="bigMoney">{{ language == 0 ? b.total : b.totalEn }}</span>
</span>
</el-col>
<el-col :lg="6" :md="16" :sm="16" :xs="16">
<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 v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')"
:value="b.countdown" format="mm:ss"
value-style="color:#E60012;font-size:16px;" @finish="finish(b)"/>
</div>
<div class="text-right">
<el-button v-if="b.orderType == 0&&b.viewStatus!=0" class="mb10" plain round type="success" size="small" @click="Rebook(b)">
{{ language==0?'再次预订':'Rebook' }}</el-button>
<el-button class="mb10" plain round type="primary" size="small" @click="goDetail(b)">
{{ language==0?'详情':'Detail' }}</el-button>
<el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" @click="goDetail(b)"
class="mb10" plain round type="primary" size="small" >
{{ language==0?'支付':'Pay' }}</el-button>
<el-button v-if="b.viewStatus==0" @click="cancel(b)" class="mb10" plain round type="warning" size="small" >
{{ language==0?'取消订单':'Cancel Order' }}</el-button>
<el-button v-if="b.viewStatus==5" @click="unsubscribe(b)" class="mb10" plain round type="" size="small" >
{{ language==0?'退订':'Unsubscribe' }}</el-button>
<el-button v-if="b.orderType == 0&&b.viewStatus!=0" class="mb10" plain round size="small" type="success"
@click="Rebook(b)">
{{ language == 0 ? '再次预订' : 'Rebook' }}
</el-button>
<el-button class="mb10" plain round size="small" type="primary" @click="goDetail(b)">
{{ language == 0 ? '详情' : 'Detail' }}
</el-button>
<el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" class="mb10"
plain round size="small" type="primary" @click="goDetail(b)">
{{ language == 0 ? '支付' : 'Pay' }}
</el-button>
<el-button v-if="b.viewStatus==0" class="mb10" plain round size="small" type="warning"
@click="cancel(b)">
{{ language == 0 ? '取消订单' : 'Cancel Order' }}
</el-button>
<el-button v-if="b.viewStatus==5" class="mb10" plain round size="small" type="" @click="unsubscribe(b)">
{{ language == 0 ? '退订' : 'Unsubscribe' }}
</el-button>
</div>
</el-col>
</el-row>
......@@ -113,40 +133,43 @@
</template>
<script setup>
import {onMounted,getCurrentInstance} from "@vue/runtime-core";
import {onMounted, getCurrentInstance} 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'
import {cancelOrder2,cancelOrder} from "/@/apiPc/booking";
import {cancelOrder2, cancelOrder} from "/@/apiPc/booking";
import {ElMessage} from "element-plus";
const router = useRouter()
const language= useStorage('language',0)
const language = useStorage('language', 0)
const list = ref([])
const user = useUserStore().user
const {proxy} = getCurrentInstance()
onMounted(()=>{
onMounted(() => {
getList()
})
function finish(bill){
function finish(bill) {
bill.status = '2'
// getList()
}
function getList() {
newbilllist({createById:user.userId}).then(res=>{
list.value = res.rows
newbilllist({createById: user.userId}).then(res => {
list.value = res.rows || []
for (var b of list.value) {
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)
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)
}
}
})
}
function goDetail(b) {
router.push({
name: 'bookingPay',
......@@ -157,27 +180,27 @@ function goDetail(b) {
})
}
function Rebook(row){
function Rebook(row) {
console.log(row)
router.push({
name:'hotelDetail',
params:{
cptId:row.activeId,
hotelId:row.hotelId
name: 'hotelDetail',
params: {
cptId: row.activeId,
hotelId: row.hotelId
},
query:{
id:row.extId
query: {
id: row.extId
}
})
}
const cancel = (row) => {
//取消订单
proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' :`Are you sure to cancel the order?`).then(() => {
return cancelOrder2(row.id).then(res=>{
proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' : `Are you sure to cancel the order?`).then(() => {
return cancelOrder2(row.id).then(res => {
getList()
ElMessage({
message: language.value == 0?'操作成功':'Successful operation!',
message: language.value == 0 ? '操作成功' : 'Successful operation!',
type: 'success'
})
})
......@@ -185,11 +208,11 @@ const cancel = (row) => {
}
const unsubscribe = (row) => {
proxy.$modal.confirm(language.value == 0 ?`确定退款吗 ?`:'Are you sure to refund?').then(() => {
return cancelOrder(row.id).then(res=>{
proxy.$modal.confirm(language.value == 0 ? `确定退款吗 ?` : 'Are you sure to refund?').then(() => {
return cancelOrder(row.id).then(res => {
getList()
ElMessage({
message: language.value == 0?'已提交退款，请等待审核!':'Refund has been submitted, please wait for review!',
message: language.value == 0 ? '已提交退款，请等待审核!' : 'Refund has been submitted, please wait for review!',
type: 'success'
})
})
......@@ -197,58 +220,127 @@ const unsubscribe = (row) => {
}
function toInvoice(){
function toInvoice() {
router.push({
name: 'invoice'
})
}
</script>
<style scoped lang="scss">
.bigMoney{font-size: 24px;font-family: "DIN Alternate";}
.name{font-size: 18px;margin: 0;}
.status-po{position: absolute;right: 0;top: 0;font-size: 12px;
<style lang="scss" scoped>
.bigMoney {
font-size: 24px;
font-family: "DIN Alternate";
}
.name {
font-size: 18px;
margin: 0;
}
.status-po {
position: absolute;
right: 0;
top: 0;
font-size: 12px;
color: #FFFFFF;
span{border-radius: 0px 10px 0px 10px;padding: 4px 10px;}
.bg-danger{background: #E60012;}
.bg-warning{background: #e89f39;}
.bg-pink{background: #F740A6;}
.bg-primary{background: var(--el-color-primary)}
.bg-blue{background: #00a0e9}
span {
border-radius: 0px 10px 0px 10px;
padding: 4px 10px;
}
.bg-danger {
background: #E60012;
}
.bg-warning {
background: #e89f39;
}
.bg-pink {
background: #F740A6;
}
.bg-primary {
background: var(--el-color-primary)
}
.bg-blue {
background: #00a0e9
}
}
.indexTitle {
margin: 20px 0 12px; overflow: visible;
margin: 20px 0 12px;
overflow: visible;
padding: 0 20px 15px;
border-bottom: 1px solid #e5e5e5;
.fr{margin: -8px 0 0}
h3 {display: inline-block;
.fr {
margin: -8px 0 0
}
h3 {
display: inline-block;
font-size: 16px;
color: var(--el-color-primary);
}
}
.item{
.name{font-size: 18px;
color: #000000;margin: 0 0 10px;}
p{margin: 8px 0 0;color: #707070;font-size: 14px;}
margin: 0 0 20px;border: 1px solid #E5E5E5;
.item {
.name {
font-size: 18px;
color: #000000;
margin: 0 0 10px;
}
p {
margin: 8px 0 0;
color: #707070;
font-size: 14px;
}
margin: 0 0 20px;
border: 1px solid #E5E5E5;
border-radius: 10px;
position: relative;
.bbody{padding: 0 15px 20px;}
.title{background: #F7F7F7;border-bottom: 1px solid #E5E5E5;
span{font-size: 14px;
color: #4C5359;}
.bbody {
padding: 0 15px 20px;
}
.title label{border-radius: 5px 0 5px 0; font-size: 12px; color: #fff; padding:4px 10px;margin-right: 10px;}
.blueTag{
background-color: #1EC886;}
.title {
background: #F7F7F7;
border-bottom: 1px solid #E5E5E5;
span {
font-size: 14px;
color: #4C5359;
}
}
.title label {
border-radius: 5px 0 5px 0;
font-size: 12px;
color: #fff;
padding: 4px 10px;
margin-right: 10px;
}
.blueTag {
background-color: #1EC886;
}
.purpleTag {
background-color: #717bef;
}
.orangeTag {
background-color: #ff8124;
}
}
.billFoot {
.price {
width: 100%;
......@@ -262,6 +354,7 @@ function toInvoice(){
font-weight: 500;
margin: 0 20px;
}
.status {
position: absolute;
right: 10px;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!