167 lines
6.3 KiB
Vue
167 lines
6.3 KiB
Vue
<template>
|
|
<view class="pad-x180">
|
|
<!-- 状态栏 -->
|
|
<status-nav :titleVal="'自主预约'" :statusTitle="true"></status-nav>
|
|
<!-- 自定义二级分类 -->
|
|
<!-- 列表 -->
|
|
<view v-if="isLoading" :style="{paddingTop: statusHeight+'px'}" class="pad-zy30" style="padding-bottom: 160rpx;">
|
|
<view v-if="dataList.length!=0" class="mar-s30 bacf pad20" v-for="(item,index) in dataList" :key="index" style="border-radius: 28rpx;">
|
|
<view class="disjbac">
|
|
<view class="disac">
|
|
<image class="radius20 mar-y20 flexs" src="/static/public/logo.png" style="width: 98rpx;height: 98rpx;" mode=""></image>
|
|
<view>
|
|
<view class="fon36 col3 bold clips1">{{item.name}}</view>
|
|
<view class="fon24 col3 mar-s10">{{item.content}}</view>
|
|
</view>
|
|
</view>
|
|
<view :style="{background:[ingColor,publicColor,failColor,failColor,failColor][item.status]}" class="fon24 colf radius10 flexs" style="padding: 14rpx 24rpx;">{{['审核中...','预约成功','预约失败','预约取消','预约完成'][item.status]}}</view>
|
|
</view>
|
|
<view class="mar-s36 fon24 col3">预约时间：{{item.yuTime}}</view>
|
|
<view class="disjbac fon24 col3 mar-s30">
|
|
<!-- <view>联系人：{{item.lname}}</view> -->
|
|
<view>联系电话：{{item.lphone}}</view>
|
|
</view>
|
|
<view @tap="quyuy(index)" class="disjcac mar-s40 width100 colf fon30 radius10 posir" :style="{background:[quColor,quColor,publicColor,publicColor,publicColor][item.status]}" style="height: 90rpx;line-height: 90rpx;">
|
|
{{['取消预约','取消预约','重新预约','再次预约','再次预约'][item.status]}}
|
|
<!-- <button :disabled="(item.status==2 || item.status==3 || item.status==4)?true:false" class="posia"
|
|
style="top: 0;left: 0;right: 0;bottom: 0;background-color: #000000;opacity: 0;">{{['取消预约','取消预约','重新预约','再次预约','再次预约'][item.status]}}</button> -->
|
|
</view>
|
|
</view>
|
|
<nothing-page v-if="dataList.length==0" :content="'暂无更多预约内容'"></nothing-page>
|
|
</view>
|
|
<!-- 底部按钮 -->
|
|
<view class="posixzy bacf pad-sx25" style="bottom: 180rpx; background: none;">
|
|
<view @tap="goYu" class="fon30 radius20 tc colf bold" style="margin: 0 83rpx;height: 90rpx;line-height: 90rpx;" :style="{background:publicColor}">我要预约</view>
|
|
</view>
|
|
<!-- 弹框 -->
|
|
<pu-po :isShowT="isShowT" :contentVal="'是否取消当前预约？'" :clearVal="'否'" :comfrimVal="'是'" @comfirmev="comfirmev" @cancleev="isShowT=false"></pu-po>
|
|
<!-- 底部客服 -->
|
|
<public-customer></public-customer>
|
|
<!-- 用户信息授权，手机号授权 -->
|
|
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
|
|
<!-- 底部导航 -->
|
|
<view class="posixzy">
|
|
<bottom-tab></bottom-tab>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import bottomTab from '@/components/bottom-tab.vue';
|
|
export default {
|
|
components: {
|
|
bottomTab,
|
|
},
|
|
data() {
|
|
return {
|
|
failColor:'#CCCCCC',//失败背景颜色
|
|
ingColor:'#FFBE4D',//审核中背景颜色
|
|
quColor:'#FF4D4D',//取消预约背景色
|
|
dataList:[
|
|
// {status:0,imgSrc:'',name:'陈高医生',content:'植发',yuTime:'2021年07月08日 14:30至15:30',lname:'甄先生',lphone:'18888888888'},
|
|
// {status:1,imgSrc:'',name:'陈高医生',content:'植发',yuTime:'2021年07月08日 14:30至15:30',lname:'甄先生',lphone:'18888888888'},
|
|
// {status:2,imgSrc:'',name:'陈高医生',content:'植发',yuTime:'2021年07月08日 14:30至15:30',lname:'甄先生',lphone:'18888888888'},
|
|
],
|
|
btnCon:'取消预约',//取消预约/重新预约
|
|
page:1,
|
|
size:20,
|
|
total:'',//总数
|
|
isZanw:true,
|
|
isLoading:false,
|
|
isShowT:false,
|
|
zzId:''//自主预约ID
|
|
}
|
|
},
|
|
computed: {
|
|
// 主题颜色
|
|
publicColor() {
|
|
return this.$store.state.publicColor
|
|
},
|
|
statusHeight() {
|
|
return this.$store.state.statusHeight
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if(this.total!=this.dataList.length){
|
|
this.page++
|
|
this.checkPoint()//调用自主预约列表事件
|
|
} else {
|
|
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多预约记录','none',1000)
|
|
this.isZanw = false
|
|
}
|
|
},
|
|
onShow() {
|
|
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
|
|
this.$toolAll.tools.showToast('加载中...','loading')
|
|
this.checkPoint()//调用自主预约列表事件
|
|
}
|
|
},
|
|
methods: {
|
|
checkPoint(){//查询自主预约列表事件
|
|
this.$requst.post('user/appointment-list',{page:this.page,size:this.size}).then(res=>{
|
|
// console.log('查询自主预约列表：',res);
|
|
if(res.code==0){
|
|
if(this.page==1) this.dataList = []
|
|
if(res.data.list.length!=0){
|
|
this.total = res.data.total
|
|
res.data.list.forEach(item=>{
|
|
let timeStr = item.appointment_at.slice(0,10).split('-')
|
|
let timeZui = item.period.name.split('-')
|
|
let newStatus = ''
|
|
if(item.status_text=='审核中') newStatus = 0
|
|
if(item.status_text=='预约成功') newStatus = 1
|
|
if(item.status_text=='预约失败') newStatus = 2
|
|
if(item.status_text=='预约取消') newStatus = 3
|
|
if(item.status_text=='预约完成') newStatus = 4
|
|
let obj = {
|
|
id:item.id,
|
|
status:newStatus,
|
|
imgSrc: uni.getStorageSync('userLogo'),//缓存token,
|
|
name:item.name,
|
|
content:item.typeInfo.title,
|
|
yuTime:`${timeStr[0]}年${timeStr[1]}月${timeStr[2]}日 ${timeZui[0]}至${timeZui[1]}`,
|
|
lname:item.name,
|
|
lphone:item.phone
|
|
}
|
|
this.dataList.push(obj)
|
|
})
|
|
}
|
|
this.isLoading = true
|
|
}
|
|
},error=>{})
|
|
},
|
|
goYu(){//去预约
|
|
uni.navigateTo({
|
|
url:'/pagesA/ppointmentEv/ppointmentEv'
|
|
})
|
|
},
|
|
quyuy(index){//取消预约事件
|
|
if(this.dataList[index].status==0 || this.dataList[index].status==1){
|
|
this.zzId = this.dataList[index].id
|
|
this.isShowT = true
|
|
} else {
|
|
uni.navigateTo({
|
|
url:'/pagesA/ppointmentEv/ppointmentEv'
|
|
})
|
|
}
|
|
|
|
},
|
|
comfirmev(){
|
|
this.isShowT = false
|
|
this.$requst.post('user/appointment-cancel',{appointment_id:this.zzId}).then(res=>{
|
|
// console.log('取消预约成功返回：',res);
|
|
if(res.code==0){
|
|
this.$toolAll.tools.showToast('取消预约成功')
|
|
setTimeout(()=>{
|
|
this.checkPoint()
|
|
},1500)
|
|
}
|
|
},error=>{})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|