sishitongtang-worker/pages/order/order.vue

<template>
  <view>
    <cpn-navbar title="预约护理"></cpn-navbar>

    <view>
      <!-- 搜索 -->
<!--      <view class="search">-->
<!--        <view class="input-content">-->
<!--          <u-input :clearable="false" value="" placeholder="请输入要搜索的内容" height="30" :custom-style="inputStyle"-->
<!--                   @input=""></u-input>-->
<!--        </view>-->
<!--        <view class="icon">-->
<!--          <u-icon name="search" size="46" color="#ABAEBE"></u-icon>-->
<!--        </view>-->
<!--      </view>-->

      <view class="customer-list">
        <view class="customer-list__item" v-for="(item, index) in customers" :key="item.id">
          <view class="top">
            <view class="avatar">
              <u-image :src="item.sex === '男' ? vuex_male_img : vuex_female_img" height="104"
                       width="104" shape="circle"></u-image>
            </view>
            <view class="user-info">
              <view class="name">
                <view>
                  {{item.name}}
                </view>
                <view class="sex">
                  <view class="sex-text">
                    {{item.sex || '无'}}
                  </view>
                </view>

                <view class="time" v-if="nowOrder(item.orders) && nowOrder(item.orders).product && (nowOrder(item.orders).product.demand === 1)">
                  <span style="padding: 0 6rpx;">{{ Number(item.total_worth).toFixed(2) }}/{{ Number(item.all_worth).toFixed(2) }}</span>
                  <span style="zoom: .7;">工时</span>
                </view>
              </view>
              <view class="tel">
                <view>
                  <u-icon name="phone" size="28" color="#1479FF"></u-icon>
                </view>
                <view class="text">{{item.phone || '无'}}</view>
              </view>
              <view class="address">
                <view>
                  <u-icon name="map" size="28" color="#1479FF"></u-icon>
                </view>
                <view class="text">{{ customerAddress(item.customer_address) }}</view>
              </view>
            </view>
          </view>

          <view class="line"></view>

          <view class="bottom" @click="toAddOrder(item)">
            <u-icon color="#1479FF" name="bell-fill"></u-icon>
            <span>立即预约</span>
          </view>
        </view>
      </view>
    </view>

    <u-modal v-model="isShowModal" content="预约用户剩余工时小于0" @confirm="isShowModal = false">
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShowModal: false,
      inputStyle: {
        width: "600rpx",
        fontSize: "28rpx",
        fontWeight: "500"
      },
      customers: [],
    };
  },
  methods: {
    toAddOrder (item) {
      if ((((Number(item.all_worth)) - Number(item.total_worth)) <= 0) && (this.nowOrder(item) && this.nowOrder(item).product && this.nowOrder(item).product.demand === 1)) {
        this.isShowModal = true;
        return
      }
      this.$u.vuex('vuex_selected_customer', item)
      uni.$u.throttle(() => {
        uni.navigateTo({
          url: `/pages/order/addOrder`
        })
      })
    },

    async getCustomer () {
      const res = await this.$u.api.customerAndOrder()
      console.log(res)
      this.customers = res
    }
  },
  computed: {
    customerAddress () {
      return function (addresses) {
        return addresses.find(i => i.default)?.address || addresses[0]?.address || '无'
      }
    },
    hasFormat () {
      return function (item) {
        return (Number(item.all_worth)) - Number(item.total_worth)
      }
    },
    nowOrder () {
      return function (orders) {
        if (orders.length === 1) {
          return orders[0]
        } else if (orders.length > 1) {
          return orders.find(i => {
            let now = this.$moment().valueOf()
            return (this.$moment(i.start_date).valueOf() <= now) && (this.$moment(i.end_date).valueOf() >= now)
          })
        } else {
          return {}
        }
      }
    }
  },
  onShow() {
    this.getCustomer()
  },
}
</script>

<style lang="scss">
.search {
  width: 710rpx;
  height: 70rpx;
  background: #FFFFFF;
  border: 2rpx solid #FAFBFC;
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 24rpx 24rpx 0 24rpx;

  .input-content {

    margin-left: 30rpx;
  }

  .icon {


    margin-right: 30rpx;
  }
}
.customer-list {

  margin-top: 26rpx;
  &__item {
    width: 710rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

    padding: 24rpx 0;
    margin: 0 20rpx 26rpx 22rpx;

    .top {
      display: flex;
      justify-content: space-between;

      padding-bottom: 24rpx;
      .avatar {

        padding-top: 4rpx;
        padding-left: 20rpx;
      }

      .user-info {
        flex: 1;

        padding-left: 24rpx;

        .name {
          height: 48rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
          display: flex;
          align-items: center;

          .time {
            color: #3877f6;

            margin-left: auto;
            margin-right: 20rpx;
          }
        }

        .tel {
          height: 40rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          line-height: 40rpx;
          display: flex;

          margin-top: 18rpx;

          .text {

            margin-left: 10rpx;
          }
        }

        .address {
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          line-height: 40rpx;
          display: flex;

          margin-top: 14rpx;

          .text {

            margin-left: 10rpx;
          }
        }
      }

      .sex {
        width: 40rpx;
        height: 40rpx;
        background: #FDECEC;
        opacity: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;

        margin-left: 20rpx;

        .sex-text {
          width: 28rpx;
          height: 34rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          line-height: 34rpx;
        }
      }
    }


    .line {
      width: 670rpx;
      height: 2rpx;
      border: 2rpx solid #EEEFF5;

      margin: 0 auto;
    }

    .bottom {
      display: flex;
      justify-content: center;
      font-size: 32rpx;
      color: #1479FF;

      padding-top: 24rpx;

      & > span {
        letter-spacing: 2rpx;
        padding: 0 10rpx;
      }
    }
  }
}
</style>