EpicSoul/subPackages/orderQy/confrimWriteOff.vue

<template>
  <view class="confirm-container">
    <scroll-view class="content-scroll" scroll-y>
      <!-- 预约日期 -->
      <view class="date-section">
        <view class="section-title"  v-if="needReservation">
          <text>预约日期</text>
          <text class="required">*</text>
        </view>
        <view class="reservation-desc"  v-if="needReservation">
          <text class="desc-text"
            >此商品需要提前{{ goodsInfo.bookDay }}天预约</text
          >
        </view>
        <view class="date-picker-container">
          <uni-datetime-picker
            v-model="selectedDate"
            type="date"
            :clear-icon="false"
            :start="minDate"
            :end="expiryDate"
            placeholder="请选择预约日期"
            @change="onDateChange"
          >
            <view class="date-input">
              <text class="date-text" :class="{ placeholder: !selectedDate }">
                {{ selectedDate || "请选择预约日期" }}
              </text>
              <uni-icons type="calendar" size="18" color="#c0c4cc" />
            </view>
          </uni-datetime-picker>
        </view>
      </view>

      <!-- 商品信息 -->
      <view class="goods-section">
        <!-- <view class="section-title">
          <text>{{ goodsInfo.title || "-" }}</text>
        </view> -->
        <view class="goods-card">
          <image class="goods-image" :src="goodsInfo.image" mode="aspectFill" />
          <view class="goods-info">
            <text class="goods-name">{{ goodsInfo.goodsName || "--" }}</text>

            <!-- 规格选择按钮 -->
            <view class="specifications-list">
              <view
                class="spec-item"
                v-for="(spec, specIndex) in specifications"
                :key="specIndex"
                @click="selectSpecification(specIndex)"
              >
                <view class="spec-content">
                  <text class="spec-label">第{{ specIndex + 1 }}份规格</text>
                  <text
                    class="spec-text"
                    :class="{ placeholder: !spec.selectedSpec }"
                  >
                    {{ spec.selectedSpec || "请选择规格" }}
                  </text>
                </view>
                <uni-icons type="right" size="14" color="#c0c4cc" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 到期时间 -->
      <view class="expiry-section">
        <view class="section-title">
          <text>到期时间</text>
        </view>
        <view class="expiry-card">
          <view class="expiry-item">
            <text class="expiry-label">有效期至</text>
            <text class="expiry-value">{{ expiryDate }}</text>
          </view>
          <view class="expiry-desc">
            <text class="desc-text"
              >到期后将自动退款至原支付账户，请及时使用</text
            >
          </view>
        </view>
      </view>

      <!-- 备注 -->
      <view class="note-section">
        <view class="section-row">
          <text class="section-label">备注</text>
          <view class="note-input">
            <input
              v-model="note"
              placeholder="选填"
              placeholder-class="placeholder"
              maxlength="200"
            />
          </view>
        </view>
      </view>

      <view class="submit-section-content" style="height: 230rpx"> </view>
    </scroll-view>

    <!-- SKU选择弹窗 -->
    <uni-popup ref="specificationPopup" type="bottom">
      <view class="specification-popup">
        <view class="popup-header">
          <text class="popup-title">选择规格</text>
          <text class="popup-close" @click="closeSpecificationPopup">×</text>
        </view>

        <view class="popup-content">
          <!-- 商品信息 -->
          <view class="goods-preview">
            <image
              class="preview-image"
              :src="currentGoods.image || '/static/image/goods-default.jpg'"
              mode="aspectFill"
            />
            <view class="preview-info">
              <text class="preview-name">{{ currentGoods.goodsName }}</text>
            </view>
          </view>
          <!-- SKU选择 -->
          <view class="sku-section">
            <text class="sku-title">选择规格</text>
            <view class="sku-options">
              <view
                v-for="(sku, index) in goodsInfo.specCombinations"
                :key="sku.specCombinationId"
                :class="['sku-option', { active: selectedSkuIndex === index }]"
                @click="selectSku(index, sku)"
              >
                <view class="sku-option-content">
                  <view class="sku-option-info">
                    <text class="sku-option-name">{{
                      getSkuDisplayName(sku)
                    }}</text>
                    <!-- <text class="sku-option-price">¥{{ sku.salePrice }}</text> -->
                  </view>
                  <view class="sku-option-details">
                    <text class="sku-option-quantity"
                      >库存: {{ sku.quantity }}</text
                    >
                    <!-- <text class="sku-option-code">编码: {{ sku.skuCode }}</text> -->
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 确认按钮 -->
        <view class="popup-actions">
          <button
            class="confirm-spec-btn"
            @click="confirmSpecification"
            :disabled="selectedSkuIndex === -1"
          >
            确认规格
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 底部提交区域 -->
    <view
      class=" "
      style="position: fixed; width: 100%; bottom: 0; z-index: 98"
    >
      <view class="submit-section">
        <button class="submit-btn" @click="submitOrder">确认下单</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 选中的日期
      selectedDate: "",
      // 到期时间
      expiryDate: "",
      // 商品信息
      goodsInfo: {},
      // 备注
      note: "",
      // 是否需要预约
      needReservation: false,
      // 最小可选日期
      minDate: "",
      // SKU选择相关
      currentSpecIndex: -1,
      currentGoods: {},
      selectedSkuIndex: -1,
      specifications: [],
      orderChildId: "order001",
    };
  },

  onLoad(options) {
    // 接收页面参数
    if (options.goodsId) {
      this.orderChildId = options.orderChildId;
      this.loadGoodsInfo(options.goodsId, options.orderChildId);
    }
    if (options.goodsName) {
      this.goodsInfo.name = decodeURIComponent(options.goodsName);
    }
  },

  methods: {
    // 日期变化回调
    onDateChange(date) {
      this.selectedDate = date;
      console.log("选择的日期:", date);
    },

    // 加载商品信息
    async loadGoodsInfo(goodsId, orderChildId) {
      try {
        // 这里调用实际的API接口获取商品详情
        this.Post(
          {
            orderChildId: orderChildId,
          },
          `/framework/goods/queryByGoodsId/${goodsId}`,
          "DES"
        ).then((res) => {
          if (res.code == 200) {
            this.goodsInfo = res.data;
            this.goodsInfo.image = res.data.mainUrl.split(",")[0];

            // 判断是否需要预约
            const reservationDays = res.data.bookDay || 0;
            this.needReservation = reservationDays > 0;
            this.expiryDate = res.data.expireTime;
            // 设置最小可选日期
           const today = new Date();
           today.setDate(today.getDate() + reservationDays);
           this.minDate = today.toISOString().split("T")[0];
           console.log(this.minDate);
           this.selectedDate = this.minDate;

            // 初始化规格选择数组
            for (var i = 0; i < res.data.orderChildNum; i++) {
              this.specifications.push({
                selectedSpec: "",
                selectedSkuIndex: -1,
                selectedSku: null,
              });
            }
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
      } catch (error) {
        console.error("加载商品信息失败:", error);
      }
    },

    // 选择规格
    selectSpecification(specIndex) {
      this.currentSpecIndex = specIndex;
      this.currentGoods = this.goodsInfo;

      // 回显之前的选择
      const currentSpec = this.specifications[specIndex];
      this.selectedSkuIndex = currentSpec.selectedSkuIndex || -1;

      this.$refs.specificationPopup.open();
    },

    // 关闭规格选择弹窗
    closeSpecificationPopup() {
      this.$refs.specificationPopup.close();
      this.resetSpecificationData();
    },

    // 重置规格选择数据
    resetSpecificationData() {
      this.selectedSkuIndex = -1;
    },

    // 选择SKU
    selectSku(index, sku) {
      if (sku.quantity > 0) {
        this.selectedSkuIndex = index;
      } else {
        uni.showToast({
          title: "当前规格暂无库存",
          icon: "none",
        });
      }
    },

    // 获取SKU显示名称
    getSkuDisplayName(sku) {
      let displayName = "";
      if (sku.specValueOne) {
        displayName += sku.specValueOne;
      }
      if (sku.specValueTwo) {
        displayName += ` / ${sku.specValueTwo}`;
      }
      return displayName || "默认规格";
    },

    // 确认规格选择
    confirmSpecification() {
      if (this.selectedSkuIndex === -1) {
        uni.showToast({
          title: "请选择规格",
          icon: "none",
        });
        return;
      }

      const selectedSku =
        this.goodsInfo.specCombinations[this.selectedSkuIndex];

      // 更新商品规格信息
      this.specifications[this.currentSpecIndex].selectedSpec =
        this.getSkuDisplayName(selectedSku);
      this.specifications[this.currentSpecIndex].selectedSkuIndex =
        this.selectedSkuIndex;
      this.specifications[this.currentSpecIndex].selectedSku = selectedSku;

      this.closeSpecificationPopup();

      uni.showToast({
        title: "规格选择成功",
        icon: "success",
      });
    },

    // 提交订单
    async submitOrder() {
      // 验证必填项
      if (this.needReservation && !this.selectedDate) {
        uni.showToast({
          title: "请选择预约日期",
          icon: "none",
        });
        return;
      }

      // 验证是否已选择所有规格
      const unselectedSpecs = this.specifications.filter(
        (spec) => !spec.selectedSpec
      );
      if (unselectedSpecs.length > 0) {
        uni.showToast({
          title: "请选择所有规格",
          icon: "none",
        });
        return;
      }

      // 构建订单数据
      const orderData = {
        goodsId: this.goodsInfo.goodsId,
        reservationTime: this.selectedDate,
        remark: this.note,
        expireTime: this.expiryDate,
        orderChildId: this.orderChildId,
        orderReservationDetails: this.specifications
          .filter((spec) => spec.selectedSpec)
          .map((item) => {
            return {
              specCombinationId: item.selectedSku.specCombinationId,
              specValueOne: item.selectedSku.specValueOne,
              specValueTwo: item.selectedSku.specValueTwo,
              orderChildId: this.orderChildId,
              quantity: 1,
            };
          }),
      };
      this.Post(
        {
          ...orderData,
          method: "post",
        },
        "/framework/orderReservation/add",
        "DES"
      ).then((res) => {
        if (res.code == 200) {
          uni.hideLoading();
          uni.showToast({
            title: "预约成功",
            icon: "none",
          });
          setTimeout(() => {
            uni.redirectTo({
              url: `/subPackages/orderQy/writeOffCode?orderChildId=${this.orderChildId}`,
            });
          }, 800);
        } else {
          uni.hideLoading();
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });

      console.log("订单数据:", orderData);

      // 直接跳转到核销码展示页面，传递订单信息
      // uni.redirectTo({
      //   url: `/subPackages/orderQy/writeOffCode?orderId=123456&goodsInfo=${encodeURIComponent(
      //     JSON.stringify(this.goodsInfo)
      //   )}&specifications=${encodeURIComponent(
      //     JSON.stringify(
      //       this.specifications.filter((spec) => spec.selectedSpec)
      //     )
      //   )}&selectedDate=${this.selectedDate}`,
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
// 主题色彩变量
$primary-color: #667eea;
$secondary-color: #f8f9fa;
$text-primary: #2d3748;
$text-secondary: #718096;
$text-muted: #a0aec0;
$border-color: #e2e8f0;
$success-color: #48bb78;
$warning-color: #ed8936;
$danger-color: #f56565;
$bg-light: #f7fafc;

.confirm-container {
  height: 100vh;
  background-color: $bg-light;
  display: flex;
  flex-direction: column;
}

.content-scroll {
  flex: 1;
  padding: 20rpx;
  width: 710rpx;
}

// 通用section样式
.section-header,
.section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: $text-primary;
  font-weight: 600;
  margin-bottom: 16rpx;

  .required {
    color: $danger-color;
    margin-left: 4rpx;
  }
}

// 预约日期
.date-section {
  margin-bottom: 24rpx;
}

.reservation-desc {
  margin-bottom: 16rpx;
  padding: 0 30rpx;
}

.desc-text {
  font-size: 24rpx;
  color: $text-secondary;
  line-height: 1.5;
}

.date-picker-container {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
}

.date-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-text {
  font-size: 28rpx;
  color: $text-primary;

  &.placeholder {
    color: $text-muted;
  }
}

// 商品信息
.goods-section {
  margin-bottom: 24rpx;
}

.goods-card {
  display: flex;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  gap: 20rpx;
}

.goods-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.goods-name {
  font-size: 26rpx;
  color: $text-primary;
  font-weight: 600;
  line-height: 1.4;
}

// 到期时间
.expiry-section {
  margin-bottom: 24rpx;
}

.expiry-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
}

.expiry-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.expiry-label {
  font-size: 26rpx;
  color: $text-secondary;
}

.expiry-value {
  font-size: 26rpx;
  color: $text-primary;
  font-weight: 600;
}

.expiry-desc {
  padding-top: 12rpx;
  border-top: 1rpx solid $border-color;

  .desc-text {
    font-size: 24rpx;
    color: $warning-color;
    line-height: 1.5;
  }
}

// 备注
.note-section {
  margin-bottom: 24rpx;

  .section-row {
    align-items: flex-start;
  }
}

.section-label {
  font-size: 28rpx;
  color: $text-primary;
  font-weight: 500;
}

.note-input {
  flex: 1;
  margin-left: 40rpx;

  input {
    font-size: 26rpx;
    color: $text-primary;
    text-align: right;
    width: 100%;
  }

  .placeholder {
    color: $text-muted;
  }
}

// 费用明细
.cost-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  margin-bottom: 24rpx;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;

  &:not(:last-child) {
    border-bottom: 1px solid $border-color;
  }
}

.cost-label {
  font-size: 26rpx;
  color: $text-primary;
}

.cost-value {
  font-size: 26rpx;
  color: $text-primary;

  &.coupon {
    color: $text-muted;
  }
}

// 底部提交区域
.submit-section {
  flex-shrink: 0; // 防止被压缩
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 30rpx;
  background-color: #ffffff;
  border-top: 1px solid $border-color;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);

  // 添加安全区域适配
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}

.submit-section-content {
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}

.submit-btn {
  width: 100%;
  background-color: $text-primary;
  color: #ffffff;
  border: none;
  border-radius: 24rpx;
  padding: 16rpx;
  font-size: 28rpx;
  font-weight: 600;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    background-color: rgba(45, 55, 72, 0.8);
  }
}

// SKU选择弹窗样式
.specification-popup {
  background: white;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 30rpx 24rpx;
  border-bottom: 1rpx solid $border-color;

  .popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: $text-primary;
  }

  .popup-close {
    font-size: 40rpx;
    color: $text-muted;
    line-height: 1;
    padding: 8rpx;
    cursor: pointer;
    transition: color 0.3s;

    &:active {
      color: $text-secondary;
    }
  }
}

