1376 lines
31 KiB
Vue
1376 lines
31 KiB
Vue
<template>
|
||
<view class="box flex justify-start flex-column align-items" :class="{ 'no-scroll': overlay }">
|
||
<view class="swiper">
|
||
<u-swiper :list="detail.images" indicator indicatorMode="line" height="480rpx" 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">
|
||
<view class="flex align-items" style="width: 690rpx;">
|
||
<span class="Sign flex justify-center align-items" style="color: #FFFFFF;background: #A4A4A4;"
|
||
v-if="detail.has_sign_expire == 1">已 结 束</span>
|
||
<span class="Sign flex justify-center align-items"
|
||
style="color: #222222;background: #BEEE03;"
|
||
v-if="detail.has_sign_expire == 2">报 名</span>
|
||
<span class="first-name white-space-2">
|
||
{{'' + detail.title}}</span>
|
||
</view>
|
||
<!-- <span class="line"></span>
|
||
<span class="huodong text-blue">活动介绍</span> -->
|
||
<view class="line-title white-space" v-if="detail.feel != 1">
|
||
<view class="circle"> </view>
|
||
<span class="title">报名费用:</span>
|
||
<span class="conter " style="color: #FF5F5F;">{{'' + detail.price + '元'}}</span>
|
||
</view>
|
||
<view class="line-title white-space" v-if="detail.feel == 1">
|
||
<view class="circle"> </view>
|
||
<span class="title">报名费用:</span>
|
||
<span class="conter " style="color: #FF5F5F;">{{'' + '公益'}}</span>
|
||
</view>
|
||
<view class="line-title white-space">
|
||
<view class="circle"> </view>
|
||
<span class="title">活动人数:</span>
|
||
<span class="conter ">{{'' + detail.id == 16 ? 50 : detail.stock}}</span>
|
||
</view>
|
||
<view class="line-title white-space">
|
||
<view class="circle"> </view>
|
||
<span class="title">报名时间:</span>
|
||
<span class="conter ">{{'' + detail.sign_start_time_text}} - {{detail.sign_end_time_text}}</span>
|
||
</view>
|
||
<view class="line-title white-space">
|
||
<view class="circle"> </view>
|
||
<span class="title">活动时间:</span>
|
||
<span class="conter">{{'' + detail.start_time_text}} - {{detail.end_time_text}}</span>
|
||
</view>
|
||
<view class="line-title white-space flex align-items"
|
||
@click.stop="toMap(detail.latitude,detail.longitude,detail.address_detail)">
|
||
<view class="circle"> </view>
|
||
<span class="title">活动地址:</span>
|
||
<span class="conter flex align-items ">
|
||
<span class="white-space" style="width: 500rpx;">{{'' + detail.address_detail}}</span>
|
||
<image src="../../static/center/address.png" mode="" class="icon-size"></image>
|
||
</span>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- <view class="line-title">
|
||
<span class="title">可参与人数:</span>
|
||
<span class="conter">{{'' + detail.id == 16 ? 50 : detail.stock}}</span>
|
||
</view> -->
|
||
<!-- <view class="line-title white-space">
|
||
<view class="circle"> </view>
|
||
<span class="title">已参加人数:</span>
|
||
<span class="conter ">{{'' + detail.id == 16 ? 50 : detail.sale}}</span>
|
||
</view>
|
||
<view class="line-title white-space">
|
||
<view class="circle"> </view>
|
||
<span class="title">活动项目:</span>
|
||
<span class="conter ">{{'' + detail.item}}</span>
|
||
</view> -->
|
||
|
||
<!-- <view class="flex justify-center flex-column align-items w-100" v-if="detail.status == 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 class="flex flex-column gj">
|
||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="flex flex-column align-items scroll">
|
||
<view v-for="(item,index) in detail.item_json" :key="index">
|
||
<span class="title">{{ item.formattedTime}}</span>
|
||
<span v-if="item.sign_num === item.limit_num" class="red">(已满)</span>
|
||
<span v-else class="lan">({{item.sign_num + '/' + item.limit_num}})</span>
|
||
</view>
|
||
</scroll-view>
|
||
</view> -->
|
||
</view>
|
||
<!-- <view class="first-box flex flex-column " style="width: 642rpx; padding: 30rpx 24rpx;"
|
||
v-if="detail.status == 1">
|
||
<view class="flex" style="justify-content: space-between; flex-wrap: wrap;"
|
||
v-for="(item, index) in skuList" :key="index" :class="{ selected: selectedIndex === index }"
|
||
@click="item.status != 2 && selectItem(index, item)">
|
||
<view class="flex">
|
||
<view class="left">
|
||
<image
|
||
:src="selectedIndex === index ? '../../static/my/selected.png' : '../../static/my/select.png'"
|
||
mode="" style="width: 42rpx; height: 42rpx;"></image>
|
||
</view>
|
||
<view class="center flex flex-column">
|
||
<span class="title white-space" style="width: 400rpx;">{{ item.name }}</span>
|
||
<view class="cen-tit">
|
||
<span>{{ item.limit_num }}人</span>
|
||
<span style="margin: 0 24rpx;">{{ item.age }}</span>
|
||
<span v-if="item.sex == 1">男</span>
|
||
<span v-if="item.sex == 0">女</span>
|
||
<span v-if="item.sex == 3">男女不限</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right flex flex-column align-items">
|
||
<span class="btn1 bg-blue flex align-items justify-center"
|
||
v-if="detail.has_sign_expire == 2">报名</span>
|
||
<span class="btn flex align-items justify-center" v-if="detail.has_sign_expire == 1">已结束</span>
|
||
<span class="price" v-if="item.feel == 2">{{ item.price }}元/人</span>
|
||
<span class="price" v-if="item.feel == 1">公益</span>
|
||
</view>
|
||
<span class="line-row"></span>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- 课程详情 -->
|
||
<view class="six flex flex-column" style="justify-content: flex-start;">
|
||
<!-- <view class="six-header flex align-items space-between">
|
||
活动详情
|
||
</view> -->
|
||
<view class="six-top">
|
||
<view class="left flex align-items">
|
||
<span>活动详情</span>
|
||
</view>
|
||
</view>
|
||
<view class="six-center flex first-txt flex-column">
|
||
<!-- <rich-text :nodes="detail.content" style="width: 100%;" :tagStyle="style"></rich-text> -->
|
||
<u-parse :content="detail.content" :tagStyle="style"></u-parse>
|
||
<!-- <view class="s-header flex justify-start flex-column">
|
||
<span>单门课程报名费用：499元/10小时，共5节课</span>
|
||
<span>上课时间：每周对应固定时间晚上19：00-21：00</span>
|
||
<span>上课人数：每门课程10人起</span>
|
||
<span>上课地点：</span>
|
||
<span>洛阳市老城区同化街1654号</span>
|
||
</view>
|
||
<image src="../../static/center/detail.png" mode="" style="width: 644rpx; height: 1054rpx;"></image> -->
|
||
</view>
|
||
</view>
|
||
<view class="footer flex align-items">
|
||
<view class="footer-left">
|
||
<button open-type="share" class="no-border-button" plain="true">
|
||
<view class="">
|
||
<image src="../../static/my/share.png" mode=""></image>
|
||
<span>分享</span>
|
||
</view>
|
||
</button>
|
||
<view class="flex flex-column" style=" margin-left: 32rpx;align-items: flex-start;">
|
||
<view class="feiyong flex" style="flex-flow: row;">
|
||
<span>报名费用:</span>
|
||
<span class="price" v-if="price != 0">{{'￥' + price}}</span>
|
||
<span class="price" v-if="price == 0">{{'公益'}}</span>
|
||
</view>
|
||
<span class="tips">报名成功后不能取消</span>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="footer-right flex justify-center align-items" v-if="detail.has_expire == 1">
|
||
<span>已 结 束 </span>
|
||
</view>
|
||
<view class="footer-right1 flex justify-center align-items" v-if="detail.has_expire == 2" @click.stop="sign()">
|
||
<span>报 名</span>
|
||
</view> -->
|
||
<view class="footer-right flex justify-center align-items" v-if="detail.has_sign_expire == 1">
|
||
<span>已 结 束 </span>
|
||
</view>
|
||
<view class="footer-right1 flex justify-center align-items" v-if="detail.has_sign_expire == 2" @click.stop="sign()">
|
||
<span>报 名</span>
|
||
</view>
|
||
</view>
|
||
<!-- 购买弹窗 -->
|
||
<u-popup :show="buyShow" mode="center" :round="10" :zIndex="99999" :custom-style="popupStyle" @close="buyClose"
|
||
@open="buyOpen" safeAreaInsetBottom="false">
|
||
<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.headimage" mode="" style="width: 200rpx; height: 140rpx;"></image>
|
||
<view class="popur-right flex flex-column">
|
||
<span class="name white-space">{{name}}</span>
|
||
<span class="address">地址:{{detail.address_detail}}</span>
|
||
<span class="date">开始时间:{{detail.start_time_text}}</span>
|
||
<span class="time">结束时间:{{detail.end_time_text}}</span>
|
||
<span class="line-row"></span>
|
||
<span class="price">
|
||
课程价格:
|
||
<span v-if="price != 0">￥{{price}}</span>
|
||
<span v-if="price == 0">公益</span>
|
||
</span>
|
||
</view>
|
||
</view>
|
||
<view class="popup-footer flex " @click="buy()">
|
||
<span v-if="detail.feel == 0">立 即 支 付</span>
|
||
<span v-if="detail.feel == 1">确 认 报 名</span>
|
||
<u-loading-icon :vertical="true" v-if="uloadingShow"></u-loading-icon>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: '',
|
||
detail: '',
|
||
selectedIndex: 0, // 默认选中第一个
|
||
listOrder_no: '',
|
||
price: '',
|
||
name:'',
|
||
order_no:'',
|
||
skuId:'',
|
||
uloadingShow:false,
|
||
buyShow:false,
|
||
PayPirce:'',
|
||
popupStyle: {
|
||
width: '100%',
|
||
height: '570rpx',
|
||
margin: '0 auto', // 水平居中
|
||
display: 'flex',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center'
|
||
},
|
||
skuList:[] //规格
|
||
};
|
||
},
|
||
onShareTimeline() {
|
||
return {
|
||
title: this.detail.title,//分享的标题
|
||
imageUrl: this.detail.headimage,//展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
|
||
query: `id=${this.id}`
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.userInfo = uni.getStorageSync("userInfo")
|
||
this.id = options.id
|
||
this.getDetail()
|
||
|
||
},
|
||
methods: {
|
||
buyOpen() {
|
||
this.buyShow = true
|
||
this.type = 1
|
||
},
|
||
buyClose() {
|
||
this.type = 0
|
||
this.selectedTime = null
|
||
this.buyShow = false
|
||
},
|
||
// 购买弹窗
|
||
sign(){
|
||
this.buyShow = true
|
||
},
|
||
buy() {
|
||
this.uloadingShow = true
|
||
this.getMoney()
|
||
},
|
||
// 获取价格
|
||
getMoney() {
|
||
uni.$u.http.post('/api/school/activity.order/confirm', {
|
||
classes_activity_id: this.id,
|
||
order_no: this.order_no,
|
||
classes_activity_item_id: this.skuId,
|
||
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 {
|
||
this.uloadingShow = false
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
// _this.$api.toast(res.msg);
|
||
}
|
||
this.uloadingShow = false
|
||
}).catch(error => {
|
||
|
||
});
|
||
},
|
||
// 创建订单
|
||
create(order_no, PayPirce) {
|
||
uni.$u.http.post('/api/school/activity.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.redirectTo({
|
||
url: "/packageA/activity/exercise"
|
||
})
|
||
}, 2000);
|
||
}
|
||
});
|
||
this.uloadingShow = false
|
||
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
that.uloadingShow = false
|
||
|
||
// _this.$api.toast(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
|
||
});
|
||
},
|
||
// 支付
|
||
pament() {
|
||
let that = this
|
||
that.uloadingShow = false
|
||
uni.$u.http.post('/api/school.activity.pay/payment', {
|
||
type: 'wechat',
|
||
order_no: that.order_no,
|
||
platform: 'miniapp'
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
that.uloadingShow = false
|
||
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") {
|
||
that.order_no = ''
|
||
uni.redirectTo({
|
||
url: "/packageA/activity/exercise"
|
||
})
|
||
console.log('支付成功', res)
|
||
} else {
|
||
console.log('支付失败')
|
||
}
|
||
},
|
||
fail(res) {
|
||
that.uloadingShow = false
|
||
console.log('支付失败', res)
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
// _this.$api.toast(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
|
||
});
|
||
},
|
||
selectItem(index, item) {
|
||
this.selectedIndex = index;
|
||
this.listOrder_no = item.order_no
|
||
this.price = item.price
|
||
this.skuId = item.id
|
||
this.name = item.name
|
||
},
|
||
// 获取详情
|
||
getDetail() {
|
||
uni.$u.http.get('/api/school/activity/detail', {
|
||
params: {
|
||
id: this.id,
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.getSkuList()
|
||
this.detail = res.data.detail;
|
||
// 找到第一个 status 为 1 的 item 的下标
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(error => {
|
||
// 处理错误
|
||
console.error('获取详情失败:', error);
|
||
});
|
||
},
|
||
// 规格
|
||
getSkuList() {
|
||
uni.$u.http.get('/api/school/activity/spec', {
|
||
params: {
|
||
id: this.id,
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.skuList = res.data.spec
|
||
this.selectedIndex = this.skuList.findIndex(item => item.status == 1);
|
||
// 如果没有找到，赋值为 -1
|
||
if (this.selectedIndex == -1) {
|
||
this.selectedIndex = -1;
|
||
} else {
|
||
// 获取第一个 status 为 1 的 item 的 price
|
||
this.price = this.skuList[this.selectedIndex].price;
|
||
this.skuId = this.skuList[this.selectedIndex].id;
|
||
this.name = this.skuList[this.selectedIndex].name;
|
||
}
|
||
|
||
// 如果没有找到 status 为 1 的 item，则使用 this.detail.price
|
||
if (this.selectedIndex == -1 && this.skuList) {
|
||
this.price = this.detail.price;
|
||
this.name = this.detail.title
|
||
}
|
||
console.log(this.name ,'this.name ')
|
||
console.log(this.price ,'this.price ')
|
||
console.log(this.skuId ,'this.skuId ')
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(error => {
|
||
// 处理错误
|
||
console.error('获取规格失败:', error);
|
||
});
|
||
},
|
||
|
||
// 导航
|
||
toMap(latitude, longitude, name) {
|
||
uni.openLocation({
|
||
latitude: parseFloat(latitude),
|
||
longitude: parseFloat(longitude),
|
||
name: name,
|
||
success: function() {
|
||
console.log('success');
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
callPhone(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
},
|
||
|
||
|
||
},
|
||
}
|
||
</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;
|
||
}
|
||
|
||
|
||
.con-center {
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 480rpx;
|
||
}
|
||
|
||
.box {
|
||
position: relative;
|
||
}
|
||
|
||
.first-box {
|
||
width: 690rpx;
|
||
background: #FFFFFF;
|
||
padding-left: 24rpx;
|
||
margin-top: 24rpx;
|
||
border-radius: 20rpx;
|
||
.Sign {
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.huodong {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 26rpx;
|
||
margin: 23rpx 0;
|
||
|
||
}
|
||
|
||
.line-row {
|
||
width: 642rpx;
|
||
height: 1rpx;
|
||
background: #D9D9D9;
|
||
margin: 30rpx;
|
||
}
|
||
|
||
.center {
|
||
margin-left: 24rpx;
|
||
|
||
.title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #343434;
|
||
}
|
||
|
||
.cen-tit {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
margin-top: 39rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
.btn1 {
|
||
width: 138rpx;
|
||
height: 48rpx;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.btn {
|
||
width: 138rpx;
|
||
height: 48rpx;
|
||
background: #D9D9D9;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.price {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #FF5F5F;
|
||
margin-top: 39rpx;
|
||
}
|
||
}
|
||
|
||
.line-title {
|
||
margin-bottom: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.circle{
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
background: #BEEE03;
|
||
border-radius: 8rpx;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
|
||
.conter {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
}
|
||
|
||
.first-name {
|
||
width: 100%;
|
||
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;
|
||
margin: 0 6rpx;
|
||
}
|
||
|
||
.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 */
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.six {
|
||
margin-top: 64rpx;
|
||
margin-bottom: 106rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
align-items: center;
|
||
|
||
|
||
.six-top {
|
||
width: 690rpx;
|
||
.left {
|
||
background-image: url("/static/center/footer.png");
|
||
background-repeat: no-repeat;
|
||
background-position: left bottom;
|
||
|
||
span {
|
||
width: 160rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #222222;
|
||
line-height: 47rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.six-box {
|
||
width: 93%;
|
||
margin: 12rpx 0 0 24rpx;
|
||
}
|
||
|
||
.six-center {
|
||
width: 93%;
|
||
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: 100%;
|
||
height: 166rpx;
|
||
background: #ffffff;
|
||
// box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.4);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
position: sticky;
|
||
z-index: 99;
|
||
/* 绝对定位 */
|
||
bottom: 0;
|
||
/* 定位在底部 */
|
||
left: 0;
|
||
/* 定位在左边 */
|
||
|
||
.footer-left {
|
||
position: absolute;
|
||
top: 24rpx;
|
||
left: 42rpx;
|
||
display: flex;
|
||
|
||
view {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-flow: column;
|
||
// margin-right: 42rpx;
|
||
|
||
span {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.feiyong {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #222222;
|
||
|
||
.price {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #FF4810;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #A4A4A4;
|
||
}
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.footer-right {
|
||
position: absolute;
|
||
top: 27rpx;
|
||
right: 30rpx;
|
||
width: 296rpx;
|
||
height: 100rpx;
|
||
background: #A4A4A4;
|
||
border-radius: 200rpx 200rpx 200rpx 200rpx;
|
||
span {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.footer-right1 {
|
||
position: absolute;
|
||
top: 27rpx;
|
||
right: 30rpx;
|
||
width: 296rpx;
|
||
height: 100rpx;
|
||
background: #222222;
|
||
border-radius: 200rpx 200rpx 200rpx 200rpx;
|
||
|
||
span {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #BEEE03;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.share {
|
||
position: fixed;
|
||
color: #FFFFFF;
|
||
right: 0;
|
||
bottom: 190rpx;
|
||
background: linear-gradient(to bottom right, #FE726B, #FE956B);
|
||
padding: 10rpx 10rpx 10rpx 20rpx;
|
||
border-top-left-radius: 50px;
|
||
border-bottom-left-radius: 50px;
|
||
box-shadow: 0 0 20upx rgba(0, 0, 0, .09);
|
||
}
|
||
|
||
.cancel {
|
||
width: 100vw;
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
background: #FFFFFF;
|
||
color: red;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.md-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 50rpx 0;
|
||
background-color: white;
|
||
}
|
||
|
||
.md-content-item {
|
||
margin: 0 70rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.md-content-item image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.md-content-item view {
|
||
margin-top: 15rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.sharebtn {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
.cu-modal {
|
||
position: fixed;
|
||
bottom: 166rpx;
|
||
left: 0;
|
||
z-index: 999999;
|
||
}
|
||
|
||
.gj {
|
||
.title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 32rpx;
|
||
color: #4B4B4B;
|
||
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 24rpx;
|
||
color: #4B4B4B;
|
||
}
|
||
}
|
||
|
||
.scroll {
|
||
width: 642rpx;
|
||
max-height: 340rpx;
|
||
|
||
view {
|
||
margin: 24rpx;
|
||
width: 600rpx;
|
||
height: 56rpx;
|
||
background: #E8E8E8;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
|
||
.red {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FF5F5F;
|
||
}
|
||
|
||
.lan {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #008CFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ ::-webkit-scrollbar {
|
||
/*滚动条整体样式*/
|
||
width: 4px !important;
|
||
height: 1px !important;
|
||
overflow: auto !important;
|
||
background: #ccc !important;
|
||
-webkit-appearance: auto !important;
|
||
display: block;
|
||
}
|
||
|
||
/deep/ ::-webkit-scrollbar-thumb {
|
||
/*滚动条里面小方块*/
|
||
border-radius: 10px !important;
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
|
||
background: #7b7979 !important;
|
||
}
|
||
|
||
/deep/ ::-webkit-scrollbar-track {
|
||
/*滚动条里面轨道*/
|
||
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
|
||
// border-radius: 10px !important;
|
||
background: #FFFFFF !important;
|
||
}
|
||
|
||
.Poster {
|
||
position: relative;
|
||
top: 21rpx;
|
||
left: 30rpx;
|
||
width: 690rpx;
|
||
}
|
||
|
||
.posterClose {
|
||
position: absolute;
|
||
right: 8rpx;
|
||
top: 8rpx;
|
||
}
|
||
|
||
.pos {
|
||
position: relative;
|
||
}
|
||
|
||
.btnList {
|
||
width: 690rpx;
|
||
position: absolute;
|
||
bottom: 150rpx;
|
||
left: 30rpx;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
|
||
span {
|
||
width: 250rpx;
|
||
height: 80rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 401rpx 401rpx 401rpx 401rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #008CFF;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.save {}
|
||
}
|
||
|
||
.no-scroll {
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
}
|
||
|
||
.no-border-button {
|
||
background-color: transparent;
|
||
/* 去掉背景色 */
|
||
border: none;
|
||
/* 去掉边框 */
|
||
padding: 0;
|
||
/* 去掉内边距 */
|
||
margin: 0;
|
||
/* 去掉外边距 */
|
||
display: inline-flex;
|
||
/* 使按钮内容居中 */
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
justify-content: center;
|
||
/* 水平居中 */
|
||
flex-flow: column;
|
||
height: 110rpx;
|
||
line-height: inherit;
|
||
|
||
span {
|
||
width: 44rpx;
|
||
height: 34rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #A4A4A4;
|
||
}
|
||
}
|
||
.popupBox {
|
||
// height: 365rpx;
|
||
margin-top: 22rpx;
|
||
width: 750rpx;
|
||
|
||
.pop-header {
|
||
width: 93%;
|
||
padding-top: 32rpx;
|
||
padding-bottom: 17rpx;
|
||
|
||
border-bottom: 2rpx solid #D9D9D9;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 42rpx;
|
||
color: #008CFF;
|
||
|
||
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: 24rpx 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;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.popup-footer {
|
||
margin-top: 42rpx;
|
||
span{
|
||
width: 642rpx;
|
||
height: 80rpx;
|
||
background: #008CFF;
|
||
border-radius: 401rpx 401rpx 401rpx 401rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #FFFFFF;
|
||
line-height: 32rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
|
||
.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 32rpx 0 0;
|
||
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;
|
||
|
||
}
|
||
}
|
||
.white-space-2 {
|
||
display: -webkit-box; /* 将元素设置为弹性盒子 */
|
||
-webkit-box-orient: vertical; /* 设置内容垂直排列 */
|
||
-webkit-line-clamp: 2; /* 限制显示两行 */
|
||
overflow: hidden; /* 超出部分隐藏 */
|
||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||
white-space: normal; /* 允许换行 */
|
||
width: 100%; /* 宽度占满父容器 */
|
||
}
|
||
</style> |