<template>
|
<view class="page">
|
<image class="bg-image" src="/static/images/tabbar/loginbg.png" mode="aspectFill"></image>
|
<view class="header">
|
|
<view class="search-bar">
|
<view class="filter" @click="getListscreen">
|
<text>筛选</text>
|
<uni-icons type="bottom" size="12" color="#666"></uni-icons>
|
</view>
|
<view class="search">
|
<uni-icons type="search" size="16" color="#999"></uni-icons>
|
<input type="text" placeholder="搜索体检套餐" placeholder-class="placeholder" />
|
<text class="search-btn" @click="getListsearch">搜索</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 顶部弹窗 -->
|
<uni-popup class="select_popup" ref="selectPopup" :mask-click="false">
|
<view class="selectPopup">
|
<view class="select_popup_list">
|
<view class="select_popup_item" @click="itemChoosed(item,index)" v-for="(item,index) in dataList">
|
<text
|
:style="{'color': (choosedList.indexOf(item) != -1 ? '#F6A235':'#333333')}">{{item.name}}</text>
|
<!-- <image v-show="choosedList.indexOf(item) != -1 ? itemChoose : itemNotChoose "
|
src="../../static/image/icons/select_choosed.png" mode=""></image> -->
|
</view>
|
</view>
|
<!-- <view class="filter-section">
|
<view class="time-grid">
|
<view class="grid-item" @click="itemChoosed(item,index)" v-for="(item,index) in dataList" :key="index">
|
{{ item }}
|
</view>
|
</view>
|
</view> -->
|
|
<view >
|
<text class="select_btn" @click="resetChoosedList">重置</text>
|
<text class="select_btn" @click="submit">确定</text>
|
</view>
|
</view>
|
</uni-popup>
|
|
<scroll-view class="content" scroll-y>
|
<view class="list">
|
<view v-for="(item, index) in packagelist" :key="index" class="card">
|
<image class="card-img" :src="item.image" mode="aspectFill"></image>
|
<view class="card-content" @click="package(item.pacId)">
|
<view class="card-header">
|
<text class="name">{{ item.pacName }}</text>
|
<view class="hospital">{{ item.hospital }}</view>
|
<view class="tag-row">
|
<view class="tag">
|
<image class="img" src="/static/images/index/tao.png" mode="aspectFill"></image>
|
<text>健康证</text>
|
</view>
|
<text class="book-time">{{ item.bookTime }}</text>
|
</view>
|
</view>
|
<view class="card-footer">
|
<view class="price">
|
<text class="currency">¥</text>
|
<text class="amount">{{ item.price }}</text>
|
</view>
|
<text class="book-count">预约量{{ item.bookCount }}+</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
<script>
|
import {
|
getPackageList,
|
getList,
|
} from "@/api/system/package";
|
|
export default {
|
data() {
|
return {
|
dataList: {},
|
packagelist: [],
|
choosedList: [],
|
// dataList: [{
|
// value: "男",
|
// text:"0"
|
// }, {
|
// value: "女",
|
// text:"1"
|
// },
|
// {
|
// value: "所有",
|
// text:"2"
|
// }
|
// ],
|
categoryId: "",
|
// itemChoose: true,
|
// itemNotChoose: false,
|
}
|
},
|
//生命周期方法 —— 页面加载时
|
onLoad() {
|
this.getList();
|
this.getliebiao();
|
},
|
methods: {
|
getliebiao() {
|
getList().then(res => {
|
this.dataList = res.data;
|
})
|
},
|
/** 查询列表 */
|
getList() {
|
uni.showLoading({
|
title: '请稍等！'
|
})
|
getPackageList(this.queryParams).then((response) => {
|
if (response.code == 200) {
|
uni.hideLoading()
|
this.packagelist = response.data;
|
}
|
});
|
// uni.navigateTo({
|
// url: '/pagesA/search/search'
|
// })
|
},
|
getListsearch() {
|
uni.navigateTo({
|
url: '/pagesA/search/search'
|
})
|
},
|
|
getListscreen() {
|
this.toggle()
|
},
|
toggle() {
|
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
this.$refs.selectPopup.open('top')
|
},
|
itemChoosed(item, index) {
|
this.choosedItem = index
|
if (this.choosedList.indexOf(item) !== -1) {
|
this.choosedList.splice(this.choosedList.indexOf(item), 1)
|
} else {
|
this.choosedList.push(item)
|
if (this.choosedList.length > 1) {
|
this.choosedList.forEach(item1 => {
|
if (item1 != item) {
|
this.choosedList.splice(item1, 1)
|
}
|
})
|
// this.$modal.msgError("只能选择一项！")
|
}
|
}
|
|
},
|
|
|
//点击重置按钮
|
resetChoosedList() {
|
this.choosedList = []
|
this.$refs.selectPopup.close()
|
},
|
//点击确定按钮
|
submit() {
|
if (this.choosedList.length == 1) {
|
this.choosedList.forEach(item => {
|
this.categoryId = item.id
|
})
|
let data = {
|
categoryId: this.categoryId
|
}
|
getPackageList(data).then(res => {
|
this.packagelist = res.data
|
this.$refs.selectPopup.close()
|
})
|
} else {
|
this.$modal.msgError("只能选择一项!")
|
}
|
|
|
},
|
|
//跳转
|
package(pacId) {
|
uni.navigateTo({
|
url: '/pagesA/PackageDetails/PackageDetails?pacId=' + pacId
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
height: 100%;
|
}
|
|
.page {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
background-color: #f5f5f5;
|
position: relative;
|
}
|
|
.header {
|
background: #fff;
|
padding: 0 30rpx;
|
flex-shrink: 0;
|
}
|
|
.search-bar {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0 30rpx;
|
gap: 20rpx;
|
}
|
|
.search-btn {
|
color: #007AFF;
|
font-size: 14px;
|
}
|
|
.filter {
|
display: flex;
|
align-items: center;
|
gap: 4rpx;
|
font-size: 14px;
|
color: #333;
|
}
|
|
.search {
|
flex: 1;
|
height: 72rpx;
|
background: #f5f5f5;
|
border-radius: 36rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 30rpx;
|
gap: 10rpx;
|
}
|
|
.search input {
|
flex: 1;
|
height: 100%;
|
font-size: 14px;
|
}
|
|
.placeholder {
|
color: #999;
|
font-size: 14px;
|
}
|
|
.content {
|
flex: 1;
|
overflow: auto;
|
}
|
|
.list {
|
padding: 20rpx 30rpx;
|
}
|
|
.card {
|
margin-bottom: 20rpx;
|
background: #fff;
|
border-radius: 12rpx;
|
overflow: hidden;
|
display: flex;
|
}
|
|
.card-img {
|
width: 200rpx;
|
height: 200rpx;
|
flex-shrink: 0;
|
}
|
|
.card-content {
|
flex: 1;
|
padding: 20rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.card-header {
|
flex: 1;
|
}
|
|
.name {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
.hospital {
|
font-size: 14px;
|
color: #666;
|
margin-bottom: 12rpx;
|
}
|
|
.tag-row {
|
display: flex;
|
align-items: center;
|
gap: 12rpx;
|
}
|
|
.tag {
|
display: flex;
|
align-items: center;
|
gap: 4rpx;
|
padding: 4rpx 12rpx;
|
/* background: #F8D7BE;
|
border-radius: 4rpx; */
|
width: 142rpx;
|
height: 40rpx;
|
background: linear-gradient( 180deg, #FDE0C8 0%, #F7D5BB 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
}
|
.tag .img{
|
width: 24rpx;
|
height: 22.42rpx;
|
/* background: linear-gradient( 137deg, #E9C7A7 0%, #CC915D 100%, #CB8E59 100%); */
|
}
|
|
.tag text {
|
width: 82rpx;
|
height: 26rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #71503B;
|
line-height: 26rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
padding-left: 10rpx;
|
}
|
|
.book-time {
|
font-size: 12px;
|
color: #3a7fff;
|
}
|
|
.card-footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.price {
|
display: flex;
|
align-items: baseline;
|
}
|
|
.currency {
|
font-size: 12px;
|
color: #F59C28;
|
}
|
|
.amount {
|
font-size: 20px;
|
font-weight: 500;
|
color: #F59C28;
|
}
|
|
.book-count {
|
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #65686A;
|
line-height: 42rpx;
|
|
}
|
|
.bg-image {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 0;
|
}
|
|
.header {
|
position: relative;
|
z-index: 1;
|
}
|
|
.content {
|
position: relative;
|
z-index: 1;
|
}
|
|
|
.selectPopup {
|
width: 100%;
|
max-height: 440upx;
|
padding: 29upx 27upx 39upx;
|
background-color: #fff;
|
border-radius: 5upx 5upx 15upx 20upx;
|
margin-top: 80upx;
|
}
|
|
.select_popup_list {
|
width: 100%;
|
height: 282upx;
|
overflow-y: auto;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.select_popup_item {
|
/* cursor: pointer; */
|
width: 28%;
|
height: 80upx;
|
margin: 10upx 15upx;
|
display: flex;
|
align-items: center;
|
background-color: #F8F8F8;
|
justify-content: center;
|
/* border: 2upx solid #ccc; */
|
text-align: center;
|
}
|
|
|
.select_btn {
|
border: 1upx solid #F5A133;
|
border-radius: 15upx;
|
margin: 40rpx 0 40rpx 25rpx;
|
display: flex;
|
overflow: hidden;
|
cursor: pointer;
|
cursor: pointer;
|
display: inline-block;
|
width: 286upx;
|
height: 100%;
|
font-size: 30upx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #F5A133;
|
line-height: 60upx;
|
text-align: center;
|
}
|
</style>
|
