kxmall-ui/kxmall-app-ui/pages/order/create.vue

<template>
  <view class="order-submission">
    <navigator url="/pages/address/list?source=1" v-if="shippingType === 1" class="address">
      <view class="address-head">服务地址</view>
      <view v-if="addressData.phone" class="address-main">
        <image src="../../static/order/address.png" class="address-left"></image>
        <view class="address-text">{{ addressData.province }} {{ addressData.city }} {{ addressData.county }}
          {{ addressData.address }}
        </view>
        <image src="../../static/order/right.png" class="address-right"></image>
      </view>
      <view class="padding-tb-sm" v-else>
        请选择配送地址
      </view>
    </navigator>
    <image class="a-bg"
           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvV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"></image>
    <view class="goods">
      <view class="goods-head flex">
        <view class="goods-head-text">服务时间</view>
        <view @click="selectTime" style="text-align: right;" class="goods-head-time text-cut padding-right-sm">
          {{ shippingType === 2 ? orderReqeust.predictTime.replaceAll('送达', '取货') : orderReqeust.predictTime }}
        </view>
        <image src="../../static/order/time-right.png" class="goods-head-right"></image>
      </view>
      <view class="goods-one" v-if="orderReqeust.productList.length ==1">
        <image class="goods-img"
               :src="(orderReqeust.productList[0].productAttrImg?JSON.parse(orderReqeust.productList[0].productAttrImg)[0].url:JSON.parse(orderReqeust.productList[0].productImg)[0].url)"></image>
        <view class="goods-text">
          <view class="goods-name">{{ orderReqeust.productList[0].productAttrName }}</view>
          <view class="goods-tag">
            <view class="goods-price"
                  v-if="!orderReqeust.isIntegral && (orderReqeust.seckillId || orderReqeust.groupShopId)">
              ￥{{ orderReqeust.productList[0].price }}
            </view>
            <view class="goods-price"
                  v-if="!orderReqeust.isIntegral && !orderReqeust.seckillId && !orderReqeust.groupShopId">
              ￥{{ isVip ? orderReqeust.productList[0].vipPrice : orderReqeust.productList[0].price }}
            </view>
            <view class="goods-price" style="color: red" v-if="orderReqeust.isIntegral">
              积分{{ orderReqeust.productList[0].integral }}
            </view>
            <view class="goods-yprice">￥{{ orderReqeust.productList[0].otPrice }}</view>
            <view class="goods-number">×{{ orderReqeust.productList[0].cartNum }}</view>
          </view>
        </view>
      </view>
      <view class="goods-one" v-else>
        <view class="scroll_box">
          <scroll-view scroll-x="true">
            <block v-for="(item, index) in orderReqeust.productList" :key="index">
              <image class="goods-more-img"
                     :src="(item.productAttrImg?JSON.parse(item.productAttrImg)[0].url:JSON.parse(item.productImg)[0].url)"></image>
            </block>
          </scroll-view>
        </view>
        <view class="goods-more-number">共{{ orderReqeust.totalNumber }}件</view>
        <image src="../../static/order/time-right.png" class="goods-more-right"></image>
      </view>
    </view>
    <view class="distribution">
      <view class="distribution-list distribution-list-bottom" v-if="shippingType === 2">
        <view class="distribution-text">联系人</view>
        <view class="distribution-price"><input type="text" v-model="orderReqeust.name"
                                                placeholder="请输入您的联系姓名"></view>
      </view>
      <view class="distribution-list distribution-list-bottom" v-if="shippingType === 2">
        <view class="distribution-text">联系电话</view>
        <view class="distribution-price"><input type="text" v-model="orderReqeust.phone"
                                                placeholder="请输入您的联系电话"></view>
      </view>
      <view class="distribution-list distribution-list-bottom"
            :class="{ 'disabled': !hasAvailableCoupons }"
            @click="hasAvailableCoupons ? toggleMask('show') : null"
            v-if="!orderReqeust.isIntegral">
        <view class="distribution-text">优惠券
          <!-- 新增最佳优惠标识 -->
          <view v-if="orderReqeust.coupon && orderReqeust.coupon.id === bestCouponId" class="best-coupon">
            最佳优惠
          </view>
        </view>
        <view class="distribution-price" :style="{ color: hasAvailableCoupons ? 'red' : '#999' }">
          {{
            orderReqeust.coupon ? "-￥" + orderReqeust.coupon.couponPrice : (hasAvailableCoupons ? '选择优惠券' : '暂无优惠券')
          }}
        </view>
      </view>
      
      <view class="distribution-list">
        <view class="distribution-text">备注</view>
        <view class="distribution-price"><input type="text" v-model="orderReqeust.mono" placeholder="请输入备注信息">
        </view>
      </view>
      
      <view class="distribution-list distribution-list-bottom" v-if="shippingType === 1">
        <view class="distribution-text">加急费用（可选）</view>
        <view class="distribution-price">
          <input type="number" v-model.number="orderReqeust.urgentFee"
                 placeholder="请输入加急费用"
                 style="text-align: right;">
          <text style="margin-left: 10rpx;">元</text>
        </view>
      </view>
      
      <!-- 照片上传区域 -->
      <view class="distribution-list photo-upload-section distribution-list-bottom">
        <view class="distribution-text">订单照片</view>
        <view class="photo-upload-container">
          <view class="photo-list">
            <!-- 已上传的照片预览 -->
            <view
                v-for="(photo, index) in orderReqeust.photos"
                :key="index"
                class="photo-item"
            >
              <image :src="photo" class="photo-preview" mode="aspectFill" @click="previewPhoto(index)"></image>
              <view class="photo-delete" @click="deletePhoto(index)">
                <text class="photo-delete-icon">×</text>
              </view>
            </view>
            
            <!-- 添加照片按钮 -->
            <view
                v-if="orderReqeust.photos.length < 5"
                class="photo-add-btn"
                @click="choosePhoto"
            >
              <text class="photo-add-icon">+</text>
              <text class="photo-add-text">添加照片</text>
            </view>
          </view>
          <view class="photo-tips">最多可上传5张照片</view>
        </view>
      </view>
    </view>
    <view class="distribution">
      <view class="distribution-list distribution-list-bottom">
        <view class="distribution-text pay-text">支付方式</view>
      </view>
      <view v-if="!orderReqeust.isIntegral" class="distribution-list distribution-list-bottom"
            @click="changePayType('WX')">
        <view class="distribution-text">微信</view>
        <view class="distribution-price">
          <image
              :src="payType === 'WX'?'../../static/order/xuanzhong.png':'../../static/order/xuanzhong-no.png'"></image>
        </view>
      </view>
      <view v-if="!orderReqeust.isIntegral" class="distribution-list" @click="changePayType('BALANCE')">
        <view class="distribution-text">余额</view>
        <view class="distribution-price">
          <image
              :src="payType === 'BALANCE'?'../../static/order/xuanzhong.png':'../../static/order/xuanzhong-no.png'"></image>
        </view>
      </view>
      <view v-if="orderReqeust.isIntegral" class="distribution-list" @click="changePayType('INTEGRAL')">
        <view class="distribution-text">积分</view>
        <view class="distribution-price">
          <image
              :src="payType === 'INTEGRAL'?'../../static/order/xuanzhong.png':'../../static/order/xuanzhong-no.png'"></image>
        </view>
      </view>
    </view>
    <!-- 优惠券面板 -->
    <view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
      <view class="mask-content" @click.stop.prevent="stopPrevent">
        <!-- 优惠券页面，仿mt -->
        <view v-if="getAvailableCoupons().length === 0" class="no-coupon-tip">
          <text>暂无可用优惠券</text>
        </view>
        <view @click="selectCoupon(item)"
              v-if="(!item.categoryId && orderReqeust.totalPrice >= item.useMinPrice) || (item.categoryId && skuCategoryPriceMap[item.categoryId] && skuCategoryPriceMap[item.categoryId] > item.useMinPrice)"
              class="coupon-item" v-for="(item,index) in couponList" :key="index">
          <view class="con">
            <view class="left">
              <text class="title">{{ item.couponTitle }}</text>
              <text class="time">有效期至{{ item.endTime | dateFormat }}</text>
            </view>
            <view class="right">
              <text class="price">{{ item.couponPrice }}</text>
              <text>满{{ item.useMinPrice }}可用</text>
            </view>
            
            <view class="circle l"></view>
            <view class="circle r"></view>
          </view>
          <text class="tips">{{ item.categoryTitle ? '限' + item.categoryTitle + '可用' : '全品类可用' }}</text>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="footer">
      <view class="priceClass">
        <view class="price-content">
          <text>总计</text>
          <text class="price-content-money">
            ￥{{ orderPriceData.actualPrice || 0 }}
          </text>
          <text class="price-content-money" style="color: red" v-if="orderReqeust.isIntegral === 1"> +
            积分{{ orderReqeust.integral }}
          </text>
        </view>
        <view class="price-preferential">
          <text>已优惠：</text>
          <text>{{ jian(orderPriceData.productOriginalTotalPrice || 0, orderPriceData.actualPrice || 0) }}元</text>
        </view>
      </view>
      <view class="submit" @click="submit">
        去付款
      </view>
    </view>
    
    <uni-popup ref="popup" type="bottom" :animation="true" style="z-index: 9999;">
      <view class="flex align-center justify-between" style="padding: 34rpx 30rpx;background-color: #F2F2F2;">
        <view style="font-size: 32rpx;line-height: 38rpx;color: #1B1C33;">选择到达时间</view>
        <view @click="checkTime" style="font-size: 32rpx;line-height: 38rpx;color: #2AAB34;">确定</view>
      </view>
      <view class="flex justify-between">
        <view style="width: 347rpx;height: 500rpx;background-color: #F2F2F2;">
          <view v-for="(date,index) in dayList" :key="index" @click="chooseDay(index)"
                :class="[index == dayIndex?'bg-white':'']"
                style="padding: 25rpx 84rpx 25rpx 59rpx;font-size: 32rpx;line-height: 38rpx;color: #1B1C33;">
            {{ date }}
          </view>
        </view>
        <view class="bg-white" style="width: 404rpx;height: 500rpx;padding-left: 52rpx;position: relative;">
          <scroll-view scroll-y="true" style="width: 404rpx;height: 500rpx;">
            <view v-for="(time,index) in timeList[dayIndex]" :key="index" @click="chooseTime(index)"
                  :class="[index == timeIndex?'text-green':'']"
                  class="solid-bottom" style="padding: 25rpx 0;font-size: 32rpx;line-height: 38rpx;">
              <text v-if="time.length > 2">{{ time }}</text>
              <text v-else>{{ time[0] + '-' + time[1] }}</text>
            </view>
          </scroll-view>
          <view
              style="position: absolute;bottom: 0;width: 404rpx;height: 53rpx;background-color: rgba(255,255,255,0.8);">
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue"

