vist_go_uniApp/packageOrder/pages/after-sale/index.vue

<template>
  <view class="after-sale">
    <!-- 商品信息 -->
    <view class="product-info">
      <image :src="product.image" mode="aspectFill" class="product-image"></image>
      <view class="product-detail">
        <view class="product-name">{{product.name}}</view>
        <view class="product-spec">{{product.spec}}</view>
        <view class="product-price">¥{{product.price}}</view>
      </view>
    </view>
    
    <!-- 售后表单 -->
    <view class="form-section">
      <u-form :model="form" ref="form">
        <u-form-item label="售后类型" prop="type" required>
          <u-radio-group v-model="form.type">
            <u-radio 
              v-for="(item, index) in typeOptions" 
              :key="index"
              :name="item.value"
              :label="item.label">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        
        <u-form-item label="申请原因" prop="reason" required>
          <u-select
            v-model="form.reason"
            :list="reasonOptions"
            placeholder="请选择申请原因">
          </u-select>
        </u-form-item>
        
        <u-form-item label="问题描述" prop="description" required>
          <u-textarea
            v-model="form.description"
            placeholder="请详细描述您遇到的问题"
            count
            maxlength="500">
          </u-textarea>
        </u-form-item>
        
        <u-form-item label="上传凭证">
          <u-upload
            :fileList="form.images"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            multiple
            maxCount="9">
          </u-upload>
        </u-form-item>
        
        <u-form-item label="联系人" prop="contact" required>
          <u-input v-model="form.contact" placeholder="请输入联系人姓名" />
        </u-form-item>
        
        <u-form-item label="手机号码" prop="phone" required>
          <u-input v-model="form.phone" placeholder="请输入手机号码" type="number" maxlength="11" />
        </u-form-item>
      </u-form>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn">
      <u-button type="primary" @click="submit" color="#D93025">提交申请</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: '',
      productId: '',
      product: {
        image: '',
        name: '',
        spec: '',
        price: ''
      },
      form: {
        type: 'refund',
        reason: '',
        description: '',
        images: [],
        contact: '',
        phone: ''
      },
      typeOptions: [
        { label: '仅退款', value: 'refund' },
        { label: '退货退款', value: 'return' }
      ],
      reasonOptions: [
        { label: '商品质量问题', value: 'quality' },
        { label: '商品损坏', value: 'damaged' },
        { label: '商品与描述不符', value: 'mismatch' },
        { label: '收到错误商品', value: 'wrong' },
        { label: '其他原因', value: 'other' }
      ],
      rules: {
        type: [{
          required: true,
          message: '请选择售后类型',
          trigger: ['change']
        }],
        reason: [{
          required: true,
          message: '请选择申请原因',
          trigger: ['change']
        }],
        description: [{
          required: true,
          message: '请输入问题描述',
          trigger: ['blur']
        }],
        contact: [{
          required: true,
          message: '请输入联系人姓名',
          trigger: ['blur']
        }],
        phone: [{
          required: true,
          message: '请输入手机号码',
          trigger: ['blur']
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '请输入正确的手机号码',
          trigger: ['blur']
        }]
      }
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.productId = options.productId
    this.getProductInfo()
  },
  methods: {
    async getProductInfo() {
      try {
        const res = await this.$api.product.detail(this.productId)
        this.product = res.data
      } catch (e) {
        this.$u.toast('获取商品信息失败')
      }
    },
    async afterRead(event) {
      const { file } = event
      const uploadPromises = (Array.isArray(file) ? file : [file]).map(item => {
        return this.uploadFilePromise(item)
      })

      try {
        const urls = await Promise.all(uploadPromises)
        this.form.images = [...this.form.images, ...urls]
      } catch (e) {
        this.$u.toast('上传图片失败')
      }
    },
    uploadFilePromise(file) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: this.$api.common.uploadUrl,
          filePath: file.url,
          name: 'file',
          success: (res) => {
            const data = JSON.parse(res.data)
            resolve(data.url)
          },
          fail: reject
        })
      })
    },
    deletePic(event) {
      const index = event.index
      this.form.images.splice(index, 1)
    },
    async submit() {
      try {
        await this.$refs.form.validate()
        await this.$api.order.afterSale({
          orderId: this.orderId,
          productId: this.productId,
          ...this.form
        })
        this.$u.toast('提交成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (e) {
        if (e.errors) return
        this.$u.toast('提交失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.after-sale {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
  
  .product-info {
    background: #fff;
    padding: 30rpx;
    display: flex;
    margin-bottom: 20rpx;
    
    .product-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .product-detail {
      flex: 1;
      
      .product-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .product-spec {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 20rpx;
      }
      
      .product-price {
        font-size: 32rpx;
        color: #D93025;
        font-weight: bold;
      }
    }
  }
  
  .form-section {
    background: #fff;
    padding: 30rpx;
    
    :deep(.u-form-item) {
      padding: 20rpx 0;
    }
  }
  
  .submit-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 40rpx;
    background: #fff;
  }
}
</style>