大托管

src/permission.js

@@ -143,6 +143,9 @@ const whiteList = [
   '/agriculturalTrusteeship/insuranceList',//保险列表
   '/agriculturalTrusteeship/insuranceProjectList',//保险产品列表
   '/agriculturalTrusteeship/insuranceProjectDetail',//保险产品详情
+  '/agriculturalTrusteeship/societyList',//社会化列表
+  '/agriculturalTrusteeship/societyProjectList',//社会化产品列表
+  '/agriculturalTrusteeship/societyProjectDetail',//社会化产品详情
 
 ]
 

src/router/index.js

@@ -4535,6 +4535,24 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/agriculturalTrusteeship/society/societyList'], resolve)
   },
+  {
+    path: '/agriculturalTrusteeship/societyProjectList',
+    name: 'agriculturalTrusteeshipSocietyProjectList',
+    meta: {
+      title: '社会化服务',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/society/societyProjectList'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/societyProjectDetail',
+    name: 'agriculturalTrusteeshipSocietyProjectDetail',
+    meta: {
+      title: '社会化服务',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/society/societyProjectDetail'], resolve)
+  },
 ];
 
 

src/views/agriculturalTrusteeship/society/societyList.vue

@@ -13,7 +13,7 @@
     <!--  内容开始  -->
     <div class="main">
       <van-tabs v-model="active" sticky animated>
-        <van-tab title="保险公司">
+        <van-tab title="服务组织">
           <div class="search">
             <img src="../../../../static/images/agriculturalTrusteeship/index/search_icon_01.png" />
             <input type="text" placeholder="输入需求进行搜索" />
@@ -25,8 +25,23 @@
             :finished="finished"
             finished-text="没有更多了"
           >
-            <div class="content" v-for="item in 10" :key="item" @click="$router.push({name:'agriculturalTrusteeshipInsuranceProjectList'})">
-              <p class="content_tt">张三李四合伙开公司有限公司</p>
+            <div class="content" v-for="item in 10" :key="item" @click="$router.push({name:'agriculturalTrusteeshipSocietyProjectList'})">
+
+              <div class="tt_box">
+                <p class="content_tt">张三李四合伙开公司有限公司</p>
+                <div class="tab_box">
+                  <div class="tab_left">
+                    <p>产品 <span>60</span></p>
+                    <p>订单 <span>2851</span></p>
+                  </div>
+                  <div class="tab_right">
+                    <p>渔业</p>
+                    <p>牧业</p>
+                    <p>农业</p>
+                  </div>
+                </div>
+              </div>
+
               <div class="content_con">
                 <div class="content_con_left">
                   <p>60个产品</p>
@@ -43,31 +58,68 @@
           </van-list>
 
         </van-tab>
-        <van-tab title="保险产品">
+        <van-tab title="服务项目">
           <div class="search">
             <img src="../../../../static/images/agriculturalTrusteeship/index/search_icon_01.png" />
             <input type="text" placeholder="输入需求进行搜索" />
             <img src="../../../../static/images/agriculturalTrusteeship/index/search_icon_02.png" />
           </div>
 
-          <van-list
-            v-model="loading"
-            :finished="finished"
-            finished-text="没有更多了"
-          >
-            <!--            @load="onLoad"-->
-            <div class="main_content_right_list" v-for="item in 10" :key="item">
-              <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
-              <div class="main_content_right_list_content">
-                <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
-<!--                <div class="tab">-->
-<!--                  <p>￥<span>66</span>.00/亩</p>-->
-<!--                  <p><span>销 600</span><span>分 4.7</span></p>-->
-<!--                </div>-->
-                <p class="name">张三社会服务旗舰店</p>
+          <div class="main_content">
+            <div class="main_content_left">
+              <van-sidebar v-model="activeKey">
+                <van-sidebar-item title="全套服务" />
+                <van-sidebar-item title="开垦" />
+                <van-sidebar-item title="除草" />
+                <van-sidebar-item title="播种" />
+                <van-sidebar-item title="灌溉" />
+                <van-sidebar-item title="开垦" />
+                <van-sidebar-item title="除草" />
+                <van-sidebar-item title="播种" />
+                <van-sidebar-item title="灌溉" />
+                <van-sidebar-item title="开垦" />
+                <van-sidebar-item title="除草" />
+                <van-sidebar-item title="播种" />
+                <van-sidebar-item title="灌溉" />
+              </van-sidebar>
+            </div>
+            <div class="main_content_right">
+              <div class="main_content_right_header">
+                <p class="main_content_right_header_tit">灌溉</p>
+<!--                <van-tabs v-model="active" animated>-->
+<!--                  <van-tab title="评分排序"></van-tab>-->
+<!--                  <van-tab title="销量排序"></van-tab>-->
+<!--                </van-tabs>-->
               </div>
+              <div class="main_content_right_nav">
+                <p>服务</p>
+                <p>服务</p>
+                <p>服务</p>
+                <p>服务</p>
+                <p>服务</p>
+              </div>
+
+              <van-list
+                v-model="loading"
+                :finished="finished"
+                finished-text="没有更多了"
+              >
+                <!--            @load="onLoad"-->
+                <div class="main_content_right_list" v-for="item in 10" :key="item">
+                  <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+                  <div class="main_content_right_list_content">
+                    <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+                    <div class="tab">
+                      <p>￥<span>66</span>.00/亩</p>
+                      <p><span>销 600</span><span>分 4.7</span></p>
+                    </div>
+                    <p class="name">张三社会服务旗舰店</p>
+                  </div>
+                </div>
+              </van-list>
+
             </div>
-          </van-list>
+          </div>
 
         </van-tab>
       </van-tabs>
@@ -167,6 +219,42 @@
       padding: 1.5vh 4%;
       .content_tt{
         font-size: .35rem;
+        margin-bottom: 1vh;
+      }
+      .tt_box{
+        border-bottom: 1PX solid #D1D8EB;
+        padding-bottom: 1.5vh;
+        .tab_box{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .tab_left{
+            display: flex;
+            p{
+              &:nth-child(1){
+                border-right: 1px solid;
+                padding-right: 8PX;
+                margin-right: 8PX;
+              }
+              span{
+                color: #2B7EEC;
+              }
+              line-height: 1;
+            }
+
+          }
+          .tab_right{
+            display: flex;
+            p{
+              background: #F3F6FE;
+              padding: 5PX 10PX;
+              color: #497CE8;
+              line-height: 1;
+              border-radius: 5PX;
+              margin-left: 10PX;
+            }
+          }
+        }
       }
       .content_con{
         display: flex;
@@ -207,6 +295,106 @@
         }
       }
     }