export default {
  data() {
    return {
      payType: 'WX',
      shippingType: 1,
      bestCouponId: null, // 最佳优惠券的 ID
      orderReqeust: {
        productList: [],
        totalotPrice: 0,
        totalPrice: 0, //商品折扣（仅算VIP和限时打折）后总价
        totalNumber: 0,//商品件数
        coupon: undefined,
        couponId: 0,
        mono: '',
        takeWay: '',
        freightPrice: 0,
        urgentFee: undefined, // 加急费用
        addressId: undefined,
        predictTime: '',
        phone: '',
        name: '',
        integral: 0,
        gainIntegral: 0,
        photos: [] // 订单照片数组
      },
      skuCategoryPriceMap: {},
      maskState: 0, //优惠券面板显示状态
      couponList: [],
      hasAvailableCoupons: false, // 是否有可用优惠券
      urgentFeeTimer: null, // 加急费用防抖定时器
      orderPriceData: { // 订单价格数据
        productTotalPrice: 0,
        productOriginalTotalPrice: 0,
        freightPrice: 0,
        urgentFee: 0,
        couponPrice: 0,
        actualPrice: 0
      },
      isVip: false,
      storageData: {
        address: ''
      },
      addressData: {
        consignee: '',
        phone: '',
        province: '',
        city: '',
        county: '',
        address: '',
        defaultAddress: false,
      },
      submiting: false,
      dayList: [],//配送时间
      dayIndex: 0,//选中配送时间
      timeList: [],
      timeIndex: 0,
      now: 0,//当前小时
      nowTime: 0,//当前分钟
      dateObj: {
        year: 0,
        today: 0,
        tomorrow: 1,
        afterTomo: 2
      }
    }
  },
  components: {uniPopup},
  computed: {
    // 动态计算照片区域高度
    photoContainerHeight() {
      const totalItems = this.orderReqeust.photos.length + (this.orderReqeust.photos.length < 5 ? 1 : 0) // 照片数量 + 添加按钮
      const rows = Math.ceil(totalItems / 2) // 每行2张，计算行数
      return rows * 200 + 'rpx' // 每行200rpx高度（包含180rpx照片高度 + 20rpx行间距）
    }
  },
  onShow() {
    this.isVip = this.$api.isVip()
  },
  onLoad(option) {
    //商品数据
    this.isVip = this.$api.isVip()
    const that = this
    if (option.takeway) {
      that.orderReqeust.takeWay = option.takeway
    }
    that.orderReqeust.productList = that.$api.globalData.productList;
    let totalotPrice = 0
    let totalPrice = 0
    let totalNumber = 0
    let skuCategoryPriceMap = {}
    that.orderReqeust.productList.forEach(item => {
      totalotPrice += item.otPrice * item.cartNum
      totalNumber += item.cartNum
      totalPrice += that.isVip ? (item.vipPrice * item.cartNum) : (item.price * item.cartNum)
      //构建category价格Map
      item.cateIdList.forEach(catItem => {
        if (skuCategoryPriceMap[catItem]) {
          skuCategoryPriceMap[catItem] += that.isVip ? (item.vipPrice * item.cartNum) : (item.price * item.cartNum)
        } else {
          skuCategoryPriceMap[catItem] = that.isVip ? (item.vipPrice) : (item.price)
        }
      })
    })
    that.skuCategoryPriceMap = skuCategoryPriceMap
    that.orderReqeust.totalotPrice = totalotPrice
    that.orderReqeust.totalNumber = totalNumber
    that.orderReqeust.totalPrice = totalPrice
    that.$api.request('get', 'coupon/app/getUserCoupons').then(res => {
      that.couponList = res.data
      that.hasAvailableCoupons = that.getAvailableCoupons().length > 0
      this.findBestCoupon(); // 找出最佳优惠券
      // 初始化价格计算
      that.calculateOrderPrice();
    })
    
    let addresses = uni.getStorageSync('addresses');
    that.$api.request('get', 'storage/position/getStorage', {storageId: that.$store.state.storageId}).then(res => {
      that.storageData = res.data
      if (addresses) {
        that.storageData.distance = addresses.distance
      }
    })
    //设置距离
    
    that.$api.request('get', 'address/app/getDefAddress').then(res => {
      if (res.data) {
        that.addressData = res.data
      }
      that.calcFreightPrice()
    })
    
    if (that.orderReqeust.productList.length === 1 && that.orderReqeust.productList[0].groupShopId) {
      //若是团购商品，则携带上团购信息
      that.orderReqeust.groupShopId = that.orderReqeust.productList[0].groupShopId
      //总价重置
      that.orderReqeust.totalPrice = that.orderReqeust.productList[0].price
    }
    if (that.orderReqeust.productList.length === 1 && that.orderReqeust.productList[0].seckillId) {
      //若是秒杀商品，则携带上秒杀信息
      that.orderReqeust.seckillId = that.orderReqeust.productList[0].seckillId
      //总价重置
      that.orderReqeust.totalPrice = that.orderReqeust.productList[0].price
    }
    if (that.orderReqeust.productList.length === 1 && that.orderReqeust.productList[0].isIntegral) {
      //若是积分商品，则携带上积分信息
      that.orderReqeust.isIntegral = that.orderReqeust.productList[0].isIntegral
      that.orderReqeust.integral = that.orderReqeust.productList[0].integral
      that.orderReqeust.payType = 'INTEGRAL'
      that.payType = 'INTEGRAL'
    }
    // 使用默认参数：8-22点，7天，1小时间隔
    // 可以根据需要调整参数：this.calcTime(minStartHour, maxEndHour, dayCount, intervalHour)
    this.calcTime()
  },
  methods: {
    findBestCoupon() {
      if (this.couponList.length > 0) {
        // 找出优惠力度最大的优惠券
        let bestCoupon = this.couponList.reduce((prev, curr) => {
          return prev.couponPrice > curr.couponPrice ? prev : curr;
        });
        this.bestCouponId = bestCoupon.id; // 存储最佳优惠券的 ID
      }
    },
    // 获取可用的优惠券列表
    getAvailableCoupons() {
      return this.couponList.filter(item => {
        return (!item.categoryId && this.orderReqeust.totalPrice >= item.useMinPrice) ||
            (item.categoryId && this.skuCategoryPriceMap[item.categoryId] && this.skuCategoryPriceMap[item.categoryId] > item.useMinPrice);
      });
    },
    // 计算订单价格
    calculateOrderPrice() {
      const that = this;
      const requestData = {
        ...that.orderReqeust,
        urgentFee: that.orderReqeust.urgentFee || 0
      };
      
      that.$api.request('post', 'order/app/calculateOrderPrice', JSON.stringify(requestData))
        .then(res => {
          that.orderPriceData = res.data;
          // 更新可用优惠券状态
          that.hasAvailableCoupons = that.getAvailableCoupons().length > 0;
        })
        .catch(err => {
          console.error('计算订单价格失败:', err);
          // 出错时使用默认值
          that.orderPriceData = {
            productTotalPrice: that.orderReqeust.totalPrice || 0,
            productOriginalTotalPrice: that.orderReqeust.totalotPrice || 0,
            freightPrice: that.orderReqeust.freightPrice || 0,
            urgentFee: that.orderReqeust.urgentFee || 0,
            couponPrice: that.orderReqeust.coupon ? that.orderReqeust.coupon.couponPrice : 0,
            actualPrice: (that.orderReqeust.totalPrice || 0) - (that.orderReqeust.coupon ? that.orderReqeust.coupon.couponPrice : 0) + (that.orderReqeust.freightPrice || 0) + (that.orderReqeust.urgentFee || 0)
          };
        });
    },
    showFreightMsg() {
      uni.showToast({
        title: this.orderReqeust.freightMsg, // 假设接口返回的 msg 存储在 freightMsg 中
        icon: 'none',
        duration: 2000
      });
    },
    // 选择支付方式
    changePayType(type) {
      this.payType = type
    },
    
    // 选择照片
    choosePhoto() {
      const remainingCount = 5 - this.orderReqeust.photos.length
      uni.chooseImage({
        count: remainingCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
          // 依次上传选中的照片
          tempFilePaths.forEach(filePath => {
            this.uploadPhoto(filePath)
          })
        },
        fail: (err) => {
          console.error('选择照片失败:', err)
          uni.showToast({
            title: '选择照片失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 上传照片
    uploadPhoto(filePath) {
      this.$api.uploadImgByPath(filePath, (url) => {
        this.orderReqeust.photos.push(url)
        uni.showToast({
          title: '上传成功',
          icon: 'success'
        })
      })
    },
    
    // 预览照片
    previewPhoto(index) {
      uni.previewImage({
        urls: this.orderReqeust.photos,
        current: index
      })
    },
    
    // 删除照片
    deletePhoto(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这张照片吗？',
        success: (res) => {
          if (res.confirm) {
            this.orderReqeust.photos.splice(index, 1)
          }
        }
      })
    },
    addressType: function (index) {
      this.shippingType = index
      this.calcFreightPrice()
    },
    //显示优惠券面板
    toggleMask(type) {
      let timer = type === 'show' ? 10 : 300;
      let state = type === 'show' ? 1 : 0;
      this.maskState = 2;
      setTimeout(() => {
        this.maskState = state;
      }, timer)
    },
    jia(arg1, arg2) {
      var r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = arg2.toString().split(".")[1].length
      } catch (e) {
        r2 = 0
      }
      m = Math.pow(10, Math.max(r1, r2));
      return (arg1 * m + arg2 * m) / m;
      
    },
    jian(arg2, arg1) {
      var r1, r2, m, n;
      try {
        r1 = arg1.toString().split(".")[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = arg2.toString().split(".")[1].length
      } catch (e) {
        r2 = 0
      }
      m = Math.pow(10, Math.max(r1, r2));
      //lastmodifybydeeka
      //动态控制精度长度
      n = (r1 >= r2) ? r1 : r2;
      return ((arg2 * m - arg1 * m) / m).toFixed(n);
    },
    calcFreightPrice() {
      const that = this;
      if (that.addressData) {
        that.orderReqeust.addressId = that.addressData.id;
      }
      that.orderReqeust.storageId = that.$store.state.storageId;
      
      // 调用新的价格计算接口
      that.calculateOrderPrice();
    },
    numberChange(data) {
      this.number = data.number;
    },
    submit() {
      const that = this
      if (that.submiting) {
        return
      }
      if (this.shippingType === 1) {
        if (!this.addressData.id) {
          this.$api.msg('请选择配送地址')
          return
        }
      } else {
        if (!this.storageData) {
          this.$api.msg('未有仓库地址信息')
          return
        }
        if (!this.orderReqeust.name) {
          this.$api.msg('请填写您的联系姓名')
          return
        }
        
        if (!this.storageData.phone || this.storageData.phone.length !== 11) {
          this.$api.msg('请正确填写您的联系方式')
          return
        }
      }
      if (this.orderReqeust.freightPrice < 0 && !that.orderReqeust.isIntegral) {
        this.$api.msg('无法配送！最低配送为' + Math.abs(this.orderReqeust.freightPrice) + '元')
        return
      }
      uni.showLoading({})
      that.submiting = true
      if (that.addressData.id) {
        that.orderReqeust.addressId = that.addressData.id
      }
      that.orderReqeust.storageId = that.$store.state.storageId
      that.orderReqeust.shippingType = this.shippingType
      that.orderReqeust.channel = uni.getSystemInfoSync().platform
      that.orderReqeust.payType = that.payType
      if (that.payType === 'BALANCE') {
        that.$api.request('post', 'order/app/takeOrder',
            JSON.stringify(that.orderReqeust)
            , failres => {
              that.submiting = false
              that.$api.msg(failres.msg)
            }).then(res => {
          uni.redirectTo({
            url: '/pages/pay/success'
          })
        })
        return;
      }
      if (that.orderReqeust.isIntegral) {
        that.$api.request('post', 'order/app/takeOrder',
            JSON.stringify(that.orderReqeust)
            , failres => {
              that.submiting = false
              that.$api.msg(failres.msg)
            }).then(res => {
          uni.redirectTo({
            url: '/pages/pay/success'
          })
        })
        return;
      }
      that.$api.request('post', 'order/app/takeOrder',
          JSON.stringify(that.orderReqeust)
          , failres => {
            that.submiting = false
            that.$api.msg(failres.msg)
          }).then(res => {
        //提交订单成功后，无需再让用户提交订单
        // that.submiting = false
        // uni.redirectTo({
        // 	url: '/pages/pay/pay?orderno=' + res.data + '&price=' + that.orderReqeust.totalPrice
        // })
        that.confirm(res.data, that.orderPriceData.actualPrice || 0)
      })
      
    },
    selectCoupon(couponItem) {
      this.orderReqeust.couponId = couponItem.id
      this.orderReqeust.coupon = couponItem
      this.maskState = 0
      this.calculateOrderPrice()
    },
    stopPrevent() {
    },
    //打开选择时间的弹窗
    selectTime() {
      this.$refs.popup.open()
    },
    /**
     * 生成服务时间选项
     * @param {number} minStartHour - 最小开始时间（整点，0-23）
     * @param {number} maxEndHour - 最大结束时间（整点，0-23）
     * @param {number} dayCount - 天数（默认7天，包含今天）
     * @param {number} intervalHour - 间隔时间（默认1小时）
     */
    calcTime(minStartHour = 8, maxEndHour = 22, dayCount = 8, intervalHour = 1) {
      const date = new Date()
      
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const currentHour = date.getHours()
      
      if (date.getHours() >= maxEndHour) {
        dayCount += 1
      }
      
      // 初始化数组
      this.dayList = []
      this.timeList = []
      this.dateObj = {year, month: month < 10 ? '0' + month : month}
      
      // 生成日期列表
      for (let i = 0; i < dayCount; i++) {
        const targetDate = new Date(year, month - 1, day + i)
        const targetMonth = targetDate.getMonth() + 1
        const targetDay = targetDate.getDate()
        const formatMonth = targetMonth < 10 ? '0' + targetMonth : targetMonth
        const formatDay = targetDay < 10 ? '0' + targetDay : targetDay
        
        let dayLabel = ''
        if (i === 0) {
          dayLabel = `今天${formatMonth}月${formatDay}日`
          this.dateObj.today = formatDay
        } else if (i === 1) {
          dayLabel = `明天${formatMonth}月${formatDay}日`
          this.dateObj.tomorrow = formatDay
        } else if (i === 2) {
          dayLabel = `后天${formatMonth}月${formatDay}日`
          this.dateObj.afterTomo = formatDay
        } else {
          const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
          const weekday = weekdays[targetDate.getDay()]
          dayLabel = `${weekday}${formatMonth}月${formatDay}日`
        }
        
        this.dayList.push(dayLabel)
        this.timeList[i] = []
      }
      
      // 生成时间段选项
      for (let dayIndex = 0; dayIndex < dayCount; dayIndex++) {
        let startHour = minStartHour
        
        // 如果是今天，需要特殊处理
        if (dayIndex === 0) {
          if (currentHour >= maxEndHour) {
            // 当前时间已过营业结束时间，今天不提供服务
            continue
          } else if (currentHour >= minStartHour) {
            // 当前时间在营业时间内，从下一个整点开始
            startHour = currentHour + 1
            // 如果还有可用时间段，添加"尽快到达"选项
            if (startHour <= maxEndHour) {
              this.timeList[0].push('尽快到达')
            }
          }
          // 如果当前时间在营业开始前，使用原本的minStartHour
        }
        
        // 生成时间段
        for (let hour = startHour; hour <= maxEndHour; hour += intervalHour) {
          const endHour = Math.min(hour + intervalHour, maxEndHour)
          if (endHour > hour) {
            const startTime = hour < 10 ? '0' + hour + ':00' : hour + ':00'
            const endTime = endHour < 10 ? '0' + endHour + ':00' : endHour + ':00'
            this.timeList[dayIndex].push([startTime, endTime])
          }
        }
      }
      
      // 移除没有可用时间段的天（从后往前删除，避免索引问题）
      for (let i = this.timeList.length - 1; i >= 0; i--) {
        if (this.timeList[i].length === 0) {
          this.dayList.splice(i, 1)
          this.timeList.splice(i, 1)
        }
      }
      
      // 设置默认选择（第一天的第一个时间段）
      if (this.dayList.length > 0) {
        // 找到第一个有时间段的天
        let firstAvailableDay = 0
        for (let i = 0; i < this.timeList.length; i++) {
          if (this.timeList[i].length > 0) {
            firstAvailableDay = i
            break
          }
        }
        
        if (this.timeList[firstAvailableDay] && this.timeList[firstAvailableDay].length > 0) {
          this.dayIndex = firstAvailableDay
          this.timeIndex = 0
          
          const firstDay = this.dayList[firstAvailableDay]
          const firstTime = this.timeList[firstAvailableDay][0]
          
          if (typeof firstTime === 'string') {
            // 尽快到达的情况
            const nextHour = currentHour + 1
            const estimatedTime = nextHour < 10 ? '0' + nextHour + ':00' : nextHour + ':00'
            this.orderReqeust.predictTime = `尽快到达（预计${estimatedTime}到达）`
            
            const targetDate = new Date(year, month - 1, day + firstAvailableDay, nextHour, 0)
            this.orderReqeust.predictDate = targetDate.getTime()
          } else {
            // 普通时间段的情况
            this.orderReqeust.predictTime = `${firstDay}${firstTime[0]}-${firstTime[1]}`
            
            const targetDate = new Date(year, month - 1, day + firstAvailableDay)
            const endTime = firstTime[1].split(':')
            targetDate.setHours(parseInt(endTime[0]), parseInt(endTime[1]))
            this.orderReqeust.predictDate = targetDate.getTime()
          }
        } else {
          // 如果没有任何可用时间段，设置明天的第一个时间段
          console.warn('No available time slots found, creating fallback option')
          this.orderReqeust.predictTime = '明天' + minStartHour + ':00-' + (minStartHour + 1) + ':00'
        }
      }
      
      // 保存当前时间信息
      this.now = currentHour
      this.nowTime = date.getMinutes()
      
      // 调试信息
      console.log('calcTime debug info:', {
        currentHour,
        minStartHour,
        maxEndHour,
        dayCount,
        intervalHour,
        dayListLength: this.dayList.length,
        timeListLength: this.timeList.length,
        timeList: this.timeList
      })
    },
    chooseDay(index) {
      this.dayIndex = index
    },
    chooseTime(index) {
      this.timeIndex = index
    },
    checkTime() {
      const selectedTime = this.timeList[this.dayIndex][this.timeIndex]
      const selectedDay = this.dayList[this.dayIndex]
      
      // 计算目标日期
      const today = new Date()
      const targetDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + this.dayIndex)
      
      if (typeof selectedTime === 'string' && selectedTime === '尽快到达') {
        // 尽快到达的情况
        const nextHour = this.now + 1
        const estimatedTime = nextHour < 10 ? '0' + nextHour + ':00' : nextHour + ':00'
        this.orderReqeust.predictTime = `尽快到达（预计${estimatedTime}到达）`
        
        targetDate.setHours(nextHour, 0, 0, 0)
        this.orderReqeust.predictDate = targetDate.getTime()
      } else {
        // 普通时间段的情况
        this.orderReqeust.predictTime = `${selectedDay}${selectedTime[0]}-${selectedTime[1]}`
        
        const endTime = selectedTime[1].split(':')
        targetDate.setHours(parseInt(endTime[0]), parseInt(endTime[1]), 0, 0)
        this.orderReqeust.predictDate = targetDate.getTime()
      }
      
      this.$refs.popup.close()
      console.log('Selected time:', this.orderReqeust)
    },
    //确认支付
    confirm(orderNo, totalPrice) {
      // ============微信支付代码 prod 开始============
      // #ifdef APP-PLUS
      this.$api.msg('演示环境不支持支付')
      return
      // #endif
      const that = this
      that.$api.request('get', 'order/app/wxPrepay', {
        orderId: orderNo
      }, failres => {
        that.submiting = false
        that.$api.msg(failres.msg)
      }).then(prepayRes => {
        uni.hideLoading()
        that.submiting = false
        let payParam = {};
        //#ifdef MP-WEIXIN
        payParam = {
          appId: prepayRes.data.appId,
          nonceStr: prepayRes.data.nonceStr,
          package: prepayRes.data.packageValue,
          timeStamp: prepayRes.data.timeStamp,
          signType: prepayRes.data.signType,
          paySign: prepayRes.data.paySign,
        }
        //#endif
        //#ifdef APP-PLUS
        payParam = {
          appid: prepayRes.data.appId,
          noncestr: prepayRes.data.nonceStr,
          package: prepayRes.data.packageValue,
          partnerid: prepayRes.data.partnerId,
          prepayid: prepayRes.data.prepayId,
          timestamp: parseInt(prepayRes.data.timeStamp),
          sign: prepayRes.data.sign,
          signType: 'MD5'
        }
        //#endif
        //#ifdef MP-WEIXIN || APP-PLUS
        uni.requestPayment({
          provider: 'wxpay',
          //#ifdef MP-WEIXIN
          ...payParam,
          //#endif
          //#ifdef APP-PLUS
          orderInfo: payParam,
          //#endif
          success: function (res) {
            uni.redirectTo({
              url: '/pages/pay/success'
            })
          },
          fail: function (res) {
            // console.log("支付过程失败");
            // that.$api.msg(JSON.stringify(res))
          },
          complete: function (res) {
            console.log("支付过程结束")
          }
        });
        //#endif
        //#ifdef H5
        that.$jweixin.chooseWXPay({
          nonceStr: prepayRes.data.nonceStr,
          timestamp: prepayRes.data.timeStamp,
          package: prepayRes.data.packageValue,
          signType: prepayRes.data.signType,
          paySign: prepayRes.data.paySign,
          success: (e) => {
            //支付成功
            uni.redirectTo({
              url: '/pages/pay/success'
            })
          },
          fail: function (res) {
            console.log("支付过程失败");
            that.$api.msg(JSON.stringify(res))
          },
          complete: function (res) {
            console.log("支付过程结束")
          }
        })
        //#endif
      })
      //============微信支付代码 prod 结束============
      //============微信支付代码 dev 开始============
      // uni.request({
      //   url: this.$api.defConfig().baseUrl + '/cb/wxpay',
      //   data: {
      //     outTradeNo: orderNo,
      //     transactionId:'test',
      //     totalFee: Math.round(totalPrice * 100)
      //   },
      //   method: 'POST',
      //   header: {
      //     'Content-Type': 'application/json; charset=UTF-8'
      //   },
      //   success: (res) => {
      //     //代码回调-上线后注释代码-结束
      //     uni.redirectTo({
      //       url: '/pages/pay/success'
      //     })
      //   }
      // });
      //============微信支付代码 dev 结束============
      
    }
  },
  watch: {
    // 监听加急费用变化
    'orderReqeust.urgentFee': {
      handler(newVal, oldVal) {
        if (newVal !== oldVal && this.orderReqeust.productList && this.orderReqeust.productList.length > 0) {
          // 防抖处理，避免频繁调用
          clearTimeout(this.urgentFeeTimer);
          this.urgentFeeTimer = setTimeout(() => {
            this.calculateOrderPrice();
          }, 500);
        }
      },
      immediate: false
    }
  }
}
</script>

<style lang="scss">
page {
  background: #F4F4F4;
  padding-bottom: 100upx;
}

.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9995;
  transition: .3s;
  
  .mask-content {
    width: 100%;
    min-height: 30vh;
    max-height: 70vh;
    background: #f3f3f3;
    transform: translateY(100%);
    transition: .3s;
    overflow-y: scroll;
  }
  
  &.none {
    display: none;
  }
  
  &.show {
    background: rgba(0, 0, 0, .4);
    
    .mask-content {
      transform: translateY(0);
    }
  }
}

/* 无优惠券提示 */
.no-coupon-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200upx;
  color: #999;
  font-size: 28upx;
}