.popup-content {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

// 商品预览
.goods-preview {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 24rpx;
  background: $bg-light;
  border-radius: 16rpx;
  margin-bottom: 30rpx;

  .preview-image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 12rpx;
    flex-shrink: 0;
  }

  .preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }

  .preview-name {
    font-size: 26rpx;
    color: $text-primary;
    font-weight: 500;
    line-height: 1.3;
  }
}

// SKU选择区域
.sku-section {
  margin-bottom: 30rpx;

  .sku-title {
    font-size: 28rpx;
    color: $text-primary;
    font-weight: 600;
    margin-bottom: 20rpx;
    display: block;
  }

  .sku-options {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }

  .sku-option {
    padding: 20rpx;
    border: 2rpx solid $border-color;
    border-radius: 12rpx;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;

    &:active {
      transform: scale(0.98);
    }

    &.active {
      border-color: $primary-color;
      background: rgba(102, 126, 234, 0.05);
    }

    .sku-option-content {
      display: flex;
      flex-direction: column;
      gap: 12rpx;
    }

    .sku-option-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sku-option-name {
      font-size: 28rpx;
      color: $text-primary;
      font-weight: 600;
    }

    .sku-option-price {
      font-size: 28rpx;
      color: $danger-color;
      font-weight: 600;
    }

    .sku-option-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      color: $text-secondary;
    }

    .sku-option-quantity {
      color: $success-color;
    }

    .sku-option-code {
      color: $text-muted;
    }
  }
}

// 确认按钮
.popup-actions {
  padding: 24rpx 30rpx 40rpx;
  border-top: 1rpx solid $border-color;
  background: white;

  .confirm-spec-btn {
    width: 100%;
    height: 88rpx;
    background: $primary-color;
    color: white;
    border: none;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 600;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      background: rgba(102, 126, 234, 0.8);
    }

    &:disabled {
      background: $text-muted;
      cursor: not-allowed;
    }
  }
}

// 商品卡片中的规格信息样式
.specifications-list {
  margin: 12rpx 0;
}

.spec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.spec-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.spec-label {
  font-size: 22rpx;
  color: $text-secondary;
  font-weight: 500;
}

.spec-text {
  font-size: 24rpx;
  color: $text-primary;
  font-weight: 500;

  &.placeholder {
    color: $text-muted;
  }
}
</style>