+    .main_content{
+      display: flex;
+      width: 96%;
+      margin-top: 2vh;
+      height: 79.7vh;
+      overflow: hidden;
+      .van-sidebar-item{
+        text-align: center;
+      }
+      /deep/ .van-sidebar-item--select::before{
+        display: none;
+      }
+      .main_content_left{
+        border-top-right-radius: 15PX;
+        height: 100%;
+        overflow-y: scroll;
+      }
+      .main_content_right{
+        flex: 1;
+        padding-left: 4%;
+        height: 100%;
+        overflow-y: scroll;
+        .main_content_right_header{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .main_content_right_header_tit{
+            font-size: .4rem;
+            color: #1A1D4A;
+          }
+        }
+        .main_content_right_nav{
+          display: flex;
+          justify-content: space-between;
+          margin-top: 2vh;
+          p{
+            padding: 5PX 10PX;
+            background: #F5F5F5;
+            color: #8F8F8F;
+            border-radius: 4PX;
+          }
+        }
+        .main_content_right_list{
+          display: flex;
+          margin-top: 2vh;
+          width: 100%;
+          img{
+            border-radius: 15PX;
+            margin-right: 4%;
+            width: auto;
+          }
+          .main_content_right_list_content{
+            display: flex;
+            flex-direction:column;
+            justify-content: space-between;
+            .tt{
+              color: #333333;
+              font-size: .35rem;
+            }
+            .tab{
+              display: flex;
+              justify-content: space-between;
+              p{
+                &:nth-child(1){
+                  flex: 1;
+                  color: #FF5E00;
+                  span{
+                    font-size: .4rem;
+                  }
+                }
+                &:nth-child(2){
+                  flex: 1;
+                  span{
+                    width: 50%;
+                    display: inline-block;
+                    text-align: center;
+                    padding: 2PX 2PX;
+                    &:nth-child(1){
+                      color: #497CE8;
+                      background: #E2E9FD;
+                      border-top-left-radius: 10PX;
+                    }
+                    &:nth-child(2){
+                      color: #ffffff;
+                      background-image: linear-gradient(to right , #5D87FA , #5FD5F5);
+                      border-bottom-right-radius: 10PX;
+                    }
+                  }
+                }
+              }
+            }
+            .name{
+              color: #8F8F8F;
+              background: url("../../../../static/images/agriculturalTrusteeship/index/name_icon.png") no-repeat left center;
+              padding-left: 14PX;
+            }
+          }
+        }
+      }
+    }
     .main_content_right_list{
       display: flex;
       margin: 0 auto;

src/views/agriculturalTrusteeship/society/societyProjectDetail.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <div class="header_left" @click="onClickLeft">
+        <img src="../../../../static/images/agriculturalTrusteeship/return.png">
+      </div>
+      <div class="header_right" @click="onClickLeft">
+        <img src="../../../../static/images/agriculturalTrusteeship/share.png">
+      </div>
+    </div>
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item><img src="../../../../static/images/agriculturalTrusteeship/test3.png"></van-swipe-item>
+        <van-swipe-item><img src="../../../../static/images/agriculturalTrusteeship/test3.png"></van-swipe-item>
+        <van-swipe-item><img src="../../../../static/images/agriculturalTrusteeship/test3.png"></van-swipe-item>
+        <van-swipe-item><img src="../../../../static/images/agriculturalTrusteeship/test3.png"></van-swipe-item>
+      </van-swipe>
+
+      <div class="main_content">
+        <div class="tab">
+          <p>￥<span>66</span>.00/亩</p>
+          <p><span>销 600</span><span>分 4.7</span></p>
+        </div>
+        <p class="tt">农业保险玉米保险30/亩小麦50/亩大豆60/亩</p>
+        <p class="name">张三社会服务旗舰店</p>
+      </div>
+
+      <div class="main_box">
+        <van-cell title="产品类型" :border="false" value="内容" />
+        <van-cell title="产品规格" :border="false" value="内容" />
+        <van-cell title="产品数量" :border="false" value="内容" />
+        <van-cell title="服务区域" :border="false" value="内容" />
+        <van-cell title="产品简介" :border="false" value="内容" />
+        <van-cell title="公司地址" :border="false" value="内容" />
+      </div>
+
+      <div class="main_box">
+        <van-cell title="联系人" :border="false" value="内容" />
+        <van-cell title="联系方式" :border="false" value="内容" />
+      </div>
+
+      <div class="main_box" style="padding: 0;">
+        <baidu-map :center="center" panBy="[50,50]" :zoom="zoom" :scroll-wheel-zoom="true" :pinch-to-zoom="true" map-type="BMAP_NORMAL_MAP" style="height:25vh" >
+          <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
+          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
+          <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: '../../../../static/images/lawEnforcement/new/address.gif', size: {width: 50, height: 50}}"></bm-marker>
+        </baidu-map>
+      </div>
+    </div>
+    <!--  内容结束  -->
+
+    <!--  底部提交按钮  -->
+    <div class="footer">
+      <p>温馨提示：下单前请先与商家沟通联系</p>
+      <img src="../../../../static/images/agriculturalTrusteeship/insurance/submit_shop_btn.png">
+    </div>
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "agriculturalTrusteeshipInsuranceDetail",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
+        zoom: 15, //地图展示级别
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  padding-bottom: 15vh;
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 2vh;
+    position: absolute;
+    top: 0;
+    z-index: 99999999;
+    width: 100%;
+    .header_left{
+      display: flex;
+      align-items: center;
+      p{
+        font-size: .4rem;
+        color: #ffffff;
+        line-height: 1;
+        margin-left: 10PX;
+      }
+    }
+    .header_right{
+
+    }
+  }
+
+  /* 内容 */
+  .main{
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+    }
+    .main_content{
+      background: #ffffff;
+      padding: 2vh 4%;
+      width: 92%;
+      margin: 0 auto;
+      border-radius: 10PX;
+      margin-top: 2vh;
+      box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+      .tt{
+        font-size: .4rem;
+        margin-bottom: 10PX;
+      }
+      .name{
+        color: #4E7FFF;
+        background: url("../../../../static/images/agriculturalTrusteeship/index/name_icon.png") no-repeat left center;
+        padding-left: 18PX;
+      }
+      .tab{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10PX;
+        p{
+          &:nth-child(1){
+            flex: 1;
+            color: #FF5E00;
+            span{
+              font-size: .45rem;
+            }
+          }
+          &:nth-child(2){
+            span{
+              display: inline-block;
+              text-align: center;
+              padding: 2PX 10PX;
+              &:nth-child(1){
+                color: #497CE8;
+                background: #E2E9FD;
+                border-top-left-radius: 10PX;
+              }
+              &:nth-child(2){
+                color: #ffffff;
+                background-image: linear-gradient(to right , #5D87FA , #5FD5F5);
+                border-bottom-right-radius: 10PX;
+              }
+            }
+          }
+        }
+      }
+    }
+    .main_box{
+      width: 92%;
+      margin: 0 auto;
+      margin-top: 2vh;
+      border-radius: 10PX;
+      box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+      overflow: hidden;
+      background-color: #FFF;
+      padding: 2vh 4%;
+      /deep/ .van-cell{
+        padding: 0;
+        margin-bottom: 10PX;
+        &:last-child{
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .footer{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #ffffff;
+    position: fixed;
+    bottom: 0;
+    padding: 1vh 4%;
+    width: 100%;
+    p{
+      color: #989898;
+      background: #F2F2F2;
+      padding: 5PX 10PX;
+      text-align: center;
+      border-radius: 8PX;
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/society/societyProjectList.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <div class="header_left" @click="onClickLeft">
+        <img src="../../../../static/images/agriculturalTrusteeship/return.png">
+        <p>张三服务合作社</p>
+      </div>
+    </div>
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+      <div class="search">
+        <img src="../../../../static/images/agriculturalTrusteeship/index/search_icon_01.png" />
+        <input type="text" placeholder="输入需求进行搜索" />
+        <img src="../../../../static/images/agriculturalTrusteeship/index/search_icon_02.png" />
+      </div>
+
+      <div class="main_content">
+        <div class="main_content_left">
+          <van-sidebar v-model="activeKey">
+            <van-sidebar-item title="全套服务" />
+            <van-sidebar-item title="开垦" />
+            <van-sidebar-item title="除草" />
+            <van-sidebar-item title="播种" />
+            <van-sidebar-item title="灌溉" />
+            <van-sidebar-item title="开垦" />
+            <van-sidebar-item title="除草" />
+            <van-sidebar-item title="播种" />
+            <van-sidebar-item title="灌溉" />
+            <van-sidebar-item title="开垦" />
+            <van-sidebar-item title="除草" />
+            <van-sidebar-item title="播种" />
+            <van-sidebar-item title="灌溉" />
+          </van-sidebar>
+        </div>
+        <div class="main_content_right">
+          <div class="main_content_right_header">
+            <p class="main_content_right_header_tit">灌溉</p>
+            <van-tabs v-model="active" animated>
+              <van-tab title="评分排序"></van-tab>
+              <van-tab title="销量排序"></van-tab>
+            </van-tabs>
+          </div>
+          <div class="main_content_right_nav">
+            <p>服务</p>
+            <p>服务</p>
+            <p>服务</p>
+            <p>服务</p>
+            <p>服务</p>
+          </div>
+
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+          >
+            <!--            @load="onLoad"-->
+            <div class="main_content_right_list" v-for="item in 10" :key="item" @click="$router.push({name:'agriculturalTrusteeshipSocietyProjectDetail'})">
+              <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+              <div class="main_content_right_list_content">
+                <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+                <div class="tab">
+                  <p>￥<span>66</span>.00/亩</p>
+                  <p><span>销 600</span><span>分 4.7</span></p>
+                </div>
+<!--                <p class="name">张三社会服务旗舰店</p>-->
+              </div>
+            </div>
+          </van-list>
+
+        </div>
+      </div>
+    </div>
+    <!--  内容结束  -->
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "agriculturalTrusteeshipInsuranceList",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: url("../../../../static/images/agriculturalTrusteeship/insurance/society_list_head.png") no-repeat;
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 2vh;
+    .header_left{
+      display: flex;
+      align-items: center;
+      p{
+        font-size: .4rem;
+        color: #ffffff;
+        line-height: 1;
+        margin-left: 10PX;
+      }
+    }
+    .header_right{
+      font-size: .35rem;
+      background: #ffffff url("../../../../static/images/agriculturalTrusteeship/address.png") no-repeat 10PX center;
+      padding: 2PX 15PX 2PX 25PX;
+      border-radius: 50PX;
+    }
+  }
+
+  /* 内容 */
+  .main{
+    background: #ffffff;
+    padding-top: 2vh;
+    border-top-left-radius: 25PX;
+    border-top-right-radius: 25PX;
+
+    .search{
+       display: flex;
+       justify-content: space-between;
+       align-items: center;
+       width: 92%;
+       margin: 0PX auto;
+       border: 1px solid #6E93F3;
+       padding: 1PX 1PX 1PX 12PX ;
+       border-radius: 50PX;
+       input{
+         flex: 1;
+         background: transparent;
+         margin-left: 10PX;
+       }
+    }
+    /deep/ .van-tabs--line .van-tabs__wrap{
+      border-radius: 100rem;
+      height: 25PX;
+    }
+    /deep/ .van-tab{
+      z-index: 1;
+      color: #8F8F8F;
+      padding: 5PX 10PX;
+    }
+    /deep/ .van-tab--active{
+      color: #334281;
+    }
+    /deep/ .van-tabs__nav{
+      background: #ECECEC;
+    }
+    /deep/ .van-tabs__nav--line{
+      padding: 0;
+    }
+    /deep/ .van-tabs__line{
+      background: #D6D9E6;
+      border-radius: 100rem;
+      z-index: 0;
+      width: 50%;
+      height: 100%;
+      bottom: 0;
+    }
+    .main_content{
+      display: flex;
+      width: 96%;
+      margin-top: 2vh;
+      height: 85.5vh;
+      overflow: hidden;
+      .van-sidebar-item{
+        text-align: center;
+      }
+      /deep/ .van-sidebar-item--select::before{
+        display: none;
+      }
+      .main_content_left{
+        border-top-right-radius: 15PX;
+        height: 100%;
+        overflow-y: scroll;
+      }
+      .main_content_right{
+        flex: 1;
+        padding-left: 4%;
+        height: 100%;
+        overflow-y: scroll;
+        .main_content_right_header{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .main_content_right_header_tit{
+            font-size: .4rem;
+            color: #1A1D4A;
+          }
+        }
+        .main_content_right_nav{
+          display: flex;
+          justify-content: space-between;
+          margin-top: 2vh;
+          p{
+            padding: 5PX 10PX;
+            background: #F5F5F5;
+            color: #8F8F8F;
+            border-radius: 4PX;
+          }
+        }
+        .main_content_right_list{
+          display: flex;
+          margin-top: 2vh;
+          img{
+            border-radius: 15PX;
+            margin-right: 4%;
+            height: 8vh;
+          }
+          .main_content_right_list_content{
+            display: flex;
+            flex-direction:column;
+            justify-content: space-between;
+            .tt{
+              color: #333333;
+              font-size: .35rem;
+            }
+            .tab{
+              display: flex;
+              justify-content: space-between;
+              p{
+                &:nth-child(1){
+                  flex: 1;
+                  color: #FF5E00;
+                  span{
+                    font-size: .4rem;
+                  }
+                }
+                &:nth-child(2){
+                  flex: 1;
+                  span{
+                    width: 50%;
+                    display: inline-block;
+                    text-align: center;
+                    padding: 2PX 2PX;
+                    &:nth-child(1){
+                      color: #497CE8;
+                      background: #E2E9FD;
+                      border-top-left-radius: 10PX;
+                    }
+                    &:nth-child(2){
+                      color: #ffffff;
+                      background-image: linear-gradient(to right , #5D87FA , #5FD5F5);
+                      border-bottom-right-radius: 10PX;
+                    }
+                  }
+                }
+              }
+            }
+            .name{
+              color: #8F8F8F;
+              background: url("../../../../static/images/agriculturalTrusteeship/index/name_icon.png") no-repeat left center;
+              padding-left: 14PX;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/lawEnforcement/retrospect/retrospectDetail.vue

@@ -133,7 +133,8 @@
 
     width: 100%;
 
-    height: calc(100vh - 269PX);
+    height: 68vh;
+  /*calc(100vh - 269PX);*/
 
     background: #eee;