zhangzl
/
nsgk_mobile
2
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
移动端
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
884 커밋
7 브랜치
80 MiB
 
 
트리: 4a462ce8ae
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from '4a462ce8ae'
${ noResults }
nsgk_mobile/src/views/agriculturalTrusteeship/socialization/billOrder.vue

434 lines
12 KiB
Raw Blame 히스토리 

  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.contractionName}}</p>

  31.             <div class="tab">

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

  33.             </div>

  34.           </div>

  35.         </div>

  36.         <van-cell title="买方名称" :border="false" :value="supplyDemand.bookName" />

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

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

  39.       </div>

  40. 

  41.       <div class="main_content_right_list">

  42.         <div class="main_content_right_list_header">

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

  44.         </div>

  45. 

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

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

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

  49.       </div>

  50. 

  51.       <div class="main_content_right_list">

  52.         <div class="main_content_right_list_header">

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

  54.         </div>

  55. 

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

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

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

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

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

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

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

  63.       </div>

  64. 

  65.     </div>

  66. 

  67.     <div class="main_btn">

  68.       <p @click="clickYes">接单</p>

  69.       <p @click="clickNo">拒单</p>

  70.     </div>

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

  72.   </div>

  73. </template>

  74. <script>

  75.   import Cookies from "js-cookie";

  76.   import {productTypes, supplyorderGet , supplyorderFinish , supplyorderReject} from "@/api/agriculturalTrusteeship";

  77. 

  78.   export default {

  79.     name: "agriculturalTrusteeshipIndex",

  80.     data() {

  81.       return {

  82.         activeKey: 0,

  83.         active: 0,

  84.         loading: false,

  85.         finished: false,

  86.         show:true,

  87.         activeNames:[],

  88.         cropTypeOptions:[],

  89.         orderStatusOptions:[],

  90.         productList:[],

  91.         supplyDemand:{}

  92.       };

  93.     },

  94.     created() {

  95.       let query = {

  96.         parentId : null,

  97.         tree:false

  98.       }

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

  100.         this.productList = response.data;

  101.       });

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

  103.         this.cropTypeOptions = response.data;

  104.       });

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

  106.         this.orderStatusOptions = response.data;

  107.       });

  108.       this.getDetail();

  109.     },

  110.     methods: {

  111.       getDetail(){

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

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

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

  115.           var that = this ;

  116.           setTimeout(function () {

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

  118.           },1000)

  119. 

  120. 

  121.           response.data.countMoney = response.data.unitPrice*response.data.serviceNum;

  122. 

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

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

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

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

  127.             }

  128.           }

  129.           this.supplyDemand = response.data;

  130.         });

  131.       },

  132.       clickYes(){

  133.         supplyorderFinish(this.$route.query.id).then(response => {

  134.           this.$notify({ type: 'success', message: '接单成功' });

  135.           setTimeout(function(){

  136.             history.back(-1);

  137.           },2000)

  138.         });

  139.       },

  140.       clickNo(){

  141.         supplyorderReject(this.$route.query.id).then(response => {

  142.           this.$notify({ type: 'success', message: '拒单成功' });

  143.           setTimeout(function(){

  144.             history.back(-1);

  145.           },2000)

  146.         });

  147.       }

  148.     },

  149.   }

  150. </script>

  151. <style scoped lang="scss">

  152.   .home_wrapper{

  153. 

  154.   }

  155.   /*头部*/

  156.   .header{

  157.     display: flex;

  158.     align-items: center;

  159.     justify-content: space-between;

  160.     padding: 2vh 4% 0vh;

  161.   }

  162. 

  163.   .search{

  164.     display: flex;

  165.     justify-content: space-between;

  166.     align-items: center;

  167.     border: 1px solid #6E93F3;

  168.     padding: 1PX 1PX 1PX 12PX ;

  169.     border-radius: 50PX;

  170.     margin-right: 30PX;

  171.     flex: 1;

  172.     input{

  173.       flex: 1;

  174.       background: transparent;

  175.       margin-left: 10PX;

  176.     }

  177.   }

  178.   /*导航栏目*/

  179.   .nav{

  180.     width: 94%;

  181.     margin: 0 auto;

  182.     margin-top: 2vh;

  183.     padding: 1.5vh 3%;

  184.     background: #ffffff;

  185.     border-radius: 10PX;

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

  187.     .date{

  188.       display: flex;

  189.       justify-content: space-around;

  190.       align-items: center;

  191.       p{

  192.         border-radius: 1rem;

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

  194.         width: 40%;

  195.         text-align: center;

  196.         color: #334281;

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

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

  199.       }

  200.     }

  201.     .billCount {

  202.       display: flex;

  203.       text-align: center;

  204.       margin-top: 3vh;

  205.       .billCount_left{

  206.         width: 50%;

  207.         color: #1B5DEA;

  208.         p{

  209.           &:nth-child(1){

  210.             font-size: .45rem;

  211.           }

  212.         }

  213.       }

  214.       .billCount_right{

  215.         width: 50%;

  216.         color: #FF5E00;

  217.         p{

  218.           &:nth-child(1){

  219.             font-size: .45rem;

  220.           }

  221.         }

  222.       }

  223.     }

  224.   }

  225. 

  226.   /*内容*/

  227.   .main{

  228.     width: 94%;

  229.     margin: 0 auto;

  230.     .main_content_right_list{

  231.       margin-top: 2vh;

  232.       padding: 1.5vh 3%;

  233.       background: #ffffff;

  234.       border-radius: 10PX;

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

  236.       /deep/ .van-cell{

  237.         padding: 0;

  238.         margin-top: 8PX;

  239.       }

  240.       .main_content_right_list_header{

  241.         display: flex;

  242.         margin-bottom: 1vh;

  243.         align-items: center;

  244.         p{

  245.           padding: 3PX 10PX;

  246.           border-radius: 8PX;

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

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

  249.         }

  250.         .on{

  251.           color: #334281;

  252.           border-radius: initial;

  253.           padding:0 0 0 20PX;

  254.           font-size: 0.35rem;

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

  256.         }

  257.         .off{

  258.           color: #E60505;

  259.           border-radius: initial;

  260.           margin-left: auto;

  261.           padding:0 0 0 15PX;

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

  263.         }

  264.       }

  265.       .main_content_right_list_center{

  266.         display: flex;

  267.         img{

  268.           border-radius: 15PX;

  269.           margin-right: 4%;

  270.         }

  271.         .main_content_right_list_content{

  272.           display: flex;

  273.           flex-direction:column;

  274.           justify-content: space-between;

  275.           .tt{

  276.             color: #333333;

  277.             font-size: .35rem;

  278.           }

  279.           .tab{

  280.             display: flex;

  281.             justify-content: space-between;

  282.             p{

  283.               &:nth-child(1){

  284.                 flex: 1;

  285.                 color: #FF5E00;

  286.                 span{

  287.                   font-size: .4rem;

  288.                 }

  289.               }

  290.               &:nth-child(2){

  291.                 span{

  292.                   display: inline-block;

  293.                   text-align: center;

  294.                   padding: 2PX 5PX;

  295.                   &:nth-child(1){

  296.                     color: #497CE8;

  297.                     background: #E2E9FD;

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

  299.                   }

  300.                   &:nth-child(2){

  301.                     color: #ffffff;

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

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

  304.                   }

  305.                 }

  306.               }

  307.             }

  308.           }

  309.           .name{

  310.             color: #7A7A7A;

  311.             span{

  312.               &:nth-child(2){

  313.                 margin-left: 5PX;

  314.               }

  315.             }

  316.           }

  317.         }

  318.       }

  319.     }

  320.   }

  321. 

  322.   /*弹出层*/

  323.   .popup_header{

  324.     display: flex;

  325.     align-items: center;

  326.     color: #334281;

  327.     font-size: .38rem;

  328.     margin-bottom: 15PX;

  329.     img{

  330.       margin-right: 10PX;

  331.       display: block;

  332.     }

  333.     p{

  334.       line-height: 1;

  335.     }

  336.   }

  337.   .popup_content{

  338.     .selected{

  339.       .on{

  340.         font-size: .35rem;

  341.         padding: 10PX 20PX;

  342.         color: #334281;

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

  344.       }

  345.       .off{

  346.         font-size: .35rem;

  347.         padding: 10PX 20PX;

  348.         color: #334281;

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

  350.       }

  351.       .options{

  352.         display: flex;

  353.         justify-content: space-between;

  354.         flex-wrap: wrap;

  355.         p{

  356.           background: #F5F5F5;

  357.           color: #8F8F8F;

  358.           width: 30%;

  359.           padding: 5PX 0;

  360.           border-radius: 5PX;

  361.           text-align: center;

  362.           &.active{

  363.             background: #E2E9FD;

  364.             color: #1B5DEA;

  365.           }

  366.         }

  367.       }

  368.     }

  369.   }

  370.   .popup_date{

  371.     display: flex;

  372.     justify-content: space-around;

  373.     align-items: center;

  374.     p{

  375.       border-radius: 1rem;

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

  377.       width: 45%;

  378.       text-align: center;

  379.       color: #1B5DEA;

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

  381.     }

  382.   }

  383.   .popup_btn{

  384.     position: fixed;

  385.     bottom: 5vh;

  386.     display: flex;

  387.     align-items: center;

  388.     justify-content: space-between;

  389.     width: 94%;

  390.     left: 3%;

  391.     p{

  392.       width: 30%;

  393.       padding: 7PX 0;

  394.       border-radius: 5rem;

  395.       text-align: center;

  396.       font-size: .35rem;

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

  398.       &:nth-child(1){

  399.         background: #1B5DEA;

  400.         color: #ffffff;

  401.       }

  402.       &:nth-child(2){

  403.         border: 1PX solid #1B5DEA;

  404.         color: #1B5DEA;

  405.       }

  406.       &:nth-child(3){

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

  408.         color: #ffffff;

  409.       }

  410.     }

  411.   }

  412.   .main_btn{

  413.     display: flex;

  414.     justify-content: space-around;

  415.     padding: 4vh 0;

  416.     p{

  417.       font-size: .4rem;

  418.       width: 35%;

  419.       text-align: center;

  420.       padding: 10PX 0;

  421.       border-radius: 5rem;

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

  423.       &:nth-child(1){

  424.         background: #334281;

  425.         color: #ffffff;

  426.       }

  427.       &:nth-child(2){

  428.         background: #D1D5E4;

  429.         color: #334281;

  430.       }

  431.     }

  432.   }

  433. </style>