Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
cc28a6cc 1 parent 5c09c8c7

订单相关API调整

Inline Side-by-side
Showing 5 changed files with 300 additions and 164 deletions
......@@ -27,7 +27,6 @@ declare module '@vue/runtime-core' {
NutRadio: typeof import('@nutui/nutui-taro')['Radio']
NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
NutRow: typeof import('@nutui/nutui-taro')['Row']
NutSkeleton: typeof import('@nutui/nutui-taro')['Skeleton']
NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
......
/*
* @Date: 2023-12-22 10:29:37
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-27 17:27:31
* @LastEditTime: 2023-12-27 18:09:49
* @FilePath: /meihuaApp/src/api/index.js
* @Description: 文件描述
*/
......@@ -16,6 +16,7 @@ const Api = {
GET_LIST: '/srv/?a=room_data&t=get_list',
GET_ROOM: '/srv/?a=room_data&t=get_room',
ADD_ORDER: '/srv/?a=room_data&t=add_order',
MY_ORDER: '/srv/?a=room_data&t=my_order',
PAY: '/srv/?a=pay',
PAY_CHECK: '/srv/?a=pay_check',
}
......@@ -100,3 +101,12 @@ export const payAPI = (params) => fn(fetch.post(Api.PAY, params));
* @returns
*/
export const payCheckAPI = (params) => fn(fetch.post(Api.PAY_CHECK, params));
/**
* @description: 获取我的订单列表
* @param pay_type
* @param page
* @param limit
* @returns
*/
export const myOrderAPI = (params) => fn(fetch.get(Api.MY_ORDER, params));
......
......@@ -3,11 +3,11 @@
<view class="order-card-header">
<nut-row>
<nut-col span="16">
<view style="font-weight: bold; font-size: 34rpx;">家庭豪华连排三室套房</view>
<view style="color: #7D7C7C; font-size: 24rpx;">两室 宜住3人 </view>
<view style="font-weight: bold; font-size: 34rpx;">{{ title }}</view>
<view style="color: #7D7C7C; font-size: 24rpx;">{{ room_num }}室 宜住{{ capacity }}人</view>
</nut-col>
<nut-col span="8">
<image mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<image mode="aspectFill" :src="cover" />
</nut-col>
</nut-row>
</view>
......@@ -18,27 +18,27 @@
<nut-row>
<nut-col span="18">
<view class="order-card-price-text">
<view class="left"><nut-price :price="980" size="normal" /></view>
<view class="right" style="margin-top: 10rpx;"><nut-price :price="1280" size="small" strike-through style="color: #7D7C7C;" /></view>
<view class="left"><nut-price :price="order_price" size="normal" /></view>
<view class="right" style="margin-top: 10rpx;"><nut-price :price="original_total" size="small" strike-through style="color: #7D7C7C;" /></view>
</view>
</nut-col>
<nut-col span="6" class="order-card-price-num">
<IconFont name="close" size="7" color="#000" style="margin-right: 5rpx; margin-bottom: 0.5rpx;"></IconFont><text>1000</text>
<IconFont name="close" size="7" color="#000" style="margin-right: 5rpx; margin-bottom: 0.5rpx;"></IconFont><text>{{ order_num }}</text>
</nut-col>
</nut-row>
</view>
<view :class="['calendar-select-page', calcBgColor ? 'bg-gray' : '']">
<nut-row gutter="10">
<nut-row gutter="0">
<nut-col span="9">
<view class="check-in-text">入住日期</view>
<view class="check-in-info">2023.12.07 星期四</view>
<view class="check-in-info">{{ plan_in }} {{ getDayOfWeek(plan_in) }}</view>
</nut-col>
<nut-col span="5" class="book-days">
<view class="book-days-text">共1晚</view>
<nut-col span="5" class="book-days" style="padding: 0 15rpx;">
<view class="book-days-text">共{{ getDayDifference(plan_in, plan_out) }}晚</view>
</nut-col>
<nut-col span="9" style="margin-left: 10rpx;">
<nut-col span="9" style="text-align: right;">
<view class="check-in-text">退房日期</view>
<view class="check-in-info">2023.12.08 星期五</view>
<view class="check-in-info">{{ plan_out }} {{ getDayOfWeek(plan_out) }}</view>
</nut-col>
</nut-row>
</view>
......@@ -54,7 +54,7 @@
<!-- 待支付状态下，剩余时间归零 操作隐藏 -->
<nut-col span="18">
<view v-if="showBtn" class="order-control">
<nut-button v-if="pay_show || props.data.status === 'apply'" @tap="cancelOrder('id')" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
<nut-button v-if="pay_show || props.data.status === '5'" @tap="cancelOrder('id')" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
<nut-button v-if="pay_show" @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
<view v-if="delay_pay_show">
<text style="font-size: 23rpx; color: red;">
......@@ -79,7 +79,7 @@
<view class="check-in-text">入住时间</view>
</nut-col>
<nut-col span="12">
<view class="check-in-info">12月7日 14:00后</view>
<view class="check-in-info">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 {{ state.sysInfo.check_in_time }} 后</view>
</nut-col>
</nut-row>
<nut-row>
......@@ -87,7 +87,7 @@
<view class="check-out-text">退房日期</view>
</nut-col>
<nut-col span="12">
<view class="check-out-info">12月8日 12:00前</view>
<view class="check-out-info">{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日 {{ state.sysInfo.check_out_time }} 前</view>
</nut-col>
</nut-row>
<nut-row>
......@@ -95,33 +95,33 @@
<view class="breakfast-text">早餐</view>
</nut-col>
<nut-col span="12">
<view class="breakfast-num">3份</view>
<view class="breakfast-num">{{ capacity }} 份</view>
</nut-col>
</nut-row>
<view class="order-info-detail-tip">
<view>12月7日 20:00后未入住，订单将被取消</view>
<view>{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 {{ state.sysInfo.last_check_time }}后未入住，订单将被取消</view>
</view>
</view>
<view class="order-detail">
<nut-row class="wrapper">
<nut-col span="6">联系人：</nut-col>
<nut-col span="18" class="right">王二虎</nut-col>
<nut-col span="18" class="right">{{ contact_name }}</nut-col>
</nut-row>
<nut-row class="wrapper">
<nut-col span="6">联系电话：</nut-col>
<nut-col span="18" class="right">18996999786</nut-col>
<nut-col span="18" class="right">{{ contact_phone }}</nut-col>
</nut-row>
<nut-row class="wrapper">
<nut-col span="6">备注：</nut-col>
<nut-col span="18" class="right"></nut-col>
<nut-col span="18" class="right">{{ order_remark }}</nut-col>
</nut-row>
<nut-row class="wrapper">
<nut-col span="6">下单时间：</nut-col>
<nut-col span="18" class="right">2023-12-06</nut-col>
<nut-col span="18" class="right">{{ order_created_time }}</nut-col>
</nut-row>
<nut-row class="wrapper">
<nut-col span="6">订单号：</nut-col>
<nut-col span="18" class="right">20231206</nut-col>
<nut-col span="18" class="right">{{ order_id }}</nut-col>
</nut-row>
</view>
</view>
......@@ -129,32 +129,124 @@
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, } from 'vue'
import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
/**
* 获取日期星期几
* @param {String} dateString 日期字符串
*/
const getDayOfWeek = (dateString) => {
var dateParts = dateString.split('-');
var year = parseInt(dateParts[0]);
var month = parseInt(dateParts[1]) - 1; // 月份从 0 开始，所以要减去 1
var day = parseInt(dateParts[2]);
var date = new Date(year, month, day);
var dayOfWeek = date.getDay();
// 定义星期几的名称数组
var days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return days[dayOfWeek];
}
/**
* 计算日期间隔
* @param {*} startDate
* @param {*} endDate
*/
const getDayDifference = (startDate, endDate) => {
var startParts = startDate.split('-');
var startYear = parseInt(startParts[0]);
var startMonth = parseInt(startParts[1]) - 1; // 月份从 0 开始，所以要减去 1
var startDay = parseInt(startParts[2]);
var endParts = endDate.split('-');
var endYear = parseInt(endParts[0]);
var endMonth = parseInt(endParts[1]) - 1; // 月份从 0 开始，所以要减去 1
var endDay = parseInt(endParts[2]);
var startDateObj = new Date(startYear, startMonth, startDay);
var endDateObj = new Date(endYear, endMonth, endDay);
// 跨年处理
if (endYear > startYear) {
endDateObj.setFullYear(endYear);
}
// 跨月处理
if (endMonth > startMonth || (endMonth === startMonth && endDay > startDay)) {
endDateObj.setMonth(endMonth);
}
// 计算两个日期之间的时间差（毫秒数）
var timeDiff = endDateObj.getTime() - startDateObj.getTime();
// 将时间差转换为天数
var dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
return dayDiff;
}
const STATUS_COLOR = {
'cancel': '#CECECE',
'no-pay': '#D5842D',
'apply': '#6A4925',
'enable': '#656565',
'2': '#CECECE',
'3': '#D5842D',
'5': '#6A4925',
'9': '#656565',
}
const STATUS_TEXT = {
'cancel': '已取消',
'apply': '待入住',
'enable': '已入住',
'no-pay': '待支付',
'2': '已取消',
'5': '待入住',
'9': '已入住',
'3': '待支付',
}
const id = ref(''); // 房间id
const cover = ref(''); // 封面图
const title = ref(''); // 标题
const original_total = ref(''); // 原价
const order_price = ref(''); // 优惠价
const capacity = ref(''); // 能住几个人
const num = ref(''); // 可售数量
const room_num = ref(''); // 房间描述 两室
const room_type = ref(''); //
const order_num = ref(''); // 订房数量
const plan_in = ref(''); //
const plan_out = ref(''); //
const contact_name = ref(''); //
const contact_phone = ref(''); //
const order_remark = ref(''); //
const order_created_time = ref(''); //
const order_id = ref(''); //
const booking_info = ref({
days: 1, // 入住天数
check_in: {
year: '',
month: '',
day: '',
day_of_week: ''
},
check_out: {
year: '',
month: '',
day: '',
day_of_week: ''
},
});
// 日历背景色灰色的条件判断
const calcBgColor = computed(() => {
return props.data.status === 'enable' || props.data.status === 'cancel';
return props.data.status === '9' || props.data.status === '2';
});
// 显示操作按钮的条件判断
const showBtn = computed(() => {
return props.data.status === 'apply' || props.data.status === 'no-pay';
return props.data.status === '5' || props.data.status === '3';
});
/**
......@@ -185,6 +277,10 @@ const props = defineProps({
data: {
type: Object,
default: {}
},
sys: {
type: Object,
default: {}
}
});
const emit = defineEmits(["onPay"]);
......@@ -199,9 +295,9 @@ const showOrderInfo = (id) => {
// 控制待支付状态下的显示
const pay_show = computed(() => {
let flag = false;
if (props.data.status === 'no-pay' && remain_time.value) { // 倒计时进行时
if (props.data.status === '3' && remain_time.value) { // 倒计时进行时
flag = true;
} else if (props.data.status === 'no-pay' && !remain_time.value) { // 倒计时结束
} else if (props.data.status === '3' && !remain_time.value) { // 倒计时结束
flag = false;
}
return flag;
......@@ -209,7 +305,7 @@ const pay_show = computed(() => {
// 支付超时显示
const delay_pay_show = computed(() => {
return props.data.status === 'no-pay' && !remain_time.value;
return props.data.status === '3' && !remain_time.value;
})
const cancelOrder = (id) => {
......@@ -248,15 +344,94 @@ const payOrder = (id) => {
let timeId = null;
onMounted(() => {
console.warn(props.data.status)
remain_time.value = props.data.remain_time;
const state = reactive({
sysInfo: {},
});
onMounted(async () => {
id.value = props.data.id;
cover.value = props.data.cover ? props.data.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
title.value = props.data.title;
room_num.value = props.data.room_num;
capacity.value = props.data.capacity;
num.value = props.data.num;
original_total.value = props.data.original_total;
order_price.value = props.data.order_price;
room_type.value = props.data.room_type;
order_num.value = props.data.order_num;
plan_in.value = props.data.plan_in;
plan_out.value = props.data.plan_out;
remain_time.value = props.data.pay_time;
contact_name.value = props.data.contact_name;
contact_phone.value = props.data.contact_phone;
order_remark.value = props.data.order_remark;
order_id.value = props.data.id;
// TODO: 给一个格式化的时间
order_created_time.value = props.data._created_time;
//
let check_in = plan_in.value.split('-');
let check_out = plan_out.value.split('-');
//
booking_info.value.check_in = {
year: check_in[0],
month: check_in[1],
day: check_in[2],
}
booking_info.value.check_out = {
year: check_out[0],
month: check_out[1],
day: check_out[2],
}
// 进入页面后，开始倒计时
timeId = setInterval(() => {
remain_time.value ? remain_time.value -= 1 : 0;
}, 1000);
});
watch(
() => props.data,
(val) => {
if (val) {
id.value = val.id;
cover.value = val.cover ? val.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
title.value = val.title;
room_num.value = val.room_num;
capacity.value = val.capacity;
num.value = val.num;
original_total.value = val.original_total;
order_price.value = val.order_price;
room_type.value = val.room_type;
order_num.value = val.order_num;
plan_in.value = val.plan_in;
plan_out.value = val.plan_out;
remain_time.value = val.pay_time;
contact_name.value = val.contact_name;
contact_phone.value = val.contact_phone;
order_remark.value = val.order_remark;
// TODO: 给一个格式化的时间
order_created_time.value = val._created_time;
order_id.value = val.id;
}
},
{
deep: true,
immediate: true
}
);
watch(
() => props.sys,
(val) => {
if (val) {
state.sysInfo = val;
}
},
{
deep: true,
immediate: true
}
);
onUnmounted(() => {
timeId && clearInterval(timeId);
})
......@@ -355,7 +530,7 @@ page {
}
.order-info-detail {
.order-info {
border-bottom: 1px dashed #979797; padding: 0.5rem;
border-bottom: 1px dashed #979797; padding: 0.5rem; padding-top: 0;
.check-in-text {
color: #7D7C7C; font-size: 0.85rem;
}
......
<!--
* @Date: 2023-12-20 14:11:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-27 17:37:35
* @LastEditTime: 2023-12-27 18:21:06
* @FilePath: /meihuaApp/src/components/payCard.vue
* @Description: 文件描述
-->
......@@ -113,7 +113,7 @@ const goToPay = async () => {
if (current_page === 'pages/my/index') { // 我的页面打开
// 刷新当前页面
Taro.reLaunch({
url: '/pages/my/index?tab_index=1'
url: '/pages/my/index?tab_index=5'
});
}
if (current_page === 'pages/detail/index') { // 订房确认页打开
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-27 14:37:22
* @LastEditTime: 2023-12-27 19:30:49
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 我的页面
-->
......@@ -25,17 +25,13 @@
<nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key" />
</nut-tabs>
<view v-if="showContent" class="book-list">
<scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
<view v-for="(item, index) in orderList" :key="index">
<order-card :key="index" :data="item" @onPay="onPay"></order-card>
<view v-if="index === orderList.length-1" style="height: 2rem;"></view>
<scroll-view v-if="order_list.length" ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
<view v-for="(item, index) in order_list" :key="index">
<order-card :key="index" :data="item" :sys="sys_data" @onPay="onPay"></order-card>
<view v-if="index === order_list.length-1" style="height: 2rem;"></view>
</view>
</scroll-view>
<nut-empty
v-if="orderList.length === 0"
image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
description="暂无数据"
></nut-empty>
<nut-empty v-else image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" description="暂无数据" ></nut-empty>
</view>
</view>
<nav-bar activated="my" />
......@@ -51,65 +47,11 @@ import navBar from '@/components/navBar.vue'
import orderCard from '@/components/orderCard.vue'
import payCard from '@/components/payCard.vue'
import avatar from '@/assets/images/avatar.png'
import { showMyInfoAPI } from '@/api/index'
import { showMyInfoAPI, myOrderAPI, sysParamAPI } from '@/api/index'
import { getCurrentPageParam } from "@/utils/weapp";
const refScrollView = ref(null);
const tab_index = ref('0');
const tabList = ref([{
title: '全部订单',
key: '0',
value: 'all'
}, {
title: '待入住',
key: '1',
value: 'a'
}, {
title: '待支付',
key: '2',
value: 'b'
}, {
title: '已取消',
key: '3',
value: 'c'
}]);
const orderList = ref([
{
id: 1,
name: '阿忆妞妞1',
phone: '138****8888',
price: 1200,
remain_time: 1000,
status: 'no-pay',
},
{
id: 2,
name: '阿忆妞妞2',
phone: '138****8888',
price: 1200,
remain_time: 100,
status: 'apply',
},
{
id: 3,
name: '阿忆妞妞3',
phone: '138****8888',
price: 1200,
remain_time: 100,
status: 'enable',
},
{
id: 4,
name: '阿忆妞妞4',
phone: '138****8888',
price: 1200,
remain_time: 100,
status: 'cancel',
},
])
const show_pay = ref(false);
const payData = ref({});
const userInfo = ref({
......@@ -118,19 +60,6 @@ const userInfo = ref({
phone: ''
});
const tab_status = computed(() => {
switch (tab_index.value) {
case '0':
return 'all'
case '1':
return 'in';
case '2':
return 'pp';
case '3':
return 'ca';
}
});
onMounted(async () => {
// 获取用户信息
const { code, data } = await showMyInfoAPI();
......@@ -141,13 +70,6 @@ onMounted(async () => {
phone: data.wxapp_user_phone
}
}
// 默认勾选栏目
let params = getCurrentPageParam();
if (params.tab_index) {
tab_index.value = params.tab_index;
}
//
console.warn('tab_status', tab_status.value);
});
const onPay = ({ id, remain_time }) => {
......@@ -178,13 +100,6 @@ const goToEdit = async () => {
});
}
}
const onTabClick = ({ title, paneKey, disabled }) => {
tab_index.value = paneKey;
// console.warn(title, paneKey, tabList.value[paneKey]);
// console.warn(tab_index.value);
console.warn(tab_status.value);
}
</script>
<script>
......@@ -199,18 +114,29 @@ export default {
scrollStyle() {
return {
height: this.indexCoverHeight + 'px',
// paddingBottom: 50 + 'px',
};
},
},
async onShow () {
Taro.showLoading({ mask: true, title: "加载中..." })
// 获取活动和轮播信息
const { code, data } = await myOrderAPI({ page: this.page, limit: this.limit, pay_type: this.tab_index });
if (code) {
this.order_list = data;
this.page = this.page + 1;
Taro.hideLoading()
}
// 获取系统参数
const sysData = await sysParamAPI();
if (sysData.code) {
this.sys_data = sysData.data;
}
},
onHide () { // 离开当前页面
this.page = 0;
this.page = 1;
this.flag = true;
},
mounted () {
Taro.showLoading({
title: '加载中',
});
// 设置首页封面高度
const windowHeight = wx.getSystemInfoSync().windowHeight;
// 处理切换显示白屏问题
......@@ -233,42 +159,68 @@ export default {
console.warn('加载完成');
}
});
// 默认勾选栏目
let params = getCurrentPageParam();
if (params.tab_index) {
this.tab_index = params.tab_index;
}
},
data() {
return {
showContent: false,
indexCoverHeight: 0,
order_list: [],
sys_data: {},
flag: true,
page: 0,
page: 1,
limit: 10,
tab_index: 'all',
// 房间状态（9=已入住，2=已取消，3=未支付，5=已支付）
tabList: ([{
title: '全部订单',
key: 'all',
}, {
title: '待入住',
key: '5',
}, {
title: '待支付',
key: '3',
}, {
title: '已取消',
key: '2',
}])
};
},
methods: {
onTabClick ({ title, paneKey, disabled }) {
this.tab_index = paneKey;
this.order_list = [];
this.page = 1;
this.flag = true;
this.getList();
},
onScrollToLower () {
// if(!this.flag){
// return
// }
// this.flag = false;
// this.getList();
console.warn('onScrollToLower');
if(!this.flag){
return
}
this.flag = false;
this.getList();
},
async getList () {
// // 获取推荐活动列表
// const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
// if (code) {
// if (data.activity_list.length) {
// // 绑定服务器时间，判断状态
// data.activity_list.forEach(item => {
// item.server_time = data.server_time;
// });
// this.activity_list = this.activity_list.concat(data.activity_list);
// this.page = this.page + 1;
// this.flag = true;
// } else {
// Toast('没有数据')
// }
// }
// }
// 获取列表
const { code, data } = await myOrderAPI({ page: this.page, limit: this.limit, pay_type: this.tab_index });
if (code) {
if (data.length) {
this.order_list = this.order_list.concat(data);
this.page = this.page + 1;
this.flag = true;
} else {
Taro.showToast({
title: '没有更多了',
icon: 'none'
});
}
}
},
}
};
......