预售商品获取数据

src/pages/assistingAgriculture/index/building.vue

@@ -86,10 +86,15 @@
         src="/static/assistingAgriculture/assets/fruit4.png"
         style="width: 670rpx; height: 236rpx"
       />
-      <view>
-        <view class="sort-img" v-for="(item, index) in testData" :key="index">
+      <view class="whh" style="display: flex">
+        <view
+          class="sort-img"
+          v-for="(item, index) in testData"
+          :key="index"
+          style="margin-left: 20rpx"
+        >
           <img @tap="toDetail" :src="item.imgUrl" style="width: 330rpx; height: 330rpx" />
-          <view class="detail-title">{{ item.content }}</view>
+          <view class="detail-title">{{ whh }}</view>
           <view class="price-page">
             <text class="price">￥{{ item.price }}</text>
           </view>
@@ -137,6 +142,7 @@ const swiperList = ref([
 ]);
 // 分类列表数据
 const detailList = ref([]);
+const whh = ref({});
 const params = {
   current: 1,
   size: 10,
@@ -174,8 +180,9 @@ const choice = (index, item) => {
   testData.value = detailList.value[index].prodList;
   testData.value.forEach((item) => {
     item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
+    whh.value = getSlashValue(item.content);
+    console.log(whh.value, 333);
   });
-  console.log(testData.value, 323);
   light.value = index;
 };
 // 跳转预售
@@ -184,7 +191,11 @@ const toPresale = () => {
     url: `/pages/assistingAgriculture/index/presale?categoryId=3273`,
   });
 };
-
+// 处理content
+function getSlashValue(url) {
+  const a = url.substr(url.indexOf('>', url.indexOf('>') - 1) + 1);
+  return a.substr(0, a.indexOf('<'));
+}
 function handleClick(e) {
   console.log(e);
 }
