front-end/jdApp/src/pagesOrder/components/stepShip.vue

<template>
  <view class="step-content_box">
    <view
      v-if="!$util.isEmpty(orderComData)"
      class="step-view_box"
    >
      <view
        v-for="(item,index) in orderComData"
        :key="index"
        class="step-li_box"
      >
        <view class="step-head_box">
          <view
            v-if="index == 0"
            class="step-icon_num"
          >
            <view class="dot"></view>
          </view>
          <view
            v-else
            class="step-icon-def"
          >
            <view class="dot"></view>
          </view>
          <view
            v-if="stepList.length - 1  !== index "
            class="step-line"
          ></view>
        </view>
        <view class="step-main_box">
          <view class="step-tit">{{item.actionName}}</view>
          <view class="step-content_box">
            <!-- 送达 -->
            <template v-if="item.actionSign === 'reach'">
              <view class="reach-content_box">
                <button
                  @click="affirmSend(item)"
                  v-if="item.status == 0"
                  class="admin-button-com blue big"
                >
                  确认送达
                </button>
                <view
                  v-else
                  class="reach-time_box"
                >
                  {{item.finishTime}}
                </view>
              </view>
            </template>
            <!-- 发货 -->
            <template v-else-if="item.actionSign === 'deliver'">
              <!-- 没有选择发货方式0 -->
              <view
                v-if="item.option == 0&&item.status == 0"
                class="deliver-opiton_0"
              >
                <button
                  @click="selfSend"
                  class="admin-button-com blue big"
                >
                  本店送
                </button>
                <button
                  @click="sendParcel"
                  class="admin-button-com blue big"
                  v-if="orderInfo.customId != '0'"
                >
                  发快递
                </button>
              </view>
              <view
                v-else-if="item.option == 1"
                class="deliver-opiton_1"
              >
                <view class="shipments-status_box">
                  <view class="reach-time_box">{{item.finishTime}}</view>
                  <view>本店送</view>
                  <button
                    v-if="item.status!=1"
                    @click="sendConfirm('本店送')"
                    class="admin-button-com blue big"
                  >确定送达</button>
                </view>
              </view>
              <view
                v-else-if="item.option == 2"
                class="deliver-opiton_1"
              >
                <view class="shipments-status_box">
                  <view>配送方: {{item.sendInfo.expressName}}</view>
                  <view>距离: {{item.sendInfo.distance}}km</view>
                  <view>运费: {{item.sendInfo.cost}}</view>
                  <view>小费: {{item.sendInfo.tip}}</view>
                  <!--1待接单 2已接单 3已完成 4已取消-->
                  <view>
                    状态: <text :class="[item.sendInfo.status==1||item.sendInfo.status==4?'colorRed':'colorBlue']">{{item.sendInfo.status==1?'待接单':item.sendInfo.status==2?'已接单':item.sendInfo.status==3?'已完成':'已取消'}} </text>
                  </view>
                  <button
                    v-if="item.status!=1"
                    @click="sendConfirm('发快递')"
                    class="admin-button-com blue big"
                  >确定送达</button>
                </view>
              </view>
              <!-- template -->
            </template>
            <!-- 下单 -->
            <template v-if="item.actionSign === 'placeOrder'">
              <view class="placeOrder-cotent_box">
                {{item.addTime}}
              </view>
            </template>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'stepShip',
  comments: {
  },
  props: {
    orderComData: {
      type: Array,
      default: () => []
    },
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {

    }
  },
  mounted () {
    console.log('this.orderInfo===>', this.orderInfo)
  },
  methods: {
    // type 本店送-发快递
    // 确认送达
    sendConfirm (type) {
      let self = this;
      uni.showModal({
        title: '提示', content: type == '本店送' ? '确认送到了？' : '快递送到后会自动确认，需要自己确定？',
        success: function (res) {
          if (res.confirm) {
            self.$emit('sendConfirm', type)
          }
        }
      });
    },
    // 发快递
    sendParcel () {
      this.$emit('sendParcel')
    },
    // 本店送
    selfSend () {
      this.$emit('selfSend', {
        type: 0,
        text: '确认自己送货?'
      })
    },
    //确认送达
    affirmSend () {
      //  "option": 【0没有选择 1本店送 2发快递】
      this.$emit('affirmSend', {
        type: 1,
        text: item.option == 1 ? '确认送到了吗？' : '快递送到后会自动帮你确认,确认要自己操作吗？'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.step-content_box {
  padding-bottom: 50upx;
}
.step-view_box {
  margin-top: 20px;
  padding: 40px 25px 0px 20px;
  background-color: #ffffff;
  & .step-li_box {
    display: flex;
    & > .step-head_box {
      position: relative;
      & > .step-icon-def {
        width: 40px;
        height: 40px;
        background-color: transparent;
        position: relative;
        & .dot {
          width: 12upx;
          height: 12upx;
          background-color: #d8d8d8;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      & > .step-icon_num {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #fdc3b8;
        // color: #FFFFFF;
        // font-size: 28px;
        position: relative;
        z-index: 50;
        & > .dot {
          width: 22upx;
          height: 22upx;
          border-radius: 50%;
          background-color: #f51608;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      & > .step-line {
        height: 100%;
        width: 0px;
        border-left: 1px solid #e2e4e8;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 45;
      }
    }
    & > .step-main_box {
      flex: 1;
      padding-left: 20px;
      & .step-tit {
        color: #141f25;
        font-size: 32px;
        font-weight: 600;
      }
      & .step-content_box {
        & .reach-content_box {
          padding: 40upx 0 0upx;
          & > .admin-button-com {
            width: 100%;
          }
          & > .reach-time_box {
            color: #333333;
            font-size: 24;
            font-weight: 600;
          }
        }
        & .deliver-opiton_0 {
          padding: 60px 0 0px;
          & > .admin-button-com:nth-child(1) {
            margin-right: 20px;
          }
          & > .admin-button-com {
            width: 310px;
            height: 90px;
            padding: 0;
            line-height: 90px;
            text-align: center;
          }
        }
        & .shipments-status_box {
          padding-top: 20px;
          & > view {
            color: #666666;
            font-size: 24px;
            font-weight: 400;
            line-height: 50px;
            &.reach-time_box {
              font-weight: 600;
            }
            .colorRed {
              color: #f51608;
            }
            .colorBlue {
              color: #049e2c;
            }
          }
        }
        & .placeOrder-cotent_box {
          color: #666666;
          font-size: 24upx;
          font-weight: 600;
          padding-top: 20upx;
        }
      }
    }
  }
}
</style>