<template>
  <view class="content">
    <view class="notice">
      <view class="notice-img">
        <image mode src="@/assets/icon_v1/Notice1@2x.png"></image>
      </view>
      <text class="notice-text">{{ "" + notice + "" }}</text>
    </view>
    <!-- :style="'height:'+(item.relations.length>=2?'654rpx':'542rpx')+';'+'margin-bottom:'+(key==datas.length-1?'48rpx':'')+';'" -->
    <view v-for="(item, key) in datas" :key="key" class="commodity">
      <view class="commodity-text" style="margin-top: 24rpx">
        <view style="float: left">申请发货时间：</view>
        <text class="commodity-text1">{{ item.create_time }}</text>
      </view>
      <view class="commodity-text">
        <view style="float: left">订单编号：</view>
        <text class="commodity-text1">{{ item.order_num }}</text>
        <view
          style="float: right; font-size: 24rpx; color: #08c2c3"
          @tap="doCopy(datas[key].order_num)"
          >复制</view
        >
      </view>

      <view class="commodity-text">
        <view style="float: left">当前状态：</view>
        <text class="commodity-text1">{{ item.status }}</text>
      </view>
      <view class="commodity-text">
        <view style="float: left">物流公司：</view>
        <text class="commodity-text1">{{
          item.fare_company != "" ? item.fare_company : "无"
        }}</text>
      </view>
      <view class="commodity-text">
        <view style="float: left">物流单号：</view>
        <text class="commodity-text1">{{
          item.fare_no != "" ? item.fare_no : "无"
        }}</text>
        <view
          v-if="item.fare_no"
          style="float: right; font-size: 24rpx; color: #08c2c3"
          @tap="doCopy(datas[key].fare_no)"
          >复制</view
        >
      </view>
      <view class="commodity-text-beizhu">
        <view style="float: left">发货备注：</view>
        <text class="commodity-text1-beizhu">{{
          item.beizhu == "" ? "无" : item.beizhu
        }}</text>
      </view>
      <view class="commodity-text">
        <view style="float: left">支付运费：</view>
        <text class="commodity-text1">{{ item.fare_price + "元" }}</text>
      </view>
      <view class="commodity-text" style="height: 80rpx">
        <view style="float: left">发货地址：</view>
        <text class="commodity-text2">{{ item.address }}</text>
      </view>
      <!-- :style="'height:'+(item.relations.length>=2?'273rpx':'136rpx')+';'" -->
      <view class="commodity1">
        <view
          v-for="(item1, idx) in item.relations"
          :key="idx"
          class="commodity1-list"
        >
          <view class="commodity1-list_img">
            <image mode :src="item1.img"></image>
          </view>
          <view class="commodity1-list_text">{{ item1.name }}</view>
          <view class="commodity1-list_text1">{{ item1.num + "个" }}</view>
          <view v-if="idx < datas.length - 1" class="option-border"></view>
        </view>
      </view>
      <view v-if="item.status == 'xxx'" class="reun" @tap="cancel">
        <image mode src="@/assets/icon_v1/cancel@2x.png"></image>取消发货</view
      >
    </view>
    <uni-popup ref="popup" type="center">
      <view class="popup-overtime">
        <view class="popup-overtime_img">
          <image mode src="@/assets/icon_v1/cg@3x.png"></image>
        </view>
        <view class="popup-overtime_text">确定取消发货吗？</view>
        <view bindtap="e0" class="popup-overtime_left">取消</view>
        <view bindtap="cancel1" class="popup-overtime_right">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import api from "@/lib/api/api";
export default {
  name: "PageOrderSended",
  data() {
    return {
      mask: !1,
      datas: [],
      orderNo: "",
      userInfo: {},
      pages: {
        page: 1,
        size: 6,
        total: 0,
      },
      notice: "",
      status: {
        isover: !1,
        load: !1,
      },
    };
  },

  onLoad() {
    //
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
      api
        .sendList(this.userInfo.session)
        .then((data) => {
          if (data.data) {
            this.datas = data.data;
          }
          this.notice = data.send_order_title;
        })
        .catch((e) => {
          console.error(e);
        });
    } else {
      uni.showToast({
        title: "请先登录",
        icon: "none",
      });
      return;
    }
  },
  methods: {
    doCopy(orderno) {
      uni.setClipboardData({
        data: orderno,
      });
    },
  },
};
</script>

