221 lines
6.5 KiB
Vue
221 lines
6.5 KiB
Vue
<template>
|
||
<view class="flex-col align-center">
|
||
<view :customStyle="{backgroundColor:'transparent'}">
|
||
<u-popup :show="show" @close="close" mode="right" @open="open">
|
||
|
||
<u-list>
|
||
<view class="text-lg margin flex-col align-center">
|
||
<text>顾问列表</text>
|
||
<text class="text-sm">点击行选择顾问</text>
|
||
</view>
|
||
<u-list-item v-for="(item, index) in repairAdvisorList" :key="index">
|
||
<view class="flex-row justify-between align-center padding solid" style="width: 600rpx;"
|
||
@click="choose(item.advisorId,item.advisorName)">
|
||
<view class="flex-col justify-between align-start " style="height: 140rpx;">
|
||
<view class="">
|
||
{{item.advisorName}}
|
||
</view>
|
||
<view class="">
|
||
{{item.advisorPhone}}
|
||
</view>
|
||
<view class="">
|
||
微信：{{item.advisorWx}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="">
|
||
<u--image :showLoading="true" :src="baseUrl + item.advisorWxImg" width="160rpx"
|
||
height="160rpx"></u--image>
|
||
|
||
</view>
|
||
</view>
|
||
</u-list-item>
|
||
</u-list>
|
||
</u-popup>
|
||
|
||
<view class="w700 padding flex-col align-center">
|
||
<view class="text-center margin-top margin-bottom text-bold" style="color: #d2c3af; width: 160rpx;">
|
||
预约信息
|
||
</view>
|
||
<view class="nickname-input margin-bottom" @click="show = true">
|
||
<text style="color: #d2c3af; width: 160rpx;">选择顾问</text>
|
||
<input class="input-style" v-model.trim="postData.advisorName" placeholder="请选择维修顾问"
|
||
border="surround" :disabled="true" :readonly="true" />
|
||
</view>
|
||
<view class="nickname-input margin-bottom" @click="dateTimeShow = true">
|
||
<text style="color: #d2c3af; width: 160rpx;">到店时间</text>
|
||
|
||
<input class="input-style" v-model.trim="postData.appointmentTime" :disabled="true" :readonly="true"
|
||
placeholder="请选择预计到店时间" border="surround" />
|
||
</view>
|
||
<u-datetime-picker :show="dateTimeShow" v-model="minDate" :maxDate="maxDate" :minDate="minDate"
|
||
confirmColor="#242a38" @confirm="dateTimeConfirm" @cancel="dateTimeShow = false" mode="datetime"
|
||
visibleItemCount="5" itemHeight="80"></u-datetime-picker>
|
||
|
||
<view class="nickname-input margin-bottom">
|
||
<u--textarea v-model="postData.repairInfo" placeholder="请描述维修事项或故障情况" count></u--textarea>
|
||
</view>
|
||
<view class="text-center margin-top margin-bottom text-bold" style="color: #d2c3af; width: 160rpx;">
|
||
个人信息
|
||
</view>
|
||
|
||
<view class="nickname-input margin-bottom">
|
||
<text style="color: #d2c3af; width: 160rpx;">您的姓名</text>
|
||
<input class="input-style" v-model.trim="postData.realName" placeholder="请填写姓名" border="surround" />
|
||
</view>
|
||
<view class="nickname-input margin-bottom">
|
||
<text style="color: #d2c3af; width: 160rpx;">您的电话</text>
|
||
<input class="input-style" maxlength="11" v-model.trim="postData.phonenumber" placeholder="请填写电话"
|
||
border="surround" />
|
||
</view>
|
||
|
||
<view class="button-style">
|
||
<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))" shape="circle"
|
||
text="提交" @click="addWx" :customStyle="{color:'#000',height:'60rpx'}"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imagesUrl: getApp().globalData.config.imagesUrl,
|
||
baseUrl: getApp().globalData.config.baseUrl,
|
||
show: false,
|
||
repairAdvisorList: [],
|
||
postData: {
|
||
advisorName: '',
|
||
advisorId: '',
|
||
repairInfo: '',
|
||
appointmentTime: '',
|
||
realName: '',
|
||
phonenumber: '',
|
||
},
|
||
dateTimeShow: false,
|
||
maxDate: null,
|
||
minDate: null,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getRepairAdvisorList()
|
||
this.getUserInfo()
|
||
this.getMaxDateAndMinDate();
|
||
},
|
||
methods: {
|
||
getMaxDateAndMinDate() {
|
||
const currentDate = new Date(); // 获取当前日期
|
||
const thirtyYearsAgo = new Date(currentDate.getFullYear(), currentDate.getMonth() + 3, currentDate
|
||
.getDate()); // 30年之前的日期
|
||
this.maxDate = thirtyYearsAgo.getTime();
|
||
this.minDate = Number(currentDate);
|
||
},
|
||
|
||
|
||
// 获得上户日期
|
||
dateTimeConfirm(e) {
|
||
// console.log(e.value);
|
||
this.postData.appointmentTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
|
||
this.dateTimeShow = false
|
||
},
|
||
// 获取用户信息
|
||
async getUserInfo() {
|
||
const res = await this.$request({
|
||
url: '/getInfo',
|
||
})
|
||
if (res.code == 200 && res.hasOwnProperty('user')) {
|
||
this.postData.realName = res.user.realName
|
||
this.postData.phonenumber = res.user.phonenumber
|
||
}
|
||
},
|
||
async getRepairAdvisorList() {
|
||
const res = await this.$request({
|
||
url: '/system/repairAdvisor/listWx',
|
||
data: {
|
||
pageNum: 1,
|
||
pageSize: 40
|
||
}
|
||
})
|
||
this.repairAdvisorList = res.rows
|
||
console.log(res);
|
||
},
|
||
close() {
|
||
this.show = false
|
||
},
|
||
choose(id, name) {
|
||
this.postData.advisorId = id
|
||
this.postData.advisorName = name
|
||
this.close()
|
||
},
|
||
//提交数据
|
||
async addWx() {
|
||
console.log(this.postData);
|
||
if (uni.$u.test.isEmpty(this.postData.advisorId)) {
|
||
return this.$modal.msgError('请选择维修顾问')
|
||
}
|
||
if (uni.$u.test.isEmpty(this.postData.advisorName)) {
|
||
return this.$modal.msgError('请选择顾问')
|
||
}
|
||
if (uni.$u.test.isEmpty(this.postData.appointmentTime)) {
|
||
return this.$modal.msgError('请选择到店时间')
|
||
}
|
||
if (uni.$u.test.isEmpty(this.postData.repairInfo.length)) {
|
||
return this.$modal.msgError('请描述维修事项')
|
||
}
|
||
if (uni.$u.test.isEmpty(this.postData.realName)) {
|
||
return this.$modal.msgError('请填写姓名')
|
||
}
|
||
if (uni.$u.test.isEmpty(this.postData.phonenumber)) {
|
||
return this.$modal.msgError('请填写电话')
|
||
}
|
||
const res = await this.$request({
|
||
url: '/system/repairAppointmentInfo/addWx',
|
||
method: 'POST',
|
||
data: this.postData
|
||
})
|
||
this.$modal.msgSuccess('预约成功')
|
||
setTimeout(() => {
|
||
this.$tab.navigateBack()
|
||
}, 2500)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
min-height: 100vh;
|
||
background-color: #242a38;
|
||
}
|
||
|
||
.nickname-input {
|
||
width: 100%;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.nickname-label {
|
||
font-size: 30rpx;
|
||
display: block;
|
||
margin-bottom: 20rpx;
|
||
text-align: center;
|
||
color: #d2c3af;
|
||
}
|
||
|
||
.input-style {
|
||
border-bottom: 1px solid #d2c3af;
|
||
display: block;
|
||
width: 100%;
|
||
height: 60rpx;
|
||
color: #d2c3af;
|
||
}
|
||
|
||
.button-style {
|
||
width: 600rpx;
|
||
margin: 40rpx auto;
|
||
}
|
||
</style> |