800 lines
23 KiB
Vue
800 lines
23 KiB
Vue
<template>
|
||
<view style="background-color: white; height: 100vh">
|
||
<u-navbar title="返校预约申请"></u-navbar>
|
||
<!-- 内容 -->
|
||
<scroll-view
|
||
scroll-y="true"
|
||
style="
|
||
height: calc(100vh - 240rpx);
|
||
width: 100%;
|
||
border-top: 1px solid #edf2fa;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
"
|
||
>
|
||
<!-- 基础信息 -->
|
||
<view class="base-box">
|
||
<view class="item-line">
|
||
<text class="line-label"> 预约人</text>
|
||
<text class="line-value"> {{ baseMsg.name || "-" }} </text>
|
||
</view>
|
||
<view class="item-line">
|
||
<text class="line-label"> 学院专业</text>
|
||
<text class="line-value"> {{ baseMsg.college + "-" + baseMsg.major }} </text>
|
||
</view>
|
||
<view class="item-line">
|
||
<text class="line-label"> 学历层次</text>
|
||
<text class="line-value"> {{ baseMsg.educationStr || "-" }} </text>
|
||
</view>
|
||
<view class="item-line">
|
||
<text class="line-label"> 毕业年份</text>
|
||
<text class="line-value"> {{ baseMsg.endYear || "-" }} </text>
|
||
</view>
|
||
</view>
|
||
<!-- 表单 -->
|
||
<view class="form-box">
|
||
<!-- 返校日期 -->
|
||
<view class="item-date" @click="dateShowFn">
|
||
<text class="line-label must"> 返校日期</text>
|
||
<u-input
|
||
:custom-style="inputStyle"
|
||
type="text"
|
||
input-align="right"
|
||
:border="false"
|
||
v-model="formData.date"
|
||
@click.native="dateShowFn"
|
||
placeholder="请选择"
|
||
disabled
|
||
/>
|
||
<view class="img">
|
||
<image
|
||
style="width:15rpx; height: 25rpx; margin-left: 20rpx"
|
||
src="/static/common/img/row_right.png"
|
||
/>
|
||
</view>
|
||
<!-- 点击盒子 -->
|
||
<view class="input-mask"></view>
|
||
</view>
|
||
<!-- 提示 -->
|
||
<view class="item-tip" v-if="weekSet.length">
|
||
<text class="line-label"> 提示：每周{{ dateTip }}暂停开放返校服务</text>
|
||
</view>
|
||
<!-- 车牌号 -->
|
||
<view class="item-line" style="border: none;">
|
||
<text class="line-label"> 车牌号</text>
|
||
<u-input
|
||
:custom-style="inputStyle"
|
||
type="text"
|
||
input-align="right"
|
||
:border="false"
|
||
maxlength="10"
|
||
v-model="formData.carNumber"
|
||
placeholder="如果车辆入校请务必填写"
|
||
/>
|
||
</view>
|
||
<!-- 联系电话 -->
|
||
<view class="item-line" style="border: none;">
|
||
<text class="line-label must"> 联系电话</text>
|
||
<u-input
|
||
:custom-style="inputStyle"
|
||
type="number"
|
||
input-align="right"
|
||
:border="false"
|
||
maxlength="20"
|
||
v-model="formData.phone"
|
||
placeholder="请输入"
|
||
/>
|
||
</view>
|
||
<!-- 随行人信息 -->
|
||
<view class="item-line">
|
||
<text class="line-label"> 随行人信息</text>
|
||
<text @click="addPersonFn" style="color: #3cb5fb"> 添加随行人 </text>
|
||
</view>
|
||
<!-- 动态随行人 -->
|
||
<view class="item-box">
|
||
<view class="item-for" v-for="(x, xIndex) in sxList" :key="xIndex">
|
||
<!-- 左侧内容 -->
|
||
<view class="for-left">
|
||
<view class="each">
|
||
<text class="must"> 随行人{{ xIndex + 1 }}</text>
|
||
<u-input
|
||
:custom-style="eachStyle"
|
||
type="text"
|
||
input-align="right"
|
||
:border="false"
|
||
maxlength="20"
|
||
v-model="x.name"
|
||
placeholder="请输入"
|
||
/>
|
||
</view>
|
||
<view class="each">
|
||
<text class="must"> 手机号</text>
|
||
<u-input
|
||
:custom-style="eachStyle"
|
||
type="number"
|
||
input-align="right"
|
||
:border="false"
|
||
maxlength="20"
|
||
v-model="x.phone"
|
||
placeholder="请输入"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 右侧删除 -->
|
||
<view class="del">
|
||
<!-- <u-icon
|
||
@click="delFn(xIndex)"
|
||
name="trash"
|
||
color="#2799f6"
|
||
size="45"
|
||
></u-icon> -->
|
||
<image style="width: 32rpx;height: 32rpx;" src="/static/common/img/delete.svg" @click="delFn(xIndex)"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 返校事由 -->
|
||
<view class="item-line">
|
||
<text class="line-label must"> 返校事由</text>
|
||
</view>
|
||
<view class="item-text">
|
||
<u-input
|
||
type="textarea"
|
||
height="200"
|
||
:border="false"
|
||
v-model="formData.retuenSchoolReason"
|
||
placeholder="请输入"
|
||
/>
|
||
</view>
|
||
<!-- 同意区域 -->
|
||
<view class="item-agree">
|
||
<view class="agree-left">
|
||
<u-checkbox-group>
|
||
<u-checkbox v-model="formData.checked"></u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<view class="agree-right">{{ desc }}</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 50rpx"></view>
|
||
</scroll-view>
|
||
<!-- 按钮 -->
|
||
<view class="btn-box">
|
||
<u-button style="width: 80%" shape="circle" type="primary" @click="btnSubmitFn"
|
||
>提交</u-button
|
||
>
|
||
</view>
|
||
<u-top-tips ref="uTips" :navbar-height="50"></u-top-tips>
|
||
<!-- 选择日期范围 -->
|
||
<!-- date 单个日期范围 range 多个日期范围 min-date="" -->
|
||
<u-calendarWeek
|
||
max-year="2030"
|
||
min-year="2020"
|
||
max-date="2030"
|
||
:min-date="minDate"
|
||
:max-date="maxDate"
|
||
v-model="dateShow"
|
||
:filterWeek="weekSet"
|
||
:filterDate="filterDate"
|
||
mode="range"
|
||
@change="dateChangeFn"
|
||
></u-calendarWeek>
|
||
<u-toast ref="uToast" />
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 表单
|
||
formData: {
|
||
carNumber: "", // 车牌号
|
||
phone: "", // 联系电话
|
||
checked: false, //是否同意
|
||
retuenSchoolReason: "", //返校事由
|
||
date: "", //返校日期
|
||
},
|
||
// 日期的值
|
||
dateList: [],
|
||
// 随行人
|
||
sxList: [
|
||
{
|
||
name: "",
|
||
phone: "",
|
||
},
|
||
],
|
||
// 选择日期
|
||
dateShow: false,
|
||
//
|
||
inputStyle: {
|
||
lineHeight: "90rpx",
|
||
height: "90rpx",
|
||
width: "400rpx",
|
||
},
|
||
eachStyle: {
|
||
lineHeight: "80rpx",
|
||
height: "80rpx",
|
||
width: "400rpx",
|
||
},
|
||
desc:
|
||
"本人承诺进校期间,遵守国家相关规律法规和校园管理相关规定，服从工作人员的指挥和管理",
|
||
// 基础信息
|
||
baseMsg: {
|
||
id: "",
|
||
name: "", //姓名
|
||
schoolName: "",
|
||
schoolLogo: "",
|
||
startYear: "", //入学年份
|
||
college: "", //学院
|
||
educationStr: "", //学历层次
|
||
major: "", //专业
|
||
endYear: "", //毕业年份
|
||
},
|
||
// 星期设置
|
||
weekSet: [],
|
||
// 已预约的日期 这里需要两个格式 2025-2-19 2025/2/19
|
||
filterDate:[],
|
||
// 选择日期提示
|
||
dateTip: "",
|
||
// 最小日期
|
||
minDate: "",
|
||
// 最大日期
|
||
maxDate: "",
|
||
};
|
||
},
|
||
async onLoad(e) {
|
||
await this.getSchoolFn();
|
||
// 获取返校设置
|
||
this.getSetFn();
|
||
// 获取已预约的日期
|
||
this.getFilterDate();
|
||
},
|
||
created() {},
|
||
methods: {
|
||
async getFilterDate(){
|
||
const req = {
|
||
// userId: this.vuex_user.id,
|
||
educationId: this.baseMsg.id,
|
||
}
|
||
// return
|
||
const res = await this.$u.apiList.GetDateTimeReturnApi(req);
|
||
console.log(res,'res--获取已预约日期')
|
||
// 截取一下
|
||
const result = res.map(x=>x.retuenSchoolTime.slice(0,10))
|
||
// 保存一份不去0的
|
||
this.filterDateSource = [...result];
|
||
// 去0 [2025-2-18]
|
||
const arr1 = result.map(x=>x.replace(/(?<=-)0/g, ''))
|
||
// 在生成一个 [2025/02/18]
|
||
const arr2 = arr1.map(x=>x.replaceAll('-','/'))
|
||
// 已预约的日期
|
||
this.filterDate = [...arr1,...arr2];
|
||
},
|
||
arrayToString(arr) {
|
||
let result = "";
|
||
const map = new Map([
|
||
[0, "周日"],
|
||
[1, "周一"],
|
||
[2, "周二"],
|
||
[3, "周三"],
|
||
[4, "周四"],
|
||
[5, "周五"],
|
||
[6, "周六"],
|
||
]);
|
||
arr.forEach((x) => {
|
||
if (map.has(x)) {
|
||
result += map.get(x) + "、";
|
||
}
|
||
});
|
||
return arr.length ? result.slice(0, result.length - 1) : result;
|
||
},
|
||
//获取返校设置
|
||
async getSetFn() {
|
||
const req = {
|
||
schoolId: this.baseMsg.schoolId,
|
||
}
|
||
const res = await this.$u.apiList.SelectInfoSetApi(req);
|
||
console.log(res, "res--");
|
||
let AllArr = [0, 1, 2, 3, 4, 5, 6];
|
||
// 星期设置
|
||
if (res.isDayOfWeek) {
|
||
let result = res.dayOfWeek.split(",").map((x) => Number(x));
|
||
this.weekSet = AllArr.filter((x) => {
|
||
return !result.includes(x);
|
||
});
|
||
// 处理tip提示
|
||
this.dateTip = this.arrayToString(this.weekSet);
|
||
}
|
||
// 限制选择日期
|
||
// 在用户需要提前几天申请预约
|
||
if (res.isBefore) {
|
||
const date = new Date();
|
||
date.setDate(date.getDate() + res.beforeDay);
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||
const day = String(date.getDate()).padStart(2, "0");
|
||
this.minDate = `${year}-${month}-${day}`;
|
||
} else {
|
||
// 默认最小日期是今天
|
||
const date = new Date();
|
||
date.setDate(date.getDate());
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||
const day = String(date.getDate()).padStart(2, "0");
|
||
this.minDate = `${year}-${month}-${day}`;
|
||
}
|
||
// 用户最大可选日期 默认180天
|
||
const dateRes = new Date();
|
||
// 在用户需要提前几天申请预约
|
||
let maxDay = res.isDayOfWeek ? res.returnSchoolDays : 180
|
||
dateRes.setDate(dateRes.getDate() + maxDay);
|
||
const year1 = dateRes.getFullYear();
|
||
const month1 = String(dateRes.getMonth() + 1).padStart(2, "0");
|
||
const day1 = String(dateRes.getDate()).padStart(2, "0");
|
||
this.maxDate = `${year1}-${month1}-${day1}`;
|
||
},
|
||
async getSchoolFn() {
|
||
const req = {
|
||
userId: this.vuex_user.id,
|
||
};
|
||
const res = await this.$u.apiList.MyEducations(req);
|
||
console.log(res, "res--");
|
||
const findRow = res.find((x) => x.isSelected === true);
|
||
if (!findRow) {
|
||
/* uni.showToast({
|
||
title: "未查询到当前教育经历",
|
||
icon: "none",
|
||
}); */
|
||
this.$refs.uToast.show({
|
||
title: "未查询到当前教育经历",
|
||
type: "error",
|
||
});
|
||
|
||
return;
|
||
}
|
||
Object.assign(this.baseMsg, findRow);
|
||
this.baseMsg.name = this.vuex_user.name;
|
||
},
|
||
// 添加随行人
|
||
addPersonFn() {
|
||
this.sxList.push({
|
||
name: "",
|
||
phone: "",
|
||
});
|
||
},
|
||
// 删除随行人
|
||
delFn(index) {
|
||
uni.showModal({
|
||
// title: "提示",
|
||
content: `确定删除随行人${index + 1}？`,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.sxList.splice(index, 1);
|
||
}
|
||
if (res.cancel) {
|
||
// console.log('用户点击取消');
|
||
}
|
||
},
|
||
});
|
||
},
|
||
// 选择日期
|
||
dateShowFn() {
|
||
this.dateShow = true;
|
||
},
|
||
// 日期change
|
||
dateChangeFn(e) {
|
||
console.log(e, "e--");
|
||
this.currentList = this.getDatesArray(e.startDate, e.endDate);
|
||
console.log(JSON.parse(JSON.stringify(this.currentList)),'this.currentList--1');
|
||
// 判断是否包含不可选中日期
|
||
let flag = this.currentList.some(function(x){
|
||
// 包含禁用的日期
|
||
if (this.disArr.includes(new Date(x).getDay())) {
|
||
return true;
|
||
}
|
||
// 包含已预约的日期
|
||
if(this.selectArr.includes(x)){
|
||
return true;
|
||
}
|
||
return false;
|
||
},{
|
||
disArr:this.weekSet, // 禁用的星期
|
||
selectArr:this.filterDateSource // 已预约的日期
|
||
})
|
||
// 过滤一下禁用的星期
|
||
// this.currentList = this.currentList.filter((x) => {
|
||
// // 当天的星期
|
||
// const dateWeek = new Date(x).getDay();
|
||
// // 包含禁用的星期过滤掉
|
||
// if (this.weekSet.includes(dateWeek)) {
|
||
// return false;
|
||
// }
|
||
// return true;
|
||
// });
|
||
// 过滤掉已预约的日期
|
||
// this.currentList = this.currentList.filter((x) => {
|
||
// if(this.filterDateSource.includes(x)){
|
||
// return false;
|
||
// }else{
|
||
// return true;
|
||
// }
|
||
// });
|
||
if(flag){
|
||
/* uni.showToast({
|
||
icon:'none',
|
||
title: `当前返校时间包含不可预约的日期，请重新选择！`,
|
||
duration: 2000,
|
||
}); */
|
||
this.$refs.uToast.show({
|
||
title: `当前返校时间包含不可预约的日期，请重新选择！`,
|
||
type: "error",
|
||
});
|
||
this.dateShow = true;
|
||
return
|
||
}
|
||
// 显示的值
|
||
this.formData.date = e.startDate + " ~ " + e.endDate;
|
||
console.log(JSON.parse(JSON.stringify(this.currentList)),'this.currentList--2');
|
||
// 处理成后端要的格式
|
||
this.dateList = this.currentList.map((x) => {
|
||
return {
|
||
time: x,
|
||
};
|
||
});
|
||
console.log(JSON.parse(JSON.stringify(this.dateList)),'this.dateList');
|
||
},
|
||
// 校验表单信息
|
||
validate() {
|
||
// 校验手机号的正则表达式
|
||
const phoneReg = /^[1][3-9][0-9]{9}$/;
|
||
return new Promise((resolve, reject) => {
|
||
// 校验返校日期
|
||
if (!this.formData.date) {
|
||
// this.$tips("返校日期不能为空", "error");
|
||
this.$refs.uToast.show({
|
||
title: "返校日期不能为空",
|
||
type: "error",
|
||
});
|
||
return reject(false);
|
||
}
|
||
// 校验联系电话
|
||
if (!this.formData.phone) {
|
||
// this.$tips("联系电话不能为空", "error");
|
||
this.$refs.uToast.show({
|
||
title: "联系电话不能为空",
|
||
type: "error",
|
||
});
|
||
return reject(false);
|
||
}
|
||
if (!phoneReg.test(this.formData.phone)) {
|
||
// this.$tips("联系电话格式不正确，请输入有效的手机号", "error");
|
||
this.$refs.uToast.show({
|
||
title: "联系电话格式不正确，请输入有效的手机号",
|
||
type: "error",
|
||
});
|
||
|
||
return reject(false);
|
||
}
|
||
// 校验随行人信息
|
||
if (this.sxList.length) {
|
||
for (let i = 0; i < this.sxList.length; i++) {
|
||
const item = this.sxList[i];
|
||
// 校验随行人名称
|
||
if (!item.name) {
|
||
// this.$tips(`随行人${i + 1}的名称不能为空`, "error");
|
||
this.$refs.uToast.show({
|
||
title: `随行人${i + 1}的名称不能为空`,
|
||
type: "error",
|
||
});
|
||
return reject(false);
|
||
}
|
||
// 校验随行人手机号
|
||
if (!item.phone) {
|
||
// this.$tips(`随行人${i + 1}的手机号不能为空`, "error");
|
||
this.$refs.uToast.show({
|
||
title: `随行人${i + 1}的手机号不能为空`,
|
||
type: "error",
|
||
});
|
||
return reject(false);
|
||
}
|
||
if (!phoneReg.test(item.phone)) {
|
||
// this.$tips(`随行人${i + 1}的手机号格式不正确，请输入有效的手机号`, "error");
|
||
this.$refs.uToast.show({
|
||
title: `随行人${i + 1}的手机号格式不正确，请输入有效的手机号`,
|
||
type: "error",
|
||
});
|
||
return reject(false);
|
||
}
|
||
}
|
||
}
|
||
// 校验返校事由
|
||
if (!this.formData.retuenSchoolReason) {
|
||
// this.$tips("返校事由不能为空", "error");
|
||
this.$refs.uToast.show({
|
||
title: "返校事由不能为空",
|
||
type: "error",
|
||
});
|
||
return reject(false);
|
||
}
|
||
resolve(true);
|
||
});
|
||
},
|
||
// 日期转换数组
|
||
getDatesArray(startDate, endDate) {
|
||
// 将输入的字符串转换为 Date 对象
|
||
const start = new Date(startDate);
|
||
const end = new Date(endDate);
|
||
|
||
// 创建一个用于存储结果的数组
|
||
let datesArray = [];
|
||
|
||
// 复制开始日期，以免修改原始对象
|
||
let currentDate = new Date(start);
|
||
|
||
// 使用循环从开始日期遍历到结束日期
|
||
while (currentDate <= end) {
|
||
// 将当前日期添加到数组中
|
||
// 使用 toISOString 方法去掉 T 后面的时间部分并去掉最后的 Z 和小数秒
|
||
datesArray.push(new Date(currentDate).toISOString().split("T")[0]);
|
||
|
||
// 增加一天
|
||
currentDate.setDate(currentDate.getDate() + 1);
|
||
}
|
||
|
||
return datesArray;
|
||
},
|
||
// 我要预约
|
||
async btnSubmitFn() {
|
||
const result = await this.validate().catch((e) => e);
|
||
console.log(result, "result");
|
||
if (!result) {
|
||
return;
|
||
}
|
||
// 校验是否勾选了同意
|
||
if (!this.formData.checked) {
|
||
return uni.showModal({
|
||
// title: "提示",
|
||
content: this.desc,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 默认帮用户勾选上 提交
|
||
this.formData.checked = true;
|
||
this.submit();
|
||
}
|
||
if (res.cancel) {
|
||
// console.log('用户点击取消');
|
||
}
|
||
},
|
||
});
|
||
}
|
||
this.submit();
|
||
},
|
||
// 提交的函数
|
||
async submit() {
|
||
// this.$tips("开发中", "success");
|
||
const req = {
|
||
userId: this.vuex_user.id,
|
||
educationId: this.baseMsg.id,
|
||
carNumber: this.formData.carNumber, //车牌号
|
||
phone: String(this.formData.phone), //联系电话
|
||
retuenSchoolReason: this.formData.retuenSchoolReason, //返校事由
|
||
// 随行人
|
||
TogetherPersonDtoList: this.sxList.map((x, xIndex) => {
|
||
x.index = xIndex;
|
||
x.phone = String(x.phone);
|
||
return x;
|
||
}),
|
||
// 日期
|
||
TimeList: this.dateList,
|
||
};
|
||
const res = await this.$u.apiList.AddReturnSchoolApi(req).catch(e=>e);
|
||
console.log(res, "res---");
|
||
if (res?.succeed === false) {
|
||
/* uni.showToast({
|
||
icon:'none',
|
||
title: res.error || "提交失败",
|
||
duration: 2000,
|
||
}); */
|
||
this.$refs.uToast.show({
|
||
title: res.error || "提交失败",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
/* uni.showToast({
|
||
title: "提交成功",
|
||
duration: 2000,
|
||
}); */
|
||
this.$refs.uToast.show({
|
||
title: "提交成功",
|
||
type: "success",
|
||
});
|
||
setTimeout(() => {
|
||
// 返回上一页
|
||
/* this.$u.route({
|
||
url: "pages/my/BackSchool/BackSchool",
|
||
}); */
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}, 1000);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 必填的样式
|
||
.must {
|
||
position: relative;
|
||
&::before {
|
||
content: "*";
|
||
color: red;
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -17rpx;
|
||
transform: scale(0.8);
|
||
/* 相对于父元素的左上角定位 */
|
||
}
|
||
}
|
||
.body-box {
|
||
max-height: calc(100vh - 250rpx);
|
||
overflow-y: auto;
|
||
border: 1px solid red;
|
||
}
|
||
// 基础信息
|
||
.base-box {
|
||
background-color: white;
|
||
// 单行样式
|
||
.item-line {
|
||
text-align: left;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
font-size: 30rpx;
|
||
line-height: 90rpx;
|
||
height: 90rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #f1f2f6;
|
||
.line-label {
|
||
// font-size: 30rpx;
|
||
color: black;
|
||
}
|
||
.line-value {
|
||
// font-weight: 700;
|
||
color: #969696;
|
||
}
|
||
}
|
||
}
|
||
// 表单
|
||
.form-box {
|
||
margin-top: 20rpx;
|
||
background-color: white;
|
||
// 返校日期
|
||
.item-date {
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
font-size: 30rpx;
|
||
line-height: 90rpx;
|
||
height: 90rpx;
|
||
display: flex;
|
||
position: relative;
|
||
.input-mask {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 90rpx;
|
||
// background-color: red;
|
||
}
|
||
.img {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 30rpx;
|
||
// padding-right: 30rpx;
|
||
}
|
||
}
|
||
// 单行样式
|
||
.item-line {
|
||
text-align: left;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
font-size: 30rpx;
|
||
line-height: 90rpx;
|
||
height: 90rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #f1f2f6;
|
||
.line-label {
|
||
// font-size: 30rpx;
|
||
color: black;
|
||
}
|
||
}
|
||
// 提示
|
||
.item-tip {
|
||
text-align: left;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
padding-bottom: 10rpx;
|
||
font-size: 22rpx;
|
||
// line-height: 90rpx;
|
||
// height: 90rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #f1f2f6;
|
||
.line-label {
|
||
// font-size: 30rpx;
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
// 随行人样式
|
||
|
||
.item-for {
|
||
background-color: #f7f6f9;
|
||
padding-left: 30rpx;
|
||
display: flex;
|
||
width: 100%;
|
||
border-bottom: 1px solid #e1e1e1 ;
|
||
|
||
.for-left {
|
||
// border: 1px solid blue;
|
||
width: calc(100% - 50rpx);
|
||
.each {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 80rpx;
|
||
height: 80rpx;
|
||
padding-right: 30rpx;
|
||
}
|
||
}
|
||
.del {
|
||
// border: 1px solid red;
|
||
width: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
&:last-of-type{
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
// 文本框
|
||
.item-text {
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
}
|
||
// 同意样式
|
||
.item-agree {
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
display: flex;
|
||
padding-bottom: 20rpx;
|
||
padding-top: 20rpx;
|
||
border-top: 1px solid #f1f2f6;
|
||
// margin-bottom: 50rpx;
|
||
// flex-wrap: wrap;
|
||
.agree-left {
|
||
width: 50rpx;
|
||
}
|
||
.agree-right {
|
||
color: black;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
// 按钮
|
||
.btn-box {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0;
|
||
height: 150rpx;
|
||
border-top: 1px solid #f1f2f6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|