ct-mattress/page_fenbao/dingdan.vue
2024-09-26 17:38:31 +08:00

1229 lines
28 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="page">
<u-navbar title="订单详情" :custom-back="btnback" :border-bottom="false" :background="bgc" title-color='#3D3D3D' back-icon-color="#3D3D3D"
title-size='36' height='44'></u-navbar>
<view class="shengyu">
剩余时长
</view>
<view class="time">
{{detailobj.isUsing == true ? formattedTime : 0}}
</view>
<view class="setmeal">
<view class="lt">
<image src="https://api.ccttiot.com/smartmeter/img/static/ujJcBAlIiMjakFEBQV8O" mode=""></image>
<view class="quan">
<view class="one">
{{detailobj.suitTime == undefined ? '--' : detailobj.suitTime}}{{detailobj.suitTimeUnit == 3 ? '分钟' : '小时'}}
</view>
<view class="two">
套餐时长
</view>
</view>
</view>
<view class="cen"></view>
<view class="rt">
<image src="https://api.ccttiot.com/smartmeter/img/static/u9hyl89RRMfuvTFnuVbi" mode=""></image>
<view class="quan">
<view class="one">
{{detailobj.money == undefined ? '--' : detailobj.money}}
</view>
<view class="two">
实付金额
</view>
</view>
</view>
</view>
<view class="list_item">
<view class="top">
<view class="bh">
设备编号{{detailobj.deviceNo == undefined ? '--' : detailobj.deviceNo}}
</view>
</view>
<view class="item_xx">
<view class="">
订单号
</view>
<view class="">
{{detailobj.billNo == undefined ? '--' : detailobj.billNo}}
</view>
</view>
<view class="item_xx">
<view class="">
购买套餐
</view>
<view class="">
{{detailobj.suitName == undefined ? '--' : detailobj.suitName}}
</view>
</view>
<view class="item_xx">
<view class="">
金额
</view>
<view class="">
{{detailobj.money == undefined ? '--' : detailobj.money}}
</view>
</view>
<view class="item_xx" v-if="detailobj.status == 3">
<view class="">
退款金额
</view>
<view class="">
¥{{detailobj.refundAmount == undefined ? '--' : detailobj.refundAmount}}
</view>
</view>
<view class="item_xx">
<view class="">
经营场所:
</view>
<view class="">
{{detailobj.storeName == undefined ? '--' : detailobj.storeName}} {{detailobj.deviceRoom == undefined ? '' : detailobj.deviceRoom + '室'}}
</view>
</view>
<view class="item_xx">
<view class="">
支付时间:
</view>
<view class="">
{{detailobj.payTime == undefined ? '--' : detailobj.payTime}}
</view>
</view>
</view>
<view class="lishi" v-if="isUsing == true">
<view class="lt">
临时开关
</view>
<view class="rt">
<image v-if="imgflag" @click="btnimg"
src="https://api.ccttiot.com/smartmeter/img/static/uccaWar4FDp37op7haWM " mode=""></image>
<image v-else @click="btnimgs" src="https://api.ccttiot.com/smartmeter/img/static/ur9HRtZKY7YcxGewJARz"
mode=""></image>
</view>
</view>
<!-- 结束订单 -->
<view class="jieshu" v-if="msakflag">
<view class="jieshus">
<view class="tishi">
温馨提示
</view>
<view class="img">
<image src="https://api.ccttiot.com/smartmeter/img/static/uKR4t1SZuW0VrpwgyXDK" mode=""></image>
</view>
<view class="shuom">
结束订单后,设备也将被关闭<br>
套餐费用不予退还,是否结束?
</view>
</view>
<view class="anniu">
<view class="qux" @click="btnqx">
取消
</view>
<view class="qued" @click="btnqd">
确定
</view>
</view>
</view>
<view class="mask" v-if="msakflag"></view>
<view class="dels" @click="btnjieshu" v-if="detailobj.isUsing == true">
结束订单
</view>
<view class="del" @click="btndel" v-if="flag">
删除订单
</view>
<view class="del" v-else>
删除订单
</view>
<!-- 蓝牙连接 -->
<view class="bluetoothbox" v-if="bluetoothflag">
<view class="stop">
设备已离线,正在连接该设备蓝牙
</view>
<view class="xtop">
请将手机与设备尽量靠近,连接成功后可操作
</view>
<image src="https://api.ccttiot.com/smartmeter/img/static/ucDphMKsozqwwllJTAKL" mode=""></image>
</view>
<!-- 蓝牙连接失败 -->
<view class="bluetoothbox" v-if="shibaiflag">
<image class="img" src="https://api.ccttiot.com/smartmeter/img/static/uTb3vSlbcHdPMFQMBjyL" mode=""></image>
<view class="one">
蓝牙连接失败
</view>
<view class="two">
请确保手机足够靠近设备
</view>
<view class="thr">
并且设备处于上电状态
</view>
<view class="anfour">
<view class="qx" @click="btnlyqx">
取消
</view>
<view class="cx" @click="topage">
重新连接
</view>
</view>
</view>
<view v-if="btnmsk"
style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;">
</view>
<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
<image style="width: 100%;height: 100vh;"
src="https://api.ccttiot.com/smartmeter/img/static/u5AWkMT3khOhGPKrUPMH" mode=""></image>
</view>
</view>
</template>
<script>
var xBlufi = require("@/components/blufi/xBlufi.js")
export default {
data() {
return {
imgad: '',
detailobj: {},
billId: '',
timeday: '',
flag: true,
imgflag: true,
msakflag: false,
bluetoothflag: false,
shibaiflag: false,
btnmsk: false,
deviceId: '',
name: '',
setMode: null,
qrResult: '',
isUsing: false,
timer: null,
timers: null,
pictrim:true,
billidflag:''
}
},
onShow() {
// 页面显示时启动定时器
this.startTimers();
},
onHide() {
// 页面隐藏时清除定时器
if (this.timers) {
clearInterval(this.timers);
this.timers = null;
console.log('消除');
}
},
onUnload() {
if (this.timers) {
clearInterval(this.timers);
this.timers = null;
console.log('消除');
}
},
onLoad(option) {
if (option.billId) {
this.billId = option.billId
} else if(option.idss){
this.billidflag = 1
} else {
this.billId = option.id
}
this.getlist()
},
// 分享到好友(会话)
onShareAppMessage: function() {
return {
title: '创亿康',
path: '/pages/index/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '创亿康',
query: '',
path: '/pages/index/index'
}
},
computed: {
formattedTime() {
if (this.timeday.days > 0) {
// 只展示天和小时
return `${this.timeday.days}天${this.timeday.hours}小时`
} else if (this.timeday.hours > 0) {
// 展示小时和分钟
return `${this.timeday.hours}小时${this.timeday.minutes}分钟`
} else if (this.timeday.minutes > 0) {
// 展示分钟和秒
return `${this.timeday.minutes}分钟${this.timeday.seconds}秒`
} else if (this.timeday.seconds == 0) {
this.getlist()
} else {
// 展示秒或0如果秒也为0
this.isUsing = false
return this.timeday.seconds > 0 ? `${this.timeday.seconds}秒` : '0'
}
}
},
methods: {
btnback(){
uni.reLaunch({
url:'/pages/index/index'
})
},
startTimers() {
if (this.timers) {
clearInterval(this.timers); // 防止重复设置定时器
}
this.timers = setInterval(() => {
this.getlist()
}, 60000); // 60秒
},
// 蓝牙连接取消
btnlyqx() {
this.shibaiflag = false
this.bluetoothflag = false
},
// 蓝牙重新连接
topage() {
this.btnmsk = false
this.shibaiflag = false
this.bluetoothflag = true
if (this.setMode == null) {
xBlufi.initXBlufi(1)
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
xBlufi.notifyStartDiscoverBle({
'isStart': true
})
// 停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
})
xBlufi.notifyConnectBle({
isStart: true,
deviceId: this.deviceId,
name: this.name
})
xBlufi.notifyInitBleEsp32({
deviceId: this.deviceId
})
}, 1000)
}
},
// 结束订单
btnjieshu() {
this.msakflag = true
},
btnqx() {
this.msakflag = false
},
btnqd() {
if (this.detailobj.deviceOnlineStatus == 1) {
let data = {
billId: this.billId,
totalEle: 0
}
this.$u.put(`/app/bill/endUse`, data).then(res => {
if (res.code == 200) {
this.getlist()
this.msakflag = false
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
}
})
} else {
if (this.setMode == null) {
this.btnmsk = false
this.shibaiflag = false
this.bluetoothflag = true
xBlufi.initXBlufi(1)
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
xBlufi.notifyStartDiscoverBle({
'isStart': true
})
// 停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
})
xBlufi.notifyConnectBle({
isStart: true,
deviceId: this.deviceId,
name: this.name
})
xBlufi.notifyInitBleEsp32({
deviceId: this.deviceId
})
}, 1000)
} else {
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(() => {
xBlufi.notifySendCustomData({
customData: '11time0@'
})
uni.showToast({
title: '操作成功',
icon: 'success',
duration: 1000
})
let data = {
billId: that.billId,
totalEle: 0
}
that.$u.put(`/app/bill/endUse`, data).then(
res => {
if (res.code == 200) {
that.getlist()
that.msakflag = false
that.btnmsk = false
that.shibaiflag = false
that.bluetoothflag = false
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
}
})
}, 1000)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:', err)
}
})
}
}
})
}
}
},
// 点击临时开关
btnimg() {
if(this.pictrim == true){ //防止频繁点击
this.pictrim = false
setTimeout(()=>{
this.pictrim = true
},5000)
if (this.detailobj.deviceOnlineStatus == 1) {
this.$u.put(`/app/bill/switchDevice?billId=${this.billId}&open=false`).then(res => {
if (res.code == 200) {
this.imgflag = false
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
}
})
} else {
if (this.setMode == null) {
this.btnmsk = false
this.shibaiflag = false
this.bluetoothflag = true
xBlufi.initXBlufi(1)
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
xBlufi.notifyStartDiscoverBle({
'isStart': true
})
// 停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
})
xBlufi.notifyConnectBle({
isStart: true,
deviceId: this.deviceId,
name: this.name
})
xBlufi.notifyInitBleEsp32({
deviceId: this.deviceId
})
}, 1000)
} else {
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(() => {
xBlufi.notifySendCustomData({
customData: '11close'
})
uni.showToast({
title: '操作成功',
icon: 'success',
duration: 1000
})
this.imgflag = false
that.getlist()
that.msakflag = false
that.btnmsk = false
that.shibaiflag = false
that.bluetoothflag = false
}, 1000)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:', err)
}
})
}
}
})
}
}
}else{
uni.showToast({
title: '请不要频繁点击',
icon: 'none',
duration: 1000
})
}
},
btnimgs() {
if(this.pictrim == true){ //防止频繁点击
this.pictrim = false
setTimeout(()=>{
this.pictrim = true
},5000)
if (this.detailobj.deviceOnlineStatus == 1) {
this.$u.put(`/app/bill/switchDevice?billId=${this.billId}&open=true`).then(res => {
if (res.code == 200) {
this.imgflag = true
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
}
})
} else {
if (this.setMode == null) {
this.btnmsk = false
this.shibaiflag = false
this.bluetoothflag = true
xBlufi.initXBlufi(1)
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
xBlufi.notifyStartDiscoverBle({
'isStart': true
})
// 停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
})
xBlufi.notifyConnectBle({
isStart: true,
deviceId: this.deviceId,
name: this.name
})
xBlufi.notifyInitBleEsp32({
deviceId: this.deviceId
})
}, 1000)
} else {
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(() => {
xBlufi.notifySendCustomData({
customData: '11open'
})
uni.showToast({
title: '操作成功',
icon: 'success',
duration: 1000
})
this.imgflag = true
that.getlist()
that.msakflag = false
that.btnmsk = false
that.shibaiflag = false
that.bluetoothflag = false
}, 1000)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:', err)
}
})
}
}
})
}
}
}else{
uni.showToast({
title: '请不要频繁点击',
icon: 'none',
duration: 1000
})
}
},
btndel() {
let that = this
uni.showModal({
title: '提示',
content: '您确定要删除此订单吗?',
success: function(res) {
if (res.confirm) {
that.flag = false
that.$u.delete(`/app/bill/${that.billId}`).then(res => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 1000
})
setTimeout(() => {
that.flag = true
uni.navigateBack()
}, 1500)
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
setTimeout(() => {
that.flag = true
}, 1500)
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 请求订单详情
getlist() {
this.$u.get(`/app/bill/${this.billId}`).then((res) => {
if (res.code == 200) {
this.detailobj = res.data
this.isUsing = res.data.isUsing
this.qrResult = res.data.deviceMac
if (res.data.devicePowerStatus == 1) {
this.imgflag = true
} else {
this.imgflag = false
}
if (this.detailobj.device.expireTime == null) {
this.timeday = 0
} else {
let expireTimeStr = this.detailobj.device.expireTime
let expireTimeParts = expireTimeStr.split(" ")
let expireDateParts = expireTimeParts[0].split("-")
let expireTimePartsTime = expireTimeParts[1].split(":")
let expireDate = new Date(expireDateParts[0], expireDateParts[1] - 1,
expireDateParts[2],
expireTimePartsTime[0], expireTimePartsTime[1], expireTimePartsTime[2])
let now = new Date()
let differenceInMs = expireDate - now
if (differenceInMs <= 0) {
this.timeday = 0
} else {
if (this.timeday == '') {
this.timeday = this.formatMilliseconds(differenceInMs)
this.startTimer()
}
}
}
}
})
},
// 订单倒计时定时器
startTimer() {
this.timer = setInterval(() => {
if (this.timeday.seconds > 0) {
this.timeday.seconds--
} else if (this.timeday.minutes > 0) {
this.timeday.seconds = 59 // 重置秒数为59
this.timeday.minutes--
} else if (this.timeday.hours > 0) {
this.timeday.minutes = 59 // 重置分钟数为59
this.timeday.hours--
this.timeday.seconds = 0 // 同时重置秒数为0
} else if (this.timeday.days > 0) {
this.timeday.hours = 23 // 重置小时数为23
this.timeday.minutes = 59 // 重置分钟数为59
this.timeday.seconds = 0 // 重置秒数为0
this.timeday.days--
} else {
// 所有时间单位都已减为0停止定时器
clearInterval(this.timer)
this.timer = null;
console.log('时间已到期')
}
}, 1000); // 每秒执行一次
},
formatMilliseconds(milliseconds) {
// 计算天数
let days = Math.floor(milliseconds / (1000 * 60 * 60 * 24))
// 计算剩余的小时数
let hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
// 计算剩余的分钟数
let minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60))
// 计算剩余的秒数
let seconds = Math.floor((milliseconds % (1000 * 60)) / 1000)
// 返回一个对象,包含天、小时、分钟和秒
return {
days: days,
hours: hours,
minutes: minutes,
seconds: seconds
}
},
// 搜索蓝牙部分
funListenDeviceMsgEvent: function(options) {
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
let loadPercent = options.data;
let loadText = '文件读取中'
// console.log("文件读取中", options.data)
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
let ver_data = this.parseCustomData(options.data)
this.setMode = Math.floor(ver_data.setMode / 60)
console.log("1收到设备发来的自定义数据结果", ver_data, this.setMode)
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
if (options.result) {
let devicesarr = options.data
devicesarr.forEach(device => {
const mac = device.name.substring(5)
if (device.name.slice(5, 17) == this.qrResult) {
this.deviceId = device.deviceId
this.name = device.name
this.mac = device.name.slice(5, 17)
}
})
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
// console.log("连接回调:" + JSON.stringify(options))
if (options.result) {
setTimeout(() => {
this.bluetoothflag = false
}, 3000)
uni.hideLoading(); {
console.log("连接回调options.data.deviceId" + options.data.deviceId,
"连接回调options.data.name" + options.data.name)
}
} else {
this.shibaiflag = true
this.bluetoothflag = false
uni.hideLoading()
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
if (!options.result) {
setTimeout(() => {
uni.hideLoading()
this.bluetoothflag = false
}, 3000)
console.log("蓝牙未开启", options)
this.shibaiflag = true
return
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
if (options.result) {
let uniqueDevicesList = Array.from(new Set(this.devicesList))
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList
let list = []
setTimeout(() => {
this.devicesList = list
}, 200)
console.log('蓝牙停止搜索ok')
} else {
//蓝牙停止搜索失败
console.log('蓝牙停止搜索失败')
}
this.searching = false
break
}
},
parseCustomData(data) {
const dataArray = data.split('@');
const parsedData = {};
const prefixMap = {
'V': 'voltage',
'S': 'switchState',
'A': 'current',
'P': 'power',
'M': 'remainingPower',
'T': 'setMode',
'W': 'temperature'
};
// 遍历数组并解析每个字段
for (let i = 0; i < dataArray.length; i++) {
const field = dataArray[i];
for (const prefix in prefixMap) {
if (field.startsWith(prefix)) {
const value = field.substring(1);
const propertyName = prefixMap[prefix];
parsedData[propertyName] = isNaN(parseFloat(value)) ? value : parseFloat(value);
break;
}
}
}
return parsedData;
},
}
}
</script>
<style lang="scss">
/deep/ .u-title {
padding-bottom: 15rpx;
}
/deep/ .u-icon__icon {
padding-bottom: 15rpx;
}
page {
background: #F4F5F7;
}
.bluetoothbox {
width: 100%;
height: 100vh;
background-color: #f4f1f6;
position: fixed;
top: 0;
left: 0;
z-index: 99;
text-align: center;
.img {
margin-top: 400rpx;
width: 320rpx;
height: 320rpx;
}
.one {
font-size: 36rpx;
color: #000;
}
.two {
margin-top: 30rpx;
font-size: 24rpx;
color: #ccc;
}
.thr {
margin-top: 30rpx;
font-size: 28rpx;
color: #ccc;
}
.anfour {
display: flex;
margin-top: 30rpx;
justify-content: space-between;
padding: 0 220rpx;
box-sizing: border-box;
.qx {
width: 100rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
border: 1px solid #3D3D3D;
border-radius: 10rpx;
}
.cx {
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
background-color: #8883F0;
color: #fff;
border-radius: 10rpx;
}
}
.stop {
font-size: 36rpx;
color: #000;
margin-top: 380rpx;
}
.xtop {
margin-top: 30rpx;
font-size: 24rpx;
color: #ccc;
}
.xqx {
width: 530rpx;
height: 90rpx;
line-height: 90rpx;
border-radius: 20rpx;
text-align: center;
background-color: #fff;
margin: auto;
margin-top: 200rpx;
}
image {
width: 500rpx;
height: 500rpx;
margin-top: 100rpx;
}
}
.jieshu {
position: fixed;
top: 30%;
left: 50%;
transform: translateX(-50%);
z-index: 2;
.jieshus {
width: 500rpx;
max-height: 430rpx;
border-radius: 20rpx 20rpx 0 0;
padding: 20rpx;
box-sizing: border-box;
background-color: #fff;
}
.tishi {
font-size: 32rpx;
width: 100%;
text-align: center;
}
.img {
width: 100%;
margin-top: 20rpx;
text-align: center;
margin-bottom: 20rpx;
image {
width: 160rpx;
height: 140rpx;
}
}
.shuom {
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
text-align: center;
}
.anniu {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
border-radius: 0 0 20rpx 20rpx;
.qux {
text-align: center;
width: 100%;
font-size: 30rpx;
height: 80rpx;
line-height: 80rpx;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
font-weight: 600;
}
.qued {
text-align: center;
width: 100%;
font-size: 30rpx;
height: 80rpx;
line-height: 80rpx;
border-top: 1px solid #ccc;
color: red;
font-weight: 600;
}
}
}
.lishi {
width: 100%;
height: 110rpx;
background-color: #fff;
padding: 24rpx;
box-sizing: border-box;
margin-top: 30rpx;
border-radius: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
.lt {
font-size: 32rpx;
}
.rt {
image {
width: 160rpx;
height: 80rpx;
}
}
}
.del {
position: fixed;
bottom: 100rpx;
left: 50%;
transform: translateX(-50%);
// background-color: #fff;
// background: linear-gradient(to right, #FFEFEF 20%, #D9F6FF 100%);
background-color: rgb(162, 91, 91);
padding-left: 50rpx;
padding-right: 50rpx;
width: 650rpx;
height: 84rpx;
// background: red;
filter: blur(0px);
text-align: center;
line-height: 84rpx;
font-size: 36rpx;
color: #fff;
border-radius: 50rpx;
}
.dels {
position: fixed;
bottom: 200rpx;
left: 50%;
transform: translateX(-50%);
background-color: rgb(126, 126, 126);
padding-left: 50rpx;
padding-right: 50rpx;
width: 650rpx;
height: 84rpx;
// background: red;
filter: blur(0px);
text-align: center;
line-height: 84rpx;
font-size: 36rpx;
color: #fff;
border-radius: 50rpx;
}
.mask {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #000;
opacity: .6;
z-index: 1;
}
.page {
width: 750rpx;
height: 100vh;
overflow: hidden;
padding: 0 46rpx;
box-sizing: border-box;
.guangg {
margin-top: 30rpx;
margin-bottom: 10rpx;
image {
border-radius: 30rpx;
width: 100%;
height: 218rpx;
}
}
.list_item {
width: 658rpx;
max-height: 410rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
border-radius: 24rpx 24rpx 24rpx 24rpx;
margin: auto;
margin-top: 30rpx;
padding: 24rpx 30rpx;
box-sizing: border-box;
.top {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #D8D8D8;
padding-bottom: 20rpx;
box-sizing: border-box;
.bh {
font-size: 28rpx;
color: #3D3D3D;
}
.wc {
font-size: 28rpx;
color: #8883F0;
}
}
.bot {
margin-top: 22rpx;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28rpx;
padding-top: 20rpx;
box-sizing: border-box;
border-top: 1px solid #D8D8D8;
.time {
font-size: 24rpx;
color: #808080;
}
.pagexq {
width: 142rpx;
height: 48rpx;
background: #8883F0;
border-radius: 26rpx 26rpx 26rpx 26rpx;
text-align: center;
line-height: 48rpx;
font-size: 24rpx;
color: #FFFFFF;
border-radius: 20rpx;
}
}
.item_xx {
margin-top: 22rpx;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #3D3D3D;
}
}
.shengyu {
font-size: 40rpx;
color: #3D3D3D;
margin-top: 46rpx;
}
.time {
font-size: 48rpx;
color: #8883F0;
margin-top: 12rpx;
}
.setmeal {
margin-top: 38rpx;
width: 658rpx;
height: 150rpx;
background: rgba(136, 131, 240, 0.1);
border-radius: 24rpx 24rpx 24rpx 24rpx;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07999999821186066), rgba(156.31499379873276, 140.25000303983688, 255, 0.23999999463558197)) 2 2;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 42rpx;
box-sizing: border-box;
.cen {
width: 2rpx;
height: 108rpx;
border: 2rpx solid #8883F0;
opacity: 0.5;
}
.lt {
display: flex;
align-items: center;
text-align: center;
image {
width: 84rpx;
height: 84rpx;
margin-right: 30rpx;
}
.one {
font-size: 32rpx;
color: #3D3D3D;
}
.two {
font-size: 24rpx;
color: #3D3D3D;
margin-top: 8rpx;
}
}
.rt {
display: flex;
align-items: center;
text-align: center;
image {
width: 84rpx;
height: 84rpx;
margin-right: 30rpx;
}
.one {
font-size: 32rpx;
color: #3D3D3D;
}
.two {
font-size: 24rpx;
color: #3D3D3D;
margin-top: 8rpx;
}
}
}
}
</style>