kxmall-ui/kxmall-rider-ui/pages/order/order1.vue

<template>
  <view class="app">
    <!-- <view class="header">
			<view class="header_inner">
				<image src="../../static/order/clock.png"></image>
				<text class="txt1">配送剩余时间<text class="txt2">{{preTime}}</text></text>
			</view>
			<view class="tip">你需要在{{sdTime=='aN:aN'?'':sdTime}}前送达</view>
		</view> -->
    <view class="goods">
      <view class="goods_tit">商品信息</view>
      <view class="goods_details">
        <view class="detials_l">
          <scroll-view scroll-x="true">
            <image mode="aspectFit" v-for="(item,index) in details.productList" :key="index"
              :src="JSON.parse(item.img)[0].url" class="details_img"></image>
          </scroll-view>
        </view>
        <view class="detials_r">
          <view class="detials_r_inner">
            <text style="margin-left: 20rpx;">共{{count}}件</text>
            <image @click="open()" src="../../static/order/dian.png"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="count">
      <!-- <view class="count_item">
        <text class="txt3">配送费</text>
        <text class="txt4">{{details.freightPrice}}元</text>
      </view>
      <view class="count_item nobor">
        <text class="txt3">商品费用</text>
        <text class="txt4 txt5">￥{{details.totalPrice}}</text>
      </view>
      <view class="count_item nobor">
        <text class="txt3">合计</text>
        <text
          class="txt4 txt5">￥{{ (parseFloat(details.totalPrice) + parseFloat(details.freightPrice)).toFixed(2)}}</text>
      </view> -->

      <view class="count_item">
        <text class="txt3">订单编号</text>
        <text class="txt4">{{ details.orderId }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">订单状态</text>
        <text class="txt4">{{ getStatus(details.status) }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">下单时间</text>
        <text class="txt4">{{ details.createTime }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">要求送达时间</text>
        <text class="txt4">{{ details.predictTime }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">备注</text>
        <text class="txt4">{{ details.remark }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">客户姓名</text>
        <text class="txt4">{{ details.realName }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">客户电话</text>
        <text class="txt4">{{ details.userPhone }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">客户地址</text>
        <text class="txt4">{{ details.userAddress }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">支付状态</text>
        <text class="txt4">{{ getStatus(details.status) }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">支付方式</text>
        <text class="txt4">{{ details.payTypeName }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">支付金额</text>
        <text class="txt4 txt5">￥{{ details.payPrice }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">交易号</text>
        <text class="txt4">{{ details.payId }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">支付时间</text>
        <text class="txt4">{{ details.payTime }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">运费</text>
        <text class="txt4 txt5">￥{{ details.freightPrice }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">优惠</text>
        <text
          class="txt4 txt5">￥{{ (parseFloat(details.originalTotalPrice)-parseFloat(details.payPrice) + -parseFloat(details.freightPrice)).toFixed(2) }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">商品金额</text>
        <text class="txt4 txt5">￥{{ details.originalTotalPrice }}</text>
      </view>
      <view class="count_item">
        <text class="txt3">总金额</text>
        <text class="txt4 txt5">￥{{ details.payPrice }}</text>
      </view>
    </view>
    <!-- <view class="count">
      <view class="count_item">
        <text class="txt3">配送信息</text>
        <text class="txt4"></text>
      </view>
      <view class="count_item">
        <text class="txt3 txt6">收货人</text>
        <text class="txt4 txt5 txt7">{{details.consignee}}</text>
      </view>
      <view class="count_item">
        <text class="txt3 txt6">联系电话</text>
        <text class="txt4 txt5 txt7">{{details.phone}}</text>
      </view>
      <view class="count_item nobor">
        <text class="txt3 txt6">收货地址</text>
        <text class="txt4 txt5 txt7">{{details.province}}{{details.city}}{{details.county}}{{details.address}}</text>
      </view>
    </view> -->
    <!-- <view class="count">
      <view class="count_item">
        <text class="txt3">订单信息</text>
        <text class="txt4"></text>
      </view>
      <view class="count_item">
        <text class="txt3 txt6">订单编号</text>
        <text class="txt4 txt5 txt7">{{details.orderNo}}<text style="padding-left: 20rpx;color: #3662DD;"
            @click="copy(details.orderNo)">复制</text> </text>
      </view>
      <view class="count_item">
        <text class="txt3 txt6">备注信息</text>
        <text class="txt4 txt5 txt7">{{details.mono}}</text>
      </view>
      <view class="count_item">
        <text class="txt3 txt6">支付方式</text>
        <text class="txt4 txt5 txt7">{{details.payChannel}}</text>
      </view>
      <view class="count_item">
        <text class="txt3 txt6">下单时间</text>
        <text class="txt4 txt5 txt7">{{orderCreateTime}}</text>
      </view>
      <view class="count_item nobor">
        <text class="txt3 txt6">支付时间</text>
        <text class="txt4 txt5 txt7">{{payTime}}</text>
      </view>
    </view> -->
    <uni-popup ref="popup" type="bottom">
      <view class="popup_mask">
        <view class="popup_mask_tit">
          <text class="pop_t1">配送清单</text>
          <text class="pop_t2">共{{count}}件</text>
          <image @click="closePop()" src="../../static/order/mask_close.png"></image>
        </view>
        <view class="pop_item" v-for="(item,index) in details.productList" :key="'dt'+index">
          <view class="pop_item_l">
            <view class="item_l_l">
              <image mode="aspectFit" class="pil_img" :src="JSON.parse(item.img)[0].url"></image>
            </view>
            <view class="item_l_r">
              <view>{{item.productTitle}}</view>
              <view style="padding-top: 10rpx;">x{{item.num}}{{item.unitName}}</view>
            </view>
            <!-- <image class="pil_img" src="../../static/login/logo.png"></image>
						<text>上海小白菜\n<text>x2</text> </text> -->
          </view>
          <view class="pop_item_r">
            ￥{{(item.num*item.price).toFixed(2)}}
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import uniPopup from "@/components/uni-popup/uni-popup.vue";
  import {
    mapState
  } from 'vuex';
  export default {
    components: {
      uniPopup
    },
    computed: {
      ...mapState(['token', 'userInfo'])
    },
    data() {
      return {
        goods: [1, 2, 3, 4, 5],
        id: '',
        details: '',
        preTime: '',
        count: 0,
        sdTime: '',
        orderCreateTime: '',
        payTime: '',
        interval: '',
        flag: false,
      }
    },
    onLoad(e) {
      this.getDetails(e.id)
    },
    onHide() {
      clearInterval(this.interval)
    },
    methods: {
      getStatus(s) {
        const status = {
          14: '待配货',
          16: '配货中',
          20: '待配送',
          30: '配送中',
          50: '已完成',
          40: '已完成',
          32: '配送异常',
          34: '超时订单',
          10: '待支付',
          70: '已退款',
          80: '已取消',
          90: '已取消(系统)'
        }
        return status[s]
      },
      closePop() {
        this.$refs.popup.close()
      },
      open() {
        this.$refs.popup.open()
      },
      copy(msg) {
        uni.setClipboardData({
          data: msg,
          success: function() {
            uni.showToast({
              title: '复制成功',
              icon: 'none',
              duration: 1500
            })
          }
        });
      },
      getDetails(id) {
        let that = this
        that.request("get", "order/storeOrder/" + id, that.token).then(res => {
          if (res.code == 200) {
            // let num = 0
            // for (let i = 0; i < res.data.productList.length; i++) {
            //   res.data.productList[i].amount = parseInt(res.data.productList[i].amount)
            //   num = num + parseInt(res.data.productList[i].amount)
            // }
            that.details = res.data
            // console.log(that.details)
            that.count = res.data.productList.length
            that.orderCreateTime = that.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(that.details.orderCreateTime))
            that.payTime = that.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(that.details.payTime))
            that.sdTime = that.dateFtt("hh:mm", new Date(that.details.predictTime))
            // console.log(that.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(that.details.predictTime)))
            that.preTime = new Date(that.details.predictTime).getTime() >= new Date().getTime() ? that.dateFtt(
              "hh:mm:ss", new Date(that.details.predictTime)) : 0
            if (new Date(that.details.predictTime).getTime() >= new Date().getTime()) {
              that.preTime = true
            }
          }
        })

        that.interval = setInterval(function() {
          // console.log(new Date(that.details.predictTime).getTime()>=new Date().getTime())
          if (new Date(that.details.predictTime).getTime() > new Date().getTime()) {

            let d = new Date(that.details.predictTime).getTime() - new Date().getTime()
            // that.preTime = that.dateFtt("hh:mm:ss", d)
            //计算出相差天数
            var days = Math.floor(d / (24 * 3600 * 1000))

            //计算出小时数

            var leave1 = d % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
            var hours = Math.floor(leave1 / (3600 * 1000))
            //计算相差分钟数
            var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
            var minutes = Math.floor(leave2 / (60 * 1000))


            //计算相差秒数
            var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
            var seconds = Math.round(leave3 / 1000)
            that.preTime = days > 0 ? (days + ":" + hours + ":" + minutes + ":" + seconds) : (hours > 0 ? (hours +
              ":" + minutes + ":" + seconds) : (minutes + ":" + seconds))
            //alert(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒")
          } else {
            that.preTime = 0
            console.log(that.flag)
            if (that.flag == true) {
              let nav_index = 2
              uni.redirectTo({
                url: '../task/task?nav_index=' + nav_index
              })
            }

            clearInterval(that.interval)
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped>
  scroll-view {
    white-space: nowrap;
    height: 110rpx;
    width: 100%;
    margin-top: 42rpx;
    box-sizing: border-box;
  }

  .popup_mask {
    width: 690rpx;
    padding: 0 30rpx;
    height: 500rpx;
    background-color: #FFFFFF;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    padding-bottom: 6rpx;
  }

  .popup_mask_tit {
    height: 104rpx;
    line-height: 104rpx;
    position: relative;
  }

  .pop_t1 {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
  }

  .pop_t2 {
    font-size: 28rpx;
    color: #1B1C33;
    margin-left: 40rpx;
  }

  .popup_mask_tit image {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    right: 20rpx;
    top: 38rpx;
  }

  .pop_item {
    height: 184rpx;
    border-bottom: 2rpx solid #F1F1F1;
    display: flex;
    flex-direction: row;
  }

  .pop_item_l {
    width: 520rpx;
    height: 184rpx;
    display: flex;
    flex-direction: row;
  }

  .item_l_l {
    width: 168rpx;
    height: 148rpx;
    padding-top: 36rpx;
  }

  .item_l_r {
    width: 452rpx;
    height: 148rpx;
    padding-top: 36rpx;
  }

  .pop_item_r {
    width: 150rpx;
    height: 148rpx;
    padding-top: 36rpx;
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
    text-align: right;
  }

  .pil_img {
    width: 118rpx;
    height: 110rpx;
  }

  .item_l_r view {
    font-size: 32rpx;
    color: #333333;
  }

  .test {
    width: 220upx;
    height: 220upx;
    display: inline-block;
    background-color: red;
  }

  .app {
    background-color: #F6F6F6;
  }

  .header {
    text-align: center;
    background-color: #FFFFFF;
  }

  .header_inner {
    display: inline-block;
    padding-top: 90rpx;

  }

  .header_inner image {
    width: 48rpx;
    height: 48rpx;
    position: relative;
    top: 8rpx;
  }

  .txt1 {
    font-size: 40rpx;
    color: #000000;
    font-weight: bold;
    margin-left: 24rpx;
  }

  .txt2 {
    color: #3662DD;
    padding-left: 20rpx;
  }

  .tip {
    text-align: center;
    font-size: 32rpx;
    color: #717171;
    padding-top: 24rpx;
    padding-bottom: 70rpx;
  }

  .goods {
    height: 282rpx;
    margin-top: 20rpx;
    background-color: #FFFFFF;
    padding: 0 30rpx;
  }

  .goods_tit {
    height: 86rpx;
    line-height: 86rpx;
    border-bottom: 2rpx solid #F1F1F1;
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
  }

  .goods_details {
    height: 194rpx;
    display: flex;
    flex-direction: row;
  }

  .detials_l {
    width: 496rpx;
    height: 194rpx;
  }

  .detials_r {
    width: 174rpx;
    height: 194rpx;
  }

  .details_img {
    display: inline-block;
    width: 118rpx;
    height: 110rpx;
    margin-right: 36rpx;
  }

  .detials_r_inner {
    height: 110rpx;
    margin-top: 42rpx;
    line-height: 110rpx;
    font-size: 28rpx;
    color: #1B1C33;
    position: relative;
  }

  .detials_r_inner image {
    width: 44rpx;
    height: 10rpx;
    position: absolute;
    right: 0;
    top: 48rpx;
  }

  .count {
    margin-top: 20rpx;
    padding: 0 30rpx;
    background-color: #FFFFFF;
  }

  .count_item {
    height: 99rpx;
    line-height: 99rpx;
    border-bottom: 2rpx solid #F1F1F1;
    font-size: 28rpx;

  }

  .txt3,
  .txt5 {
    font-weight: bold;
    color: #333333;
  }

  .txt4 {

    color: #666666;
    float: right;
  }

  .nobor {
    border: none;
  }

  .txt6 {
    color: #999999;
    font-weight: normal;
  }

  .txt7 {
    font-weight: normal;
    color: #333333;
  }
</style>