大托管前端切图

config/index.js

@@ -13,7 +13,8 @@ module.exports = {
       "/api": {
         // 请求的目标主机
         //target: 'http://116.255.223.226:8081/nsgk_test/',
-        target: 'http://localhost:8080/',
+        //target: 'http://localhost:8080/',
+        target: 'http://192.168.0.107:8080/',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''

src/api/lawEnforcement/index.js

@@ -844,3 +844,39 @@ export function createResumePDF(query) {
   })
 }
 
+// 案件数量
+export function caseNumberAll(query) {
+  return request({
+    url: '/enforce/bigData/caseNumberAll',
+    method: 'get',
+    params: query
+  })
+}
+
+// 案件分类统计
+export function caseTypeAccount(query) {
+  return request({
+    url: '/enforce/bigData/caseTypeAccount',
+    method: 'get',
+    params: query
+  })
+}
+
+// 案件来源分析
+export function caseSourceTypeAccount(query) {
+  return request({
+    url: '/home/enforceStatistic/caseSourceTypeAccount',
+    method: 'get',
+    params: query
+  })
+}
+
+// 案件来源分析
+export function casePreMonthNum(query) {
+  return request({
+    url: '/enforce/bigData/casePreMonthNum',
+    method: 'get',
+    params: query
+  })
+}
+

src/components/agriculturalTrusteeship/dialog.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="tb-toolbar-container">
+
+    <div class="main">
+      <div class="main_box">
+        <van-cell label="快速发布，收益多多" center :to="{name:'agriculturalTrusteeshipSocializationRelease'}">
+          <template #title>
+            <p style="color:#4E7FFF; ">发布产品</p>
+          </template>
+          <template #icon>
+            <img src="../../../static/images/agriculturalTrusteeship/socialization/dialog_01.png" style="margin-right: 15PX" />
+          </template>
+        </van-cell>
+      </div>
+      <div class="main_box">
+        <van-cell label="未发布的商品都在这" center :to="{name:'agriculturalTrusteeshipSocializationDraft'}">
+          <template #title>
+            <p style="color:#FF5D00; ">草稿箱</p>
+          </template>
+          <template #icon>
+            <img src="../../../static/images/agriculturalTrusteeship/socialization/dialog_02.png" style="margin-right: 15PX" />
+          </template>
+          <template #default>
+            <p style="background: #FBE6D9;color: #FF5D00;display: inline-block;padding: 0 5PX;border-radius: 5PX;">12</p>
+          </template>
+        </van-cell>
+      </div>
+      <img src="../../../static/images/agriculturalTrusteeship/socialization/footer_close.png" alt="" class="add_btn" @click="openDialog">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "toolbar",
+  methods:{
+    openDialog(){
+      this.$parent.openDialog(false)
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+.tb-toolbar-container {
+  z-index: 99999;
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  background: rgba(255,255,255,0.95);
+  .main{
+    position: absolute;
+    left: 0%;
+    bottom: 0;
+    width: 100%;
+    .add_btn{
+      position: relative;
+      left: 50%;
+      transform: translate(-50%,10%);
+      margin-top:4vh;
+    }
+  }
+  .main_box{
+    width: 92%;
+    margin: 0 auto;
+    margin-top: 2vh;
+    border-radius: 20PX;
+    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;
+      }
+    }
+  }
+}
+</style>

