大托管

src/permission.js

@@ -170,6 +170,9 @@ const whiteList = [
   '/agriculturalTrusteeship/societyProjectList',//社会化产品列表
   '/agriculturalTrusteeship/societyProjectDetail',//社会化产品详情
   '/agriculturalTrusteeship/shopList',//保险列表首页
+  '/agriculturalTrusteeship/shopNeedsList',//保险列表首页
+  '/agriculturalTrusteeship/shopOrganizationDetail',//保险列表首页
+  '/agriculturalTrusteeship/shopDepositDetail',//保险列表首页
   '/agriculturalTrusteeship/shopDetail',//保险列表详情
   '/agriculturalTrusteeship/shopEdit',//保险列表详情
   '/agriculturalTrusteeship/shopAdd',//保险列表首页

src/router/index.js

@@ -5137,6 +5137,33 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/agriculturalTrusteeship/shop/shopList'], resolve)
   },
+  {
+    path: '/agriculturalTrusteeship/shopNeedsList',
+    name: 'agriculturalTrusteeshipShopNeedsList',
+    meta: {
+      title: '贷款需求',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/shop/shopNeedsList'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/shopOrganizationDetail',
+    name: 'agriculturalTrusteeshipShopOrganizationDetail',
+    meta: {
+      title: '服务组织',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/shop/shopOrganizationDetail'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/shopDepositDetail',
+    name: 'agriculturalTrusteeshipShopDepositDetail',
+    meta: {
+      title: '托管主体',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/shop/shopDepositDetail'], resolve)
+  },
   {
     path: '/agriculturalTrusteeship/serviceEdit',
     name: 'agriculturalTrusteeshipServiceEdit',

src/views/agriculturalTrusteeship/shop/shopDepositDetail.vue

@@ -0,0 +1,394 @@
+<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="main_content_right_list">
+        <div class="main_tit">
+          <i></i>
+          <p>家家加加加加加加加就爱简爱家合作社</p>
+        </div>
+        <p class="main_content">村口需要水牛石头诚招水牛贷款联系电话165822本人人品优良绝不拖欠还款。</p>
+        <div class="main_money">
+          <p><span>需求金额</span><span>￥</span>512,000.00</p>
+        </div>
+        <van-divider />
+
+        <van-field
+          readonly
+          label="负责人"
+          input-align="right"
+          :border="false"
+          placeholder="负责人"
+        />
+
+        <van-field
+          readonly
+          label="联系方式"
+          input-align="right"
+          :border="false"
+          placeholder="联系方式"
+        />
+
+        <van-field
+          readonly
+          label="地址"
+          input-align="right"
+          :border="false"
+          placeholder="地址"
+        />
+
+      </div>
+      <div class="main_content_right_list2">
+        <div>
+          <p>托管农户数（户）</p>
+          <p>366</p>
+        </div>
+        <div>
+          <p>托管面积（亩）</p>
+          <p>366</p>
+        </div>
+      </div>
+    </div>
+    <!--  内容结束  -->
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import {productList, productOut, productIn, serviceGet, treeselect} from "@/api/agriculturalTrusteeship";
+  export default {
+    name: "shopOrganizationDetail",
+    data() {
+      return {
+
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #f9f9f9;
+  height: 100vh;
+  overflow: hidden;
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    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: #334281;
+      padding: 2PX 10PX;
+      border-radius: 50PX;
+      /deep/ .van-checkbox__icon--checked .van-icon{
+        color: #334281;
+      }
+      /deep/ .van-checkbox__label{
+        color: #ffffff;
+      }
+      /deep/ .van-checkbox__icon .van-icon{
+        width: .9em;
+        height: .9em;
+        line-height: .9em;
+      }
+      /deep/ .van-icon-success::before{
+        width: .9em;
+        height: .9em;
+      }
+      /deep/ .van-checkbox__icon{
+        height: auto;
+      }
+    }
+  }
+
+  .main_btn{
+    display: flex;
+    background: #ffffff;
+    border-top-left-radius: 25PX;
+    border-top-right-radius: 25PX;
+    overflow: hidden;
+    padding: 4vw 4% 0;
+    justify-content: space-between;
+    .btn_box_01{
+      width: 48%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1Px dashed #4E7FFF;
+      color: #4E7FFF;
+      font-size: .35rem;
+      line-height: 15vw;
+      border-radius: 10Px;
+      p:first-child{
+        font-weight: bold;
+        margin-right: 5PX;
+      }
+    }
+    .btn_box_02{
+      width: 48%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(78,127,255,0.17);
+      color: #1E49BB;
+      font-size: .35rem;
+      line-height: 15vw;
+      border-radius: 10Px;
+      p{
+        margin-left: 5PX;
+      }
+    }
+  }
+
+  .serviceName{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    span{
+      background: #E8E8E8;
+      padding: 0 8PX;
+      border-radius: 5PX;
+      color: #7A7A7A;
+      margin-right: 5PX;
+    }
+    .active{
+      background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+      color: #ffffff;
+    }
+  }
+
+  .nav{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    padding-bottom: 15PX;
+    .tt{
+      font-size: .45rem;
+      color: #334281;
+    }
+    .content{
+      background: #ffffff;
+      width: 92%;
+      margin: 0 auto;
+      box-shadow: 0px 0px 10PX rgba(0,0,0,0.1);
+      border-radius: 25PX;
+      padding: 1.5vh 4%;
+    }
+    /deep/ .van-cell{
+      padding: 0;
+      margin-bottom: 10PX;
+      &:last-child{
+        margin: 0;
+      }
+    }
+  }
+
+  /* 内容 */
+  .main{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    background-size: 100% 20PX;
+    background-repeat: no-repeat;
+    /deep/ .van-tabs__nav{
+      border-top-left-radius: 25PX;
+      border-top-right-radius: 25PX;
+      overflow: hidden;
+      background: #f9f9f9;
+    }
+    /deep/ .van-tabs__line{
+      background: #334281!important;
+    }
+    /deep/ .van-tab--active{
+      color: #334281;
+    }
+    /deep/ .van-tabs__content{
+      background: #f9f9f9;
+      padding-top: 2vh;
+    }
+    .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;
+       }
+    }
+    .content{
+      width: 92%;
+      margin: 0 auto;
+      margin-top: 2vh;
+      .content_tt{
+        font-size: .35rem;
+      }
+      .content_con{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1.5vh;
+        .content_con_left{
+          display: flex;
+          flex-direction:column;
+          justify-content: space-between;
+          p{
+            font-size: .35rem;
+            padding-left: 18PX;
+            &:nth-child(1){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_project.png") no-repeat left center;
+            }
+            &:nth-child(2){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_name.png") no-repeat left center;
+            }
+            &:nth-child(3){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_iphone.png") no-repeat left center;
+            }
+          }
+        }
+        .content_con_right{
+          display: flex;
+          justify-content: end;
+          align-items: center;
+          img{
+            border-radius: 10PX;
+            width: 40%;
+            margin-left: 5%;
+            box-shadow: 0px 5PX 10PX rgba(0,0,0,0.2);
+            &:last-child{
+              width: auto;
+              box-shadow: none;
+            }
+          }
+        }
+      }
+    }
+    .main_content_right_list{
+      margin: 0 auto;
+      margin-bottom: 2vh;
+      width: 92%;
+      background: #ffffff;
+      padding: 15PX 3%;
+      border-radius: 10Px;
+      box-shadow: 0px 5PX 10PX rgba(0,0,0,0.1);
+      text-align: center;
+      /deep/ .van-cell{
+        padding: 0;
+        margin-bottom: 10PX;
+        &:last-child{
+          margin: 0;
+        }
+      }
+      .main_content{
+        font-size: .35rem;
+        line-height: .7rem;
+        margin-top: 10PX;
+        text-align: left;
+      }
+      .main_tit{
+        color: #4E7FFF;
+        font-size: .38rem;
+        display: flex;
+        align-items: center;
+        i{
+          display: block;
+          width: 16PX;
+          height: 16PX;
+          margin-right: 5PX;
+          flex-shrink: 0;
+          background: url("../../../../static/images/agriculturalTrusteeship/insurance/shop_needs_icon01.png");
+        }
+        p{
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          word-break: break-all;
+          overflow: hidden;
+        }
+        span{
+          font-size: .3rem;
+          color: #8B8B8B;
+          flex-shrink: 0;
+        }
+      }
+      .main_money{
+        background: rgba(255,94,0,0.15);
+        display: inline-block;
+        padding: 5PX 15PX;
+        border-radius: 8PX;
+        margin: 10PX auto;
+        p{
+          &:nth-child(1){
+            color: #FF5E00;
+            font-size: .4rem;
+            span{
+              font-size: .3rem;
+            }
+          }
+          &:nth-child(2){
+            color: #8B8B8B;
+            font-size: .35rem;
+          }
+        }
+        span:nth-child(1){
+          margin-right: 5PX;
+        }
+      }
+    }
+    .main_content_right_list2{
+      margin: 0 auto;
+      margin-bottom: 2vh;
+      width: 92%;
+      display: flex;
+      justify-content: space-between;
+      div{
+        box-shadow: 0px 5PX 10PX rgba(0,0,0,0.1);
+        width: 48%;
+        background: #ffffff;
+        text-align: center;
+        padding: 10PX 0;
+        border-radius: 10Px;
+        p{
+          &:nth-child(1){
+            font-size: .38rem;
+            color: #8B8B8B;
+          }
+          &:nth-child(2){
+            font-size: .4rem;
+            color: #4E7FFF;
+            margin-top: 10PX;
+          }
+        }
+      }
+
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/shop/shopList.vue

@@ -75,11 +75,31 @@
 
     <!--  内容开始  -->
     <div class="main">
-      <van-tabs v-model="active" sticky animated>
-        <van-tab title="服务中">
 
-          <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_add.png" style="margin: 0 auto;display: block;width: 94%;" @click="$router.push({name:'agriculturalTrusteeshipShopAdd'})">
+      <div class="main_btn" v-if="serviceForm.financialType == '1'">
+        <div class="btn_box_01" @click="$router.push({name:'agriculturalTrusteeshipShopAdd'})">
+          <p>+</p>
+          <p>发布新产品</p>
+        </div>
+        <div class="btn_box_02" @click="$router.push({name:'agriculturalTrusteeshipShopNeedsList'})">
+          <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_see2.png" alt="">
+          <p>查看贷款需求</p>
+        </div>
+<!--        <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_add2.png" style="margin: 0 auto;display: block;" @click="$router.push({name:'agriculturalTrusteeshipShopAdd'})">-->
+<!--        <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_see.png" style="margin: 0 auto;display: block;" @click="$router.push({name:'agriculturalTrusteeshipShopAdd'})">-->
+      </div>
+
+      <div class="main_btn" v-else>
+        <div class="btn_box_01" style="width: 100%;" @click="$router.push({name:'agriculturalTrusteeshipShopAdd'})">
+          <p>+</p>
+          <p>发布新产品</p>
+        </div>
+      </div>
+
+
 
+      <van-tabs v-model="active" sticky animated>
+        <van-tab title="服务中">
           <van-list
             v-model="loading"
             :finished="finished"
@@ -139,6 +159,7 @@
 <script>
   import Cookies from "js-cookie";
   import {productList, productOut, productIn, serviceGet, treeselect} from "@/api/agriculturalTrusteeship";
+  import {Dialog} from "vant";
   export default {
     name: "agriculturalTrusteeshipShopList",
     data() {
@@ -178,7 +199,19 @@
     methods: {
       getDetail(){
         serviceGet(Cookies.get('ACCESS-SESSION-ID')).then(response => {
-          this.serviceForm = response.data;
+          if (response.code == 200){
+            this.serviceForm = response.data;
+          }else{
+            Dialog.confirm({
+              title: '系统提示',
+              message: '登录状态已过期，请重新登录',
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消'
+            }).then(() => {
+              window.location.href = '/agriculturalTrusteeship/login';
+            });
+          }
+
         });
       },
       getList(){
@@ -260,6 +293,45 @@
     }
   }
 
+  .main_btn{
+    display: flex;
+    background: #ffffff;
+    border-top-left-radius: 25PX;
+    border-top-right-radius: 25PX;
+    overflow: hidden;
+    padding: 4vw 4% 0;
+    justify-content: space-between;
+    .btn_box_01{
+      width: 48%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1Px dashed #4E7FFF;
+      color: #4E7FFF;
+      font-size: .35rem;
+      line-height: 15vw;
+      border-radius: 10Px;
+      p:first-child{
+        font-weight: bold;
+        margin-right: 5PX;
+      }
+    }
+    .btn_box_02{
+      width: 48%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(78,127,255,0.17);
+      color: #1E49BB;
+      font-size: .35rem;
+      line-height: 15vw;
+      border-radius: 10Px;
+      p{
+        margin-left: 5PX;
+      }
+    }
+  }
+
   .serviceName{
     display: flex;
     align-items: center;
@@ -305,9 +377,9 @@
   .main{
     background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
     /deep/ .van-tabs__nav{
-      border-top-left-radius: 25PX;
-      border-top-right-radius: 25PX;
-      overflow: hidden;
+      /*border-top-left-radius: 25PX;*/
+      /*border-top-right-radius: 25PX;*/
+      /*overflow: hidden;*/
     }
     /deep/ .van-tabs__line{
       background: #334281!important;

src/views/agriculturalTrusteeship/shop/shopNeedsList.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <div class="header_left" @click="onClickLeft">
+        <img src="../../../../static/images/agriculturalTrusteeship/return.png">
+        <p>贷款需求</p>
+      </div>
+      <p class="header_right">
+        <van-checkbox v-model="checked" checked-color="#ffffff">只显示有资金需求</van-checkbox>
+      </p>
+    </div>
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+      <van-tabs v-model="active" sticky animated>
+        <van-tab title="服务组织（312）">
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+          >
+            <!--    @load="getList"        @load="onLoad"-->
+            <div class="main_content_right_list" v-for="(item,index) in 5" :key="index" @click="$router.push({name:'agriculturalTrusteeshipShopOrganizationDetail'})">
+              <div class="main_tit">
+                <i></i>
+                <p>家家加加加加加加加就爱简爱家合作社</p>
+              </div>
+              <div class="main_money">
+                <p><span>￥</span>512,000.00</p>
+                <p>查看详情 ></p>
+              </div>
+            </div>
+          </van-list>
+
+        </van-tab>
+        <van-tab title="托管主体（201）">
+
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+          >
+            <!--       @load="getList"     @load="onLoad"-->
+            <div class="main_content_right_list" v-for="(item,index) in 5" :key="index" @click="$router.push({name:'agriculturalTrusteeshipShopDepositDetail'})">
+              <div class="main_tit">
+                <i></i>
+                <p>家家加加加加加加加就爱简爱家合作社</p>
+              </div>
+              <div class="main_money">
+                <p><span>￥</span>512,000.00</p>
+                <p>查看详情 ></p>
+              </div>
+            </div>
+          </van-list>
+
+        </van-tab>
+      </van-tabs>
+    </div>
+    <!--  内容结束  -->
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import {productList, productOut, productIn, serviceGet, treeselect} from "@/api/agriculturalTrusteeship";
+  export default {
+    name: "agriculturalTrusteeshipShopList",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        checked: false,
+        productList:[],
+        productListYes:[],
+        productListNo:[],
+        query:{
+          financialServiceId:Cookies.get('ACCESS-SESSION-ID'),
+          pageNum:1,
+          pageSize:'10',
+        },
+        serviceForm:{},
+        deptOptions:[],
+        deptName:'张村',
+        showDeptId:false,
+        villageValue : '',
+        hcAreaInfoFieldName: {
+          text: "label",
+          value: "value",
+          children: "children",
+        },
+      };
+    },
+    created() {
+      this.getDetail();
+      treeselect().then(res=>{
+        if (res.code == 200) {
+          this.deptOptions = res.data;
+        }
+      })
+    },
+    methods: {
+      getDetail(){
+        serviceGet(Cookies.get('ACCESS-SESSION-ID')).then(response => {
+          this.serviceForm = response.data;
+        });
+      },
+      getList(){
+        productList(this.query).then(response => {
+          response.rows.map(res=>{
+            if (res.mainImg){
+              let supplyMasterMap = res.mainImg.split( "," )
+              res.mainImg = '/api'+supplyMasterMap[0]
+            }
+            if(res.sysYesNo == 'Y'){
+              this.productListYes.push(res);
+            }
+            if(res.sysYesNo == 'N'){
+              this.productListNo.push(res);
+            }
+            this.productList.push(res);
+          })
+          if(this.productList.length >= response.total){
+            this.finished = true;
+            return;
+          }else{
+            this.loading = false;
+            this.query.pageNum += 1 ;
+          }
+        });
+      },
+      productIn(id){
+        productIn(id).then(response => {
+          this.$notify({ type: 'success', message: '上架成功' });
+          location.reload()
+        });
+      },
+      productOut(id){
+        productOut(id).then(response => {
+          this.$notify({ type: 'success', message: '下架成功' });
+          location.reload()
+        });
+      },
+      //选择案件属地
+      onConfirmDept({ selectedOptions }){
+        this.query.deptId = selectedOptions[selectedOptions.length-1].value;
+        this.deptName = selectedOptions[selectedOptions.length-1].label;
+        this.showDeptId = false
+        this.productListYes = [];
+        this.productListNo = [];
+        this.getList();
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #f9f9f9;
+  height: 100vh;
+  overflow: hidden;
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    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: #334281;
+      padding: 2PX 10PX;
+      border-radius: 50PX;
+      /deep/ .van-checkbox__icon--checked .van-icon{
+        color: #334281;
+      }
+      /deep/ .van-checkbox__label{
+        color: #ffffff;
+      }
+      /deep/ .van-checkbox__icon .van-icon{
+        width: .9em;
+        height: .9em;
+        line-height: .9em;
+      }
+      /deep/ .van-icon-success::before{
+        width: .9em;
+        height: .9em;
+      }
+      /deep/ .van-checkbox__icon{
+        height: auto;
+      }
+    }
+  }
+
+  .main_btn{
+    display: flex;
+    background: #ffffff;
+    border-top-left-radius: 25PX;
+    border-top-right-radius: 25PX;
+    overflow: hidden;
+    padding: 4vw 4% 0;
+    justify-content: space-between;
+    .btn_box_01{
+      width: 48%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1Px dashed #4E7FFF;
+      color: #4E7FFF;
+      font-size: .35rem;
+      line-height: 15vw;
+      border-radius: 10Px;
+      p:first-child{
+        font-weight: bold;
+        margin-right: 5PX;
+      }
+    }
+    .btn_box_02{
+      width: 48%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(78,127,255,0.17);
+      color: #1E49BB;
+      font-size: .35rem;
+      line-height: 15vw;
+      border-radius: 10Px;
+      p{
+        margin-left: 5PX;
+      }
+    }
+  }
+
+  .serviceName{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    span{
+      background: #E8E8E8;
+      padding: 0 8PX;
+      border-radius: 5PX;
+      color: #7A7A7A;
+      margin-right: 5PX;
+    }
+    .active{
+      background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+      color: #ffffff;
+    }
+  }
+
+  .nav{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    padding-bottom: 15PX;
+    .tt{
+      font-size: .45rem;
+      color: #334281;
+    }
+    .content{
+      background: #ffffff;
+      width: 92%;
+      margin: 0 auto;
+      box-shadow: 0px 0px 10PX rgba(0,0,0,0.1);
+      border-radius: 25PX;
+      padding: 1.5vh 4%;
+    }
+    /deep/ .van-cell{
+      padding: 0;
+      margin-bottom: 10PX;
+      &:last-child{
+        margin: 0;
+      }
+    }
+  }
+
+  /* 内容 */
+  .main{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    /deep/ .van-tabs__nav{
+      border-top-left-radius: 25PX;
+      border-top-right-radius: 25PX;
+      overflow: hidden;
+      background: #f9f9f9;
+    }
+    /deep/ .van-tabs__line{
+      background: #334281!important;
+    }
+    /deep/ .van-tab--active{
+      color: #334281;
+    }
+    /deep/ .van-tabs__content{
+      background: #f9f9f9;
+      padding-top: 2vh;
+    }
+    .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;
+       }
+    }
+    .content{
+      width: 92%;
+      margin: 0 auto;
+      margin-top: 2vh;
+      .content_tt{
+        font-size: .35rem;
+      }
+      .content_con{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1.5vh;
+        .content_con_left{
+          display: flex;
+          flex-direction:column;
+          justify-content: space-between;
+          p{
+            font-size: .35rem;
+            padding-left: 18PX;
+            &:nth-child(1){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_project.png") no-repeat left center;
+            }
+            &:nth-child(2){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_name.png") no-repeat left center;
+            }
+            &:nth-child(3){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_iphone.png") no-repeat left center;
+            }
+          }
+        }
+        .content_con_right{
+          display: flex;
+          justify-content: end;
+          align-items: center;
+          img{
+            border-radius: 10PX;
+            width: 40%;
+            margin-left: 5%;
+            box-shadow: 0px 5PX 10PX rgba(0,0,0,0.2);
+            &:last-child{
+              width: auto;
+              box-shadow: none;
+            }
+          }
+        }
+      }
+    }
+    .main_content_right_list{
+      margin: 0 auto;
+      margin-bottom: 2vh;
+      width: 92%;
+      background: #ffffff;
+      padding: 15PX 3%;
+      border-radius: 10Px;
+      box-shadow: 0px 5PX 10PX rgba(0,0,0,0.1);
+      .main_tit{
+        font-size: .38rem;
+        display: flex;
+        align-items: center;
+        i{
+          display: block;
+          width: 16PX;
+          height: 16PX;
+          margin-right: 5PX;
+          flex-shrink: 0;
+          background: url("../../../../static/images/agriculturalTrusteeship/insurance/shop_needs_icon.png");
+        }
+        p{
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          word-break: break-all;
+          overflow: hidden;
+        }
+      }
+      .main_money{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 5PX;
+        p{
+          &:nth-child(1){
+            color: #FF5E00;
+            font-size: .4rem;
+            span{
+              font-size: .3rem;
+            }
+          }
+          &:nth-child(2){
+            color: #8B8B8B;
+            font-size: .35rem;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/shop/shopOrganizationDetail.vue

@@ -0,0 +1,442 @@
+<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="main_content_right_list">
+        <div class="main_tit">
+          <i></i>
+          <p>家家加加加加加加加就爱简爱家合作社</p>
+        </div>
+        <p class="main_content">村口需要水牛石头诚招水牛贷款联系电话165822本人人品优良绝不拖欠还款。</p>
+        <div class="main_money">
+          <p><span>需求金额</span><span>￥</span>512,000.00</p>
+        </div>
+        <van-divider />
+
+        <van-field
+          readonly
+          label="负责人"
+          input-align="right"
+          :border="false"
+          placeholder="负责人"
+        />
+
+        <van-field
+          readonly
+          label="联系方式"
+          input-align="right"
+          :border="false"
+          placeholder="联系方式"
+        />
+
+        <van-field
+          readonly
+          label="地址"
+          input-align="right"
+          :border="false"
+          placeholder="地址"
+        />
+
+      </div>
+      <div class="main_content_right_list2" v-for="(item,index) in 5" :key="index" @click="$router.push({name:'agriculturalTrusteeshipShopNeedsList'})">
+        <div class="main_tit">
+          <p>家家加加加加加加加就爱简爱家合作社</p>
+          <span>(1/10)</span>
+        </div>
+        <div class="main_content">
+          <p>玉米</p>
+          <p>32022亩</p>
+        </div>
+        <div class="main_money">
+          <p><i></i>丰田村</p>
+          <p><i></i>2023.03.15-2024.09.15</p>
+        </div>
+      </div>
+    </div>
+    <!--  内容结束  -->
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import {productList, productOut, productIn, serviceGet, treeselect} from "@/api/agriculturalTrusteeship";
+  export default {
+    name: "shopOrganizationDetail",
+    data() {
+      return {
+
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #f9f9f9;
+  height: 100vh;
+  overflow: hidden;
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    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: #334281;
+      padding: 2PX 10PX;
+      border-radius: 50PX;
+      /deep/ .van-checkbox__icon--checked .van-icon{
+        color: #334281;
+      }
+      /deep/ .van-checkbox__label{
+        color: #ffffff;
+      }
+      /deep/ .van-checkbox__icon .van-icon{
+        width: .9em;
+        height: .9em;
+        line-height: .9em;
+      }
+      /deep/ .van-icon-success::before{
+        width: .9em;
+        height: .9em;
+      }
+      /deep/ .van-checkbox__icon{
+        height: auto;
+      }
+    }
+  }
+
+  .main_btn{
+    display: flex;
+    background: #ffffff;
+    border-top-left-radius: 25PX;
+    border-top-right-radius: 25PX;
+    overflow: hidden;
+    padding: 4vw 4% 0;
+    justify-content: space-between;
+    .btn_box_01{
+      width: 48%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1Px dashed #4E7FFF;
+      color: #4E7FFF;
+      font-size: .35rem;
+      line-height: 15vw;
+      border-radius: 10Px;
+      p:first-child{
+        font-weight: bold;
+        margin-right: 5PX;
+      }
+    }
+    .btn_box_02{
+      width: 48%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(78,127,255,0.17);
+      color: #1E49BB;
+      font-size: .35rem;
+      line-height: 15vw;
+      border-radius: 10Px;
+      p{
+        margin-left: 5PX;
+      }
+    }
+  }
+
+  .serviceName{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    span{
+      background: #E8E8E8;
+      padding: 0 8PX;
+      border-radius: 5PX;
+      color: #7A7A7A;
+      margin-right: 5PX;
+    }
+    .active{
+      background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+      color: #ffffff;
+    }
+  }
+
+  .nav{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    padding-bottom: 15PX;
+    .tt{
+      font-size: .45rem;
+      color: #334281;
+    }
+    .content{
+      background: #ffffff;
+      width: 92%;
+      margin: 0 auto;
+      box-shadow: 0px 0px 10PX rgba(0,0,0,0.1);
+      border-radius: 25PX;
+      padding: 1.5vh 4%;
+    }
+    /deep/ .van-cell{
+      padding: 0;
+      margin-bottom: 10PX;
+      &:last-child{
+        margin: 0;
+      }
+    }
+  }
+
+  /* 内容 */
+  .main{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    background-size: 100% 20PX;
+    background-repeat: no-repeat;
+    /deep/ .van-tabs__nav{
+      border-top-left-radius: 25PX;
+      border-top-right-radius: 25PX;
+      overflow: hidden;
+      background: #f9f9f9;
+    }
+    /deep/ .van-tabs__line{
+      background: #334281!important;
+    }
+    /deep/ .van-tab--active{
+      color: #334281;
+    }
+    /deep/ .van-tabs__content{
+      background: #f9f9f9;
+      padding-top: 2vh;
+    }
+    .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;
+       }
+    }
+    .content{
+      width: 92%;
+      margin: 0 auto;
+      margin-top: 2vh;
+      .content_tt{
+        font-size: .35rem;
+      }
+      .content_con{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1.5vh;
+        .content_con_left{
+          display: flex;
+          flex-direction:column;
+          justify-content: space-between;
+          p{
+            font-size: .35rem;
+            padding-left: 18PX;
+            &:nth-child(1){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_project.png") no-repeat left center;
+            }
+            &:nth-child(2){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_name.png") no-repeat left center;
+            }
+            &:nth-child(3){
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_iphone.png") no-repeat left center;
+            }
+          }
+        }
+        .content_con_right{
+          display: flex;
+          justify-content: end;
+          align-items: center;
+          img{
+            border-radius: 10PX;
+            width: 40%;
+            margin-left: 5%;
+            box-shadow: 0px 5PX 10PX rgba(0,0,0,0.2);
+            &:last-child{
+              width: auto;
+              box-shadow: none;
+            }
+          }
+        }
+      }
+    }
+    .main_content_right_list{
+      margin: 0 auto;
+      margin-bottom: 2vh;
+      width: 92%;
+      background: #ffffff;
+      padding: 15PX 3%;
+      border-radius: 10Px;
+      box-shadow: 0px 5PX 10PX rgba(0,0,0,0.1);
+      text-align: center;
+      /deep/ .van-cell{
+        padding: 0;
+        margin-bottom: 10PX;
+        &:last-child{
+          margin: 0;
+        }
+      }
+      .main_content{
+        font-size: .35rem;
+        line-height: .7rem;
+        margin-top: 10PX;
+        text-align: left;
+      }
+      .main_tit{
+        color: #4E7FFF;
+        font-size: .38rem;
+        display: flex;
+        align-items: center;
+        i{
+          display: block;
+          width: 16PX;
+          height: 16PX;
+          margin-right: 5PX;
+          flex-shrink: 0;
+          background: url("../../../../static/images/agriculturalTrusteeship/insurance/shop_needs_icon01.png");
+        }
+        p{
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          word-break: break-all;
+          overflow: hidden;
+        }
+        span{
+          font-size: .3rem;
+          color: #8B8B8B;
+          flex-shrink: 0;
+        }
+      }
+      .main_money{
+        background: rgba(255,94,0,0.15);
+        display: inline-block;
+        padding: 5PX 15PX;
+        border-radius: 8PX;
+        margin: 10PX auto;
+        p{
+          &:nth-child(1){
+            color: #FF5E00;
+            font-size: .4rem;
+            span{
+              font-size: .3rem;
+            }
+          }
+          &:nth-child(2){
+            color: #8B8B8B;
+            font-size: .35rem;
+          }
+        }
+        span:nth-child(1){
+          margin-right: 5PX;
+        }
+      }
+    }
+    .main_content_right_list2{
+      margin: 0 auto;
+      margin-bottom: 2vh;
+      width: 92%;
+      background: #ffffff;
+      padding: 15PX 3%;
+      border-radius: 10Px;
+      box-shadow: 0px 5PX 10PX rgba(0,0,0,0.1);
+      .main_tit{
+        font-size: .38rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        p{
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          word-break: break-all;
+          overflow: hidden;
+        }
+        span{
+          font-size: .3rem;
+          color: #8B8B8B;
+          flex-shrink: 0;
+        }
+      }
+      .main_money{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10PX;
+        p{
+          font-size: .35rem;
+          color: #8B8B8B;
+          display: flex;
+          align-items: center;
+          &:nth-child(1){
+            i{
+              display: inline-block;
+              width: 11PX;
+              height: 13Px;
+              margin-right: 2PX;
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/shop_needs_icon02.png");
+            }
+          }
+          &:nth-child(2){
+            i{
+              display: inline-block;
+              width: 13PX;
+              height: 13Px;
+              margin-right: 2PX;
+              background: url("../../../../static/images/agriculturalTrusteeship/insurance/shop_needs_icon03.png");
+            }
+          }
+        }
+      }
+      .main_content{
+        font-size: .35rem;
+        line-height: .6rem;
+        margin-top: 10PX;
+        display: flex;
+        justify-content: space-between;
+        p{
+          color: #4E7FFF;
+          &:nth-child(1){
+            background: rgba(78,127,255,0.13);
+            padding: 0 15PX;
+            border-radius: 5PX;
+          }
+        }
+      }
+    }
+  }
+</style>