Skip to content

M
million
Commit 6c484809 authored by 沈良进's avatar 沈良进
Browse files
Options

订单详情页开发

parent 39e00b69
Hide whitespace changes
Inline Side-by-side
Showing with 204 additions and 41 deletions
src/components/navs/city-category.vue
View file @ 6c484809
<style>
.q-ml-lg .block {
margin-right: 12px;
}
</style>
<style scoped>
.header-box {
......
src/components/navs/hor-big-one.vue
View file @ 6c484809
<style>
</style>
<style scoped>
.q-ml-lg .block {
margin-right: 12px;
}
</style>
<style scoped>
.header-box {
max-width: 1200px;
margin: 0 auto;
......
src/pages/detailsCar.vue
View file @ 6c484809
......@@ -597,17 +597,28 @@
</template>
<script>
import auth from "src/components/common/auth.vue";
// import auth from "src/components/common/auth.vue";
import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/car/orderPreview.vue";
import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue";
import block from "src/components/trip/block/index";
// import smaple from "src/components/trip/smaple.vue";
// import Trip from "src/components/trip/trip.vue";
// import block from "src/components/trip/block/index";
import { date } from "quasar";
import componentsMap from "../components/car/Map.vue";
import * as dayjs from "dayjs";
// import * as dayjs from "dayjs";
export default {
components: {
slider,
slideritem,
calendar,
OrderPreview,
// smaple,
// Trip,
// block,
componentsMap,
// auth,
},
props: [],
data() {
return {
......@@ -718,17 +729,6 @@ export default {
zoomDiyContext: 1,
};
},
components: {
slider,
slideritem,
calendar,
OrderPreview,
smaple,
Trip,
block,
componentsMap,
auth,
},
watch: {
days: {
handler: function (val, oldval) {
......
src/pages/usercenter/order.vue
View file @ 6c484809
......@@ -142,7 +142,7 @@
</div>
<div class="order-info text-center">
<div class="primary">{{item.orderStatusStr}}</div>
<div class="q-mt-sm cursor-pointer">订单详情</div>
<div class="q-mt-sm cursor-pointer" @click="CommonJump(`/orderinfo?orderNo=${item.orderNo}`)">订单详情</div>
</div>
<div class="order-action text-center">
<q-btn
......
src/pages/usercenter/order/orderDetail.vue
View file @ 6c484809
......@@ -5,14 +5,14 @@
<div class="q-mt-lg row">
<div class="col">
<div class="row items-center">
<q-icon name="iconfont icontishi" size="32px" color="warning" />
<div class="q-ml-md text-h6 text-orange text-weight-bold">待支付</div>
<q-icon name="iconfont iconsuccess" :class="`${orderIcon}`" size="32px" :color="`${iconColor}`" />
<div class="q-ml-md text-h6 text-weight-bold" :class="`text-${iconColor}`">{{["","待付款","已付款", "已完成", "已取消"][detail.OrderStatus]}}</div>
</div>
<div class="q-mt-md f12 text-grey-6">請在您下單成功後30分鐘內完成支付，否則訂單會被系統自動取消</div>
</div>
<div class="">
<div class="f12 text-grey-6">訂單編號：#D2022325159852</div>
<div class="f12 text-grey-6 q-mt-md">下單日期：2023年3月14日 19:02</div>
<div class="f12 text-grey-6">訂單編號：#{{detail.OrderNo}}</div>
<div class="f12 text-grey-6 q-mt-md">下單日期：{{detail.CreateTime}}</div>
</div>
</div>
<q-separator color="grey-2" class="q-my-md" />
......@@ -20,9 +20,13 @@
<div class="text-subtitle1 col">
<span>應付金額：</span>
<span class="text-subtitle2">CNY</span>
<span class="q-ml-sm text-weight-bolder">{{ moneyFormat('3580.00',2) }}</span>
<span class="q-ml-sm text-weight-bolder">{{ moneyFormat(detail.TotalPrice,2) }}</span>
</div>
<div class="">
<q-btn color="primary" outline dense class="q-mr-md q-px-md">
<i class="iconfont iconmessage1"></i>联系客服</q-btn>
<q-btn color="primary" outline dense class="q-mr-md q-px-md">
<i class="iconfont iconiconfontscan"></i>扫码咨询</q-btn>
<q-btn color="primary" outline dense label="取消訂單" class="q-mr-md q-px-md"/>
<q-btn color="primary" unelevated dense label="前往付款" class="q-px-md"/>
</div>
......@@ -33,19 +37,19 @@
<div class="text-subtitle1 text-weight-bolder">商品訊息</div>
<div class="row q-mt-md">
<q-img
src="http://imgfile.oytour.com/Upload/DMC/202302280651141800000000003.jpg"
:src="detail.GoodsPic"
class="rounded-borders q-mr-md"
spinner-color="grey-2"
style="width: 150px"
/>
<div class="col">
<div class="text-body1 ellipsis">忠清北道私人包車一日遊｜玉笋峰悬索桥 & 单轨列车登飞凤山(滑翔伞) & 朴达岭 & 国弓体验</div>
<div class="text-body1 ellipsis">{{detail.GoodsName}}</div>
<div class="q-mt-sm text-grey-6">2023-03-15從成都出發 成人x2; </div>
<div class="q-mt-sm text-dark">
出行日期：2023年3月30日（本地时间）
出行日期：{{detail.SelectStartTime}}（本地时间）
</div>
<div class="q-mt-sm text-grey-6">
商品類型：包車
商品類型：{{detail.GoodsType}}
</div>
</div>
</div>
......@@ -57,19 +61,19 @@
<div class="row q-col-gutter-md q-mt-md">
<div class="col-6">
<div class="f12 text-grey-6">姓氏</div>
<div class="q-mt-sm text-body1">羅</div>
<div class="q-mt-sm text-body1">{{detail.SurName}}</div>
</div>
<div class="col-6">
<div class="f12 text-grey-6">名字</div>
<div class="q-mt-sm text-body1">超</div>
<div class="q-mt-sm text-body1">{{detail.Name}}</div>
</div>
<div class="col-6">
<div class="f12 text-grey-6">手機號碼</div>
<div class="q-mt-sm text-body1">86-17308037817</div>
<div class="q-mt-sm text-body1">{{detail.ContactNumber}}</div>
</div>
<div class="col-6">
<div class="f12 text-grey-6">邮箱 (用于接收订单确认邮件)</div>
<div class="q-mt-sm text-body1">alex9012@vip.qq.com</div>
<div class="q-mt-sm text-body1">{{detail.Mailbox}}</div>
</div>
</div>
<div>
......@@ -81,13 +85,85 @@
</div>
</q-card>
<q-card class="rounded-borders q-pa-md q-mt-md" flat>
<div class="text-subtitle1 text-weight-bolder">使用地点</div>
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">
<componentsMap :AddressObj="detail"/>
</div>
<orderPriceDetail v-if="detail.OrderNo" :orderInfo="detail"></orderPriceDetail>
</q-card>
<div v-if="(!orderNo || orderNo == '') && !loading" class="text-center q-my-xl">
<none-data
iconType="order"
title="沒有找到您的訂單信息哦"
subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
></none-data>
</div>
</div>
</template>
<script>
import componentsMap from "../../../components/car/Map.vue";
import orderPriceDetail from './orderPriceDetail.vue'
export default {
components: {componentsMap, orderPriceDetail},
data() {
return {
detail: {},
orderIcon: '',
iconColor: '',
orderNo: '',
loading: true,
}
},
created() {},
mounted() {
const {orderNo} = this.$route.query
if(orderNo) {
this.getOrderDetail(orderNo)
} else {
this.goHomeHandler()
}
},
methods: {
goHomeHandler(){
this.loading=false
setTimeout(() => {
location.href = location.origin;
}, 3000);
},
getOrderDetail(orderNo) {
this.apipost(
"GetDetailsByOrderNo_post",
{OrderNo: orderNo
},
(res) => {
if (res.data.resultCode == 1) {
this.detail = res.data.data
this.orderIcon = ["","icontime1","iconsuccess", "iconsuccess", "icontishi"][this.detail.OrderStatus]
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.loading=false
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
}
}
</script>
......
src/pages/usercenter/order/orderPriceDetail.vue 0 → 100644
View file @ 6c484809
<style lang="scss" scoped>
</style>
<template>
<div>价格详情</div>
</template>
<script>
export default {
props: {
orderInfo: {
type: Object,
default: () => ({})
}
},
data() {},
mounted() {
this.getCarData()
this.getCarOrder()
},
methods: {
// 获取团的详情
getGroupData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetCarSingleProductDetail",
{ ProductId: this.msg.configId },
(r) => {
if (r.data.resultCode == 1) {
this.dataList = r.data.data;
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
},
// 获取车的详情
getCarData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetCarSingleProductDetail",
{ ProductId: this.msg.configId },
(r) => {
if (r.data.resultCode == 1) {
this.dataList = r.data.data;
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
},
getCarOrder() {
this.$q.loading.show();
this.apipost(
"CarSingle_post_GetTYMyCarOrderInfo",
{ OrderId: this.msg.configId },
(r) => {
if (r.data.resultCode == 1) {
this.dataList = r.data.data;
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
}
}
}
</script>
\ No newline at end of file
src/pages/usercenter/setAddress.vue
View file @ 6c484809
......@@ -108,7 +108,7 @@
><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/address-add.png" />添加郵寄地址</q-btn>
</div>
</div>
<q-dialog content-style="width: 900px" v-model="isShowDialog">
<q-dialog v-model="isShowDialog">
<div class="bg-white dialog-box" style="width: 800px; padding: 20px">
<div class="f22 bold">{{form.Id ? '编辑': '添加'}}邮寄地址</div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
......
src/pages/usercenter/setUsersList.vue
View file @ 6c484809
......@@ -138,8 +138,8 @@
/>
</div>
<q-dialog content-style="width: 900px" v-model="isShowDialog">
<div class="bg-white dialog-box" style="width: 800px; padding: 20px">
<q-dialog v-model="isShowDialog">
<div class="bg-white dialog-box" style="padding: 20px">
<div class="f22 bold">{{ form.Id ? "编辑" : "新增" }}出行人信息</div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div>
......
src/router/routes.js
View file @ 6c484809
......@@ -195,7 +195,7 @@ const routes = [{
import ('pages/pay/paysuccess.vue')
},
{
path: '/orderinfo/:orderno', //訂單詳情
path: '/orderinfo', //訂單詳情
meta: { title: '訂單詳情', isUserCenter: false, needLogin: true, },
component: () =>
import ('pages/usercenter/order/orderDetail.vue')
......
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