zhwl-miniapp/pages/hotelOrder/detail.vue

834 lines
30 KiB
Vue
Raw Normal View History

2025-06-26 12:38:35 +08:00
<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>