服务单接口联调

queenwuli

2020-12-27 cc499362b6eba119792e113796e4da029a70fc6d

 hive-app/pages/workbench/confirmOrder.vue

@@ -1,40 +1,39 @@
<template>
   <!-- 确认订单 -->
   <view class="container">
      <view class="header flex align-center">
         <image class="header-img" src="../../static/images/head-img.jpg"></image>
         <view class="ml-10">
            <view class="font-16">
               <text>李某</text>
               <text class="ml-20">15588881111</text>
      <view class="header">
         <image class="header-img" :src="memberInfo.photo?memberInfo.photo:'../../static/images/default-avatar.png'"></image>
         <view>
            <view>
               <text>{{memberInfo.vipName}}</text>
               <text class="ml-20">{{memberInfo.phone}}</text>
            </view>
            <text class="font-14 gray mt-5">普通会员</text>
            <text class="font-14 gray mt-5">{{memberInfo.vipLevel || '-'}}</text>
         </view>
      </view>
      <view class="content flex flex-v mt-10">
         <view class="content-row flex justify-between align-center flex-1" v-for="item in list">
      <view class="content">
         <view class="list-item" v-for="item in list">
            <view class="flex align-center">
               <image class="centent-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
               <view class="flex flex-v font-12 ml-10">
               <image class="img" mode="aspectFill" :src="item.img?item.img:'../../static/images/no-img.png'"></image>
               <view>
                  <text>{{item.name}}</text>
                  <text class="gray">×{{item.num}}</text>
                  <text class="gray block mt-5">×{{item.num}}</text>
               </view>
            </view>
            <view>
               <text>￥{{item.price}}</text>
               <text class="font-14">￥{{item.price}}</text>
            </view>
         </view>
         <view class="content-row flex justify-between">
            <text class="blue">共5件商品</text>
            <view class="flex align-center">
               <text>合计:</text>
               <text class="red ml-10">￥90,000.00</text>
            </view>
         <view class="list-footer">
            <text class="blue">共{{totalCount}}件商品</text>
            <text>
               合计：<text class="price">￥{{totalAmount}}</text>
            </text>
         </view>
      </view>
      <navigator url="./submitSucceed">
         <button class="sticky-footer blue-btn">确认提交</button>
      </navigator>
      <view class="footer">
         <button :disabled="isDisabled" class="blue-btn" @click="createOrder">确认提交</button>
      </view>
   </view>
</template>

@@ -42,13 +41,68 @@
   export default{
      data(){
         return{
            list: []
            memberInfo: {},
            list: [],
            id:'',
            isDisabled: false
         }
      },
      onLoad(options) {
         this.list = JSON.parse(decodeURIComponent(options.list))
         this.id = options.id;
         this.list = JSON.parse(decodeURIComponent(options.list));
         this.loadMemberInfo();
      },
      computed:{
         // 购物车总数量
         totalCount(){
            let count = 0;
            this.list.forEach((item) => {
               count += item.num;
            })
            return count;
         },
         // 购物车总金额
         totalAmount(){
            let amount = 0;
            this.list.forEach((item) => {
               amount += item.price * item.num;
            })
            return amount;
         }
      },
      methods:{
         loadMemberInfo(){
            this.$httpUtils.request('/api/vip/findVipInfoById/'+this.id).then((res) => {
               if(res.status == 200){
                  this.memberInfo = res.mapInfo.vipInfo;
               }
            })
         },
         createOrder(){
            this.isDisabled = true;
            let orderList = this.list.map((item) => {
               return {
                  "count": item.num,
                  "goodsId": item.id,
                  "goodsType": item.goodsType,
                  "isFree": item.isPresent
               }
            })
            this.$httpUtils.request('/api/order/createOrder', {
               items: orderList,
               vipId: this.id
            }, 'POST').then((res) => {
               if(res.status == 200){
                  uni.navigateTo({
                     url: './submitSucceed'
                  })
               }
               this.$toast.info(res.info);
               this.isDisabled = false;
            }).catch(() => {
               this.isDisabled = false;
            })
         }
      }
   }
</script>
@@ -58,37 +112,61 @@
      background: #F6F6F8;
   }
   .container{
      /* padding: 10px; */
      padding-top: 10px;
      padding-bottom: 70px;
   }
   .header{
      display: flex;
      align-items: center;
      border: 1px solid #EDEAF4;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      padding: 10px 10px;
      background: #FFFFFF;
      font-size: 16px;
   }
   .header-img{
      width: 48px;
      height: 48px;
      border-radius: 50%;
   }
   .centent-img{
      width: 36px;
      height: 36px;
      border-radius: 4px;
      margin-right: 10px;
   }
   .content{
      margin: 10px 10px;
      padding: 0 10px 0;
      background: #FFFFFF;
      border: 1px solid #EDEAF4;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      border-radius: 4px;
      margin: 10px 10px;
      padding: 0 10px 0;
   }
   .content-row{
   .list-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #EDEAF4;
      padding: 14px 5px;
      padding: 12px 5px;
      font-size: 13px;
   }
   .content-row:nth-last-child(1){
      border: 0;
   .list-item .img{
      width: 40px;
      height: 40px;
      border-radius: 4px;
      margin-right: 10px;
   }
   .list-footer{
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      font-size: 16px;
   }
   .list-footer .price{
      color: #FA5151;
      font-weight: 700;
   }
   .footer{
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: 0;
      padding-bottom: 20px;
      background: #F6F6F8;
   }
</style>