crm-app-vue3/pages/orderDetailRefactored/components/PageOne.vue

<template>
  <view class="page-one-container">
    <!-- 图片资料标题 -->
    <view class="page-header">
    
      <view class="detail-image-header">
        <text class="detail-image-title">图片资料</text>
        <view class="copy-btn" @click="handleSaveAllImages">
          <text>一键下载实物图到相册</text>
        </view>
      </view>
    </view>

    <!-- 聊天记录/通话记录/跟进卡片 -->
    <view class="card-wrap">
      <view class="card-title">
        <text :class="{ 'active': recordType === 'chat' }" @click="recordType = 'chat'">
          聊天记录
        </text>
        <text class="divider">|</text>
        <text :class="{ 'active': recordType === 'call' }" @click="recordType = 'call'">
          通话记录
        </text>
        <text class="divider">|</text>
        <text :class="{ 'active': recordType === 'frontendFollow' }" @click="recordType = 'frontendFollow'">
          前端跟进
        </text>
        <text class="divider">|</text>
        <text :class="{ 'active': recordType === 'followRecord' }" @click="recordType = 'followRecord'">
          跟进记录
        </text>
      </view>

      <!-- 聊天记录 -->
      <view v-if="recordType === 'chat'" class="image-upload-container">
        <view class="image-list">
          <view v-for="(item, index) in chatRecordsList" :key="`chat-${index}`" class="image-item">
            <PicComp :src="item.fileUrl" @needPreviewPic="previewImage" />
            <view class="delete-btn" @click="handleDeleteImage(item)">×</view>
          </view>
          <view class="upload-btn" @click="handleUploadImage('chatRecords')">
            <u-icon name="plus" size="40" color="#999" />
          </view>
        </view>
      </view>

      <!-- 通话录音 -->
      <view v-if="recordType === 'call'" class="call-records-container">
        <sound-recorder v-for="item in soundRecordList" :key="item.fileName" :data="item"
          @handleDelectThisSoundRecord="handleDeleteSoundRecord" />
      </view>

      <!-- 前端跟进 -->
      <follow-card v-if="recordType === 'frontendFollow'" :key="'frontendFollow'" :clue-id="currentClueId" type="4" />

      <!-- 跟进记录 -->
      <follow-card v-if="recordType === 'followRecord'" :key="'followRecord'" :clue-id="currentClueId" type="5" />
    </view>

    <!-- 实物图卡片 -->
    <view class="card-wrap">
      <view class="card-title">实物图</view>
      <view class="image-upload-container">
        <view class="image-list">
          <view v-for="(item, index) in truePicList" :key="`truePic-${index}`" class="image-item">
            <PicComp :src="item.fileUrl" @needPreviewPic="previewTrueImage" />
            <view class="delete-btn" @click="handleDeleteImage(item)">×</view>
          </view>
          <view class="upload-btn" @click="handleUploadImage('truePic')">
            <u-icon name="plus" size="40" color="#999" />
          </view>
        </view>
      </view>
    </view>

    <!-- 基本信息卡片 -->
    <view class="info-card">
      <view class="info-card-title">基本信息</view>
      <u-row class="info-row">
        <u-col span="6">
          <view class="info-label">发单人</view>
          <view class="info-value">{{ orderDetail.createNickName || '未填写' }}</view>
        </u-col>
        <u-col span="6">
          <view class="info-label">型号</view>
          <view class="info-value">{{ orderDetail.model || '未填写' }}</view>
        </u-col>
      </u-row>
      <u-row class="info-row">
        <u-col span="6">
          <view class="info-label">上门时间</view>
          <view class="info-value">{{ orderDetail.visitTime || '未填写' }}</view>
        </u-col>
        <u-col span="6">
          <view class="info-label">地址</view>
          <view class="info-value">{{ orderDetail.address || '未填写' }}</view>
        </u-col>
      </u-row>
    </view>

    <!-- 联系方式卡片 -->
    <view class="contact-card">
      <view class="contact-item phone-card" @click="handlePhoneClick">
        <u-icon name="phone" size="40" color="#07C160" />
        <view class="contact-title">电话</view>
        <view v-if="orderDetail.phone" class="red-dot"></view>
      </view>
      <view class="contact-item wechat-card" @click="handleWechatClick">
        <u-icon name="chat" size="40" color="#07C160" />
        <view class="contact-title">微信</view>
        <view v-if="orderDetail.wechat" class="red-dot"></view>
      </view>
    </view>

    <!-- 下一步按钮 -->
    <view class="space-block"></view>
    <u-button class="next-btn" @click="handleNext" type="primary" size="middle">
      下一步
    </u-button>
  </view>
