HomeLease/pages/image-upload-demo/image-upload-demo.vue

<template>
  <view class="demo-page">
    <u-navbar 
      :is-back="true" 
      title="图片上传演示" 
      title-color="#000" 
      :border-bottom="false" 
      :background="true"
    ></u-navbar>
    
    <view class="content">
      <view class="demo-section">
        <text class="section-title">图片上传功能演示</text>
        <text class="section-desc">点击下方按钮跳转到图片上传页面</text>
      </view>
      
      <view class="button-section">
        <button class="demo-btn" @click="goToUpload">开始上传图片</button>
      </view>
      
      <view v-if="uploadedImageUrl" class="result-section">
        <text class="result-title">上传结果</text>
        <image 
          :src="uploadedImageUrl" 
          mode="widthFix" 
          class="result-image"
        ></image>
        <text class="result-url">{{ uploadedImageUrl }}</text>
        <button class="copy-btn" @click="copyImageUrl">复制图片URL</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      uploadedImageUrl: '', // 上传成功的图片URL
    }
  },
  
  onLoad(options) {
    // 如果从上传页面返回，获取上传结果
    if (options.imageUrl) {
      this.uploadedImageUrl = decodeURIComponent(options.imageUrl)
    }
  },
  
  methods: {
    // 跳转到上传页面
    goToUpload() {
      uni.navigateTo({
        url: '/pages/image-upload/image-upload'
      })
    },
    
    // 复制图片URL
    copyImageUrl() {
      if (this.uploadedImageUrl) {
        uni.setClipboardData({
          data: this.uploadedImageUrl,
          success: () => {
            uni.showToast({
              title: '图片URL已复制',
              icon: 'success'
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-page {
  min-height: 100vh;
  background: #f5f5f5;
  
  .content {
    padding: 30rpx;
  }
  
  .demo-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    text-align: center;
    
    .section-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .section-desc {
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
    }
  }
  
  .button-section {
    margin-bottom: 30rpx;
    
    .demo-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: #007aff;
      color: #fff;
      border-radius: 12rpx;
      font-size: 32rpx;
      border: none;
      
      &:active {
        background: #0056cc;
      }
    }
  }
  
  .result-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    
    .result-title {
      display: block;
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .result-image {
      width: 100%;
      border-radius: 8rpx;
      margin-bottom: 20rpx;
    }
    
    .result-url {
      display: block;
      font-size: 24rpx;
      color: #007aff;
      word-break: break-all;
      line-height: 1.4;
      margin-bottom: 20rpx;
      background: #f8f8f8;
      padding: 20rpx;
      border-radius: 8rpx;
    }
    
    .copy-btn {
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      background: #f0f0f0;
      color: #333;
      border-radius: 8rpx;
      font-size: 28rpx;
      border: none;
      
      &:active {
        background: #e0e0e0;
      }
    }
  }
}
</style>