/* 优惠券列表 */
.coupon-item {
  display: flex;
  flex-direction: column;
  margin: 20upx 24upx;
  background: #fff;
  
  .con {
    display: flex;
    align-items: center;
    position: relative;
    height: 120upx;
    padding: 0 30upx;
    
    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 100%;
      height: 0;
      border-bottom: 1px dashed #f3f3f3;
      transform: scaleY(50%);
    }
  }
  
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    height: 100upx;
  }
  
  .title {
    font-size: 32upx;
    color: $font-color-dark;
    margin-bottom: 10upx;
  }
  
  .time {
    font-size: 24upx;
    color: $font-color-light;
  }
  
  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 26upx;
    color: $font-color-base;
    height: 100upx;
  }
  
  .price {
    font-size: 44upx;
    color: $base-color;
    
    &:before {
      content: '￥';
      font-size: 34upx;
    }
  }
  
  .tips {
    font-size: 24upx;
    color: $font-color-light;
    line-height: 60upx;
    padding-left: 30upx;
  }
  
  .circle {
    position: absolute;
    left: -6upx;
    bottom: -10upx;
    z-index: 10;
    width: 20upx;
    height: 20upx;
    background: #f3f3f3;
    border-radius: 100px;
    
    &.r {
      left: auto;
      right: -6upx;
    }
  }
}

