路泰科技体检小程序UI设计新版本
1
wwl
5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57
pagesA/appointment/appointment.vue
@@ -2,7 +2,6 @@
   <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>
@@ -10,7 +9,7 @@
            </view>
            <view class="search">
               <uni-icons type="search" size="16" color="#999"></uni-icons>
               <input type="text" placeholder="搜索体检套餐" placeholder-class="placeholder" />
          <input type="text" v-model="searchQuery" placeholder="搜索体检套餐" placeholder-class="placeholder" />
               <text class="search-btn" @click="getListsearch">搜索</text>
            </view>
         </view>
@@ -20,21 +19,10 @@
      <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 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 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>
@@ -71,36 +59,20 @@
      </scroll-view>
   </view>
</template>
<script>
   import {
      getPackageList,
      getList,
   } from "@/api/system/package";
import { getPackageList, getList } from "@/api/system/package";
   export default {
      data() {
         return {
            dataList: {},
      dataList: [],
            packagelist: [],
            choosedList: [],
            // dataList: [{
            //       value: "男",
            //       text:"0"
            //    }, {
            //       value: "女",
            //       text:"1"
            //    },
            //    {
            //       value: "所有",
            //       text:"2"
            //    }
            // ],
            categoryId: "",
            // itemChoose: true,
            // itemNotChoose: false,
         }
      searchQuery: "", // 存储输入框的值
    };
      },
      //生命周期方法 —— 页面加载时
      onLoad() {
         this.getList();
         this.getliebiao();
@@ -109,92 +81,77 @@
         getliebiao() {
            getList().then(res => {
               this.dataList = res.data;
            })
      });
         },
         /** 查询列表 */
         getList() {
            uni.showLoading({
               title: '请稍等!'
            })
            getPackageList(this.queryParams).then((response) => {
      });
      const params = {
        categoryId: this.categoryId,
        pacName: this.searchQuery // 包含输入框的搜索值
      };
      getPackageList(params).then(response => {
        uni.hideLoading();
               if (response.code == 200) {
                  uni.hideLoading()
                  this.packagelist = response.data;
               }
            });
            // uni.navigateTo({
            //    url: '/pagesA/search/search'
            // })
         },
         getListsearch() {
            uni.navigateTo({
               url: '/pagesA/search/search'
            })
      // 搜索按钮触发筛选
      this.getList();
         },
         getListscreen() {
            this.toggle()
      this.toggle();
         },
         toggle() {
            // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
            this.$refs.selectPopup.open('top')
      this.$refs.selectPopup.open('top');
         },
         itemChoosed(item, index) {
            this.choosedItem = index
      this.choosedItem = index;
            if (this.choosedList.indexOf(item) !== -1) {
               this.choosedList.splice(this.choosedList.indexOf(item), 1)
        this.choosedList.splice(this.choosedList.indexOf(item), 1);
            } else {
               this.choosedList.push(item)
        this.choosedList.push(item);
               if (this.choosedList.length > 1) {
                  this.choosedList.forEach(item1 => {
                     if (item1 != item) {
                        this.choosedList.splice(item1, 1)
                     }
                  })
                  // this.$modal.msgError("只能选择一项!")
          this.choosedList = [item]; // 限制只能选择一项
               }
            }
         },
         //点击重置按钮
      resetChoosedList() {
         this.choosedList = []
         this.categoryId = "" // 如果你需要也把筛选条件清空
         this.getList() // 重新获取数据
         this.$refs.selectPopup.close()
      this.choosedList = [];
      this.categoryId = "";
      this.searchQuery = ""; // 重置输入框值
      this.getList();
      this.$refs.selectPopup.close();
      },
         //点击确定按钮
         submit() {
            if (this.choosedList.length == 1) {
               this.choosedList.forEach(item => {
                  this.categoryId = item.id
               })
               let data = {
                  categoryId: this.categoryId
               }
      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()
               })
          this.packagelist = res.data;
          this.$refs.selectPopup.close();
        });
            } else {
               this.$modal.msgError("只能选择一项!")
        this.$modal.msgError("只能选择一项!");
            }
         },
         //跳转
         package(pacId) {
            uni.navigateTo({
               url: '/pagesA/PackageDetails/PackageDetails?pacId=' + pacId
            })
      });
         }
      }
   }
};
</script>
<style>
<style scoped>
   page {
      height: 100%;
   }
@@ -314,17 +271,15 @@
      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;
  border-radius: 8rpx;
   }
   .tag .img{
      width: 24rpx;
      height: 22.42rpx;
      /* background: linear-gradient( 137deg, #E9C7A7 0%, #CC915D 100%, #CB8E59 100%); */
   }
   .tag text {
@@ -369,13 +324,11 @@
   }
   .book-count {
      font-family: D-DIN-PRO, D-DIN-PRO;
      font-weight: 400;
      font-size: 26rpx;
      color: #65686A;
      line-height: 42rpx;
   }
   .bg-image {
@@ -397,7 +350,6 @@
      z-index: 1;
   }
   .selectPopup {
      width: 100%;
      max-height: 440upx;
@@ -416,7 +368,6 @@
   }
   .select_popup_item {
      /* cursor: pointer; */
      width: 28%;
      height: 80upx;
      margin: 10upx 15upx;
@@ -424,19 +375,13 @@
      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%;