Showing
3 changed files
with
228 additions
and
143 deletions
| ... | @@ -3,8 +3,10 @@ | ... | @@ -3,8 +3,10 @@ |
| 3 | <view class="order-card-header"> | 3 | <view class="order-card-header"> |
| 4 | <nut-row> | 4 | <nut-row> |
| 5 | <nut-col span="16"> | 5 | <nut-col span="16"> |
| 6 | - <view style="font-weight: bold; font-size: 34rpx;">{{ title }}</view> | 6 | + <view style="font-weight: bold; font-size: 34rpx">{{ title }}</view> |
| 7 | - <view style="color: #7D7C7C; font-size: 24rpx;">{{ room_num }}室 宜住{{ capacity }}人</view> | 7 | + <view style="color: #7d7c7c; font-size: 24rpx" |
| 8 | + >{{ room_num }}室 宜住{{ capacity }}人</view | ||
| 9 | + > | ||
| 8 | </nut-col> | 10 | </nut-col> |
| 9 | <nut-col span="8"> | 11 | <nut-col span="8"> |
| 10 | <image mode="aspectFill" :src="cover" /> | 12 | <image mode="aspectFill" :src="cover" /> |
| ... | @@ -12,54 +14,101 @@ | ... | @@ -12,54 +14,101 @@ |
| 12 | </nut-row> | 14 | </nut-row> |
| 13 | </view> | 15 | </view> |
| 14 | <view class="order-card-status"> | 16 | <view class="order-card-status"> |
| 15 | - <nut-tag :color="STATUS_COLOR[props.data.status]">{{ STATUS_TEXT[props.data.status] }}</nut-tag> | 17 | + <nut-tag :color="STATUS_COLOR[props.data.status]">{{ |
| 18 | + STATUS_TEXT[props.data.status] | ||
| 19 | + }}</nut-tag> | ||
| 16 | </view> | 20 | </view> |
| 17 | <view class="order-card-price"> | 21 | <view class="order-card-price"> |
| 18 | <nut-row> | 22 | <nut-row> |
| 19 | <nut-col span="18"> | 23 | <nut-col span="18"> |
| 20 | <view class="order-card-price-text"> | 24 | <view class="order-card-price-text"> |
| 21 | <view class="left"><nut-price :price="order_price" size="normal" /></view> | 25 | <view class="left"><nut-price :price="order_price" size="normal" /></view> |
| 22 | - <view class="right" style="margin-top: 10rpx;"><nut-price :price="original_total" size="small" strike-through style="color: #7D7C7C;" /></view> | 26 | + <view class="right" style="margin-top: 10rpx" |
| 27 | + ><nut-price | ||
| 28 | + :price="original_total" | ||
| 29 | + size="small" | ||
| 30 | + strike-through | ||
| 31 | + style="color: #7d7c7c" | ||
| 32 | + /></view> | ||
| 23 | </view> | 33 | </view> |
| 24 | </nut-col> | 34 | </nut-col> |
| 25 | <nut-col span="6" class="order-card-price-num"> | 35 | <nut-col span="6" class="order-card-price-num"> |
| 26 | - <IconFont name="close" size="7" color="#000" style="margin-right: 5rpx; margin-bottom: 0.5rpx;"></IconFont><text>{{ order_num }}</text> | 36 | + <IconFont |
| 37 | + name="close" | ||
| 38 | + size="7" | ||
| 39 | + color="#000" | ||
| 40 | + style="margin-right: 5rpx; margin-bottom: 0.5rpx" | ||
| 41 | + ></IconFont | ||
| 42 | + ><text>{{ order_num }}</text> | ||
| 27 | </nut-col> | 43 | </nut-col> |
| 28 | </nut-row> | 44 | </nut-row> |
| 29 | </view> | 45 | </view> |
| 30 | <view :class="['calendar-select-page', calcBgColor ? 'bg-gray' : '']"> | 46 | <view :class="['calendar-select-page', calcBgColor ? 'bg-gray' : '']"> |
| 31 | - <nut-row gutter="0"> | 47 | + <!-- <nut-row gutter="0"> |
| 32 | <nut-col span="9"> | 48 | <nut-col span="9"> |
| 33 | <view class="check-in-text">入住日期</view> | 49 | <view class="check-in-text">入住日期</view> |
| 34 | <view class="check-in-info">{{ plan_in }} {{ getDayOfWeek(plan_in) }}</view> | 50 | <view class="check-in-info">{{ plan_in }} {{ getDayOfWeek(plan_in) }}</view> |
| 35 | </nut-col> | 51 | </nut-col> |
| 36 | - <nut-col span="5" class="book-days" style="padding: 0 15rpx;"> | 52 | + <nut-col span="5" class="book-days" style="padding: 0 15rpx"> |
| 37 | - <view class="book-days-text">共{{ getDayDifference(plan_in, plan_out) }}晚</view> | 53 | + <view class="book-days-text" |
| 54 | + >共{{ getDayDifference(plan_in, plan_out) }}晚</view | ||
| 55 | + > | ||
| 38 | </nut-col> | 56 | </nut-col> |
| 39 | - <nut-col span="9" style="text-align: right;"> | 57 | + <nut-col span="9" style="text-align: right"> |
| 40 | <view class="check-in-text">退房日期</view> | 58 | <view class="check-in-text">退房日期</view> |
| 41 | <view class="check-in-info">{{ plan_out }} {{ getDayOfWeek(plan_out) }}</view> | 59 | <view class="check-in-info">{{ plan_out }} {{ getDayOfWeek(plan_out) }}</view> |
| 42 | </nut-col> | 60 | </nut-col> |
| 43 | - </nut-row> | 61 | + </nut-row> --> |
| 62 | + <view style="display: flex;"> | ||
| 63 | + <view style="flex: 2;"> | ||
| 64 | + <view class="check-in-text">入住日期</view> | ||
| 65 | + <view class="check-in-info" style="margin-top: 5rpx;">{{ plan_in }} {{ getDayOfWeek(plan_in) }}</view> | ||
| 66 | + </view> | ||
| 67 | + <view style="flex: 1;" class="book-days"> | ||
| 68 | + <view class="book-days-text" | ||
| 69 | + >共{{ getDayDifference(plan_in, plan_out) }}晚</view | ||
| 70 | + > | ||
| 71 | + </view> | ||
| 72 | + <view style="flex: 2; text-align: right;"> | ||
| 73 | + <view class="check-in-text">退房日期</view> | ||
| 74 | + <view class="check-in-info" style="margin-top: 5rpx;">{{ plan_out }} {{ getDayOfWeek(plan_out) }}</view> | ||
| 75 | + </view> | ||
| 76 | + </view> | ||
| 44 | </view> | 77 | </view> |
| 45 | <view class="order-card-control"> | 78 | <view class="order-card-control"> |
| 46 | <nut-row> | 79 | <nut-row> |
| 47 | <nut-col span="6"> | 80 | <nut-col span="6"> |
| 48 | <view class="order-info" @tap="showOrderInfo(order_id)"> | 81 | <view class="order-info" @tap="showOrderInfo(order_id)"> |
| 49 | <text>入住信息</text> | 82 | <text>入住信息</text> |
| 50 | - <IconFont v-if="show_info" name="rect-up" size="12" color="#7D7C7C"></IconFont> | 83 | + <IconFont |
| 84 | + v-if="show_info" | ||
| 85 | + name="rect-up" | ||
| 86 | + size="12" | ||
| 87 | + color="#7D7C7C" | ||
| 88 | + ></IconFont> | ||
| 51 | <IconFont v-else name="rect-down" size="12" color="#7D7C7C"></IconFont> | 89 | <IconFont v-else name="rect-down" size="12" color="#7D7C7C"></IconFont> |
| 52 | </view> | 90 | </view> |
| 53 | </nut-col> | 91 | </nut-col> |
| 54 | <!-- 待支付状态下,剩余时间归零 操作隐藏 --> | 92 | <!-- 待支付状态下,剩余时间归零 操作隐藏 --> |
| 55 | <nut-col span="18"> | 93 | <nut-col span="18"> |
| 56 | <view v-if="showBtn" class="order-control"> | 94 | <view v-if="showBtn" class="order-control"> |
| 57 | - <nut-button v-if="pay_show || props.data.status === 5" @tap="cancelOrder(order_id)" plain color="#6A4925" size="small">取消订单</nut-button> | 95 | + <nut-button |
| 58 | - <nut-button v-if="pay_show" @tap="payOrder(order_id)" color="#6A4925" size="small">立即支付</nut-button> | 96 | + v-if="pay_show || props.data.status === 5" |
| 97 | + @tap="cancelOrder(order_id)" | ||
| 98 | + plain | ||
| 99 | + color="#6A4925" | ||
| 100 | + size="small" | ||
| 101 | + >取消订单</nut-button | ||
| 102 | + > | ||
| 103 | + <nut-button | ||
| 104 | + v-if="pay_show" | ||
| 105 | + @tap="payOrder(order_id)" | ||
| 106 | + color="#6A4925" | ||
| 107 | + size="small" | ||
| 108 | + >立即支付</nut-button | ||
| 109 | + > | ||
| 59 | <view v-if="delay_pay_show"> | 110 | <view v-if="delay_pay_show"> |
| 60 | - <text style="font-size: 23rpx; color: red;"> | 111 | + <text style="font-size: 23rpx; color: red"> 支付超时,请重新下单! </text> |
| 61 | - 支付超时,请重新下单! | ||
| 62 | - </text> | ||
| 63 | </view> | 112 | </view> |
| 64 | </view> | 113 | </view> |
| 65 | </nut-col> | 114 | </nut-col> |
| ... | @@ -68,7 +117,7 @@ | ... | @@ -68,7 +117,7 @@ |
| 68 | <!-- 待支付状态下,剩余时间归零 显示隐藏 --> | 117 | <!-- 待支付状态下,剩余时间归零 显示隐藏 --> |
| 69 | <view v-if="pay_show" class="order-remain-time"> | 118 | <view v-if="pay_show" class="order-remain-time"> |
| 70 | <text>支付剩余时间</text> | 119 | <text>支付剩余时间</text> |
| 71 | - <text style="font-size: 23rpx; color: red;"> | 120 | + <text style="font-size: 23rpx; color: red"> |
| 72 | {{ formatTime(remain_time) }} | 121 | {{ formatTime(remain_time) }} |
| 73 | </text> | 122 | </text> |
| 74 | </view> | 123 | </view> |
| ... | @@ -79,7 +128,10 @@ | ... | @@ -79,7 +128,10 @@ |
| 79 | <view class="check-in-text">入住时间</view> | 128 | <view class="check-in-text">入住时间</view> |
| 80 | </nut-col> | 129 | </nut-col> |
| 81 | <nut-col span="12"> | 130 | <nut-col span="12"> |
| 82 | - <view class="check-in-info">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 {{ state.sysInfo.check_in_time }} 后</view> | 131 | + <view class="check-in-info" |
| 132 | + >{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 | ||
| 133 | + {{ state.sysInfo.check_in_time }} 后</view | ||
| 134 | + > | ||
| 83 | </nut-col> | 135 | </nut-col> |
| 84 | </nut-row> | 136 | </nut-row> |
| 85 | <nut-row> | 137 | <nut-row> |
| ... | @@ -87,7 +139,10 @@ | ... | @@ -87,7 +139,10 @@ |
| 87 | <view class="check-out-text">退房日期</view> | 139 | <view class="check-out-text">退房日期</view> |
| 88 | </nut-col> | 140 | </nut-col> |
| 89 | <nut-col span="12"> | 141 | <nut-col span="12"> |
| 90 | - <view class="check-out-info">{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日 {{ state.sysInfo.check_out_time }} 前</view> | 142 | + <view class="check-out-info" |
| 143 | + >{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日 | ||
| 144 | + {{ state.sysInfo.check_out_time }} 前</view | ||
| 145 | + > | ||
| 91 | </nut-col> | 146 | </nut-col> |
| 92 | </nut-row> | 147 | </nut-row> |
| 93 | <nut-row> | 148 | <nut-row> |
| ... | @@ -99,7 +154,10 @@ | ... | @@ -99,7 +154,10 @@ |
| 99 | </nut-col> | 154 | </nut-col> |
| 100 | </nut-row> | 155 | </nut-row> |
| 101 | <view class="order-info-detail-tip"> | 156 | <view class="order-info-detail-tip"> |
| 102 | - <view>{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 {{ state.sysInfo.last_check_time }}后未入住,订单将被取消</view> | 157 | + <view |
| 158 | + >{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 | ||
| 159 | + {{ state.sysInfo.last_check_time }}后未入住,订单将被取消</view | ||
| 160 | + > | ||
| 103 | </view> | 161 | </view> |
| 104 | </view> | 162 | </view> |
| 105 | <view class="order-detail"> | 163 | <view class="order-detail"> |
| ... | @@ -129,10 +187,10 @@ | ... | @@ -129,10 +187,10 @@ |
| 129 | </template> | 187 | </template> |
| 130 | 188 | ||
| 131 | <script setup> | 189 | <script setup> |
| 132 | -import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue' | 190 | +import { ref, reactive, onMounted, onUnmounted, computed, watch } from "vue"; |
| 133 | -import Taro from '@tarojs/taro' | 191 | +import Taro from "@tarojs/taro"; |
| 134 | -import { IconFont } from '@nutui/icons-vue-taro'; | 192 | +import { IconFont } from "@nutui/icons-vue-taro"; |
| 135 | -import { orderCancelAPI } from '@/api/index' | 193 | +import { orderCancelAPI } from "@/api/index"; |
| 136 | 194 | ||
| 137 | /** | 195 | /** |
| 138 | * 房间状态(9=已入住,2=已取消,3=未支付,5=已支付) | 196 | * 房间状态(9=已入住,2=已取消,3=未支付,5=已支付) |
| ... | @@ -144,7 +202,7 @@ import { orderCancelAPI } from '@/api/index' | ... | @@ -144,7 +202,7 @@ import { orderCancelAPI } from '@/api/index' |
| 144 | * @param {String} dateString 日期字符串 | 202 | * @param {String} dateString 日期字符串 |
| 145 | */ | 203 | */ |
| 146 | const getDayOfWeek = (dateString) => { | 204 | const getDayOfWeek = (dateString) => { |
| 147 | - var dateParts = dateString.split('-'); | 205 | + var dateParts = dateString.split("-"); |
| 148 | var year = parseInt(dateParts[0]); | 206 | var year = parseInt(dateParts[0]); |
| 149 | var month = parseInt(dateParts[1]) - 1; // 月份从 0 开始,所以要减去 1 | 207 | var month = parseInt(dateParts[1]) - 1; // 月份从 0 开始,所以要减去 1 |
| 150 | var day = parseInt(dateParts[2]); | 208 | var day = parseInt(dateParts[2]); |
| ... | @@ -153,10 +211,10 @@ const getDayOfWeek = (dateString) => { | ... | @@ -153,10 +211,10 @@ const getDayOfWeek = (dateString) => { |
| 153 | var dayOfWeek = date.getDay(); | 211 | var dayOfWeek = date.getDay(); |
| 154 | 212 | ||
| 155 | // 定义星期几的名称数组 | 213 | // 定义星期几的名称数组 |
| 156 | - var days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; | 214 | + var days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; |
| 157 | 215 | ||
| 158 | return days[dayOfWeek]; | 216 | return days[dayOfWeek]; |
| 159 | -} | 217 | +}; |
| 160 | 218 | ||
| 161 | /** | 219 | /** |
| 162 | * 计算日期间隔 | 220 | * 计算日期间隔 |
| ... | @@ -164,12 +222,12 @@ const getDayOfWeek = (dateString) => { | ... | @@ -164,12 +222,12 @@ const getDayOfWeek = (dateString) => { |
| 164 | * @param {*} endDate | 222 | * @param {*} endDate |
| 165 | */ | 223 | */ |
| 166 | const getDayDifference = (startDate, endDate) => { | 224 | const getDayDifference = (startDate, endDate) => { |
| 167 | - var startParts = startDate.split('-'); | 225 | + var startParts = startDate.split("-"); |
| 168 | var startYear = parseInt(startParts[0]); | 226 | var startYear = parseInt(startParts[0]); |
| 169 | var startMonth = parseInt(startParts[1]) - 1; // 月份从 0 开始,所以要减去 1 | 227 | var startMonth = parseInt(startParts[1]) - 1; // 月份从 0 开始,所以要减去 1 |
| 170 | var startDay = parseInt(startParts[2]); | 228 | var startDay = parseInt(startParts[2]); |
| 171 | 229 | ||
| 172 | - var endParts = endDate.split('-'); | 230 | + var endParts = endDate.split("-"); |
| 173 | var endYear = parseInt(endParts[0]); | 231 | var endYear = parseInt(endParts[0]); |
| 174 | var endMonth = parseInt(endParts[1]) - 1; // 月份从 0 开始,所以要减去 1 | 232 | var endMonth = parseInt(endParts[1]) - 1; // 月份从 0 开始,所以要减去 1 |
| 175 | var endDay = parseInt(endParts[2]); | 233 | var endDay = parseInt(endParts[2]); |
| ... | @@ -194,53 +252,53 @@ const getDayDifference = (startDate, endDate) => { | ... | @@ -194,53 +252,53 @@ const getDayDifference = (startDate, endDate) => { |
| 194 | var dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24)); | 252 | var dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24)); |
| 195 | 253 | ||
| 196 | return dayDiff; | 254 | return dayDiff; |
| 197 | -} | 255 | +}; |
| 198 | 256 | ||
| 199 | const STATUS_COLOR = { | 257 | const STATUS_COLOR = { |
| 200 | - 2: '#CECECE', | 258 | + 2: "#CECECE", |
| 201 | - 3: '#D5842D', | 259 | + 3: "#D5842D", |
| 202 | - 5: '#6A4925', | 260 | + 5: "#6A4925", |
| 203 | - 9: '#656565', | 261 | + 9: "#656565", |
| 204 | -} | 262 | +}; |
| 205 | 263 | ||
| 206 | const STATUS_TEXT = { | 264 | const STATUS_TEXT = { |
| 207 | - 2: '已取消', | 265 | + 2: "已取消", |
| 208 | - 5: '待入住', | 266 | + 5: "待入住", |
| 209 | - 9: '已入住', | 267 | + 9: "已入住", |
| 210 | - 3: '待支付', | 268 | + 3: "待支付", |
| 211 | -} | 269 | +}; |
| 212 | - | 270 | + |
| 213 | -const id = ref(''); // 房间id | 271 | +const id = ref(""); // 房间id |
| 214 | -const cover = ref(''); // 封面图 | 272 | +const cover = ref(""); // 封面图 |
| 215 | -const title = ref(''); // 标题 | 273 | +const title = ref(""); // 标题 |
| 216 | -const original_total = ref(''); // 原价 | 274 | +const original_total = ref(""); // 原价 |
| 217 | -const order_price = ref(''); // 优惠价 | 275 | +const order_price = ref(""); // 优惠价 |
| 218 | -const capacity = ref(''); // 能住几个人 | 276 | +const capacity = ref(""); // 能住几个人 |
| 219 | -const num = ref(''); // 可售数量 | 277 | +const num = ref(""); // 可售数量 |
| 220 | -const room_num = ref(''); // 房间描述 两室 | 278 | +const room_num = ref(""); // 房间描述 两室 |
| 221 | -const room_type = ref(''); // | 279 | +const room_type = ref(""); // |
| 222 | -const order_num = ref(''); // 订房数量 | 280 | +const order_num = ref(""); // 订房数量 |
| 223 | -const plan_in = ref(''); // | 281 | +const plan_in = ref(""); // |
| 224 | -const plan_out = ref(''); // | 282 | +const plan_out = ref(""); // |
| 225 | -const contact_name = ref(''); // | 283 | +const contact_name = ref(""); // |
| 226 | -const contact_phone = ref(''); // | 284 | +const contact_phone = ref(""); // |
| 227 | -const order_remark = ref(''); // | 285 | +const order_remark = ref(""); // |
| 228 | -const order_created_time = ref(''); // | 286 | +const order_created_time = ref(""); // |
| 229 | -const order_id = ref(''); // | 287 | +const order_id = ref(""); // |
| 230 | 288 | ||
| 231 | const booking_info = ref({ | 289 | const booking_info = ref({ |
| 232 | days: 1, // 入住天数 | 290 | days: 1, // 入住天数 |
| 233 | check_in: { | 291 | check_in: { |
| 234 | - year: '', | 292 | + year: "", |
| 235 | - month: '', | 293 | + month: "", |
| 236 | - day: '', | 294 | + day: "", |
| 237 | - day_of_week: '' | 295 | + day_of_week: "", |
| 238 | }, | 296 | }, |
| 239 | check_out: { | 297 | check_out: { |
| 240 | - year: '', | 298 | + year: "", |
| 241 | - month: '', | 299 | + month: "", |
| 242 | - day: '', | 300 | + day: "", |
| 243 | - day_of_week: '' | 301 | + day_of_week: "", |
| 244 | }, | 302 | }, |
| 245 | }); | 303 | }); |
| 246 | 304 | ||
| ... | @@ -281,12 +339,12 @@ function formatTime(seconds) { | ... | @@ -281,12 +339,12 @@ function formatTime(seconds) { |
| 281 | const props = defineProps({ | 339 | const props = defineProps({ |
| 282 | data: { | 340 | data: { |
| 283 | type: Object, | 341 | type: Object, |
| 284 | - default: {} | 342 | + default: {}, |
| 285 | }, | 343 | }, |
| 286 | sys: { | 344 | sys: { |
| 287 | type: Object, | 345 | type: Object, |
| 288 | - default: {} | 346 | + default: {}, |
| 289 | - } | 347 | + }, |
| 290 | }); | 348 | }); |
| 291 | const emit = defineEmits(["onPay"]); | 349 | const emit = defineEmits(["onPay"]); |
| 292 | 350 | ||
| ... | @@ -295,14 +353,16 @@ const remain_time = ref(0); // 剩余时间秒数 | ... | @@ -295,14 +353,16 @@ const remain_time = ref(0); // 剩余时间秒数 |
| 295 | const show_info = ref(false); | 353 | const show_info = ref(false); |
| 296 | const showOrderInfo = (id) => { | 354 | const showOrderInfo = (id) => { |
| 297 | show_info.value = !show_info.value; | 355 | show_info.value = !show_info.value; |
| 298 | -} | 356 | +}; |
| 299 | 357 | ||
| 300 | // 控制待支付状态下的显示 | 358 | // 控制待支付状态下的显示 |
| 301 | const pay_show = computed(() => { | 359 | const pay_show = computed(() => { |
| 302 | let flag = false; | 360 | let flag = false; |
| 303 | - if (props.data.status === 3 && remain_time.value) { // 倒计时进行时 | 361 | + if (props.data.status === 3 && remain_time.value) { |
| 362 | + // 倒计时进行时 | ||
| 304 | flag = true; | 363 | flag = true; |
| 305 | - } else if (props.data.status === 3 && !remain_time.value) { // 倒计时结束 | 364 | + } else if (props.data.status === 3 && !remain_time.value) { |
| 365 | + // 倒计时结束 | ||
| 306 | flag = false; | 366 | flag = false; |
| 307 | } | 367 | } |
| 308 | return flag; | 368 | return flag; |
| ... | @@ -311,43 +371,37 @@ const pay_show = computed(() => { | ... | @@ -311,43 +371,37 @@ const pay_show = computed(() => { |
| 311 | // 支付超时显示 | 371 | // 支付超时显示 |
| 312 | const delay_pay_show = computed(() => { | 372 | const delay_pay_show = computed(() => { |
| 313 | return props.data.status === 3 && !remain_time.value; | 373 | return props.data.status === 3 && !remain_time.value; |
| 314 | -}) | 374 | +}); |
| 315 | 375 | ||
| 316 | const cancelOrder = (id) => { | 376 | const cancelOrder = (id) => { |
| 317 | Taro.showModal({ | 377 | Taro.showModal({ |
| 318 | - title: '温馨提示', | 378 | + title: "温馨提示", |
| 319 | - content: '是否确认取消订单?', | 379 | + content: "是否确认取消订单?", |
| 320 | success: async (res) => { | 380 | success: async (res) => { |
| 321 | if (res.confirm) { | 381 | if (res.confirm) { |
| 322 | if (id) { | 382 | if (id) { |
| 323 | // 取消订单 | 383 | // 取消订单 |
| 324 | - const { code, data } = await orderCancelAPI({id}); | 384 | + const { code, data } = await orderCancelAPI({ id }); |
| 325 | if (code) { | 385 | if (code) { |
| 326 | Taro.showToast({ | 386 | Taro.showToast({ |
| 327 | - title: '取消成功', | 387 | + title: "取消成功", |
| 328 | - icon:'success', | 388 | + icon: "success", |
| 329 | - duration: 2000 | 389 | + duration: 2000, |
| 330 | }); | 390 | }); |
| 331 | props.data.status = 2; // 取消订单状态置为已取消 | 391 | props.data.status = 2; // 取消订单状态置为已取消 |
| 332 | } | 392 | } |
| 333 | } | 393 | } |
| 334 | } else if (res.cancel) { | 394 | } else if (res.cancel) { |
| 335 | - console.log('用户点击取消') | 395 | + console.log("用户点击取消"); |
| 336 | } | 396 | } |
| 337 | - } | 397 | + }, |
| 338 | - }) | 398 | + }); |
| 339 | -} | 399 | +}; |
| 340 | 400 | ||
| 341 | const payOrder = (id) => { | 401 | const payOrder = (id) => { |
| 342 | - // TODO: 把剩余支付时间发到支付组件上显示 | 402 | + // 订单的支付信息 |
| 343 | - emit("onPay", { id, remain_time: remain_time.value }); | 403 | + emit("onPay", { id, remain_time: remain_time.value, price: order_price.value }); |
| 344 | - // visible.value = !visible.value; | 404 | +}; |
| 345 | - // Taro.showToast({ | ||
| 346 | - // title: '支付已超时', | ||
| 347 | - // icon: 'error', | ||
| 348 | - // duration: 2000 | ||
| 349 | - // }); | ||
| 350 | -} | ||
| 351 | 405 | ||
| 352 | let timeId = null; | 406 | let timeId = null; |
| 353 | 407 | ||
| ... | @@ -357,7 +411,9 @@ const state = reactive({ | ... | @@ -357,7 +411,9 @@ const state = reactive({ |
| 357 | 411 | ||
| 358 | onMounted(async () => { | 412 | onMounted(async () => { |
| 359 | id.value = props.data.id; | 413 | id.value = props.data.id; |
| 360 | - cover.value = props.data.cover ? props.data.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'; | 414 | + cover.value = props.data.cover |
| 415 | + ? props.data.cover | ||
| 416 | + : "https://cdn.ipadbiz.cn/meihua/img1@2x.png"; | ||
| 361 | title.value = props.data.title; | 417 | title.value = props.data.title; |
| 362 | room_num.value = props.data.room_num; | 418 | room_num.value = props.data.room_num; |
| 363 | capacity.value = props.data.capacity; | 419 | capacity.value = props.data.capacity; |
| ... | @@ -375,22 +431,22 @@ onMounted(async () => { | ... | @@ -375,22 +431,22 @@ onMounted(async () => { |
| 375 | order_id.value = props.data.id; | 431 | order_id.value = props.data.id; |
| 376 | order_created_time.value = props.data._created_time; | 432 | order_created_time.value = props.data._created_time; |
| 377 | // | 433 | // |
| 378 | - let check_in = plan_in.value.split('-'); | 434 | + let check_in = plan_in.value.split("-"); |
| 379 | - let check_out = plan_out.value.split('-'); | 435 | + let check_out = plan_out.value.split("-"); |
| 380 | // | 436 | // |
| 381 | booking_info.value.check_in = { | 437 | booking_info.value.check_in = { |
| 382 | year: check_in[0], | 438 | year: check_in[0], |
| 383 | month: check_in[1], | 439 | month: check_in[1], |
| 384 | day: check_in[2], | 440 | day: check_in[2], |
| 385 | - } | 441 | + }; |
| 386 | booking_info.value.check_out = { | 442 | booking_info.value.check_out = { |
| 387 | year: check_out[0], | 443 | year: check_out[0], |
| 388 | month: check_out[1], | 444 | month: check_out[1], |
| 389 | day: check_out[2], | 445 | day: check_out[2], |
| 390 | - } | 446 | + }; |
| 391 | // 进入页面后,开始倒计时 | 447 | // 进入页面后,开始倒计时 |
| 392 | timeId = setInterval(() => { | 448 | timeId = setInterval(() => { |
| 393 | - remain_time.value ? remain_time.value -= 1 : 0; | 449 | + remain_time.value ? (remain_time.value -= 1) : 0; |
| 394 | }, 1000); | 450 | }, 1000); |
| 395 | }); | 451 | }); |
| 396 | 452 | ||
| ... | @@ -399,7 +455,7 @@ watch( | ... | @@ -399,7 +455,7 @@ watch( |
| 399 | (val) => { | 455 | (val) => { |
| 400 | if (val) { | 456 | if (val) { |
| 401 | id.value = val.id; | 457 | id.value = val.id; |
| 402 | - cover.value = val.cover ? val.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'; | 458 | + cover.value = val.cover ? val.cover : "https://cdn.ipadbiz.cn/meihua/img1@2x.png"; |
| 403 | title.value = val.title; | 459 | title.value = val.title; |
| 404 | room_num.value = val.room_num; | 460 | room_num.value = val.room_num; |
| 405 | capacity.value = val.capacity; | 461 | capacity.value = val.capacity; |
| ... | @@ -420,7 +476,7 @@ watch( | ... | @@ -420,7 +476,7 @@ watch( |
| 420 | }, | 476 | }, |
| 421 | { | 477 | { |
| 422 | deep: true, | 478 | deep: true, |
| 423 | - immediate: true | 479 | + immediate: true, |
| 424 | } | 480 | } |
| 425 | ); | 481 | ); |
| 426 | 482 | ||
| ... | @@ -433,13 +489,13 @@ watch( | ... | @@ -433,13 +489,13 @@ watch( |
| 433 | }, | 489 | }, |
| 434 | { | 490 | { |
| 435 | deep: true, | 491 | deep: true, |
| 436 | - immediate: true | 492 | + immediate: true, |
| 437 | } | 493 | } |
| 438 | ); | 494 | ); |
| 439 | 495 | ||
| 440 | onUnmounted(() => { | 496 | onUnmounted(() => { |
| 441 | timeId && clearInterval(timeId); | 497 | timeId && clearInterval(timeId); |
| 442 | -}) | 498 | +}); |
| 443 | </script> | 499 | </script> |
| 444 | 500 | ||
| 445 | <style lang="less"> | 501 | <style lang="less"> |
| ... | @@ -453,14 +509,16 @@ page { | ... | @@ -453,14 +509,16 @@ page { |
| 453 | margin-top: 0.5rem; | 509 | margin-top: 0.5rem; |
| 454 | // padding: 0.5rem 0; | 510 | // padding: 0.5rem 0; |
| 455 | background-color: white; | 511 | background-color: white; |
| 456 | - box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1); | 512 | + box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); |
| 457 | border: 1px solid #f9f9f9; | 513 | border: 1px solid #f9f9f9; |
| 458 | border-radius: 0.5rem; | 514 | border-radius: 0.5rem; |
| 459 | overflow: hidden; | 515 | overflow: hidden; |
| 460 | .order-card-header { | 516 | .order-card-header { |
| 461 | padding: 0.5rem; | 517 | padding: 0.5rem; |
| 462 | image { | 518 | image { |
| 463 | - width: 100%; height: 3rem; border-radius: 10rpx; | 519 | + width: 100%; |
| 520 | + height: 3rem; | ||
| 521 | + border-radius: 10rpx; | ||
| 464 | } | 522 | } |
| 465 | } | 523 | } |
| 466 | .order-card-status { | 524 | .order-card-status { |
| ... | @@ -473,12 +531,12 @@ page { | ... | @@ -473,12 +531,12 @@ page { |
| 473 | display: flex; | 531 | display: flex; |
| 474 | align-items: center; | 532 | align-items: center; |
| 475 | .left { | 533 | .left { |
| 476 | - color: #EB2E2E; | 534 | + color: #eb2e2e; |
| 477 | font-size: 1.3rem; | 535 | font-size: 1.3rem; |
| 478 | font-weight: bold; | 536 | font-weight: bold; |
| 479 | } | 537 | } |
| 480 | .right { | 538 | .right { |
| 481 | - color: #7D7C7C; | 539 | + color: #7d7c7c; |
| 482 | text-decoration: line-through; | 540 | text-decoration: line-through; |
| 483 | font-size: 0.85rem; | 541 | font-size: 0.85rem; |
| 484 | margin-left: 5px; | 542 | margin-left: 5px; |
| ... | @@ -493,23 +551,33 @@ page { | ... | @@ -493,23 +551,33 @@ page { |
| 493 | } | 551 | } |
| 494 | .calendar-select-page { | 552 | .calendar-select-page { |
| 495 | margin: 0 0.5rem; | 553 | margin: 0 0.5rem; |
| 496 | - background-color: #F6ECE1; | 554 | + background-color: #f6ece1; |
| 497 | border-radius: 10rpx; | 555 | border-radius: 10rpx; |
| 498 | padding: 1rem 0; | 556 | padding: 1rem 0; |
| 499 | padding-left: 0.5rem; | 557 | padding-left: 0.5rem; |
| 558 | + padding-right: 0.5rem; | ||
| 500 | &.bg-gray { | 559 | &.bg-gray { |
| 501 | - background-color: #F0F0F0; | 560 | + background-color: #f0f0f0; |
| 502 | } | 561 | } |
| 503 | .check-in-text { | 562 | .check-in-text { |
| 504 | - color: #7D7C7C; font-size: 0.8rem; | 563 | + color: #7d7c7c; |
| 564 | + font-size: 3.5vw;; | ||
| 505 | } | 565 | } |
| 506 | - .check-in-info{ | 566 | + .check-in-info { |
| 507 | - color: #7D7C7C; font-size: 0.85rem; font-weight: bold; | 567 | + color: #7d7c7c; |
| 568 | + font-size: 3.5vw; | ||
| 569 | + font-weight: bold; | ||
| 508 | } | 570 | } |
| 509 | .book-days { | 571 | .book-days { |
| 510 | padding: 0 10rpx; | 572 | padding: 0 10rpx; |
| 511 | .book-days-text { | 573 | .book-days-text { |
| 512 | - color: #7D7C7C; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem; | 574 | + color: #7d7c7c; |
| 575 | + margin-top: 15%; | ||
| 576 | + font-size: 0.8rem; | ||
| 577 | + text-align: center; | ||
| 578 | + background-color: #fff; | ||
| 579 | + padding: 0.25rem 0; | ||
| 580 | + border-radius: 0.5rem; | ||
| 513 | } | 581 | } |
| 514 | } | 582 | } |
| 515 | } | 583 | } |
| ... | @@ -517,13 +585,20 @@ page { | ... | @@ -517,13 +585,20 @@ page { |
| 517 | padding: 0.5rem; | 585 | padding: 0.5rem; |
| 518 | padding-bottom: 0; | 586 | padding-bottom: 0; |
| 519 | .order-info { | 587 | .order-info { |
| 520 | - display: flex; align-items: center; margin: 20rpx 0;height: 60rpx; | 588 | + display: flex; |
| 589 | + align-items: center; | ||
| 590 | + margin: 20rpx 0; | ||
| 591 | + height: 60rpx; | ||
| 521 | text { | 592 | text { |
| 522 | - font-size: 26rpx; color: #7D7C7C; | 593 | + font-size: 26rpx; |
| 594 | + color: #7d7c7c; | ||
| 523 | } | 595 | } |
| 524 | } | 596 | } |
| 525 | .order-control { | 597 | .order-control { |
| 526 | - display: flex; align-items: center;height: 100rpx; justify-content: flex-end; | 598 | + display: flex; |
| 599 | + align-items: center; | ||
| 600 | + height: 100rpx; | ||
| 601 | + justify-content: flex-end; | ||
| 527 | } | 602 | } |
| 528 | } | 603 | } |
| 529 | .order-remain-time { | 604 | .order-remain-time { |
| ... | @@ -535,40 +610,58 @@ page { | ... | @@ -535,40 +610,58 @@ page { |
| 535 | } | 610 | } |
| 536 | .order-info-detail { | 611 | .order-info-detail { |
| 537 | .order-info { | 612 | .order-info { |
| 538 | - border-bottom: 1px dashed #979797; padding: 0.5rem; padding-top: 0; | 613 | + border-bottom: 1px dashed #979797; |
| 614 | + padding: 0.5rem; | ||
| 615 | + padding-top: 0; | ||
| 539 | .check-in-text { | 616 | .check-in-text { |
| 540 | - color: #7D7C7C; font-size: 0.85rem; | 617 | + color: #7d7c7c; |
| 618 | + font-size: 0.85rem; | ||
| 541 | } | 619 | } |
| 542 | .check-in-info { | 620 | .check-in-info { |
| 543 | - color: #7D7C7C; font-size: 0.85rem; text-align: right; | 621 | + color: #7d7c7c; |
| 622 | + font-size: 0.85rem; | ||
| 623 | + text-align: right; | ||
| 544 | } | 624 | } |
| 545 | .check-out-text { | 625 | .check-out-text { |
| 546 | - color: #7D7C7C; font-size: 0.85rem; margin: 0.25rem 0; | 626 | + color: #7d7c7c; |
| 627 | + font-size: 0.85rem; | ||
| 628 | + margin: 0.25rem 0; | ||
| 547 | } | 629 | } |
| 548 | .check-out-info { | 630 | .check-out-info { |
| 549 | - color: #7D7C7C; font-size: 0.85rem; text-align: right; margin: 0.25rem 0; | 631 | + color: #7d7c7c; |
| 632 | + font-size: 0.85rem; | ||
| 633 | + text-align: right; | ||
| 634 | + margin: 0.25rem 0; | ||
| 550 | } | 635 | } |
| 551 | .breakfast-text { | 636 | .breakfast-text { |
| 552 | - color: #7D7C7C; font-size: 0.85rem; | 637 | + color: #7d7c7c; |
| 638 | + font-size: 0.85rem; | ||
| 553 | } | 639 | } |
| 554 | .breakfast-num { | 640 | .breakfast-num { |
| 555 | - color: #7D7C7C; font-size: 0.85rem; text-align: right; | 641 | + color: #7d7c7c; |
| 642 | + font-size: 0.85rem; | ||
| 643 | + text-align: right; | ||
| 556 | } | 644 | } |
| 557 | .order-info-detail-tip { | 645 | .order-info-detail-tip { |
| 558 | - font-size: 0.85rem; margin-top: 0.25rem; | 646 | + font-size: 0.85rem; |
| 647 | + margin-top: 0.25rem; | ||
| 559 | &::before { | 648 | &::before { |
| 560 | - content: '*'; | 649 | + content: "*"; |
| 561 | color: red; | 650 | color: red; |
| 562 | margin: auto; | 651 | margin: auto; |
| 563 | display: inline-block; | 652 | display: inline-block; |
| 564 | } | 653 | } |
| 565 | view { | 654 | view { |
| 566 | - color: #7D7C7C; margin: auto; display: inline-block; | 655 | + color: #7d7c7c; |
| 656 | + margin: auto; | ||
| 657 | + display: inline-block; | ||
| 567 | } | 658 | } |
| 568 | } | 659 | } |
| 569 | } | 660 | } |
| 570 | .order-detail { | 661 | .order-detail { |
| 571 | - padding: 0.5rem; font-size: 28rpx; color: #7D7C7C; | 662 | + padding: 0.5rem; |
| 663 | + font-size: 28rpx; | ||
| 664 | + color: #7d7c7c; | ||
| 572 | .wrapper { | 665 | .wrapper { |
| 573 | margin-bottom: 10rpx; | 666 | margin-bottom: 10rpx; |
| 574 | .right { | 667 | .right { | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2023-12-20 14:11:11 | 2 | * @Date: 2023-12-20 14:11:11 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-12-27 18:21:06 | 4 | + * @LastEditTime: 2023-12-28 13:40:59 |
| 5 | * @FilePath: /meihuaApp/src/components/payCard.vue | 5 | * @FilePath: /meihuaApp/src/components/payCard.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -78,8 +78,6 @@ watch( | ... | @@ -78,8 +78,6 @@ watch( |
| 78 | id.value = props.data.id; | 78 | id.value = props.data.id; |
| 79 | price.value = props.data.price; | 79 | price.value = props.data.price; |
| 80 | remain_time.value = props.data.remain_time; | 80 | remain_time.value = props.data.remain_time; |
| 81 | - } else { | ||
| 82 | - | ||
| 83 | } | 81 | } |
| 84 | } | 82 | } |
| 85 | ) | 83 | ) |
| ... | @@ -149,7 +147,7 @@ const goToPay = async () => { | ... | @@ -149,7 +147,7 @@ const goToPay = async () => { |
| 149 | // if (current_page === 'pages/my/index') { // 我的页面打开 | 147 | // if (current_page === 'pages/my/index') { // 我的页面打开 |
| 150 | // // 刷新当前页面 | 148 | // // 刷新当前页面 |
| 151 | // Taro.reLaunch({ | 149 | // Taro.reLaunch({ |
| 152 | - // url: '/pages/my/index?tab_index=1' | 150 | + // url: '/pages/my/index?tab_index=5' |
| 153 | // }); | 151 | // }); |
| 154 | // } | 152 | // } |
| 155 | // if (current_page === 'pages/detail/index') { // 订房确认页打开 | 153 | // if (current_page === 'pages/detail/index') { // 订房确认页打开 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2023-12-13 11:13:13 | 2 | * @Date: 2023-12-13 11:13:13 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-12-27 19:45:07 | 4 | + * @LastEditTime: 2023-12-28 13:40:29 |
| 5 | * @FilePath: /meihuaApp/src/pages/my/index.vue | 5 | * @FilePath: /meihuaApp/src/pages/my/index.vue |
| 6 | * @Description: 我的页面 | 6 | * @Description: 我的页面 |
| 7 | --> | 7 | --> |
| ... | @@ -72,17 +72,11 @@ onMounted(async () => { | ... | @@ -72,17 +72,11 @@ onMounted(async () => { |
| 72 | } | 72 | } |
| 73 | }); | 73 | }); |
| 74 | 74 | ||
| 75 | -const onPay = ({ id, remain_time }) => { | 75 | +const onPay = ({ id, remain_time, price }) => { // 发送订单支付信息到支付组件 |
| 76 | - console.warn(id); | 76 | + show_pay.value = true; // 打开支付组件 |
| 77 | - // Taro.showToast({ | 77 | + payData.value.id = id; // ID |
| 78 | - // title: '支付已超时', | 78 | + payData.value.price = price; // 价格 |
| 79 | - // icon: 'error', | 79 | + payData.value.remain_time = remain_time; // 剩余时间 |
| 80 | - // duration: 2000 | ||
| 81 | - // }); | ||
| 82 | - show_pay.value = true; | ||
| 83 | - payData.value.id = '123'; | ||
| 84 | - payData.value.price = 1200; | ||
| 85 | - payData.value.remain_time = remain_time; | ||
| 86 | } | 80 | } |
| 87 | 81 | ||
| 88 | const onPayClose = () => { | 82 | const onPayClose = () => { |
| ... | @@ -156,7 +150,7 @@ export default { | ... | @@ -156,7 +150,7 @@ export default { |
| 156 | this.indexCoverHeight = windowHeight - navHeight - avatarHeight - titleHeight - 50; | 150 | this.indexCoverHeight = windowHeight - navHeight - avatarHeight - titleHeight - 50; |
| 157 | if (this.$refs.refScrollView) { | 151 | if (this.$refs.refScrollView) { |
| 158 | Taro.hideLoading(); | 152 | Taro.hideLoading(); |
| 159 | - console.warn('加载完成'); | 153 | + // console.warn('加载完成'); |
| 160 | } | 154 | } |
| 161 | }); | 155 | }); |
| 162 | // 默认勾选栏目 | 156 | // 默认勾选栏目 | ... | ... |
-
Please register or login to post a comment