702 lines
20 KiB
Vue
702 lines
20 KiB
Vue
<template>
|
|
<view class="container">
|
|
<uv-sticky bg-color="white">
|
|
<view class="merchant-name">{{ merchant.name }}</view>
|
|
<uv-tabs :current="activeIndex" :list="next7day" :itemStyle="{height: '58px'}" :activeStyle="{ color: '#2ba91c'}"
|
|
lineColor="#2ba91c"
|
|
:inactiveStyle="{ color: '#808080' }" @change="onDateTime"></uv-tabs>
|
|
</uv-sticky>
|
|
<template v-if="merchantId !== 37">
|
|
<view class="uni-padding-wrap uni-common-mt" v-if="fieldList && fieldList.length && fieldList[0].isHalf === 1">
|
|
<uni-segmented-control :current="current" :values="items" activeColor="#2ba91c" inActiveColor="#ff0000"
|
|
@clickItem="onType"/>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<!-- 状态说明 -->
|
|
<view class="uni-badge-wrap">
|
|
<view class="badge-item">
|
|
<uv-badge :isDot="true" type="blank"></uv-badge>
|
|
<text class="web-text-secondary">可预约</text>
|
|
</view>
|
|
<view class="badge-item">
|
|
<uv-badge :isDot="true" type="info"></uv-badge>
|
|
<text class="web-text-secondary">已出售</text>
|
|
</view>
|
|
<view class="badge-item">
|
|
<uv-badge :isDot="true" type="success"></uv-badge>
|
|
<text class="web-text-secondary">我的选择</text>
|
|
</view>
|
|
<view class="badge-item">
|
|
<uv-badge :isDot="true" type="warning"></uv-badge>
|
|
<text class="web-text-secondary">已预定半场</text>
|
|
</view>
|
|
</view>
|
|
<!-- 场地列表 -->
|
|
<view class="checkout-body web-text-primary" v-if="periodList.length > 0">
|
|
<template v-for="(item, index) in periodList" :key="index">
|
|
<view class="period-item">
|
|
<view class="period">{{ item.timePeriod }}</view>
|
|
<view class="field-list">
|
|
<template v-for="(field, index2) in fieldList" :key="index2">
|
|
<view class="field"
|
|
:class="isActive(field, item)"
|
|
@click="onField(field, item)">
|
|
<text class="field-name">{{ field.name }}</text>
|
|
<text class="price">{{ isHalf !== 1 ? item.price : item.halfPrice }}元</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<!-- 支付按钮 -->
|
|
<uv-gap height="50"></uv-gap>
|
|
<view class="checkout-car">
|
|
<view class="car-selected" @click="openCarInfo">
|
|
<uv-icon name="shopping-cart" size="36" color="#ffffff"></uv-icon>
|
|
<uv-badge type="error" max="99" :value="carNum"></uv-badge>
|
|
</view>
|
|
<view class="car-total">
|
|
<text style="color: #ebcf00;">￥</text>
|
|
<uv-count-to :startVal="0" decimals="2" duration="100" color="#ebcf00" bold
|
|
:endVal="totalPrice"></uv-count-to>
|
|
</view>
|
|
<uv-button class="save-btn"
|
|
:disabled="!selection.length"
|
|
:customStyle="{background: 'linear-gradient(to right, #70b915, #008e04)',borderRadius: '0 30px 30px 0',color: '#ffffff', border: 'none', padding: '22px 30px'}"
|
|
text="下一步" @click="save"></uv-button>
|
|
</view>
|
|
<!-- 展示购物车 -->
|
|
<uni-popup ref="popup" style="margin-bottom: 200px;">
|
|
<uni-card :title="`购物车`" extra="关闭" :border="false" :is-shadow="false" :padding="0" @click="closeCarInfo">
|
|
<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
|
|
<block v-for="(item,index) in orderInfo" :key="index">
|
|
<uv-cell :title="`${item.fieldName} ￥${item.price}`" :label="`${item.dateTime}`"
|
|
:cellStyle="{padding: '10px 5px'}">
|
|
<template v-slot:right-icon>
|
|
<uni-icons type="trash" size="20" color="#f76b4e" @click="remove(item)"></uni-icons>
|
|
<text class="web-text-secondary" style="font-size: 24rpx;" @click="remove(item)">移除</text>
|
|
</template>
|
|
</uv-cell>
|
|
</block>
|
|
</uv-cell-group>
|
|
</uni-card>
|
|
<uv-gap height="70"></uv-gap>
|
|
</uni-popup>
|
|
|
|
<!-- 登录组件 -->
|
|
<ws-login ref="login" :logo="logo" @done="reload"/>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Api from '@/api/layout';
|
|
import * as MerchantApi from '@/api/shop/merchant';
|
|
import * as FieldApi from '@/api/booking/field';
|
|
import * as PeriodApi from '@/api/booking/period';
|
|
import {
|
|
storeToRefs
|
|
} from 'pinia';
|
|
import {
|
|
useCarStore
|
|
} from '@/store/modules/car';
|
|
import {
|
|
getWeek,
|
|
getKey
|
|
} from '@/utils/common';
|
|
import {getThinkSite} from "@/api/think/thinkSite";
|
|
import {listThinkSiteTime} from "@/api/think/thinkSiteTime";
|
|
import dayjs from "dayjs";
|
|
import {listThinkField, listThinkFieldWithTimeList} from "@/api/think/thinkField";
|
|
|
|
const carStore = useCarStore();
|
|
const {
|
|
orderInfo,
|
|
totalPrice,
|
|
carNum,
|
|
merchant,
|
|
type,
|
|
dateTime,
|
|
childrenPrice
|
|
} = storeToRefs(carStore)
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 场馆ID
|
|
merchantId: 0,
|
|
// 场馆信息
|
|
merchant,
|
|
// 未来7天
|
|
next7day: [],
|
|
// 预定信息
|
|
orderInfo,
|
|
// 订单总金额
|
|
totalPrice,
|
|
// 儿童票价
|
|
childrenPrice,
|
|
// 预定日期
|
|
dateTime: null,
|
|
// 0全场 1半场
|
|
type: 0,
|
|
// 星期几
|
|
week: 0,
|
|
// 是否可以预定半场
|
|
isHalf: 0,
|
|
// 服务器时间
|
|
serverTime: {},
|
|
items: ['全场', '半场'],
|
|
// 搜索条件
|
|
where: {},
|
|
// 时段
|
|
periodList: [],
|
|
periodListOrigin: [],
|
|
// 场地
|
|
fieldList: [],
|
|
// 选中的场地
|
|
selection: [],
|
|
// 是否已登录
|
|
isLogin: false,
|
|
// 是否同意协议
|
|
disabled: false,
|
|
// 购物车信息
|
|
showCarInfo: false,
|
|
timeList: [],
|
|
timeListOrigin: [],
|
|
activeIndex: 0
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.merchantId = parseInt(option.id)
|
|
this.reload();
|
|
},
|
|
onShow() {
|
|
// 登录状态
|
|
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
|
this.isLogin = true;
|
|
}
|
|
},
|
|
computed: {
|
|
totalPrice() {
|
|
const app = this
|
|
let totalPrice = 0;
|
|
app.selection.map(d => {
|
|
if (app.isHalf === 1) totalPrice += parseFloat(d.halfPrice)
|
|
else totalPrice += parseFloat(d.price)
|
|
})
|
|
totalPrice = totalPrice.toFixed(2)
|
|
carStore.totalPrice = totalPrice
|
|
// console.log('totalPrice: ', totalPrice);
|
|
return totalPrice;
|
|
},
|
|
carNum() {
|
|
return this.selection.length;
|
|
}
|
|
},
|
|
methods: {
|
|
async reload(resetDate = true) {
|
|
// 请求数据
|
|
uni.showLoading({
|
|
title: '数据读取中.'
|
|
})
|
|
this.setDateList(resetDate)
|
|
await this.getMerchant()
|
|
await this.getTimeList()
|
|
await this.getFieldList()
|
|
uni.hideLoading()
|
|
// Promise.all([app.getServerTime(), app.getNext7day(), app.getMerchant()]).then(res => {
|
|
// const serverTime = res[0];
|
|
// const next7day = res[1];
|
|
// const merchant = res[2];
|
|
// app.serverTime = serverTime;
|
|
// app.next7day = next7day;
|
|
// app.merchant = merchant;
|
|
//
|
|
// // 修改标题
|
|
// uni.setNavigationBarTitle({
|
|
// title: merchant.merchantName
|
|
// })
|
|
// // 保存场馆信息
|
|
// carStore.setMerchant(merchant)
|
|
//
|
|
// // 加载预定日期
|
|
// app.next7day = next7day.map((d, i) => {
|
|
// if (!app.dateTime && i === 0) {
|
|
// app.dateTime = d.dateTime
|
|
// app.week = d.week
|
|
// carStore.dateTime = d.dateTime
|
|
// }
|
|
// d.name = getWeek(d.week);
|
|
// d.value = d.date;
|
|
// return d
|
|
// })
|
|
// // 加载时段列表
|
|
// app.getBookingPeriod();
|
|
// // 加载场地列表
|
|
// // app.getBookingField();
|
|
// // 关闭加载状态
|
|
// }).catch(() => {
|
|
// uni.showToast({
|
|
// title: '请检查您的网络.',
|
|
// icon: 'none'
|
|
// })
|
|
// uni.hideLoading()
|
|
// })
|
|
},
|
|
setDateList(resetDate = true) {
|
|
this.next7day = []
|
|
let day = 7
|
|
if (this.merchantId === 37) day = 1
|
|
// else if (this.merchantId === 28) day = 30
|
|
for (let i = 0; i < day; i++) {
|
|
const day = dayjs().add(i, 'day')
|
|
this.next7day.push({
|
|
week: day.format('d') === '0' ? '7' : day.format('d'),
|
|
dateTime: day.format('YYYY-MM-DD'),
|
|
name: getWeek(day.format('d')),
|
|
value: day.format('MM月DD日')
|
|
})
|
|
}
|
|
if (resetDate) this.dateTime = dayjs().format('YYYY-MM-DD')
|
|
this.week = dayjs().format('d') === '0' ? '7' : dayjs().format('d')
|
|
},
|
|
async getTimeList() {
|
|
this.timeList = await listThinkSiteTime({sid: this.merchantId})
|
|
// console.log(this.week)
|
|
// console.log(this.dateTime)
|
|
this.timeListOrigin = JSON.parse(JSON.stringify(this.timeList))
|
|
this.timeList = this.timeList.filter(item => {
|
|
return JSON.parse(item.week).map(Number).includes(parseInt(this.week))
|
|
})
|
|
console.log(this.timeList)
|
|
this.makeTimeList()
|
|
},
|
|
makeTimeList() {
|
|
this.periodList = []
|
|
this.timeListOrigin.forEach(item => {
|
|
const weekList = JSON.parse(item.week)
|
|
if (parseInt(this.merchantId) === 37) {
|
|
const today = dayjs().format('YYYY-MM-DD')
|
|
if ((dayjs().isBefore(dayjs(today + ' 21:30:00')) || dayjs(this.dateTime).isAfter(dayjs())) && weekList.includes(this.week)) this.periodList.push(item)
|
|
} else {
|
|
// console.log(this.dateTime + ' ' + item.timePeriod.split(' - ')[0])
|
|
// console.log(dayjs().isBefore(dayjs(this.dateTime + ' ' + item.timePeriod.split(' - ')[0])))
|
|
if (weekList.includes(this.week) && dayjs().isBefore(dayjs(this.dateTime + ' ' + item.timePeriod.split(' - ')[0]))) this.periodList.push(item)
|
|
}
|
|
})
|
|
console.log('this.periodList', this.periodList)
|
|
// console.log(this.dateTime)
|
|
const month = dayjs(this.dateTime).format('YYYY-MM')
|
|
this.periodListOrigin = JSON.parse(JSON.stringify(this.periodList))
|
|
this.periodList.map((item, index) => {
|
|
item.price = item.priceOrigin
|
|
item.halfPrice = item.halfPriceOrigin
|
|
if (item.prices && item.prices.includes('{')) {
|
|
const dataList = JSON.parse(item.prices)[month]
|
|
console.log(JSON.parse(item.prices), month)
|
|
if (dataList) {
|
|
console.log(dayjs(this.dateTime).format('D'))
|
|
console.log(dataList[dayjs(this.dateTime).format('D') - 1])
|
|
const price = dataList[dayjs(this.dateTime).format('D') - 1]
|
|
if (price && price !== '') {
|
|
item.price = price
|
|
}
|
|
}
|
|
}
|
|
if (item.halfPrices && item.halfPrices.includes('{')) {
|
|
const dataList = JSON.parse(item.halfPrices)[month]
|
|
if (dataList) {
|
|
const price = dataList[dayjs(this.dateTime).format('D') - 1]
|
|
if (price && price !== '') {
|
|
item.halfPrices = price
|
|
}
|
|
}
|
|
}
|
|
// console.log('item', item)
|
|
return item
|
|
})
|
|
console.log('this.timeListOrigin', this.timeListOrigin)
|
|
},
|
|
onDisabled() {
|
|
this.disabled = !this.disabled;
|
|
},
|
|
onDateTime(e) {
|
|
this.selection = []
|
|
this.periodList = []
|
|
if (![37, 44, 32].includes(this.merchantId)) {
|
|
const date = dayjs().format('d')
|
|
const hour = dayjs().format('H')
|
|
const clickedDate = dayjs(e.dateTime).format('d')
|
|
if ([0, 5, 6].includes(parseInt(clickedDate))) {
|
|
if ([1, 2, 3].includes(parseInt(date))) {
|
|
return uni.showModal({
|
|
showCancel: false,
|
|
title: '周末场地需要周四17点后才能预定。',
|
|
})
|
|
} else if (parseInt(date) === 4) {
|
|
if (parseInt(hour) < 17) {
|
|
return uni.showModal({
|
|
showCancel: false,
|
|
title: '周末场地需要周四17点后才能预定。',
|
|
})
|
|
}
|
|
} else if ([0, 5, 6].includes(parseInt(date))) {
|
|
const diff = dayjs(e.dateTime).diff(dayjs(), 'day')
|
|
if (diff > 2) {
|
|
return uni.showModal({
|
|
showCancel: false,
|
|
title: '周末场地需要周四17点后才能预定。',
|
|
})
|
|
}
|
|
}
|
|
}
|
|
if (hour < 8 || hour === 23) {
|
|
return uni.showModal({
|
|
showCancel: false,
|
|
title: '场地预定时间为:8:00-23:00。',
|
|
})
|
|
}
|
|
}
|
|
this.activeIndex = e.index
|
|
this.week = e.week
|
|
this.dateTime = e.dateTime
|
|
this.makeTimeList()
|
|
this.getFieldList()
|
|
},
|
|
onType(e) {
|
|
const index = e.currentIndex
|
|
this.selection = []
|
|
if (index === 0) {
|
|
this.type = 1;
|
|
this.isHalf = 0;
|
|
}
|
|
if (index === 1) {
|
|
this.type = 2;
|
|
this.isHalf = 1;
|
|
}
|
|
this.reload(false)
|
|
},
|
|
async getMerchant() {
|
|
this.merchant = await getThinkSite(this.merchantId)
|
|
},
|
|
async getFieldList() {
|
|
if (!this.periodList.length) {
|
|
return uni.showToast({
|
|
title: '暂无可预订场地',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
const periodVoList = []
|
|
this.periodList.forEach(item => {
|
|
const timestamp = dayjs(this.dateTime + ' ' + item.timePeriod.split(' - ')[0]).unix()
|
|
periodVoList.push({
|
|
timestamp,
|
|
period: item.timePeriod,
|
|
id: item.id
|
|
})
|
|
})
|
|
this.fieldList = await listThinkFieldWithTimeList({
|
|
sid: this.merchantId,
|
|
periodVoList
|
|
})
|
|
},
|
|
openCarInfo() {
|
|
// this.showCarInfo = !this.showCarInfo;
|
|
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
|
this.$refs.popup.open('bottom')
|
|
},
|
|
closeCarInfo() {
|
|
this.$refs.popup.close()
|
|
},
|
|
onField(field, item) {
|
|
const timePeriod = item.timePeriod
|
|
const checkTimePeriod = field.periodVoList.find(d => (d.period === timePeriod && d.id === item.id))
|
|
// console.log('here', field, item)
|
|
// 已被预定
|
|
if (checkTimePeriod.sold || checkTimePeriod.took) {
|
|
return
|
|
}
|
|
const app = this
|
|
const {merchant} = this
|
|
// 时段
|
|
// const p = this.periodList[i]
|
|
// 场地
|
|
// const f = this.fieldList[i2]
|
|
const key = getKey(`${this.dateTime}${item.timePeriod}${this.merchantId}${field.id}`)
|
|
const index = app.selection.findIndex(d => d.key === key)
|
|
if (index >= 0) {
|
|
app.selection.splice(index, 1)
|
|
} else {
|
|
if (app.selection.length > 1) {
|
|
uni.showToast({
|
|
title: '最多预定两个场地!',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
// console.log(field)
|
|
const split = item.timePeriod.split(' - ')
|
|
const siteTime = field.periodVoList.find(d => d.period === item.timePeriod)
|
|
// 添加到购物车
|
|
const week = parseInt(this.week) === 7 ? 0 : this.week
|
|
console.log(item)
|
|
console.log('this.type', this.type)
|
|
app.selection.push({
|
|
key,
|
|
sid: this.merchantId,
|
|
fieldId: field.id,
|
|
fieldName: field.name,
|
|
price: item.price,
|
|
halfPrice: item.halfPrice,
|
|
childrenPrice: item.childrenPrice,
|
|
adultNum: 1,
|
|
childrenNum: 0,
|
|
siteName: merchant.name,
|
|
isChildren: 2,
|
|
isHalf: this.isHalf,
|
|
type: this.type,
|
|
timePeriod: item.timePeriod,
|
|
periodId: item.periodId,
|
|
startTime: dayjs(`${this.dateTime} ${split[0].trim()}`).unix(),
|
|
endTime: `${split[1].trim()}:00`,
|
|
orderCode: key,
|
|
siteTimeId: siteTime.id,
|
|
dateTime: `${this.dateTime}`,
|
|
// comments: `${this.dateTime}(${getWeek(week)})${item.timePeriod}`,
|
|
comments: `${this.dateTime} ${item.timePeriod}`,
|
|
week
|
|
})
|
|
console.log(app.selection);
|
|
// console.log('period: ', period);
|
|
// 是否支持儿童票
|
|
// console.log('item.isChildren: ', item.isChildren);
|
|
// if (item.isChildren === 1) {
|
|
// console.log('item.isChildren2: ', item.isChildren);
|
|
// carStore.childrenPrice = period.childrenPrice
|
|
// } else {
|
|
// carStore.childrenPrice = 0
|
|
// }
|
|
// carStore.orderInfo = app.selection
|
|
// carStore.carNum = app.selection.length
|
|
// carStore.totalPrice = totalPrice
|
|
// carStore.payPrice = totalPrice
|
|
// carStore.setPeriod(period)
|
|
|
|
}
|
|
},
|
|
isActive(field, item) {
|
|
const index = this.selection.find(d => d.key === getKey(`${this.dateTime}${item.timePeriod}${this.merchantId}${field.id}`))
|
|
const timePeriod = item.timePeriod
|
|
const checkTimePeriod = field.periodVoList.find(d => (d.period === timePeriod && d.id === item.id))
|
|
// console.log('checkTimePeriod', checkTimePeriod, timePeriod)
|
|
if (checkTimePeriod && (checkTimePeriod.sold || checkTimePeriod.took)) {
|
|
if (item.isHalf === 1) {
|
|
return 'web-bg-warning'
|
|
}
|
|
return 'web-bg-info'
|
|
}
|
|
if (index) {
|
|
return 'active web-bg-success'
|
|
}
|
|
},
|
|
remove(item) {
|
|
const index = this.selection.findIndex(d => d.key === item.key)
|
|
this.selection.splice(index, 1)
|
|
carStore.orderInfo = this.selection
|
|
},
|
|
save() {
|
|
uni.navigateTo({
|
|
url: '/package/booking/confirm',
|
|
success: (res) => {
|
|
// console.log(this.selection)
|
|
res.eventChannel.emit('data', this.selection)
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page {
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-color: #f0f2f5;
|
|
width: 750rpx;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
}
|
|
|
|
|
|
.merchant-name {
|
|
padding: 30rpx;
|
|
font-weight: 500;
|
|
font-size: 42rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.checkout-car {
|
|
width: 700rpx;
|
|
left: 25rpx;
|
|
position: fixed;
|
|
bottom: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #000000;
|
|
border-radius: 100px;
|
|
align-items: center;
|
|
|
|
.car-selected {
|
|
color: #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.car-total {
|
|
display: flex;
|
|
color: #ebcf00;
|
|
align-items: center;
|
|
|
|
.save-btn {
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-car-info {
|
|
margin-bottom: 100px;
|
|
padding: 20rpx;
|
|
background-color: #ffffff;
|
|
width: 660rpx;
|
|
margin: 150rpx auto;
|
|
}
|
|
|
|
.uni-padding-wrap {
|
|
width: 180rpx;
|
|
margin: 20rpx auto;
|
|
}
|
|
|
|
.uni-badge-wrap {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.badge-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
|
|
text {
|
|
padding: 2rpx;
|
|
}
|
|
|
|
.web-text-secondary {
|
|
padding-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkout-body {
|
|
padding: 24rpx;
|
|
|
|
.period-item {
|
|
margin: 12rpx 0;
|
|
|
|
.period {
|
|
line-height: 2rem;
|
|
padding-left: 12rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.field-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.web-bg-info {
|
|
background-color: #909399 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.web-bg-success {
|
|
color: #2ba91c !important;
|
|
border: 1px solid #2ba91c !important;
|
|
}
|
|
|
|
.web-bg-warning {
|
|
// background-color: #c9e294 !important;
|
|
}
|
|
|
|
.active {
|
|
&:before {
|
|
border-radius: 0 0 12rpx 0;
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 24rpx solid #2ba91c;
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
width: 5px;
|
|
height: 10px;
|
|
position: absolute;
|
|
right: 3px;
|
|
bottom: 4px;
|
|
border: 1px solid #fff;
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
transform: rotate(45deg);
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
width: 118rpx;
|
|
height: 118rpx;
|
|
margin: 9rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 16rpx;
|
|
line-height: 1.3rem;
|
|
position: relative;
|
|
color: #333333;
|
|
background-color: #ffffff;
|
|
border: 1px solid #808080;
|
|
|
|
.field-name {
|
|
font-size: 23rpx;
|
|
}
|
|
|
|
.price {
|
|
font-size: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.xieyi {
|
|
margin: 30rpx auto;
|
|
padding: 20rpx 30rpx;
|
|
|
|
.text {
|
|
margin-left: 5rpx;
|
|
|
|
.link {
|
|
color: #0f80ff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|