@@ -348,7 +359,6 @@ page {
   line-height: 28rpx;
   letter-spacing: 0em;
   margin-left: 48rpx;
-  margin-top: -20rpx;
   color: #3d3d3d;
   width: 190rpx;
   white-space: nowrap;
@@ -377,7 +387,7 @@ page {
   text-align: center;
   line-height: 24rpx;
   margin-left: 240rpx;
-  margin-top: -15px;
+  margin-top: -36rpx;
   display: block;
 }
 .cart-floating {

src/pages/assistingAgriculture/index/presale.vue

@@ -22,7 +22,12 @@
     </view>
     <view class="sort">
       <view style="display: flex; flex-direction: row">
-        <view class="borderClass" @tap="toTab(item)" v-for="(item, index) in sortList" :key="index">
+        <view
+          class="borderClass"
+          @tap="chooseTab(item.categoryId)"
+          v-for="(item, index) in sortList"
+          :key="index"
+        >
           <img :src="item.imgUrl" style="width: 48rpx; height: 48rpx" />
           <view class="sort-text">{{ item.categoryName }}</view>
         </view>
@@ -42,7 +47,7 @@
           </text>
         </scroll-view>
       </view>
-      <view class="tab-list" v-for="(item, index) in buyList" :key="index" @tap="toDetail">
+      <view class="tab-list" v-for="(item, index) in sortDataList" :key="index" @tap="toDetail">
         <img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" />
         <view>
           <text class="retail-price">零售价：￥{{ item.oriPrice }}/盒</text>
@@ -66,9 +71,9 @@
     </view>
     <view class="waterfall">
       <view class="wt-left wt-list">
-        <view class="wt-item" v-for="(good, index) in LeftList" :key="index" @tap="toDetail">
+        <view class="wt-item" v-for="(good, index) in buyList" :key="index" @tap="toDetail">
           <view class="item-img">
-            <image :src="good.image" mode="widthFix"></image>
+            <image :src="good.img" mode="widthFix"></image>
             <image
               class="presale-img"
               src="/static/assistingAgriculture/presale/presale.png"
@@ -90,35 +95,7 @@
           </view>
           <!-- 介绍部分 -->
           <view class="introduce-section">
-            <text class="title">{{ good.name }}</text>
-            <view class="tags-box">
-              <text class="good-detail">{{ good.detail }}</text>
-              <text class="introduction">{{ good.introduction }}</text>
-              <text class="good-price">￥{{ good.price }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-
-      <view class="vt-right wt-list">
-        <view class="wt-item" v-for="(good, index) in RightList" :key="index" @tap="toDetail">
-          <view class="item-img">
-            <image :src="good.image" mode="widthFix"></image>
-            <image
-              class="presale-img"
-              src="/static/assistingAgriculture/presale/presale.png"
-              style="width: 132rpx; height: 64rpx; z-index: 10; top: -70rpx"
-            />
-            <image
-              class="preview-img"
-              src="/static/assistingAgriculture/presale/preview.png"
-              style="width: 264rpx; height: 40rpx; z-index: 9; top: -66rpx"
-            />
-            <text class="pre-text">预计9月15日发货</text>
-          </view>
-          <!-- 介绍部分 -->
-          <view class="introduce-section">
-            <text class="title">{{ good.name }}</text>
+            <text class="title">{{ good.prodName }}</text>
             <view class="tags-box">
               <text class="good-detail">{{ good.detail }}</text>
               <text class="introduction">{{ good.introduction }}</text>
@@ -160,6 +137,7 @@ const light = ref(0);
 const sortList = ref([]);
 const tabsData = ref([]);
 const buyList = ref([]);
+const sortDataList = ref([]);
 const shopList = ref([
   { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
   { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
@@ -226,8 +204,8 @@ onMounted(async () => {
   getPresale();
   getPresaleProd();
   presaleSortList();
-  getStrictSelectionList();
-  // toTab(item.categoryId);
+  chooseTab('3287');
+  choice(0, '3292');
 });
 // 预售板块轮播图
 const getPresale = () => {
@@ -256,15 +234,15 @@ const presaleSortList = () => {
     sortList.value = res.data;
   });
 };
-// 筑农预售子分类
-const getStrictSelectionList = () => {
-  getStrictSelection({ parentId: '3287' }).then((res) => {
-    res.data.forEach((item) => {
+const chooseTab = (index) => {
+  getStrictSelection({ parentId: index }).then((res) => {
+    res.data.forEach((item, index) => {
       item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
     });
     tabsData.value = res.data;
   });
 };
+
 // 筑农首页-分类查询商品列表
 const getPresaleProd = () => {
   getPresaleProdList(params).then((res) => {
@@ -274,6 +252,11 @@ const getPresaleProd = () => {
     buyList.value = res.data.records;
   });
 };
+// 二级分类点击事件
+const choice = (index, categoryId) => {
+  sortDataList.value = tabsData.value[index];
+  light.value = index;
+};
 // 左侧数据列表
 const LeftList = ref([]);
 // 右侧数据列表
@@ -298,9 +281,6 @@ function handleClick(e) {
 function onChange(e) {
   console.log(e);
 }
-const choice = (index) => {
-  light.value = index;
-};
 function toCart() {
   // TODO: 跳转到筑农严选
   xma.navigateTo({
@@ -451,23 +431,20 @@ page {
   display: flex;
   flex-direction: row;
   width: 710rpx;
-  justify-content: center;
-  overflow: hidden;
   margin-top: 10rpx;
-  margin-left: 30rpx;
 }
 
 .wt-list {
   width: 360rpx;
   display: flex;
-  flex-direction: column;
-  margin-right: 10rpx;
+  flex-direction: row;
 }
 
 .wt-item {
   border-radius: 8px 8px 8px 8px;
   margin-bottom: 15rpx;
   background-color: #ffffff;
+  margin-left: 10rpx;
 }
 
 .item-img image {
@@ -479,7 +456,7 @@ page {
   background: #ffffff;
   padding: 20rpx 30rpx;
   border-radius: 0 0 08px 8px;
-  margin-top: -20rpx;
+  margin-top: -80rpx;
   height: 110rpx;
 }
 
@@ -488,6 +465,7 @@ page {
   color: #303133;
   height: 50rpx;
   line-height: 50rpx;
+  margin-left: -20rpx;
 }
 
 .introduce-section .tags-box {
@@ -495,14 +473,15 @@ page {
   align-items: center;
   height: 30rpx;
   font-size: 24rpx;
+  margin-left: -20rpx;
   color: #909399;
 }
 .good-price {
   position: relative;
   margin-top: 70rpx;
-  margin-left: -200rpx;
   color: #fa5151;
   font-size: 28rpx;
+  margin-left: -20rpx;
 }
 .preview-img {
   margin-left: 100rpx;