土地交易

sub-operation-service/src/App.vue

@@ -34,7 +34,8 @@ body {
   --el-color-primary: #25bf82;
   --el-color-primary-light-3: #45dda1;
   --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/router/index.js

@@ -32,13 +32,13 @@ export const constantRoutes = [
     name: 'layout',
     component: Layout,
     redirect: '/sub-operation-service/home',
-    meta: { title: '首页', icon: 'House' },
+    meta: { title: '首页' },
     children: [
       {
         path: '/sub-operation-service/home',
         component: () => import('@/views/home/index.vue'),
         name: 'home',
-        meta: { title: '首页', icon: 'House' },
+        meta: { title: '首页' },
       },
     ],
   },
@@ -46,32 +46,63 @@ export const constantRoutes = [
     path: '/ecommerce',
     name: 'ecommerce',
     component: Layout,
-    redirect: '/ecommerce',
+    redirect: '/sub-operation-service/ecommerce',
-    meta: { title: '首页', icon: 'House' },
+    meta: { title: '电商交易' },
     children: [
       {
         path: '/sub-operation-service/ecommerce',
         component: () => import('@/views/ecommerce/index.vue'),
         name: 'agricultural',
-        meta: { title: '农资交易', icon: 'House' },
+        meta: { title: '农资交易' },
       },
+      {
+        path: '/purchaser',
+        component: Views,
+        redirect: '/sub-operation-service/purchaser',
+        name: 'purchaserParent',
+        meta: { title: '采购商服务' },
+        children: [
           {
             path: '/sub-operation-service/purchaser',
             component: () => import('@/views/ecommerce/purchaser.vue'),
             name: 'purchaser',
-        meta: { title: '采购商服务', icon: 'House' },
+            meta: { title: '采购商服务' },
           },
+          {
+            path: '/sub-operation-service/purchaserDetail',
+            component: () => import('@/views/ecommerce/purchaserDetail.vue'),
+            name: 'purchaserDetail',
+            meta: { title: '采购详情' },
+          },
+        ],
+      },
+
       {
         path: '/sub-operation-service/supplier',
         component: () => import('@/views/ecommerce/supplier.vue'),
         name: 'supplier',
-        meta: { title: '供应商服务', icon: 'House' },
+        meta: { title: '供应商服务' },
       },
+      {
+        path: '/land',
+        component: Views,
+        redirect: '/sub-operation-service/land',
+        name: 'landParent',
+        meta: { title: '土地交易' },
+        children: [
           {
             path: '/sub-operation-service/land',
             component: () => import('@/views/ecommerce/land.vue'),
             name: 'land',
-        meta: { title: '土地交易', icon: 'House' },
+            meta: { title: '土地交易' },
+          },
+          {
+            path: '/sub-operation-service/landDetail',
+            component: () => import('@/views/ecommerce/landDetail.vue'),
+            name: 'landDetail',
+            meta: { title: '土地详情' },
+          },
+        ],
       },
     ],
   },

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

@@ -2,6 +2,7 @@
 $legacy-ie: 10;
 $color-main:#25BF82;
 $color-main-table-header:rgba(37,191,130,0.1);
+$color-main-border:rgba(37, 191, 130, 0.5);
 $color-5a:#5A5A5A;
 $color-000:#000;
 $color-fff:#fff;
@@ -25,7 +26,7 @@ $color-gray: #d3dce6;
 $color-gray-light: #e5e9f2;
 $color-gray-lighter: #eff2f7;
 $color-333: #333333;
-$color-666: #333333;
+$color-666: #666;
 $color-999: #999999;
 $color-border-gray: #d1dbe5;
 $color-input-border: #dcdfe6;

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

@@ -30,7 +30,7 @@
   max-height: calc(1.5em * 1); 
 }
 
