<template>
  <view class="container">
    <view class="example-body custom-image-box">
      <text class="text">选择头像</text>
      <uni-file-picker 
        limit="1" 
        :del-icon="false" 
        disable-preview 
        :imageStyles="imageStyles"
        file-mediatype="image"
        @select="handleFileSelect">选择</uni-file-picker>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          radius: '50%'
        }
      },
      listStyles: {
        // 是否显示边框
        border: true,
        // 是否显示分隔线
        dividline: true,
        // 线条样式
        borderStyle: {
          width: 1,
          color: 'blue',
          style: 'dashed',
          radius: 2
        }
      },
    }
  },
  methods: {
    handleFileSelect(e) {
      console.log('Selected files:', e.tempFiles);
      // 这里可以添加更多逻辑，比如预览图片等
    }
  }
}
</script>
<style lang="scss">
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>

