zhwl-miniapp/pages/hotelOrder/detail.vue
2025-06-26 12:38:35 +08:00

834 lines
30 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="waper" v-if="detail">
<u-navbar :autoBack="true" :placeholder="true" bgColor="#03AE80" leftIconColor="#fff">
<view slot='center' style="color: #fff;">
订单详情
</view>
</u-navbar>
<view class="top_box">
<view class="title">
<view class="left">
<u-icon :name="detail.icon" color="#fff" size="56rpx" />
<view style="margin-left: 12rpx;">{{detail.status}}</view>
</view>
<view class="right" v-if="detail.paymentType == '0' && timeNum > 0">{{secondsToTime(timeNum)}}</view>
</view>
<view class="label">{{detail.text}}</view>
<view class="btn_box">
<view class="btn pay" v-if="payFlag" @click="goPay">去支付</view>
<view class="btn" v-if="cancelFlag" @click="cancel">取消订单</view>
<view class="btn" v-if="refundFlag" @click="apply">申请退款</view>
<view class="btn" v-if="delFlag" @click="del">删除订单</view>
<view class="btn" v-if="reserveFlag" @click="reserve">再次预定</view>
<view class="btn" v-if="contactFlag" @click="showPopupTel = true">联系酒店</view>
<view class="btn" v-if="againFlag" @click="apply">再次申请</view>
<view class="btn" v-if="progressFlag" @click="refund">退款进度</view>
</view>
</view>
<view class="row" v-if="cancelRuleFlag">
<view class="left">
<view class="label">取消规则</view>
<view class="rule">{{roomDetail.cancelRuleTypeDesc}}</view>
</view>
<view class="right" @click="showPopupRead = true">
<view class="text">取消规则</view>
<u-icon name="arrow-right" color="#03AE80" size="28rpx" />
</view>
</view>
<view class="row" v-if="onlinePaymentFlag">
<view class="left">
<view class="label">在线支付</view>
<view class="price"><text class="unit">¥</text>{{ detail.totalAmount }}</view>
</view>
<view class="right" @click="showPopupDetailed = true">
<view class="text">费用明细</view>
<u-icon name="arrow-right" color="#03AE80" size="28rpx" />
</view>
</view>
<view class="hotel">
<view class="con">
<image class="img" :src="$utils.setImgUrl(detail.zdyHotelHomestayVO.coverImage)" mode=""></image>
<view class="msg">
<view class="h4" @click="goHotelDetail">
<view class="name">{{ hotelDetail.name }}</view>
<u-icon name="arrow-right" color="#999" size="28rpx" />
</view>
<view class="address">{{ hotelDetail.address }}</view>
</view>
</view>
<view class="col">
<view class="btn" @click="openLocation">
<image src="../../static/home/location.png" mode=""></image>
<view class="label">地图/导航</view>
</view>
<view class="btn" @click="showPopupTel = true">
<image src="../../static/image/phone.png" mode=""></image>
<view class="label">联系酒店</view>
</view>
<view class="line"></view>
</view>
</view>
<view class="place">
<view class="time" v-if="detail.stayType !== 'HOURLY'">
<view class="time1">
{{startDatePage}}{{startWeek}}
——
{{stopDatePage}}{{stopWeek}}
</view>
<view class="time2">共{{nightsPage}}晚</view>
</view>
<view class="time" v-if="detail.stayType == 'HOURLY'">
<view class="time1">
{{hourDate}} {{hourTimeSlot}}
</view>
</view>
<view class="model">
<view>{{ roomDetail.level2Name }}</view>
<view @click="roomInfo">
<view>房型信息</view>
<u-icon name="arrow-right" color="#999" size="28rpx" />
</view>
</view>
<view class="tags_box">
<view class="tag" v-if="roomDetail.bedType">{{roomDetail.bedType}}</view>
<view class="tag" v-if="roomDetail.limitedLivePerson">{{roomDetail.limitedLivePerson}}人入住</view>
<view class="tag" v-if="roomDetail.window">{{roomDetail.window}}</view>
<view class="tag" v-if="roomDetail.breakfast">{{roomDetail.breakfast}}</view>
</view>
<view class="row1">
<view class="key">入住人</view>
<view class="value">{{ detail.contactNames }}</view>
</view>
<view class="row1">
<view class="key">联系电话</view>
<view class="value">{{ detail.contactMobile }}</view>
</view>
<view class="row1">
<view class="key">预计到店</view>
<view class="value">{{ reachDate }} {{reachTime}}前</view>
</view>
</view>
<view class="order">
<view class="label">订单信息</view>
<view class="row2">
<view class="key">订单编号</view>
<view class="value">
<view>{{ detail.orderCode }}</view>
<view></view>
<view @click="copyCode(detail.orderCode)">复制</view>
</view>
</view>
<view class="row2">
<view class="key">下单时间</view>
<view class="value">{{ detail.createTime }}</view>
</view>
<view class="row2" v-if="detail.paymentTime">
<view class="key">付款时间</view>
<view class="value">{{ detail.paymentTime }}</view>
</view>
<view class="row2" v-if="detail.paymentTime">
<view class="key">付款方式</view>
<view class="value">{{ detail.paymentMethod_dictText }}</view>
</view>
<view class="row2" v-if="detail.cancelTime">
<view class="key">取消时间</view>
<view class="value">{{ detail.cancelTime }}</view>
</view>
</view>
<u-popup :show="showPopupRead" :round="10" mode="bottom">
<view class="read_con">
<view class="head">
<view class="title">订房必读</view>
<view class="close" @click="showPopupRead = false">
<u-icon name="close" color="#000000" size="36rpx" />
</view>
</view>
<scroll-view scroll-y class="scroll">
<view class="row3">
<view>取消规则</view>
<view v-if="roomDetail.cancelRuleType == 3">
{{cancelRule}}
</view>
<view v-else>{{roomDetail.cancelRuleTypeDesc}}</view>
</view>
<view class="row3">
<view>入离时间</view>
<view>入住时间:{{hotelDetail.checkInTime}}以后 离店时间:{{hotelDetail.leaveTime}}以前</view>
</view>
<view class="row3">
<view>发票</view>
<view>
<text>{{hotelDetail.invoice == 'N' ? '不' : ''}}</text>
可开具增值税普通/专用发票
</view>
</view>
<view class="row3">
<view>宠物</view>
<view>
<text>{{hotelDetail.pet == 'N' ? '不' : ''}}</text>
允许携带宠物。
</view>
</view>
</scroll-view>
</view>
</u-popup>
<u-popup :show="showPopupDetailed" :round="10" mode="bottom">
<view class="detailed_con">
<view class="head">
<view class="title">明细</view>
<view class="close" @click="showPopupDetailed = false">
<u-icon name="close" color="#000000" size="36rpx" />
</view>
</view>
<view class="add">
<view class="label">订单合计</view>
<view class="all">共<text>¥{{detail.totalAmount}}</text></view>
</view>
<view class="row4">
<view class="col">
<view class="key">房费 </view>
<view class="value">¥{{detail.totalAmount}}</view>
</view>
<view class="col" v-for="(item, index) in detail.roomChargeDetails" :key="index">
<view class="key">{{item.stayDate}}</view>
<view class="value">{{item.roomQuantity}}x ¥{{item.roomPrice}}</view>
</view>
<view class="col" v-if="detail.stayType !== 'HOURLY'">
<view class="key">{{detail.outDateTime.split(' ')[0]}}</view>
<view class="value"></view>
</view>
</view>
</view>
</u-popup>
<u-popup :show="showPopupTel" :round="10" mode="bottom">
<view class="tel_con">
<view class="head">
<view class="title">商家电话</view>
<view class="close" @click="showPopupTel = false">
<u-icon name="close" color="#000000" size="36rpx" />
</view>
</view>
<view class="tel" @click="contact(hotelDetail.phone)">{{ hotelDetail.phone }}</view>
</view>
</u-popup>
<u-popup :show="showPopupDelete" :round="10" mode="center">
<view class="delete_con">
<view class="title">确认{{popupLabel}}订单?</view>
<view class="tips">订单{{popupLabel}}后将无法恢复</view>
<view class="btn-box">
<view class="btn cancel" @click="showPopupDelete = false">取消</view>
<view class="btn confirm" @click="popupConfirm">确认</view>
</view>
</view>
</u-popup>
<u-popup :show="showPopupType" :round="10" mode="bottom">
<view class="type_con">
<view class="close" @click="showPopupType = false">
<u-icon name="close" color="#fff" size="36rpx" />
</view>
<scroll-view scroll-y class="scroll">
<view class="swiper">
<swiper :autoplay="true" :current="current" circular @change="changeSwiper">
<swiper-item v-for="(i, index) in roomDetail.image" :key="index">
<image :src="$utils.setImgUrl(i)" mode=""></image>
</swiper-item>
</swiper>
<view class="current">{{current + 1}}/{{roomDetail.imageLength}}</view>
</view>
<view class="specs">
<view class="title">{{roomDetail.level2Name}}</view>
<view class="list_box">
<view class="item" v-if="roomDetail.area">
<image src="../../static/image/hotel/area.png" mode=""></image>
<view>{{roomDetail.area}}</view>
</view>
<view class="item" v-if="roomDetail.bedType">
<image src="../../static/image/hotel/bedType.png" mode=""></image>
<view>{{roomDetail.bedType}}</view>
</view>
<view class="item" v-if="roomDetail.window">
<image src="../../static/image/hotel/window.png" mode=""></image>
<view>{{roomDetail.window}}</view>
</view>
<view class="item" v-if="roomDetail.wifi">
<image src="../../static/image/hotel/wifi.png" mode=""></image>
<view>{{roomDetail.wifi}}</view>
</view>
<view class="item" v-if="roomDetail.floor">
<image src="../../static/image/hotel/floor.png" mode=""></image>
<view>{{roomDetail.floor}}</view>
</view>
<view class="item" v-if="roomDetail.breakfast">
<image src="../../static/image/hotel/breakfast.png" mode=""></image>
<view>{{roomDetail.breakfast}}</view>
</view>
<view class="item" v-if="roomDetail.limitedLivePerson">
<image src="../../static/image/hotel/limitedLivePerson.png" mode=""></image>
<view>{{roomDetail.limitedLivePerson}}</view>
</view>
</view>
</view>
<view class="occupying"></view>
<view class="policy">
<view class="title">商家政策</view>
<view class="list">
<view class="item">
<view class="label">重要通知</view>
<u-parse :content="hotelDetail.importantNotice"></u-parse>
</view>
<view class="item">
<view class="label">入住方式</view>
<view class="text">{{hotelDetail.checkInWay}}</view>
</view>
<view class="item">
<view class="label">取消规则</view>
<view class="text" v-if="roomDetail.cancelRuleType == 3">
{{cancelRule}}
</view>
<view class="text" v-else>{{roomDetail.cancelRuleTypeDesc}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data () {
return {
id: '',
detail: null,
hotelId: '',
hotelDetail: {},
roomId: '',
roomDetail: {},
showPopupRead: false,
showPopupDetailed: false,
showPopupTel: false,
showPopupDelete: false,
showPopupType: false,
current: 0,
configData: null,
timeNum: 0,
timer: null,
payFlag: false,
cancelFlag: false,
reserveFlag: false,
contactFlag: false,
againFlag: false,
delFlag: false,
refundFlag: false,
progressFlag: false,
cancelRuleFlag: true,
onlinePaymentFlag: true,
popupLabel: '',
// 到店日期
reachDate: '',
// 到店时间
reachTime: '',
// 全日房
startDatePage: '',
stopDatePage: '',
nightsPage: null,
startWeek: '',
stopWeek: '',
weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
// 钟点房
// 日期
hourDate: '',
// 入住时段
hourTimeSlot: '',
cancelRule: ''
}
},
onShow() {
this.getDetail();
},
onLoad (options) {
this.id = options.id;
this.getDetail();
},
onUnload () {
clearInterval(this.timer);
this.timer = null;
},
methods: {
async getDetail() {
let res=await this.$http.hotelOrderDetail(this.id);
this.detail=res.data;
this.hotelId = this.detail.hotelHomestayId;
this.roomId = this.detail.roomClassifyId;
if (this.detail.stayType == 'HOURLY') {
this.hourDate = this.$moment(this.detail.inDateTime).format("MM月DD日");
this.hourTimeSlot = this.detail.inDateTime.split(' ')[1].slice(0, 5) + '-' + this.detail.outDateTime.split(' ')[1].slice(0, 5);
} else {
this.startDatePage = this.$moment(this.detail.inDateTime).format("MM月DD日");
this.stopDatePage = this.$moment(this.detail.outDateTime).format("MM月DD日");
this.nightsPage = this.$moment(this.detail.outDateTime.split(' ')[0]).diff(this.$moment(this.detail.inDateTime.split(' ')[0]), 'days');
this.startWeek = this.weekList[this.$moment(this.detail.inDateTime).day()];
this.stopWeek = this.weekList[this.$moment(this.detail.outDateTime).day()];
}
if (this.detail.paymentType == '0') {
this.configData = uni.getStorageSync('configData');
let creaetdTime = parseInt(new Date(this.detail.createTime).getTime() / 1000);
let nowtime = parseInt(new Date().getTime() / 1000);
if ((creaetdTime + this.configData.expirationTime * 60) >= nowtime) {
this.timeNum = (creaetdTime + this.configData.expirationTime * 60) - nowtime;
this.setIntervalFn()
} else {
this.detail.paymentType = '2';
}
}
this.getOrderStatus();
this.getHotelDetail();
this.getRoomDeatil();
},
getOrderStatus() {
this.payFlag = false;
this.cancelFlag = false;
this.reserveFlag = false;
this.contactFlag = false;
this.againFlag = false;
this.delFlag = false;
this.refundFlag = false;
this.progressFlag = false;
this.cancelRuleFlag = true;
this.onlinePaymentFlag = true;
if (this.detail.stayType == 'HOURLY') {
this.reachDate = this.$moment(this.detail.inDateTime).format("MM月DD日");
this.reachTime = this.detail.inDateTime.split(' ')[1].slice(0, 5);
} else {
let currentDate = this.detail.estimatedArrivalDateTime.split(' ')[0];
this.reachDate = this.$moment(currentDate).format("MM月DD日");
this.reachTime = this.detail.estimatedArrivalDateTime.split(' ')[1].slice(0, 5);
}
if (this.detail.refundStatus == '1') {
this.detail.icon = 'checkmark-circle';
this.detail.status = '审核中';
this.detail.text = '您已成功取消了您的订单,系统正在审核';
this.contactFlag = true;
this.progressFlag = true;
this.cancelRuleFlag = false;
} else if (this.detail.refundStatus == '100') {
this.detail.icon = 'error-circle';
this.detail.status = '已驳回';
this.detail.text = '您申请的取消订单系统已被驳回,请重新申请或联系酒店前台';
this.contactFlag = true;
this.againFlag = true;
this.cancelRuleFlag = false;
} else if (this.detail.refundStatus == '2') {
this.detail.icon = 'checkmark-circle';
this.detail.status = '退款中';
this.detail.text = '系统正在退款中,请耐心等待';
this.contactFlag = true;
this.progressFlag = true;
this.cancelRuleFlag = false;
} else if (this.detail.refundStatus == '200') {
this.detail.icon = 'checkmark-circle';
this.detail.status = '已取消';
this.detail.text = '您已成功取消了您的订单';
this.reserveFlag = true;
this.progressFlag = true;
this.cancelRuleFlag = false;
} else if (this.detail.refundStatus == '4') {
this.detail.icon = 'error-circle';
this.detail.status = '退款失败';
this.detail.text = '对不起,您的订单退款失败,请再次申请或联系酒店前台';
this.contactFlag = true;
this.againFlag = true;
this.cancelRuleFlag = false;
} else if (this.detail.stayStatus == 'BOOKED') {
this.detail.icon = 'checkmark-circle';
this.detail.status = '预定成功,等待您的入住';
this.detail.text = '房间将为你保留至预计在' + this.reachDate + this.reachTime + '前';
this.refundFlag = true;
this.reserveFlag = true;
} else if (this.detail.stayStatus == 'CHECKED_IN') {
this.detail.icon = 'checkmark-circle';
this.detail.status = '已入住';
this.detail.text = '订单已入住,欢迎您再次预定';
this.reserveFlag = true;
this.cancelRuleFlag = false;
} else if (this.detail.stayStatus == 'CHECKED_OUT') {
this.detail.icon = 'checkmark-circle';
this.detail.status = '已完成';
this.detail.text = '订单已完成,欢迎您再次预定';
this.delFlag = true;
this.reserveFlag = true;
this.cancelRuleFlag = false;
this.onlinePaymentFlag = false;
} else if ((this.detail.stayStatus == 'CANCELED' || this.detail.paymentType == '1') && !this.detail.refundStatus) {
this.detail.icon = 'checkmark-circle';
this.detail.status = '已取消';
this.detail.text = '您已成功取消了您的订单';
this.reserveFlag = true;
this.cancelRuleFlag = false;
} else if (this.detail.paymentType == '2') {
this.detail.icon = 'error-circle';
this.detail.status = '支付超时';
this.detail.text = '订单已超时可支付时间,请重新下单';
this.reserveFlag = true;
this.cancelRuleFlag = false;
} else if (this.detail.paymentType == '0') {
this.detail.icon = 'clock';
this.detail.status = '待付款';
this.detail.text = '该订单需要尽快支付,超时后订单将自动取消';
this.payFlag = true;
this.cancelFlag = true;
this.reserveFlag = true;
}
},
setIntervalFn () {
clearInterval(this.timer);
this.timer = setInterval(() => {
if (this.timeNum <= 0) {
clearInterval(this.timer)
// this.getDetail();
this.detail.paymentType = '2';
this.getOrderStatus();
}
this.timeNum --;
}, 1000)
},
secondsToTime(seconds) {
const minutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = seconds % 60;
return (minutes >= 10 ? minutes : '0' + minutes) + ":" + (remainingSeconds >= 10 ? remainingSeconds : '0' + remainingSeconds);
},
// 酒店详情
async getHotelDetail() {
let res=await this.$http.homestayId(this.hotelId);
this.hotelDetail = res.data;
},
// 房型详情
async getRoomDeatil() {
let params = {
roomClassifyId: this.roomId,
startTime: this.detail.inDateTime.split(' ')[0],
endTime: this.detail.outDateTime.split(' ')[0]
}
let res=await this.$http.classifyDetail(params);
res.data.image = res.data.image.split(',');
this.roomDetail = res.data;
this.roomDetail.imageLength = this.roomDetail.image.length;
if (this.roomDetail.cancelRuleType == 3) {
let cancelRuleContent = JSON.parse(this.roomDetail.cancelRuleContent);
if (Number(cancelRuleContent[0].handlingFee)) {
this.cancelRule = `入住当天${cancelRuleContent[0].start}后取消,将收取额外费用`;
} else {
this.cancelRule = `入住当天${cancelRuleContent[0].end}前可免费取消,超期将收取额外费用`;
}
}
},
changeSwiper(e) {
this.current = e.detail.current;
},
goHotelDetail() {
uni.navigateTo({ url: `/pages/hotel/detail?id=${this.hotelId}` });
},
openLocation() {
if (this.hotelDetail.latitude && this.hotelDetail.longitude) {
let latitude = this.hotelDetail.latitude;
let longitude = this.hotelDetail.longitude;
uni.openLocation({
latitude: Number(latitude),
longitude: Number(longitude),
name: this.hotelDetail.name,
address: this.hotelDetail.address,
})
}
},
roomInfo() {
this.showPopupType = true;
},
copyCode (code) {
uni.setClipboardData({
data: code,
success: () => {
uni.showToast({ mask: true, title: '内容已复制到剪切板', icon: 'none' })
}
})
},
// 再次预定
reserve() {
uni.navigateTo({ url: `/pages/hotel/detail?id=${this.hotelId}` });
},
// 取消
cancel() {
this.showPopupDelete = true;
this.popupLabel = '取消';
},
// 删除
del() {
this.showPopupDelete = true;
this.popupLabel = '删除';
},
async popupConfirm() {
let info = null;
if (this.popupLabel === '删除') {
info = await this.$http.delHotelOrder(this.detail.id);
this.showPopupDelete = false;
uni.navigateBack();
} else {
let params = {
orderId: this.detail.id
}
info = await this.$http.hotelOrderCancel(params);
this.showPopupDelete = false;
this.getDetail();
}
},
contact(e) {
uni.makePhoneCall({ phoneNumber: e, fail: () => {} });
},
// 退款进度
refund() {
uni.navigateTo({ url: `/pages/hotelOrder/refundProgress?id=${this.id}` });
},
// 申请退款
async apply() {
let res = await this.$http.computePenaltyFee(this.detail.id);
if (res.errMsg) {
uni.$u.toast(res.errMsg);
} else {
uni.navigateTo({ url: `/pages/hotelOrder/cancelOrder?id=${this.detail.id}&amount=${res.data}&refund=${res.refund}` });
}
},
// 去支付
goPay() {
uni.navigateTo({ url: `/pages/hotel/submitOrder?id=${this.detail.id}&hotelId=${this.hotelId}&source=order` })
}
}
}
</script>
<style lang="scss">
.waper { min-height: 100vh; background-color: #F6F6F6; padding-bottom: 22rpx; box-sizing: border-box; }
.top_box {
background: #03AE80; border-radius: 0 0 50rpx 0; padding: 24rpx; box-sizing: border-box;
.title {
display: flex; align-items: center; justify-content: space-between;
.left {
display: flex; align-items: center;
view { font-weight: 500; font-size: 48rpx; color: #FFFFFF; }
}
.right { font-weight: 500; font-size: 36rpx; color: #FFFFFF; }
}
.label { margin-top: 12rpx; font-size: 26rpx; color: #FFFFFF; }
.btn_box {
margin-top: 24rpx; display: flex; align-items: center; justify-content: space-between;
.btn {
flex: 1; height: 80rpx; background: #FFFFFF; border-radius: 4rpx; line-height: 80rpx; text-align: center; font-size: 28rpx; color: #03AE80; margin-right: 20rpx;
&:last-child { margin-right: 0; }
}
.pay { color: #EE595A; }
}
}
.row {
margin: 22rpx 24rpx 0; height: 90rpx; background: #FFFFFF; border-radius: 10rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 24rpx; box-sizing: border-box;
.left {
display: flex; align-items: center;
.label { font-size: 28rpx; color: rgba(0,0,0,0.45); margin-right: 24rpx; }
.rule { font-size: 28rpx; color: rgba(0,0,0,0.65); }
.price {
font-weight: bold; font-size: 32rpx; color: #EE595A;
.unit { font-weight: 400; font-size: 24rpx; }
}
}
.right {
display: flex; align-items: center;
.text { font-size: 28rpx; color: #03AE80; margin-right: 8rpx; }
}
}
.hotel {
margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
.con {
display: flex; align-items: center;
.img { width: 110rpx; height: 110rpx; margin-right: 24rpx; border-radius: 8rpx; }
.msg {
flex: 1;
.h4 {
display: flex; align-items: center;
.name { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); margin-right: 12rpx; }
}
.address { margin-top: 10rpx; font-size: 24rpx; color: rgba(0,0,0,0.45); }
}
}
.col {
margin-top: 24rpx; position: relative; display: flex; height: 38rpx;
.btn {
width: 50%; display: inline-block; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%;
image{ width: 38rpx; height: 38rpx; }
.label { font-size: 24rpx; color: #000000; margin-left: 20rpx; display: inline-block; }
}
.line { width: 1rpx; height: 24rpx; background-color: #ECEAEA; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
}
.place {
margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
.time {
display: flex; align-items: center; justify-content: space-between;
.time1 { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
.time2 { font-size: 26rpx; color: rgba(0,0,0,0.65); }
}
.model {
display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx;
view {
&:first-child { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
&:last-child {
display: flex; align-items: center;
view { font-size: 24rpx; color: rgba(0,0,0,0.45); margin-right: 4rpx; }
}
}
}
.tags_box {
display: flex; align-items: center; margin-top: 13rpx; padding-bottom: 24rpx; border-bottom: 1rpx solid #ECEAEA;
.tag {
padding: 0 16rpx; position: relative; font-size: 24rpx; color: rgba(0,0,0,0.45);
&::after{ content: ""; width: 1rpx; height: 23rpx; background: #ECEAEA; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
&:first-child { padding-left: 0; }
&:last-child {
padding-right: 0;
&::after {display: none;}
}
}
}
.row1 {
margin-top: 24rpx; display: flex; align-items: center;
.key { width: 176rpx; font-size: 26rpx; color: rgba(0,0,0,0.65); }
.value { font-size: 26rpx; color: rgba(0,0,0,0.85); }
}
}
.order {
margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
.label { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
.row2 {
margin-top: 24rpx; display: flex; align-items: center; justify-content: space-between;
.key {font-size: 28rpx; color: rgba(0,0,0,0.65);}
.value {
font-size: 28rpx; color: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: end;
view {
&:nth-child(1) { font-size: 28rpx; color: rgba(0,0,0,0.85); }
&:nth-child(2) { width: 2rpx; height: 19rpx; background-color: #ECEAEA; margin: 0 16rpx; }
&:nth-child(3) { font-size: 28rpx; color: #03AE80; }
}
}
}
}
.read_con {
padding: 32rpx;
.head {
position: relative; text-align: center; margin-bottom: 30rpx;
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}
.scroll { max-height: 60vh; }
.row3 {
margin-top: 24rpx;
view {
margin-top: 8rpx; font-size: 28rpx; color: rgba(0,0,0,0.65);
&:first-child { margin-top: 0; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85); }
&:nth-child(2) { margin-top: 16rpx; }
}
}
}
.detailed_con {
padding: 32rpx 0; position: relative;
.head {
position: relative; text-align: center; margin: 0 32rpx 30rpx;
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}
.add {
padding: 54rpx 0 24rpx; margin: 0 32rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #ECEAEA;
.label { font-size: 32rpx; color: rgba(0,0,0,0.85); }
.all {
font-size: 28rpx; color: rgba(0,0,0,0.85);
text { font-weight: bold; font-size: 28rpx; color: #E54042; }
}
}
.row4 {
padding: 0 32rpx;
.col {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx;
&:first-child {
margin: 24rpx 0 13rpx;
.key, .value { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
}
.key, .value { font-size: 28rpx; color: rgba(0,0,0,0.65); }
}
}
}
.tel_con {
padding: 32rpx 0; position: relative;
.head {
position: relative; text-align: center; margin: 0 32rpx 30rpx;
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}
.tel { padding-top: 54rpx; font-size: 28rpx; color: rgba(0,0,0,0.85); text-align: center; }
}
.delete_con {
width: 596rpx; height: 398rpx; background: linear-gradient( 360deg, rgba(71,175,195,0) 0%, rgba(71,175,195,0.3) 100%); border-radius: 20rpx; padding: 64rpx 46rpx; box-sizing: border-box; text-align: center;
.title { font-weight: 500; font-size: 40rpx; color: rgba(0,0,0,0.85); }
.tips { font-size: 28rpx; color: rgba(0,0,0,0.65); margin-top: 24rpx; }
.btn-box {
margin-top: 64rpx; display: flex; align-items: center; justify-content: space-between;
.btn { width: 240rpx; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 66rpx; font-size: 30rpx; }
.cancel { border: 1rpx solid rgba(0,0,0,0.45); color: rgba(0,0,0,0.45); }
.confirm { color: #FFFFFF; background: #03AE80; }
}
}
/deep/.u-popup__content {overflow: hidden;}
.type_con {
position: relative;
.close {
position: absolute; top: 32rpx; right: 24rpx; z-index: 1; width: 56rpx; height: 56rpx; background: rgba(0,0,0,0.4); border-radius: 50%;
::v-deep .u-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
}
.scroll { max-height: 80vh; }
.swiper{
width: 100%; height: 500rpx; position: relative;
swiper{ width: 100%; height: 100%; }
.current{ padding: 0 20rpx; height: 40rpx; line-height: 40rpx; color: #fff; background: rgba(0, 0, 0, 0.5); font-size: 24rpx; border-radius: 50rpx; position: absolute; right: 24rpx; bottom: 24rpx; }
}
.specs {
background: #FFFFFF; padding: 24rpx 24rpx 32rpx; box-sizing: border-box;
.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); margin-bottom: 6rpx; }
.list_box {
display: flex; align-items: center; flex-wrap: wrap;
.item {
margin-top: 18rpx; width: 33.33%; display: flex; align-items: center;
image { width: 28rpx; height: 28rpx; }
view {
margin-left: 12rpx; font-size: 24rpx; color: rgba(0,0,0,0.85);
.text { color: #03AE80; }
}
}
}
}
.occupying { width: 100%; height: 22rpx; background-color: #F6F6F6; }
.policy {
background: #FFFFFF; padding: 22rpx 24rpx 24rpx; box-sizing: border-box;
.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); padding-bottom: 7rpx; }
.list {
.item {
border-bottom: 2rpx solid #ECEAEA; padding: 24rpx 0;
&:last-child { border-bottom: none; }
.label { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); margin-bottom: 16rpx; }
.text { font-size: 24rpx; color: rgba(0,0,0,0.45); line-height: 28rpx; }
}
}
}
}
</style>