资料文件标签高度

src/pages/order/document.vue

@@ -2,7 +2,8 @@
 	<view :class="['doc-wrap', {'order-file': orderFile}]">
 		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="安装文件" titleColor="#333333"
 			:border-bottom="false" title-bold></u-navbar>
-		<template v-if="!orderFile">
+		<template v-if="!orderFile">
+			<!-- 合作商、品牌标签列表 -->
 			<view v-for="(item, key) in labels" :key="key" class="label-list">
 				<view class="label-title">
 					<view>{{items[key]}}</view>
@@ -12,33 +13,39 @@
 					</view>
 				</view>
 				<view class="label-content">
-					<view v-for="(label, ind) in item" :key="ind" class="label-item">
-						<view :class="['label-normal', {'selected': label.id == selected[key].id}]"
-							@click="handleClick(key, label)">{{label.name}}</view>
+					<view v-for="(label, ind) in item" :key="ind" class="label-item">
+						<!-- 选中为蓝底，非选中状态为灰底 -->
+						<view :class="['label-normal', {'selected': label.id == selected[key].id}]" @click="handleClick(key, label)">
+							<text class="label-text">{{label.name}}</text>
+						</view>
 					</view>
 				</view>
 			</view>
 		</template>
 		<view class="file-title">文件列表</view>
-		<view class="file-list">
+		<view class="file-list">
+			<!-- 文件列表 -->
 			<view class="file-row" v-for="(item, index) in list" :key="index">
 				<view class="file-left">
 					<view class="file-name">
 						<u-icon class="item-icon" name="doc" custom-prefix="wxh" size="52"></u-icon>
+						<!-- 文件后缀的首字母，大写 -->
 						<view class="file-format-text">{{formatText(item.name)}}</view>
 					</view>
 				
 					<text>{{item.name}}</text>
 				</view>
+				<!-- 文件操作按钮 -->
 				<view class="file-right">
 					<u-button :custom-style="shareStyle" shape="circle" @click="handleShare(item)">分享</u-button>
 					<u-button :custom-style="previewStyle" shape="circle" @click="handlePreview(item)">查看</u-button>
 				</view>
 			</view>
-
+			<!-- 如果是加载中，就显示转圈；如果加载完成 -->
 			<view class="loading-view" v-if="loading">
 				<u-loading mode="flower"></u-loading>
-			</view>
+			</view>
+			<!-- 加载完成之后，没有数据的提示：未选择品牌提示、无文件提示 -->
 			<view class="tip-view" v-else-if="list.length <= 0">{{tipText}}</view>
 		</view>
 	</view>
