<!--
 * @Author: Hefeng 1057605508@qq.com
 * @Date: 2023-08-23 13:21:50
 * @LastEditors: Hefeng 1057605508@qq.com
 * @LastEditTime: 2023-10-25 18:20:56
 * @FilePath: \FirstUI-vue\pages\component\layout\preview\preview.vue
 * @Description: 
 * 
-->
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186  1 407    254   9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="fui-wrap">
		<view class="fui-page__hd">
			<view class="fui-page__title fui-align__center" @tap="vip">Preview <image
					src="/static/images/index/light/icon_member_3x.png"></image>
			</view>
			<view class="fui-page__desc">Preview 表单预览，常用的布局组件。</view>
		</view>
		<view class="fui-page__bd">
			<fui-preview :previewData="previewData" isSection></fui-preview>
			<!-- 标签文本两端对齐 -->
			<fui-preview labelAlign="justify" labelWidth="112" :previewData="previewData2" marginTop="24"
				@click="btnClick"></fui-preview>
			<!-- 内容文本左对齐 -->
			<fui-preview bd-align="left" :labelWidth="136" :hdLabelWidth="136" :previewData="previewData"
				marginTop="24"></fui-preview>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				previewData: {
					label: '订单金额',
					value: '￥29.90',
					list: [{
						label: '订单号',
						// labelColor:'#FF2B2B',
						value: 'Fui00000111112',
						valueColor: '#FF2B2B'
					}, {
						label: '物流单号',
						value: '34409992021080911'
					}, {
						label: '创建时间',
						value: '2021-08-09 09:20'
					}, {
						label: '付款时间',
						value: '2021-08-09 09:30'
					}, {
						label: '订单备注',
						value: '路上请安全第一，如果超时可提前按已送达或与我联系。辛苦了！'
					}],
					buttons: [{
          text: '详情',
          icon: 'visible',
        }, {
          text: '确认维修',
          icon: 'icon-weixiu',
          customPrefix: true,
		  iconBtnSize: '32'
        }]
				},
				previewData2: {
					label: '个人信息',
					list: [{
						label: '姓名',
						value: '张三'
					}, {
						label: '性别',
						value: '男'
					}, {
						label: '年龄',
						value: '36'
					}, {
						label: '手机号码',
						value: '189****0020'
					}, {
						label: '家庭住址',
						value: '广东省深圳市龙华区深圳北站'
					}],
					buttons: [{
						id: 1, //自定义属性，非约定
						text: '修改',
						color: '#181818'
					}, {
						id: 2,
						text: '删除',
						color: '#FF2B2B'
					}]
				}

			}
		},
		methods: {
			btnClick(e) {
				console.log(e)
			},
			vip() {
				this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
			}
		}
	}
</script>

<style>
	page {
		font-weight: normal;
	}
</style>