乡村旅居列表接口联调

src/Components/assistingAgriculture/index/ScenicSpots.vue

@@ -3,12 +3,12 @@
     <view class="date">景点</view>
     <ul class="ul">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in placeList"
         :key="index"
         :class="{ active: selectedItem === index }"
         @tap="selectItem(index)"
       >
-        {{ item.name }}
+        {{ item.brief }}
       </li>
     </ul>
   </view>
@@ -17,7 +17,7 @@
 <script setup>
 import { defineProps, onMounted } from 'vue';
 import { getTour } from '@/api/assistingAgriculture/village';
-const items = ref([]);
+const placeList = ref([]);
 const emit = defineEmits(['sortParams']);
 const selectedItem = ref(null);
 const props = defineProps({
@@ -35,8 +35,8 @@ const selectItem = (index, item) => {
 };
 // 查询景点
 const getTourList = () => {
-  getTour().then((res) => {
-    console.log(res, 111);
+  getTour({ prodId: 0 }).then((res) => {
+    placeList.value = res.data;
   });
 };
 </script>
@@ -44,7 +44,6 @@ const getTourList = () => {
 <style lang="scss" scoped>
 .sort {
   width: 710rpx;
-  height: 192rpx;
   position: absolute;
   top: 100%;
   // width: 100%;
@@ -78,7 +77,6 @@ const getTourList = () => {
     flex-flow: wrap;
     li {
       width: 154rpx;
-      height: 20rpx;
       border-radius: 8rpx;
       flex-direction: column;
       justify-content: center;
@@ -87,10 +85,10 @@ const getTourList = () => {
       margin-left: 20rpx;
       background: #f3f3f3;
       font-size: 24rpx;
-      line-height: 20rpx;
       text-align: center;
       list-style-type: none;
       margin-top: 20rpx;
+      display: flex;
     }
     .active {
       color: #fa5151;

src/Components/assistingAgriculture/index/Sort.vue

@@ -16,11 +16,11 @@
 <script setup>
 import { defineProps } from 'vue';
 const items = ref([
-  { name: '距离优先', sortName: 'distance' },
-  { name: '好评优先', sortName: 'grade' },
-  { name: '销量优先', sortName: 'monthSoldNum' },
-  { name: '低价优先', sortName: 'lowPrice' },
-  { name: '高价优先', sortName: 'highPrice' },
+  { name: '距离优先', sortModel: 1 },
+  { name: '好评优先', sortModel: 2 },
+  { name: '销量优先', sortModel: 3 },
+  { name: '低价优先', sortModel: 4 },
+  { name: '高价优先', sortModel: 5 },
 ]);
 const emit = defineEmits(['sortParams']);
 const selectedItem = ref(null);

src/pages/assistingAgriculture/RuralTravel/RuralTravel.vue

@@ -110,7 +110,7 @@
               ></wd-icon>
             </view>
           </view>
-          <Sort v-show="rotate" />
+          <Sort v-show="rotate" @sortParams="sortParams" />
           <DepartureDate v-show="rotate2" />
           <ScenicSpots v-show="rotate3" />
           <Screen v-show="rotate4" />
@@ -124,8 +124,8 @@
           >
             <img class="card-img" :src="item.img" style="width: 248rpx; height: 240rpx" />
             <view class="detail-text">
-              <text class="detail-title">{{ item.title }}</text>
-              <text class="give">{{ item.give }}</text>
+              <text class="detail-title">{{ item.prodName }}</text>
+              <text class="give">{{ item.prodName }}</text>
               <view class="tag">
                 <wd-tag
                   bg-color="#EEEEEE"
@@ -137,11 +137,11 @@
                 </wd-tag>
               </view>
               <view class="detail-score">
-                <text class="score">{{ item.score }}分</text>
-                <text class="num">月销{{ item.num }}</text>
+                <text class="score">{{ item.deliveryAmount }}分</text>
+                <text class="num">月销{{ item.deliveryAmount }}</text>
               </view>
               <view class="venue">
-                <text class="place">{{ item.place }}</text>
+                <text class="place">{{ item.prodName }}</text>
                 <text class="price">￥{{ item.price }}</text>
               </view>
             </view>
@@ -169,49 +169,13 @@ const rotate = ref(false);
 const rotate2 = ref(false);
 const rotate3 = ref(false);
 const rotate4 = ref(false);
-const cardList = ref([
-  {
-    img: '/static/assistingAgriculture/rural/img2.png',
-    title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
-    give: '赠价值59元特产伴手礼一份',
-    tag: ['可定明日', '无购物', '含保险'],
-    score: '4.9',
-    num: '2000',
-    place: '云岩出发',
-    price: '299.00',
-  },
-  {
-    img: '/static/assistingAgriculture/rural/img2.png',
-    title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
-    give: '赠价值59元特产伴手礼一份',
-    tag: ['可定明日', '无购物', '含保险'],
-    score: '4.9',
-    num: '2000',
-    place: '云岩出发',
-    price: '299.00',
-  },
-  {
-    img: '/static/assistingAgriculture/rural/img2.png',
-    title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
-    give: '赠价值59元特产伴手礼一份',
-    tag: ['可定明日', '无购物', '含保险'],
-    score: '4.9',
-    num: '2000',
-    place: '云岩出发',
-    price: '299.00',
-  },
-  {
-    img: '/static/assistingAgriculture/rural/img2.png',
-    title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
-    give: '赠价值59元特产伴手礼一份',
-    tag: ['可定明日', '无购物', '含保险'],
-    score: '4.9',
-    num: '2000',
-    place: '云岩出发',
-    price: '299.00',
-  },
-]);
+const cardList = ref([]);
 const popularRouterData = ref([]);
+const params = ref({
+  current: 1,
+  size: 10,
+});
+const sortType = ref(null);
 const locationFiltering = (index) => {
   switch (index) {
     case 0:
@@ -249,9 +213,13 @@ const getPopular = () => {
     popularRouterData.value = res.data.records;
   });
 };
-// 查询商品列表
+// 查询列表
 const getProd = () => {
   getProdList({ current: 1, size: 10 }).then((res) => {
+    res.data.records.forEach((item) => {
+      item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
+    });
+    cardList.value = res.data.records;
     console.log(res, 222);
   });
 };
@@ -330,6 +298,7 @@ page {
   background: #ffffff;
   margin-top: 20rpx;
   margin-left: 20rpx;
+  padding-bottom: 30rpx;
 }
 .scroll-x {
   width: 100%;
@@ -500,4 +469,7 @@ page {
   width: 56rpx;
   height: 56rpx;
 }
+.detail-score {
+  margin-top: 90rpx;
+}
 </style>