.address {
  padding: 36upx 30upx;
  background-color: #FFFFFF;
  overflow: hidden;
}

.address-head {
  color: #999999;
  font-size: 28upx;
  font-weight: 400;
}

.address-main {
  margin-top: 24upx;
}

.address-left {
  margin: 9upx 0;
  width: 24upx;
  height: 32upx;
  float: left;
}

.address-text {
  margin-left: 14upx;
  float: left;
  font-size: 36upx;
  color: #333333;
  font-weight: 500;
}

.address-right {
  margin: 11upx 20upx 11upx 0;
  width: 28upx;
  height: 28upx;
  float: right;
}

.address-distance {
  clear: both;
  margin-top: 10upx;
  color: #333333;
  font-size: 30upx;
}

.a-bg {
  display: block;
  width: 100%;
  height: 5upx;
}

.goods {
  margin-top: 20upx;
  background-color: #FFFFFF;
  overflow: hidden;
}

.goods-head {
  margin: 0 30upx;
  height: 100upx;
  padding: 30upx 0;
  border-bottom: 2upx solid #F1F1F1;
}

.goods-head-text {
  width: 294upx;
  float: left;
  color: #333333;
  font-size: 28upx;
}

.goods-head-time {
  width: 490upx;
  float: left;
  color: #2AAC34;
  font-size: 28upx;
}

