driver-manage/pages/index/CoachDetails.vue

404 lines
6.9 KiB
Vue
Raw Normal View History

2024-08-28 11:51:49 +08:00
<template>
<view class="content">
<view class="">
<view class="top-d-s">
<view class="touxiang">
<image :src="imageUrl+userInfo.image" mode=""></image>
</view>
<view class="name_">{{userInfo.instructorName}}</view>
</view>
<view class="bai-box">
<view class="tab-box">
<view class="t-box" @click="switchType(index)" v-for="(item,index) in tabList" :key="index">
<view :class="{'lvsize' :tabindex2 == index }">{{item}}</view>
<view class="gang" :class="{'lvback' :tabindex2 == index }"></view>
</view>
</view>
<view class="box-ds" v-if="tabindex2==1" v-for="(item,index) in dataList" :key="index">
<view class="d-s">
<view class="left-box">
<image :src="imageUrl+item.photo" mode=""></image>
</view>
<view class="">
<view class="box-title">{{item.name}}</view>
<view class="wrap-box" style=" margin-bottom: 5px;">
<view class="icon-lv">{{item.automatic}}</view>
<view class="icon-h">{{item.license}}</view>
</view>
<view class="wrap-box">
<view class="price_">{{item.price}}</view>
<view class="sc">定金{{item.reserveMoney}}</view>
</view>
</view>
</view>
</view>
<view class="box-ds" v-else v-for="(item,index) in studentList" :key="index">
<view class="d-s">
<view class="">
<view class="box-title">学员名称: {{" "+item.name}}</view>
<view class="box-title">课程: {{item.coueseName}}</view>
<view class="box-title">电话{{item.phone}}</view>
<view class="price_">{{item.price}}</view>
</view>
<view @click="makePhone(item.phone)" class="top-right">
<image src="../../static/teel.png" mode=""></image>
</view>
</view>
</view>
<view class=""></view>
</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request'
export default {
data() {
return {
imageUrl: this.$imagesUrl,
tabindex: 0,
tabindex2: 0,
queryParams: {
pageNum: 1,
pageSize: 100,
deptId: uni.getStorageSync("deptId"),
name: null,
jlId: null
},
dataList: [],
tabList: [
'教学学员', '教学课程',
],
userInfo: {},
studentList: [],
id: null
}
},
onLoad(option) {
this.id = option.id
this.queryParams.jlId = option.id
},
onShow() {
this.getDataInfo()
this.getUserInfo()
this.getStudent()
},
methods: {
makePhone(phoneNum) {
uni.makePhoneCall({
phoneNumber: phoneNum
})
},
getUserInfo() {
request({
url: '/drivingSchool/system/schoolCoach/' + this.id,
method: 'get'
}).then((res) => {
if (res.code == 200) {
this.userInfo = res.data
}
})
},
getStudent() {
request({
url: '/system/pay/applet/getUserList',
method: 'get',
params: this.queryParams
}).then((res) => {
if (res.code == 200) {
this.studentList = res.rows
}
})
},
getDataInfo() {
request({
url: '/drivingSchool/system/driveSchoolCourse/list',
method: 'get',
params: this.queryParams
}).then((res) => {
if (res.code == 200) {
this.dataList = res.rows
}
})
},
switchType(idx) {
this.tabindex2 = idx
},
goAdd() {
uni.navigateTo({
url: '/pages/index/addCoach'
})
},
goback() {
uni.navigateBack()
}
}
}
</script>
<style scoped lang="scss">
.top-right {
z-index: 9999;
width: 53px;
height: 53px;
overflow: hidden;
padding-left: 126px;
image {
width: 100%;
height: 100%;
}
}
.content {
width: 100%;
background: linear-gradient(180deg, #4AA76F 0%, #4AA76F 10%, #f7f7f7 28%, #f7f7f7 100%);
height: 100vh;
box-sizing: border-box;
padding-top: 10px;
}
.container {
width: 100%;
background: #f7f7f7;
box-sizing: border-box;
}
.d-s {
display: flex;
align-items: center;
}
.top-d-s {
width: 95%;
margin: 10px auto;
display: flex;
align-items: center;
}
.touxiang {
width: 56px;
height: 56px;
border-radius: 0px 0px 0px 0px;
overflow: hidden;
border-radius: 50%;
margin-right: 10px;
image {
width: 100%;
height: 100%;
}
}
.touxiang1 {
width: 36px;
height: 36px;
border-radius: 0px 0px 0px 0px;
overflow: hidden;
border-radius: 50%;
margin-right: 10px;
image {
width: 100%;
height: 100%;
}
}
.name_ {
font-weight: bold;
font-size: 16px;
color: #FFFFFF;
}
.bai-box {
width: 95%;
margin: 10px auto;
background: #FFFFFF;
border-radius: 8px;
box-sizing: border-box;
padding: 15px;
}
.tab-box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.t-box {
width: 50%;
text-align: center;
font-weight: 400;
font-size: 14px;
color: #333333;
}
.gang {
width: 16px;
height: 3px;
margin: 0px auto;
margin-top: 5px;
// background: #4AA76F;
}
.lvsize {
color: #4AA76F !important;
}
.lvback {
background: #4AA76F;
}
.box-ds {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.left-box {
width: 106px;
height: 66px;
overflow: hidden;
border-radius: 6px;
margin-right: 10px;
image {
width: 100%;
height: 100%;
}
}
.box-title {
font-weight: 800;
font-size: 14px;
color: #333333;
margin-bottom: 5px;
}
.wrap-box {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.icon-lv {
background: #E6F5F0;
border-radius: 2px 2px 2px 2px;
box-sizing: border-box;
padding: 5px;
font-weight: 400;
font-size: 10px;
font-size: 10px;
color: #4AA76F;
margin-right: 10px;
}
.icon-h {
background: #FFEDD4;
border-radius: 2px 2px 2px 2px;
box-sizing: border-box;
padding: 5px;
font-weight: 400;
font-size: 10px;
font-size: 10px;
color: #EDA23A;
}
.price_ {
font-weight: bold;
font-size: 14px;
color: #FB423B;
margin-right: 15px;
}
.sc {
font-size: 10px;
color: #AAAAAA;
text-transform: none;
}
.liang-box {
border-top: 1px solid #DDDDDD;
box-sizing: border-box;
padding: 10px 0px;
margin-top: 10px;
}
.lb-box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #999999;
margin-bottom: 5px;
}
.right-icon {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 12px;
font-weight: bold;
margin-top: 10px;
}
.h-bs- {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #EEEEEE;
box-sizing: border-box;
padding: 10px 0px;
font-size: 12px;
}
.anniu {
width: 313px;
height: 40px;
background: #FFFFFF;
border-radius: 20px 20px 20px 20px;
border: 1px solid #4AA76F;
display: flex;
align-items: center;
justify-content: center;
color: #4AA76F;
margin: 15px auto;
}
</style>