模拟农资交易部分数据

sub-operation-service/src/views/ecommerce/agriculturalDetail.vue

@@ -11,26 +11,40 @@
           <div class="top-info">
             <el-row :gutter="16">
               <el-col :span="12">
-                <banner name="landdetail" :imglist="bannerList" indicator-pos="none" arrow="always" height="340px" :is-view="true"> </banner>
+                <banner
+                  :key="currentIndex"
+                  name="landdetail"
+                  :imglist="mockData[currentIndex].images"
+                  indicator-pos="none"
+                  arrow="always"
+                  height="340px"
+                  :is-view="true"
+                >
+                </banner>
               </el-col>
               <el-col :span="12" class="top-info-txt">
-                <h1 class="title">耿马县勐简乡有机沙瓤西红柿</h1>
+                <h1 class="title">{{ mockData[currentIndex].titleName }}</h1>
                 <div class="price-sold">
-                  <span class="price">2000.0</span>
-                  <span class="sold">999</span>
+                  <span class="price">{{ mockData[currentIndex].price }}</span>
+                  <span class="sold">{{ mockData[currentIndex].sold }}</span>
                 </div>
                 <div class="tips-list">
                   <el-row :gutter="16">
-                    <el-col :span="24">发货地址：云南省昆明市呈贡区彩云南路100号地</el-col>
-                    <el-col :span="24">保&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;障：破损包赔 · 七天无理由退货</el-col>
+                    <el-col :span="24">发货地址：{{ mockData[currentIndex].soldAddress }}</el-col>
+                    <el-col :span="24">保&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;障：{{ mockData[currentIndex].right }}</el-col>
                   </el-row>
                 </div>
                 <div class="spu-sku-list">
                   <div class="spu-title">规格：</div>
                   <div class="spu-sku-warp">
-                    <div class="spu-sku-item act">1kg/份</div>
-                    <div class="spu-sku-item normal">2.5kg/份</div>
-                    <div class="spu-sku-item normal">5kg/份</div>
+                    <div
+                      v-for="(item, index) in mockData[currentIndex].weight"
+                      :key="currentIndex + '-' + index"
+                      class="spu-sku-item"
+                      :class="[index === 0 ? 'act' : 'normal']"
+                    >
+                      {{ item }}
+                    </div>
                   </div>
                   <div class="goods-num">
                     <div class="num-title">数量：</div>
@@ -63,87 +77,96 @@
 
               <div class="tab-content">
                 <div v-if="tabVal == 'detail'" class="content-detail">
-                  <el-descriptions class="detail-des" title=" " :column="2" size="Large" border>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">品牌</div>
-                      </template>
-                      <span>遇合堂</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">系列</div>
-                      </template>
-                      <span>农用百货</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">型号</div>
-                      </template>
-                      <span>禽畜药</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">产地</div>
-                      </template>
-                      <span>中国大陆</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">省份</div>
-                      </template>
-                      <span>云南省</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">城市</div>
-                      </template>
-                      <span>昆明市</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">储存条件</div>
-                      </template>
-                      <span>常温</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">包装方式</div>
-                      </template>
-                      <span>盒装</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">净含量</div>
-                      </template>
-                      <span>250ml、500ml、750ml、1000ml</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">使用方式</div>
-                      </template>
-                      <span>饲喂</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">厂名</div>
-                      </template>
-                      <span>遇合堂禽畜药品有限公司</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">厂址</div>
-                      </template>
-                      <span>云南省昆明市呈贡区彩云南路100号</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item>
-                      <template #label>
-                        <div class="cell-item">保质期</div>
-                      </template>
-                      <span>7天</span>
-                    </el-descriptions-item>
-                  </el-descriptions>
-                  <el-image :src="getAssetsFile('images/ecommerce/' + 'goods.png')?.href ?? ''" fit="cover" />
+                  <!--                  <el-descriptions class="detail-des" title=" " :column="2" size="Large" border>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">品牌</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>遇合堂</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">系列</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>农用百货</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">型号</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>禽畜药</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">产地</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>中国大陆</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">省份</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>云南省</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">城市</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>昆明市</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">储存条件</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>常温</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">包装方式</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>盒装</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">净含量</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>250ml、500ml、750ml、1000ml</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">使用方式</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>饲喂</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">厂名</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>遇合堂禽畜药品有限公司</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">厂址</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>云南省昆明市呈贡区彩云南路100号</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                    <el-descriptions-item>-->
+                  <!--                      <template #label>-->
+                  <!--                        <div class="cell-item">保质期</div>-->
+                  <!--                      </template>-->
+                  <!--                      <span>7天</span>-->
+                  <!--                    </el-descriptions-item>-->
+                  <!--                  </el-descriptions>-->
+                  <!--                  <el-image :src="getAssetsFile('images/ecommerce/' + 'goods.png')?.href ?? ''" fit="cover" />-->
+                  <div style="display: flex; justify-content: center; flex-wrap: wrap">
+                    <el-image
+                      v-for="(item, index) in mockData[currentIndex].bigImages"
+                      :key="currentIndex + '-' + index"
+                      :src="getAssetsFile('images/mockPic/' + item)?.href ?? ''"
+                      style="width: 80%"
+                      fit="contain"
+                    />
+                  </div>
                 </div>
                 <div v-if="tabVal == 'sourceCode'" class="content-source-code">
                   <div class="code-warp">