.goods-head-right {
  margin-top: 8upx;
  width: 16upx;
  height: 24upx;
  float: left;
}

.goods-one {
  padding: 40upx 0 30upx 0;
  margin: 0 30upx;
  height: 190upx;
}

.scroll_box {
  width: 544upx;
  height: 110upx;
  float: left;
  overflow: hidden;
}

.scroll_box scroll-view {
  height: 110upx;
  width: 544upx;
  white-space: nowrap;
}

.goods-img {
  margin-top: 2upx;
  width: 118upx;
  height: 110upx;
  float: left;
}

.goods-more-img {
  margin-top: 2upx;
  width: 118upx;
  height: 110upx;
  display: inline-block;
  margin-right: 36upx;
}

.goods-more-number {
  width: 126upx;
  height: 110upx;
  line-height: 110upx;
  text-align: center;
  color: #1B1C33;
  font-size: 28upx;
  float: left;
}

.goods-more-right {
  margin-top: 43.5upx;
  width: 15upx;
  height: 23upx;
  float: left;
}

.goods-text {
  margin-top: 6upx;
  margin-left: 32upx;
  width: 538upx;
  height: 110upx;
  float: left;
}

.goods-name {
  width: 500upx;
  line-height: 44upx;
  overflow: hidden;
  color: #333333;
  font-size: 32upx;
}

