电商交易路由修改

sub-government-affairs-service/src/views/productOperateMain/individual/index.vue

@@ -115,6 +115,26 @@ const state = reactive({
           trigger: 'blur',
         },
       },
+      // {
+      //   label: '主体类型',
+      //   prop: 'dictType',
+      //   type: 'select',
+      //   search: true,
+      //   props: {
+      //     label: 'dictName',
+      //     value: 'dictType',
+      //   },
+      //   dicUrl: `${VITE_APP_BASE_API}/system/dept/list?dictType=sys_business_product_type&current=1&size=10`,
+      //   dicHeaders: {
+      //     authorization: UserStore.token,
+      //   },
+      //   dicFormatter: (res) => res.data,
+      //   rules: {
+      //     required: true,
+      //     message: '请选择',
+      //     trigger: 'blur',
+      //   },
+      // },
       {
         label: '经营产品种类',
         prop: 'landId',

sub-government-screen-service/.env.development

@@ -7,4 +7,4 @@ VITE_APP_NAME = 'sub-government-screen-service'
 VITE_APP_BASE_API = '/apis' 
 VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
 VITE_APP_UPLOAD_API = '/uploadApis'
-VITE_APP_UPLOAD_URL = 'http://192.168.18.99:9300'
+VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'

sub-operation-service/src/App.vue

@@ -36,6 +36,7 @@ body {
   --el-color-primary-light-5: #8cddbd;
   --el-color-primary-light-9: rgba(37, 191, 130, 0.1);
   --el-color-primary-light-8: rgba(37, 191, 130, 0.5);
+
   .el-input {
     --el-input-focus-border-color: #25bf82;
     --el-input-focus-border: #25bf82;

sub-operation-service/src/apis/index.js

@@ -1,5 +1,18 @@
 import request from '@/utils/axios';
 
+/**
+ * @Title: 上传图片
+ */
+export function CommonUpload(data, params) {
+  return request(`/upload`, {
+    method: 'POST',
+    apisType: 'upload',
+    uploadType: 'multipart/form-data',
+    data,
+    params,
+  });
+}
+
 //云南省所有区域信息
 export function getRegion(code) {
   let codeVal = code ? code : '530000';

sub-operation-service/src/components/upImg.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="c-upload-img">
+    <el-upload
+      v-model:file-list="fileList"
+      :action="uploadFileUrl"
+      list-type="picture-card"
+      :show-file-list="true"
+      accept="image/*"
+      :limit="maxCount"
+      :http-request="rowUploadPicture"
+    >
+      <el-icon><Plus /></el-icon>
+    </el-upload>
+  </div>
+</template>
+<script setup>
+import { ref, watch, nextTick, reactive } from 'vue';
+import { CommonUpload } from '@/apis/index.js';
+import { ElMessage } from 'element-plus';
+const props = defineProps({
+  maxCount: {
+    type: Number,
+    default: 6,
+  },
+  // 大小限制(MB)
+  fileSize: {
+    type: Number,
+    default: 5,
+  },
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true,
+  },
+});
+let fileList = reactive([]);
+
+const rowUploadPicture = async ({ file }) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await CommonUpload(formData);
+};
+</script>
+<style lang="scss" scoped>
+.c-upload-img {
+  width: 100%;
+}
+</style>

sub-operation-service/src/router/index.js

@@ -38,33 +38,48 @@ export const constantRoutes = [
     ],
   },
   {
-    path: '/ecommerce',
+    path: '/sub-operation-service/ecommerce',
     name: 'ecommerce',
     component: Layout,
-    redirect: '/sub-operation-service/ecommerce',
+    redirect: '/sub-operation-service/ecommerce-agricultural',
     meta: { title: '电商交易' },
     children: [
       {
-        path: '/sub-operation-service/ecommerce',
+        path: '/ecommerce',
-        component: () => import('@/views/ecommerce/index.vue'),
+        component: Views,
-        name: 'agricultural',
+        redirect: '/sub-operation-service/ecommerce-agricultural',
+        name: 'agriculturalParent',
         meta: { title: '农资交易' },
+        children: [
+          {
+            path: '/sub-operation-service/ecommerce-agricultural',
+            component: () => import('@/views/ecommerce/index.vue'),
+            name: 'agricultural',
+            meta: { title: '农资交易' },
+          },
+          {
+            path: '/sub-operation-service/ecommerce-agriculturalDetai',
+            component: () => import('@/views/ecommerce/agriculturalDetail.vue'),
+            name: 'agriculturalDetail',
+            meta: { title: '农资详情' },
+          },
+        ],
       },
       {
-        path: '/purchaser',
+        path: '/sub-operation-service/purchaser',
         component: Views,
-        redirect: '/sub-operation-service/purchaser',
+        redirect: '/sub-operation-service/ecommerce-purchaser',
         name: 'purchaserParent',
         meta: { title: '采购商服务' },
         children: [
           {
-            path: '/sub-operation-service/purchaser',
+            path: '/sub-operation-service/ecommerce-purchaser',
             component: () => import('@/views/ecommerce/purchaser.vue'),
             name: 'purchaser',
             meta: { title: '采购商服务' },
           },
           {
-            path: '/sub-operation-service/purchaserDetail',
+            path: '/sub-operation-service/ecommerce-purchaserDetail',
             component: () => import('@/views/ecommerce/purchaserDetail.vue'),
             name: 'purchaserDetail',
             meta: { title: '采购详情' },
@@ -73,26 +88,26 @@ export const constantRoutes = [
       },
 
       {
-        path: '/sub-operation-service/supplier',
+        path: '/sub-operation-service/ecommerce-supplier',
         component: () => import('@/views/ecommerce/supplier.vue'),
         name: 'supplier',
         meta: { title: '供应商服务' },
       },
       {
-        path: '/land',
+        path: '/sub-operation-service/ecommerce-land',
         component: Views,
-        redirect: '/sub-operation-service/land',
+        redirect: '/sub-operation-service/ecommerce-land',
         name: 'landParent',
         meta: { title: '土地交易' },
         children: [
           {
-            path: '/sub-operation-service/land',
+            path: '/sub-operation-service/ecommerce-land',
             component: () => import('@/views/ecommerce/land.vue'),
             name: 'land',
             meta: { title: '土地交易' },
           },
           {
-            path: '/sub-operation-service/landDetail',
+            path: '/sub-operation-service/ecommerce-landDetail',
             component: () => import('@/views/ecommerce/landDetail.vue'),
             name: 'landDetail',
             meta: { title: '土地详情' },

sub-operation-service/src/styles/global.scss

@@ -6,28 +6,31 @@ $color-main-border:rgba(37, 191, 130, 0.5);
 $color-5a:#5A5A5A;
 $color-000:#000;
 $color-fff:#fff;
+$color-da:#dadada;
+$color-000:#000;
+$color-f5:#f5f5f5;
 $color-primary: #20a0ff;
 $color-success: #13ce66;
 $color-warning: #FFBE4D;
 $color-danger: #ff4949;
 $color-info: #50bfff;
 $color-secondary: #2e90fe;
-$color-white: #ffffff;
+$color-white: #fff;
 $color-black: #1f2d3d;
 $color-black-light: #324057;
 $color-black-lighter: #475669;
 $color-blue-light: #5da9ff;
 $color-blue-lighter: #5da9ff;
-$color-black: #000000;
+$color-black: #000;
 $color-silver: #8492a6;
 $color-silver-light: #99a9bf;
 $color-silver-lighter: #c0ccda;
 $color-gray: #d3dce6;
 $color-gray-light: #e5e9f2;
 $color-gray-lighter: #eff2f7;
-$color-333: #333333;
+$color-333: #333;
 $color-666: #666;
-$color-999: #999999;
+$color-999: #999;
 $color-border-gray: #d1dbe5;
 $color-input-border: #dcdfe6;
 $color-border: $color-border-gray;

sub-operation-service/src/styles/style.scss

@@ -23,6 +23,8 @@
   -webkit-box-orient: vertical; 
   overflow: hidden; 
   text-overflow: ellipsis; 
+  word-break: break-all;
+  white-space: normal
 }
 .clamp1{
   -webkit-line-clamp: 1; 

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

@@ -0,0 +1,496 @@
+<template>
+  <div class="agricultural-detail-warp">
+    <common current-name="agricultural">
+      <template #main>
+        <div class="agricultural-detail-info">
+          <div class="top-title">
+            <div class="father-title">农资交易</div>
+            <div class="current-title">查看详情</div>
+          </div>
+
+          <div class="top-info">
+            <el-row :gutter="16">
+              <el-col :span="12">
+                <banner name="landdetail" :imglist="bannerList" indicator-pos="none" arrow="always" height="340px"> </banner>
+              </el-col>
+              <el-col :span="12" class="top-info-txt">
+                <h1 class="title">耿马县勐简乡有机沙瓤西红柿</h1>
+                <div class="price-sold">
+                  <span class="price">2000.0</span>
+                  <span class="sold">999</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-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>
+                  <div class="goods-num">
+                    <div class="num-title">数量：</div>
+                    <div class="num-warp">
+                      <el-input-number v-model="saveInfo.num" :min="1" :max="10" />
+                      <span class="is-have">有货</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="top-btn">
+                  <div class="item-btn sign">
+                    <span>立即购买</span>
+                  </div>
+                  <div class="item-btn reservation">
+                    <span>加入购物车</span>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+            <signProcess></signProcess>
+          </div>
+
+          <div class="agricultural-detail-content">
+            <div class="detail-content">
+              <div class="tab-top">
+                <el-radio-group v-model="tabVal">
+                  <el-radio-button v-for="(t, indext) in tabList" :key="t.name" :value="t.value">{{ t.label }}</el-radio-button>
+                </el-radio-group>
+              </div>
+
+              <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')" fit="cover" />
+                </div>
+                <div v-if="tabVal == 'sourceCode'" class="content-source-code">
+                  <div class="code-warp">
+                    <div class="code-img">
+                      <el-image :src="qrImg" fit="cover" />
+                    </div>
+                    <div class="code-down">
+                      <el-icon><Download /></el-icon>
+                      <a>下载溯源码</a>
+                    </div>
+                    <div class="code-copy">
+                      <div class="code-txt">
+                        <span class="txt-ellipsis clamp1" style="width: 100%">10.5488754215478XE254.10405488754215478XE254201</span>
+                      </div>
+                      <div class="do-copy">
+                        <el-button type="primary" @click="toCopy">复制</el-button>
+                      </div>
+                    </div>
+                    <div class="code-to-detail">
+                      <el-button type="primary" @click="toCodeDetail">点击查看溯源详情</el-button>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="tabVal == 'evaluate'" class="content-evaluate">
+                  <evaluate></evaluate>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </common>
+  </div>
+</template>
+<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 { qrImg } from '@/layouts/component/Header/base64img.js';
+import evaluate from './components/evaluate.vue';
+
+let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
+const tabList = reactive([
+  { label: '详情介绍', value: 'detail' },
+  { label: '溯源码', value: 'sourceCode' },
+  { label: '评价', value: 'evaluate' },
+]);
+
+let tabVal = ref('detail');
+
+let saveInfo = reactive({
+  num: 0,
+});
+
+const toCodeDetail = () => {};
+
+const toCopy = () => {};
+</script>
+<style lang="scss" scoped>
+.agricultural-detail-warp {
+  width: 100%;
+  .agricultural-detail-info {
+    width: 100%;
+    margin-bottom: 16px;
+    background: $color-fff;
+    border-radius: 16px;
+    overflow: hidden;
+    padding: 10px 24px;
+    .top-title {
+      width: 100%;
+      text-align: left;
+      .father-title,
+      .current-title {
+        display: inline-block;
+        vertical-align: middle;
+        font-weight: 700;
+      }
+      .father-title {
+        font-size: 18px;
+      }
+      .current-title {
+        font-size: 16px;
+        color: $color-main;
+        position: relative;
+        padding: 0 8px;
+        margin-left: 8px;
+      }
+      .current-title::before {
+        content: '.';
+
+        position: absolute;
+        left: 0;
+        top: 30%;
+        transform: translateY(-50%);
+      }
+    }
+
+    .top-info {
+      margin: 16px 0;
+      text-align: left;
+      ::v-deep() {
+        .ecommerce-banner {
+          padding: 0 48px !important;
+          position: relative;
+        }
+        .el-carousel {
+          position: unset !important;
+        }
+        .el-carousel__arrow--left {
+          left: 0 !important;
+        }
+        .el-carousel__arrow--right {
+          right: 0 !important;
+        }
+      }
+    }
+    .price-sold {
+      margin: 16px 0;
+      .price {
+        color: $color-main;
+        font-size: 32px;
+        position: relative;
+        padding: 0 16px;
+      }
+      .price::before {
+        content: '￥';
+        font-size: 16px;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      .sold {
+        font-size: 16px;
+        color: $color-999;
+      }
+      .sold::before {
+        content: '已售';
+      }
+    }
+    .tag-list {
+      color: $color-999;
+      display: inline-flex;
+      width: 100%;
+      justify-content: flex-start;
+      gap: 10px;
+      .tag-item {
+        position: relative;
+        padding-left: 32px;
+        .iconfont {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          &.icon-see {
+            font-size: 24px;
+          }
+          &.icon-ci {
+            font-size: 20px;
+          }
+          &.icon-time {
+            font-size: 24px;
+          }
+        }
+        font-size: 16px;
+        line-height: 32px;
+      }
+    }
+    .tips-list {
+      font-size: 16px;
+      line-height: 32px;
+      margin: 16px 0;
+    }
+    .spu-sku-list {
+      width: 100%;
+      .spu-title {
+        font-size: 16px;
+      }
+      .spu-sku-warp {
+        display: inline-flex;
+        width: 100%;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        gap: 16px;
+        margin-top: 16px;
+        .spu-sku-item {
+          width: calc((100% - 16px) / 2);
+          text-align: center;
+          line-height: 40px;
+          font-weight: 400;
+          font-size: 16px;
+          border-radius: 8px;
+          cursor: pointer;
+          &.normal {
+            color: $color-999;
+            border: 1px solid $color-da;
+          }
+          &.act {
+            color: $color-main;
+            border: 1px solid $color-main;
+          }
+        }
+      }
+
+      .spu-sku-warp::after {
+        content: '';
+        flex: auto;
+      }
+    }
+    .goods-num {
+      margin: 16px 0;
+      .num-warp,
+      .num-title {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .num-title {
+        font-size: 16px;
+      }
+      .num-warp {
+        .is-have {
+          display: inline-block;
+          padding-left: 8px;
+          color: $color-999;
+          font-size: 12px;
+        }
+      }
+    }
+    .top-btn {
+      .item-btn {
+        margin: 8px 24px 8px 0;
+        display: inline-block;
+        line-height: 42px;
+        color: $color-fff;
+        padding: 0 24px;
+        border-radius: 12px;
+        font-size: 20px;
+        margin-top: 16px;
+        &.sign {
+          background: $color-main;
+        }
+        &.reservation {
+          background: $color-warning;
+        }
+      }
+    }
+
+    .agricultural-detail-content {
+      width: 100%;
+      text-align: left;
+      .detail-content {
+        .tab-top {
+          width: 100%;
+          margin: 42px 0;
+          text-align: center;
+          ::v-deep() {
+            .el-radio-button:first-child .el-radio-button__inner {
+              border-radius: 16px 0 0 16px;
+            }
+            .el-radio-button:last-child .el-radio-button__inner {
+              border-radius: 0 16px 16px 0;
+            }
+            .el-radio-button__inner {
+              padding-left: 48px !important;
+              padding-right: 48px !important;
+              font-size: 20px;
+              line-height: 32px !important;
+            }
+          }
+        }
+
+        .tab-content {
+          width: 100%;
+          margin: 24px 0;
+
+          .content-detail,
+          .content-source-code,
+          .content-evaluate {
+            width: 100%;
+          }
+          .content-detail {
+            .detail-des {
+              margin-bottom: 24px;
+            }
+          }
+          .content-source-code {
+            .code-warp {
+              width: 100%;
+              text-align: center;
+              .code-img {
+                width: 230px;
+                height: 230px;
+                margin: auto;
+              }
+              .code-down {
+                color: $color-main;
+                margin: 16px 0;
+                .el-icon,
+                a {
+                  display: inline-block;
+                  vertical-align: middle;
+                }
+                .el-icon {
+                  font-size: 22px;
+                }
+                a {
+                  color: $color-main;
+                  font-size: 16px;
+                }
+              }
+              .code-copy {
+                .code-txt {
+                  display: inline-block;
+                  vertical-align: middle;
+                  width: 200px;
+                  background: $color-main-table-header;
+                  border-radius: 16px 0 0 16px;
+                  padding: 12px 8px;
+                }
+                .do-copy {
+                  vertical-align: middle;
+                  display: inline-block;
+                  margin-left: -6px;
+                  .el-button {
+                    padding: 21px 16px;
+                    border-radius: 12px;
+                    font-size: 16px;
+                  }
+                }
+              }
+              .code-to-detail {
+                margin: 24px 0;
+                .el-button {
+                  padding: 16px 116px;
+                  line-height: 48px;
+                  height: 48px;
+                  border-radius: 24px;
+                  font-size: 20px;
+                  font-weight: 600;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -3,6 +3,7 @@
     <el-carousel height="height" motion-blur :indicator-position="indicatorPos" :arrow="arrow">
       <el-carousel-item v-for="(item, index) in list" :key="index">
         <img :src="getAssetsFile(item)" />
+        <!-- <el-image :src="getAssetsFile(item)" fit="cover" /> -->
       </el-carousel-item>
     </el-carousel>
   </div>

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

@@ -0,0 +1,343 @@
+<template>
+  <div class="c-evaluate-warp">
+    <div class="evaluate-warp-top">
+      <div class="user-evaluate">
+        <div class="score">{{ score }}</div>
+        <div class="score-tips">
+          <div class="tips">用户评价</div>
+          <div class="score-val"><el-rate v-model="score" :colors="colors" size="large" :disabled="true" /></div>
+        </div>
+      </div>
+
+      <div v-for="(n, index) in totalList" :key="n.name" class="top-tag-btn" @click="selectLabel(n.name)">
+        <div class="tag-btn-warp">
+          <div class="tag-btn-pos" :class="currentlabel != n.name ? 'normal' : 'act'">
+            <span class="label-title">{{ n.title || '--' }}</span>
+            <span class="label-num">{{ n.num || 0 }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="user-do-warp">
+      <div class="do-title">用户评价</div>
+      <div class="do-date"><el-rate v-model="score" :colors="colors" size="large" :disabled="false" /></div>
+      <div class="do-title">评价内容</div>
+      <div class="do-fill">
+        <el-input v-model="remark" type="textarea" placeholder="质量好，品质过硬，值得推荐！"></el-input>
+        <!-- <upImg></upImg> -->
+      </div>
+      <div class="is-anonymous">
+        <div class="do-is" :class="isAnonymous ? 'do-is-act' : 'do-is-no'" @click="doAnonymous">
+          <div class="is-radio"></div>
+          <span class="do-is-txt">匿名评价</span>
+        </div>
+        <div class="do-submit">
+          <el-button type="primary" @click="submitEvaluate">提交评价</el-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="evaluate-list">
+      <div class="list-content">
+        <template v-for="(e, indexe) in 2" :key="indexe">
+          <div class="evaluate-item">
+            <div class="evaluate-item-top">
+              <div class="user-info">
+                <div class="info-img">
+                  <el-image :src="getAssetsFile('images/ecommerce/' + 'goods.png')" fit="cover" />
+                </div>
+                <div class="info-txt">
+                  <div class="info-txt-pos">
+                    <div class="info-txt-c">
+                      <div class="name">用户名888888</div>
+                      <div class="time">2025.01.01</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="score-val">
+                <el-rate :model-value="3" :colors="colors" size="large" :disabled="true" />
+              </div>
+            </div>
+            <div class="evaluate-item-content">
+              <div class="content-txt">经过一段时间种植，都长出来了，也结出西红柿，中等个头，入口鲜嫩。性价比挺高，非常值得推荐。</div>
+              <div class="content-img">
+                <template v-for="(m, indexm) in 2" :key="indexm">
+                  <div class="img-item">
+                    <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="cover" />
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import { ref, reactive, onMounted, watch } from 'vue';
+import upImg from '@/components/upImg.vue';
+const route = useRoute();
+const router = useRouter();
+
+let score = ref(4.5);
+const colors = ref(['#99A9BF', '#25BF82', '#25BF82']);
+const totalList = reactive([
+  { title: '全部', name: 'all', num: 912 },
+  { title: '成活率高', name: 'label1', num: 458 },
+  { title: '抗病率高', name: 'label2', num: 242 },
+  { title: '抗倒伏率高', name: 'label3', num: 106 },
+  { title: '坐果率高', name: 'label4', num: 106 },
+]);
+let currentlabel = ref('all');
+
+const selectLabel = (name) => {
+  currentlabel.value = name;
+};
+
+let remark = ref('');
+let isAnonymous = ref(false);
+
+const doAnonymous = () => {
+  isAnonymous.value = !isAnonymous.value;
+};
+
+const submitEvaluate = () => {};
+</script>
+<style lang="scss" scoped>
+.c-evaluate-warp {
+  width: 100%;
+  ::v-deep() {
+    .el-rate {
+      .el-icon {
+        font-size: 22px !important;
+      }
+    }
+  }
+  .evaluate-warp-top {
+    display: inline-flex;
+    width: 100%;
+    gap: 16px;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    .user-evaluate {
+      display: inline-flex;
+      justify-content: flex-start;
+      .score,
+      .score-tips {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .score {
+        width: 80px;
+        height: 80px;
+        line-height: 80px;
+        text-align: center;
+        background: $color-main-table-header;
+        font-size: 32px;
+        color: $color-main;
+        font-weight: 700;
+        border-radius: 8px;
+      }
+      .score-tips {
+        padding-left: 16px;
+        vertical-align: middle;
+        .tips {
+          font-size: 18px;
+          color: $color-666;
+        }
+        .score-val {
+        }
+      }
+    }
+    .top-tag-btn {
+      display: inline-block;
+      cursor: pointer;
+      .tag-btn-warp {
+        display: inline-flex;
+        justify-content: center;
+        flex-direction: column;
+        height: 100%;
+
+        .tag-btn-pos {
+          line-height: 48px;
+          height: 48px;
+          padding: 0 16px;
+          border-radius: 16px;
+          font-size: 18px;
+          &.normal {
+            background: $color-main-table-header;
+          }
+          &.act {
+            background: $color-main;
+            color: $color-fff;
+            font-weight: 600;
+          }
+          .label-title,
+          .label-num {
+            display: inline-block;
+          }
+          .label-num {
+            padding-left: 8px;
+          }
+        }
+      }
+    }
+  }
+
+  .user-do-warp {
+    width: 100%;
+    .do-title {
+      width: 100%;
+      font-size: 18px;
+      line-height: 36px;
+    }
+    .do-fill {
+      background: $color-f5;
+      border-radius: 16px;
+      padding: 16px;
+      min-height: 100px;
+      ::v-deep() {
+        .el-textarea__inner {
+          background: transparent !important;
+          box-shadow: none !important;
+          font-size: 16px;
+          color: $color-666;
+        }
+      }
+    }
+    .is-anonymous {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-between;
+      margin: 16px 0;
+      .do-is {
+        display: inline-block;
+        font-size: 16px;
+        cursor: pointer;
+        &.do-is-act {
+          .is-radio {
+            background: $color-main;
+            border: 1px solid $color-main;
+          }
+          .do-is-txt {
+            color: $color-main;
+          }
+        }
+        &.do-is-no {
+          .is-radio {
+            background: $color-fff;
+            border: 1px solid $color-da;
+          }
+          .do-is-txt {
+            color: $color-999;
+          }
+        }
+        .do-is-txt,
+        .is-radio {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .do-is-txt {
+          padding-left: 8px;
+        }
+        .is-radio {
+          height: 20px;
+          width: 20px;
+          border-radius: 50%;
+          position: relative;
+        }
+        .is-radio::before {
+          content: ' ';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          background: $color-fff;
+        }
+      }
+    }
+  }
+
+  .evaluate-list {
+    width: 100%;
+    .list-content {
+      width: 100%;
+      .evaluate-item {
+        width: 100%;
+        margin: 16px 0;
+        .evaluate-item-top {
+          width: 100%;
+          display: inline-flex;
+          justify-content: space-between;
+          .user-info {
+            display: inline-flex;
+            justify-content: flex-start;
+            width: calc(100% - 150px);
+            .info-img,
+            .info-txt {
+              display: inline-block;
+              vertical-align: middle;
+            }
+            .info-img {
+              width: 64px;
+              height: 64px;
+              overflow: hidden;
+              border-radius: 50%;
+            }
+            .info-txt {
+              padding-left: 16px;
+              .info-txt-pos {
+                display: inline-flex;
+                height: 64px;
+                flex-direction: column;
+                justify-content: center;
+                .name {
+                  font-size: 16px;
+                }
+                .time {
+                  font-size: 14px;
+                  color: $color-999;
+                }
+              }
+            }
+          }
+          .score-val {
+            text-align: right;
+            width: 150px;
+          }
+        }
+
+        .evaluate-item-content {
+          width: 100%;
+          .content-txt {
+            width: 100%;
+            font-size: 18px;
+          }
+          .content-img {
+            display: inline-flex;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+            gap: 24px;
+            margin-top: 24px;
+            .img-item {
+              width: 138px;
+              height: 138px;
+              overflow: hidden;
+              display: inline-block;
+              border-radius: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-goods-item-warp">
+  <div class="c-goods-item-warp" @click="toDetail">
     <div class="goods-img">
       <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="cover" />
     </div>
@@ -14,6 +14,14 @@
 </template>
 <script setup>
 import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+
+const toDetail = () => {
+  let id = '01';
+  router.push('/sub-operation-service/ecommerce-agriculturalDetai?id=' + id);
+};
 </script>
 <style lang="scss" scoped>
 .c-goods-item-warp {

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

@@ -39,7 +39,7 @@ const router = useRouter();
 
 const toDetail = () => {
   let id = '01';
-  router.push('/sub-operation-service/landDetail?id=' + id);
+  router.push('/sub-operation-service/ecommerce-landDetail?id=' + id);
 };
 </script>
 <style lang="scss" scoped>

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

@@ -22,10 +22,10 @@ const props = defineProps({
 });
 
 const leftMenu = reactive([
-  { name: 'agricultural', title: '农资交易', icon: 'menu2.png', path: '/sub-operation-service/ecommerce' },
+  { name: 'agricultural', title: '农资交易', icon: 'menu2.png', path: '/sub-operation-service/ecommerce-agricultural' },
-  { name: 'supplier', title: '供应商服务', icon: 'menu1.png', path: '/sub-operation-service/supplier' },
+  { name: 'supplier', title: '供应商服务', icon: 'menu1.png', path: '/sub-operation-service/ecommerce-supplier' },
-  { name: 'purchaser', title: '采购商服务', icon: 'menu3.png', path: '/sub-operation-service/purchaser' },
+  { name: 'purchaser', title: '采购商服务', icon: 'menu3.png', path: '/sub-operation-service/ecommerce-purchaser' },
-  { name: 'land', title: '土地交易', icon: 'menu4.png', path: '/sub-operation-service/land' },
+  { name: 'land', title: '土地交易', icon: 'menu4.png', path: '/sub-operation-service/ecommerce-land' },
 ]);
 
 let currentIndex = ref(0);