792 lines
20 KiB
Vue
792 lines
20 KiB
Vue
<template>
|
||
<view class="hzIndex">
|
||
<hzHeader title="理发预约"></hzHeader>
|
||
<view class="hzContent" :style="{paddingBottom:currentTabIndex == 0?'300upx':'180upx'}">
|
||
<view class="tab-box">
|
||
<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">
|
||
理发预约
|
||
<view class="tabBottom" v-if="currentTabIndex == 0"></view>
|
||
</view>
|
||
<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">
|
||
预约记录
|
||
<view class="tabBottom" v-if="currentTabIndex == 1"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 理发预约表单 -->
|
||
<view class="form-box one" v-if="currentTabIndex == 0">
|
||
<!-- 选择日期 -->
|
||
<view class="selectDate">
|
||
<view class="dateTit">
|
||
<view class="leftIcon">
|
||
|
||
</view>
|
||
<text style="font-size:32upx;color:#333;font-weight: 600;">选择日期</text>
|
||
</view>
|
||
<scroll-view class="scrollDate" scroll-x="true">
|
||
<view class="dateItem" :class="chooseDateIndex == index ? 'time-active' : ''"
|
||
v-for="(item, index) in date" :key="index" @click="switchTab(index)">
|
||
<text class="time">{{ item.tiems.substr(5, 10) }}</text>
|
||
<text class="week">{{ item.week }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="loc">
|
||
<image src="@/static/haircut/loc.png" mode=""></image>
|
||
<view v-for="(item, index) in places" :key="index" @click="choosePlace(item.id, item.name)">
|
||
<text class="round" :class="choosePlaceId == item.id ? 'barberactive' : ''"></text>
|
||
<text class="input_left">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 选择地点 -->
|
||
<!-- 包含节假日及周六周日的判断 -->
|
||
<!-- <view v-if="this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1&&this.date[this.chooseDateIndex].week!='星期六'&&this.date[this.chooseDateIndex].week!='星期日')"> -->
|
||
<view class="timeInterval" style="margin-top: 20upx;"
|
||
v-if="this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1)">
|
||
<view class="dateTit">
|
||
<image src="@/static/haircut/date.png" mode=""></image>
|
||
<text style="font-size:30upx;color:#333;font-weight: 600;">选择时段</text>
|
||
</view>
|
||
<!-- 选择时间段 -->
|
||
<view class="selectInterval">
|
||
<view class="intervalItem"
|
||
:class="[chooseTime.id == item.haircut_time_id ? 'time-active' : '', item.status == '1' &&item.remain_count!= 0&&item.compareTime? '' : 'bg-gray']"
|
||
@click="item.status == '1' &&item.compareTime? checkItem(item.haircut_time_id, item.haircut_time, item.status, item.remain_count) : ''"
|
||
v-for="(item, index) in barber" :key="index">
|
||
<view class="time-text">{{ item.haircut_time }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="tips">
|
||
<view class="tipsTit">
|
||
<image src="@/static/haircut/tz.png" mode=""></image>
|
||
<text>科技楼：每周一、三、五（10:00-18:00）</text>
|
||
</view>
|
||
<view class="tipsCont">
|
||
<text>会议中心：每周二、四、六、日（10:00-21:00）</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 预约记录列表 -->
|
||
<view v-else>
|
||
<view class="list-box" v-if="appointlist.length > 0">
|
||
<view class="detail" v-for="(item, index) in appointlist" :key="index">
|
||
<view class="detail_header">
|
||
<view style="display: flex;align-items: center;">
|
||
<image src="@/static/haircut/leftIcon.png" mode=""></image>
|
||
<text class="font-tilte">理发预约</text>
|
||
</view>
|
||
<text class="font-result" v-if="item.int_status==0">预约成功</text>
|
||
<text class="font-result" style="background-color: #FFEFE3;color: #FB8107;"
|
||
v-if="item.int_status==1">已取消</text>
|
||
<text class="font-result" style="background-color: #F6DFDF;color:#BD1515 "
|
||
v-if="item.int_status==2">客户未至</text>
|
||
</view>
|
||
<view class="detail_msg">
|
||
<view class="info-item">
|
||
<text>预约时间：</text>
|
||
<text class="infoSpan">{{ item.timeQ }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text>地点：</text>
|
||
<text class="infoSpan">{{ areas[item.barber_id||1]}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text>申请时间：</text>
|
||
<text class="infoSpan">{{ formatDate(item.apply_time,'m_Time') }}</text>
|
||
</view>
|
||
|
||
<!-- <view class="comment-btn bg-ccc" v-if="item.edit_own == 1">已修改</view> -->
|
||
</view>
|
||
<view class="infoBtn">
|
||
<view class="comment-btn" v-if="item.compareTimeCancle&&item.int_status==0"
|
||
@click="cancleHaircut(item)">取消</view>
|
||
<view class="comment-btn"
|
||
v-if="item.conmentStatus == 0 && item.compareTime&&item.int_status==0"
|
||
@click="goEvaluatePage(item.detailId)">评价</view>
|
||
<view class="comment-btn bg-ccc" v-if="item.conmentStatus == 1&&item.int_status==0">已评价
|
||
</view>
|
||
<view class="comment-btn" v-if="item.compareTimeEdit&&item.int_status==0"
|
||
@click="goEditPage(item,index)">修改</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<content-none :padTop="20" v-else></content-none>
|
||
</view>
|
||
|
||
</view>
|
||
<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
|
||
<view class="sub-btn"
|
||
v-if="currentTabIndex == 0&&(this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1))">
|
||
<view class="btn" @click="submit">提交预约</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getAllDept,
|
||
initHaircut,
|
||
getHaircutBasicInfo,
|
||
saveHaircutInfo,
|
||
getMyHaircutList,
|
||
cancleHaircut
|
||
} from '@/common/api.js';
|
||
import {
|
||
callbackRequest,
|
||
getStorage,
|
||
getNumDate,
|
||
alertTip,
|
||
regPhone,
|
||
formatDate
|
||
} from '@/common/util.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
export default {
|
||
components: {
|
||
loadMore,
|
||
contentNone
|
||
},
|
||
data() {
|
||
return {
|
||
//分页
|
||
page: 1,
|
||
pageSize: 10,
|
||
loadingType: 0, //0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: '上拉加载更多',
|
||
contentrefresh: '正在加载...',
|
||
contentnomore: '没有更多数据了'
|
||
},
|
||
user: getStorage('userInfo'),
|
||
currentTabIndex: 0, //当前选择的tab
|
||
appointlist: [
|
||
// {
|
||
// id: 189,
|
||
// detailId: 100224,
|
||
// userName: '王健兴ssss',
|
||
// placeName: '丽景酒店',
|
||
// conmentStatus: '1',
|
||
// timeQ: '2020-01-07 (09:00-13:00)',
|
||
// status: '预约成功',
|
||
// apply_time: 1578383782000
|
||
// }
|
||
], //预约记录列表
|
||
chooseTime: {
|
||
id: '',
|
||
time: ''
|
||
}, //选择的时间段 (几点到几点)
|
||
chooseDateIndex: 0, //当前选择的理发日期
|
||
userName: getStorage('userInfo').userName, //申请人姓名
|
||
userTel: getStorage('userInfo').telnumber, //申请人手机号
|
||
key: '1',
|
||
date: getNumDate(7), //获取今天起 最近7天时间
|
||
formatDate: formatDate,
|
||
|
||
choosePlaceId: '1', // 当前选择的地点
|
||
choosePlaceName: '会议中心',
|
||
areas: ['', '会议中心', '科技楼'],
|
||
places: [],
|
||
|
||
barber: [], //{ haircut_time_id: '1', haircut_time: '08:00-08:30', remain_count: 1, status: 0 }, // status 1空闲 2繁忙
|
||
submitFlag: true
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.currentTabIndex = option.currentTabIndex || 0;
|
||
if (this.date[this.chooseDateIndex].weekDay == "1" || this.date[this.chooseDateIndex].weekDay == "3" || this
|
||
.date[this.chooseDateIndex].weekDay == "5") {
|
||
this.places = [{
|
||
id: '2',
|
||
name: '科技楼'
|
||
}];
|
||
this.choosePlaceId = '2';
|
||
this.choosePlaceName = '科技楼';
|
||
} else {
|
||
this.places = [{
|
||
id: '1',
|
||
name: '会议中心'
|
||
}];
|
||
this.choosePlaceId = '1';
|
||
this.choosePlaceName = '会议中心';
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getCalendar();
|
||
if (this.currentTabIndex == 0) {
|
||
// 初始化
|
||
this.init();
|
||
} else {
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.getList();
|
||
}
|
||
},
|
||
watch: {
|
||
currentTabIndex: function(newVal, oldVal) {
|
||
this.chooseTime.id = '';
|
||
this.chooseTime.time = '';
|
||
if (newVal == 1) {
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.getList();
|
||
} else {
|
||
// 初始化
|
||
this.init();
|
||
}
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
if (this.loadingType !== 0 || this.currentTabIndex == 0) {
|
||
return;
|
||
}
|
||
this.loadingType = 1;
|
||
this.page = this.page + 1;
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
cancleHaircut(item) {
|
||
let params = {
|
||
method: cancleHaircut,
|
||
data: {
|
||
id: item.detailId,
|
||
intStatus: 1
|
||
}
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
alertTip("已成功取消预约！");
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.getList();
|
||
} else {
|
||
alertTip(res.data.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
goEditPage(item, index) {
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/haircut/haircut-edit?id=` + item.detailId + '&type=1'
|
||
});
|
||
},
|
||
compareTime(time1) {
|
||
var endTime = time1.split("-")[0];
|
||
var endDate = this.date[this.chooseDateIndex].tiems + " " + endTime;
|
||
endDate = endDate.replace(/-/g, '/');
|
||
var endDateTime = new Date(endDate).getTime();
|
||
// var nowDateTime = new Date().getTime() + 3 * 60 * 60 * 1000;
|
||
var nowDateTime = new Date().getTime();
|
||
if (endDateTime > nowDateTime) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
compareTimeForRecord(date, time) {
|
||
var endTime = time.split(" ")[1].split("-")[0];
|
||
var endDate = date + " " + endTime;
|
||
endDate = endDate.replace(/-/g, '/');
|
||
var endDateTime = new Date(endDate).getTime();
|
||
var nowDateTime = new Date().getTime();
|
||
if (endDateTime < nowDateTime) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
compareTimeForEdit(date, time) {
|
||
|
||
var startTime = time.split(" ")[1].split("-")[0];
|
||
var startTime = date + " " + startTime;
|
||
startTime = startTime.replace(/-/g, '/');
|
||
var startDateTime = new Date(startTime).getTime();
|
||
var nowDateTime = new Date().getTime();
|
||
if (startDateTime - nowDateTime >= 30 * 60 * 1000) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
compareTimeForCancle(date, time) {
|
||
|
||
var startTime = time.split(" ")[1].split("-")[0];
|
||
var startTime = date + " " + startTime;
|
||
startTime = startTime.replace(/-/g, '/');
|
||
var startDateTime = new Date(startTime).getTime();
|
||
var nowDateTime = new Date().getTime();
|
||
if (startDateTime > nowDateTime) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
//选择日期
|
||
switchTab(index) {
|
||
if (this.chooseDateIndex != index) {
|
||
this.chooseDateIndex = index;
|
||
this.chooseTime.id = '';
|
||
this.chooseTime.time = '';
|
||
if (this.date[this.chooseDateIndex].weekDay == "1" || this.date[this.chooseDateIndex].weekDay == "3" ||
|
||
this.date[this.chooseDateIndex].weekDay == "5") {
|
||
this.places = [{
|
||
id: '2',
|
||
name: '科技楼'
|
||
}];
|
||
this.choosePlaceId = '2';
|
||
this.choosePlaceName = '科技楼';
|
||
} else {
|
||
this.places = [{
|
||
id: '1',
|
||
name: '会议中心'
|
||
}];
|
||
this.choosePlaceId = '1';
|
||
this.choosePlaceName = '会议中心';
|
||
}
|
||
this.init();
|
||
}
|
||
},
|
||
//选择地点
|
||
choosePlace(id, name) {
|
||
if (this.choosePlaceId != id) {
|
||
this.chooseTime.id = '';
|
||
this.chooseTime.time = '';
|
||
this.choosePlaceId = id;
|
||
this.choosePlaceName = name;
|
||
this.init();
|
||
}
|
||
},
|
||
// 选择时间段
|
||
checkItem(id, time, status, count) {
|
||
if (status == 2) {
|
||
alertTip('该时间段已预约');
|
||
return false;
|
||
} else if (count <= 0) {
|
||
alertTip('该时间段已约满');
|
||
return false;
|
||
}
|
||
this.$set(this.chooseTime, 'id', id);
|
||
this.$set(this.chooseTime, 'time', time);
|
||
},
|
||
init() {
|
||
//理发预约时间段剩余名额查询接口
|
||
let params = {
|
||
method: getHaircutBasicInfo,
|
||
data: {
|
||
userId: this.user.id,
|
||
haircutDate: this.date[this.chooseDateIndex].tiems,
|
||
barbershop: this.choosePlaceId
|
||
}
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
if (this.date[this.chooseDateIndex].isholiday == 1) {
|
||
uni.showToast({
|
||
title: '今日节假日不可预约',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
res = res.data;
|
||
console.log(res)
|
||
if (res.returnCode === '1') {
|
||
//this.kind = res.returnData[0].type;
|
||
this.barber = res.returnData[0].remain[0].haircut_remain;
|
||
for (var i = 0; i < this.barber.length; i++) {
|
||
var compareTime = this.compareTime(this.barber[i].haircut_time);
|
||
this.barber[i].compareTime = compareTime;
|
||
}
|
||
//this.chooseWorkerId = res.returnData[0].remain[0].barber_id;
|
||
//this.chooseWorkerName = res.returnData[0].remain[0].barber_name;
|
||
}
|
||
});
|
||
},
|
||
|
||
//提交预约
|
||
submit() {
|
||
if (!this.choosePlaceId) {
|
||
alertTip('请选择理发地点');
|
||
return false;
|
||
} else if (!this.chooseTime.time && !this.chooseTime.id) {
|
||
alertTip('请选择时间段');
|
||
return false;
|
||
} else if (this.userName.length == 0) {
|
||
alertTip('请输入联系人姓名');
|
||
return false;
|
||
} else if (!regPhone.test(this.userTel)) {
|
||
alertTip('请输入正确的手机号');
|
||
return false;
|
||
}
|
||
if (!this.submitFlag) {
|
||
return;
|
||
}
|
||
this.submitFlag = false;
|
||
|
||
let params = {
|
||
method: saveHaircutInfo,
|
||
data: {
|
||
applyDate: this.date[this.chooseDateIndex].tiems,
|
||
applyPersonName: this.userName,
|
||
applyPersonTel: this.userTel,
|
||
applyTime: this.chooseTime.time,
|
||
applyTimeId: this.chooseTime.id,
|
||
barbershopArea: this.choosePlaceId,
|
||
barberId: this.choosePlaceId,
|
||
//placeName: this.choosePlaceName,
|
||
//deptId:this.user.deptId,
|
||
userId: this.user.id
|
||
}
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
let result = res.data;
|
||
if (result.returnCode == 1) {
|
||
alertTip('预约成功');
|
||
setTimeout(_ => {
|
||
this.submitFlag = true;
|
||
this.currentTabIndex = 1;
|
||
}, 2000);
|
||
} else {
|
||
this.submitFlag = true;
|
||
alertTip(result.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
//获取列表记录接口
|
||
getList() {
|
||
// let lfDatas = uni.getStorageSync('lfDatas');
|
||
// this.appointlist = lfDatas;
|
||
let params = {
|
||
method: getMyHaircutList,
|
||
data: {
|
||
pageNum: this.page,
|
||
pageSize: this.pageSize,
|
||
userId: this.user.id
|
||
}
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
if (this.page == 1) {
|
||
this.appointlist = res.data.returnData || [];
|
||
|
||
} else {
|
||
if (res.data.returnData.length > 0) {
|
||
this.appointlist = this.appointlist.concat(res.data.returnData);
|
||
this.loadingType = 0;
|
||
} else {
|
||
this.loadingType = 2;
|
||
}
|
||
}
|
||
for (var i = 0; i < this.appointlist.length; i++) {
|
||
var compareTime = this.compareTimeForRecord(this.appointlist[i].apply_date, this
|
||
.appointlist[i].timeQ);
|
||
var compareTimeEdit = this.compareTimeForEdit(this.appointlist[i].apply_date, this
|
||
.appointlist[i].timeQ);
|
||
var compareTimeCancle = this.compareTimeForCancle(this.appointlist[i].apply_date, this
|
||
.appointlist[i].timeQ);
|
||
this.appointlist[i].compareTime = compareTime;
|
||
this.appointlist[i].compareTimeEdit = compareTimeEdit;
|
||
this.appointlist[i].compareTimeCancle = compareTimeCancle;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
goEvaluatePage(id) {
|
||
uni.navigateTo({
|
||
url: `/pages/order-form/evaluate?type=4&typeId=${id}`
|
||
});
|
||
},
|
||
getCalendar(params) {
|
||
let params2 = {
|
||
method: "greenCalendar/getCalendarList",
|
||
data: {
|
||
date_name: this.date[0].tiems,
|
||
}
|
||
};
|
||
callbackRequest(params2).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
var list = res.data.returnData;
|
||
for (var j = 0; j < this.date.length; j++) {
|
||
var fl = true;
|
||
for (var i = 0; i < list.length; i++) {
|
||
if (list[i].date_name == this.date[j].tiems) {
|
||
this.$set(this.date[j], 'isholiday', list[i].isholiday);
|
||
fl = false;
|
||
}
|
||
}
|
||
if (fl) {
|
||
this.$set(this.date[j], 'isholiday', '0');
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.sub-btn {
|
||
width: 100%;
|
||
height: 120upx;
|
||
background-color: #fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
color: #fff;
|
||
font-size: 32upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.btn {
|
||
width: 94%;
|
||
height: 88upx;
|
||
border-radius: 44upx;
|
||
text-align: center;
|
||
line-height: 88upx;
|
||
background-image: linear-gradient(to right, #5BCE9D, #00ADA6);
|
||
}
|
||
|
||
}
|
||
|
||
.hzContent {
|
||
padding: 22upx;
|
||
margin-top: 150upx;
|
||
|
||
.bg-gray {
|
||
opacity: 0.6;
|
||
color: #999999 !important;
|
||
background-color: #F2F6FA !important;
|
||
}
|
||
|
||
.tab-box {
|
||
width: 80%;
|
||
display: flex;
|
||
font-size: 32upx;
|
||
color: #555555;
|
||
|
||
.active_tab {
|
||
font-weight: 800;
|
||
|
||
}
|
||
|
||
.tab-item {
|
||
width: 40%;
|
||
|
||
.tabBottom {
|
||
width: 28%;
|
||
height: 4upx;
|
||
border-radius: 5px;
|
||
background-image: linear-gradient(to right, #64E182, #1CA7B2);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
width: 100%;
|
||
padding: 20upx;
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
margin-top: 20upx;
|
||
color: #FB8107;
|
||
font-size: 28upx;
|
||
|
||
.tipsTit {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tipsCont {
|
||
margin-left: 38upx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
image {
|
||
width: 36upx;
|
||
height: 36upx;
|
||
}
|
||
}
|
||
|
||
.form-box {
|
||
margin-top: 20upx;
|
||
|
||
.loc {
|
||
margin-top: 20upx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 30upx;
|
||
color: #333333;
|
||
|
||
image {
|
||
width: 38upx;
|
||
height: 38upx;
|
||
margin-right: 10upx;
|
||
}
|
||
}
|
||
|
||
.dateTit {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 35upx;
|
||
height: 35upx;
|
||
margin-right: 10upx;
|
||
}
|
||
|
||
.leftIcon {
|
||
width: 8upx;
|
||
height: 30upx;
|
||
background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
|
||
border-radius: 5px;
|
||
margin-right: 10upx;
|
||
}
|
||
}
|
||
|
||
.dateItem {
|
||
margin: 0 10upx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 28upx;
|
||
color: #555;
|
||
border-radius: 16upx;
|
||
padding: 18upx 20upx;
|
||
background-color: #F2F6FA;
|
||
border: 1px solid #F2F6FA;
|
||
}
|
||
|
||
|
||
|
||
.selectInterval {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.intervalItem {
|
||
width: 30%;
|
||
margin-top: 20upx;
|
||
padding: 15upx 20upx;
|
||
// background: #F2F6FA;
|
||
border-radius: 8upx;
|
||
font-weight: 400;
|
||
font-size: 28upx;
|
||
// color: #999999;
|
||
background: #EDFCF7;
|
||
color: #0DB0A7;
|
||
border: 1px solid rgba(0, 0, 0, 0);
|
||
}
|
||
}
|
||
|
||
.timeInterval,
|
||
.selectDate {
|
||
width: 100%;
|
||
padding: 20upx;
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
|
||
.time-active {
|
||
background: #EDFCF7;
|
||
color: #0DB0A7;
|
||
border: 1px solid #0DB0A7;
|
||
}
|
||
|
||
.scrollDate {
|
||
margin-top: 20upx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/deep/::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
/deep/.uni-scroll-view-content {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.list-box {
|
||
width: 100%;
|
||
|
||
.detail {
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
margin-top: 20upx;
|
||
padding: 20upx;
|
||
|
||
.detail_header {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.font-tilte {
|
||
font-weight: bold;
|
||
font-size: 32upx;
|
||
color: #333333;
|
||
margin-left: 20upx;
|
||
}
|
||
|
||
.font-result {
|
||
font-weight: 400;
|
||
font-size: 24upx;
|
||
color: #0DB0A7;
|
||
padding: 10upx 30upx;
|
||
background: #C1EFEA;
|
||
border-radius: 30upx;
|
||
}
|
||
|
||
image {
|
||
width: 42upx;
|
||
height: 42upx;
|
||
}
|
||
}
|
||
|
||
.detail_msg {
|
||
font-weight: 400;
|
||
font-size: 28upx;
|
||
color: #999999;
|
||
margin-top: 20upx;
|
||
border-bottom: 1px solid #EBEFF7;
|
||
padding-bottom: 20upx;
|
||
|
||
.info-item {
|
||
margin-top: 20upx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.infoBtn {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 20upx;
|
||
font-size: 28upx;
|
||
color: #0DB0A7;
|
||
|
||
.comment-btn {
|
||
display: flex;
|
||
border-radius: 30upx;
|
||
margin-left: 20upx;
|
||
padding: 10upx 50upx;
|
||
border: 1px solid #0DB0A7;
|
||
}
|
||
}
|
||
|
||
.bg-ccc {
|
||
color: #CACACA;
|
||
border: 1px solid #CACACA !important;
|
||
}
|
||
}
|
||
</style> |