159 lines
6.1 KiB
Vue
159 lines
6.1 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<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">
|
||
<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>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
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>
|