筑农接口添加

src/Components/assistingAgriculture/index/DepartureDate.vue

 <template>
   <view class="sort" :style="{ width: width }">
+    <view class="date">出发日期</view>
     <ul class="ul">
       <li
         v-for="(item, index) in items"
@@ -30,6 +31,8 @@ const selectItem = (selectItem) => {
 
 <style lang="scss" scoped>
 .sort {
+  width: 710rpx;
+  height: 192rpx;
   position: absolute;
   top: 100%;
   // width: 100%;
@@ -39,19 +42,47 @@ const selectItem = (selectItem) => {
   box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
   margin: 0 auto;
   z-index: 99;
-  display: flex;
+  // display: flex;
   padding-bottom: 20rpx;
   box-sizing: border-box;
+  overflow: auto;
+  .date {
+    width: 96rpx;
+    height: 28rpx;
+    font-family: Source Han Sans;
+    font-size: 24rpx;
+    font-weight: normal;
+    line-height: 28rpx;
+    letter-spacing: 0em;
+    font-variation-settings: 'opsz' auto;
+    font-feature-settings: 'kern' on;
+    color: #fa5151;
+    margin-left: 44rpx;
+    margin-top: 20rpx;
+  }
   .ul {
-    padding-left: 60rpx;
+    padding-left: 20rpx;
+    display: flex;
+    flex-flow: wrap;
     li {
+      width: 154rpx;
+      height: 20rpx;
+      border-radius: 8rpx;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 6rpx 26rpx;
+      margin-left: 20rpx;
+      background: #f3f3f3;
+      font-size: 24rpx;
+      line-height: 20rpx;
+      text-align: center;
       list-style-type: none;
-      font-size: 22rpx;
-      color: #3d3d3d;
       margin-top: 20rpx;
     }
     .active {
       color: #fa5151;
+      background: #feeeee;
     }
   }
 }

src/Components/assistingAgriculture/index/ScenicSpots.vue

 <template>
   <view class="sort" :style="{ width: width }">
+    <view class="date">景点</view>
     <ul class="ul">
       <li
         v-for="(item, index) in items"
@@ -15,7 +16,19 @@
 
 <script setup>
 import { defineProps } from 'vue';
-const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
+const items = reactive([
+  '智能排序',
+  '距离优先',
+  '好评优先',
+  '销量优先',
+  '低价优先',
+  '低价优先',
+  '距离优先',
+  '好评优先',
+  '销量优先',
+  '低价优先',
+  '距离优先',
+]);
 const selectedItem = ref(null);
 const props = defineProps({
   width: {
@@ -30,6 +43,8 @@ const selectItem = (selectItem) => {
 
 <style lang="scss" scoped>
 .sort {
+  width: 710rpx;
+  height: 192rpx;
   position: absolute;
   top: 100%;
   // width: 100%;
@@ -39,19 +54,47 @@ const selectItem = (selectItem) => {
   box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
   margin: 0 auto;
   z-index: 99;
-  display: flex;
+  // display: flex;
   padding-bottom: 20rpx;
   box-sizing: border-box;
+  overflow: auto;
+  .date {
+    width: 96rpx;
+    height: 28rpx;
+    font-family: Source Han Sans;
+    font-size: 24rpx;
+    font-weight: normal;
+    line-height: 28rpx;
+    letter-spacing: 0em;
+    font-variation-settings: 'opsz' auto;
+    font-feature-settings: 'kern' on;
+    color: #fa5151;
+    margin-left: 44rpx;
+    margin-top: 20rpx;
+  }
   .ul {
-    padding-left: 60rpx;
+    padding-left: 20rpx;
+    display: flex;
+    flex-flow: wrap;
     li {
+      width: 154rpx;
+      height: 20rpx;
+      border-radius: 8rpx;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 6rpx 26rpx;
+      margin-left: 20rpx;
+      background: #f3f3f3;
+      font-size: 24rpx;
+      line-height: 20rpx;
+      text-align: center;
       list-style-type: none;
-      font-size: 22rpx;
-      color: #3d3d3d;
       margin-top: 20rpx;
     }
     .active {
       color: #fa5151;
+      background: #feeeee;
     }
   }
 }

src/Components/assistingAgriculture/index/Screen.vue

 <template>
   <view class="sort" :style="{ width: width }">
+    <view class="date">筛选</view>
     <ul class="ul">
       <li
         v-for="(item, index) in items"
@@ -15,7 +16,19 @@
 
 <script setup>
 import { defineProps } from 'vue';
-const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
+const items = reactive([
+  '智能排序',
+  '距离优先',
+  '好评优先',
+  '销量优先',
+  '低价优先',
+  '低价优先',
+  '距离优先',
+  '好评优先',
+  '销量优先',
+  '低价优先',
+  '距离优先',
+]);
 const selectedItem = ref(null);
 const props = defineProps({
   width: {
@@ -30,6 +43,8 @@ const selectItem = (selectItem) => {
 
 <style lang="scss" scoped>
 .sort {
+  width: 710rpx;
+  height: 192rpx;
   position: absolute;
   top: 100%;
   // width: 100%;
@@ -39,19 +54,47 @@ const selectItem = (selectItem) => {
   box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
   margin: 0 auto;
   z-index: 99;
-  display: flex;
+  // display: flex;
   padding-bottom: 20rpx;
   box-sizing: border-box;
+  overflow: auto;
+  .date {
+    width: 96rpx;
+    height: 28rpx;
+    font-family: Source Han Sans;
+    font-size: 24rpx;
+    font-weight: normal;
+    line-height: 28rpx;
+    letter-spacing: 0em;
+    font-variation-settings: 'opsz' auto;
+    font-feature-settings: 'kern' on;
+    color: #fa5151;
+    margin-left: 44rpx;
+    margin-top: 20rpx;
+  }
   .ul {
-    padding-left: 60rpx;
+    padding-left: 20rpx;
+    display: flex;
+    flex-flow: wrap;
     li {
+      width: 154rpx;
+      height: 20rpx;
+      border-radius: 8rpx;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 6rpx 26rpx;
+      margin-left: 20rpx;
+      background: #f3f3f3;
+      font-size: 24rpx;
+      line-height: 20rpx;
+      text-align: center;
       list-style-type: none;
-      font-size: 22rpx;
-      color: #3d3d3d;
       margin-top: 20rpx;
     }
     .active {
       color: #fa5151;
+      background: #FEEEEE;
     }
   }
 }

src/api/assistingAgriculture/building.js

+import { request } from '../../utils/request';
+
+// 获取指定类型轮播图
+export function getSortList(data) {
+  return request({
+    url: `/sgyrdd/category/znList`,
+    method: 'GET',
+    data,
+  });
+}
+
+// 筑农严选首页-分类预售商品列表
+export function getPresaleCategory(data) {
+  return request({
+    url: `/sgyrdd/znprod/getPresaleCategoryProd`,
+    method: 'GET',
+    data,
+  });
+}
+
+// 预售板块轮播图
+export function getPresaleList(data) {
+  return request({
+    url: `/sgyrdd/carousel/presaleList`,
+    method: 'GET',
+    data,
+  });
+}
+
+// 筑农严选分类
+export function getStrictSelection(data) {
+  return request({
+    url: `/sgyrdd/category/getZnyx`,
+    method: 'GET',
+    data,
+  });
+}
+
+// 筑农预售分类
+export function getBuindingSort(data) {
+  return request({
+    url: `/sgyrdd/category/presaleList`,
+    method: 'GET',
+    data,
+  });
+}

src/pages/assistingAgriculture/index/index.vue

@@ -26,46 +26,16 @@
       </view>
       <view class="sort">
         <view style="display: flex; flex-direction: row">
-          <view class="borderClass" @tap="toBuilding">
-            <img
-              src="/static/assistingAgriculture/assets/buildingAgriculture.png"
-              style="width: 96rpx; height: 96rpx"
-            />
-            <view class="sort-text">筑农严选</view>
-          </view>
-          <view class="borderClass">
-            <img
-              src="/static/assistingAgriculture/assets/adoption.png"
-              style="width: 96rpx; height: 96rpx"
-            />
-            <view class="sort-text">认养农业</view>
-          </view>
-          <view class="borderClass" @tap="toRuralTravel">
-            <img
-              src="/static/assistingAgriculture/assets/rural.png"
-              style="width: 96rpx; height: 96rpx"
-            />
-            <view class="sort-text">乡村旅居</view>
-          </view>
-          <view class="borderClass">
-            <img
-              src="/static/assistingAgriculture/assets/buildingAgriculture.png"
-              style="width: 96rpx; height: 96rpx"
-            />
-            <view class="sort-text">特色农庄</view>
+          <view
+            class="borderClass"
+            @tap="toBuilding"
+            v-for="(item, index) in sortList"
+            :key="index"
+          >
+            <img :src="item.icon" style="width: 96rpx; height: 96rpx" />
+            <view class="sort-text">{{ item.categoryName }}</view>
           </view>
         </view>
-        <!--        <view style="display: flex; flex-direction: row">-->
-        <!--          <view-->
-        <!--            class="borderClass"-->
-        <!--            @tap="toBuilding"-->
-        <!--            v-for="(item, index) in sortList"-->
-        <!--            :key="index"-->
-        <!--          >-->
-        <!--            <img :src="item.img" style="width: 96rpx; height: 96rpx" />-->
-        <!--            <view class="sort-text">{{ item.text }}</view>-->
-        <!--          </view>-->
-        <!--        </view>-->
       </view>
       <view class="product-page">
         <view>
@@ -181,10 +151,15 @@
 
 <script setup lang="ts">
 import Search from '../../../components/assistingAgriculture/index/Search.vue';
-
+import {
+  getPresaleCategory,
+  getSortList,
+  getStrictSelection,
+} from '../../../api/assistingAgriculture/building';
+import { onMounted } from 'vue';
 const list = ref([
-  // { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '特色美食' },
-  // { img: '/static/assistingAgriculture/assets/presale.png', text: '农货预售' },
+  // // { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '特色美食' },
+  // // { img: '/static/assistingAgriculture/assets/presale.png', text: '农货预售' },
   { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '乡村非遗' },
   { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '认养农业' },
   { img: '/static/assistingAgriculture/assets/mainPicture.png', text: '乡村旅居' },
@@ -207,20 +182,36 @@ const detailList = ref([
     text: '麻辣鱼豆腐',
   },
 ]);
-const sortList = ref([
-  {
-    img: '/static/assistingAgriculture/assets/buildingAgriculture.png',
-    price: '25',
-    text: '筑农严选',
-  },
-  { img: '/static/assistingAgriculture/assets/adoption.png', price: '25', text: '认养农业' },
-  { img: '/static/assistingAgriculture/assets/rural.png', price: '25', text: '乡村旅居' },
-  {
-    img: '/static/assistingAgriculture/assets/buildingAgriculture.png',
-    price: '25',
-    text: '特色农庄',
-  },
-]);
+const sortList = ref([]);
+onMounted(async () => {
+  getList();
+  getPresaleCategoryList();
+  getStrictSelectionList();
+});
+// 获取筑农专区分类;
+const getList = () => {
+  getSortList().then((res) => {
+    console.log(res, 111);
+    res.data.forEach((item) => {
+      item.icon = import.meta.env.VITE_APP_IMG_URL + item.icon;
+      item.pic = import.meta.env.VITE_APP_IMG_URL + item.pic;
+    });
+    sortList.value = res.data;
+    console.log(list.value, 111);
+  });
+};
+// 筑农严选首页-分类预售商品列表
+const getPresaleCategoryList = () => {
+  getPresaleCategory().then((res) => {
+    console.log(res, 222);
+  });
+};
+// 筑农严选分类
+const getStrictSelectionList = () => {
+  getStrictSelection().then((res) => {
+    console.log(res, 333);
+  });
+};
 function toBuilding() {
   // TODO: 跳转到筑农严选
   xma.navigateTo({

src/pages/assistingAgriculture/index/presale.vue

@@ -152,7 +152,12 @@
 
 <script setup>
 import Search from '../../../components/assistingAgriculture/index/Search.vue';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import {
+  getBuindingSort,
+  getPresaleList,
+  getStrictSelection,
+} from '../../../api/assistingAgriculture/building';
 const current = ref(0);
 const light = ref(0);
 const sortList = ref([
@@ -238,6 +243,22 @@ const goodList = ref([
     price: 69.9,
   },
 ]);
+onMounted(async () => {
+  getPresale();
+  getBuindingSortList();
+});
+// 预售板块轮播图
+const getPresale = () => {
+  getPresaleList({ place: 3 }).then((res) => {
+    console.log(res, 111);
+  });
+};
+// 筑农预售分类
+const getBuindingSortList = () => {
+  getBuindingSort({ level: 3 }).then((res) => {
+    console.log(res, 222);
+  });
+};
 // 左侧数据列表
 const LeftList = ref([]);
 // 右侧数据列表