teambuy-front/pages_order/order/afterSale.vue

<template>
    <view class="page">
        <!-- 导航栏 -->
        <navbar title="订单售后" leftClick @leftClick="navigateBack" bgColor="#019245" color="#fff" />

        <!-- 售后表单 -->
        <view class="after-sale-form">
            <!-- 问题描述区域 -->
            <view class="form-section">
                <view class="section-title">
                    <view class="title-indicator"></view>
                    <text>请描述具体问题</text>
                </view>
                <view class="text-area-container">
                    <textarea class="problem-textarea" v-model="problemDescription" placeholder="请在此输入详细问题或意见"
                        placeholder-style="color: #999; font-size: 28rpx;" maxlength="500" />
                </view>
            </view>

            <!-- 图片上传区域 -->
            <view class="form-section">
                <view class="section-title">
                    <view class="title-indicator"></view>
                    <text>请提供相关问题的截图或图片</text>
                </view>
                <view class="upload-area">
                    <view class="image-grid">
                        <view class="image-item" v-for="(image, index) in uploadedImages" :key="'img-'+index">
                            <image :src="image" mode="aspectFill" class="preview-image"></image>
                            <view class="delete-icon" @tap="deleteImage(index)">
                                <uv-icon name="close" color="#fff" size="24rpx"></uv-icon>
                            </view>
                        </view>

                        <view class="upload-button" @tap="chooseImage" v-if="uploadedImages.length < 9">
                            <uv-icon name="plus" size="60rpx" color="#019245"></uv-icon>
                            <text>添加图片</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 联系方式 -->
            <view class="form-section">
                <view class="section-title">
                    <view class="title-indicator"></view>
                    <text>联系方式</text>
                </view>
                <view class="contact-info">
                    <input class="contact-tip" placeholder="留下联系方式，方便我们向您回复" />
                </view>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-button" @tap="submitAfterSale">
            提交
        </view>
    </view>
</template>

<script>
  import navbar from '@/components/base/navbar.vue'
  
  export default {
    components: {
      navbar
    },
    data() {
      return {
        orderId: '',
        problemDescription: '',
        uploadedImages: [],
        contactInfo: '15070023168', // 默认联系方式，实际应该从用户信息中获取
        orderDetail: null
      }
    },
    onLoad(options) {
      if (options.id) {
        this.orderId = options.id
        // 获取订单详情
        this.getOrderDetail(options.id)
      }
    },
    methods: {
      // 返回上一页
      navigateBack() {
        uni.navigateBack()
      },
      
      // 获取订单详情
      getOrderDetail(id) {
        // 从上一页获取订单信息
        const pages = getCurrentPages()
        const prevPage = pages[pages.length - 2]
        
        if (prevPage && prevPage.route.includes('order')) {
          // 查找匹配ID的订单
          const foundOrder = prevPage.$vm.orderList.find(order => order.id === id)
          if (foundOrder) {
            this.orderDetail = foundOrder
          }
        }
      },
      
      // 选择图片
      chooseImage() {
        uni.chooseImage({
          count: 9 - this.uploadedImages.length,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            // 预览图片
            this.uploadedImages = [...this.uploadedImages, ...res.tempFilePaths]
          }
        })
      },
      
      // 删除图片
      deleteImage(index) {
        this.uploadedImages.splice(index, 1)
      },
      
      // 提交售后申请
      submitAfterSale() {
        // 表单验证
        if (!this.problemDescription.trim()) {
          uni.showToast({
            title: '请描述您的问题',
            icon: 'none'
          })
          return
        }
        
        // 显示提交中提示
        uni.showLoading({
          title: '正在提交...'
        })
        
        // 模拟上传图片
        setTimeout(() => {
          // 模拟表单提交
          setTimeout(() => {
            uni.hideLoading()
            
            uni.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 2000
            })
            
            // 延迟后返回
            setTimeout(() => {
              this.navigateBack()
            }, 1500)
          }, 1000)
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 150rpx;
  }
  
  .after-sale-form {
    margin: 20rpx;
  }
  
  .form-section {
    // background-color: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      
      .title-indicator {
        width: 8rpx;
        height: 30rpx;
        background-color: #019245;
        border-radius: 4rpx;
        margin-right: 16rpx;
      }
      
      text {
        font-size: 30rpx;
        font-weight: 500;
      }
    }
  }
  
  .text-area-container {
    background-color: #fff;
    border-radius: 8rpx;
    
    .problem-textarea {
      width: 100%;
      height: 200rpx;
      font-size: 28rpx;
      padding: 20rpx;
    }
  }
  
  .upload-area {
    background-color: #fff;
    padding: 30rpx;
    .image-grid {
      display: flex;
      flex-wrap: wrap;
        gap: 30rpx;
    }
    
    .image-item {
      width: 160rpx;
      height: 160rpx;
      position: relative;
      
      .preview-image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
      
      .delete-icon {
        position: absolute;
        top: -20rpx;
        right: -20rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: rgba(0,0,0,0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .upload-button {
      width: 160rpx;
      height: 160rpx;
      color: $uni-color;
      border: 4rpx dashed $uni-color;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    //   margin-right: 20rpx;
    //   margin-bottom: 20rpx;
      font-size: 24rpx;
      gap: 10rpx;
    }
  }
  
  .contact-info {
    background-color: #fff;
    border-radius: 8rpx;
    padding: 30rpx;
    
    .contact-tip {
      font-size: 26rpx;
      color: #999;
    //   margin-bottom: 10rpx;
      display: block;
    }
    
    .contact-value {
      font-size: 28rpx;
      color: #333;
    }
  }
  
  .submit-button {
    position: fixed;
    bottom: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 90rpx;
    background-color: #019245;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>