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" />
                    <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" />
                    <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" />
                            <view class="delete-icon" @tap="deleteImage(index)">
                                <uv-icon name="close" color="#fff" size="24rpx" />
                            </view>
                        </view>

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

            <!-- 联系方式 -->
            <view class="form-section">
                <view class="section-title">
                    <view class="title-indicator" />
                    <text>联系方式</text>
                </view>
                <view class="contact-info">
                    <input class="contact-tip"  placeholder="留下联系方式，方便我们向您回复" v-model="contactInfo" placeholder-style="color: #999;" />
                </view>
            </view>
        </view>

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

<script>
  import navbar from '@/components/base/navbar.vue'
  
  export default {
    components: {
      navbar
    },
    computed: {
      images(){
        return this.uploadedImages.join(',')
      }
    },
    data() {
      return {
        orderId: '',
        problemDescription: '',
        uploadedImages: [],
        contactInfo: '', // 默认联系方式，实际应该从用户信息中获取
        orderDetail: null,
        idObject:{}
      }
    },
    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) => {
        //     console.log('图片上传',res);
            
            // 预览图片
            // this.uploadedImages = [...this.uploadedImages, ...res.tempFilePaths]
        this.$Oss.ossUploadImage({
          key: '', // 不传则自动生成
          folder: '', // 不传则使用日期作为文件夹
          compressed: true, 
          success: (url) => {
            this.uploadedImages.push(url)
          },
          fail: (err) => {
            uni.showToast({
              title: `上传失败${err}`,
              icon: 'error'
            })
          }
        })
        //   }
        // })
      },
      
      // 删除图片
      deleteImage(index) {
        this.uploadedImages.splice(index, 1)
      },
      
      // 提交售后申请
      submitAfterSale() {
        // 表单验证
        if (!this.problemDescription.trim()) {
          uni.showToast({
            title: '请描述您的问题',
            icon: 'error'
          })
          return
        }
        if (!this.$utils.verificationPhone(this.contactInfo)) {
          uni.showToast({
            title: '请输入正确号码',
            icon: 'error'
          })
          return
        }
        // 显示提交中提示
        uni.showLoading({
          title: '正在提交...'
        })

        this.$api('addAfterService', {
          ...this.idObject,
          phone: this.contactInfo,
          content: this.problemDescription,
          image: this.images
        }, res => {
          uni.hideLoading()
          if (res.code == 200) {
            uni.showModal({
              title: '提交成功',
              content: '您的售后申请已提交，请等待审核',
              confirmColor: '#019245',
              showCancel: false,
              success: () => {
                uni.navigateBack()
              }
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'error'
            })
          }
        })
      },

    },
    onLoad(arg) {
      if (arg.orderId && arg.userId && arg.id){
        this.idObject = {
          ...arg
        }
      }else {
        uni.showToast({
          title: '数据不足',
          icon: 'error'
        })
        this.$util.navigateBack()
      }
    }
  }
</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;
      color: black ;
      //   margin-bottom: 10rpx;
      display: block;
    }

    .contact-placeholder {
      color: #999;
    }
    
    .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>