1263 lines
30 KiB
Vue
1263 lines
30 KiB
Vue
<template>
|
|
<view class="box flex justify-start flex-column align-items">
|
|
<view class="swiper">
|
|
<u-swiper :list="detail.detail.images" indicator indicatorMode="line" height="450rpx" circular></u-swiper>
|
|
</view>
|
|
<view class="con-center w-100 flex justify-center flex-column align-items flex-start">
|
|
<view class="first-box flex flex-start flex-column justify-start">
|
|
<span class="first-name">{{detail.detail.title}}</span>
|
|
<view class="flex w-100 align-items" style="margin-top:28rpx;justify-content: space-between;">
|
|
<span class="first-money" v-if="detail.detail.feel == 0">￥{{detail.detail.price}}</span>
|
|
<span class="first-money" v-if="detail.detail.feel == 1"></span>
|
|
<!-- <span class="first-money" v-if="detail.detail.feel == 1">免费</span> -->
|
|
<!-- <view class="flex align-items justify-center" style="width: 30%;
|
|
justify-content: space-between;
|
|
margin-right: 24rpx;">
|
|
<span class="first-mine">{{ Number(detail.detail.sign_num + detail.detail.virtual_num)}}/{{detail.detail.limit_num}}</span>
|
|
<span class="first-txt">名额</span>
|
|
<image src="../../static/center/minge.png" mode="" class="icon-size"></image>
|
|
</view> -->
|
|
</view>
|
|
<span class="line"></span>
|
|
<span class="first-image flex align-items"
|
|
@click.stop="toMap(detail.detail.latitude,detail.detail.longitude,detail.detail.address_detail)">
|
|
<image src="../../static/center/address.png" mode="" class="icon-size"></image>
|
|
{{detail.detail.address_detail}}
|
|
</span>
|
|
<span class="first-image flex align-items">
|
|
<image src="../../static/center/Calendar.png" mode="" class="icon-size"></image>
|
|
上课日期:{{detail.detail.start_time | formatDateTime}} - {{detail.detail.end_time | formatDateTime}}
|
|
</span>
|
|
<!-- <span class="first-image flex align-items" v-if="detail.detail.classes_time_text">
|
|
<image src="../../static/center/Alarm.png" mode="" class="icon-size"></image>
|
|
上课时间:{{detail.detail.classes_time_text}}
|
|
</span> -->
|
|
<view class="flex justify-center flex-column align-items w-100" v-if="type == 2">
|
|
<image :src="detail.codeimage" mode="" style="width: 376rpx; height: 376rpx;"></image>
|
|
<span style="margin: 34rpx 0;font-weight: 800;font-size: 38rpx;color: #343434;">核销二维码</span>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 课程详情 -->
|
|
<view class="six flex flex-column" style="justify-content: flex-start;">
|
|
<view class="six-header flex align-items space-between">
|
|
<image src="../../static/center/kecheng.png" mode="" style="width: 168rpx; height: 48rpx;"></image>
|
|
</view>
|
|
<view class="six-center flex first-txt flex-start flex-column">
|
|
<u-parse :content="detail.detail.content" ></u-parse>
|
|
</view>
|
|
</view>
|
|
<!-- 课程须知 -->
|
|
<view class="six flex flex-column" style="justify-content: flex-start;">
|
|
<view class="six-header flex align-items space-between">
|
|
<image src="../../static/center/xuzhi.png" mode="" style="width: 168rpx; height: 48rpx;"></image>
|
|
</view>
|
|
<view class="six-center flex first-txt flex-column">
|
|
<u-parse :content="detail.detail.notice"></u-parse>
|
|
<!-- <rich-text :nodes="detail.notice" style="width: 100%;" :tagStyle="style"></rich-text> -->
|
|
</view>
|
|
</view>
|
|
<view class="four flex justify-start align-items flex-column">
|
|
<view class="four-box flex justify-start align-items w-100"
|
|
@click="toTeacher(detail.detail.teacher.id)">
|
|
<view class="four-header flex align-items w-100" style="justify-content: space-between;">
|
|
<view class="flex align-items" style="justify-content: start; width: 70%;">
|
|
<image :src="detail.detail.teacher.head_image" mode=""
|
|
style="width: 100rpx; height: 125rpx;">
|
|
</image>
|
|
<span class="flex justify-center flex-column"
|
|
style="align-items: flex-start;margin-left: 18rpx;">
|
|
<span class="four-name">{{detail.detail.teacher.name}}</span>
|
|
<span class="jigou">{{detail.detail.shop.name}}</span>
|
|
<span class="flex align-items rate">
|
|
<u-rate :count="count" active-color="#FFBC2C" v-model="detail.detail.teacher.teacher_star" allowHalf="true" readonly></u-rate>
|
|
{{detail.detail.teacher.teacher_star}}分
|
|
</span>
|
|
</span>
|
|
</view>
|
|
<view class="four-right flex flex-column align-items">
|
|
<image src="../../static/center/teacher.png" mode="" style="width: 168rpx; height: 48rpx;">
|
|
</image>
|
|
<span class="teacher-detail flex align-items">教师详情
|
|
<image src="../../static/center/right.png" mode="" style="width: 24rpx; height: 24rpx;">
|
|
</image>
|
|
</span>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<span class="line" style="width: 93%;"></span>
|
|
<span class="tt-detail flex ">
|
|
<span>教师简介:</span>
|
|
<u-parse :content="detail.detail.teacher.content" ></u-parse>
|
|
</span>
|
|
</view>
|
|
<!-- 机构 -->
|
|
<view class="five flex align-items">
|
|
<view class="five-box flex ">
|
|
<view class="five-left flex align-items" style="justify-content: space-around;" @click="toMeDetail()">
|
|
<image :src="detail.shop.logo" mode="" style="width: 78rpx; height: 78rpx;border-radius:50%">
|
|
</image>
|
|
<span class="flex flex-column justify-center"
|
|
style="align-items: left; margin-left: 24rpx;width: 550rpx;">
|
|
<span class="five-name">{{detail.shop.name}}</span>
|
|
<span class="five-address white-space">{{detail.shop.address_detail}}</span>
|
|
</span>
|
|
</view>
|
|
<!-- <span class="five-right flex align-items" @click="toMeDetail()">
|
|
更多课程
|
|
<image src="../../static/center/right.png" mode="" style="width: 24rpx; height: 24rpx;"></image>
|
|
</span> -->
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="footer flex align-items" style="justify-content: space-between;">
|
|
<view class="footer-left">
|
|
<!-- <view>
|
|
<image src="../../static/center/home.png" mode=""></image>
|
|
<span>首页</span>
|
|
</view> -->
|
|
<view class="price" v-if="detail.detail.feel == 0 && type == 1">
|
|
<span style="font-weight: 800;font-size: 28rpx;color: #FF2323;">￥{{detail.detail.price}}</span>
|
|
<span
|
|
style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #7A7A7A;">剩余时间:24:00:00</span>
|
|
</view>
|
|
<view class="price" v-if="detail.detail.feel == 1 && type == 1">
|
|
<span style="font-weight: 800;font-size: 28rpx;color: #FF2323;">免费</span>
|
|
</view>
|
|
|
|
<view class="lan" v-if="type == 2">
|
|
课时:{{detail.detail.verification_num}}/{{detail.detail.limit_num}}
|
|
</view>
|
|
<view class="lan" v-if="type == 9">
|
|
课程已完成
|
|
</view>
|
|
<view class="lan" v-if="type == 6">
|
|
已退款
|
|
</view>
|
|
<view class="lan" v-if="type == -3">
|
|
订单已取消
|
|
</view>
|
|
<!-- <view>
|
|
<image src="../../static/center/share.png" mode=""></image>
|
|
<span>分享</span>
|
|
</view>
|
|
<view v-if="status == false " @click="Collect">
|
|
<image src="../../static/center/Collect.png" mode=""></image>
|
|
<span>收藏</span>
|
|
</view>
|
|
<view v-if="status == true" @click="Collect">
|
|
<image src="../../static/center/Collected.png" mode=""></image>
|
|
<span>已收藏</span>
|
|
</view> -->
|
|
</view>
|
|
<view class="footer-right align-items">
|
|
<span class="cancel" v-if="type == 1" @click="cancelOrder()"> 取消订单 </span>
|
|
<span class="cancel" v-if="type == 6" @click="toService()"> 申请售后 </span>
|
|
<span class="lan" v-if="type == 9 || type == -3 || type == 6" @click="sign()"> 再次购买 </span>
|
|
<span class="lan" v-if="type == 1" @click="buy()"> 去付款 </span>
|
|
<span class="lan" v-if="type == 2" @click="open()"> 我要预约 </span>
|
|
<span class="lan" v-if="type == 3" @click="confimTime()"> 确认时间 </span>
|
|
<!-- <image src="../../static/center/signUp.png" mode="" v-if="type == 0" @click="sign()"></image>
|
|
<image src="../../static/center/appointment.png" mode="" v-else-if="type == 1" @click="open()"></image>
|
|
<image src="../../static/center/Confirm.png" mode="" v-else="type == 2" @click="confimTime()"></image> -->
|
|
</view>
|
|
</view>
|
|
<!-- 课程时间 -->
|
|
<u-popup :show="show" mode="bottom" :round="10" :zIndex="99999" :custom-style="popupStyle" @close="close"
|
|
@open="open">
|
|
<view class="popupBox flex justify-start align-items flex-column">
|
|
<view class="pop-header flex align-items" style="justify-content: space-between;">
|
|
<image src="../../static/center/classTime.png" mode="" style="width: 252rpx; height: 48rpx;">
|
|
</image>
|
|
<span @click="cancel">取消选择</span>
|
|
</view>
|
|
<!-- <span class="line"></span> -->
|
|
<view class="times flex align-items justify-start" style="flex-wrap: wrap;">
|
|
<span class="selectTime flex justify-center align-items" v-for="(item,index) in timeList"
|
|
:key="index" :class="{ selected: timeSelected(item) }" @click="selectTime(item)">
|
|
{{item.name}}</span>
|
|
</view>
|
|
</view>
|
|
|
|
</u-popup>
|
|
<!-- 购买弹窗 -->
|
|
<u-popup :show="buyShow" mode="bottom" :round="10" :zIndex="99999" :custom-style="popupStyle" @close="buyClose"
|
|
@open="buyOpen">
|
|
<view class="popupBox flex justify-start align-items flex-column">
|
|
<view class="pop-header flex align-items" style="justify-content: space-between;">
|
|
<image src="../../static/center/buy.png" mode="" style="width: 168rpx; height: 48rpx;">
|
|
</image>
|
|
</view>
|
|
<view class="popup">
|
|
<image :src="detail.detail.headimage" mode="" style="width: 200rpx; height: 140rpx;"></image>
|
|
<view class="popur-right flex flex-column">
|
|
<span class="name">{{detail.detail.title}}</span>
|
|
<span class="address">地址:{{detail.detail.address_detail}}1561615665</span>
|
|
<span class="date">日期:{{detail.detail.start_time | formatDateTime}} - {{detail.detail.end_time | formatDateTime}}</span>
|
|
<!-- <span class="time">时间:{{detail.detail.classes_time_text}}</span> -->
|
|
<span class="line-row"></span>
|
|
<span class="price">
|
|
课程价格:
|
|
<span v-if="detail.detail.feel == 0">￥{{detail.detail.price}}</span>
|
|
<span v-if="detail.detail.feel == 1">免费</span>
|
|
</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import indexBackgroundImage from "@/static/center/firstBack.png"
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
buyShow: false,
|
|
type: 0, // 0 支付 1 立即购买 2 预约 3确认时间
|
|
id: 1,
|
|
count: 5,
|
|
value: 5,
|
|
order_no: '',
|
|
PayPirce: 0,
|
|
detail: {},
|
|
people: {},
|
|
virtual_people: 0,
|
|
popupStyle: {
|
|
bottom: '122rpx',
|
|
width: '100%',
|
|
margin: '0 auto', // 水平居中
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
},
|
|
timeList: [],
|
|
selectedTime: null,
|
|
// indexBackgroundImage: indexBackgroundImage,
|
|
status: false,
|
|
orderId: "",
|
|
classes_lib_spec_id: '',
|
|
order_no2: '',
|
|
classes_lib_id: ''
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.id = options.id
|
|
this.orderId = options.orderId
|
|
this.classes_lib_id = options.classes_lib_id
|
|
// this.id = 1
|
|
if (options.type == 2) {
|
|
this.type = 2
|
|
this.orderId = options.orderId
|
|
}
|
|
if (options.type == 1) {
|
|
this.type = 1
|
|
this.order_no = options.order_no
|
|
}
|
|
if (options.type == 9) {
|
|
this.type = 9
|
|
}
|
|
if (options.type == -3) {
|
|
this.type = -3
|
|
}
|
|
if (options.type == 6) {
|
|
this.type = 6
|
|
}
|
|
console.log(options.id)
|
|
this.getDetail()
|
|
this.getTime()
|
|
},
|
|
filters: {
|
|
formatDateTime(timestamp) {
|
|
if (!timestamp) return '';
|
|
const date = new Date(timestamp * 1000);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 获取课时规格
|
|
getTime() {
|
|
uni.$u.http.get('/api/school/classes/spec', {
|
|
params: {
|
|
id: this.classes_lib_id,
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
|
|
this.timeList = res.data.spec;
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
// 售后
|
|
toService() {
|
|
|
|
},
|
|
|
|
// 获取详情
|
|
getDetail() {
|
|
uni.$u.http.get('/api/school/order/detail', {
|
|
params: {
|
|
id: this.orderId,
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.detail = res.data.detail
|
|
this.virtual_people = res.data.detail.views
|
|
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}).catch(error => {});
|
|
},
|
|
// 报名 0 支付 1 立即购买 2 预约 3确认时间
|
|
|
|
sign() {
|
|
this.buyShow = true
|
|
this.type = 3
|
|
// uni.navigateTo({
|
|
// url: '/pages/CashierDesk/CashierDesk?id=' + this.id
|
|
// })
|
|
|
|
},
|
|
// 导航
|
|
toMap(latitude, longitude, name) {
|
|
uni.openLocation({
|
|
latitude: parseFloat(latitude),
|
|
longitude: parseFloat(longitude),
|
|
name:name,
|
|
success: function() {
|
|
console.log('success');
|
|
}
|
|
});
|
|
},
|
|
// 取消订单
|
|
cancelOrder() {
|
|
uni.$u.http.post('/api/school/order/cancel', {
|
|
order_no: this.order_no
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
// uni.navigateBack(1)
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
success: (event) => {
|
|
const pages = getCurrentPages()
|
|
let prevPage = pages[pages.length - 1]
|
|
prevPage.onLoad(prevPage.options)
|
|
}
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {});
|
|
},
|
|
buy() {
|
|
this.pament()
|
|
},
|
|
// 购买弹窗 type = 0 支付 1 立即购买 2 预约 3确认时间
|
|
buyOpen() {
|
|
this.buyShow = true
|
|
this.type = 1
|
|
},
|
|
// 预约弹窗 type = 2 0 支付 1 立即购买 2 预约 3确认时间
|
|
open() {
|
|
this.show = true
|
|
this.type = 3
|
|
},
|
|
// 确认时间 type = 0 0 支付 1 立即购买 2 预约 3确认时间
|
|
confimTime() {
|
|
uni.$u.http.post('/api/school/hour_order/confirm', {
|
|
classes_order_id: this.orderId,
|
|
classes_lib_spec_id: this.classes_lib_spec_id,
|
|
order_no: this.order_no2,
|
|
is_compute: 1
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.order_no2 = res.data.order_no
|
|
this.timeCreat(res.data.order_no)
|
|
|
|
} else {
|
|
this.type = 2
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
// _this.$api.toast(res.msg);
|
|
}
|
|
}).catch(error => {
|
|
|
|
});
|
|
|
|
this.show = false
|
|
this.type = 0
|
|
},
|
|
// 预约下单
|
|
timeCreat(order_no) {
|
|
uni.$u.http.post('/api/school/hour_order/create', {
|
|
order_no: order_no,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'none',
|
|
duration: 2000,
|
|
complete: function() {
|
|
setTimeout(function() {
|
|
uni.redirectTo({
|
|
url: "/packageA/my/makeList?status=" + -1
|
|
})
|
|
}, 2000);
|
|
}
|
|
})
|
|
|
|
} else {
|
|
this.type = 2
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
// _this.$api.toast(res.msg);
|
|
}
|
|
}).catch(error => {
|
|
|
|
});
|
|
},
|
|
// 教师详情
|
|
toTeacher(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/center/teacherDetail?id=${id}`
|
|
})
|
|
},
|
|
// 机构详情
|
|
toMeDetail() {
|
|
const jigouId = this.detail.shop.id
|
|
uni.navigateTo({
|
|
url: "/pages/center/MechanismDetail?id=" + jigouId
|
|
})
|
|
},
|
|
|
|
close() {
|
|
this.type = 2
|
|
this.selectedTime = null
|
|
this.show = false
|
|
},
|
|
buyClose() {
|
|
this.type = 1
|
|
this.selectedTime = null
|
|
this.buyShow = false
|
|
},
|
|
Collect() {
|
|
console.log(this.status)
|
|
this.status = !this.status
|
|
},
|
|
// 取消选择
|
|
cancel() {
|
|
this.selectedTime = null
|
|
},
|
|
selectTime(time) {
|
|
this.selectedTime = time;
|
|
this.classes_lib_spec_id = time.id
|
|
|
|
},
|
|
timeSelected(time) {
|
|
return this.selectedTime === time;
|
|
},
|
|
// 获取价格
|
|
getMoney() {
|
|
uni.$u.http.post('/api/school/order/confirm', {
|
|
classes_lib_id: this.id,
|
|
order_no: this.order_no,
|
|
is_compute: 1
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.PayPirce = res.data.order_data.totalprice
|
|
this.order_no = res.data.order_no
|
|
this.create(this.order_no, this.PayPirce)
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
// _this.$api.toast(res.msg);
|
|
}
|
|
}).catch(error => {
|
|
|
|
});
|
|
},
|
|
// 创建订单
|
|
create(order_no, PayPirce) {
|
|
uni.$u.http.post('/api/school/order/create', {
|
|
order_no: order_no,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
if (PayPirce != 0) {
|
|
this.pament()
|
|
} else {
|
|
uni.showToast({
|
|
title: '创建成功',
|
|
icon: 'success',
|
|
duration: 2000,
|
|
complete: function() {
|
|
setTimeout(function() {
|
|
uni.reLaunch({
|
|
url: "/packageA/my/orderList?status=" + 3
|
|
})
|
|
}, 2000);
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
// _this.$api.toast(res.msg);
|
|
}
|
|
}).catch(error => {
|
|
|
|
});
|
|
},
|
|
// 支付
|
|
pament() {
|
|
const that = this
|
|
uni.$u.http.post('/api/school/pay/payment', {
|
|
type: 'wechat',
|
|
order_no: that.order_no,
|
|
platform: 'miniapp'
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
wx.requestPayment({
|
|
timeStamp: res.data.paydata.timeStamp, //时间戳
|
|
nonceStr: res.data.paydata.nonceStr, //随机字符串
|
|
package: res.data.paydata.package, //prepay_id
|
|
signType: res.data.paydata.signType, //签名算法MD5
|
|
paySign: res.data.paydata.paySign, //签名
|
|
success(res) {
|
|
if (res.errMsg == "requestPayment:ok") {
|
|
this.order_no = ''
|
|
uni.redirectTo({
|
|
url: "/packageA/my/orderList?status=" + 3
|
|
})
|
|
console.log('支付成功', res)
|
|
} else {
|
|
console.log('支付失败')
|
|
}
|
|
},
|
|
fail(res) {
|
|
console.log('支付失败', res)
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
// _this.$api.toast(res.msg);
|
|
}
|
|
}).catch(error => {
|
|
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.align-items {
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-flow: column;
|
|
}
|
|
|
|
.justify-start {
|
|
justify-content: start;
|
|
}
|
|
|
|
.white-space {
|
|
overflow: hidden;
|
|
/* 确保超出容器的文本被隐藏 */
|
|
white-space: nowrap;
|
|
/* 确保文本在一行内显示 */
|
|
text-overflow: ellipsis;
|
|
/* 使用省略号表示被截断的文本 */
|
|
width: 100%;
|
|
}
|
|
|
|
.con-center {
|
|
background: linear-gradient(to bottom,
|
|
#F1F2F8 0%,
|
|
#F1F2F8 10%,
|
|
#FFFFFF 50%,
|
|
#FFFFFF 95%);
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 450rpx;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.first-box {
|
|
width: 90%;
|
|
background: #FFFFFF;
|
|
padding-left: 24rpx;
|
|
margin-top: 24rpx;
|
|
|
|
.first-name {
|
|
width: 100%;
|
|
height: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 34rpx;
|
|
color: #343434;
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.first-money {
|
|
height: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #FF2323;
|
|
}
|
|
|
|
.first-mine {
|
|
height: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
}
|
|
|
|
.first-txt {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.first-image {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
margin: 16rpx 0 16rpx 0;
|
|
}
|
|
}
|
|
|
|
.second-box {
|
|
width: 90%;
|
|
margin-top: 42rpx;
|
|
// background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
padding-left: 24rpx;
|
|
position: relative;
|
|
|
|
.second-title {
|
|
// margin: 17rpx 35rpx 15rpx 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.second {
|
|
padding: 24rpx 23rpx 0 0rpx;
|
|
margin-top: 32rpx;
|
|
|
|
view {
|
|
width: 20%;
|
|
margin: 24rpx 0 0 0;
|
|
}
|
|
|
|
image {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
}
|
|
|
|
span {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
.number {
|
|
width: 108rpx;
|
|
color: #FF4949;
|
|
font-size: 42rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.third {
|
|
margin-top: 24rpx;
|
|
width: 93%;
|
|
|
|
.third-header {
|
|
padding-bottom: 12rpx;
|
|
border-bottom: 2rpx solid #008CFF;
|
|
}
|
|
|
|
.third-box {
|
|
margin: 12rpx 0 0 24rpx;
|
|
}
|
|
|
|
.third-center {
|
|
margin-top: 28rpx;
|
|
width: 100%;
|
|
height: 242rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.scroll-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
animation: scroll 12s linear infinite;
|
|
}
|
|
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(calc(-100% + 8 * 100px));
|
|
/* 8 * 100px 是假设每个项目的宽度为 100px */
|
|
}
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
width: 94%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 22rpx 24rpx 24rpx 24rpx;
|
|
height: 32rpx;
|
|
|
|
/* 假设每条数据的高度为60rpx */
|
|
}
|
|
|
|
.item image {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.line-colum {
|
|
margin: 0 10rpx;
|
|
border-left: 1rpx solid #ccc;
|
|
height: 42rpx;
|
|
}
|
|
|
|
.item span {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(-240rpx);
|
|
/* 总高度为 4 * 60rpx = 240rpx */
|
|
}
|
|
}
|
|
}
|
|
|
|
.four {
|
|
margin-top: 42rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
width: 93%;
|
|
// height: 338rpx;
|
|
|
|
.four-box {
|
|
.four-header {
|
|
padding: 32rpx 34rpx 15rpx 24rpx;
|
|
|
|
.four-name {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #4974FF;
|
|
}
|
|
|
|
.jigou {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 24rpx;
|
|
color: #008CFF;
|
|
line-height: 26rpx;
|
|
margin: 8rpx 0 12rpx 0;
|
|
}
|
|
|
|
.rate {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 26rpx;
|
|
color: #FFBC2C;
|
|
line-height: 26rpx;
|
|
}
|
|
|
|
.teacher-detail {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #008CFF;
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.four-right {
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
height: 115rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.tt-detail {
|
|
width: 93%;
|
|
padding: 0rpx 24rpx 18rpx 24rpx;
|
|
justify-content: flex-start;
|
|
align-items: left;
|
|
flex-flow: column;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
}
|
|
|
|
}
|
|
|
|
.five {
|
|
width: 93%;
|
|
// height: 126rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin-top: 24rpx;
|
|
|
|
.five-box {
|
|
padding: 24rpx;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.five-left {
|
|
.five-name {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #4974FF;
|
|
}
|
|
|
|
.five-address {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
}
|
|
|
|
}
|
|
|
|
.five-right {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
width: 21%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.six {
|
|
margin-bottom: 106rpx;
|
|
width: 93%;
|
|
background: linear-gradient(to bottom, #F1F2F8 0%, #FFFFFF 20%, #FFFFFF 100%);
|
|
|
|
|
|
.six-header {
|
|
padding-top: 64rpx;
|
|
padding-bottom: 12rpx;
|
|
border-bottom: 2rpx solid #008CFF;
|
|
}
|
|
|
|
.six-box {
|
|
margin: 12rpx 0 0 24rpx;
|
|
}
|
|
|
|
.six-center {
|
|
width: 100%;
|
|
margin-top: 41rpx;
|
|
|
|
|
|
.s-header {
|
|
padding: 24rpx;
|
|
width: 642rpx;
|
|
|
|
span {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
}
|
|
}
|
|
|
|
.s-footer {
|
|
padding: 24rpx;
|
|
width: 642rpx;
|
|
|
|
span {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
}
|
|
}
|
|
|
|
.s-footer .h4 {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #656565;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.line {
|
|
width: 95%;
|
|
height: 1rpx;
|
|
background: #D9D9D9;
|
|
margin: 19rpx 0 19rpx 0;
|
|
}
|
|
|
|
.icon-size {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
|
|
.footer {
|
|
width: 750rpx;
|
|
height: 122rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(111, 190, 255, 0.1);
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
position: sticky;
|
|
z-index: 999999;
|
|
/* 绝对定位 */
|
|
bottom: 0;
|
|
/* 定位在底部 */
|
|
left: 0;
|
|
/* 定位在左边 */
|
|
|
|
.footer-left {
|
|
position: absolute;
|
|
top: 32rpx;
|
|
left: 30rpx;
|
|
display: flex;
|
|
|
|
.price {
|
|
width: 210rpx;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.lan {
|
|
width: 210rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 34rpx;
|
|
color: #008CFF;
|
|
}
|
|
|
|
view {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-flow: column;
|
|
// margin-right: 42rpx;
|
|
width: 100rpx;
|
|
|
|
span {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.footer-right {
|
|
position: absolute;
|
|
top: 32rpx;
|
|
right: 30rpx;
|
|
width: 300rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.cancel {
|
|
width: 138rpx;
|
|
height: 48rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
border: 2rpx solid #008CFF;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 24rpx;
|
|
color: #008CFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.lan {
|
|
width: 138rpx;
|
|
height: 48rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
background: #008CFF;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
line-height: 32rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
letter-spacing: 6rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.popupBox {
|
|
height: 365rpx;
|
|
width: 750rpx;
|
|
|
|
.pop-header {
|
|
width: 93%;
|
|
padding-top: 32rpx;
|
|
padding-bottom: 17rpx;
|
|
|
|
border-bottom: 2rpx solid #D9D9D9;
|
|
|
|
span {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #343434;
|
|
}
|
|
}
|
|
|
|
.popup {
|
|
display: flex;
|
|
align-items: self-start;
|
|
justify-content: center;
|
|
padding-top: 21rpx;
|
|
|
|
.popur-right {
|
|
align-items: self-start;
|
|
margin-left: 24rpx;
|
|
width: 418rpx;
|
|
|
|
.name {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #343434;
|
|
}
|
|
|
|
.address {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
line-height: 32rpx;
|
|
margin: 16rpx 0 12rpx 0;
|
|
overflow: hidden;
|
|
/* 确保超出容器的文本被隐藏 */
|
|
white-space: nowrap;
|
|
/* 确保文本在一行内显示 */
|
|
text-overflow: ellipsis;
|
|
/* 使用省略号表示被截断的文本 */
|
|
width: 100%;
|
|
}
|
|
|
|
.date {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.time {
|
|
margin: 12rpx 0 73rpx 0;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.line-row {
|
|
width: 418rpx;
|
|
height: 1rpx;
|
|
background: #008CFF;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.price {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
line-height: 32rpx;
|
|
margin-top: 23rpx;
|
|
align-self: flex-end;
|
|
|
|
span {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 36rpx;
|
|
color: #FF2323;
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.line {
|
|
width: 642rpx;
|
|
height: 1rpx;
|
|
background: #D9D9D9;
|
|
box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(102, 102, 102, 0.25);
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.times {
|
|
width: 93%;
|
|
|
|
.selectTime {
|
|
width: 288rpx;
|
|
height: 50rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
border: 1rpx solid #D9D9D9;
|
|
color: #4B4B4B;
|
|
font-family: 'PingFang SC', 'PingFang SC';
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
padding-left: 15rpx;
|
|
cursor: pointer;
|
|
margin: 24rpx 25rpx 0 25rpx;
|
|
white-space: nowrap;
|
|
/* 防止文本换行 */
|
|
text-overflow: ellipsis;
|
|
/* 超出部分显示省略号 */
|
|
overflow: hidden;
|
|
/* 隐藏超出部分 */
|
|
text-align: left;
|
|
/* 文字靠左对齐 */
|
|
line-height: 50rpx;
|
|
/* 垂直居中对齐 */
|
|
box-sizing: border-box;
|
|
/* 确保 padding 和 border 不影响宽度和高度 */
|
|
display: inline-block;
|
|
/* 确保容器内文字正确对齐 */
|
|
}
|
|
|
|
}
|
|
|
|
.selectTime.selected {
|
|
width: 288rpx;
|
|
height: 50rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
background: #008CFF;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
margin: 24rpx 32rpx 0 0;
|
|
|
|
}
|
|
}
|
|
</style> |