@@ -181,14 +204,16 @@
 <script setup name="ecommerce">
 import common from './components/common.vue';
 import banner from './components/banner.vue';
-import { ref, reactive, onMounted, watch, computed } from 'vue';
-import { isEmpty, getAssetsFile } from '@/utils';
+import { onMounted, reactive, ref } from 'vue';
+import { getAssetsFile } from '@/utils';
 import { qrImg } from '@/layouts/component/Header/base64img.js';
 import evaluate from './components/evaluate.vue';
 import { useRoute, useRouter } from 'vue-router';
+
 const route = useRoute();
 const router = useRouter();
 const goodId = route.params.id; // 获取参数
+const pId = route.query.pid;
 
 let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
 const tabList = reactive([
@@ -197,11 +222,121 @@ const tabList = reactive([
   { label: '评价', value: 'evaluate' },
 ]);
 
+const currentIndex = ref(0);
+
+const mockData = [
+  {
+    titleName: '甜糯玉米种子',
+    sold: 1200,
+    price: 25,
+    soldAddress: '河南信阳',
+    right: '七天保价',
+    weight: ['100g', '200g'],
+    images: ['images/mockPic/cornTop.png'],
+    bigImages: ['cornBottom1.png', 'cornBottom2.png', 'cornBottom3.png', 'cornBottom4.png'],
+  },
+  {
+    titleName: '张塘王豇豆种子种籽',
+    sold: 1200,
+    price: 4.35,
+    soldAddress: '山东潍坊',
+    right: '七天保价',
+    weight: ['100粒', '200粒'],
+    images: ['images/mockPic/beanTop.png'],
+    bigImages: ['beanBottom1.png', 'beanBottom2.png', 'beanBottom3.png', 'beanBottom4.png'],
+  },
+  {
+    titleName: '茄子种子种籽',
+    sold: 1200,
+    price: 3.92,
+    soldAddress: '山东潍坊',
+    right: '七天保价',
+    weight: ['100粒', '200粒'],
+    images: ['images/mockPic/eggplantTop.png'],
+    bigImages: ['eggplantBottom1.png', 'eggplantBottom2.png', 'eggplantBottom3.png', 'eggplantBottom4.png'],
+  },
+  {
+    titleName: '正宗绿贝贝南瓜种籽',
+    sold: 1200,
+    price: 6.8,
+    soldAddress: '安徽马鞍山',
+    right: '七天保价',
+    weight: ['10粒', '20粒'],
+    images: ['images/mockPic/pumpkinTop.png'],
+    bigImages: ['pumpkinBottom1.png', 'pumpkinBottom2.png', 'pumpkinBottom3.png', 'pumpkinBottom4.png'],
+  },
+  {
+    titleName: '复合肥料18-5-7',
+    sold: 1200,
+    price: 154,
+    soldAddress: '浙江金华',
+    right: '七天保价',
+    weight: ['25kg', '50kg'],
+    images: ['images/mockPic/fertilizerTop.png'],
+    bigImages: ['fertilizerBottom1.png', 'fertilizerBottom2.png'],
+  },
+  {
+    titleName: '正宗硫酸钾 农用钾肥',
+    sold: 1200,
+    price: 13.5,
+    soldAddress: '内蒙古',
+    right: '七天保价',
+    weight: ['5斤', '10斤'],
+    images: ['images/mockPic/KSO4Top.png'],
+    bigImages: ['KSO4Bottom1.png', 'KSO4Bottom2.png', 'KSO4Bottom3.png', 'KSO4Bottom4.png'],
+  },
+  {
+    titleName: '噻虫嗪农药',
+    sold: 1200,
+    price: 8.6,
+    soldAddress: '内蒙古',
+    right: '七天保价',
+    weight: ['500g'],
+    images: ['images/mockPic/pesticideTop.png'],
+    bigImages: ['pesticideBottom1.png', 'pesticideBottom2.png', 'pesticideBottom3.png', 'pesticideBottom4.png', 'pesticideBottom5.png'],
+  },
+  {
+    titleName: '11.6%甲维氯笨氣虫苯甲铣胺酰胺笨甲先胺水稻钻心虫农药杀虫剂',
+    sold: 1200,
+    price: 35.6,
+    soldAddress: '山东烟台',
+    right: '七天保价',
+    weight: ['500g', '1000g'],
+    images: ['images/mockPic/nyTop.png'],
+    bigImages: ['nyBottom1.png', 'nyBottom2.png', 'nyBottom3.png', 'nyBottom4.png'],
+  },
+];
+
 let tabVal = ref('detail');
 
 let saveInfo = reactive({
   num: 0,
 });
+onMounted(() => {
+  const num = Number(pId);
+  if (num === 55) {
+    // 1. 获取前四个元素的索引（0, 1, 2, 3）
+    const allIndices = [0, 1, 2, 3];
+    // 2. 随机打乱索引顺序
+    const shuffledIndices = [...allIndices].sort(() => Math.random() - 0.5);
+    // 3. 选择第一个
+    currentIndex.value = shuffledIndices.slice(0, 1)[0];
+  } else if (num === 61) {
+    // 1. 获取前四个元素的索引（0, 1, 2, 3）
+    const allIndices = [4, 5];
+    // 2. 随机打乱索引顺序
+    const shuffledIndices = [...allIndices].sort(() => Math.random() - 0.5);
+    // 3. 选择第一个
+    currentIndex.value = shuffledIndices.slice(0, 1)[0];
+  } else if (num === 65) {
+    // 1. 获取前四个元素的索引（0, 1, 2, 3）
+    const allIndices = [6, 7];
+    // 2. 随机打乱索引顺序
+    const shuffledIndices = [...allIndices].sort(() => Math.random() - 0.5);
+    // 3. 选择第一个
+    currentIndex.value = shuffledIndices.slice(0, 1)[0];
+  }
+});
 
 const toCodeDetail = () => {
   let id = '01';

sub-operation-service/src/views/ecommerce/components/banner.vue

@@ -2,7 +2,7 @@
   <div class="ecommerce-banner" :style="{ height: height }">
     <el-carousel height="height" motion-blur :indicator-position="indicatorPos" :arrow="arrow">
       <el-carousel-item v-for="(item, index) in list" :key="index">
-        <costomImg :url="item" :preview-list="srcList" :is-view="isViewVal"></costomImg>
+        <costomImg :url="item" :preview-list="srcList" :is-view="isViewVal" style="height: 100%; object-fit: fill"></costomImg>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -63,10 +63,14 @@ watch(
 <style lang="scss" scoped>
 .ecommerce-banner {
   width: 100%;
+  position: relative; /* 确保内部元素定位正确 */
   ::v-deep() {
     .el-image {
       width: 100%;
       height: 100%;
+      img {
+        object-fit: fill !important;
+      }
     }
     .el-carousel__item {
       border-radius: 16px !important;

sub-operation-service/src/views/ecommerce/components/goodsItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-goods-item-warp" @click="toDetail(data.id)">
+  <div class="c-goods-item-warp" @click="toDetail(data.id, data.parentId)">
     <div class="goods-img">
       <img :src="data.goodUrl ? data.goodUrl : ''" alt="" style="width: 100%" />
       <!--      <el-image :src="encodeURIComponent(data.goodUrl) ? encodeURIComponent(data.goodUrl) : ''" fit="cover" @error="handleImageError" />-->
@@ -32,8 +32,8 @@ const handleImageError = (e) => {
   console.error('图片加载失败:', e);
 };
 
-const toDetail = (id) => {
-  router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id);
+const toDetail = (id, pid) => {
+  router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id + '&pid=' + pid);
 };
 </script>
 <style lang="scss" scoped>

sub-operation-service/src/views/ecommerce/components/purchaserPopup.vue

@@ -56,24 +56,24 @@
           <div style="width: 5%">&nbsp;</div>
           <div class="inputs">
             <span class="labels">收购价格：</span>
-            <input type="text" placeholder="请输入" />
+            <input type="text" placeholder="请输入收购价格" />
           </div>
         </div>
         <div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
           <div class="inputs">
             <span class="labels">采购商品：</span>
-            <input type="text" placeholder="请输入" />
+            <input type="text" placeholder="请输入采购商品" />
           </div>
           <div style="width: 5%">&nbsp;</div>
-          <div class="inputs unit">
+          <div class="inputs">
             <span class="labels">收购数量：</span>
-            <input type="text" placeholder="请输入" />
+            <input type="text" placeholder="请输入收购数量，单位kg" />
           </div>
         </div>
         <div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
           <div class="inputs">
             <span class="labels">收货地址：</span>
-            <input type="text" placeholder="请输入" />
+            <input type="text" placeholder="请输入收货地址" />
           </div>
           <div style="width: 5%">&nbsp;</div>
           <div class="inputs">
@@ -190,15 +190,6 @@ defineExpose({
   align-items: center;
   margin-top: 20px;
 }
-.unit::after {
-  content: 'kg';
-  position: absolute;
-  right: 65px; /* 调整单位与输入框的距离 */
-  color: #000; /* 单位颜色 */
-  pointer-events: none; /* 防止单位遮挡输入框 */
-}
-.unit input {
-}
 .inputs {
   color: #999999;
   font-size: 18px;

sub-operation-service/src/views/smartFarm/index.vue

@@ -283,7 +283,7 @@
                 </div>
               </div>
               <div style="width: 50%">
-                <img style="width: 100%" :src="getAssetsFile('images/smartFarm/产能预测.png')" alt="" />
+                <img style="width: 100%" :src="getAssetsFile('images/smartFarm/locationPic.png')" alt="" />
               </div>
             </div>
           </el-card>