Commit d0aea7da authored by 沈良进's avatar 沈良进

订单详情页优化

parent 8450777f
......@@ -187,6 +187,9 @@
class="q-mr-lg q-ml-sm"
@click="CommonJump('/index', {})"
/></div>
<!-- <div style="transform:scale(0.6,0.6)"> -->
<!-- <searchSf2 v-if="$q.platform.is.desktop" :plugData="plugData"></searchSf2> -->
<!-- </div> -->
<!-- pc -->
<div v-if="$q.platform.is.desktop">
<q-btn label="繁體中文" flat>
......@@ -310,6 +313,7 @@
</div>
<!-- 移动端 -->
<div v-else>
<!-- <searchSf2 :plugData="plugData"></searchSf2> -->
<img
@click="avatarClick"
class="avatar q-mt-sm"
......@@ -342,8 +346,9 @@
import popup from "../props/index";
import CityCategoryMobile from "./city-category-mobile.vue";
import cityCategory from "./city-category.vue";
import searchSf2 from '../search_sf/search-top.vue'
export default {
components: { cityCategory, CityCategoryMobile, popup },
components: { cityCategory, CityCategoryMobile, popup,searchSf2 },
props: {
baseData: {
type: Object,
......@@ -360,6 +365,7 @@ export default {
},
data() {
return {
plugData: {details: [], Title: ''},
showDialog: false,
searchDate: "",
searchEndDate: "",
......
<template>
<!--搜尋輪播淡出 - 中-->
<div class="banner-style9">
<div
class="search-content column items-center justify-center rounded-borders"
style="border-radius: 6px"
>
<div>
<div v-if="!$q.screen.xs">
<div
class="row rounded-borders overflow-hidden"
style="width: 300px"
v-if="plugData.Title.split('^').length == 1"
>
<div class="col-10">
<q-input
filled
square
id="search_key"
v-model="searchKey"
class="bg-grey-1"
clearable
:label="$t('search')"
@focus="searchFocusHandler"
@blur="searchBlurHandler"
@keyup="searchChangeHandler"
/>
</div>
<div class="col-2">
<q-btn
dark-percentage
color="primary"
unelevated
icon="search"
style="
width: 100%;
height: 56px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
"
@click="goSearchHandler"
/>
</div>
</div>
<div
class="row overflow-hidden bg-white"
style="width: 640px; margin: 0 auto; border-radius: 5px"
v-if="
plugData.Title.split('^').length > 1 &&
plugData.Title.split('^')[1] == 'ns1'
"
>
<q-input
filled
square
id="search_key"
v-model="searchKey"
class="bg-grey-1 col"
clearable
label="搜尋目的地、景點、行程觀光或酒店名稱..."
@focus="searchFocusHandler"
@blur="searchBlurHandler"
@keyup="searchChangeHandler"
@keypress.enter.native="goSearchHandler"
/>
<q-btn
dark-percentage
color="primary"
style="border-radius: 0"
class="col-2"
unelevated
icon="search"
@click="goSearchHandler"
/>
</div>
<div
v-show="showSplitPannel"
id="sb"
transition-show="fade"
elevated
transition-hide="scale"
class="showbox column"
>
<div class="q-px-sm q-pt-sm" v-if="historys.length>0">
<div class="q-mb-sm text-weight-bold">歷史搜索</div>
<div class="row">
<div class="col overflow-hidden" style="height:36px">
<q-chip style="background:#f6f7f9;" @click="goSearchHandler(x)" clickable text-color="dark" class="cursor-pointer" :label="x" v-for="(x,i) in historys" :key="i" />
</div>
<q-btn text-color="grey-6" icon="delete" class="q-py-none" dense size="sm" flat @click="clearHistorys">
<q-tooltip class="bg-dark" co>清空歷史</q-tooltip>
</q-btn>
</div>
</div>
<div class="text-weight-bold q-pa-sm">熱門目的地</div>
<q-separator />
<div class="flex flex-wrap">
<div class="hot-tag" @click="handleHotTagClick(item)" :class="{'hot-tag-select': setectHotTag === item.Id}" :key="item.Id" v-for="item in hotList">{{item.Name}}</div>
</div>
</div>
</div>
<div v-if="$q.screen.xs">
<q-input
filled
v-model="searchKey"
class="bg-grey-1 q-mx-md"
:label="$t('search')"
readonly="readonly"
@click="showPopupHandler"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</div>
</div>
</div>
<popup
v-model="showPopup"
mode="top"
:safeAreaInsetBottom="true"
border-radius="5"
>
<div class="chosen-box">
<div class="title">搜尋行程</div>
<div class="chosen-tab">
<q-tabs
v-model="tab"
align="justify"
narrow-indicator
class="q-mb-md"
>
<q-tab class="text-purple" name="dest" label="目的地" />
<q-tab class="text-teal" name="kw" label="關鍵字" />
</q-tabs>
<div v-show="tab == 'dest'">
<div class="q-mb-md">
<q-select
filled
v-model="chosenResult.fl"
:options="areas"
option-label="Name"
option-value="Name"
label="請選擇地區"
/>
</div>
<div class="q-mb-md" v-if="chosenResult.fl.SubList">
<q-select
filled
v-model="chosenResult.sl"
:options="chosenResult.fl.SubList"
option-label="Name"
option-value="Name"
label="請選擇地區"
/>
</div>
<div class="q-mb-md" v-if="chosenResult.sl.SubList">
<q-select
filled
v-model="chosenResult.tl"
:options="chosenResult.sl.SubList"
option-label="Name"
option-value="Name"
label="請選擇地區"
/>
</div>
<div class="q-mb-md" v-if="chosenResult.tl.SubList">
<q-select
filled
v-model="chosenResult.ful"
:options="chosenResult.tl.SubList"
option-label="Name"
option-value="Name"
label="請選擇地區"
/>
</div>
</div>
<div v-show="tab == 'kw'" class="q-mb-md">
<q-input
filled
id="search_key"
v-model="searchKey"
class="bg-grey-1"
:label="$t('search')"
/>
</div>
<div class="q-mb-md row">
<div class="col">
<q-input
filled
v-model="searchDate"
:label="$t('search_date_begin')"
mask="date"
class="bg-grey-1"
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qS3DateProxy">
<q-date
mask="YYYY-MM-DD"
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="searchDate"
@input="() => $refs.qS3DateProxy.hide()"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="split-word bg-grey-3 q-pl-xs q-pr-xs"></div>
<div class="col">
<q-input
filled
v-model="searchEndDate"
:label="$t('search_date_end')"
mask="date"
class="bg-grey-1"
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qS4DateProxy">
<q-date
mask="YYYY-MM-DD"
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="searchEndDate"
@input="() => $refs.qS4DateProxy.hide()"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</div>
<div>
<q-btn
color="primary"
unelevated
style="width: 100%"
filled
label="搜尋"
@click="goSearchHandler"
/>
</div>
</div>
</div>
</popup>
</div>
</template>
<script>
//搜尋輪播淡出 - 中
import popup from "../props/index";
export default {
props: ["plugData"],
components: {
popup,
},
data() {
return {
setectHotTag: '',
hotList: [],
slide: 0,
searchKey: "",
searchDate: "",
searchEndDate: "",
showSplitPannel: false,
thumbStyle: {
right: "4px",
borderRadius: "5px",
backgroundColor: "#027be3",
width: "5px",
opacity: 0.75,
},
barStyle: {
right: "2px",
borderRadius: "9px",
backgroundColor: "#027be3",
width: "9px",
opacity: 0.2,
},
areas: [],
crtAreaIndex: 0,
showPopup: false,
tab: "dest",
historys:[],
chosenResult: {
fl: "",
sl: "",
tl: "",
ful: "",
},
RB_Group_Id: 0,
};
},
created() {
// this.$EventBus.$on('hotList', (hotList) => {
// console.log('hotList', hotList);
// this.hotList = hotList
// })
},
mounted() {
var jObj = JSON.parse(window.localStorage.getItem('baseifo'));
const hotList = this.getHotList(jObj.AreaList)
console.log('hotList mounted', jObj, hotList)
this.hotList = hotList
this.getHistory()
var newStartDate = new Date();
var newStartDateStr = this.formatDate(
newStartDate.getFullYear(),
newStartDate.getMonth() + 1,
newStartDate.getDate()
);
var newEndDate = this.AddMonth(newStartDateStr, 2);
var newEndDateStr = this.formatDate(
newEndDate.getFullYear(),
newEndDate.getMonth() + 1,
newEndDate.getDate()
);
this.searchDate = newStartDateStr;
this.searchEndDate = newEndDateStr;
this.$root.$emit("change-head-style", 2);
document.addEventListener("click", this.clickHandler);
var jObj = JSON.parse(localStorage.getItem("groupinfo"));
this.RB_Group_Id = jObj.GroupId;
if (localStorage.baseifo) {
var jObj = JSON.parse(localStorage.baseifo);
this.areas = jObj.AreaList;
} else {
this.getAera();
}
},
beforeDestroy() {
document.removeEventListener("click", this.clickHandler);
},
computed: {},
methods: {
getHotList(arr) {
let hotArr = [];
arr.forEach(item => {
if (item.SubList && item.SubList.length) {
hotArr = hotArr.concat(this.getHotList(item.SubList));
} else {
if (item.IsHot === 1) {
hotArr.push(item);
}
}
});
return hotArr;
},
handleHotTagClick(item) {
this.setectHotTag = item.Id
// let val = item.Name
// if(val!='' && typeof val == 'string'){
// this.searchKey=val
// }
// this.historys=Array.from(new Set([this.searchKey].concat(this.historys)))
// localStorage['recent_search'] = JSON.stringify(this.historys)
this.CommonJump("/search", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate,
areaId: item.Id
});
},
//获取地区数据
getAera() {
this.apipost(
"ws_get_GetSearchArea",
{
RB_Group_Id: this.RB_Group_Id,
},
(res) => {
if (res.data.resultCode == 1) {
if (res.data.data) {
this.areas = res.data.data.AreaList;
}
}
},
(err) => {}
);
},
getHistory(){
this.historys =JSON.parse(localStorage['recent_search']??'[]')
},
showPopupHandler() {
this.showPopup = true;
},
clickHandler(e) {
try {
if (!document.querySelector("#sb").contains(e.target)) {
this.showSplitPannel = false;
}
} catch (error) {}
},
clickSlideHandler(url) {
if (url && url.length > 1) {
location.href = url;
}
},
searchFocusHandler() {
if (this.searchKey == "") {
setTimeout(() => {
this.showSplitPannel = true;
}, 200);
}
},
searchBlurHandler() {
//this.showSplitPannel = false;
},
clkAreaHandler(i) {
this.crtAreaIndex = i;
},
searchChangeHandler() {
if (this.searchKey == "") {
this.showSplitPannel = true;
} else {
this.showSplitPannel = false;
}
},
chosenAreaHandler(name) {
this.searchKey = name;
this.showSplitPannel = false;
},
//跳转到搜索页面
goSearchHandler(val='') {
console.log(val)
if(val!='' && typeof val == 'string'){
this.searchKey=val
this.historys=Array.from(new Set([this.searchKey].concat(this.historys)))
localStorage['recent_search'] = JSON.stringify(this.historys)
}
this.CommonJump("/search", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate,
});
},
clearHistorys(){
this.historys =[]
localStorage['recent_search'] = JSON.stringify(this.historys)
}
},
};
</script>
<style>
::v-deep .q-field__control {
height: 40px;
}
::v-deep .q-field__control-container {
height: 40px;
}
::v-deep .q-field--auto-height .q-field__control {
min-height: 40px;
}
::v-deep .q-field__marginal {
height: 40px;
}
::v-deep .q-field--auto-height .q-field__native {
min-height: 40px;
}
.banner-style9 {
/* margin-top: 0px; */
/* position: relative; */
/* overflow: hidden; */
border-radius: 5px;
}
.banner-style9 .search-content {
/* position: absolute; */
/* top: 0;
left: 0;
right: 0;
bottom: 0; */
z-index: 2;
/* transform: translate(-50%, -50%); */
/* margin-top: 40px; */
background: rgb(0, 0, 0, 0.1);
}
.banner-style9 .search-content .search-title {
margin: 0 auto;
max-width: 520px;
color: #fff;
width: 80%;
font-weight: 600;
}
.banner-style9 .search-content .search-title .title {
margin-bottom: 10px;
font-size: 36px;
line-height: 1.2;
text-align: center;
letter-spacing: 1px;
}
.banner-style9 .search-content .search-title .sub-title {
margin-bottom: 30px;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
}
.banner-style9 .showbox {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 345px;
background: #fff;
left: 0;
top: 60px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.banner-style9 .showspbox {
position: absolute;
box-sizing: border-box;
width: calc(41.6667% - 22px);
height: 345px;
background: #fff;
left: 0;
top: 185px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.my-menu-link {
background-color: rgb(237, 237, 237) !important;
}
.area-box .h3 {
font-size: 22px;
color: #333;
font-weight: 600;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
cursor: pointer;
}
.area-box .h4 {
font-size: 18px;
color: #424242;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
margin-right: 20px;
font-weight: 600;
cursor: pointer;
}
.area-box .h5 {
font-size: 16px;
color: #636363;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
margin-right: 12px;
cursor: pointer;
}
.area-box .h6 {
font-size: 14px;
color: gray;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
text-align: right;
cursor: pointer;
}
.area-box .h6:hover,
.area-box .h5:hover,
.area-box .h4:hover,
.area-box .h3:hover {
color: var(--q-color-primary);
}
.area-box .to-end {
align-items: flex-end;
}
.chosen-box {
padding: 15px;
min-height: 30vh;
}
.chosen-box .title {
font-size: 20px;
font-weight: 600;
color: #111;
margin-bottom: 5px;
}
.chosen-box .split-word {
font-size: 15px;
color: #333;
line-height: 56px;
}
</style>
<style scoped>
.hot-tag {
width: 141px;
height: 34px;
line-height: 34px;
padding-left: 8px;
border-radius: 8px;
margin: 12px 0 12px 12px;
cursor: pointer;
}
.hot-tag-select {
background: #EE4454;
color: #fff;
}
</style>
\ No newline at end of file
......@@ -126,7 +126,7 @@ export default {
this.$q.loading.show();
this.apipost(
"CarSingle_post_GetTYMyCarOrderInfo",
"CarSingle_post_GetAdminCarOrderInfo",
{ OrderId: this.orderInfo.ErpOrderId },
(r) => {
if (r.data.resultCode == 1) {
......
......@@ -31,7 +31,9 @@
</div></div>
</template>
<script>
import componentsMap from 'src/components/car/Map.vue';
export default {
components: {componentsMap},
props: {
orderInfo: {
type: Object,
......@@ -52,8 +54,11 @@ export default {
this.$q.loading.show();
this.apipost(
"dmc_post_Get_GetJAPAN_HotelDetail",
{ ProductId: this.orderInfo.GoodsId },
{ groupBookingFlg: "0",
hotelImageSize: 5,
photoGalleryGetFlg: 1,hotelId: this.orderInfo.GoodsId },
(res) => {
console.log('this.travelLngLat', res)
this.$q.loading.hide();
if (res.data.resultCode == 1) {
this.hotelDetails = res.data.data.hotelDetails;
......@@ -64,6 +69,7 @@ export default {
Lng: this.hotelSummary.longitudeW,
Address: this.hotelSummary.hotelName
});
console.log('this.travelLngLat', this.travelLngLat)
} else {
this.$message.error(res.data.message);
}
......
......@@ -4,28 +4,27 @@
<template>
<div>
<div class="row q-mb-sm items-center">
<div class="col">總金額</div>
<div class="text-subtitle2 text-weight-bolder text-primary">
<div class="q-mr-lg">總金額</div>
<div class="text-subtitle2 text-weight-bolder ">
CNY {{ moneyFormat(sumPrice, 2) }}
</div>
</div>
<hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
<div class="row q-mb-sm items-center" v-if="DiscountsMoney > 0">
<div class="col">優惠金額</div>
<div class="row q-mb-sm items-center">
<div class="q-mr-lg">優惠金額</div>
<div
class="text-subtitle2 text-weight-bolder text-teal"
v-if="DiscountsMoney > 0"
v-if="DiscountMoney > 0"
>
CNY - {{ moneyFormat(DiscountsMoney, 2) }}
CNY - {{ moneyFormat(DiscountMoney, 2) }}
</div>
<div class="text-grey-5" v-else>暫無優惠</div>
</div>
<div class="row q-mb-sm items-center">
<div class="col">支付金額</div>
<div class="text-h6 text-weight-bolder text-primary product-price">
CNY {{ moneyFormat(Money, 2) }}
<!-- <div class="row q-mb-sm items-center">
<div class="q-mr-lg">支付金額</div>
<div class="text-h6 text-weight-bolder product-price">
CNY {{ moneyFormat(TotalPrice, 2) }}
</div>
</div>
</div> -->
</div>
</template>
<script>
......@@ -40,13 +39,12 @@ export default {
return {
details: null,
sumPrice: 0,//总金额
DiscountsMoney: 0,//优惠金额
Money: 0, // 支付金額
DiscountMoney: 0,//优惠金额
TotalPrice: 0, // 支付金額
}
},
mounted() {
this.getGroupData()
this.getCarOrder()
},
methods: {
// 获取团的详情
......@@ -54,23 +52,22 @@ export default {
// this.$q.loading.show();
this.apipost(
"dmc_post_GetThirdHotelOrder",
{ ProductId: this.orderInfo.GoodsId },
{ OrderID: this.orderInfo.ErpOrderId },
(r) => {
if (r.data.resultCode == 1) {
this.dataList = r.data.data;
const {DiscountsMoney,MailingState,Money} = r.data.data;
console.log('getTicket Data', r.data.data,DiscountsMoney,MailingState,Money)
const {DiscountMoney,TotalPrice} = r.data.data;
console.log('getTicket Data', r.data.data)
// sumPrice: 0,//总金额
// DiscountsMoney: 0,//优惠金额
// Money: 0, // 支付金額
// DiscountMoney: 0,//优惠金额
// TotalPrice: 0, // 支付金額
// MailingState: '',//邮寄状态 1自取 2邮寄
this.Money = Money;
this.DiscountsMoney = DiscountsMoney
this.MailingState = MailingState;
this.sumPrice = Money + DiscountsMoney
this.TotalPrice = TotalPrice;
this.DiscountMoney = DiscountMoney
this.sumPrice = TotalPrice + DiscountMoney
// this.sumPrice = this.moneyFormat(this.sumPrice, 2)
// this.Money = this.moneyFormat(this.Money, 2)
// this.DiscountsMoney = this.moneyFormat(this.DiscountsMoney, 2)
// this.TotalPrice = this.moneyFormat(this.TotalPrice, 2)
// this.DiscountMoney = this.moneyFormat(this.DiscountMoney, 2)
} else {
this.$q.notify({
type: "negative",
......
......@@ -29,7 +29,7 @@
<span class="q-ml-sm text-weight-bolder">{{ moneyFormat(detail.TotalPrice,2) }}</span>
</div>
<div class="row items-center">
<q-btn color="primary" flat dense class="q-mr-md q-px-md">
<q-btn color="primary" flat dense class="q-mr-md q-px-md" @click="navigateToWechat">
<i class="iconfont iconmessage1"></i>联系客服</q-btn>
<q-btn color="primary" dense flat class="q-mr-md q-px-md" @click="showCode = true">
<i class="iconfont iconiconfontscan"></i>扫码咨询</q-btn>
......@@ -37,12 +37,12 @@
<q-btn color="primary" unelevated dense label="前往付款" @click="goPayOrder" class="q-px-md"/> -->
<div class="text-right" v-if="detail.OrderStatus==1">
<q-btn color="primary" dense outline class="q-px-sm" label="取消訂單" @click="cancalOrder(item.orderNo)" />
<q-btn color="primary" dense unelevated class="q-px-sm q-ml-sm" label="立即支付" @click="CommonJump('/pay/'+item.orderNo,{},'blank')" />
<q-btn color="primary" dense outline class="q-px-sm" label="取消訂單" @click="cancalOrder(detail.OrderNo)" />
<q-btn color="primary" dense unelevated class="q-px-sm q-ml-sm" label="立即支付" @click="CommonJump('/pay/'+detail.OrderNo,{},'blank')" />
</div>
<div class="text-right" v-else>
<!-- <div class="text-right" v-else>
<q-btn color="dark" dense flat class="q-px-sm" @click="CommonJump('/orderinfo/'+orderNo,{},'blank')" label="查看訂單" />
</div>
</div> -->
</div>
</div>
</q-card>
......@@ -90,13 +90,13 @@
<div class="q-mt-sm text-body1">{{detail.Mailbox}}</div>
</div>
</div>
<div>
<!-- <div>
<q-separator color="grey-2" class="q-my-md" />
<div class="text-subtitle1 text-weight-bolder">用戶備註</div>
<div class="rounded-borders bg-orange-1 col q-mt-md q-pa-md text-orange">
凍死了防控就是大陸飛科技阿斯蒂芬盧卡斯經費達拉斯
{{detail.Remarks}}
</div>
</div>
</div> -->
</q-card>
<q-card class="rounded-borders q-pa-md q-mt-md" flat v-if="![1,2,3].includes(detail.GoodsType)">
<div v-if="detail.OrderNo">
......@@ -167,7 +167,7 @@ methods: {
this.apipost('GetCancelOrder_post',{OrderNo: this.orderNo},r=>{
if(r.data.resultCode==1){
this.$message.success('訂單取消成功')
this.getOrderList()
window.location.reload()
}else{
this.$message.error('訂單取消失敗,請重新嘗試')
}
......@@ -194,7 +194,7 @@ methods: {
this.iconColor = ["","blue","blue", "green", "grey"][this.detail.OrderStatus]
console.log('get detail', this.orderIcon, this.iconColor)
this.orderNo=orderNo
this.orderInfo=r.data.data
this.orderInfo=res.data.data
this.loading=false
} else {
// this.$notify(res.data.message);
......@@ -209,6 +209,9 @@ methods: {
null
);
},
navigateToWechat() {
window.open('https://work.weixin.qq.com/kfid/kfcaec7130ac124872a', '_blank')
}
}
}
</script>
......
......@@ -60,7 +60,7 @@ export default {
this.$q.loading.show();
this.apipost(
"b2c_get_GetTicketCouponsDetail",
{ CouponsId: this.msg.configId },
{ CouponsId: this.orderInfo.GoodsId },
(r) => {
if (r.data.resultCode == 1) {
let addList = function (arr) {
......
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