.goods-tag {
  margin-top: 10upx;
}

.goods-price {
  float: left;
  color: #333333;
  font-size: 32upx;
  line-height: 44upx;
}

.goods-yprice {
  margin-left: 16upx;
  float: left;
  color: #AEAEAE;
  font-size: 24upx;
  line-height: 44upx;
  text-decoration: line-through;
}

.goods-number {
  float: right;
  color: #333333;
  font-size: 32upx;
}

.distribution {
  padding: 0 30upx;
  margin-top: 20upx;
  background-color: #FFFFFF;
  overflow: hidden;
}

.distribution-list {
  height: 100upx;
  line-height: 100upx;
  font-size: 28upx;
  clear: both;
}

.distribution-list-bottom {
  border-bottom: 2upx solid #F1F1F1;
}

.distribution-list.disabled {
  opacity: 0.5;
  color: #999;
}


.info-icon {
  width: 28upx;
  height: 28upx;
  margin-left: 10upx;
  vertical-align: middle;
}

.distribution-price {
  width: 490upx;
  float: left;
  text-align: right;
  color: #666666;
}

.distribution-price input {
  width: 490upx;
  height: 100upx;
  line-height: 100upx;
  overflow: hidden;
  text-align: right;
}

.pay-text {
  color: #333333;
  font-size: 32upx;
}

