sishitongtang-worker/pages/order/addOrder.vue

<template>
  <view>
    <cpn-navbar title="预约护理" :is-back="true"></cpn-navbar>

    <view style="padding-bottom: 40rpx;">
      <!-- 用户信息 -->
      <view class="user-info" v-if="vuex_selected_customer">
        <view class="top">
          <view class="left">
            <u-image :src="vuex_selected_customer.sex === '男' ? vuex_male_img : vuex_female_img" width="104"
                     height="104" shape="circle"></u-image>
          </view>
          <view class="center">
            <view class="name">{{vuex_selected_customer.name}}</view>
            <view class="infos">
              <view class="age">{{ageComputed(vuex_selected_customer.idcard)}}岁
              </view>
              <view class="sex">{{vuex_selected_customer.sex}}</view>
              <view class="organ">机构护理</view>
            </view>
          </view>
          <view class="right">
            <template v-if="vuex_selected_customer.status === 1">
              <view class="icon1"></view>
              <view>正常</view>
            </template>
            <template v-if="vuex_selected_customer.status === 2">
              <view class="icon3"></view>
              <view>暂停</view>
            </template>
            <template v-if="vuex_selected_customer.status === 3">
              <view class="icon2"></view>
              <view>签退</view>
            </template>
          </view>
        </view>

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

        <view class="bottom">
          <view class="client">
            <u-icon name="/static/detail/people.png" width="26" height="26"></u-icon>
            <view>委托人：{{vuex_selected_customer.contact_name}}</view>
          </view>
          <view class="address">
            <u-icon name="map" width="28" height="28" color="#1479FF"></u-icon>
            <view>{{ customerAddress(vuex_selected_customer.customer_address) }}</view>
          </view>
          <view class="phone">
            <u-icon name="phone" width="28" height="28" color="#1479FF"></u-icon>
            <view>{{vuex_selected_customer.phone}}</view>
          </view>
        </view>
      </view>


      <!--      订单选择-->
      <view class="service-time">
        <view class="title">
          订单选择
        </view>

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

        <view class="time-content" @click="showOrderSelect = true">
          <view>
            <span>订单</span><span style="color: red;">*</span>
            <view style="margin-top: 10rpx;">
              <u-tag mode="dark" type="primary" v-if="form.order_id" :text="form.order"></u-tag>
            </view>
          </view>
          <u-icon name="arrow-right" label="请选择" label-pos="left"></u-icon>
        </view>
      </view>

<!--      护理项目-->
      <view class="sku-list">
        <view class="title">
          项目选择
        </view>

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

        <view class="sku-content">
          <view class="sku-content__item"
                :class="{ 'sku-content__item-active': form.schedule_list_skus.find(i => i.sku_id === item.id) }"
                v-for="item in mySkus"
                :key="item.id"
                @click="skuPick(item)">
            <view style="font-weight: 600;">{{ item.name }}</view>
            <view style="transform: scale(.8,.8)">{{ productType === 2 ? (item.time_lenth || 0) + '分钟' : (item.worth || 0) + '工时' }}</view>
          </view>
        </view>
      </view>

<!--      服务时间-->
      <view class="service-time">
        <view class="title">
          时间选择
        </view>

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

        <view class="time-content" @click="showTimePicker = true">
          <view>
            <span>预约时间</span><span style="color: red;">*</span>
            <view style="margin-top: 10rpx;">
              <u-tag mode="dark" type="primary" v-if="form.start_time && form.end_time" :text="`${$moment(form.start_time).format('YYYY-MM-DD HH:mm')} ~ ${$moment(form.end_time).format('HH:mm')}`"></u-tag>
            </view>
          </view>
          <u-icon name="arrow-right" label="请选择" label-pos="left"></u-icon>
        </view>
      </view>

<!--      地址选择-->
      <view class="address-select">
        <view class="title">
          上门地址
        </view>

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

        <view class="address-content" @click="showAddressSelect = true">
          <view>
            <span>地址选择</span><span style="color: red;">*</span>
            <view style="margin-top: 10rpx;">
              <u-tag mode="dark" type="primary" v-if="form.address && form.address_id" :text="form.address"></u-tag>
            </view>
          </view>
          <u-icon name="arrow-right" label="请选择" label-pos="left"></u-icon>
        </view>
      </view>

      <u-button :custom-style="{ 'margin': '40rpx 20rpx' }" type="primary" :ripple="true" @click="submit">提交预约</u-button>
    </view>

    <u-picker :title="pickerType === 1 ? '开始时间' : '结束时间'"
              mode="time"
              v-model="showTimePicker"
              :params="params"
              @confirm="confirm"></u-picker>
    <u-select v-model="showAddressSelect" :list="vuex_selected_customer.customer_address" value-name="id" label-name="address" @confirm="pickAddress"></u-select>
    <u-select v-model="showOrderSelect" :list="getNowOrder" value-name="id" label-name="product_name" @confirm="pickOrder"></u-select>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { getAgeByIdcard } from "@/common/util";
