277 lines
7.4 KiB
Vue
277 lines
7.4 KiB
Vue
<template>
|
||
<div>
|
||
<u-navbar title="我的预约" @leftClick="leftClick" placeholder></u-navbar>
|
||
<div class="content">
|
||
<div class="item-wrapper">
|
||
<div class="item" @click="show = true">
|
||
<div v-if="!makeStatus">请选择体检状态</div>
|
||
<div v-else>{{ makeStatus }}</div>
|
||
<div><u-icon name="arrow-right"></u-icon></div>
|
||
</div>
|
||
<div class="btn">
|
||
<u-button type="primary" text="查询" @click="handleQuery"></u-button>
|
||
</div>
|
||
</div>
|
||
<u-picker :show="show" :columns="columns" keyName="label" @close="show = false" @confirm="handleSearch"></u-picker>
|
||
|
||
<div class="tip">提示：向左滑动，取消预约</div>
|
||
|
||
<u-swipe-action class="swipe-wrapper">
|
||
<u-swipe-action-item
|
||
class="swipe-item"
|
||
:options="options"
|
||
v-for="(item, index) in makeList"
|
||
:key="index"
|
||
:disabled="item.ifCancel != 2"
|
||
@click="handleDelete(item)"
|
||
>
|
||
<div class="swipe-action" @click="handleOption(item)">
|
||
<div class="item-icon">
|
||
<u-icon
|
||
v-if="item.ifCancel == 1 || item.ifCancel == 4"
|
||
name="/static/images-tijian/isCanceled.png"
|
||
size="120"
|
||
></u-icon>
|
||
<u-icon v-else-if="item.ifCancel == 2" name="/static/images-tijian/readyExam.png" size="120"></u-icon>
|
||
<u-icon v-else name="/static/images-tijian/isExamed.png" size="120"></u-icon>
|
||
</div>
|
||
<div class="item-cont">
|
||
<div class="hospital-name">{{ item.hospitalName }}</div>
|
||
<div class="combName">
|
||
<div>{{ item.combName }}</div>
|
||
<div style="color: red">￥{{ item.setMealPrice || '0.0' }}</div>
|
||
</div>
|
||
<div>预约时间：{{ item.phyAppontTime }}</div>
|
||
</div>
|
||
</div>
|
||
</u-swipe-action-item>
|
||
</u-swipe-action>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
token: '',
|
||
show: false,
|
||
columns: [
|
||
[
|
||
{ label: '全部', value: 4 },
|
||
{ label: '已取消', value: 1 },
|
||
{ label: '待体检', value: 2 },
|
||
{ label: '已体检', value: 3 }
|
||
]
|
||
],
|
||
// 体检状态
|
||
makeStatus: '',
|
||
makeStatusValue: 4,
|
||
// 列表
|
||
makeList: [],
|
||
// 全部列表
|
||
allList: [],
|
||
// 已取消列表
|
||
canceledList: [],
|
||
// 待体检列表
|
||
readyList: [],
|
||
// 已体检
|
||
examList: [],
|
||
isDisabled: false,
|
||
options: [
|
||
{
|
||
text: '取消',
|
||
style: {
|
||
backgroundColor: '#f56c6c'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
this.token = uni.getStorageSync('tjToken')
|
||
},
|
||
mounted() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
handleSearch(e) {
|
||
console.log('🚀 ~ handleSearch ~ e:', e)
|
||
this.makeStatus = e.value[0].label
|
||
this.makeStatusValue = e.value[0].value
|
||
this.show = false
|
||
},
|
||
handleQuery(){
|
||
if (this.makeStatusValue == 4) {
|
||
this.makeList = this.allList
|
||
} else if (this.makeStatusValue == 1) {
|
||
this.makeList = this.canceledList
|
||
} else if (this.makeStatusValue == 2) {
|
||
this.makeList = this.readyList
|
||
} else if (this.makeStatusValue == 3) {
|
||
this.makeList = this.examList
|
||
}
|
||
},
|
||
// 获取列表 getpersonappointInfo
|
||
getList() {
|
||
console.log('🚀 ~ 列表 ~ this.token:', this.token)
|
||
uni.request({
|
||
url: config.tjBaseUrl + '/app/getpersonappointInfo',
|
||
method: 'post',
|
||
data: this.token,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
token: this.token
|
||
},
|
||
success: res => {
|
||
res = res.data
|
||
console.log('🚀 ~ 列表 ~ res:', res)
|
||
if (res.res == 1) {
|
||
this.makeList = this.allList = res.obj
|
||
this.canceledList = res.obj.filter(item => item.ifCancel == 1)
|
||
this.readyList = res.obj.filter(item => item.ifCancel == 2)
|
||
this.examList = res.obj.filter(item => item.ifCancel == 3)
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log('🚀 ~ 列表 ~ err:', err)
|
||
}
|
||
})
|
||
},
|
||
// 操作-删除 cancelpoint
|
||
handleDelete(item) {
|
||
console.log('🚀 ~ handleDelete ~ item:', item)
|
||
const params = {
|
||
cancelId: item.id,
|
||
mealType: item.setMealType,
|
||
token: this.token
|
||
}
|
||
// 弹框确认
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认取消预约吗？',
|
||
success: res => {
|
||
console.log('🚀 ~ handleDelete ~ res:', res)
|
||
if (res.confirm) {
|
||
uni.request({
|
||
url: config.tjBaseUrl + '/app/cancelpoint',
|
||
method: 'post',
|
||
data: params,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
token: this.token
|
||
},
|
||
success: res => {
|
||
res = res.data
|
||
console.log('🚀 ~ 取消预约 ~ res:', res)
|
||
if (res.res == 1) {
|
||
if (item.setMealType == '2') {
|
||
uni.removeStorageSync('appoint')
|
||
} else if (item.setMealType == '3') {
|
||
uni.removeStorageSync('jobAppoint')
|
||
}
|
||
// 刷新 - 重定向
|
||
uni.redirectTo({
|
||
url: '/pages/HealthExaminationApp/myAppointment/myAppointment'
|
||
})
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log('🚀 ~ 列表 ~ err:', err)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log('🚀 ~ handleDelete ~ err:', err)
|
||
}
|
||
})
|
||
},
|
||
//
|
||
handleOption(item) {
|
||
console.log('🚀 ~ handleOption ~ item:', item)
|
||
const params = {
|
||
id: item.id,
|
||
combName: item.combName
|
||
}
|
||
console.log('🚀 ~ handleOption ~ params:', params)
|
||
uni.navigateTo({
|
||
url: '/pages/HealthExaminationApp/myAppointment/healthExamDetails?params=' + JSON.stringify(params)
|
||
})
|
||
},
|
||
leftClick() {
|
||
uni.reLaunch({
|
||
url: '/pages/HealthExaminationApp/index/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding: 10px;
|
||
}
|
||
.item-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
.item {
|
||
padding: 0 15px;
|
||
width: calc(100vw - 100px);
|
||
height: 50px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #f5f5f5;
|
||
border-radius: 50px;
|
||
font-size: 14px;
|
||
margin-right: 10px;
|
||
}
|
||
.btn {
|
||
width: 50px;
|
||
}
|
||
}
|
||
.tip {
|
||
margin-left: 10px;
|
||
margin-bottom: 20px;
|
||
color: #999;
|
||
font-size: 15px;
|
||
}
|
||
.swipe-item {
|
||
border-radius: 5px;
|
||
margin: 10px 0;
|
||
|
||
.swipe-action {
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
word-break: break-all;
|
||
|
||
.item-icon {
|
||
//定位 移到左上角
|
||
position: absolute;
|
||
top: -42px;
|
||
left: -36px;
|
||
}
|
||
|
||
.item-cont {
|
||
margin-left: 50px;
|
||
|
||
.hospital-name {
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.combName {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|