.distribution-price image {
  width: 40upx;
  height: 40upx;
  float: right;
  margin-top: 30upx;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  height: 98upx;
  width: 100%;
  background-color: #FFFFFF;
}

.priceClass {
  margin-left: 62upx;
  width: 448upx;
  float: left;
}

.price-content {
  height: 50upx;
  line-height: 50upx;
  margin-top: 10upx;
  color: #666666;
  font-size: 26upx;
}

.price-content-money {
  color: #2AAC34;
  font-size: 36upx;
}

.price-preferential {
  height: 36upx;
  line-height: 36upx;
  color: #AEAEAE;
  font-size: 20upx;
}

.submit {
  width: 240upx;
  float: left;
  line-height: 98upx;
  color: #FFFFFF;
  background-color: #2AAC34;
  text-align: center;
}

.order-submission .wrapper .shipping select {
  color: #999;
  padding-right: 0.15 * 100rpx;
}

.order-submission .wrapper .shipping .iconfont {
  font-size: 0.3 * 100rpx;
  color: #515151;
}


.order-submission .wrapper .item .discount input::placeholder {
  color: #ccc;
}

.distribution-text {
  width: 200upx;
  float: left;
  color: #333333;
  display: flex; // 使用 flex 布局
  align-items: center; // 垂直居中
}

