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

<template>
  <view class="order-submission">
    <view class="allAddress">
      <view class="nav acea-row">
        <view style="width: 50%;" class="item font-color-red" :class="shippingType === 1 ? 'on' : 'on2'"
              @click="addressType(1)"></view>
        <view style="width: 50%;float: right;" class="item font-color-red" :class="shippingType === 2 ? 'on' : 'on2'"
              @click="addressType(2)"></view>
      </view>
    </view>
    <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>
    <navigator v-if="shippingType === 2" class="address">
      <view class="address-head">订单配送至</view>
      <view v-if="storageData.address" class="address-main">
        <image src="../../static/order/address.png" class="address-left"></image>
        <view class="address-text">{{ storageData.address }} {{ storageData.phone }}</view>
        <view class="address-text" style="float: right;font-size: 28rpx;padding-top: 12rpx;">距离您
          {{ storageData.distance > 1000 ? (storageData.distance / 1000).toFixed(2) + 'km' : storageData.distance + 'm' }}
        </view>
      </view>
      <!-- <view class="address-distance">距离您732米</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">{{ shippingType === 2 ? '取货时间' : '送达时间' }}</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 === 1">
        <view class="distribution-text">配送费</view>
        <view class="distribution-price">
          {{ orderReqeust.freightPrice < 0 ? 0 : orderReqeust.freightPrice }}元
          <uni-icons type="info" size="20" color="#999" @click="showFreightMsg"></uni-icons>
        </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.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" @click="toggleMask('show')"
            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: red;">
          {{ orderReqeust.coupon ? "-￥" + orderReqeust.coupon.couponPrice : '选择优惠券' }}
        </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 photo-upload-section">
        <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 @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">
            ￥{{ jia(orderReqeust.totalPrice - (orderReqeust.coupon ? orderReqeust.coupon.couponPrice : 0), orderReqeust.freightPrice < 0 ? 0 : orderReqeust.freightPrice) }}
          </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(orderReqeust.totalotPrice, orderReqeust.totalPrice - (orderReqeust.coupon ? orderReqeust.coupon.couponPrice : 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="index == 0 && dayIndex == 0 && dayList.length >= 3">{{ 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,
        addressId: undefined,
        predictTime: '',
        phone: '',
        name: '',
        integral: 0,
        gainIntegral: 0,
        photos: [] // 订单照片数组
      },
      skuCategoryPriceMap: {},
      maskState: 0, //优惠券面板显示状态
      couponList: [],
      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
      this.findBestCoupon(); // 找出最佳优惠券
    })
    
    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'
    }
    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
      }
    },
    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;
      if (that.shippingType === 1 && !that.orderReqeust.isIntegral) {
        that.$api.request('post', 'order/app/getFreightMoney', JSON.stringify(that.orderReqeust))
            .then(res => {
              that.orderReqeust.freightPrice = res.data.totalPrice;
              that.orderReqeust.freightMsg = res.data.msg; // 存储 msg
            });
      } else {
        that.orderReqeust.freightPrice = 0;
      }
    },
    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.orderReqeust.totalPrice - (that.orderReqeust.coupon ? that.orderReqeust.coupon.couponPrice : 0) + parseFloat(that.orderReqeust.freightPrice)))
      })
      
    },
    selectCoupon(couponItem) {
      this.orderReqeust.couponId = couponItem.id
      this.orderReqeust.coupon = couponItem
      this.maskState = 0
      this.calcFreightPrice()
    },
    stopPrevent() {
    },
    //打开选择时间的弹窗
    selectTime() {
      this.$refs.popup.open()
    },
    //根据当前仓库营业时段及当前时间计算可供选择的送达时间
    calcTime() {
      var deliveryStart = this.$store.state.storageObj.deliveryStartTime.split(':')
      var deliveryStop = this.$store.state.storageObj.deliveryStopTime.split(':')
      var startHour = parseInt(deliveryStart[0])
      var startMin = parseInt(deliveryStart[1])
      var stopHour = parseInt(deliveryStop[0])
      var stopMin = parseInt(deliveryStop[1])
      
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      
      // Create dates for today, tomorrow and after tomorrow
      var today = new Date(year, month - 1, day)
      var tomorrow = new Date(year, month - 1, day + 1)
      var afterTomo = new Date(year, month - 1, day + 2)
      
      // Get correct month and day for each date
      var todayMonth = today.getMonth() + 1
      var todayDay = today.getDate()
      var tomorrowMonth = tomorrow.getMonth() + 1
      var tomorrowDay = tomorrow.getDate()
      var afterTomoMonth = afterTomo.getMonth() + 1
      var afterTomoDay = afterTomo.getDate()
      
      // Format dates with leading zeros if needed
      var formatTodayMonth = todayMonth > 9 ? todayMonth : '0' + todayMonth
      var formatTodayDay = todayDay > 9 ? todayDay : '0' + todayDay
      var formatTomorrowMonth = tomorrowMonth > 9 ? tomorrowMonth : '0' + tomorrowMonth
      var formatTomorrowDay = tomorrowDay > 9 ? tomorrowDay : '0' + tomorrowDay
      var formatAfterTomoMonth = afterTomoMonth > 9 ? afterTomoMonth : '0' + afterTomoMonth
      var formatAfterTomoDay = afterTomoDay > 9 ? afterTomoDay : '0' + afterTomoDay
      
      this.dateObj.year = year
      this.dateObj.today = formatTodayDay
      this.dateObj.tomorrow = formatTomorrowDay
      this.dateObj.afterTomo = formatAfterTomoDay
      this.dateObj.month = formatTodayMonth // Use today's month as reference
      
      this.dayList = [
        '今天' + formatTodayMonth + '月' + formatTodayDay + '日',
        '明天' + formatTomorrowMonth + '月' + formatTomorrowDay + '日',
        '后天' + formatAfterTomoMonth + '月' + formatAfterTomoDay + '日'
      ]
      
      this.timeList[0] = ['尽快送达']
      this.timeList[1] = []
      
      for (var i = 0; i < stopHour - startHour; i++) {
        var time = startHour + i > 9 ? parseInt(startHour + i) : '0' + parseInt(startHour + i)
        this.timeList[1].push([time + ':00', time + ':30'])
        this.timeList[1].push([time + ':30', parseInt(parseInt(time) + 1) + ':00'])
      }
      
      if (startMin >= 30) {
        this.timeList[1].splice(0, 1)
      }
      
      //预计送达时间字符
      this.orderReqeust.predictTime = this.dayList[1] + this.timeList[1][0][0] + '-' + this.timeList[1][0][1]
      this.orderReqeust.predictDate = new Date(year + '-' + formatTomorrowMonth + '-' + formatTomorrowDay + ' ' + this.timeList[1][0][1]).getTime()
      
      this.timeList[2] = []
      for (var i = 0; i < stopHour - startHour; i++) {
        var time = startHour + i > 9 ? parseInt(startHour + i) : '0' + parseInt(startHour + i)
        this.timeList[2].push([time + ':00', time + ':30'])
        this.timeList[2].push([time + ':30', parseInt(parseInt(time) + 1) + ':00'])
      }
      
      if (startMin >= 30) {
        this.timeList[2].splice(0, 1)
      }
      
      var now = date.getHours()
      if (now < startHour) {
        now = startHour
      }
      var nowTime = date.getMinutes()
      this.nowTime = nowTime
      this.now = now
      
      if (now >= stopHour) {
        this.dayList.splice(0, 1)
        this.timeList.splice(0, 1)
      } else {
        this.timeList[0] = ['尽快送达']
        for (var i = 0; i < stopHour - now; i++) {
          var time = now + i > 9 ? now + i : '0' + parseInt(now + i)
          this.timeList[0].push([time + ':00', time + ':30'])
          this.timeList[0].push([time + ':30', parseInt(now + i + 1) + ':00'])
        }
        
        if (nowTime > 30) {
          this.timeList[0].splice(1, 2)
          var timeMine = nowTime - 30 > 9 ? parseInt(nowTime - 30) : '0' + parseInt(nowTime - 30)
          this.orderReqeust.predictTime = '尽快送达（预计' + parseInt(now + 1) + ':' + timeMine + '送达)'
          this.orderReqeust.predictDate = new Date(year + '-' + formatTodayMonth + '-' + formatTodayDay + ' ' + parseInt(now + 1) + ':' + timeMine).getTime()
        } else if (nowTime < 29) {
          this.orderReqeust.predictTime = '尽快送达（预计' + now + ':' + parseInt(nowTime + 30) + '送达)'
          this.orderReqeust.predictDate = new Date(year + '-' + formatTodayMonth + '-' + formatTodayDay + ' ' + now + ':' + parseInt(nowTime + 30)).getTime()
        } else if (nowTime == 30) {
          this.timeList[0].splice(1, 1)
          this.orderReqeust.predictTime = '尽快送达（预计' + parseInt(now + 1) + ':00送达)'
          this.orderReqeust.predictDate = new Date(year + '-' + formatTodayMonth + '-' + formatTodayDay + ' ' + parseInt(now + 1) + ':00').getTime()
        }
      }
    },
    chooseDay(index) {
      this.dayIndex = index
    },
    chooseTime(index) {
      this.timeIndex = index
    },
    checkTime() {
      //当天尽快送达
      if (this.dayIndex == 0 && this.timeIndex == 0 && this.dayList.length >= 3) {
        if (this.nowTime > 30) {
          var timeMine = this.nowTime - 30 > 9 ? parseInt(this.nowTime - 30) : '0' + parseInt(this.nowTime - 30)
          this.orderReqeust.predictTime = '尽快送达（预计' + parseInt(this.now + 1) + ':' + timeMine + '送达)'
          this.orderReqeust.predictDate = new Date(this.dateObj.year + '-' + this.dateObj.month + '-' + this.dateObj.today + ' ' + parseInt(this.now + 1) + ':' + timeMine).getTime()
        } else if (this.nowTime < 29) {
          this.orderReqeust.predictTime = '尽快送达（预计' + this.now + ':' + parseInt(this.nowTime + 30) + '送达)'
          this.orderReqeust.predictDate = new Date(this.dateObj.year + '-' + this.dateObj.month + '-' + this.dateObj.today + ' ' + this.now + ':' + parseInt(this.nowTime + 30)).getTime()
        } else if (this.nowTime == 30) {
          this.orderReqeust.predictTime = '尽快送达（预计' + parseInt(this.now + 1) + ':00送达)'
          this.orderReqeust.predictDate = new Date(this.dateObj.year + '-' + this.dateObj.month + '-' + this.dateObj.today + ' ' + parseInt(this.now + 1) + ':00').getTime()
        }
        this.$refs.popup.close()
        console.log(this.orderReqeust)
        return
      }
      //当天送达
      if (this.dayIndex == 0 && this.dayList.length >= 3) {
        this.orderReqeust.predictTime = this.timeList[0][this.timeIndex][0] + '-' + this.timeList[0][this.timeIndex][1]
        console.log(this.dateObj.year + '-' + this.dateObj.month + '-' + this.dateObj.today + ' ' + this.timeList[this.dayIndex][this.timeIndex][1])
        this.orderReqeust.predictDate = new Date(this.dateObj.year + '-' + this.dateObj.month + '-' + this.dateObj.today + ' ' + this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        this.$refs.popup.close()
        console.log(this.orderReqeust)
        return
      }
      //明、后天送达
      this.orderReqeust.predictTime = this.dayList[this.dayIndex] + this.timeList[this.dayIndex][this.timeIndex][0] + '-' + this.timeList[this.dayIndex][this.timeIndex][1]
      if (this.dayList.length >= 3) {
        if (this.dayIndex == 1) {//明天
          this.orderReqeust.predictDate = new Date(this.dateObj.year + '-' + this.dateObj.month + '-' + this.dateObj.tomorrow + ' ' + this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        } else if (this.dayIndex == 2) {//后天
          this.orderReqeust.predictDate = new Date(this.dateObj.year + '-' + this.dateObj.month + '-' + this.dateObj.afterTomo + ' ' + this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        }
      } else if (this.dayList.length >= 2) {
        if (this.dayIndex == 0) {//明天
          this.orderReqeust.predictDate = new Date(this.dateObj.year + '-' + this.dateObj.month + '-' + this.dateObj.tomorrow + ' ' + this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        } else if (this.dayIndex == 1) {//后天
          this.orderReqeust.predictDate = new Date(this.dateObj.year + '-' + this.dateObj.month + '-' + this.dateObj.afterTomo + ' ' + this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        }
      }
      this.$refs.popup.close()
      console.log(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
        //#ifdef MP-WEIXIN
        const 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
        const 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 结束============
      
    }
  }
}
</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);
    }
  }
}