-.clamp1{
+.clamp2{
   -webkit-line-clamp: 2; 
   line-height: 1.5; 
   max-height: calc(1.5em * 2); 

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

@@ -112,12 +112,16 @@ const selectItem = (index, key, item) => {
   if (key && item.id) {
     currentLevel.value = index || 0;
     select[key] = { id: item.id, pId: item.pId ? item.pId : null };
+    emit('select', select);
   }
 };
 
 const selectAll = (key) => {
   select[key].id = '';
+  emit('select', select);
 };
+
+const emit = defineEmits(['select']);
 </script>
 <style lang="scss" scoped>
 .filter-top-warp {

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

@@ -3,7 +3,7 @@
     <div class="goods-img">
       <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="cover" />
     </div>
-    <div class="goods-name txt-ellipsis clamp1">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div>
+    <div class="goods-name txt-ellipsis clamp2">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div>
     <div class="goods-do">
       <div class="price txt-ellipsis clamp">25.00</div>
       <div class="do">

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

@@ -0,0 +1,142 @@
+<template>
+  <div class="c-land-item-warp" @click="toDetail">
+    <div class="land-img">
+      <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="cover" />
+    </div>
+    <div class="land-info">
+      <div class="land-info-pos">
+        <div class="land-info-c">
+          <div class="land-name txt-ellipsis clamp2">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div>
+          <div class="tag-list">
+            <el-tag type="primary" size="small">现场核实</el-tag>
+            <el-tag type="primary" size="small">官方发布</el-tag>
+            <el-tag type="primary" size="small">优质地源</el-tag>
+          </div>
+          <div class="type-list">
+            <div class="type-val">100亩</div>
+            <div class="type-val">耕地</div>
+            <div class="type-val">蔬菜瓜果类</div>
+            <div class="type-val">水浇地</div>
+            <div class="type-val">10年起租</div>
+          </div>
+          <div class="addr">
+            <div class="iconfont icon-location"></div>
+            {{ '临沧市·耿马县' }}
+          </div>
+          <div class="land-do">
+            <div class="price txt-ellipsis clamp">25.00</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</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/landDetail?id' + id);
+};
+</script>
+<style lang="scss" scoped>
+.c-land-item-warp {
+  width: 100%;
+  padding: 8px;
+  background: $color-fff;
+  border-radius: 16px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  .land-img,
+  .land-info {
+    display: inline-block;
+    vertical-align: top;
+  }
+  .land-img {
+    width: 200px;
+    height: 200px;
+    border-radius: 16px;
+    overflow: hidden;
+    ::v-deep() {
+      .el-image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .land-info {
+    width: calc(100% - 200px);
+    padding-left: 16px;
+    height: 200px;
+    .land-info-pos {
+      width: 100%;
+      height: 100%;
+      display: inline-flex;
+      justify-content: space-around;
+      flex-direction: column;
+      .land-info-c {
+        width: 100%;
+      }
+    }
+  }
+  .land-name {
+    margin-bottom: 3px;
+    font-size: 16px;
+    color: $color-666;
+  }
+  .tag-list {
+    width: 100%;
+    text-align: left;
+    .el-tag {
+      margin-right: 5px;
+    }
+  }
+  .type-list {
+    width: 100%;
+    text-align: left;
+    .type-val {
+      display: inline-block;
+      margin: 3px 8px 0 0;
+      font-size: 14px;
+      color: $color-999;
+    }
+  }
+  .addr {
+    width: 100%;
+    text-align: left;
+    font-size: 14px;
+    margin-top: 8px;
+    .iconfont {
+      display: inline-block;
+      margin-right: 3px;
+      font-size: 20px;
+      color: $color-666;
+      vertical-align: middle;
+    }
+  }
+  .land-do {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+    .price {
+      width: calc(100% - 0px);
+      text-align: left;
+      font-size: 22px;
+      padding-right: 8px;
+      color: $color-main;
+      font-weight: 700;
+    }
+    .price::before {
+      content: '￥';
+      font-size: 16px !important;
+      font-weight: normal !important;
+    }
+    .price::after {
+      content: '/年';
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,125 @@
+<template>
+  <div class="type-top-warp">
+    <div class="filter-item">
+      <div class="single-item">
+        <div class="item-title">{{ titleVal || ' ' }}</div>
+        <div class="single-li all" :class="!select ? 'li-act' : ''" @click="selectAll()">全部</div>
+        <div class="not-all">
+          <div
+            v-for="(m, indexm) in listVal"
+            :key="indexm"
+            class="single-li"
+            :class="select && select.id == m.id ? 'li-act' : ''"
+            @click="selectItem(m)"
+          >
+            {{ m.title }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch, computed } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  //唯一标识
+  name: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '选择分类',
+  },
+});
+
+const emit = defineEmits(['select']);
+
+let listVal = reactive([]);
+
+let titleVal = ref(props.title);
+let nameVal = ref(props.name);
+
+let select = ref(null);
+
+watch(
+  () => (props.list, props.title, props.name),
+  () => {
+    listVal = props.list;
+    titleVal.value = props.title;
+    nameVal.value = props.name;
+  },
+  {
+    immediate: true,
+  }
+);
+
+const selectItem = (item) => {
+  select.value = item || null;
+  emit('select', { select: select.value, nameVal: nameVal.value });
+};
+
+const selectAll = (key) => {
+  select.value = null;
+  emit('select', { select: select.value, nameVal: nameVal.value });
+};
+
+const clearSelect = () => {
+  select.value = null;
+};
+
+defineExpose({
+  clearSelect,
+});
+</script>
+<style lang="scss" scoped>
+.type-top-warp {
+  width: 100%;
+  text-align: left;
+  .filter-item {
+    width: 100%;
+  }
+  .single-item {
+    width: 100%;
+    display: inline-flex;
+    justify-content: flex-start;
+    .item-title {
+      display: -webkit-inline-box;
+      color: $color-999;
+      font-size: 20px;
+      width: 120px;
+      vertical-align: top;
+      font-weight: 500;
+      line-height: 40px;
+    }
+    .single-li {
+      display: inline-block;
+      cursor: pointer;
+      margin: 10px;
+      font-size: 18px;
+      &.all {
+        width: 60px;
+      }
+      &.li-act {
+        color: $color-main;
+      }
+    }
+    .not-all {
+      display: inline-flex;
+      justify-content: flex-start;
+      width: calc(100% - 180px);
+      flex-wrap: wrap;
+      .single-li {
+      }
+    }
+  }
+}
+</style>

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

@@ -1,12 +1,328 @@
 <template>
-  <div>
+  <div class="land-index-warp">
     <common current-name="land">
       <template #main>
-        <div>土地交易</div>
+        <banner :imglist="bannerList"></banner>
+        <div class="land-filter-top">
+          <div v-if="!isHide">
+            <typetop ref="arearef" :list="LevelOne" :name="'area'" title="选择地区" @select="doSelect"></typetop>
+            <typetop ref="uesdref" :list="landUse" :name="'uesd'" title="选择土地" @select="doSelect"></typetop>
+            <typetop ref="typeref" :list="landType" :name="'type'" title="土地用途" @select="doSelect"></typetop>
+            <typetop ref="productref" :list="landProduct" :name="'product'" title="种养殖产物" @select="doSelect"></typetop>
+            <typetop ref="circulationref" :list="landCirculation" :name="'circulation'" title="土地流转" @select="doSelect"></typetop>
+            <div class="more-filter">
+              <div class="more-title">更多</div>
+              <div class="filter-r">
+                <el-row :gutter="16">
+                  <el-col :span="8">
+                    <el-select v-model="fliter.area" placeholder="请选择面积范围" style="width: 200px">
+                      <el-option v-for="item in areaRange" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-select v-model="fliter.year" placeholder="请选择流转年限" style="width: 200px">
+                      <el-option v-for="m in yearList" :key="m.value" :label="m.label" :value="m.value" />
+                    </el-select>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-select v-model="fliter.lookType" placeholder="请选择预约带看" style="width: 200px">
+                      <el-option v-for="n in lookType" :key="n.value" :label="n.label" :value="n.value" />
+                    </el-select>
+                  </el-col>
+                  <el-col :span="24" style="margin: 16px 0">
+                    <el-radio-group v-model="fliter.other">
+                      <el-radio v-for="(k, index) in radioList" :key="index" :value="k.value">{{ k.label }}</el-radio>
+                    </el-radio-group>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </div>
+          <div class="select-result">
+            <div class="title">所选分类</div>
+            <div class="result-list">
+              <template v-for="(r, indexr) in selectkeylist" :key="indexr">
+                <div class="result-item">
+                  <el-tag closable :type="'info'" @close="handleClose(r)">
+                    {{ selectAll[r] && selectAll[r].title ? selectAll[r].title : '' }}
+                  </el-tag>
+                </div>
+              </template>
+              <div class="show-hide" @click="doShowHide">
+                <el-icon v-if="!isHide"><ArrowUpBold /></el-icon>
+                <el-icon v-else><ArrowDownBold /></el-icon>
+                <span>{{ isHide ? '展开' : '收起' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="filter-bottom">
+            <el-row :gutter="16">
+              <el-col :span="12" align="left">
+                <div class="result-count">
+                  共匹配到
+                  <span class="count">{{ '0' }}</span>
+                  个结果
+                </div>
+              </el-col>
+              <el-col :span="12" align="right">
+                <div class="do-set">
+                  <el-icon><Refresh /></el-icon>
+                  <span>重置</span>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+
+        <div class="land-reuslt-list">
+          <el-row class="land-item-warp" :gutter="24">
+            <template v-for="(land, indexl) in 11" :key="indexl">
+              <el-col :span="12">
+                <landItem></landItem>
+              </el-col>
+            </template>
+          </el-row>
+        </div>
       </template>
     </common>
   </div>
 </template>
 <script setup name="ecommerce">
 import common from './components/common.vue';
+import banner from './components/banner.vue';
+import typetop from './components/typetop.vue';
+import landItem from './components/landItem.vue';
+import { ref, reactive, onMounted, watch, computed } from 'vue';
+
+let LevelOne = reactive([
+  { id: '01', title: '耿马镇' },
+  { id: '02', title: '孟定镇' },
+  { id: '03', title: '孟永镇' },
+  { id: '04', title: '孟撒镇' },
+  { id: '05', title: '勐简乡' },
+  { id: '06', title: '大兴乡' },
+  { id: '07', title: '四排山乡' },
+  { id: '08', title: '贺派乡' },
+]);
+
+let landUse = reactive([
+  { id: '01', title: '耕地' },
+  { id: '02', title: '林地' },
+  { id: '03', title: '园地' },
+  { id: '04', title: '草地' },
+  { id: '05', title: '交通运输用地' },
+  { id: '06', title: '水域水利设施用地' },
+  { id: '07', title: '其他用地' },
+]);
+
+let landType = reactive([
+  { id: '01', title: '水田' },
+  { id: '02', title: '水浇地' },
+  { id: '03', title: '旱地' },
+]);
+
+let landProduct = reactive([
+  { id: '01', title: '水果坚果类' },
+  { id: '02', title: '蔬菜瓜果类' },
+  { id: '03', title: '粮食油料类' },
+  { id: '04', title: '养殖类' },
+  { id: '05', title: '其他' },
+]);
+
+let landCirculation = reactive([
+  { id: '01', title: '经营权出租' },
+  { id: '02', title: '经营权合作' },
+  { id: '03', title: '经营权入股' },
+  { id: '04', title: '经营权转让' },
+  { id: '05', title: '经营权互换' },
+  { id: '06', title: '经营权转包' },
+  { id: '07', title: '使用权出租' },
+  { id: '08', title: '使用权转让' },
+  { id: '09', title: '使用权入股' },
+  { id: '10', title: '使用权合作' },
+]);
+let radioList = reactive([
+  { value: '01', label: '电话核实' },
+  { value: '02', label: '现场核实' },
+  { value: '03', label: '现场视频' },
+  { value: '04', label: '官方发布' },
+  { value: '05', label: '金牌地源' },
+  { value: '06', label: '优质地源' },
+  { value: '07', label: '地区商家' },
+]);
+
+let areaRange = reactive([
+  { value: '0', label: '10亩以下' },
+  { value: '10', label: '10 ~ 100亩' },
+  { value: '100', label: '101 ~ 1000亩' },
+  { value: '1000', label: '1001 ~ 5000亩' },
+  { value: '5000', label: '5000亩以上' },
+]);
+
+let yearList = reactive([
+  { value: '0', label: '5年以下' },
+  { value: '5', label: '6 ~ 10年' },
+  { value: '10', label: '11 ~ 15年' },
+  { value: '15', label: '16 ~ 20年' },
+  { value: '20', label: '21 ~ 30年' },
+  { value: '30', label: '30年以上' },
+]);
+
+let lookType = reactive([
+  { value: 'reservation', babel: '可预约带看' },
+  { value: 'pay', babel: '单词付费带看' },
+  { value: 'bond', babel: '保证金带看' },
+]);
+
+let bannerList = reactive(['images/ecommerce/' + 'banner3.png', 'images/ecommerce/' + 'banner3.png']);
+let isHide = ref(false);
+let fliter = reactive({
+  area: null,
+  year: null,
+  lookType: null,
+  other: null,
+});
+
+let selectAll = reactive({});
+const doSelect = (data) => {
+  let { select, nameVal } = data;
+  selectAll[nameVal] = select;
+  console.info('doSelect', data);
+};
+
+let selectkeylist = computed(() => {
+  let list = Object.keys(selectAll);
+  return list;
+});
+
+let arearef = ref(null);
+let uesdref = ref(null);
+let typeref = ref(null);
+let productref = ref(null);
+let circulationref = ref(null);
+
+const refs = {
+  arearef,
+  uesdref,
+  typeref,
+  productref,
+  circulationref,
+};
+
+const handleClose = (name) => {
+  if (name) {
+    let refName = name + 'ref';
+    const componentRef = refs[refName];
+    console.info(' componentRef.value', componentRef.value);
+    componentRef.value && componentRef.value.clearSelect();
+    delete selectAll[name];
+  }
+};
+
+const doShowHide = () => {
+  isHide.value = !isHide.value;
+};
 </script>
+<style lang="scss" scoped>
+.land-index-warp {
+  width: 100%;
+  .land-filter-top {
+    width: 100%;
+    border-radius: 16px;
+    background: $color-fff;
+    padding: 16px;
+
+    .more-filter {
+      display: inline-flex;
+      justify-content: flex-start;
+      width: 100%;
+      .filter-r,
+      .more-title {
+        display: -webkit-inline-box;
+        vertical-align: top;
+      }
+      .more-title {
+        color: $color-999;
+        font-size: 20px;
+        width: 120px;
+        vertical-align: top;
+        font-weight: 500;
+        line-height: 40px;
+      }
+      .filter-r {
+      }
+    }
+
+    .select-result {
+      display: inline-flex;
+      justify-content: flex-start;
+      width: 100%;
+      text-align: left;
+      .title,
+      .result-list {
+        display: inline-block;
+        vertical-align: top;
+      }
+      .title {
+        display: -webkit-inline-box;
+        color: $color-999;
+        font-size: 20px;
+        width: 120px;
+        vertical-align: top;
+        font-weight: 500;
+        line-height: 40px;
+      }
+      .result-list {
+        width: calc(100% - 120px);
+        padding-right: 30px;
+        position: relative;
+        .result-item {
+          display: inline-block;
+          margin: 8px;
+        }
+        .show-hide {
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          cursor: pointer;
+          font-size: 16px;
+          .el-icon {
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+  .filter-bottom {
+    width: 100%;
+    text-align: center;
+    .result-count {
+      font-size: 18px;
+      color: $color-666;
+      .count {
+        color: $color-main;
+        padding: 0 2px;
+      }
+    }
+    .do-set {
+      font-size: 16px;
+      color: $color-666;
+      .el-icon {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .land-reuslt-list {
+    width: 100%;
+    margin-top: 24px;
+    .land-item-warp {
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="land-detail-warp">
+    <common current-name="land">
+      <template #main> </template>
+    </common>
+  </div>
+</template>
+<script setup name="ecommerce">
+import common from './components/common.vue';
+import { ref, reactive, onMounted, watch, computed } from 'vue';
+</script>
+<style lang="scss" scoped>
+.land-detail-warp {
+  width: 100%;
+  .land-filter-top {
+    width: 100%;
+    border-radius: 16px;
+    background: $color-fff;
+    padding: 16px;
+
+    .more-filter {
+      display: inline-flex;
+      justify-content: flex-start;
+      width: 100%;
+      .filter-r,
+      .more-title {
+        display: -webkit-inline-box;
+        vertical-align: top;
+      }
+      .more-title {
+        color: $color-999;
+        font-size: 20px;
+        width: 120px;
+        vertical-align: top;
+        font-weight: 500;
+        line-height: 40px;
+      }
+      .filter-r {
+      }
+    }
+
+    .select-result {
+      display: inline-flex;
+      justify-content: flex-start;
+      width: 100%;
+      text-align: left;
+      .title,
+      .result-list {
+        display: inline-block;
+        vertical-align: top;
+      }
+      .title {
+        display: -webkit-inline-box;
+        color: $color-999;
+        font-size: 20px;
+        width: 120px;
+        vertical-align: top;
+        font-weight: 500;
+        line-height: 40px;
+      }
+      .result-list {
+        width: calc(100% - 120px);
+        padding-right: 30px;
+        position: relative;
+        .result-item {
+          display: inline-block;
+          margin: 8px;
+        }
+        .show-hide {
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          cursor: pointer;
+          font-size: 16px;
+          .el-icon {
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+  .filter-bottom {
+    width: 100%;
+    text-align: center;
+    .result-count {
+      font-size: 18px;
+      color: $color-666;
+      .count {
+        color: $color-main;
+        padding: 0 2px;
+      }
+    }
+    .do-set {
+      font-size: 16px;
+      color: $color-666;
+      .el-icon {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .land-reuslt-list {
+    width: 100%;
+    margin-top: 24px;
+    .land-item-warp {
+    }
+  }
+}
+</style>

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

@@ -31,7 +31,7 @@
           </el-row>
           <el-row>
             <el-col :span="24">
-              <el-table :data="tableData" style="width: 100%" height="320">
+              <el-table :data="tableData" style="width: 100%" height="320" @row-click="rowClick">
                 <el-table-column prop="title" label="采购品种" />
                 <el-table-column prop="region" label="收货地" />
                 <el-table-column prop="buyer" label="采购方" />
@@ -39,7 +39,7 @@
                 <el-table-column prop="buyer" label="采购时间" />
                 <el-table-column fixed="right" label="操作">
                   <template #default>
-                    <el-button link type="primary" size="small" @click="handleClick"> 去报价 </el-button>
+                    <el-button link type="primary" size="small" @click.stop="handleClick"> 去报价 </el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -60,6 +60,9 @@ import marketCharts from './components/marketCharts.vue';
 import purchaserPopup from './components/purchaserPopup.vue';
 import { ref, reactive, onMounted, watch, computed } from 'vue';
 import { getRegion } from '@/apis/index';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
 
 let treeList = reactive([
   {
@@ -204,16 +207,20 @@ let filter = ref({
 });
 
 let tableData = reactive([
-  { title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
+  { id: '01', title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
-  { title: '白菜', region: '孟定镇', buyer: '星悦农业', buyNum: 6000, time: '2025-04-01 12:25:36' },
+  { id: '02', title: '白菜', region: '孟定镇', buyer: '星悦农业', buyNum: 6000, time: '2025-04-01 12:25:36' },
-  { title: '西蓝花', region: '孟勇镇', buyer: '盛源农业', buyNum: 7000, time: '2025-04-02 13:25:36' },
+  { id: '03', title: '西蓝花', region: '孟勇镇', buyer: '盛源农业', buyNum: 7000, time: '2025-04-02 13:25:36' },
-  { title: '鸡蛋', region: '勐简乡', buyer: '上好佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
+  { id: '04', title: '鸡蛋', region: '勐简乡', buyer: '上好佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
-  { title: '牛肉', region: '四排山乡', buyer: '尚嘉农业', buyNum: 5000, time: '2025-03-31 12:25:36' },
+  { id: '05', title: '牛肉', region: '四排山乡', buyer: '尚嘉农业', buyNum: 5000, time: '2025-03-31 12:25:36' },
-  { title: '氮肥', region: '大兴乡', buyer: '信誉农资', buyNum: 6000, time: '2025-04-02 12:25:36' },
+  { id: '06', title: '氮肥', region: '大兴乡', buyer: '信誉农资', buyNum: 6000, time: '2025-04-02 12:25:36' },
-  { title: '白菜种子', region: '贺派乡', buyer: '佳佳农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
+  { id: '07', title: '白菜种子', region: '贺派乡', buyer: '佳佳农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
-  { title: '西红柿种子', region: '勐撒镇', buyer: '佳佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
+  { id: '08', title: '西红柿种子', region: '勐撒镇', buyer: '佳佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
 ]);
 
+const rowClick = (data) => {
+  router.push('/sub-operation-service/purchaserDetail?id=' + data.id);
+};
+
 onMounted(() => {
   console.info('onMounted');
   getTree();

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

@@ -0,0 +1,484 @@
+<template>
+  <div class="purchaser-detail-warp">
+    <common current-name="purchaser">
+      <template #main>
+        <div class="purchaser-detail-top">
+          <div class="top-title">
+            <div class="father-title">采购商服务</div>
+            <div class="current-title">采购详情</div>
+          </div>
+          <div class="purchaser-info">
+            <el-row :gutter="16">
+              <el-col :span="16">
+                <div class="purchaser-info-l">
+                  <div class="img">
+                    <el-image :src="getAssetsFile('images/ecommerce/' + 'test01.png')" fit="cover" />
+                  </div>
+                  <div class="content">
+                    <div class="title-warp">
+                      <div class="txt txt-ellipsis clamp2">耿马县勐简乡飘云生态农业耿马县勐简乡飘云生态农业</div>
+                      <div class="icon-warp">
+                        <div class="iconfont icon-level"></div>
+                        <div class="iconfont icon-auth"></div>
+                      </div>
+                    </div>
+                    <div class="is-auth">
+                      <span>已实名认证</span>
+                    </div>
+                    <div class="settled-time">
+                      <span>入驻时间：37天</span>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="purchaser-info-r">
+                  <div class="addr">
+                    {{ '南省临沧市耿马傣族佤族自治县耿马县勐简乡' }}
+                    <div class="iconfont icon-location"></div>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="56" class="purchase-info-total">
+              <el-col :span="12">
+                <div class="info-total-item">
+                  <div class="label">采购品种：</div>
+                  <div class="val">西红柿</div>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="info-total-item">
+                  <div class="label">采购数量：</div>
+                  <div class="val">5000kg</div>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="info-total-item">
+                  <div class="label">期望货源地：</div>
+                  <div class="val">耿马县·贺派乡</div>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="info-total-item">
+                  <div class="label">浏览次数：</div>
+                  <div class="val">188次</div>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="info-total-item">
+                  <div class="label">期望货源地：</div>
+                  <div class="val">耿马县·贺派乡</div>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="info-total-item">
+                  <div class="label">更新时间：</div>
+                  <div class="val">2025.01.01 12:15:18</div>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row class="contant-wrap">
+              <el-col :span="24">
+                <div class="contant-btn">
+                  <div class="iconfont icon-bg-chat"></div>
+                  <span>在线联系</span>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+        <div class="hot-list-warp">
+          <div class="block-title">热门采购</div>
+          <el-row>
+            <el-col :span="24">
+              <el-table :data="tableData" style="width: 100%" height="320">
+                <el-table-column prop="title" label="采购品种" />
+                <el-table-column prop="region" label="收货地" />
+                <el-table-column prop="buyer" label="采购方" />
+                <el-table-column prop="buyNum" label="采购量(kg)" />
+                <el-table-column prop="buyer" label="采购时间" />
+                <el-table-column fixed="right" label="操作">
+                  <template #default>
+                    <el-button link type="primary" size="small" @click.stop="handleClick"> 去报价 </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+        </div>
+      </template>
+    </common>
+
+    <purchaserPopup ref="popupQuote" :list="treeList"></purchaserPopup>
+  </div>
+</template>
+<script setup name="ecommerce">
+import common from './components/common.vue';
+import purchaserPopup from './components/purchaserPopup.vue';
+import { ref, reactive, onMounted, watch, computed } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+
+let popupQuote = ref(null);
+let treeList = reactive([
+  {
+    id: '01',
+    title: '农产品',
+    children: [
+      {
+        pId: '01',
+        id: '0101',
+        title: '植物性农产品',
+        children: [
+          { pId: '0101', id: '010101', title: '谷物' },
+          { pId: '0101', id: '010102', title: '蔬菜' },
+          { pId: '0101', id: '010103', title: '水果' },
+          { pId: '0101', id: '010104', title: '坚果与油料作物' },
+          { pId: '0101', id: '010105', title: '糖料作物' },
+          { pId: '0101', id: '010106', title: '纤维作物' },
+          { pId: '0101', id: '010107', title: '茶叶' },
+          { pId: '0101', id: '010108', title: '咖啡' },
+          { pId: '0101', id: '010109', title: '香料' },
+        ],
+      },
+      {
+        pId: '01',
+        id: '0102',
+        title: '动物性农产品',
+        children: [
+          { pId: '0102', id: '010201', title: '肉类' },
+          { pId: '0102', id: '010202', title: '奶制品' },
+          { pId: '0102', id: '010203', title: '蛋类' },
+          { pId: '0102', id: '010204', title: '蜂蜜' },
+          { pId: '0102', id: '010205', title: '水产品' },
+        ],
+      },
+      {
+        pId: '01',
+        id: '0103',
+        title: '特殊农产品',
+        children: [
+          { pId: '0103', id: '010301', title: '花卉与苗木' },
+          { pId: '0103', id: '010302', title: '药材' },
+          { pId: '0103', id: '010303', title: '菌类' },
+        ],
+      },
+      {
+        pId: '01',
+        id: '0104',
+        title: '其他',
+        children: [{ pId: '0104', id: '010401', title: '饲料' }],
+      },
+    ],
+  },
+  {
+    id: '02',
+    title: '种子种苗',
+    children: [
+      {
+        pId: '02',
+        id: '0101',
+        title: '花卉种子种苗',
+        children: [
+          { pId: '0101', id: '010101', title: '草本花卉' },
+          { pId: '0101', id: '010102', title: '木本花卉' },
+          { pId: '0101', id: '010103', title: '野生花卉' },
+        ],
+      },
+      {
+        pId: '02',
+        id: '0102',
+        title: '蔬菜种子种苗',
+        children: [
+          { pId: '0102', id: '010201', title: '叶菜类' },
+          { pId: '0102', id: '010202', title: '根茎类' },
+          { pId: '0102', id: '010203', title: '果实类' },
+          { pId: '0102', id: '010204', title: '豆类' },
+          { pId: '0102', id: '010205', title: '瓜类' },
+        ],
+      },
+      {
+        pId: '02',
+        id: '0103',
+        title: '果树种苗',
+        children: [
+          { pId: '0103', id: '010301', title: '柑橘类' },
+          { pId: '0103', id: '010302', title: '仁果类' },
+          { pId: '0103', id: '010303', title: '核果类' },
+          { pId: '0103', id: '010304', title: '浆果类' },
+        ],
+      },
+      {
+        pId: '02',
+        id: '0104',
+        title: '药材种子与种苗',
+        children: [
+          { pId: '0104', id: '010401', title: '寒地龙药' },
+          { pId: '0104', id: '010402', title: '常见中药材' },
+        ],
+      },
+      {
+        pId: '02',
+        id: '0105',
+        title: '其他作物',
+        children: [
+          { pId: '0105', id: '010501', title: '牧草' },
+          { pId: '0105', id: '010502', title: '经济作物' },
+          { pId: '0105', id: '010503', title: '观赏树木' },
+        ],
+      },
+    ],
+  },
+]);
+
+let tableData = reactive([
+  { title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
+  { title: '白菜', region: '孟定镇', buyer: '星悦农业', buyNum: 6000, time: '2025-04-01 12:25:36' },
+  { title: '西蓝花', region: '孟勇镇', buyer: '盛源农业', buyNum: 7000, time: '2025-04-02 13:25:36' },
+  { title: '鸡蛋', region: '勐简乡', buyer: '上好佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
+  // { title: '牛肉', region: '四排山乡', buyer: '尚嘉农业', buyNum: 5000, time: '2025-03-31 12:25:36' },
+  // { title: '氮肥', region: '大兴乡', buyer: '信誉农资', buyNum: 6000, time: '2025-04-02 12:25:36' },
+  // { title: '白菜种子', region: '贺派乡', buyer: '佳佳农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
+  // { title: '西红柿种子', region: '勐撒镇', buyer: '佳佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
+]);
+
+const handleClick = () => {
+  popupQuote.value && popupQuote.value.doShow();
+};
+
+onMounted(() => {
+  console.info('onMounted');
+});
+</script>
+<style lang="scss" scoped>
+.purchaser-detail-warp {
+  width: 100%;
+  .block-title {
+    font-size: 20px;
+    font-weight: 700;
+    text-align: left;
+    padding: 8px 0;
+  }
+  .purchaser-detail-top {
+    width: 100%;
+    margin-bottom: 16px;
+    background: $color-fff;
+    border-radius: 16px;
+    overflow: hidden;
+    padding: 10px;
+    .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%);
+      }
+    }
+
+    .purchaser-info {
+      margin: 16px 0;
+      .purchaser-info-l {
+        display: inline-flex;
+        justify-content: flex-start;
+        width: 100%;
+        text-align: left;
+        .img,
+        .content {
+          display: inline-block;
+          vertical-align: top;
+        }
+        .img {
+          width: 160px;
+          height: 160px;
+          border-radius: 8px;
+          overflow: hidden;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .content {
+          width: calc(100% - 160px);
+          padding-left: 16px;
+          .title-warp {
+            width: 100%;
+            .txt,
+            .icon-warp {
+              vertical-align: top;
+            }
+            .txt {
+              width: calc(100% - 80px);
+              font-size: 24px;
+              font-weight: 500;
+            }
+            .icon-warp {
+              display: inline-block;
+
+              width: 80px;
+              .iconfont {
+                display: inline-block;
+                margin-top: 6px;
+                &.icon-level {
+                  font-size: 26px;
+                  color: $color-main;
+                }
+                &.icon-auth {
+                  font-size: 28px;
+                  color: $color-warning;
+                }
+              }
+            }
+          }
+          .is-auth {
+            width: 100%;
+            margin: 16px 0;
+            span {
+              background: $color-main-table-header;
+              border: 1px solid $color-main-border;
+              border-radius: 8px;
+              padding: 0 16px;
+              color: $color-main;
+              line-height: 32px;
+              height: 32px;
+              display: inline-block;
+              font-size: 16px;
+              font-weight: 400;
+            }
+          }
+          .settled-time {
+            width: 100%;
+            span {
+              font-size: 20px;
+              color: $color-999;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+      .purchaser-info-r {
+        .addr {
+          text-align: left;
+          width: 100%;
+          font-size: 18px;
+          font-weight: 500;
+          color: $color-666;
+          .iconfont {
+            display: inline-block;
+            font-size: 26px;
+          }
+        }
+      }
+
+      .purchase-info-total {
+        .info-total-item {
+          display: inline-flex;
+          width: 100%;
+          justify-content: space-between;
+          margin: 8px 0;
+          .label,
+          .val {
+            display: -webkit-inline-box;
+            vertical-align: top;
+          }
+          .label {
+            color: $color-999;
+            font-size: 18px;
+            max-width: 180px;
+          }
+          .val {
+            font-size: 20px;
+            max-width: calc(100% - 180px);
+            color: $color-666;
+            text-align: right;
+          }
+        }
+      }
+
+      .contant-wrap {
+        width: 100%;
+        text-align: center;
+        margin-top: 16px;
+        .contant-btn {
+          background: $color-main;
+          padding: 0 16px;
+          line-height: 48px;
+          height: 48px;
+          border-radius: 16px;
+          color: $color-fff;
+          display: inline-block;
+          .iconfont,
+          span {
+            display: inline-block;
+            vertical-align: middle;
+          }
+          .iconfont {
+            font-size: 26px;
+          }
+          span {
+            padding-left: 8px;
+            font-size: 20px;
+          }
+        }
+      }
+    }
+  }
+
+  .hot-list-warp {
+    background: $color-fff;
+    padding: 16px;
+    border-radius: 16px;
+    margin: 16px 0;
+
+    ::v-deep() {
+      thead {
+        border-radius: 16px;
+        overflow: hidden;
+      }
+      thead th {
+        background: $color-main-table-header;
+        color: $color-999 !important;
+        border: none !important;
+        padding: 16px 0;
+      }
+      thead th:first-child {
+        border-top-left-radius: 16px;
+        border-bottom-left-radius: 16px;
+      }
+      thead th:last-child {
+        border-top-right-radius: 16px;
+        border-bottom-right-radius: 16px;
+      }
+      table {
+        margin-top: 16px !important;
+      }
+      tbody td {
+        border: none !important;
+      }
+      .el-table__inner-wrapper::before {
+        display: none !important;
+      }
+    }
+  }
+}
+</style>