src/components/common/agr_footer.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="tb-toolbar-container">
+    <router-link to="/agriculturalTrusteeship/socializationIndex" class="tab" active-class="active" exact>
+      <span class="icon"><van-icon name="shopping-cart-o" size="25" /></span>
+      <p class="text">待处理</p>
+    </router-link>
+    <router-link to="/agriculturalTrusteeship/socializationProject" class="tab" active-class="active">
+      <span class="icon"><van-icon name="shop-o" size="25" /></span>
+      <p class="text">产品</p>
+    </router-link>
+    <img src="../../../static/images/agriculturalTrusteeship/socialization/footer_add.png" alt="" class="add_btn" @click="openDialog">
+    <router-link to="/agriculturalTrusteeship/socializationBill" class="tab" active-class="active">
+      <span class="icon"><van-icon name="bill-o" size="25" /></span>
+      <p class="text">订单</p>
+    </router-link>
+    <router-link to="/agriculturalTrusteeship/socializationUser" class="tab" active-class="active">
+      <span class="icon"><van-icon name="contact" size="25" /></span>
+      <p class="text">我的</p>
+    </router-link>
+  </div>
+</template>
+<script>
+export default {
+  name: "toolbar",
+  data(){
+    return{
+      text:"我是子组件数据，我要发送给父组件",
+      num:12
+    }
+  },
+  methods:{
+    openDialog(){
+      this.$parent.openDialog(true)
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+.tb-toolbar-container {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 1001;
+  background-color: #fff;
+  border-top: 1px solid #e7e7e7;
+  border-bottom: 1px solid #f8f8f8;
+  -webkit-box-pack: justify;
+  /*justify-content: space-around;*/
+  -webkit-box-align: center;
+  align-items: center;
+  position: fixed;
+  padding: 10px 3%;
+  .tab {
+    color: #5d656b;
+    text-align: center;
+    width: 20%;
+    &.active {
+      color: #3E6CCD;
+    }
+    .icon {
+      padding-bottom: 3px;
+    }
+    &:nth-child(4){
+      margin-left: auto;
+    }
+  }
+  .add_btn{
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%,-40%);
+  }
+}
+</style>

src/components/common/buyer_footer.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="tb-toolbar-container">
+    <router-link to="/agriculturalTrusteeship/buyerIndex" class="tab" active-class="active" exact>
+      <span class="icon"><van-icon name="shopping-cart-o" size="25" /></span>
+      <p class="text">寻找服务</p>
+    </router-link>
+    <router-link to="/agriculturalTrusteeship/buyerWaitBill" class="tab" active-class="active">
+      <span class="icon"><van-icon name="todo-list-o" size="25" /></span>
+      <p class="text">等待处理</p>
+    </router-link>
+    <router-link to="/agriculturalTrusteeship/buyerAllBill" class="tab" active-class="active">
+      <span class="icon"><van-icon name="bill-o" size="25" /></span>
+      <p class="text">所有订单</p>
+    </router-link>
+  </div>
+</template>
+<script>
+export default {
+  name: "toolbar",
+  data(){
+    return{
+      text:"我是子组件数据，我要发送给父组件",
+      num:12
+    }
+  },
+  methods:{
+  },
+};
+</script>
+<style scoped lang="scss">
+.tb-toolbar-container {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 1001;
+  background-color: #fff;
+  border-top: 1px solid #e7e7e7;
+  border-bottom: 1px solid #f8f8f8;
+  -webkit-box-pack: justify;
+  /*justify-content: space-around;*/
+  -webkit-box-align: center;
+  align-items: center;
+  position: fixed;
+  padding: 10px 3%;
+  justify-content: space-around;
+  .tab {
+    color: #5d656b;
+    text-align: center;
+    width: 20%;
+    &.active {
+      color: #3E6CCD;
+    }
+    .icon {
+      padding-bottom: 3px;
+    }
+  }
+  .add_btn{
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%,-40%);
+  }
+}
+</style>

src/permission.js

@@ -148,6 +148,28 @@ const whiteList = [
   '/agriculturalTrusteeship/societyProjectList',//社会化产品列表
   '/agriculturalTrusteeship/societyProjectDetail',//社会化产品详情
   '/agriculturalTrusteeship/shopList',//保险列表首页
+  '/agriculturalTrusteeship/shopAdd',//保险列表首页
+  '/agriculturalTrusteeship/socializationIndex',//社会化服务组织待处理
+  '/agriculturalTrusteeship/socializationProject',//社会化服务组织产品
+  '/agriculturalTrusteeship/socializationProjectDetail',//社会化服务组织产品详情
+  '/agriculturalTrusteeship/socializationBill',//社会化服务组织订单
+  '/agriculturalTrusteeship/socializationBillDetail',//社会化服务组织订单详情
+  '/agriculturalTrusteeship/socializationUser',//社会化服务组织个人中心
+  '/agriculturalTrusteeship/socializationUserEdit',//社会化服务组织个人信息
+  '/agriculturalTrusteeship/socializationRelease',//社会化服务组织发布产品
+  '/agriculturalTrusteeship/socializationDraft',//社会化服务组织草稿箱
+  '/agriculturalTrusteeship/socializationDraftEdit',//社会化服务组织草稿箱修改
+
+  '/agriculturalTrusteeship/buyerIndex',//买家选购
+  '/agriculturalTrusteeship/buyerWaitBill',//买家选购-等待处理
+  '/agriculturalTrusteeship/buyerAllBill',//买家选购-所有订单
+  '/agriculturalTrusteeship/placeOrder',//买家选购-下单页
+  '/agriculturalTrusteeship/billDetail',//买家选购-订单详情
+  '/agriculturalTrusteeship/billDetail2',//买家选购-订单详情
+  '/agriculturalTrusteeship/billDetail3',//买家选购-订单详情
+  '/agriculturalTrusteeship/billDetail4',//买家选购-订单详情
+  '/agriculturalTrusteeship/evaluate',//买家选购-服务评价
+
 ]
 
 router.beforeEach((to, from, next) => {

src/router/index.js

@@ -4580,6 +4580,188 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/agriculturalTrusteeship/shop/shopList'], resolve)
   },
+  {
+    path: '/agriculturalTrusteeship/shopAdd',
+    name: 'agriculturalTrusteeshipShopAdd',
+    meta: {
+      title: '发布商品',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/shop/shopAdd'], resolve)
+  },
+
+  //社会化服务组织页面
+  {
+    path: '/agriculturalTrusteeship/socializationIndex',
+    name: 'agriculturalTrusteeshipSocializationIndex',
+    meta: {
+      title: '社会化服务组织待处理',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/index'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/socializationProject',
+    name: 'agriculturalTrusteeshipSocializationProject',
+    meta: {
+      title: '社会化服务组织产品',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/project'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/socializationProjectDetail',
+    name: 'agriculturalTrusteeshipSocializationProjectDetail',
+    meta: {
+      title: '社会化服务组织产品详情',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/projectDetail'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/socializationBill',
+    name: 'agriculturalTrusteeshipSocializationBill',
+    meta: {
+      title: '社会化服务组织订单',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/bill'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/socializationBillDetail',
+    name: 'agriculturalTrusteeshipSocializationBillDetail',
+    meta: {
+      title: '社会化服务组织订单详情',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/billDetail'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/socializationUser',
+    name: 'agriculturalTrusteeshipSocializationUser',
+    meta: {
+      title: '社会化服务组织个人中心',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/user'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/socializationUserEdit',
+    name: 'agriculturalTrusteeshipSocializationUserEdit',
+    meta: {
+      title: '社会化服务组织个人信息',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/userEdit'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/socializationRelease',
+    name: 'agriculturalTrusteeshipSocializationRelease',
+    meta: {
+      title: '社会化服务组织发布产品',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/release'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/socializationDraft',
+    name: 'agriculturalTrusteeshipSocializationDraft',
+    meta: {
+      title: '社会化服务组织草稿箱',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/draft'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/socializationDraftEdit',
+    name: 'agriculturalTrusteeshipSocializationDraftEdit',
+    meta: {
+      title: '社会化服务组织草稿箱修改',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/socialization/draftEdit'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/buyerIndex',
+    name: 'agriculturalTrusteeshipBuyerIndex',
+    meta: {
+      title: '买家选购',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/buyer/index'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/buyerWaitBill',
+    name: 'agriculturalTrusteeshipBuyerWaitBill',
+    meta: {
+      title: '等待处理',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/buyer/waitBill'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/buyerAllBill',
+    name: 'agriculturalTrusteeshipBuyerAllBill',
+    meta: {
+      title: '所有订单',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/buyer/allBill'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/placeOrder',
+    name: 'agriculturalTrusteeshipPlaceOrder',
+    meta: {
+      title: '下单',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/buyer/placeOrder'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/billDetail',
+    name: 'agriculturalTrusteeshipBillDetail',
+    meta: {
+      title: '订单详情',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/buyer/billDetail'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/billDetail2',
+    name: 'agriculturalTrusteeshipBillDetail2',
+    meta: {
+      title: '订单详情',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/buyer/billDetail2'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/billDetail3',
+    name: 'agriculturalTrusteeshipBillDetail3',
+    meta: {
+      title: '订单详情',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/buyer/billDetail3'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/billDetail4',
+    name: 'agriculturalTrusteeshipBillDetail4',
+    meta: {
+      title: '订单详情',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/buyer/billDetail4'], resolve)
+  },
+  {
+    path: '/agriculturalTrusteeship/evaluate',
+    name: 'agriculturalTrusteeshipEvaluate',
+    meta: {
+      title: '服务评价',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/agriculturalTrusteeship/buyer/evaluate'], resolve)
+  },
 ];
 
 

src/views/agriculturalTrusteeship/buyer/allBill.vue

@@ -0,0 +1,403 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <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>
+<!--      <img src="../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_01.png" alt="" @click="show = true;">-->
+    </div>
+    <!--  头部结束  -->
+
+    <!--  导航开始  -->
+    <div class="nav">
+      <div class="date">
+        <p>2021年11月</p>
+        <span>-</span>
+        <p>2021年11月</p>
+      </div>
+      <div class="nav_list">
+        <p class="active">全部</p>
+        <p>已接单</p>
+        <p>已接单</p>
+        <p>已接单</p>
+        <p>已接单</p>
+      </div>
+    </div>
+    <!--  导航结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+      >
+  <!--            @load="onLoad"  v-for="item in 10" :key="item"-->
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p>灌溉</p>
+            <p>服务</p>
+            <p class="on">点击评分</p>
+          </div>
+
+          <div class="main_content_right_list_center" @click="$router.push({name:'agriculturalTrusteeshipBillDetail2'})">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00</p>
+              </div>
+              <p class="name">
+                <span>数量：300</span>
+                <span>作物：玉米</span>
+              </p>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p>灌溉</p>
+            <p>服务</p>
+            <p class="on">已评分</p>
+          </div>
+
+          <div class="main_content_right_list_center" @click="$router.push({name:'agriculturalTrusteeshipBillDetail3'})">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00</p>
+              </div>
+              <p class="name">
+                <span>数量：300</span>
+                <span>作物：玉米</span>
+              </p>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p>灌溉</p>
+            <p>服务</p>
+            <p class="off">已拒单</p>
+          </div>
+
+          <div class="main_content_right_list_center" @click="$router.push({name:'agriculturalTrusteeshipBillDetail4'})">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00</p>
+              </div>
+              <p class="name">
+                <span>数量：300</span>
+                <span>作物：玉米</span>
+              </p>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+      </van-list>
+
+    </div>
+    <!--  内容结束  -->
+
+    <buyer></buyer>
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import buyer from "@/components/common/buyer_footer";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    components: {
+      buyer,
+    },
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        show:true,
+        activeNames:[],
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #F9F9F9;
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+  }
+
+  .search{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #6E93F3;
+    padding: 1PX 1PX 1PX 12PX ;
+    border-radius: 50PX;
+    /*margin-right: 30PX;*/
+    flex: 1;
+    input{
+      flex: 1;
+      background: transparent;
+      margin-left: 10PX;
+    }
+  }
+  /*导航栏目*/
+  .nav{
+    width: 94%;
+    margin: 0 auto;
+    padding: 2vh 0 0;
+    /*background: #ffffff;*/
+    /*border-radius: 10PX;*/
+    /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
+    .date{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      p{
+        border-radius: 1rem;
+        padding: 5PX 0PX 5PX 5%;
+        width: 40%;
+        text-align: center;
+        color: #334281;
+        box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+        background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;
+      }
+    }
+    .nav_list{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 2vh;
+      p{
+        background: #F0F0F0;
+        padding: 7PX 0;
+        width: 18%;
+        text-align: center;
+        color: #888888;
+        border-radius: 7PX;
+        &.active{
+          background: #E2E9FD;
+          color: #1B5DEA;
+        }
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 8PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(1){background: #2B7EEC;color: #ffffff;}
+          &:nth-child(2){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+        }
+        .on{
+          color: #39BD18;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 20PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_on.png") no-repeat left center
+        }
+        .off{
+          color: #E60505;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 20PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*弹出层*/
+  .popup_header{
+    display: flex;
+    align-items: center;
+    color: #334281;
+    font-size: .38rem;
+    margin-bottom: 15PX;
+    img{
+      margin-right: 10PX;
+      display: block;
+    }
+    p{
+      line-height: 1;
+    }
+  }
+  .popup_content{
+    .selected{
+      .on{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/down.png")left center no-repeat;
+      }
+      .off{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/right.png")left center no-repeat;
+      }
+      .options{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        p{
+          background: #F5F5F5;
+          color: #8F8F8F;
+          width: 30%;
+          padding: 5PX 0;
+          border-radius: 5PX;
+          text-align: center;
+          &.active{
+            background: #E2E9FD;
+            color: #1B5DEA;
+          }
+        }
+      }
+    }
+  }
+  .popup_date{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    p{
+      border-radius: 1rem;
+      padding: 5PX 0PX 5PX 5%;
+      width: 45%;
+      text-align: center;
+      color: #1B5DEA;
+      background:#E2E9FD url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 15% center no-repeat;
+    }
+  }
+  .popup_btn{
+    position: fixed;
+    bottom: 5vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 94%;
+    left: 3%;
+    p{
+      width: 30%;
+      padding: 7PX 0;
+      border-radius: 5rem;
+      text-align: center;
+      font-size: .35rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #1B5DEA;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        border: 1PX solid #1B5DEA;
+        color: #1B5DEA;
+      }
+      &:nth-child(3){
+        background-image: linear-gradient(to right , #6E93F3 , #54C6E4);
+        color: #ffffff;
+      }
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/buyer/billDetail.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="订单详情"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">商品信息</p>
+            <p>灌溉</p>
+            <p>服务</p>
+          </div>
+
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00/亩</p>
+              </div>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">买家信息</p>
+          </div>
+
+          <van-cell title="联系人" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系电话" :border="false" value="林晓春" />
+          <van-cell title="服务地点" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">订单信息</p>
+          </div>
+
+          <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="请输入单价" />
+          <van-cell title="备注" :border="false" value="请输入数量" />
+        </div>
+
+    </div>
+
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        show:true,
+        activeNames:[],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+  }
+
+  .search{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #6E93F3;
+    padding: 1PX 1PX 1PX 12PX ;
+    border-radius: 50PX;
+    margin-right: 30PX;
+    flex: 1;
+    input{
+      flex: 1;
+      background: transparent;
+      margin-left: 10PX;
+    }
+  }
+  /*导航栏目*/
+  .nav{
+    width: 94%;
+    margin: 0 auto;
+    margin-top: 2vh;
+    padding: 1.5vh 3%;
+    background: #ffffff;
+    border-radius: 10PX;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    .date{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      p{
+        border-radius: 1rem;
+        padding: 5PX 0PX 5PX 5%;
+        width: 40%;
+        text-align: center;
+        color: #334281;
+        box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+        background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;
+      }
+    }
+    .billCount {
+      display: flex;
+      text-align: center;
+      margin-top: 3vh;
+      .billCount_left{
+        width: 50%;
+        color: #1B5DEA;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+      .billCount_right{
+        width: 50%;
+        color: #FF5E00;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 10PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}
+          &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+        }
+        .on{
+          color: #334281;
+          border-radius: initial;
+          padding:0 0 0 20PX;
+          font-size: 0.35rem;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center
+        }
+        .off{
+          color: #E60505;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 15PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*弹出层*/
+  .popup_header{
+    display: flex;
+    align-items: center;
+    color: #334281;
+    font-size: .38rem;
+    margin-bottom: 15PX;
+    img{
+      margin-right: 10PX;
+      display: block;
+    }
+    p{
+      line-height: 1;
+    }
+  }
+  .popup_content{
+    .selected{
+      .on{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/down.png")left center no-repeat;
+      }
+      .off{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/right.png")left center no-repeat;
+      }
+      .options{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        p{
+          background: #F5F5F5;
+          color: #8F8F8F;
+          width: 30%;
+          padding: 5PX 0;
+          border-radius: 5PX;
+          text-align: center;
+          &.active{
+            background: #E2E9FD;
+            color: #1B5DEA;
+          }
+        }
+      }
+    }
+  }
+  .popup_date{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    p{
+      border-radius: 1rem;
+      padding: 5PX 0PX 5PX 5%;
+      width: 45%;
+      text-align: center;
+      color: #1B5DEA;
+      background:#E2E9FD url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 15% center no-repeat;
+    }
+  }
+  .popup_btn{
+    position: fixed;
+    bottom: 5vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 94%;
+    left: 3%;
+    p{
+      width: 30%;
+      padding: 7PX 0;
+      border-radius: 5rem;
+      text-align: center;
+      font-size: .35rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #1B5DEA;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        border: 1PX solid #1B5DEA;
+        color: #1B5DEA;
+      }
+      &:nth-child(3){
+        background-image: linear-gradient(to right , #6E93F3 , #54C6E4);
+        color: #ffffff;
+      }
+    }
+  }
+.main_btn{
+  display: flex;
+  justify-content: space-around;
+  padding: 4vh 0;
+  p{
+    font-size: .4rem;
+    width: 35%;
+    text-align: center;
+    padding: 10PX 0;
+    border-radius: 5rem;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    &:nth-child(1){
+      background: #334281;
+      color: #ffffff;
+    }
+    &:nth-child(2){
+      background: #D1D5E4;
+      color: #334281;
+    }
+  }
+}
+</style>

src/views/agriculturalTrusteeship/buyer/billDetail2.vue

@@ -0,0 +1,394 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="订单详情"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">商品信息</p>
+            <p>灌溉</p>
+            <p>服务</p>
+          </div>
+
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00/亩</p>
+              </div>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">买家信息</p>
+          </div>
+
+          <van-cell title="联系人" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系电话" :border="false" value="林晓春" />
+          <van-cell title="服务地点" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">订单信息</p>
+          </div>
+
+          <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="请输入所属主体" />
+          <van-cell title="成交金额" :border="false" value="请输入单价" />
+          <van-cell title="备注" :border="false" value="请输入数量" />
+        </div>
+
+    </div>
+
+    <!--  内容结束  -->
+    <div class="footer">
+      <p>温馨提示：请在服务完成后进行评分</p>
+      <img src="../../../../static/images/agriculturalTrusteeship/buyer/buyer_icon_02.png" @click="$router.push({name:'agriculturalTrusteeshipEvaluate'})">
+    </div>
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        show:true,
+        activeNames:[],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+  }
+
+  .search{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #6E93F3;
+    padding: 1PX 1PX 1PX 12PX ;
+    border-radius: 50PX;
+    margin-right: 30PX;
+    flex: 1;
+    input{
+      flex: 1;
+      background: transparent;
+      margin-left: 10PX;
+    }
+  }
+  /*导航栏目*/
+  .nav{
+    width: 94%;
+    margin: 0 auto;
+    margin-top: 2vh;
+    padding: 1.5vh 3%;
+    background: #ffffff;
+    border-radius: 10PX;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    .date{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      p{
+        border-radius: 1rem;
+        padding: 5PX 0PX 5PX 5%;
+        width: 40%;
+        text-align: center;
+        color: #334281;
+        box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+        background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;
+      }
+    }
+    .billCount {
+      display: flex;
+      text-align: center;
+      margin-top: 3vh;
+      .billCount_left{
+        width: 50%;
+        color: #1B5DEA;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+      .billCount_right{
+        width: 50%;
+        color: #FF5E00;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    padding-bottom: 15vh;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 10PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}
+          &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+        }
+        .on{
+          color: #334281;
+          border-radius: initial;
+          padding:0 0 0 20PX;
+          font-size: 0.35rem;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center
+        }
+        .off{
+          color: #E60505;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 15PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*弹出层*/
+  .popup_header{
+    display: flex;
+    align-items: center;
+    color: #334281;
+    font-size: .38rem;
+    margin-bottom: 15PX;
+    img{
+      margin-right: 10PX;
+      display: block;
+    }
+    p{
+      line-height: 1;
+    }
+  }
+  .popup_content{
+    .selected{
+      .on{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/down.png")left center no-repeat;
+      }
+      .off{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/right.png")left center no-repeat;
+      }
+      .options{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        p{
+          background: #F5F5F5;
+          color: #8F8F8F;
+          width: 30%;
+          padding: 5PX 0;
+          border-radius: 5PX;
+          text-align: center;
+          &.active{
+            background: #E2E9FD;
+            color: #1B5DEA;
+          }
+        }
+      }
+    }
+  }
+  .popup_date{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    p{
+      border-radius: 1rem;
+      padding: 5PX 0PX 5PX 5%;
+      width: 45%;
+      text-align: center;
+      color: #1B5DEA;
+      background:#E2E9FD url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 15% center no-repeat;
+    }
+  }
+  .popup_btn{
+    position: fixed;
+    bottom: 5vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 94%;
+    left: 3%;
+    p{
+      width: 30%;
+      padding: 7PX 0;
+      border-radius: 5rem;
+      text-align: center;
+      font-size: .35rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #1B5DEA;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        border: 1PX solid #1B5DEA;
+        color: #1B5DEA;
+      }
+      &:nth-child(3){
+        background-image: linear-gradient(to right , #6E93F3 , #54C6E4);
+        color: #ffffff;
+      }
+    }
+  }
+.main_btn{
+  display: flex;
+  justify-content: space-around;
+  padding: 4vh 0;
+  p{
+    font-size: .4rem;
+    width: 35%;
+    text-align: center;
+    padding: 10PX 0;
+    border-radius: 5rem;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    &:nth-child(1){
+      background: #334281;
+      color: #ffffff;
+    }
+    &:nth-child(2){
+      background: #D1D5E4;
+      color: #334281;
+    }
+  }
+}
+.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/buyer/billDetail3.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="订单详情"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+        <p class="type">已评分<span>评分时间：2022.11.12</span></p>
+        <div class="main_content_right_list first">
+          <div class="main_content_right_list_header">
+            <p class="on">商品信息</p>
+            <p>灌溉</p>
+            <p>服务</p>
+          </div>
+
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00/亩</p>
+              </div>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">评价信息</p>
+          </div>
+
+          <van-cell title="实际服务数量" :border="false" value="张三李四联合合作社" />
+          <van-cell title="实际服务费用" :border="false" value="林晓春" />
+          <van-cell title="服务评分" :border="false" value="165 8874 0311" />
+          <van-cell title="服务评价" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">买家信息</p>
+          </div>
+
+          <van-cell title="联系人" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系电话" :border="false" value="林晓春" />
+          <van-cell title="服务地点" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">订单信息</p>
+          </div>
+
+          <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="请输入所属主体" />
+          <van-cell title="成交金额" :border="false" value="请输入单价" />
+          <van-cell title="备注" :border="false" value="请输入数量" />
+        </div>
+
+    </div>
+
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        show:true,
+        activeNames:[],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+  }
+
+  .search{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #6E93F3;
+    padding: 1PX 1PX 1PX 12PX ;
+    border-radius: 50PX;
+    margin-right: 30PX;
+    flex: 1;
+    input{
+      flex: 1;
+      background: transparent;
+      margin-left: 10PX;
+    }
+  }
+  /*导航栏目*/
+  .nav{
+    width: 94%;
+    margin: 0 auto;
+    margin-top: 2vh;
+    padding: 1.5vh 3%;
+    background: #ffffff;
+    border-radius: 10PX;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    .date{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      p{
+        border-radius: 1rem;
+        padding: 5PX 0PX 5PX 5%;
+        width: 40%;
+        text-align: center;
+        color: #334281;
+        box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+        background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;
+      }
+    }
+    .billCount {
+      display: flex;
+      text-align: center;
+      margin-top: 3vh;
+      .billCount_left{
+        width: 50%;
+        color: #1B5DEA;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+      .billCount_right{
+        width: 50%;
+        color: #FF5E00;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    padding-bottom: 2vh;
+    .main_content_right_list{
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      margin-bottom: 2vh;
+      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
+      &.first{
+        border-top-left-radius: initial;
+        border-top-right-radius: initial;
+      }
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 10PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}
+          &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+        }
+        .on{
+          color: #334281;
+          border-radius: initial;
+          padding:0 0 0 20PX;
+          font-size: 0.35rem;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center
+        }
+        .off{
+          color: #E60505;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 15PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*弹出层*/
+.main_btn{
+  display: flex;
+  justify-content: space-around;
+  padding: 4vh 0;
+  p{
+    font-size: .4rem;
+    width: 35%;
+    text-align: center;
+    padding: 10PX 0;
+    border-radius: 5rem;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    &:nth-child(1){
+      background: #334281;
+      color: #ffffff;
+    }
+    &:nth-child(2){
+      background: #D1D5E4;
+      color: #334281;
+    }
+  }
+}
+.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;
+  }
+}
+  .type{
+    background: #22D863;
+    font-size: .4rem;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2vh;
+    color: #ffffff;
+    padding: 10PX 3%;
+    border-top-left-radius: 10PX;
+    border-top-right-radius: 10PX;
+    align-items: center;
+    span{
+      font-size: .35rem;
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/buyer/billDetail4.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="订单详情"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+        <p class="type">卖家已拒单<span>拒单时间：2022.11.12</span></p>
+        <div class="main_content_right_list first">
+          <div class="main_content_right_list_header">
+            <p class="on">商品信息</p>
+            <p>灌溉</p>
+            <p>服务</p>
+          </div>
+
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00/亩</p>
+              </div>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">买家信息</p>
+          </div>
+
+          <van-cell title="联系人" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系电话" :border="false" value="林晓春" />
+          <van-cell title="服务地点" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">订单信息</p>
+          </div>
+
+          <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="请输入单价" />
+          <van-cell title="备注" :border="false" value="请输入数量" />
+        </div>
+
+    </div>
+
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        show:true,
+        activeNames:[],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+  }
+
+  .search{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #6E93F3;
+    padding: 1PX 1PX 1PX 12PX ;
+    border-radius: 50PX;
+    margin-right: 30PX;
+    flex: 1;
+    input{
+      flex: 1;
+      background: transparent;
+      margin-left: 10PX;
+    }
+  }
+  /*导航栏目*/
+  .nav{
+    width: 94%;
+    margin: 0 auto;
+    margin-top: 2vh;
+    padding: 1.5vh 3%;
+    background: #ffffff;
+    border-radius: 10PX;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    .date{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      p{
+        border-radius: 1rem;
+        padding: 5PX 0PX 5PX 5%;
+        width: 40%;
+        text-align: center;
+        color: #334281;
+        box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+        background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;
+      }
+    }
+    .billCount {
+      display: flex;
+      text-align: center;
+      margin-top: 3vh;
+      .billCount_left{
+        width: 50%;
+        color: #1B5DEA;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+      .billCount_right{
+        width: 50%;
+        color: #FF5E00;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    padding-bottom: 2vh;
+    .main_content_right_list{
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      margin-bottom: 2vh;
+      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
+      &.first{
+        border-top-left-radius: initial;
+        border-top-right-radius: initial;
+      }
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 10PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}
+          &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+        }
+        .on{
+          color: #334281;
+          border-radius: initial;
+          padding:0 0 0 20PX;
+          font-size: 0.35rem;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center
+        }
+        .off{
+          color: #E60505;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 15PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*弹出层*/
+.main_btn{
+  display: flex;
+  justify-content: space-around;
+  padding: 4vh 0;
+  p{
+    font-size: .4rem;
+    width: 35%;
+    text-align: center;
+    padding: 10PX 0;
+    border-radius: 5rem;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    &:nth-child(1){
+      background: #334281;
+      color: #ffffff;
+    }
+    &:nth-child(2){
+      background: #D1D5E4;
+      color: #334281;
+    }
+  }
+}
+.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;
+  }
+}
+  .type{
+    background: #D83B22;
+    font-size: .4rem;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2vh;
+    color: #ffffff;
+    padding: 10PX 3%;
+    border-top-left-radius: 10PX;
+    border-top-right-radius: 10PX;
+    align-items: center;
+    span{
+      font-size: .35rem;
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/buyer/evaluate.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="服务评分 "
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00/亩</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+        <div class="main_content_right_list">
+          <van-field label="实际服务数量" :border="false" input-align="right" placeholder="实际服务数量" />
+          <van-field label="实际服务费用" :border="false" input-align="right" placeholder="实际服务费用" />
+          <van-field label="服务评分" :border="false" input-align="right" placeholder="服务评分" />
+          <van-field label="服务评价" :border="false" input-align="right" placeholder="服务评价" />
+        </div>
+
+    </div>
+
+    <!--  内容结束  -->
+
+    <div class="main_btn">
+      <p>确定</p>
+      <p>取消</p>
+    </div>
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        show:true,
+        activeNames:[],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    padding-bottom: 5vh;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 10PX;
+        &:first-child{
+          margin-top: 0;
+        }
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}
+          &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+        }
+        .on{
+          color: #334281;
+          border-radius: initial;
+          padding:0 0 0 20PX;
+          font-size: 0.35rem;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center
+        }
+        .off{
+          color: #E60505;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 15PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+.main_btn{
+  display: flex;
+  justify-content: space-around;
+  padding: 4vh 0;
+  p{
+    font-size: .4rem;
+    width: 35%;
+    text-align: center;
+    padding: 10PX 0;
+    border-radius: 5rem;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    &:nth-child(1){
+      background: #334281;
+      color: #ffffff;
+    }
+    &:nth-child(2){
+      background: #D1D5E4;
+      color: #334281;
+    }
+  }
+}
+</style>

src/views/agriculturalTrusteeship/buyer/index.vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <img src="../../../../static/images/agriculturalTrusteeship/index/header.png">
+      <div class="header_box" @click="$router.push({name:'agriculturalTrusteeshipLogin'})">
+        <p>林万金<span>15835691254</span><img src="../../../../static/images/agriculturalTrusteeship/buyer/buyer_icon_01.png" alt=""></p>
+        <p>北京市海淀区丁春路165街玉龙苑9区2单元10...</p>
+
+      </div>
+    </div>
+    <!--  头部结束  -->
+
+    <!--  导航开始  -->
+    <div class="nav">
+      <van-grid :column-num="4" :border="false">
+        <van-grid-item :to="{name:'agriculturalTrusteeshipSocietyList'}">
+          <img src="../../../../static/images/agriculturalTrusteeship/index/nav_01.png"/>
+          <p>社会化</p>
+        </van-grid-item>
+        <van-grid-item :to="{name:'lawEnforcementCaseStatistics'}">
+          <img src="../../../../static/images/agriculturalTrusteeship/index/nav_02.png"/>
+          <p>农担</p>
+        </van-grid-item>
+        <van-grid-item :to="{name:'lawEnforcementCaseDistributionMap'}">
+          <img src="../../../../static/images/agriculturalTrusteeship/index/nav_03.png"/>
+          <p>贷款</p>
+        </van-grid-item>
+        <van-grid-item :to="{name:'agriculturalTrusteeshipInsuranceList'}">
+          <img src="../../../../static/images/agriculturalTrusteeship/index/nav_04.png"/>
+          <p>保险</p>
+        </van-grid-item>
+      </van-grid>
+
+      <div class="nav_notice_box">
+        <van-notice-bar left-icon="../../../../static/images/agriculturalTrusteeship/index/notice_icon.png" mode="link" :scrollable="false" background="#E2E9FD" color="#334281">
+          <van-swipe
+            vertical
+            class="notice-swipe"
+            :autoplay="3000"
+            :show-indicators="false"
+          >
+            <van-swipe-item>12.0版本上线啦！点击查看更改内容~</van-swipe-item>
+            <van-swipe-item>12.1版本上线啦！点击查看更改内容~</van-swipe-item>
+            <van-swipe-item>12.2版本上线啦！点击查看更改内容~</van-swipe-item>
+          </van-swipe>
+        </van-notice-bar>
+      </div>
+    </div>
+    <!--  导航结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+      <div class="main_header">
+        <p>社会化服务产品</p>
+        <p>河东河西村</p>
+      </div>
+      <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:'agriculturalTrusteeshipPlaceOrder'})">
+              <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>
+    <!--  内容结束  -->
+
+    <img src="../../../../static/images/agriculturalTrusteeship/index/index_btn_icon_01.png" class="pc"/>
+
+    <buyer></buyer>
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import buyer from "@/components/common/buyer_footer";
+  export default {
+    name: "agriculturalTrusteeshipBuyIndex",
+    components: {
+      buyer,
+    },
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    padding: 4vh 4% 2vh;
+    .header_box{
+      margin-left: 4%;
+      flex: 1;
+      p{
+        &:nth-child(1){
+          color: #ffffff;
+          font-size: .45rem;
+          display: flex;
+          align-items: center;
+          span{
+            background: rgba(255,255,255,0.8) url("../../../../static/images/agriculturalTrusteeship/socialization/user_icon_07.png") 10PX center no-repeat;
+            background-size: 12PX;
+            color: #1E67FF;
+            font-size: 0.35rem;
+            padding: 0 8PX 0 25PX;
+            border-radius: 5PX;
+            margin-left: 10PX;
+          }
+          img{
+            margin-left: auto;
+          }
+        }
+        &:nth-child(2){
+          color: #E5E5E5;
+          margin-top: .5vh;
+        }
+      }
+    }
+  }
+
+  /*导航栏目*/
+  .nav{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    .van-grid{
+      border-top-left-radius: 25PX;
+      border-top-right-radius: 25PX;
+      overflow: hidden;
+    }
+    .nav_notice_box{
+      background: #ffffff;
+      padding:.5vh 0 1vh;
+    }
+    /deep/ .van-notice-bar{
+      width: 94%;
+      margin: 0 auto;
+      border-radius: 5PX;
+      .notice-swipe {
+        height: 40px;
+        line-height: 42px;
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    background: #ffffff;
+    .main_header{
+      display: flex;
+      padding: 0 4% 1vh;
+      justify-content: space-between;
+      align-items: center;
+      p{
+        color: #334281;
+        &:nth-child(1){
+          font-size: .4rem;
+        }
+        &:nth-child(2){
+          font-size: .35rem;
+          background: url("../../../../static/images/agriculturalTrusteeship/index/address_icon.png") no-repeat left center;
+          padding: 5PX 0 5PX 22PX;
+
+        }
+      }
+    }
+    .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: 56.8vh;
+      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%;
+          }
+          .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){
+                  span{
+                    display: inline-block;
+                    text-align: center;
+                    padding: 2PX 5PX;
+                    &: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;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*飘窗*/
+  .pc{
+    position: absolute;
+    bottom: 10vh;
+    right: 0;
+  }
+</style>

src/views/agriculturalTrusteeship/buyer/placeOrder.vue

@@ -0,0 +1,375 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="确认订单"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">商品信息</p>
+            <p>灌溉</p>
+            <p>服务</p>
+          </div>
+
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00/亩</p>
+              </div>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">买家信息</p>
+          </div>
+
+          <van-cell title="联系人" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系电话" :border="false" value="林晓春" />
+          <van-cell title="服务地点" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">订单信息</p>
+          </div>
+
+          <van-field label="服务合同" :border="false" input-align="right" placeholder="请输入产品名称" />
+          <van-field label="服务作物" :border="false" input-align="right" placeholder="请输入产品类型" />
+          <van-field label="下单时间" :border="false" input-align="right" placeholder="请输入二级分类" />
+          <van-field label="服务时间" :border="false" input-align="right" placeholder="请输入产品规格" />
+          <van-field label="服务数量" :border="false" input-align="right" placeholder="请输入所属主体" />
+          <van-field label="成交金额" :border="false" input-align="right" placeholder="请输入单价" />
+          <van-field label="备注" :border="false" input-align="right" placeholder="请输入数量" />
+        </div>
+
+    </div>
+
+    <div class="main_btn">
+      <p>下单</p>
+      <p>取消</p>
+    </div>
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        show:true,
+        activeNames:[],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+  }
+
+  .search{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #6E93F3;
+    padding: 1PX 1PX 1PX 12PX ;
+    border-radius: 50PX;
+    margin-right: 30PX;
+    flex: 1;
+    input{
+      flex: 1;
+      background: transparent;
+      margin-left: 10PX;
+    }
+  }
+  /*导航栏目*/
+  .nav{
+    width: 94%;
+    margin: 0 auto;
+    margin-top: 2vh;
+    padding: 1.5vh 3%;
+    background: #ffffff;
+    border-radius: 10PX;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    .date{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      p{
+        border-radius: 1rem;
+        padding: 5PX 0PX 5PX 5%;
+        width: 40%;
+        text-align: center;
+        color: #334281;
+        box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+        background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;
+      }
+    }
+    .billCount {
+      display: flex;
+      text-align: center;
+      margin-top: 3vh;
+      .billCount_left{
+        width: 50%;
+        color: #1B5DEA;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+      .billCount_right{
+        width: 50%;
+        color: #FF5E00;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 10PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}
+          &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+        }
+        .on{
+          color: #334281;
+          border-radius: initial;
+          padding:0 0 0 20PX;
+          font-size: 0.35rem;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center
+        }
+        .off{
+          color: #E60505;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 15PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*弹出层*/
+  .popup_header{
+    display: flex;
+    align-items: center;
+    color: #334281;
+    font-size: .38rem;
+    margin-bottom: 15PX;
+    img{
+      margin-right: 10PX;
+      display: block;
+    }
+    p{
+      line-height: 1;
+    }
+  }
+  .popup_content{
+    .selected{
+      .on{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/down.png")left center no-repeat;
+      }
+      .off{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/right.png")left center no-repeat;
+      }
+      .options{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        p{
+          background: #F5F5F5;
+          color: #8F8F8F;
+          width: 30%;
+          padding: 5PX 0;
+          border-radius: 5PX;
+          text-align: center;
+          &.active{
+            background: #E2E9FD;
+            color: #1B5DEA;
+          }
+        }
+      }
+    }
+  }
+  .popup_date{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    p{
+      border-radius: 1rem;
+      padding: 5PX 0PX 5PX 5%;
+      width: 45%;
+      text-align: center;
+      color: #1B5DEA;
+      background:#E2E9FD url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 15% center no-repeat;
+    }
+  }
+  .popup_btn{
+    position: fixed;
+    bottom: 5vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 94%;
+    left: 3%;
+    p{
+      width: 30%;
+      padding: 7PX 0;
+      border-radius: 5rem;
+      text-align: center;
+      font-size: .35rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #1B5DEA;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        border: 1PX solid #1B5DEA;
+        color: #1B5DEA;
+      }
+      &:nth-child(3){
+        background-image: linear-gradient(to right , #6E93F3 , #54C6E4);
+        color: #ffffff;
+      }
+    }
+  }
+.main_btn{
+  display: flex;
+  justify-content: space-around;
+  padding: 4vh 0;
+  p{
+    font-size: .4rem;
+    width: 35%;
+    text-align: center;
+    padding: 10PX 0;
+    border-radius: 5rem;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    &:nth-child(1){
+      background: #334281;
+      color: #ffffff;
+    }
+    &:nth-child(2){
+      background: #D1D5E4;
+      color: #334281;
+    }
+  }
+}
+</style>

src/views/agriculturalTrusteeship/buyer/waitBill.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <p>待处理订单</p>
+      <p>共20个新订单</p>
+    </div>
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+      <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:'agriculturalTrusteeshipBillDetail'})">
+          <div class="main_content_right_list_header">
+            <p>灌溉</p>
+            <p>服务</p>
+            <p>2022.03.15</p>
+          </div>
+
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00</p>
+              </div>
+              <p class="name">
+                <span>数量：300</span>
+                <span>作物：玉米</span>
+              </p>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+      </van-list>
+
+    </div>
+    <!--  内容结束  -->
+
+    <buyer></buyer>
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import buyer from "@/components/common/buyer_footer";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    components: {
+      buyer,
+    },
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      openDialog(val){
+        this.showDialog = val
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #F9F9F9;
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+    p{
+      &:nth-child(1){
+        color: #334281;
+        font-size: .45rem;
+      }
+      &:nth-child(2){
+        color: #7A7A7A;
+        margin-top: .5vh;
+      }
+    }
+  }
+
+  /*导航栏目*/
+  .nav{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    .van-grid{
+      border-top-left-radius: 25PX;
+      border-top-right-radius: 25PX;
+      overflow: hidden;
+    }
+    .nav_notice_box{
+      background: #ffffff;
+      padding:.5vh 0 1vh;
+    }
+    /deep/ .van-notice-bar{
+      width: 94%;
+      margin: 0 auto;
+      border-radius: 5PX;
+      .notice-swipe {
+        height: 40px;
+        line-height: 42px;
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 8PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(1){background: #2B7EEC;color: #ffffff;}
+          &:nth-child(2){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+          &:nth-child(3){color: #334281;margin-left: auto;padding:0 0 0 15PX;background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_clock.png") no-repeat left center}
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+</style>

src/views/agriculturalTrusteeship/login.vue

@@ -13,9 +13,9 @@
     <!--  头部结束  -->
 
     <!--  登陆选择开始  -->
-    <div class="main" style="display: none;">
+    <div class="main">
       <div class="nav">
-        <div class="nav_content">
+        <div class="nav_content" @click="$router.push({name:'agriculturalTrusteeshipBuyerIndex'})">
           <div>
             <p class="nav_name_01">买家登录</p>
             <p class="nav_text">登录后支持下单操作</p>
@@ -25,7 +25,7 @@
       </div>
 
       <div class="nav">
-        <div class="nav_content">
+        <div class="nav_content" @click="$router.push({name:'agriculturalTrusteeshipSocializationIndex'})" >
           <div>
             <p class="nav_name_02">社会化服务组织登录</p>
             <p class="nav_text">登录发布社会化服务及相关产品</p>
@@ -61,7 +61,7 @@
     <!--  登陆选择结束  -->
 
     <!--  登录开始  -->
-    <div class="login_main" :style="{'position': position,'top':top,'transform':transform,'left':left}">
+    <div class="login_main" style="display: none;" :style="{'position': position,'top':top,'transform':transform,'left':left}">
       <van-tabs v-model="active" animated color="#1E67FF" background="transparent" title-active-color="#1E67FF" @change="tabsChange">
         <van-tab name="login" title="登录">
           <van-field v-model="value1" center :border="false" placeholder="请输入用户名" >

src/views/agriculturalTrusteeship/shop/shopAdd.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="发布商品"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+
+    <!--  内容开始  -->
+    <div class="main">
+      <van-field label="产品名称" input-align="right" placeholder="请输入产品名称" />
+      <van-field label="产品类型" input-align="right" placeholder="请输入产品类型" />
+      <van-field label="简介" input-align="right" placeholder="请输入简介" />
+      <van-field label="图片" :border="false" input-align="right" readonly />
+      <div style="padding: 0 4% 2vh;">
+        <van-uploader />
+      </div>
+    </div>
+
+    <div class="main_btn">
+      <p>发布</p>
+    </div>
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "agriculturalTrusteeshipSocializationRelease",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
+        zoom: 15, //地图展示级别
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #F6F6F6;
+  min-height: 100vh;
+}
+.main{
+  width: 92%;
+  margin: 0 auto;
+  margin-top: 2vh;
+  border-radius: 10PX;
+  overflow: hidden;
+  background-color: #FFF;
+}
+  .main_btn{
+    display: flex;
+    justify-content: space-around;
+    padding: 4vh 0;
+    p{
+      font-size: .4rem;
+      width: 35%;
+      text-align: center;
+      padding: 10PX 0;
+      border-radius: 5rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #334281;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        background: #D1D5E4;
+        color: #334281;
+      }
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/shop/shopList.vue

@@ -56,7 +56,7 @@
       <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%;">
+          <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_add.png" style="margin: 0 auto;display: block;width: 94%;" @click="$router.push({name:'agriculturalTrusteeshipShopAdd'})">
 
           <van-list
             v-model="loading"

src/views/agriculturalTrusteeship/socialization/bill.vue

@@ -0,0 +1,431 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <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>
+      <img src="../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_01.png" alt="" @click="show = true;">
+    </div>
+    <!--  头部结束  -->
+
+    <!--  导航开始  -->
+    <div class="nav">
+      <div class="date">
+        <p>2021年11月</p>
+        <span>-</span>
+        <p>2021年11月</p>
+      </div>
+      <div class="billCount">
+        <div class="billCount_left">
+          <p>654</p>
+          <p>成交订单</p>
+        </div>
+        <div class="billCount_right">
+          <p>361,654,523.00</p>
+          <p>收入金额</p>
+        </div>
+      </div>
+    </div>
+    <!--  导航结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+      >
+  <!--            @load="onLoad"-->
+        <div class="main_content_right_list" v-for="item in 10" :key="item">
+          <div class="main_content_right_list_header">
+            <p>灌溉</p>
+            <p>服务</p>
+            <p class="on">已结单</p>
+          </div>
+
+          <div class="main_content_right_list_center" @click="$router.push({name:'agriculturalTrusteeshipSocializationBillDetail'})">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00</p>
+              </div>
+              <p class="name">
+                <span>数量：300</span>
+                <span>作物：玉米</span>
+              </p>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+      </van-list>
+
+    </div>
+    <!--  内容结束  -->
+    <van-popup v-model="show" position="right" round style="height:100vh;width: 80%;padding: 4vh 3%;">
+      <div class="popup_header">
+        <img src="../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_01.png" width="15" alt="">
+        <p>筛选</p>
+      </div>
+      <div class="popup_content">
+        <div class="selected">
+          <p class="off">全套服务</p>
+        </div>
+        <div class="selected">
+          <p class="off">灌溉</p>
+        </div>
+        <div class="selected">
+          <p class="off">除草</p>
+        </div>
+        <div class="selected">
+          <p class="on">播种</p>
+          <div class="options">
+            <p class="active">全部</p>
+            <p>服务</p>
+            <p>种子</p>
+          </div>
+        </div>
+        <div class="selected">
+          <p class="on">施肥</p>
+          <div class="options">
+            <p>全部</p>
+            <p>服务</p>
+            <p>种子</p>
+          </div>
+        </div>
+      </div>
+      <div class="popup_header" style="margin-top: 4vh;">
+        <img src="../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_01.png" width="15" alt="">
+        <p>时间</p>
+      </div>
+      <div class="popup_date">
+        <p>2021年11月</p>
+        <span>-</span>
+        <p>2021年11月</p>
+      </div>
+      <div class="popup_header" style="margin-top: 4vh;">
+        <img src="../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_01.png" width="15" alt="">
+        <p>状态</p>
+      </div>
+      <div class="popup_content">
+        <div class="selected">
+          <div class="options">
+            <p class="active">全部</p>
+            <p>服务</p>
+            <p>种子</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="popup_btn">
+        <p>确定</p>
+        <p>取消</p>
+        <p>重置</p>
+      </div>
+    </van-popup>
+    <agr></agr>
+    <transition name="van-fade">
+      <dialogClose v-show="showDialog"></dialogClose>
+    </transition>
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import agr from "@/components/common/agr_footer";
+  import dialogClose from "@/components/agriculturalTrusteeship/dialog";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    components: {
+      agr,
+      dialogClose
+    },
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        show:true,
+        activeNames:[],
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      openDialog(val){
+        this.showDialog = val
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+  }
+
+  .search{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #6E93F3;
+    padding: 1PX 1PX 1PX 12PX ;
+    border-radius: 50PX;
+    margin-right: 30PX;
+    flex: 1;
+    input{
+      flex: 1;
+      background: transparent;
+      margin-left: 10PX;
+    }
+  }
+  /*导航栏目*/
+  .nav{
+    width: 94%;
+    margin: 0 auto;
+    margin-top: 2vh;
+    padding: 1.5vh 3%;
+    background: #ffffff;
+    border-radius: 10PX;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    .date{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      p{
+        border-radius: 1rem;
+        padding: 5PX 0PX 5PX 5%;
+        width: 40%;
+        text-align: center;
+        color: #334281;
+        box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+        background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;
+      }
+    }
+    .billCount {
+      display: flex;
+      text-align: center;
+      margin-top: 3vh;
+      .billCount_left{
+        width: 50%;
+        color: #1B5DEA;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+      .billCount_right{
+        width: 50%;
+        color: #FF5E00;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 8PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(1){background: #2B7EEC;color: #ffffff;}
+          &:nth-child(2){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+        }
+        .on{
+          color: #39BD18;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 20PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_on.png") no-repeat left center
+        }
+        .off{
+          color: #E60505;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 15PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*弹出层*/
+  .popup_header{
+    display: flex;
+    align-items: center;
+    color: #334281;
+    font-size: .38rem;
+    margin-bottom: 15PX;
+    img{
+      margin-right: 10PX;
+      display: block;
+    }
+    p{
+      line-height: 1;
+    }
+  }
+  .popup_content{
+    .selected{
+      .on{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/down.png")left center no-repeat;
+      }
+      .off{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/right.png")left center no-repeat;
+      }
+      .options{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        p{
+          background: #F5F5F5;
+          color: #8F8F8F;
+          width: 30%;
+          padding: 5PX 0;
+          border-radius: 5PX;
+          text-align: center;
+          &.active{
+            background: #E2E9FD;
+            color: #1B5DEA;
+          }
+        }
+      }
+    }
+  }
+  .popup_date{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    p{
+      border-radius: 1rem;
+      padding: 5PX 0PX 5PX 5%;
+      width: 45%;
+      text-align: center;
+      color: #1B5DEA;
+      background:#E2E9FD url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 15% center no-repeat;
+    }
+  }
+  .popup_btn{
+    position: fixed;
+    bottom: 5vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 94%;
+    left: 3%;
+    p{
+      width: 30%;
+      padding: 7PX 0;
+      border-radius: 5rem;
+      text-align: center;
+      font-size: .35rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #1B5DEA;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        border: 1PX solid #1B5DEA;
+        color: #1B5DEA;
+      }
+      &:nth-child(3){
+        background-image: linear-gradient(to right , #6E93F3 , #54C6E4);
+        color: #ffffff;
+      }
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/socialization/billDetail.vue

@@ -0,0 +1,375 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="订单详情"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">商品信息</p>
+            <p>灌溉</p>
+            <p>服务</p>
+          </div>
+
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00/亩</p>
+              </div>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">买家信息</p>
+          </div>
+
+          <van-cell title="联系人" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系电话" :border="false" value="林晓春" />
+          <van-cell title="服务地点" :border="false" value="165 8874 0311" />
+        </div>
+
+        <div class="main_content_right_list">
+          <div class="main_content_right_list_header">
+            <p class="on">订单信息</p>
+          </div>
+
+          <van-cell title="服务合同" :border="false" value="张三李四联合合作社" />
+          <van-cell title="服务作物" :border="false" value="林晓春" />
+          <van-cell title="下单时间" :border="false" value="165 8874 0311" />
+          <van-cell title="服务时间" :border="false" value="165 8874 0311" />
+          <van-cell title="服务数量" :border="false" value="165 8874 0311" />
+          <van-cell title="成交金额" :border="false" value="165 8874 0311" />
+          <van-cell title="备注" :border="false" value="165 8874 0311" />
+        </div>
+
+    </div>
+
+    <div class="main_btn">
+      <p>接单</p>
+      <p>拒单</p>
+    </div>
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        show:true,
+        activeNames:[],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+  }
+
+  .search{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #6E93F3;
+    padding: 1PX 1PX 1PX 12PX ;
+    border-radius: 50PX;
+    margin-right: 30PX;
+    flex: 1;
+    input{
+      flex: 1;
+      background: transparent;
+      margin-left: 10PX;
+    }
+  }
+  /*导航栏目*/
+  .nav{
+    width: 94%;
+    margin: 0 auto;
+    margin-top: 2vh;
+    padding: 1.5vh 3%;
+    background: #ffffff;
+    border-radius: 10PX;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    .date{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      p{
+        border-radius: 1rem;
+        padding: 5PX 0PX 5PX 5%;
+        width: 40%;
+        text-align: center;
+        color: #334281;
+        box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+        background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;
+      }
+    }
+    .billCount {
+      display: flex;
+      text-align: center;
+      margin-top: 3vh;
+      .billCount_left{
+        width: 50%;
+        color: #1B5DEA;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+      .billCount_right{
+        width: 50%;
+        color: #FF5E00;
+        p{
+          &:nth-child(1){
+            font-size: .45rem;
+          }
+        }
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 8PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}
+          &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+        }
+        .on{
+          color: #334281;
+          border-radius: initial;
+          padding:0 0 0 20PX;
+          font-size: 0.35rem;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center
+        }
+        .off{
+          color: #E60505;
+          border-radius: initial;
+          margin-left: auto;
+          padding:0 0 0 15PX;
+          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /*弹出层*/
+  .popup_header{
+    display: flex;
+    align-items: center;
+    color: #334281;
+    font-size: .38rem;
+    margin-bottom: 15PX;
+    img{
+      margin-right: 10PX;
+      display: block;
+    }
+    p{
+      line-height: 1;
+    }
+  }
+  .popup_content{
+    .selected{
+      .on{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/down.png")left center no-repeat;
+      }
+      .off{
+        font-size: .35rem;
+        padding: 10PX 20PX;
+        color: #334281;
+        background: url("../../../../static/images/agriculturalTrusteeship/socialization/right.png")left center no-repeat;
+      }
+      .options{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        p{
+          background: #F5F5F5;
+          color: #8F8F8F;
+          width: 30%;
+          padding: 5PX 0;
+          border-radius: 5PX;
+          text-align: center;
+          &.active{
+            background: #E2E9FD;
+            color: #1B5DEA;
+          }
+        }
+      }
+    }
+  }
+  .popup_date{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    p{
+      border-radius: 1rem;
+      padding: 5PX 0PX 5PX 5%;
+      width: 45%;
+      text-align: center;
+      color: #1B5DEA;
+      background:#E2E9FD url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 15% center no-repeat;
+    }
+  }
+  .popup_btn{
+    position: fixed;
+    bottom: 5vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 94%;
+    left: 3%;
+    p{
+      width: 30%;
+      padding: 7PX 0;
+      border-radius: 5rem;
+      text-align: center;
+      font-size: .35rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #1B5DEA;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        border: 1PX solid #1B5DEA;
+        color: #1B5DEA;
+      }
+      &:nth-child(3){
+        background-image: linear-gradient(to right , #6E93F3 , #54C6E4);
+        color: #ffffff;
+      }
+    }
+  }
+.main_btn{
+  display: flex;
+  justify-content: space-around;
+  padding: 4vh 0;
+  p{
+    font-size: .4rem;
+    width: 35%;
+    text-align: center;
+    padding: 10PX 0;
+    border-radius: 5rem;
+    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+    &:nth-child(1){
+      background: #334281;
+      color: #ffffff;
+    }
+    &:nth-child(2){
+      background: #D1D5E4;
+      color: #334281;
+    }
+  }
+}
+</style>

src/views/agriculturalTrusteeship/socialization/draft.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="草稿箱"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+      <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:'agriculturalTrusteeshipSocializationDraftEdit'})">
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png" width="80">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <p class="name">2022.03.15</p>
+            </div>
+          </div>
+        </div>
+      </van-list>
+
+    </div>
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import agr from "@/components/common/agr_footer";
+  import dialogClose from "@/components/agriculturalTrusteeship/dialog";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    components: {
+      agr,
+      dialogClose
+    },
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      openDialog(val){
+        this.showDialog = val
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+    p{
+      &:nth-child(1){
+        color: #334281;
+        font-size: .45rem;
+      }
+      &:nth-child(2){
+        color: #7A7A7A;
+        margin-top: .5vh;
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 8PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(1){background: #2B7EEC;color: #ffffff;}
+          &:nth-child(2){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+          &:nth-child(3){color: #334281;margin-left: auto;padding:0 0 0 15PX;background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_clock.png") no-repeat left center}
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #334281;
+            margin-left: auto;
+            padding:0 0 0 15PX;
+            background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_clock.png") no-repeat left center
+          }
+        }
+      }
+    }
+  }
+
+</style>

src/views/agriculturalTrusteeship/socialization/draftEdit.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="发布商品"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+
+    <!--  内容开始  -->
+    <div class="main">
+      <van-field label="产品名称" input-align="right" placeholder="请输入产品名称" />
+      <van-field label="产品类型" input-align="right" placeholder="请输入产品类型" />
+      <van-field label="二级分类" input-align="right" placeholder="请输入二级分类" />
+      <van-field label="产品规格" input-align="right" placeholder="请输入产品规格" />
+      <van-field label="所属主体" input-align="right" placeholder="请输入所属主体" />
+      <van-field label="单价" input-align="right" placeholder="请输入单价" />
+      <van-field label="数量" input-align="right" placeholder="请输入数量" />
+      <van-field label="联系电话" input-align="right" placeholder="请输入联系电话" />
+      <van-field label="联系人" input-align="right" placeholder="请输入联系人" />
+      <van-field label="服务区域" input-align="right" placeholder="请输入服务区域" />
+      <van-field label="地址" input-align="right" placeholder="请输入地址" />
+      <van-field label="简介" input-align="right" placeholder="请输入简介" />
+      <van-field label="详情" input-align="right" placeholder="请输入详情" />
+      <van-field label="图片" :border="false" input-align="right" placeholder="请输入图片" />
+      <div style="padding: 0 4% 2vh;">
+        <van-uploader />
+      </div>
+    </div>
+
+    <div class="main">
+      <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-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 class="main_btn">
+      <p>发布</p>
+      <p>存稿</p>
+    </div>
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "agriculturalTrusteeshipSocializationRelease",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
+        zoom: 15, //地图展示级别
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #F6F6F6;
+  min-height: 100vh;
+}
+.main{
+  width: 92%;
+  margin: 0 auto;
+  margin-top: 2vh;
+  border-radius: 10PX;
+  overflow: hidden;
+  background-color: #FFF;
+}
+  .main_btn{
+    display: flex;
+    justify-content: space-around;
+    padding: 4vh 0;
+    p{
+      font-size: .4rem;
+      width: 35%;
+      text-align: center;
+      padding: 10PX 0;
+      border-radius: 5rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #334281;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        background: #E60505;
+        color: #ffffff;
+      }
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/socialization/index.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <p>待处理订单</p>
+      <p>共20个新订单</p>
+    </div>
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+      >
+  <!--            @load="onLoad"-->
+        <div class="main_content_right_list" v-for="item in 10" :key="item">
+          <div class="main_content_right_list_header">
+            <p>灌溉</p>
+            <p>服务</p>
+            <p>2022.03.15</p>
+          </div>
+
+          <div class="main_content_right_list_center">
+            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
+            <div class="main_content_right_list_content">
+              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
+              <div class="tab">
+                <p>￥<span>165,836,365</span>.00</p>
+              </div>
+              <p class="name">
+                <span>数量：300</span>
+                <span>作物：玉米</span>
+              </p>
+            </div>
+          </div>
+          <van-cell title="买方名称" :border="false" value="张三李四联合合作社" />
+          <van-cell title="联系人" :border="false" value="林晓春" />
+          <van-cell title="联系电话" :border="false" value="165 8874 0311" />
+        </div>
+      </van-list>
+
+    </div>
+    <!--  内容结束  -->
+
+    <agr></agr>
+    <transition name="van-fade">
+      <dialogClose v-show="showDialog"></dialogClose>
+    </transition>
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import agr from "@/components/common/agr_footer";
+  import dialogClose from "@/components/agriculturalTrusteeship/dialog";
+
+  export default {
+    name: "agriculturalTrusteeshipIndex",
+    components: {
+      agr,
+      dialogClose
+    },
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      openDialog(val){
+        this.showDialog = val
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+
+}
+  /*头部*/
+  .header{
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    padding: 2vh 4% 0vh;
+    p{
+      &:nth-child(1){
+        color: #334281;
+        font-size: .45rem;
+      }
+      &:nth-child(2){
+        color: #7A7A7A;
+        margin-top: .5vh;
+      }
+    }
+  }
+
+  /*导航栏目*/
+  .nav{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    .van-grid{
+      border-top-left-radius: 25PX;
+      border-top-right-radius: 25PX;
+      overflow: hidden;
+    }
+    .nav_notice_box{
+      background: #ffffff;
+      padding:.5vh 0 1vh;
+    }
+    /deep/ .van-notice-bar{
+      width: 94%;
+      margin: 0 auto;
+      border-radius: 5PX;
+      .notice-swipe {
+        height: 40px;
+        line-height: 42px;
+      }
+    }
+  }
+
+  /*内容*/
+  .main{
+    width: 94%;
+    margin: 0 auto;
+    .main_content_right_list{
+      margin-top: 2vh;
+      padding: 1.5vh 3%;
+      background: #ffffff;
+      border-radius: 10PX;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      /deep/ .van-cell{
+        padding: 0;
+        margin-top: 8PX;
+      }
+      .main_content_right_list_header{
+        display: flex;
+        margin-bottom: 1vh;
+        align-items: center;
+        p{
+          padding: 3PX 10PX;
+          border-radius: 8PX;
+          &:nth-child(1){background: #2B7EEC;color: #ffffff;}
+          &:nth-child(2){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
+          &:nth-child(3){color: #334281;margin-left: auto;padding:0 0 0 15PX;background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_clock.png") no-repeat left center}
+        }
+      }
+      .main_content_right_list_center{
+        display: flex;
+        img{
+          border-radius: 15PX;
+          margin-right: 4%;
+        }
+        .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){
+                span{
+                  display: inline-block;
+                  text-align: center;
+                  padding: 2PX 5PX;
+                  &: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: #7A7A7A;
+            span{
+              &:nth-child(2){
+                margin-left: 5PX;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+</style>

src/views/agriculturalTrusteeship/socialization/project.vue

@@ -0,0 +1,471 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <div class="header">
+      <div class="header_left" @click="onClickLeft">
+        <p>张三服务合作社</p>
+      </div>
+      <p class="header_right">
+        <img src="../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_photo.png" />
+      </p>
+    </div>
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+      <van-tabs v-model="active" sticky animated>
+        <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>
+
+            <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:'agriculturalTrusteeshipSocializationProjectDetail'})">
+                    <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>
+                      <div class="btn">
+                        <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_02.png" />
+                        <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_01.png" />
+                      </div>
+                    </div>
+                  </div>
+                </van-list>
+
+              </div>
+            </div>
+        </van-tab>
+        <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>
+
+          <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>
+                    <div class="btn">
+                      <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_03.png" />
+                      <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_01.png" />
+                    </div>
+                  </div>
+                </div>
+              </van-list>
+
+            </div>
+          </div>
+
+        </van-tab>
+      </van-tabs>
+    </div>
+    <!--  内容结束  -->
+
+    <agr></agr>
+    <transition name="van-fade">
+      <dialogClose v-show="showDialog"></dialogClose>
+    </transition>
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import agr from "@/components/common/agr_footer";
+  import dialogClose from "@/components/agriculturalTrusteeship/dialog";
+  export default {
+    name: "agriculturalTrusteeshipInsuranceList",
+    components: {
+      agr,
+      dialogClose
+    },
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      openDialog(val){
+        this.showDialog = val
+      },
+    },
+  }
+</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;
+    }
+  }
+
+  /* 内容 */
+  .main{
+    /deep/ .van-tabs__nav{
+      border-top-left-radius: 25PX;
+      border-top-right-radius: 25PX;
+      overflow: hidden;
+    }
+    /deep/ .van-tabs__line{
+      background: #334281!important;
+    }
+    /deep/ .van-tab--active{
+      color: #334281;
+    }
+    /deep/ .van-tabs__content{
+      background: #ffffff;
+      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;
+      box-shadow: 0px 0px 10PX rgba(0,0,0,0.1);
+      border-radius: 10PX;
+      margin-top: 2vh;
+      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;
+        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{
+      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;
+          /deep/ .van-tabs--line .van-tabs__wrap{
+            border-radius: 100rem!important;
+            height: 25PX;
+          }
+          /deep/ .van-tab{
+            z-index: 1;
+            color: #8F8F8F;
+            padding: 5PX 10PX;
+          }
+          /deep/ .van-tab--active{
+            color: #334281!important;
+          }
+          /deep/ .van-tabs__nav{
+            background: #ECECEC!important;
+            border-radius: initial;
+          }
+          /deep/ .van-tabs__nav--line{
+            padding: 0;
+          }
+          /deep/ .van-tabs__content{
+            padding: 0;
+          }
+          /deep/ .van-tabs__line{
+            background: #D6D9E6!important;
+            border-radius: 100rem!important;
+            z-index: 0;
+            width: 50%;
+            height: 100%;
+            bottom: 0;
+          }
+          .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;
+                    }
+                  }
+                }
+              }
+            }
+            .btn{
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              img{
+                width: 45%;
+                margin: 0;
+              }
+            }
+            .name{
+              color: #8F8F8F;
+              background: url("../../../../static/images/agriculturalTrusteeship/index/name_icon.png") no-repeat left center;
+              padding-left: 14PX;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/socialization/projectDetail.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/socialization/release.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="发布商品"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+
+    <!--  内容开始  -->
+    <div class="main">
+      <van-field label="产品名称" input-align="right" placeholder="请输入产品名称" />
+      <van-field label="产品类型" input-align="right" placeholder="请输入产品类型" />
+      <van-field label="二级分类" input-align="right" placeholder="请输入二级分类" />
+      <van-field label="产品规格" input-align="right" placeholder="请输入产品规格" />
+      <van-field label="所属主体" input-align="right" placeholder="请输入所属主体" />
+      <van-field label="单价" input-align="right" placeholder="请输入单价" />
+      <van-field label="数量" input-align="right" placeholder="请输入数量" />
+      <van-field label="联系电话" input-align="right" placeholder="请输入联系电话" />
+      <van-field label="联系人" input-align="right" placeholder="请输入联系人" />
+      <van-field label="服务区域" input-align="right" placeholder="请输入服务区域" />
+      <van-field label="地址" input-align="right" placeholder="请输入地址" />
+      <van-field label="简介" input-align="right" placeholder="请输入简介" />
+      <van-field label="详情" input-align="right" placeholder="请输入详情" />
+      <van-field label="图片" :border="false" input-align="right" placeholder="请输入图片" />
+      <div style="padding: 0 4% 2vh;">
+        <van-uploader />
+      </div>
+    </div>
+
+    <div class="main">
+      <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-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 class="main_btn">
+      <p>发布</p>
+      <p>存稿</p>
+    </div>
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "agriculturalTrusteeshipSocializationRelease",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
+        zoom: 15, //地图展示级别
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #F6F6F6;
+  min-height: 100vh;
+}
+.main{
+  width: 92%;
+  margin: 0 auto;
+  margin-top: 2vh;
+  border-radius: 10PX;
+  overflow: hidden;
+  background-color: #FFF;
+}
+  .main_btn{
+    display: flex;
+    justify-content: space-around;
+    padding: 4vh 0;
+    p{
+      font-size: .4rem;
+      width: 35%;
+      text-align: center;
+      padding: 10PX 0;
+      border-radius: 5rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #334281;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        background: #D1D5E4;
+        color: #334281;
+      }
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/socialization/user.vue

@@ -0,0 +1,180 @@
+<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="nav">
+      <div class="content">
+        <van-grid :column-num="4" :border="false">
+          <van-grid-item>
+            <img src="../../../../static/images/agriculturalTrusteeship/socialization/user_nav_01.png" alt="">
+            <p class="nav_num">3,501</p>
+            <p>已成交</p>
+          </van-grid-item>
+          <van-grid-item>
+            <img src="../../../../static/images/agriculturalTrusteeship/socialization/user_nav_02.png" alt="">
+            <p class="nav_num">3,501</p>
+            <p>待处理</p>
+          </van-grid-item>
+          <van-grid-item>
+            <img src="../../../../static/images/agriculturalTrusteeship/socialization/user_nav_04.png" alt="">
+            <p class="nav_num">3,501</p>
+            <p>已拒单</p>
+          </van-grid-item>
+          <van-grid-item>
+            <img src="../../../../static/images/agriculturalTrusteeship/socialization/user_nav_03.png" alt="">
+            <p class="nav_num" style="color: #FF5D00">3,501</p>
+            <p style="color: #FF5D00">总收入</p>
+          </van-grid-item>
+        </van-grid>
+      </div>
+    </div>
+
+    <!--  内容开始  -->
+    <div class="main">
+      <div class="main_content">
+        <van-cell :border="false" center>
+          <template #title>
+            <p class="tt">公司信息</p>
+          </template>
+          <template #right-icon>
+            <img src="../../../../static/images/agriculturalTrusteeship/insurance/shop_icon_edit.png" @click="$router.push({name:'agriculturalTrusteeshipSocializationUserEdit'})">
+          </template>
+        </van-cell>
+
+        <div class="main_box" style="margin-top: 0;">
+          <van-field label="主体名称" left-icon="../../../../static/images/agriculturalTrusteeship/socialization/user_icon_01.png" :border="false" input-align="right" value="内容" />
+          <van-field label="主体类别" left-icon="../../../../static/images/agriculturalTrusteeship/socialization/user_icon_02.png" :border="false" input-align="right" value="内容" />
+          <van-field label="生产种类" left-icon="../../../../static/images/agriculturalTrusteeship/socialization/user_icon_03.png" :border="false" input-align="right" value="内容" />
+          <van-field label="成立时间" left-icon="../../../../static/images/agriculturalTrusteeship/socialization/user_icon_04.png" :border="false" input-align="right" value="内容" />
+          <van-field label="示范类型" left-icon="../../../../static/images/agriculturalTrusteeship/socialization/user_icon_05.png" :border="false" input-align="right" value="内容" />
+          <van-field label="负责人" left-icon="../../../../static/images/agriculturalTrusteeship/socialization/user_icon_06.png" :border="false" input-align="right" value="内容" />
+          <van-field label="联系电话" left-icon="../../../../static/images/agriculturalTrusteeship/socialization/user_icon_07.png" :border="false" input-align="right" value="内容" />
+        </div>
+
+        <div class="main_box">
+          <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-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>
+    <!--  内容结束  -->
+
+    <agr></agr>
+    <transition name="van-fade">
+      <dialogClose v-show="showDialog"></dialogClose>
+    </transition>
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  import agr from "@/components/common/agr_footer";
+  import dialogClose from "@/components/agriculturalTrusteeship/dialog";
+  export default {
+    name: "agriculturalTrusteeshipInsuranceList",
+    components: {
+      agr,
+      dialogClose
+    },
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
+        zoom: 15, //地图展示级别
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      openDialog(val){
+        this.showDialog = val
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #ffffff;
+  min-height: 100vh;
+}
+  /*头部*/
+  .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: #ffffff url("../../../../static/images/agriculturalTrusteeship/address.png") no-repeat 10PX center;
+      padding: 2PX 15PX 2PX 25PX;
+      border-radius: 50PX;
+    }
+  }
+
+  .nav{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    padding-bottom: 15PX;
+    .content{
+      background: #ffffff;
+      width: 92%;
+      margin: 0 auto;
+      box-shadow: 0px 0px 10PX rgba(0,0,0,0.1);
+      border-radius: 25PX;
+      overflow: hidden;
+      .nav_num{
+        font-size: .4rem;
+        margin: 10PX 0 5PX;
+      }
+    }
+  }
+
+  /* 内容 */
+  .main{
+    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
+    .main_content{
+      border-top-left-radius: 25PX;
+      border-top-right-radius: 25PX;
+      overflow: hidden;
+      background: #ffffff;
+      .main_box{
+        width: 92%;
+        margin: 0 auto;
+        margin-top: 2vh;
+        border-radius: 10PX;
+        overflow: hidden;
+        background-color: #FFF;
+        /deep/ .van-cell{
+          padding: 0;
+          margin-bottom: 10PX;
+          &:last-child{
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/agriculturalTrusteeship/socialization/userEdit.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="home_wrapper">
+    <!--  头部开始  -->
+    <van-nav-bar
+      title="编辑信息"
+      fixed
+      placeholder
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <!--  头部结束  -->
+
+    <!--  内容开始  -->
+    <div class="main">
+      <van-field label="主体名称" input-align="right" placeholder="请输入主体名称" />
+      <van-field label="主体类别" input-align="right" placeholder="请输入主体类别" />
+      <van-field label="生产种类" input-align="right" placeholder="请输入生产种类" />
+      <van-field label="示范类型" input-align="right" placeholder="请输入示范类型" />
+      <van-field label="主体住址" input-align="right" placeholder="请输入主体住址" />
+      <van-field label="数量" input-align="right" placeholder="请输入数量" />
+      <van-field label="成立时间" input-align="right" placeholder="请输入成立时间" />
+      <van-field label="负责人姓名" input-align="right" placeholder="请输入负责人姓名" />
+      <van-field label="联系电话" input-align="right" placeholder="请输入联系电话" />
+      <van-field label="开户银行" input-align="right" placeholder="请输入开户银行" />
+      <van-field label="银行账号" input-align="right" placeholder="请输入银行账号" />
+      <van-field label="经营土地面积(亩)" input-align="right" placeholder="请输入经营土地面积(亩)" />
+      <van-field label="成员出资总额" input-align="right" placeholder="请输入成员出资总额" />
+      <van-field label="成员个数" input-align="right" placeholder="请输入成员个数" />
+      <van-field label="非成员个数" input-align="right" placeholder="请输入非成员个数" />
+      <van-field label="带动农户数量（个）" input-align="right" placeholder="请输入带动农户数量（个）" />
+      <van-field label="网站网址" input-align="right" placeholder="请输入网站网址" />
+      <van-field label="关联账套" input-align="right" placeholder="请输入关联账套" />
+      <van-field label="服务区域" input-align="right" placeholder="请输入服务区域" />
+      <van-field label="图片" :border="false" input-align="right" placeholder="请输入图片" />
+      <div style="padding: 0 4% 2vh;">
+        <van-uploader />
+      </div>
+    </div>
+
+    <div class="main">
+      <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-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 class="main_btn">
+      <p>发布</p>
+      <p>存稿</p>
+    </div>
+    <!--  内容结束  -->
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "agriculturalTrusteeshipSocializationRelease",
+    data() {
+      return {
+        activeKey: 0,
+        active: 0,
+        loading: false,
+        finished: false,
+        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
+        zoom: 15, //地图展示级别
+        showDialog:false
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+  background: #F6F6F6;
+  min-height: 100vh;
+}
+.main{
+  width: 92%;
+  margin: 0 auto;
+  margin-top: 2vh;
+  border-radius: 10PX;
+  overflow: hidden;
+  background-color: #FFF;
+}
+  .main_btn{
+    display: flex;
+    justify-content: space-around;
+    padding: 4vh 0;
+    p{
+      font-size: .4rem;
+      width: 35%;
+      text-align: center;
+      padding: 10PX 0;
+      border-radius: 5rem;
+      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
+      &:nth-child(1){
+        background: #334281;
+        color: #ffffff;
+      }
+      &:nth-child(2){
+        background: #D1D5E4;
+        color: #334281;
+      }
+    }
+  }
+</style>

src/views/lawEnforcement/caseStatistics/caseStatistics.vue

@@ -9,18 +9,19 @@
       <div class="top_main">
         <img src="../../../../static/images/lawEnforcement/icon/statistics_icon_01.png">
         <div class="main_text">
-          <p>156</p>
+          <p>{{countNum}}</p>
           <p>案件数量</p>
         </div>
         <van-popover
           v-model="showPopover"
           trigger="click"
           :actions="actions"
+          @select="changeTime"
           placement="bottom-end"
         >
           <template #reference>
             <div class="select_box">
-              <p>2022</p>
+              <p>{{query.year}}</p>
               <van-icon name="arrow-down" color="#ffffff" />
             </div>
           </template>
@@ -40,22 +41,22 @@
         <div id="main2" style="width: 100%;height: 200px;margin-top: 10px"></div>
 
         <div class="len_box">
-          <div class="len_box_01">
-            <p><i></i>计划执法</p>
-            <p>64</p>
-          </div>
-          <div class="len_box_02">
-            <p><i></i>计划执法</p>
-            <p>64</p>
-          </div>
-          <div class="len_box_03">
-            <p><i></i>计划执法</p>
-            <p>64</p>
-          </div>
-          <div class="len_box_04">
-            <p><i></i>计划执法</p>
-            <p>64</p>
+          <div class="len_box_01" v-for="( item,index ) in caseSourceArray">
+            <p><i></i>{{item.name}}</p>
+            <p>{{item.value}}</p>
           </div>
+<!--          <div class="len_box_02">-->
+<!--            <p><i></i>计划执法</p>-->
+<!--            <p>64</p>-->
+<!--          </div>-->
+<!--          <div class="len_box_03">-->
+<!--            <p><i></i>计划执法</p>-->
+<!--            <p>64</p>-->
+<!--          </div>-->
+<!--          <div class="len_box_04">-->
+<!--            <p><i></i>计划执法</p>-->
+<!--            <p>64</p>-->
+<!--          </div>-->
         </div>
 
       </div>
@@ -71,9 +72,7 @@
 </template>
 
 <script>
-  import { financePublicList,openRemove } from "@/api/sunVillage_info/fixedAssets";
-  import Cookies from "js-cookie";
-  import request from '@/utils/request'
+  import { caseNumberAll , caseTypeAccount , caseSourceTypeAccount , casePreMonthNum } from "@/api/lawEnforcement/index";
   import * as echarts from 'echarts';
   export default {
     name: "caseAllocation",
@@ -81,19 +80,48 @@
       return {
         showPopover: false,
         // 通过 actions 属性来定义菜单选项
-        actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+        actions: [
+          { text: '2022',value:'2022' },
+          { text: '2021',value:'2021' },
+          { text: '2020',value:'2020' },
+          { text: '2019',value:'2019' },
+          { text: '2018',value:'2018' },
+        ],
+        countNum:'',
+        query:{
+          year:'2022'
+        },
+        caseSourceArray:[]
       };
     },
     created() {
 
     },
     mounted(){
-      this.chart();
-      this.chart2();
-      this.chart3();
+      this.getNum();
     },
     methods: {
-      chart(){
+      changeTime(val){
+        console.log(val)
+        this.query.year = val.value;
+        this.getNum();
+      },
+      getNum(){
+        caseNumberAll(this.query).then(response => {
+          this.countNum = response.data;
+        })
+        caseTypeAccount(this.query).then(response => {
+          this.chart(response.data);
+        })
+        caseSourceTypeAccount(this.query).then(response => {
+          this.caseSourceArray =response.data.seriesData;
+          this.chart2(response.data);
+        })
+        casePreMonthNum(this.query).then(response => {
+          this.chart3(response.data);
+        })
+      },
+      chart(data){
         var chartDom = document.getElementById('main');
         var myChart = echarts.init(chartDom);
         var option;
@@ -106,24 +134,38 @@
             {
               type: 'pie',
               radius: ['40%', '70%'],
-              data: [
-                { value: 1048, name: '农药 1048' },
-                { value: 735, name: '种子 735' },
-                { value: 580, name: '肥料 580' },
-                { value: 484, name: '屠宰 484' },
-                { value: 300, name: '动检 300' },
-                { value: 300, name: '兽药 300' },
-                { value: 300, name: '植检 300' },
-                { value: 300, name: '饲料 300' },
-                { value: 300, name: '其他 300' },
-              ]
+              label: {
+                // alignTo: 'edge',
+                // edgeDistance: 10,
+                color: "#000",
+
+                normal: {
+                  alignTo: 'edge',
+                  edgeDistance: 10,
+                  color:'#000',
+                  formatter: "{c_set|{c}}\t{a_set|{b}}",
+                  rich: {
+                    a_set: {
+                      // color: "#ffffff",
+                      lineHeight: 20,
+                      align: "left",
+                      fontSize: 12,
+                    },
+                    c_set: {
+                      // color: "#ffffff",
+                      fontSize: 14,
+                    },
+                  },
+                },
+              },
+              data: data.seriesData
             }
           ]
         };
 
         option && myChart.setOption(option);
       },
-      chart2(){
+      chart2(data){
         var chartDom = document.getElementById('main2');
         var myChart = echarts.init(chartDom);
         var option;
@@ -136,19 +178,38 @@
             {
               type: 'pie',
               radius: ['40%', '70%'],
-              data: [
-                { value: 1048, name: '农药 1048' },
-                { value: 735, name: '种子 735' },
-                { value: 580, name: '肥料 580' },
-                { value: 484, name: '屠宰 484' },
-              ]
+              label: {
+                // alignTo: 'edge',
+                // edgeDistance: 10,
+                color: "#000",
+
+                normal: {
+                  alignTo: 'edge',
+                  edgeDistance: 10,
+                  color:'#000',
+                  formatter: "{c_set|{c}}\t{a_set|{b}}",
+                  rich: {
+                    a_set: {
+                      // color: "#ffffff",
+                      lineHeight: 20,
+                      align: "left",
+                      fontSize: 12,
+                    },
+                    c_set: {
+                      // color: "#ffffff",
+                      fontSize: 14,
+                    },
+                  },
+                },
+              },
+              data: data.seriesData
             }
           ]
         };
 
         option && myChart.setOption(option);
       },
-      chart3(){
+      chart3(data){
         var chartDom = document.getElementById('main3');
         var myChart = echarts.init(chartDom);
         var option;
@@ -163,14 +224,14 @@
           },
           xAxis: {
             type: 'category',
-            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+            data: data.xaxisData
           },
           yAxis: {
             type: 'value'
           },
           series: [
             {
-              data: [150, 230, 224, 218, 135, 147, 260, 224, 218, 135, 147, 260],
+              data: data.series,
               type: 'line'
             }
           ]
@@ -289,26 +350,46 @@
       margin-top: 8PX;
       font-size: .4rem;
     }
-  }
-  .len_box_01{
-    i{
-      background: #1CB8B1;
+    &:nth-child(1){
+      i{
+        background-color: rgb(84,112,198);
+      }
     }
-  }
-  .len_box_02{
-    i{
-      background: #508EEC;
+    &:nth-child(2){
+      i{
+        background-color: rgb(145,204,117);
+      }
     }
-  }
-  .len_box_03{
-    i{
-      background: #F68E68;
+    &:nth-child(3){
+      i{
+        background-color: rgb(250,200,88);
+      }
     }
-  }
-  .len_box_04{
-    i{
-      background: #6163B0;
+    &:nth-child(4){
+      i{
+        background-color: rgb(238,102,102);
+      }
     }
   }
+  /*.len_box_01{*/
+  /*  i{*/
+  /*    background: #1CB8B1;*/
+  /*  }*/
+  /*}*/
+  /*.len_box_02{*/
+  /*  i{*/
+  /*    background: #508EEC;*/
+  /*  }*/
+  /*}*/
+  /*.len_box_03{*/
+  /*  i{*/
+  /*    background: #F68E68;*/
+  /*  }*/
+  /*}*/
+  /*.len_box_04{*/
+  /*  i{*/
+  /*    background: #6163B0;*/
+  /*  }*/
+  /*}*/
 }
 </style>