713 lines
17 KiB
Vue
713 lines
17 KiB
Vue
<template>
|
||
<view>
|
||
<view class="container">
|
||
<view class="banner-box">
|
||
<image src="/static/imgs/ycsq.jpg" mode=""></image>
|
||
</view>
|
||
<view class="main">
|
||
<view class="tab-box">
|
||
<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">理发评价</view>
|
||
<view class="tab-item" :class="currentTabIndex == 2 ? 'active_tab' : ''" @click="currentTabIndex = 2">洗车评价</view>
|
||
<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">用车评价</view>
|
||
</view>
|
||
<!-- 理发评价 -->
|
||
<!-- applicant_name,satisfied_level,comment_content -->
|
||
<view class="reservation-box" v-if="currentTabIndex == 0">
|
||
<view class="comment-item" v-for="(item, index) in haircutM" :key="index">
|
||
<view class="user-head">
|
||
<image v-if="item.userHead" :src="item.userHead" mode=""></image>
|
||
<image v-else src="/static/imgs/missing-face.png" mode=""></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="date">{{ item.date }}</view>
|
||
<view class="name">{{ item.applicant_name }}</view>
|
||
<!-- <view class="grade">
|
||
<image v-for="(grade, gradeIndex) in 3" :key="gradeIndex" src="/static/imgs/star1.png" mode=""></image>
|
||
<image v-for="(grade, gradeIndex) in 2" :key="gradeIndex" src="/static/imgs/star0.png" mode=""></image>
|
||
</view> -->
|
||
<view class="comment-content">{{ item.comment_content }}</view>
|
||
<view class="food-list">
|
||
<view class="food-item">很满意</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 洗车评价 -->
|
||
<view v-if="currentTabIndex == 2">
|
||
<view class="comment-item" v-for="(item, index) in washList" :key="index">
|
||
<view class="user-head">
|
||
<image v-if="item.userHead" :src="item.userHead" mode=""></image>
|
||
<image v-else src="/static/imgs/missing-face.png" mode=""></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="date">{{ item.date }}</view>
|
||
<view class="name">{{ item.userName }}</view>
|
||
<!-- <view class="grade">
|
||
<image v-for="(grade, gradeIndex) in 3" :key="gradeIndex" src="/static/imgs/star1.png" mode=""></image>
|
||
<image v-for="(grade, gradeIndex) in 2" :key="gradeIndex" src="/static/imgs/star0.png" mode=""></image>
|
||
</view> -->
|
||
<view class="comment-content">{{ item.content }}</view>
|
||
<view class="food-list">
|
||
<view class="food-item">很满意</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 用车评价 -->
|
||
<view v-if="currentTabIndex == 1">
|
||
<view class="comment-item" v-for="(item, index) in commentList" :key="index">
|
||
<view class="user-head">
|
||
<image v-if="item.userHead" :src="item.userHead" mode=""></image>
|
||
<image v-else src="/static/imgs/missing-face.png" mode=""></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="date">{{ item.date }}</view>
|
||
<view class="name">{{ item.userName }}</view>
|
||
<!-- <view class="grade">
|
||
<image v-for="(grade, gradeIndex) in 3" :key="gradeIndex" src="/static/imgs/star1.png" mode=""></image>
|
||
<image v-for="(grade, gradeIndex) in 2" :key="gradeIndex" src="/static/imgs/star0.png" mode=""></image>
|
||
</view> -->
|
||
<view class="comment-content">{{ item.content }}</view>
|
||
<view class="food-list">
|
||
<view class="food-item">很满意</view>
|
||
<view class="date">{{ item.reason }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getDate,
|
||
alertTip,
|
||
callbackRequest,
|
||
getStorage,
|
||
regPhone,
|
||
formatDate
|
||
} from '@/common/util.js';
|
||
import {
|
||
getAllDept,
|
||
initWashCar,
|
||
applyWashCar,
|
||
getMyWashCarList
|
||
} from '@/common/api.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
page: 1,
|
||
pageSize: 10,
|
||
loadingType: 0, //0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: '上拉加载更多',
|
||
contentrefresh: '正在加载...',
|
||
contentnomore: '没有更多数据了'
|
||
},
|
||
userId: getStorage('userInfo').id,
|
||
currentTabIndex: 0,
|
||
deptList: [], //部门列表applicant_name,satisfied_level,comment_content
|
||
departmentIndex: 0, //选择的部门下标
|
||
washList: [{
|
||
userName: '1111',
|
||
date: '2019-09-09 09:09',
|
||
content: '还可以',
|
||
value: '0',
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
userName: '李**',
|
||
date: '2019-09-09 09:09',
|
||
content: '还不错',
|
||
value: '0',
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
userName: '王**',
|
||
date: '2019-09-01 09:09',
|
||
content: '还不错',
|
||
value: '0',
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
userName: '赵**',
|
||
date: '2019-09-01 09:09',
|
||
content: '还不错',
|
||
value: '0',
|
||
userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
],
|
||
haircutM: [{
|
||
applicant_name: '222',
|
||
date: '2019-09-09 09:09',
|
||
comment_content: '还可以',
|
||
value: '0',
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
applicant_name: '汪**',
|
||
date: '2019-09-09 09:09',
|
||
comment_content: '还可以',
|
||
value: '0',
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
applicant_name: '汪**',
|
||
date: '2019-09-09 09:09',
|
||
comment_content: '还可以',
|
||
value: '0',
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
applicant_name: '汪**',
|
||
date: '2019-09-09 09:09',
|
||
comment_content: '还可以',
|
||
value: '0',
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
}
|
||
],
|
||
commentList: [{
|
||
userName: '赵**',
|
||
date: '2019-09-09 09:09',
|
||
content: '还可以',
|
||
value: '0',
|
||
reason: "公务办事",
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
userName: '李**',
|
||
date: '2019-09-09 09:09',
|
||
content: '还不错',
|
||
value: '0',
|
||
reason: "出差接站",
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
userName: '王**',
|
||
date: '2019-09-01 09:09',
|
||
content: '还不错',
|
||
value: '0',
|
||
reason: "公务办事",
|
||
// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
userName: '赵**',
|
||
date: '2019-09-01 09:09',
|
||
content: '还不错',
|
||
value: '0',
|
||
reason: "出差送站",
|
||
userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
}
|
||
],
|
||
reservationList: [{
|
||
timeQ: '2019-09-09 09:09',
|
||
rerson: '公务办事',
|
||
numeberOfCar: '4',
|
||
userName: '张三',
|
||
apply_time: '2020-01-06 16:18:43',
|
||
concatUserName: '张三',
|
||
concatPhone: '15220161881',
|
||
conmentStatus: '1'
|
||
},
|
||
{
|
||
timeQ: '2019-10-09 09:09',
|
||
rerson: '出差送站',
|
||
numeberOfCar: '2',
|
||
userName: '李四',
|
||
apply_time: '2020-10-09 17:18:43',
|
||
concatUserName: '李四',
|
||
concatPhone: '12220161881',
|
||
conmentStatus: '0'
|
||
},
|
||
{
|
||
timeQ: '2019-11-09 09:09',
|
||
rerson: '出差接站',
|
||
numeberOfCar: '1',
|
||
userName: '张飞',
|
||
apply_time: '2020-11-09 17:18:43',
|
||
concatUserName: '张飞',
|
||
concatPhone: '13320161881',
|
||
conmentStatus: '0'
|
||
},
|
||
{
|
||
timeQ: '2019-12-09 09:09',
|
||
rerson: '公务接待',
|
||
numeberOfCar: '3',
|
||
userName: '王思',
|
||
apply_time: '2020-12-09 17:18:43',
|
||
concatUserName: '王思',
|
||
concatPhone: '19920161881',
|
||
conmentStatus: '0'
|
||
}
|
||
],
|
||
formatDate: formatDate
|
||
};
|
||
},
|
||
components: {
|
||
loadMore,
|
||
contentNone
|
||
},
|
||
onLoad(option) {},
|
||
watch: {
|
||
currentTabIndex: function(newVal, oldVal) {
|
||
// if(newVal == 1 ){
|
||
// if(this.haircutM.length == 0){
|
||
// this.page = 1;
|
||
// this.loadingType = 0;
|
||
// this.initData();
|
||
// }else{
|
||
// this.list = this.commentList1
|
||
// }
|
||
// }else if(newVal == 2){
|
||
// if(this.commentList.length == 0){
|
||
// this.page = 1;
|
||
// this.loadingType = 0;
|
||
// this.initData();
|
||
// }else{
|
||
// this.list = this.commentList2
|
||
// }
|
||
// }else if(newVal == 3){
|
||
// if(this.washList.length == 0){
|
||
// this.page = 1;
|
||
// this.loadingType = 0;
|
||
// this.initData();
|
||
// }else{
|
||
// this.list = this.commentList2
|
||
// }
|
||
// }
|
||
}
|
||
},
|
||
methods: {
|
||
// initData() {
|
||
// let params = {
|
||
// method: initWashCar,
|
||
// data: {
|
||
// applyDate: this.date[this.chooseDateIndex].tiems,
|
||
// userId: this.userId
|
||
// }
|
||
// };
|
||
// callbackRequest(params).then(res => {
|
||
// if (res.data.returnCode == 1) {
|
||
// }
|
||
// });
|
||
// },
|
||
},
|
||
onReachBottom() {
|
||
// if (this.loadingType !== 0 || this.currentTabIndex != 1) {
|
||
// return;
|
||
// }
|
||
// this.loadingType = 1;
|
||
// this.page = this.page + 1;
|
||
// this.getReservationRecord();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
|
||
.container {
|
||
position: relative;
|
||
overflow: hidden;
|
||
min-height: 100vh;
|
||
background: #f8f8f8;
|
||
|
||
.banner-box {
|
||
width: 100%;
|
||
height: 240upx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.main {
|
||
margin: 172upx 40upx 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
|
||
.tab-box {
|
||
overflow: hidden;
|
||
border-radius: 10upx 10upx 0 0;
|
||
background: rgba(132, 149, 167, 0.8);
|
||
height: 70upx;
|
||
|
||
.tab-item {
|
||
float: left;
|
||
height: 70upx;
|
||
width: 33.3%;
|
||
font-size: 30upx;
|
||
color: #e5f6ff;
|
||
text-align: center;
|
||
line-height: 70upx;
|
||
}
|
||
|
||
.active_tab {
|
||
background: #fff;
|
||
color: #333;
|
||
border-radius: 10upx 10upx 0 0;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.reservation-box {
|
||
background: #fff;
|
||
|
||
.time-box {
|
||
overflow: hidden;
|
||
padding-top: 20rpx;
|
||
|
||
.time-item {
|
||
float: left;
|
||
width: 196rpx;
|
||
margin: 0 0rpx 20rpx 20rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
line-height: 32rpx;
|
||
padding: 10rpx 0;
|
||
position: relative;
|
||
border: 1px solid #ccc;
|
||
box-sizing: border-box;
|
||
|
||
.time-text {
|
||
color: #666;
|
||
|
||
text {
|
||
padding: 0 6rpx;
|
||
color: #00c277;
|
||
}
|
||
|
||
.color-666 {
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border: 1px solid #00c277;
|
||
|
||
.icon {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-box {
|
||
// padding: 20upx 30upx 50upx;
|
||
background: #fff;
|
||
|
||
.form-item {
|
||
overflow: hidden;
|
||
border-bottom: 1px solid #eee;
|
||
padding: 30upx;
|
||
|
||
.label {
|
||
float: left;
|
||
width: 150upx;
|
||
font-size: 28upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
line-height: 50upx;
|
||
}
|
||
|
||
.ipt-box {
|
||
margin-left: 160upx;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.select {
|
||
.arrow {
|
||
float: right;
|
||
width: 16upx;
|
||
height: 29upx;
|
||
margin-top: 10upx;
|
||
}
|
||
|
||
.picker {
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-item:last-child {
|
||
border-bottom: 0px;
|
||
}
|
||
}
|
||
|
||
/* 评论 */
|
||
.evaluate {
|
||
padding-top: 30upx;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.evaluate .title {
|
||
font-size: 28upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
line-height: 40upx;
|
||
padding: 0 30rpx 30rpx;
|
||
}
|
||
|
||
.evaluate .evaluate_item {
|
||
border-bottom: 1px solid #eeeeee;
|
||
padding: 0 0 30upx 50upx;
|
||
}
|
||
|
||
.evaluate .evaluate_item:last-child {
|
||
border: none;
|
||
}
|
||
|
||
.evaluate .evaluate_item .user {
|
||
padding: 20upx 0;
|
||
}
|
||
|
||
.evaluate .evaluate_item .user .username {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
padding-right: 20upx;
|
||
}
|
||
|
||
.evaluate .evaluate_item .user span image {
|
||
width: 40upx;
|
||
height: 40upx;
|
||
margin-right: 5upx;
|
||
}
|
||
|
||
.evaluate .evaluate_item .text {
|
||
font-size: 28upx;
|
||
color: #666;
|
||
line-height: 40upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroll-view {
|
||
padding-top: 30upx;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
height: 120upx;
|
||
|
||
.time-item-box {
|
||
padding: 0 10upx;
|
||
margin: 0 16upx;
|
||
display: inline-block;
|
||
|
||
.time {
|
||
display: block;
|
||
width: 100%;
|
||
font-size: 28upx;
|
||
color: #666;
|
||
}
|
||
|
||
.week {
|
||
display: block;
|
||
width: 100%;
|
||
font-size: 28upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.time-active {
|
||
.time {
|
||
color: #00c277;
|
||
}
|
||
|
||
.week {
|
||
color: #00c277;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-box {
|
||
.detail {
|
||
// margin-top: 10upx;
|
||
margin-bottom: 14upx;
|
||
background: #ffffff;
|
||
border-radius: 4upx;
|
||
}
|
||
|
||
.detail_header {
|
||
padding: 15upx 30upx;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.detail_header .blueSign {
|
||
height: 30upx;
|
||
width: 10upx;
|
||
background: #00c277;
|
||
display: inline-block;
|
||
margin: 10upx 14upx 0 0;
|
||
}
|
||
|
||
.detail_header .font-tilte {
|
||
display: inline-block;
|
||
font-size: 28upx;
|
||
color: #333;
|
||
line-height: 50upx;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.detail_header .font-result {
|
||
display: inline-block;
|
||
float: right;
|
||
font-size: 26upx;
|
||
color: #00c277;
|
||
line-height: 50upx;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.detail_msg {
|
||
padding: 20upx 30upx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.detail_msg .info-item {
|
||
margin-bottom: 10upx;
|
||
font-size: 28upx;
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 140upx;
|
||
}
|
||
|
||
.infoSpan {
|
||
width: auto;
|
||
font-size: 28upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.comment-btn {
|
||
float: right;
|
||
font-size: 24upx;
|
||
border-radius: 10upx;
|
||
color: #fff;
|
||
line-height: 50upx;
|
||
text-align: center;
|
||
min-width: 140upx;
|
||
background-color: #00c277;
|
||
}
|
||
|
||
.comment-yc {
|
||
float: left;
|
||
font-size: 24upx;
|
||
border-radius: 10upx;
|
||
color: #fff;
|
||
line-height: 50upx;
|
||
text-align: center;
|
||
min-width: 140upx;
|
||
background-color: #00c277;
|
||
}
|
||
}
|
||
|
||
.comment-item {
|
||
overflow: hidden;
|
||
margin-top: 20rpx;
|
||
|
||
.user-head {
|
||
float: left;
|
||
width: 90upx;
|
||
height: 90upx;
|
||
border-radius: 50%;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.fr-content {
|
||
margin: 0 0 0upx 110upx;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
padding-bottom: 26upx;
|
||
|
||
.name {
|
||
font-size: 28upx;
|
||
font-weight: bold;
|
||
line-height: 44upx;
|
||
}
|
||
|
||
.date {
|
||
float: right;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
line-height: 44upx;
|
||
}
|
||
|
||
.grade {
|
||
padding-bottom: 10upx;
|
||
|
||
text {
|
||
display: inline-block;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
line-height: 36upx;
|
||
vertical-align: top;
|
||
padding-right: 20upx;
|
||
}
|
||
|
||
image {
|
||
width: 36upx;
|
||
height: 36upx;
|
||
margin-right: 8upx;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
|
||
.comment-content {
|
||
font-size: 26upx;
|
||
color: #666;
|
||
line-height: 40upx;
|
||
margin: 6upx;
|
||
}
|
||
|
||
.food-list {
|
||
padding: 10rpx 0 0;
|
||
overflow: hidden;
|
||
|
||
.food-item {
|
||
float: left;
|
||
margin-right: 10rpx;
|
||
font-size: 24rpx;
|
||
line-height: 30rpx;
|
||
color: $assistColor;
|
||
padding: 4rpx 16rpx;
|
||
border: 1px solid $assistColor;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|