/* 优惠券列表 */
.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;
}


.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 .allAddress {
  width: 100%;
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 100%);
  background-image: -webkit-linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 100%);
  background-image: -moz-linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 100%);
  padding-top: 1 * 100rpx;
}

.order-submission .allAddress .nav {
  margin: 0 auto;
  padding: 0 30rpx;
  width: 100%;
  box-sizing: border-box;
}

.order-submission .allAddress .nav .item {
  flex: 1;
  position: relative;
}

.order-submission .allAddress .nav .item.on {
  position: relative;
}

.order-submission .allAddress .nav .item.on:before {
  position: absolute;
  bottom: 0;
  content: '骑手配送';
  font-size: 0.28 * 100rpx;
  display: block;
  height: 0;
  left: 0;
  right: 0;
  border-width: 0.4 * 100rpx;
  border-style: solid;
  border-color: #fff;
  z-index: 9;
  text-align: center;
  line-height: 0.14 * 100rpx;
}

.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
  content: '到店自提';
  border-width: 0.4 * 100rpx;
}

.order-submission .allAddress .nav .item.on2 {
  position: relative;
}

.order-submission .allAddress .nav .item.on2:before {
  position: absolute;
  bottom: 0;
  content: '到店自提';
  font-size: 0.28 * 100rpx;
  display: block;
  height: 0;
  left: 0;
  right: 0;
  border-width: 0.4 * 100rpx;
  border-style: solid;
  border-color: #d5e6e6;
  text-align: center;
  line-height: 0.14 * 100rpx;
}

.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
  content: '骑手配送';
  border-width: 0.4 * 100rpx;
}

.order-submission .allAddress .address {
  width: 6.91 * 100rpx;
  height: 1.5 * 100rpx;
  margin: 0 auto;
  box-sizing: border-box;
}

.order-submission .allAddress .line {
  width: 7.1 * 100rpx;
  margin: 0 auto;
}

.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>