1

wwl

5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57

 pagesA/appointment/appointment.vue

@@ -1,448 +1,395 @@
<template>
   <view class="page">
      <image class="bg-image" src="/static/images/tabbar/loginbg.png" mode="aspectFill"></image>
      <view class="header">
  <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" v-model="searchQuery" placeholder="搜索体检套餐" placeholder-class="placeholder" />
          <text class="search-btn" @click="getListsearch">搜索</text>
        </view>
      </view>
    </view>

         <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" :key="index">
            <text :style="{ 'color': choosedList.indexOf(item) != -1 ? '#F6A235' : '#333333' }">{{ item.name }}</text>
          </view>
        </view>
        <view>
          <text class="select_btn" @click="resetChoosedList">重置</text>
          <text class="select_btn" @click="submit">确定</text>
        </view>
      </view>
    </uni-popup>

      <!-- 顶部弹窗 -->
      <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>
    <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 || 0 }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
   import {
      getPackageList,
      getList,
   } from "@/api/system/package";
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
            })
         }
      }
   }
export default {
  data() {
    return {
      dataList: [],
      packagelist: [],
      choosedList: [],
      categoryId: "",
      searchQuery: "", // 存储输入框的值
    };
  },
  onLoad() {
    this.getList();
    this.getliebiao();
  },
  methods: {
    getliebiao() {
      getList().then(res => {
        this.dataList = res.data;
      });
    },
    /** 查询列表 */
    getList() {
      uni.showLoading({
        title: '请稍等！'
      });
      const params = {
        categoryId: this.categoryId,
        pacName: this.searchQuery // 包含输入框的搜索值
      };
      getPackageList(params).then(response => {
        uni.hideLoading();
        if (response.code == 200) {
          this.packagelist = response.data;
        }
      });
    },
    getListsearch() {
      // 搜索按钮触发筛选
      this.getList();
    },
    getListscreen() {
      this.toggle();
    },
    toggle() {
      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 = [item]; // 限制只能选择一项
        }
      }
    },
    resetChoosedList() {
      this.choosedList = [];
      this.categoryId = "";
      this.searchQuery = ""; // 重置输入框值
      this.getList();
      this.$refs.selectPopup.close();
    },
    submit() {
      if (this.choosedList.length === 1) {
        this.categoryId = this.choosedList[0].id;
        const data = {
          categoryId: this.categoryId,
          pacName: this.searchQuery // 包含输入框的搜索值
        };
        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;
   }
<style scoped>
page {
  height: 100%;
}

   .header {
      background: #fff;
      padding: 0 30rpx;
      flex-shrink: 0;
   }
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  position: relative;
}

   .search-bar {
      display: flex;
      align-items: center;
      padding: 20rpx 0 30rpx;
      gap: 20rpx;
   }
.header {
  background: #fff;
  padding: 0 30rpx;
  flex-shrink: 0;
}

   .search-btn {
      color: #007AFF;
      font-size: 14px;
   }
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 0 30rpx;
  gap: 20rpx;
}

   .filter {
      display: flex;
      align-items: center;
      gap: 4rpx;
      font-size: 14px;
      color: #333;
   }
.search-btn {
  color: #007AFF;
  font-size: 14px;
}

   .search {
      flex: 1;
      height: 72rpx;
      background: #f5f5f5;
      border-radius: 36rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      gap: 10rpx;
   }
.filter {
  display: flex;
  align-items: center;
  gap: 4rpx;
  font-size: 14px;
  color: #333;
}

   .search input {
      flex: 1;
      height: 100%;
      font-size: 14px;
   }
.search {
  flex: 1;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  gap: 10rpx;
}

   .placeholder {
      color: #999;
      font-size: 14px;
   }
.search input {
  flex: 1;
  height: 100%;
  font-size: 14px;
}

   .content {
      flex: 1;
      overflow: auto;
   }
.placeholder {
  color: #999;
  font-size: 14px;
}

   .list {
      padding: 20rpx 30rpx;
   }
.content {
  flex: 1;
  overflow: auto;
}

   .card {
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      display: flex;
   }
.list {
  padding: 20rpx 30rpx;
}

   .card-img {
      width: 200rpx;
      height: 200rpx;
      flex-shrink: 0;
   }
.card {
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  display: flex;
}

   .card-content {
      flex: 1;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }
.card-img {
  width: 200rpx;
  height: 200rpx;
  flex-shrink: 0;
}

   .card-header {
      flex: 1;
   }
.card-content {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

   .name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 8rpx;
   }
.card-header {
  flex: 1;
}

   .hospital {
      font-size: 14px;
      color: #666;
      margin-bottom: 12rpx;
   }
.name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

   .tag-row {
      display: flex;
      align-items: center;
      gap: 12rpx;
   }
.hospital {
  font-size: 14px;
  color: #666;
  margin-bottom: 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-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

   .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;
   }
.tag {
  display: flex;
  align-items: center;
  gap: 4rpx;
  padding: 4rpx 12rpx;
  width: 142rpx;
  height: 40rpx;
  background: linear-gradient(180deg, #FDE0C8 0%, #F7D5BB 100%);
  border-radius: 8rpx;
}

   .book-time {
      font-size: 12px;
      color: #3a7fff;
   }
.tag .img {
  width: 24rpx;
  height: 22.42rpx;
}

   .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
.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;
}

   .price {
      display: flex;
      align-items: baseline;
   }
.book-time {
  font-size: 12px;
  color: #3a7fff;
}

   .currency {
      font-size: 12px;
      color: #F59C28;
   }
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

   .amount {
      font-size: 20px;
      font-weight: 500;
      color: #F59C28;
   }
.price {
  display: flex;
  align-items: baseline;
}

   .book-count {
		
      font-family: D-DIN-PRO, D-DIN-PRO;
      font-weight: 400;
      font-size: 26rpx;
      color: #65686A;
      line-height: 42rpx;
	
   }
.currency {
  font-size: 12px;
  color: #F59C28;
}

   .bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
   }
.amount {
  font-size: 20px;
  font-weight: 500;
  color: #F59C28;
}

   .header {
      position: relative;
      z-index: 1;
   }
.book-count {
  font-family: D-DIN-PRO, D-DIN-PRO;
  font-weight: 400;
  font-size: 26rpx;
  color: #65686A;
  line-height: 42rpx;
}

   .content {
      position: relative;
      z-index: 1;
   }
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.header {
  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;
   }
.content {
  position: relative;
  z-index: 1;
}

   .select_popup_list {
      width: 100%;
      height: 282upx;
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
   }
.selectPopup {
  width: 100%;
  max-height: 440upx;
  padding: 29upx 27upx 39upx;
  background-color: #fff;
  border-radius: 5upx 5upx 15upx 20upx;
  margin-top: 80upx;
}

   .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_popup_list {
  width: 100%;
  height: 282upx;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}

.select_popup_item {
  width: 28%;
  height: 80upx;
  margin: 10upx 15upx;
  display: flex;
  align-items: center;
  background-color: #F8F8F8;
  justify-content: center;
  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;
   }
.select_btn {
  border: 1upx solid #F5A133;
  border-radius: 15upx;
  margin: 40rpx 0 40rpx 25rpx;
  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>