zhjwxt/uniapp/components/order-list-card/payment-voucher-popup.vue

<!--支付凭证上传弹窗组件-->
<template>
  <view class="payment-voucher-wrapper">
    <!-- 遮罩层 -->
    <view class="popup-mask" @click="handleCancel"></view>

    <!-- 弹窗内容 -->
    <view class="payment-voucher-popup">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">上传支付凭证</text>
          <view class="close-btn" @click="handleCancel">
            <text class="close-icon">✕</text>
          </view>
        </view>

      <view class="popup-body">
        <!-- 订单信息展示 -->
        <view class="order-info-section">
          <view class="info-row">
            <text class="info-label">订单号:</text>
            <text class="info-value">{{ orderInfo.order_no }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">课程类型:</text>
            <text class="info-value">{{ orderInfo.product_name }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">支付金额:</text>
            <text class="info-value amount">¥{{ orderInfo.total_amount }}</text>
          </view>
        </view>

        <!-- 图片上传区域 -->
        <view class="upload-section">
          <view class="section-title">支付凭证</view>
          <view class="upload-tip">最多上传9张图片</view>

          <view class="image-list">
            <view
              v-for="(image, index) in imageList"
              :key="index"
              class="image-item"
            >
              <image :src="image" class="preview-image" mode="aspectFill"></image>
              <view class="delete-btn" @click="deleteImage(index)">
                <text class="delete-icon">×</text>
              </view>
            </view>

            <view
              v-if="imageList.length < 9"
              class="upload-btn"
              @click="chooseImage"
            >
              <text class="upload-icon">+</text>
              <text class="upload-text">上传图片</text>
            </view>
          </view>
        </view>
      </view>

      <view class="popup-footer">
        <view class="footer-btn cancel-btn" @click="handleCancel">
          <text>取消</text>
        </view>
        <view
          class="footer-btn confirm-btn"
          :class="{ disabled: !canSubmit }"
          @click="handleConfirm"
        >
          <text>提交</text>
        </view>
      </view>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadFile } from '@/common/util.js'

export default {
  name: 'PaymentVoucherPopup',

  props: {
    // 订单信息
    orderInfo: {
      type: Object,
      default: () => ({
        order_no: '',
        product_name: '',
        total_amount: '0.00'
      })
    }
  },

  data() {
    return {
      imageList: [], // 图片列表
      uploading: false
    }
  },

  computed: {
    // 是否可以提交
    canSubmit() {
      return this.imageList.length > 0 && !this.uploading
    }
  },

  methods: {
    /**
     * 选择图片
     */
    chooseImage() {
      const remainCount = 9 - this.imageList.length

      uni.chooseImage({
        count: remainCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths

          // 上传图片
          this.uploadImages(tempFilePaths)
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
          uni.showToast({ title: '选择图片失败', icon: 'none' })
        }
      })
    },

    /**
     * 上传图片
     */
    async uploadImages(filePaths) {
      this.uploading = true
      uni.showLoading({ title: '上传中...' })

      try {
        const uploadPromises = filePaths.map(filePath => this.uploadSingleImage(filePath))
        const results = await Promise.all(uploadPromises)

        // 将上传成功的图片URL添加到列表
        results.forEach(url => {
          if (url) {
            this.imageList.push(url)
          }
        })

        uni.hideLoading()

        if (results.some(url => url)) {
          uni.showToast({ title: '上传成功', icon: 'success' })
        }
      } catch (error) {
        uni.hideLoading()
        console.error('上传图片异常:', error)
        uni.showToast({ title: '上传失败', icon: 'none' })
      } finally {
        this.uploading = false
      }
    },

    /**
     * 上传单张图片
     */
    uploadSingleImage(filePath) {
      return new Promise((resolve, reject) => {
        uploadFile(
          filePath,
          (fileData) => {
            // 成功回调: fileData = { url, extname, name }
            if (fileData && fileData.url) {
              resolve(fileData.url)
            } else {
              console.error('上传成功但未返回URL')
              resolve(null)
            }
          },
          (error) => {
            // 失败回调
            console.error('上传请求失败:', error)
            resolve(null)
          }
        )
      })
    },

    /**
     * 删除图片
     */
    deleteImage(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这张图片吗?',
        success: (res) => {
          if (res.confirm) {
            this.imageList.splice(index, 1)
          }
        }
      })
    },

    /**
     * 取消
     */
    handleCancel() {
      this.$emit('cancel')
    },

    /**
     * 确认提交
     */
    handleConfirm() {
      if (!this.canSubmit) {
        uni.showToast({ title: '请先上传支付凭证', icon: 'none' })
        return
      }

      // 将图片数组转为逗号分隔的字符串
      const payment_voucher = this.imageList.join(',')

      this.$emit('confirm', {
        payment_voucher: payment_voucher,
        order_id: this.orderInfo.id || this.orderInfo._raw?.id
      })
    },

    /**
     * 重置数据
     */
    reset() {
      this.imageList = []
      this.uploading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-voucher-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: flex-end;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.payment-voucher-popup {
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: #2A2A2A;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.popup-content {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 40rpx;
  border-bottom: 1px solid #404040;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
}

.close-btn {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;

  &:active {
    background: rgba(255, 255, 255, 0.15);
  }
}

.close-icon {
  font-size: 40rpx;
  color: #ffffff;
  line-height: 1;
}

.popup-body {
  flex: 1;
  padding: 32rpx 40rpx;
  overflow-y: auto;
}

.order-info-section {
  background: rgba(41, 211, 180, 0.05);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;
  border-left: 4rpx solid #29D3B4;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  font-size: 28rpx;
  color: #999999;
  min-width: 140rpx;
}

.info-value {
  font-size: 28rpx;
  color: #ffffff;
  flex: 1;
  text-align: right;

  &.amount {
    color: #FFC107;
    font-weight: 600;
    font-size: 32rpx;
  }
}

.upload-section {
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12rpx;
}

.upload-tip {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 24rpx;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
}

.delete-btn {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 44rpx;
  height: 44rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  &:active {
    background: rgba(0, 0, 0, 0.8);
  }
}

.delete-icon {
  font-size: 32rpx;
  color: #ffffff;
  line-height: 1;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 2px dashed #404040;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;

  &:active {
    background: rgba(255, 255, 255, 0.05);
    border-color: #29D3B4;
  }
}

.upload-icon {
  font-size: 48rpx;
  color: #666666;
  line-height: 1;
  margin-bottom: 8rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999999;
}

.popup-footer {
  display: flex;
  gap: 24rpx;
  padding: 24rpx 40rpx;
  border-top: 1px solid #404040;
  background: #2A2A2A;
}

.footer-btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 500;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;

  &:active {
    background: rgba(255, 255, 255, 0.15);
  }
}

.confirm-btn {
  background: #29D3B4;
  color: #ffffff;

  &:active {
    background: #1fb396;
  }

  &.disabled {
    background: #404040;
    color: #666666;
  }
}
</style>