zhangzl
/
nsgk_mobile
2
0
Çatalla 0
Kod Konular 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
移动端
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
859 İşleme
7 Dallar
79 MiB
 
 
Ağaç: 91b4436f92
Dallar Biçim İmleri
${ item.name }
${ searchTerm } dalı oluştur
'91b4436f92'den
${ noResults }
nsgk_mobile/src/views/agriculturalTrusteeship/buyer/billDetail.vue

410 satır
11 KiB
Ham Suçlama Geçmiş 

  1. <template>

  2.   <div class="home_wrapper">

  3.     <!--  头部开始  -->

  4.     <van-nav-bar

  5.       title="订单详情"

  6.       fixed

  7.       placeholder

  8.       left-arrow

  9.       @click-left="onClickLeft"

  10.     />

  11.     <!--  头部结束  -->

  12. 

  13.     <!--  内容开始  -->

  14.     <div class="main">

  15. 

  16.         <div class="main_content_right_list">

  17.           <div class="main_content_right_list_header">

  18.             <p class="on">商品信息</p>

  19.             <p>{{supplyDemand.productType}}</p>

  20.             <p>服务</p>

  21.           </div>

  22. 

  23.           <div class="main_content_right_list_center">

  24.             <template v-if="supplyDemand.supplyDemand!=null">

  25.               <img v-if="supplyDemand.supplyDemand.supplyMasterMap" :src="supplyDemand.supplyDemand.supplyMasterMap" style="width: 25vw;height: 25vw;">

  26.               <img v-else src="../../../../static/images/agriculturalTrusteeship/zwtp.png" style="width: 25vw;height: 25vw;">

  27.             </template>

  28.             <img v-else src="../../../../static/images/agriculturalTrusteeship/zwtp.png" style="width: 25vw;height: 25vw;">

  29.             <div class="main_content_right_list_content">

  30.               <p class="tt">{{supplyDemand.demandName}}</p>

  31.               <div class="tab">

  32.                 <p>￥<span>{{supplyDemand.unitPrice}}</span>.00/{{supplyDemand.unit}}</p>

  33.               </div>

  34.             </div>

  35.           </div>

  36. 

  37.           <van-cell title="卖方名称" :border="false" :value="supplyDemand.entityName" />

  38.           <van-cell title="联系人" :border="false" :value="supplyDemand.linker" />

  39.           <van-cell title="联系电话" :border="false" :value="supplyDemand.supplyDemandTal" />

  40.         </div>

  41. 

  42.         <div class="main_content_right_list">

  43.           <div class="main_content_right_list_header">

  44.             <p class="on">买家信息</p>

  45.           </div>

  46. 

  47.           <van-cell title="联系人" :border="false" :value="supplyDemand.linkera" />

  48.           <van-cell title="联系电话" :border="false" :value="supplyDemand.phonea" />

  49.           <van-cell title="服务地点" :border="false" :value="supplyDemand.serviceAddress" />

  50.         </div>

  51. 

  52.         <div class="main_content_right_list">

  53.           <div class="main_content_right_list_header">

  54.             <p class="on">订单信息</p>

  55.           </div>

  56. 

  57.           <van-cell title="服务合同" :border="false" :value="supplyDemand.contractionName" />

  58.           <van-cell title="服务作物" :border="false" :value="supplyDemand.cropType" />

  59.           <van-cell title="下单时间" :border="false" :value="supplyDemand.orderAt" />

  60.           <van-cell title="服务时间" :border="false" :value="supplyDemand.serviceAt" />

  61.           <van-cell title="服务数量" :border="false" :value="supplyDemand.serviceNum" />

  62.           <van-cell title="成交金额" :border="false" :value="supplyDemand.realityServiceMoney" />

  63.           <van-cell title="备注" :border="false" :value="supplyDemand.serviceRemark" />

  64. 

  65.         </div>

  66. 

  67.     </div>

  68. 

  69.     <!--  内容结束  -->

  70.   </div>

  71. </template>

  72. <script>

  73.   import Cookies from "js-cookie";

  74.   import {productTypes, supplyorderGet} from "@/api/agriculturalTrusteeship";

  75. 

  76.   export default {

  77.     name: "agriculturalTrusteeshipIndex",

  78.     data() {

  79.       return {

  80.         activeKey: 0,

  81.         active: 0,

  82.         loading: false,

  83.         finished: false,

  84.         show:true,

  85.         activeNames:[],

  86.         cropTypeOptions:[],

  87.         orderStatusOptions:[],

  88.         productList:[],

  89.         supplyDemand:{}

  90.       };

  91.     },

  92.     created() {

  93.       let query = {

  94.         parentId : null,

  95.         tree:true

  96.       }

  97.       productTypes(query).then(response => {

  98.         this.productList = response.data;

  99.       });

  100.       this.getDicts("crop_type").then(response => {

  101.         this.cropTypeOptions = response.data;

  102.       });

  103.       this.getDicts("service_order_status").then(response => {

  104.         this.orderStatusOptions = response.data;

  105.       });

  106.       this.getDetail();

  107.     },

  108.     methods: {

  109.       getDetail(){

  110.         supplyorderGet(this.$route.query.id).then(response => {

  111.           response.data.cropType = this.selectDictLabel(this.cropTypeOptions, response.data.cropType);

  112.           response.data.orderStatus = this.selectDictLabel(this.orderStatusOptions, response.data.orderStatus);

  113.           response.data.productType = this.productList.filter(function (e) { return e.id == response.data.productType; })[0].dictName;

  114.           response.data.updateTime = response.data.updateTime.substr(0,10);

  115.           if (response.data.supplyDemand!=null){

  116.             if (response.data.supplyDemand.supplyMasterMap){

  117.               var attachement = response.data.supplyDemand.supplyMasterMap.split( "," );

  118.               response.data.supplyDemand.supplyMasterMap = '/api' + attachement[0];

  119.             }

  120.           }

  121.           this.supplyDemand = response.data;

  122.         });

  123.       },

  124.     },

  125.   }

  126. </script>

  127. <style scoped lang="scss">

  128. .home_wrapper{

  129. 

  130. }

  131.   /*头部*/

  132.   .header{

  133.     display: flex;

  134.     align-items: center;

  135.     justify-content: space-between;

  136.     padding: 2vh 4% 0vh;

  137.   }

  138. 

  139.   .search{

  140.     display: flex;

  141.     justify-content: space-between;

  142.     align-items: center;

  143.     border: 1px solid #6E93F3;

  144.     padding: 1PX 1PX 1PX 12PX ;

  145.     border-radius: 50PX;

  146.     margin-right: 30PX;

  147.     flex: 1;

  148.     input{

  149.       flex: 1;

  150.       background: transparent;

  151.       margin-left: 10PX;

  152.     }

  153.   }

  154.   /*导航栏目*/

  155.   .nav{

  156.     width: 94%;

  157.     margin: 0 auto;

  158.     margin-top: 2vh;

  159.     padding: 1.5vh 3%;

  160.     background: #ffffff;

  161.     border-radius: 10PX;

  162.     box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);

  163.     .date{

  164.       display: flex;

  165.       justify-content: space-around;

  166.       align-items: center;

  167.       p{

  168.         border-radius: 1rem;

  169.         padding: 5PX 0PX 5PX 5%;

  170.         width: 40%;

  171.         text-align: center;

  172.         color: #334281;

  173.         box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);

  174.         background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;

  175.       }

  176.     }

  177.     .billCount {

  178.       display: flex;

  179.       text-align: center;

  180.       margin-top: 3vh;

  181.       .billCount_left{

  182.         width: 50%;

  183.         color: #1B5DEA;

  184.         p{

  185.           &:nth-child(1){

  186.             font-size: .45rem;

  187.           }

  188.         }

  189.       }

  190.       .billCount_right{

  191.         width: 50%;

  192.         color: #FF5E00;

  193.         p{

  194.           &:nth-child(1){

  195.             font-size: .45rem;

  196.           }

  197.         }

  198.       }

  199.     }

  200.   }

  201. 

  202.   /*内容*/

  203.   .main{

  204.     width: 94%;

  205.     margin: 0 auto;

  206.     .main_content_right_list{

  207.       margin-top: 2vh;

  208.       padding: 1.5vh 3%;

  209.       background: #ffffff;

  210.       border-radius: 10PX;

  211.       /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/

  212.       /deep/ .van-cell{

  213.         padding: 0;

  214.         margin-top: 10PX;

  215.       }

  216.       .main_content_right_list_header{

  217.         display: flex;

  218.         margin-bottom: 1vh;

  219.         align-items: center;

  220.         p{

  221.           padding: 3PX 10PX;

  222.           border-radius: 8PX;

  223.           &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}

  224.           &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}

  225.         }

  226.         .on{

  227.           color: #334281;

  228.           border-radius: initial;

  229.           padding:0 0 0 20PX;

  230.           font-size: 0.35rem;

  231.           background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center

  232.         }

  233.         .off{

  234.           color: #E60505;

  235.           border-radius: initial;

  236.           margin-left: auto;

  237.           padding:0 0 0 15PX;

  238.           background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center

  239.         }

  240.       }

  241.       .main_content_right_list_center{

  242.         display: flex;

  243.         img{

  244.           border-radius: 15PX;

  245.           margin-right: 4%;

  246.         }

  247.         .main_content_right_list_content{

  248.           display: flex;

  249.           flex-direction:column;

  250.           justify-content: space-between;

  251.           .tt{

  252.             color: #333333;

  253.             font-size: .35rem;

  254.           }

  255.           .tab{

  256.             display: flex;

  257.             justify-content: space-between;

  258.             p{

  259.               &:nth-child(1){

  260.                 flex: 1;

  261.                 color: #FF5E00;

  262.                 span{

  263.                   font-size: .4rem;

  264.                 }

  265.               }

  266.               &:nth-child(2){

  267.                 span{

  268.                   display: inline-block;

  269.                   text-align: center;

  270.                   padding: 2PX 5PX;

  271.                   &:nth-child(1){

  272.                     color: #497CE8;

  273.                     background: #E2E9FD;

  274.                     border-top-left-radius: 10PX;

  275.                   }

  276.                   &:nth-child(2){

  277.                     color: #ffffff;

  278.                     background-image: linear-gradient(to right , #5D87FA , #5FD5F5);

  279.                     border-bottom-right-radius: 10PX;

  280.                   }

  281.                 }

  282.               }

  283.             }

  284.           }

  285.           .name{

  286.             color: #7A7A7A;

  287.             span{

  288.               &:nth-child(2){

  289.                 margin-left: 5PX;

  290.               }

  291.             }

  292.           }

  293.         }

  294.       }

  295.     }

  296.   }

  297. 

  298.   /*弹出层*/

  299.   .popup_header{

  300.     display: flex;

  301.     align-items: center;

  302.     color: #334281;

  303.     font-size: .38rem;

  304.     margin-bottom: 15PX;

  305.     img{

  306.       margin-right: 10PX;

  307.       display: block;

  308.     }

  309.     p{

  310.       line-height: 1;

  311.     }

  312.   }

  313.   .popup_content{

  314.     .selected{

  315.       .on{

  316.         font-size: .35rem;

  317.         padding: 10PX 20PX;

  318.         color: #334281;

  319.         background: url("../../../../static/images/agriculturalTrusteeship/socialization/down.png")left center no-repeat;

  320.       }

  321.       .off{

  322.         font-size: .35rem;

  323.         padding: 10PX 20PX;

  324.         color: #334281;

  325.         background: url("../../../../static/images/agriculturalTrusteeship/socialization/right.png")left center no-repeat;

  326.       }

  327.       .options{

  328.         display: flex;

  329.         justify-content: space-between;

  330.         flex-wrap: wrap;

  331.         p{

  332.           background: #F5F5F5;

  333.           color: #8F8F8F;

  334.           width: 30%;

  335.           padding: 5PX 0;

  336.           border-radius: 5PX;

  337.           text-align: center;

  338.           &.active{

  339.             background: #E2E9FD;

  340.             color: #1B5DEA;

  341.           }

  342.         }

  343.       }

  344.     }

  345.   }

  346.   .popup_date{

  347.     display: flex;

  348.     justify-content: space-around;

  349.     align-items: center;

  350.     p{

  351.       border-radius: 1rem;

  352.       padding: 5PX 0PX 5PX 5%;

  353.       width: 45%;

  354.       text-align: center;

  355.       color: #1B5DEA;

  356.       background:#E2E9FD url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 15% center no-repeat;

  357.     }

  358.   }

  359.   .popup_btn{

  360.     position: fixed;

  361.     bottom: 5vh;

  362.     display: flex;

  363.     align-items: center;

  364.     justify-content: space-between;

  365.     width: 94%;

  366.     left: 3%;

  367.     p{

  368.       width: 30%;

  369.       padding: 7PX 0;

  370.       border-radius: 5rem;

  371.       text-align: center;

  372.       font-size: .35rem;

  373.       box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);

  374.       &:nth-child(1){

  375.         background: #1B5DEA;

  376.         color: #ffffff;

  377.       }

  378.       &:nth-child(2){

  379.         border: 1PX solid #1B5DEA;

  380.         color: #1B5DEA;

  381.       }

  382.       &:nth-child(3){

  383.         background-image: linear-gradient(to right , #6E93F3 , #54C6E4);

  384.         color: #ffffff;

  385.       }

  386.     }

  387.   }

  388. .main_btn{

  389.   display: flex;

  390.   justify-content: space-around;

  391.   padding: 4vh 0;

  392.   p{

  393.     font-size: .4rem;

  394.     width: 35%;

  395.     text-align: center;

  396.     padding: 10PX 0;

  397.     border-radius: 5rem;

  398.     box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);

  399.     &:nth-child(1){

  400.       background: #334281;

  401.       color: #ffffff;

  402.     }

  403.     &:nth-child(2){

  404.       background: #D1D5E4;

  405.       color: #334281;

  406.     }

  407.   }

  408. }

  409. </style>