import {isNum} from "@/uview-ui/components/u-avatar-cropper/weCropper";

export default {
  data() {
    return {
      showOrderSelect: false,
      showAddressSelect: false,
      pickerType: 1,//1开始，2结束
      showTimePicker: false,
      form: {
        schedule_list_skus: [],
        customer_id: '',
        product_id: '',
        order_id: '',
        address_id: '',
        address: '',
        start_time: '',
        end_time: ''
      }
    };
  },
  computed: {
    getNowOrder () {
      if (this.vuex_selected_customer.orders instanceof Array) {
        return this.vuex_selected_customer.orders.filter(i => {
          let now = this.$moment().valueOf()
          return (this.$moment(i.start_date).valueOf() <= now) && (this.$moment(i.end_date).valueOf() >= now)
        }).map(i => ({
          ...i,
          product_name: i.product?.name
        }))
      } else {
        return []
      }
    },
    serviceTime () {

    },

    customerAddress () {
      return function (addresses) {
        return addresses.find(i => i.default)?.address || addresses[0]?.address || '无'
      }
    },
    ageComputed() {
      return function(idcard) {
        return getAgeByIdcard(idcard)
      }
    },
    mySkus () {
      const orderSku = this.getNowOrder.find(i => i.id === this.form.order_id)?.product_type?.sku_category?.map(i => i.sku)?.flat() || []
      //const orderSku = this.getOrder()?.product_type?.sku_category?.map(i => i.sku)?.flat() || []
      return this.vuex_user.nurse_sku_links.map(i => i.sku).filter(i => orderSku.find(j => j.id === i.id))
    },
    params () {
      return this.pickerType === 1 ? {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false,
        timestamp: true
      } : {
        year: false,
        month: false,
        day: false,
        hour: true,
        minute: true,
        second: false,
        timestamp: true
      }
    },

    productType () {
      //1为价值 2为时长
      return this.getOrder().product?.demand
    }
  },
  methods: {
    skuPick (item) {
      if (this.productType === 1) {
        this.form.schedule_list_skus = [{ sku_id: item.id }]
      } else {
        const findSku = this.form.schedule_list_skus.find(i => i.sku_id === item.id)
        if (findSku) {
          this.form.schedule_list_skus.splice(this.form.schedule_list_skus.indexOf(findSku),1)
        } else {
          this.form.schedule_list_skus.push({
            sku_id: item.id
          })
        }
      }
    },

    getOrder () {
      if (this.vuex_selected_customer.orders.length === 1) {
        return this.vuex_selected_customer.orders[0]
      } else if (this.vuex_selected_customer.orders.length > 1) {
        return this.vuex_selected_customer.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 {}
      }
    },

    confirm (time) {
      console.log(time)
      if (this.pickerType === 1) {
        this.form.start_time = this.$moment(time.timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.form.end_time = `${this.$moment(this.form.start_time).format('YYYY-MM-DD')} ${this.$moment(time.timestamp * 1000).format('HH:mm:ss')}`
      }
      this.pickerType = this.pickerType === 1 ? 2 : 1

      if (this.pickerType === 2) {
        setTimeout(() => this.showTimePicker = true,500)
      }

      console.log(this.form)
    },

    pickAddress (e) {
      this.form.address = e[0].label;
      this.form.address_id = e[0].value;
    },
    pickOrder (e) {
      this.form.order_id = e[0].value;
      this.form.order = e[0].label;
      this.form.product_id = this.getNowOrder.find(i => i.id === this.order_id)?.product_id;
    },

    submit () {
      if (this.vuex_selected_customer.status !== 1) {
        this.$refs.uToast.show({
          title: '用户状态不为正常',
          type: 'warning'
        })
        return
      }
      if (!(this.form.start_time && this.form.end_time)) {
        this.$refs.uToast.show({
          title: '请选择预约时间',
          type: 'warning'
        })
        return
      }
      if (!(this.form.address && this.form.address_id)) {
        this.$refs.uToast.show({
          title: '请选择上门地址',
          type: 'warning'
        })
        return
      }
      if (!(this.form.schedule_list_skus instanceof Array) || this.form.schedule_list_skus.length === 0) {
        this.$refs.uToast.show({
          title: '请选择一项服务内容',
          type: 'warning'
        })
        return
      }

      //const order = this.getOrder()
      //if (order.id && order.product_id) {
        //this.form.order_id = order.id
        //this.form.product_id = order.product_id
      if (this.form.order_id && this.form.product_id) {
        this.form.customer_id = this.vuex_selected_customer.id
        this.$u.api.scheduleSave(this.form).then(res => {
          this.$refs.uToast.show({
            title: '预约成功',
            type: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          },2000)
        })
      } else {
        this.$refs.uToast.show({
          title: '无效订单',
          type: 'warning'
        })
      }
    }
  },
  onShow() {
  },
  mounted() {
    if (this.productType === 2) {
      this.form.schedule_list_skus = this.mySkus.map(i => ({ sku_id: i.id }))
    }
  },
}
</script>

<style lang="scss">
.line {
  width: 670rpx;
  height: 2rpx;
  border: 2rpx solid #EEEFF5;

  margin: 30rpx auto 0 auto;
}
.user-info {
  width: 710rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

  margin: 40rpx auto 0 auto;
  position: relative;

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

    padding-top: 34rpx;
    padding-bottom: 30rpx;

    .left {
      padding-left: 20rpx;
    }

    .center {
      flex: 1;

      padding-left: 24rpx;

      .name {
        height: 48rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        line-height: 24rpx;
      }

      .infos {
        display: flex;
        align-items: center;

        padding-top: 20rpx;

        .age {
          height: 34rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #A7AFBC;
          line-height: 34rpx;
        }

        .sex {
          width: 40rpx;
          height: 40rpx;
          background: #FDECEC;
          opacity: 0.5;
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          text-align: center;
          line-height: 40rpx;

          margin-left: 20rpx;
        }

        .organ {
          width: 140rpx;
          height: 40rpx;
          background: #F9F9F9;
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          line-height: 40rpx;
          text-align: center;

          margin-left: 20rpx;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;

      padding-right: 20rpx;
    }
  }

  .bottom {

    padding: 26rpx 0 34rpx 24rpx;
    position: relative;

    .bottom-item {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #36596A;

      &>view {
        padding-left: 16rpx;
      }
    }

    .client {
      @extend .bottom-item;
    }

    .address {
      @extend .bottom-item;

      padding-top: 18rpx;
    }

    .phone {
      @extend .bottom-item;

      padding-top: 18rpx;
    }
  }

  .re-location {
    display: flex;
    align-items: center;

    position: absolute;
    bottom: 36rpx;
    right: 20rpx;

    .text {
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #A7AFBC;
      line-height: 34rpx;

      padding-right: 8rpx;
    }
  }
}

.sku-list {
  width: 710rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

  margin: 40rpx auto 0 auto;
  padding: 20rpx;
  position: relative;

  .title {
    color: #3877f6;
    font-size: 34rpx;
    font-weight: 600;
    line-height: 2;
  }

  .line {
    margin-top: 20rpx;
  }

  .sku-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40rpx;

    margin-top: 20rpx;
    &__item {
      color: #333;
      border-radius: 10rpx;
      border: 2rpx #ccc solid;
      text-align: center;
      transition: all .2s;

      padding: 20rpx 0;

      &-active {
        color: #fff;
        background: #3877f6;
        border-color: #5086f5;
        filter: drop-shadow(0 0 10rpx #5086f5);
      }
    }
  }
}

.service-time {
  width: 710rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

  margin: 40rpx auto 0 auto;
  padding: 20rpx;
  position: relative;

  .title {
    color: #3877f6;
    font-size: 34rpx;
    font-weight: 600;
    line-height: 2;
  }
  .line {
    margin-top: 20rpx;
  }
  .time-content {
    display: flex;
    align-content: center;
    justify-content: space-between;
    text-indent: 10rpx;

    margin-top: 20rpx;

    & > view {
      font-weight: 600;
      letter-spacing: 2rpx;
    }
  }
}

.address-select {
  width: 710rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

  margin: 40rpx auto 0 auto;
  padding: 20rpx;
  position: relative;

  .title {
    color: #3877f6;
    font-size: 34rpx;
    font-weight: 600;
    line-height: 2;
  }
  .line {
    margin-top: 20rpx;
  }
  .address-content {
    display: flex;
    align-content: center;
    justify-content: space-between;
    text-indent: 10rpx;

    margin-top: 20rpx;

    & > view {
      font-weight: 600;
      letter-spacing: 2rpx;
    }
  }
}
</style>