</template>

<script>
import PicComp from './PicComp.vue'
import soundRecorder from '@/components/soundRecorder/soundRecorder.vue'
import FollowCard from './FollowCard.vue'
import imageUpload from '../utils/imageUpload.js'

export default {
  name: 'PageOne',
  components: {
    PicComp,
    soundRecorder,
    FollowCard
  },
  props: {
    orderDetail: {
      type: Object,
      default: () => ({})
    },
    orderId: {
      type: String,
      default: ''
    },
    currentReceipt: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      recordType: 'chat', // 'chat' | 'call' | 'frontendFollow' | 'followRecord'
      chatRecordsList: [],
      truePicList: [],
      soundRecordList: []
    }
  },
  computed: {
    currentClueId() {
      return (this.currentReceipt && this.currentReceipt.clueId) || (this.orderDetail && this.orderDetail.clueId) || ''
    }
  },
  watch: {
    currentReceipt: {
      handler(newVal) {
        if (newVal && newVal.id) {
          this.loadImageList()
          this.loadCallRecords()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /**
     * 加载图片列表
     */
    async loadImageList() {
      if (!this.currentReceipt.id || !this.orderDetail.itemBrand) return

      try {
        // 加载聊天记录
        const chatList = await imageUpload.getFileList(
          '2',
          '1',
          this.currentReceipt.id,
          this.orderDetail.itemBrand,
          this.currentReceipt.clueId
        )
        this.chatRecordsList = chatList || []

        // 加载实物图
        const truePicList = await imageUpload.getFileList(
          '2',
          '2',
          this.currentReceipt.id,
          this.orderDetail.itemBrand,
          this.currentReceipt.clueId
        )
        this.truePicList = truePicList || []
      } catch (error) {
        console.error('加载图片列表失败:', error)
      }
    },

    /**
     * 加载通话记录
     */
    async loadCallRecords() {
      if (!this.currentReceipt.clueId) return

      try {
        const { data } = await uni.$u.api.getCallClueFileByClueId({
          clueId: this.currentReceipt.clueId
        })
        this.soundRecordList = data || []
      } catch (error) {
        console.error('加载通话记录失败:', error)
      }
    },

    /**
     * 上传图片
     */
    async handleUploadImage(type) {
      try {
        const filePaths = await imageUpload.chooseImage(9)
        const uploadResults = await imageUpload.uploadFiles(filePaths)

        // 绑定订单文件
        const orderFileType = type === 'truePic' ? '2' : '1'
        await imageUpload.bindOrderFile(
          this.currentReceipt.clueId,
          this.currentReceipt.id,
          orderFileType,
          uploadResults
        )

        // 刷新列表
        this.loadImageList()
      } catch (error) {
        console.error('上传图片失败:', error)
      }
    },

    /**
     * 删除图片
     */
    async handleDeleteImage(item) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这张图片吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await imageUpload.deleteFile(item.id)
              this.loadImageList()
            } catch (error) {
              console.error('删除图片失败:', error)
            }
          }
        }
      })
    },

    /**
     * 删除录音
     */
    async handleDeleteSoundRecord({ id }) {
      uni.showModal({
        title: '提示',
        content: '是否确定删除?',
        success: async (res) => {
          if (res.confirm) {
            try {
              await uni.$u.api.deleteClueFile([id])
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              this.loadCallRecords()
            } catch (error) {
              uni.showToast({
                title: '删除失败',
                icon: 'error'
              })
            }
          }
        }
      })
    },

    /**
     * 预览图片
     */
    previewImage(src) {
      const urlList = this.chatRecordsList.map(item => item.fileUrl)
      uni.previewImage({
        urls: urlList,
        current: src
      })
    },

    /**
     * 预览实物图
     */
    previewTrueImage(src) {
      const urlList = this.truePicList.map(item => item.fileUrl)
      uni.previewImage({
        urls: urlList,
        current: src
      })
    },

    //一键复制
    handleSaveAllImages() {
      // 合并所有图片
      const allImages = [...this.truePicList]
      //取出所有图的url
      const allUrls = allImages.map(item => item.fileUrl)
      if (allUrls.length > 0) {
        // 显示保存图片确认弹窗
        uni.showModal({
          title: '保存图片',
          content: `是否将 ${allUrls.length} 张图片保存到本地相册？`,
          confirmText: '保存',
          // cancelText: '仅复制链接',
          success: (res) => {
            if (res.confirm) {
              // 用户选择保存图片
              this.saveImagesToLocal(allUrls)
            } else if (res.cancel) {
              // 用户选择仅复制链接
              this.copyImageUrls(allUrls)
            }
          }
        })
      } else {
        uni.showToast({
          title: '没有图片可保存',
          icon: 'none'
        })
      }
    },

    // 保存图片到本地相册
    async saveImagesToLocal(imageUrls) {
      try {
        uni.showLoading({
          title: '正在保存图片...',
          mask: true
        })

        const savedImages = []
        const failedImages = []

        // 逐个保存图片
        for (let i = 0; i < imageUrls.length; i++) {
          const url = imageUrls[i]
          try {
            await this.saveSingleImage(url)
            savedImages.push(url)
          } catch (error) {
            console.error(`保存图片失败: ${url}`, error)
            failedImages.push(url)
          }

          // 更新进度
          uni.showLoading({
            title: `正在保存图片... (${i + 1}/${imageUrls.length})`,
            mask: true
          })
        }

        uni.hideLoading()

        // 显示结果
        let message = `成功保存 ${savedImages.length} 张图片`
        if (failedImages.length > 0) {
          message += `，${failedImages.length} 张保存失败`
        }

        uni.showToast({
          title: message,
          icon: 'none',
          duration: 3000
        })

        // 如果有失败的图片，也复制链接作为备选
        if (failedImages.length > 0) {
          const allUrls = [...savedImages, ...failedImages]
          this.copyImageUrls(allUrls)
        }
      } catch (error) {
        uni.hideLoading()
        console.error('保存图片过程中发生错误:', error)
        uni.showToast({
          title: '保存图片失败',
          icon: 'error'
        })
      }
    },

    // 保存单张图片
    saveSingleImage(url) {
      return new Promise((resolve, reject) => {
        // 先下载图片
        uni.downloadFile({
          url: url,
          success: (res) => {
            if (res.statusCode === 200) {
              // 保存到相册
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  console.log('图片保存成功:', url)
                  resolve()
                },
                fail: (err) => {
                  console.error('保存到相册失败:', err)
                  // 如果是权限问题，尝试请求权限
                  if (err.errMsg.includes('auth denied')) {
                    uni.showModal({
                      title: '权限不足',
                      content: '需要访问相册权限来保存图片，是否去设置？',
                      success: (modalRes) => {
                        if (modalRes.confirm) {
                          // 打开设置页面
                          uni.openSetting({
                            success: (settingRes) => {
                              console.log('设置页面结果:', settingRes)
                            }
                          })
                        }
                      }
                    })
                  }
                  reject(err)
                }
              })
            } else {
              reject(new Error('下载失败'))
            }
          },
          fail: (err) => {
            console.error('下载图片失败:', err)
            reject(err)
          }
        })
      })
    },

    // 复制图片链接
    copyImageUrls(urls) {
      uni.setClipboardData({
        data: JSON.stringify(urls),
        success: () => {
          uni.showToast({
            title: '图片链接已复制',
            icon: 'none'
          })
        }
      })
    },

    /**
     * 电话点击
     */
    handlePhoneClick() {
      if (!this.orderDetail.phone) {
        uni.showToast({
          title: '该订单暂时没有电话号码',
          icon: 'none'
        })
        return
      }

      uni.makePhoneCall({
        phoneNumber: this.orderDetail.phone,
        success: () => {
          this.$store.commit('call/SET_FORM', {
            clueId: this.orderDetail.clueId,
            type: '3',
            callee: this.orderDetail.phone
          })
        }
      })
    },

    /**
     * 微信点击
     */
    handleWechatClick() {
      if (!this.orderDetail.wechat) {
        uni.showToast({
          title: '该订单暂时没有微信号',
          icon: 'none'
        })
        return
      }

      uni.setClipboardData({
        data: this.orderDetail.wechat,
        success: () => {
          uni.showToast({
            title: '微信号已复制',
            icon: 'none'
          })
        }
      })
    },

    /**
     * 下一步
     */
    handleNext() {
      this.$emit('next', {
        nowPage: 'formOne',
        form: {}
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '../styles/common.scss';

.page-one-container {
  @extend .page-container;
  padding-bottom: 100rpx;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.page-title {
  @include font-styles($size: title, $weight: bold, $color: primary);
}

.save-all-btn {
  border-radius: 20rpx;
  border-color: #007AFF;
  color: #007AFF;
}

.card-wrap {
  @extend .card-wrap;
  margin-top: 20rpx;
}

.card-title {
  padding: 20rpx 15rpx;
  border-bottom: 1rpx solid map-get($colors, border);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  text {
    padding: 0 6rpx;
    cursor: pointer;
    font-size: 26rpx;
    white-space: nowrap;
    flex-shrink: 0;

    &.active {
      color: map-get($colors, primary);
      font-weight: bold;
    }
  }

  .divider {
    margin: 0 4rpx;
    color: #ddd;
    font-size: 24rpx;
    flex-shrink: 0;
  }
}

.image-upload-container {
  padding: 20rpx;
}

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

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  box-sizing: border-box;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: bold;
  z-index: 10;
  cursor: pointer;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 8rpx dashed #ddd;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  box-sizing: border-box;
  cursor: pointer;
}

.call-records-container {
  padding: 20rpx;
}

.info-card {
  @extend .card-wrap;
  padding: 20rpx;
  margin-top: 20rpx;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.info-card-title {
  @include font-styles($size: title, $weight: bold, $color: primary);
  margin-bottom: 25rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid map-get($colors, border);
}

.info-row {
  margin-bottom: 20rpx;
}

.info-label {
  @include font-styles($size: tiny, $weight: regular, $color: tertiary);
  margin-bottom: 8rpx;
}

.info-value {
  @include font-styles($size: small, $weight: regular, $color: secondary);
  word-break: break-all;
}

.contact-card {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0;
  gap: 20rpx;
}

.contact-item {
  flex: 1;
  @extend .card-wrap;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.contact-title {
  @include font-styles($size: tiny, $weight: regular, $color: tertiary);
  margin-top: 10rpx;
}

.red-dot {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 25rpx;
  height: 25rpx;
  background-color: #ff4d4f;
  border-radius: 50%;
  box-shadow: 0 0 4rpx rgba(255, 77, 79, 0.3);
}

.space-block {
  height: 100rpx;
}

.next-btn {
  position: fixed;
  bottom: 10rpx;
  left: 2.5%;
  width: 95%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 20rpx;
}


.detail-image-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1rpx solid map-get($colors, border);
}

.detail-image-title {
  @include font-styles($size: content, $weight: bold, $color: primary);
}

.copy-btn {
  border-radius: 20rpx;
  border: 1rpx solid #007AFF;
  background-color: transparent;
  color: #007AFF;
  padding: 0 24rpx;
  height: 64rpx;
  line-height: 64rpx;
  cursor: pointer;
}
</style>