.best-coupon {
  display: inline-block;
  padding: 4upx 8upx;
  background-color: #fff;
  border-radius: 4upx;
  color: red;
  font-size: 24upx;
}

/* 照片上传相关样式 */
.photo-upload-section {
  flex-direction: row !important; /* 改为横向布局 */
  align-items: flex-start !important;
  height: auto !important; /* 覆盖distribution-list的固定高度 */
  line-height: normal !important; /* 覆盖distribution-list的固定行高 */
  padding: 30rpx 0 !important; /* 添加上下内边距 */
}

.photo-upload-container {
  flex: 1; /* 占据剩余空间 */
  margin-top: 50rpx;
  margin-left: 20rpx; /* 与文案保持间距 */
  min-height: 200rpx; /* 确保至少有200rpx高度 */
}

.photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  align-content: flex-start;
  width: 100%;
}

.photo-item {
  position: relative;
  width: 120rpx; /* 固定正方形宽度 */
  height: 120rpx; /* 固定正方形高度 */
  margin-bottom: 20rpx; /* 行间距 */
}

.photo-preview {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  border: 2rpx solid #e5e5e5;
}

.photo-delete {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #ff4757;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-delete-icon {
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
}

.photo-add-btn {
  width: 120rpx; /* 与photo-item保持一致 */
  height: 120rpx; /* 与photo-item保持一致 */
  margin-bottom: 20rpx; /* 与photo-item保持一致的行间距 */
  border: 2rpx dashed #ccc;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
}

.photo-add-icon {
  font-size: 32rpx; /* 调小图标尺寸 */
  color: #999;
  margin-bottom: 4rpx; /* 减少间距 */
}

.photo-add-text {
  font-size: 20rpx; /* 调小文字尺寸 */
  color: #999;
}

.photo-tips {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #999;
}
</style>