@@ -49,29 +56,29 @@
 	export default {
 		data() {
 			return {
-				list: [],
-				status: 'loadmore',
-				total: 0,
-				firstLoad: true,
-				labels: {
+				list: [], // 文件列表
+				firstLoad: true, // 初次加载
+				labels: { // 标签列表
 					'1': [], // 合作商标签列表
 					'2': [] // 品牌标签列表
 				},
-				selected: {
+				selected: { // 选中的标签
 					'1': {}, // 选中的合作商
 					'2': {} // 选中的品牌
 				},
-				loading: false,
-				orderFile: false
+				loading: false, // 文件列表加载中
+				orderFile: false // 是否是订单详情进来
 			};
 		},
-		computed: {
+		computed: {
+			// 合作商的key是'1'，品牌的key是'2'
 			items() {
 				return {
 					'1': '合作商',
 					'2': '品牌'
 				}
-			},
+			},
+			// 分享按钮风格
 			shareStyle() {
 				return {
 					marginRight: '10rpx',
@@ -84,6 +91,7 @@
 					lineHeight: '52rpx'
 				}
 			},
+			// 查看按钮风格
 			previewStyle() {
 				return {
 					width: '100rpx',
@@ -94,34 +102,38 @@
 					fontWeight: '400',
 					lineHeight: '52rpx'
 				}
-			},
+			},
+			// 文件列表文件图片
 			wenjianImage() {
 				return process.uniEnv.qn_base_url + 'wenjian-bk.png'
-			},
+			},
+			// 列表无数据的提示文字
 			tipText() {
 				return (this.selected['2'].name || this.orderFile) ? '暂无文件' : '请选择品牌'
 			}
 		},
 		onLoad(e) {
-			if (e && e.partnerCompanyId && e.brandId) {
+			if (e && e.partnerCompanyId && e.brandId) { // 订单详情进来获取指定合作商和品牌的文件资料
 				this.orderFile = true
 				this.loadFileList(e.partnerCompanyId, e.brandId)
-			} else {
+			} else { // 获取所有文件资料
 				this.loadFileLabel('1')
 			}
 
 		},
-		methods: {
+		methods: {
+			// 选中标签
 			handleClick(key, label) {
 				this.selected[key] = label
-				if (key == '1') {
-					this.selected['2'] = {}
-					this.list = []
-					this.loadFileLabel('2', label.id)
-				} else {
-					this.loadFileList(this.selected['1'].id, this.selected['2'].id)
+				if (key == '1') { // 合作商
+					this.selected['2'] = {} // 清空选中品牌标签
+					this.list = [] // 清空文件列表
+					this.loadFileLabel('2', label.id) // 获取新合作商对应品牌
+				} else {// 品牌
+					this.loadFileList(this.selected['1'].id, this.selected['2'].id) // 获取文件列表
 				}
-			},
+			},
+			// 分享
 			handleShare(item) {
 				uni.showLoading({
 					title: '加载中'
@@ -140,7 +152,8 @@
 					},
 					fail: console.error,
 				})
-			},
+			},
+			// 查看
 			handlePreview(item) {
 				uni.showLoading({
 					title: '加载中'
@@ -150,12 +163,12 @@
 					success: function(res) {
 						uni.hideLoading()
 						var filePath = res.tempFilePath;
-						if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) {
+						if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) { // 查看图片
 							wx.previewImage({
 							  current: filePath, // 当前显示图片的http链接
 							  urls: [filePath] // 需要预览的图片http链接列表
 							})
-						} else {
+						} else { // 查看文件
 							uni.openDocument({
 								filePath: filePath,
 								success: function(res) {
@@ -165,7 +178,8 @@
 						}
 					}
 				});
-			},
+			},
+			// 获取合作商列表
 			async loadFileLabel(type, partnerCompanyId) {
 				let param = {
 					type: type, // 1:合作商标签，2：品牌标签
@@ -176,9 +190,11 @@
 				let res = await this.$u.api.fileLabel(param)
 				if (res && res.code == 200) {
 					this.labels[type] = res.data || []
-					// this.labels[type] = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data]
-					console.log(this.labels)
-					if (this.firstLoad && type == '1') { // 第一次额外加载第一个合作商的品牌标签
+					
+					// this.labels[type] = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data] // 测试模拟多条数据
+					
+					// 初次进入页面，获取完合作商列表之后，接着获取第一个合作商的品牌列表
+					if (this.firstLoad && type == '1') {
 						this.firstLoad = false
 						if (this.labels[type].length > 0) {
 							this.selected[type] = this.labels[type][0]
@@ -186,7 +202,8 @@
 						}
 					}
 				}
-			},
+			},
+			// 获取品牌列表
 			async loadFileList(partnerCompanyId, brandId) {
 				this.loading = true
 				let res = await this.$u.api.fileList({
@@ -197,9 +214,11 @@
 				if (res && res.code == 200) {
 					console.log(res.data)
 					this.list = res.data || []
-					// this.list = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data]
+					
+					// this.list = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data] // 测试模拟多条数据
 				}
-			},
+			},
+			// 文件后缀的首字母，大写 
 			formatText(name) {
 				let arr = name.split('.')
 				if (arr.length > 1) {
@@ -255,13 +274,14 @@
 				display: flex;
 				align-items: center;
 				overflow-x: auto;
-				min-height: 60rpx;
+				min-height: 104rpx;
 				.label-item {
 					padding-right: 20rpx;
 					flex-shrink: 0;
 
 					.label-normal {
-						height: 60rpx;
+						height: 104rpx;
+						width: 200rpx;
 						font-size: 26rpx;
 						color: #666666;
 						background-color: #FFFFFF;
@@ -269,8 +289,12 @@
 						padding-left: 30rpx;
 						padding-right: 30rpx;
 						text-align: center;
-						line-height: 60rpx;
-
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						.label-text {
+							word-break:break-all;
+						}
 						&.selected {
 							color: #FFFFFF;
 							background-color: #2272FF;