<style>
image {
  height: inherit;
  width: inherit;
}

.content {
  align-items: flex-start;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: auto;
  width: 750rpx;
}

.notice {
  background: #fff;
  border-radius: 16rpx;
  float: left;
  margin-left: 24rpx;
  margin-top: 24rpx;
  padding-bottom: 10px;
  width: 702rpx;
  display: flex;
  align-items: center;
}

.notice-img {
  float: left;
  height: 36rpx;
  margin-left: 24rpx;
  margin-right: 16rpx;
  margin-top: 25rpx;
  width: 36rpx;
}

.notice-text {
  color: #08c2c3;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 26rpx;
  margin-top: 24rpx;
  width: 602rpx;
  line-height: 36rpx;
}

.commodity {
  background-color: #fff;
  border-radius: 24rpx;
  float: left;
  /* height: 678rpx; */
  margin-left: 24rpx;
  margin-top: 24rpx;
  padding-bottom: 24rpx;
  width: 702rpx;
}

.commodity-text {
  color: #999;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  margin-left: 28rpx;
  margin-top: 8rpx;
  width: 650rpx;
}
.commodity-text-beizhu {
  color: #999;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  margin-left: 28rpx;
  margin-top: 8rpx;
  width: 650rpx;
}

.commodity-text1 {
  color: #333;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  height: 40rpx;
  width: 400rpx;
}
.commodity-text1-beizhu {
  display: inline-block;
  color: #333;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  height: 40rpx;
  width: 400rpx;
}

.commodity-text2 {
  color: #333;
  display: inline-block;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  height: 80rpx;
  overflow: auto;
  width: 510rpx;
}

.commodity1 {
  background: #f8f8f8;
  border-radius: 16rpx;
  float: left;
  /* height: 273rpx; */
  margin-left: 24rpx;
  margin-top: 24rpx;
  /* overflow: auto; */
  width: 654rpx;
}

.reun {
  align-items: center;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 26rpx;
  height: 37rpx;
  justify-content: center;
  line-height: 27rpx;
  margin-top: 24rpx;
  text-align: center;
  width: 705rpx;
}

.reun > image {
  height: 28rpx;
  margin-right: 8rpx;
  width: 28rpx;
}

.commodity1-list {
  float: left;
  height: 136rpx;
  width: 654rpx;
}

.commodity1-list_img {
  border-radius: 8rpx;
  float: left;
  height: 88rpx;
  margin-left: 24rpx;
  margin-right: 16rpx;
  margin-top: 24rpx;
  overflow: hidden;
  width: 88rpx;
}

.commodity1-list_text {
  color: #333;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 30rpx;
  height: 37rpx;
  margin-top: 32rpx;
  width: 501rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commodity1-list_text1 {
  color: #999;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 26rpx;
  height: 26rpx;
  margin-top: 16rpx;
  width: 501rpx;
}

.option-border {
  background-color: #eee;
  float: left;
  height: 2rpx;
  margin-left: 24rpx;
  margin-top: 24rpx;
  width: 630rpx;
}

.popup-overtime {
  background-color: #fff;
  border-radius: 32rpx;
  height: 503rpx;
  width: 600rpx;
}

.popup-overtime_img {
  float: left;
  height: 120rpx;
  margin-left: 240rpx;
  margin-top: 72rpx;
  width: 120rpx;
}

.popup-overtime_text {
  color: #333;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 36rpx;
  height: 55rpx;
  line-height: 55rpx;
  margin-top: 32rpx;
  text-align: center;
  width: 600rpx;
}

.popup-overtime_left {
  border: 2rpx solid #e5e5e5;
  margin-left: 44rpx;
}

.popup-overtime_left,
.popup-overtime_right {
  border-radius: 40rpx;
  color: #333;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 34rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 72rpx;
  text-align: center;
  width: 244rpx;
}

.popup-overtime_right {
  background: #ffe000;
  margin-left: 24rpx;
}
</style>
