merchapp/java-mall-app-shop-admin/pages/my/storeBusinessStatus/updateBusinessTime.vue

<template>
  <view class="businessStatus-container">
    <view class="hander">
      <view class="site-time">配送站点营业时间 00:00-24:00</view>
      <view class="tips-item">
        门店营业时间需在配送站点营业时间内才会有骑手配送
      </view>
      <view class="tips-item tips-item-2">
        如需在此时间范围外营业，请咨询业务经理调整配送方式
      </view>
    </view>
    <view class="business-time-content" @click="showTimePopup">
      <view class="time-box">
        <view calss="time">{{ storeBaseInfo.info.store_opening_hours }}</view>
        <view>至</view>
        <view calss="time">{{ storeBaseInfo.info.store_close_hours }}</view>
      </view>
    </view>
    <view class="business-time-bottm">
      <u-button
        class="btn-time"
        :hairline="true"
        :plain="true"
        shape="circle"
        @click="updateStoreBizState"
      >
        确认修改
      </u-button>
    </view>
    <ozTimePicker
      ref="timePickerPopupRef"
      title="设置营业时间段"
      segmentation="至"
      :value="timeValue"
      @confirm="handerConfirmTiem"
      indicator-class="picker-view__indicator acitve"
    ></ozTimePicker>
  </view>
</template>

<script>
import { GetAccountDashboard } from "../../../api/user";
import { UpdateStoreBizState } from "../../../api/store";
import tuiDatetime from "./tui-datetime/tui-datetime.vue";
import ozTimePicker from "./oz-timePicker/oz-timePicker.vue";
import { GetShopBaseInfo, UpdataShopInfo } from "@/api/shop";
export default {
  components: {
    tuiDatetime,
    ozTimePicker,
  },
  data() {
    return {
      dashboardInfo: {
        data: {},
        notice: {},
        order: {
          yestoday_num: 0,
        },
        product: {
          illegal_num: 0,
          normal_num: 0,
          off_num: 0,
          total_num: 0,
          verify_passed_off_num: 0,
          verify_refused_num: 0,
          verify_waiting_num: 0,
        },
        return: {
          fin_num: 0,
          review_num: 0,
          total_num: 0,
          un_fin_num: 0,
        },
        store_info: {
          store_id: 1,
          store_name: "",
          store_biz_state: 1,
          info: {
            store_opening_hours: "",
            store_close_hours: "",
          },
        },
      },
      showPopup: false,
      dateTime: "",
      storeBaseInfo: {
        info: {
          store_opening_hours: "",
          store_close_hours: "",
        },
      },
      timeValue: ["00", "00", "至", "00", "00"],
    };
  },
  computed: {
    businessTime() {
      return `${this.dashboardInfo.store_info.info.store_opening_hours}-${this.dashboardInfo.store_info.info.store_close_hours}`;
    },
  },
  onShow() {
    this.getShopBaseInfo();
    this.getAccountDashboard();
  },
  methods: {
    async getShopBaseInfo() {
      let res = await GetShopBaseInfo();
      if (res && res.status == 200) {
        this.storeBaseInfo = res.data;
        const startTime =
          this.storeBaseInfo.info.store_opening_hours.split(":");
        const endTime = this.storeBaseInfo.info.store_close_hours.split(":");
        this.timeValue = [...startTime, "至", ...endTime];
      }
    },
    async getAccountDashboard() {
      let res = await GetAccountDashboard();
      if (res && res.status == 200) {
        uni.setStorageSync("accountDashboard", res.data);
        this.dashboardInfo = res.data;
      }
    },
    showTimePopup() {
      this.$refs.timePickerPopupRef.open();
    },
    closeTimePopup() {
      this.showPopup = false;
    },
    handerConfirmTiem(e) {
      this.storeBaseInfo.info.store_opening_hours = e[0] + ":" + e[1];
      this.storeBaseInfo.info.store_close_hours = e[2] + ":" + e[3];
    },
    async updateStoreBizState() {
      var params = {
        store_id: this.storeBaseInfo.store_id,
        store_opening_hours: this.storeBaseInfo.info.store_opening_hours,
        store_close_hours: this.storeBaseInfo.info.store_close_hours,
        store_biz_state: this.storeBaseInfo.store_biz_state,
      };

      let res = await UpdateStoreBizState(params);
      if (res && res.status == 200) {
        uni.showToast({
          title: "修改成功",
          icon: "success",
        });
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/variables.scss";
.businessStatus-container {
  .hander {
    padding: 52rpx 40rpx 88rpx;
    background: linear-gradient(33deg, #f7d8de 0%, #fff 100%);

    .site-time {
      margin-bottom: 40rpx;
      font-weight: 500;
      font-size: 36rpx;
    }

    .tips-item {
      position: relative;
      padding-left: 28rpx;
      font-size: 26rpx;
      margin-bottom: 32rpx;

      &::before {
        content: "";
        display: block;
        width: 12rpx;
        height: 12rpx;
        background-color: #0a0301;
        position: absolute;
        left: 0;
        top: 36%;
        border-radius: 50%;
      }
    }

    .tips-item-2 {
      margin-bottom: 0;
    }
  }

  .business-time-content {
    position: relative;
    top: -20rpx;
    border-radius: 24rpx;
    z-index: 2;
    background: #fff;

    .time-box {
      display: flex;
      justify-content: space-evenly;
      margin: 100rpx 40rpx;
      padding: 36rpx 40rpx;
      border-radius: 24rpx;
      background: #f5f6fa;
      font-weight: 500;
    }
  }

  .time-popup {
    .time-popup-content {
      border-radius: 12px;
      height: 800rpx;

      .time-popup-title {
        padding: 24rpx;
        font-size: 36rpx;
        font-weight: 500;
        text-align: center;
      }
    }
  }

  .business-time-bottm {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 90%;
    background: #fff;
    box-shadow: 0 0 28rpx 4rpx rgba(0, 0, 0, 0.1);

    padding: 28rpx 40rpx 80rpx;

    .btn-time {
      background: $base-color;
      color: #fff;
      border: none;
      &::after {
        border: none;
      }
    }
  }
}
</style>