heshui_shop_frontend/sheep/components/s-ztaddress-info/s-ztaddress-info.vue

<template>
  <view class="address">
    <view class="address-type">用户信息：</view>
    <view
      class="address-item ss-flex ss-row-between ss-col-center"
      :class="[{ 'border-bottom': props.hasBorderBottom }]"
    >
      <view class="item-left">
        <view class="person-text">自取时间</view>
        <view class="area-text ss-flex ss-col-center">
          <uni-datetime-picker v-model="state.zititime" type="daterange" @change="onChangeTime" :end="state.today">
            <button class="ss-reset-button date-btn">
              <text>{{ !dateFilterText || dateFilterText.length === 0 ? '请选择自取时间' : dateFilterText }}</text>
              <text class="cicon-drop-down ss-seldate-icon"></text>
            </button>
          </uni-datetime-picker>
        </view>
      </view>
      <view class="item-right">
        <view class="item-right-label">预留电话</view>
        <view class="item-right-value">
          <uni-easyinput
            placeholder="请输入预留电话"
            v-model="state.mobile"
            :inputBorder="false"
            type="text">
          </uni-easyinput>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import dayjs from 'dayjs';
  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import { isEmpty } from 'lodash';
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const dateFilterText = computed(() => {
    if (state.zititime[0] === state.zititime[1]) {
      return state.zititime[0];
    } else {
      return state.zititime.join('~');
    }
  });

  const props = defineProps({
    hasBorderBottom: {
      type: Boolean,
      defult: true,
    },
  });

  const state = reactive({
    zititime: [],
    today: '',
    mobile: '',
  });

  function onChangeTime(e) {
    console.log(e, 'onChangeTime');
    state.zititime[0] = e[0];
    state.zititime[1] = e[e.length - 1];
  }

  onLoad(async (options) => {
    state.today = dayjs().format('YYYY-MM-DD');
    state.zititime = [state.today, state.today];
    state.mobile = userInfo.mobile;
  });
</script>

<style lang="scss" scoped>
  .address {
    border-top: 10rpx solid #f2f2f2;
    padding: 39rpx 0 0;
  }
  .address-type {
    padding-left: 30rpx;
    font-size: 26rpx;
    font-weight: bold;
    color: #333333;
  }
  .address-item {
    padding: 24rpx 30rpx;
    font-size: 24rpx;
    .item-left, .item-right {
      flex: 1;
    }

    .area-text {
      font-weight: 400;
      color: $dark-9;
      font-size: 24rpx;
      color: #000000;
      margin-top: 10rpx;
    }

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

    .person-text {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #000000;
      .name {
        font-weight: 500;
      }
      .phone {
        font-weight: 400;
        display: inline-block;
        margin-left: 15rpx;
        margin-right: 10rpx;
      }
      .default-address {
        display: inline-block;
        padding: 3rpx 20rpx;
        text-align: center;
        background: var(--ui-BG-Main);
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        font-weight: 400;
        font-size: 18rpx;
        color: #FFFFFF;
      }
    }
  }

  .edit-btn {
    width: 46rpx;
    height: 46rpx;
    .edit-icon {
      width: 46rpx;
      height: 46rpx;
    }
  }
  image {
    width: 100%;
    height: 100%;
  }
  .date-btn {
      background-color: $white;
      line-height: 54rpx;
      border-radius: 27rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: $dark-6;

      .ss-seldate-icon {
        font-size: 50rpx;
        color: $dark-9;
      }
    }
</style>