zhangzl
/
nsgk_mobile
2
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
859 Commitit
7 Branchit
79 MiB
 
 
Puu: 91b4436f92
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '91b4436f92'
${ noResults }
nsgk_mobile/src/views/agriculturalTrusteeship/buyer/billDetail3.vue

369 rivejä
11 KiB
Raaka Blame Historia 

  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.         <p class="type">已评分<span>评分时间：{{supplyDemand.updateTime}}</span></p>

  17.         <div class="main_content_right_list first">

  18.           <div class="main_content_right_list_header">

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

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

  21.             <p>服务</p>

  22.           </div>

  23. 

  24.           <div class="main_content_right_list_center">

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

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

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

  28.             </template>

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

  30.             <div class="main_content_right_list_content">

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

  32.               <div class="tab">

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

  34.               </div>

  35.             </div>

  36.           </div>

  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.realityServiceNum" />

  48.           <van-cell title="实际服务费用" :border="false" :value="supplyDemand.realityServiceMoney" />

  49.           <van-cell title="服务评分" :border="false" :value="supplyDemand.serviceScore" />

  50.           <van-cell title="服务评价" :border="false" :value="supplyDemand.serviceAssess" />

  51.         </div>

  52. 

  53.         <div class="main_content_right_list">

  54.           <div class="main_content_right_list_header">

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

  56.           </div>

  57. 

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

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

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

  61.         </div>

  62. 

  63.         <div class="main_content_right_list">

  64.           <div class="main_content_right_list_header">

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

  66.           </div>

  67. 

  68.           <van-cell title="接单时间" :border="false" value="接单时间" />

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

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

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

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

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

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

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

  76.         </div>

  77. 

  78.     </div>

  79. 

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

  81.   </div>

  82. </template>

  83. <script>

  84.   import Cookies from "js-cookie";

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

  86. 

  87.   export default {

  88.     name: "agriculturalTrusteeshipIndex",

  89.     data() {

  90.       return {

  91.         activeKey: 0,

  92.         active: 0,

  93.         loading: false,

  94.         finished: false,

  95.         show:true,

  96.         activeNames:[],

  97.         cropTypeOptions:[],

  98.         orderStatusOptions:[],

  99.         productList:[],

  100.         supplyDemand:{}

  101.       };

  102.     },

  103.     created() {

  104.       let query = {

  105.         parentId : null,

  106.         tree:true

  107.       }

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

  109.         this.productList = response.data;

  110.       });

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

  112.         this.cropTypeOptions = response.data;

  113.       });

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

  115.         this.orderStatusOptions = response.data;

  116.       });

  117.       this.getDetail();

  118.     },

  119.     methods: {

  120.       getDetail(){

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

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

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

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

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

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

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

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

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

  130.             }

  131.           }

  132.           this.supplyDemand = response.data;

  133.         });

  134.       },

  135.     },

  136.   }

  137. </script>

  138. <style scoped lang="scss">

  139. .home_wrapper{

  140. 

  141. }

  142.   /*头部*/

  143.   .header{

  144.     display: flex;

  145.     align-items: center;

  146.     justify-content: space-between;

  147.     padding: 2vh 4% 0vh;

  148.   }

  149. 

  150.   .search{

  151.     display: flex;

  152.     justify-content: space-between;

  153.     align-items: center;

  154.     border: 1px solid #6E93F3;

  155.     padding: 1PX 1PX 1PX 12PX ;

  156.     border-radius: 50PX;

  157.     margin-right: 30PX;

  158.     flex: 1;

  159.     input{

  160.       flex: 1;

  161.       background: transparent;

  162.       margin-left: 10PX;

  163.     }

  164.   }

  165.   /*导航栏目*/

  166.   .nav{

  167.     width: 94%;

  168.     margin: 0 auto;

  169.     margin-top: 2vh;

  170.     padding: 1.5vh 3%;

  171.     background: #ffffff;

  172.     border-radius: 10PX;

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

  174.     .date{

  175.       display: flex;

  176.       justify-content: space-around;

  177.       align-items: center;

  178.       p{

  179.         border-radius: 1rem;

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

  181.         width: 40%;

  182.         text-align: center;

  183.         color: #334281;

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

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

  186.       }

  187.     }

  188.     .billCount {

  189.       display: flex;

  190.       text-align: center;

  191.       margin-top: 3vh;

  192.       .billCount_left{

  193.         width: 50%;

  194.         color: #1B5DEA;

  195.         p{

  196.           &:nth-child(1){

  197.             font-size: .45rem;

  198.           }

  199.         }

  200.       }

  201.       .billCount_right{

  202.         width: 50%;

  203.         color: #FF5E00;

  204.         p{

  205.           &:nth-child(1){

  206.             font-size: .45rem;

  207.           }

  208.         }

  209.       }

  210.     }

  211.   }

  212. 

  213.   /*内容*/

  214.   .main{

  215.     width: 94%;

  216.     margin: 0 auto;

  217.     padding-bottom: 2vh;

  218.     .main_content_right_list{

  219.       padding: 1.5vh 3%;

  220.       background: #ffffff;

  221.       border-radius: 10PX;

  222.       margin-bottom: 2vh;

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

  224.       &.first{

  225.         border-top-left-radius: initial;

  226.         border-top-right-radius: initial;

  227.       }

  228.       /deep/ .van-cell{

  229.         padding: 0;

  230.         margin-top: 10PX;

  231.       }

  232.       .main_content_right_list_header{

  233.         display: flex;

  234.         margin-bottom: 1vh;

  235.         align-items: center;

  236.         p{

  237.           padding: 3PX 10PX;

  238.           border-radius: 8PX;

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

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

  241.         }

  242.         .on{

  243.           color: #334281;

  244.           border-radius: initial;

  245.           padding:0 0 0 20PX;

  246.           font-size: 0.35rem;

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

  248.         }

  249.         .off{

  250.           color: #E60505;

  251.           border-radius: initial;

  252.           margin-left: auto;

  253.           padding:0 0 0 15PX;

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

  255.         }

  256.       }

  257.       .main_content_right_list_center{

  258.         display: flex;

  259.         img{

  260.           border-radius: 15PX;

  261.           margin-right: 4%;

  262.         }

  263.         .main_content_right_list_content{

  264.           display: flex;

  265.           flex-direction:column;

  266.           justify-content: space-between;

  267.           .tt{

  268.             color: #333333;

  269.             font-size: .35rem;

  270.           }

  271.           .tab{

  272.             display: flex;

  273.             justify-content: space-between;

  274.             p{

  275.               &:nth-child(1){

  276.                 flex: 1;

  277.                 color: #FF5E00;

  278.                 span{

  279.                   font-size: .4rem;

  280.                 }

  281.               }

  282.               &:nth-child(2){

  283.                 span{

  284.                   display: inline-block;

  285.                   text-align: center;

  286.                   padding: 2PX 5PX;

  287.                   &:nth-child(1){

  288.                     color: #497CE8;

  289.                     background: #E2E9FD;

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

  291.                   }

  292.                   &:nth-child(2){

  293.                     color: #ffffff;

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

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

  296.                   }

  297.                 }

  298.               }

  299.             }

  300.           }

  301.           .name{

  302.             color: #7A7A7A;

  303.             span{

  304.               &:nth-child(2){

  305.                 margin-left: 5PX;

  306.               }

  307.             }

  308.           }

  309.         }

  310.       }

  311.     }

  312.   }

  313. 

  314.   /*弹出层*/

  315. .main_btn{

  316.   display: flex;

  317.   justify-content: space-around;

  318.   padding: 4vh 0;

  319.   p{

  320.     font-size: .4rem;

  321.     width: 35%;

  322.     text-align: center;

  323.     padding: 10PX 0;

  324.     border-radius: 5rem;

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

  326.     &:nth-child(1){

  327.       background: #334281;

  328.       color: #ffffff;

  329.     }

  330.     &:nth-child(2){

  331.       background: #D1D5E4;

  332.       color: #334281;

  333.     }

  334.   }

  335. }

  336. .footer{

  337.   display: flex;

  338.   justify-content: space-between;

  339.   align-items: center;

  340.   background: #ffffff;

  341.   position: fixed;

  342.   bottom: 0;

  343.   padding: 1vh 4%;

  344.   width: 100%;

  345.   p{

  346.     color: #989898;

  347.     background: #F2F2F2;

  348.     padding: 5PX 10PX;

  349.     text-align: center;

  350.     border-radius: 8PX;

  351.   }

  352. }

  353.   .type{

  354.     background: #22D863;

  355.     font-size: .4rem;

  356.     display: flex;

  357.     justify-content: space-between;

  358.     margin-top: 2vh;

  359.     color: #ffffff;

  360.     padding: 10PX 3%;

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

  362.     border-top-right-radius: 10PX;

  363.     align-items: center;

  364.     span{

  365.       font-size: .35rem;

  366.     }

  367.   }

  368. </style>