style(order): 样式调整

3a962733 · 高铭波 · 57008938 · 3a962733
Commit 3a962733 authored Jul 21, 2021 by 高铭波
Hide whitespace changes
Inline Side-by-side

Showing with 246 additions and 246 deletions

document.vue src/pages/order/document.vue +246 -246

No files found.
--- a/src/pages/order/document.vue
+++ b/src/pages/order/document.vue
@@ -2,12 +2,12 @@
 	<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">
 			<!-- 合作商、品牌标签列表 -->
 			<view v-for="(item, key) in labels" :key="key" class="label-list">
 				<view class="label-title">
 					<!-- 合作商或品牌 -->
 					<view>{{items[key]}}</view>
 					<!-- 跳转到所有标签页面的更多按钮 -->
 					<view class="label-file-right" @click="handleMore(key)" v-if="item.length > 3">
 						<text class="label-right-text">更多</text>
@@ -15,51 +15,51 @@
 					</view>
 				</view>
 				<scroll-view scroll-x="true" class="label-content" :scroll-into-view="scrollId[key]">
 					<view v-for="(label, ind) in item" :key="ind" class="label-item" :id="idText + label.id">
 						<!-- 选中为蓝底，非选中状态为灰底 -->
 						<view :class="['label-normal', {'selected': label.id == selected[key].id}]" @click="handleClick(key, label)">
-							<text class="label-text">{{label.name}}</text>
+							<text class="label-text u-line-2">{{label.name}}</text>
 						</view>
 					</view>
 					<!-- 标签加载中 -->
 					<view class="tag-loading-view" v-if="tapLoading[key]">
 						<u-loading mode="flower"></u-loading>
 					</view>
 					<!-- 无供应商、无品牌 -->
 					<view class="tag-tip-view" v-else-if="item.length <= 0">{{'暂无' + items[key]}}</view>
 				</scroll-view>
 			</view>
 		</template>
 		<view class="file-title">文件列表</view>
 		<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" color="#2272FF"></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 class="tip-view" v-else-if="list.length <= 0">{{tipText}}</view>
 		</view>
 	</view>
 </template>
 <script>
 	export default {
 		data() {
 			return {
@@ -72,63 +72,63 @@
 				selected: { // 选中的标签
 					'1': {}, // 选中的合作商
 					'2': {} // 选中的品牌
-				},
-				scrollId: {
-					'1': '', // 选中的合作商view的id
-					'2': '' // 选中的品牌view的id
 				},
-				loading: false, // 文件列表加载中
+				scrollId: {
-				tapLoading: { 
+					'1': '', // 选中的合作商view的id
-					'1': true, // 合作商加载中
+					'2': '' // 选中的品牌view的id
-					'2': true // 品牌加载中
+				},
+				loading: false, // 文件列表加载中
+				tapLoading: { 
+					'1': true, // 合作商加载中
+					'2': true // 品牌加载中
 				},
 				orderFile: false, // 是否是订单详情进来
 				fileList: {}, // 文件地址缓存 {url最后一段： tmpPath}
 			};
 		},
 		computed: {
 			// 合作商的key是'1'，品牌的key是'2'
 			items() {
 				return {
 					'1': '合作商',
 					'2': '品牌'
 				}
 			},
 			// 分享按钮风格
 			shareStyle() {
 				return {
 					marginRight: '10rpx',
 					width: '100rpx',
 					height: '52rpx',
 					background: '#FFFFFF',
 					color: '#2272FF',
 					fontSize: '24rpx',
 					fontWeight: '400',
 					lineHeight: '52rpx'
 				}
 			},
 			// 查看按钮风格
 			previewStyle() {
 				return {
 					width: '100rpx',
 					height: '52rpx',
 					background: '#2272FF',
 					color: '#FFFFFF',
 					fontSize: '24rpx',
 					fontWeight: '400',
 					lineHeight: '52rpx'
 				}
 			},
 			// 文件列表文件图片
 			wenjianImage() {
 				return process.uniEnv.qn_base_url + 'wenjian-bk.png'
 			},
 			// 列表无数据的提示文字
 			tipText() {
 				return (this.selected['2'].name || this.orderFile) ? '暂无文件' : '请选择品牌'
 			},
 			idText() {
 				return 'item'
 			}
 		},
 		onLoad(e) {
@@ -139,44 +139,44 @@
 				this.loadFileLabel('1')
 			}
 			this.fileList = getApp().globalData.fileList || {} // 文件地址缓存 {url最后一段： tmpPath}
-		},
-		onShow() {
-			// 从标签列表页面返回，获取选中的标签
-			let pages = getCurrentPages();
-			let page = pages[pages.length - 1];
-			let selectedItem = page.selectedItem;
-			if (selectedItem) {
-				page.selectedItem = null
-				for (var item of this.labels[selectedItem.type]) {
-					if (item.id == selectedItem.id) {
-						this.handleClick(selectedItem.type, item)
-						this.scrollId[selectedItem.type] = this.idText + selectedItem.id
-						return
-					}
-				}
-			}
 		},
-		methods: {
+		onShow() {
+			// 从标签列表页面返回，获取选中的标签
+			let pages = getCurrentPages();
+			let page = pages[pages.length - 1];
+			let selectedItem = page.selectedItem;
+			if (selectedItem) {
+				page.selectedItem = null
+				for (var item of this.labels[selectedItem.type]) {
+					if (item.id == selectedItem.id) {
+						this.handleClick(selectedItem.type, item)
+						this.scrollId[selectedItem.type] = this.idText + selectedItem.id
+						return
+					}
+				}
+			}
+		},
+		methods: {
 			// 选中标签
 			handleClick(key, label) {
 				this.selected[key] = label
 				this.scrollId[key] = ''
 				if (key == '1') { // 合作商
 					this.selected['2'] = {} // 清空选中品牌标签
 					this.list = [] // 清空文件列表
 					this.loadFileLabel('2', label.id) // 获取新合作商对应品牌
 				} else {// 品牌
 					this.loadFileList(this.selected['1'].id, this.selected['2'].id) // 获取文件列表
 				}
 			},
 			// 跳转到所有标签
 			handleMore(key) {
 				var partnerCompanyId = '' // 合作商id
 				if (key == '2') { // 点击品牌的更多，跳转要传合作商id
 					partnerCompanyId = this.selected['1'].id
 				}
 				this.$u.route({url: 'pages/order/document-tag' + '?partnerCompanyId=' + partnerCompanyId + '&selectedId=' + this.selected[key].id})
 			},
 			// 点击了分享
 			handleShare(item) {
 				// 分享资料事件
@@ -184,100 +184,100 @@
 					id: this.vuex_user.id,
 					url: item.url
 				});
 				let filePath = this.fileList[(item.url || '').split('/').pop()]
 				if (filePath) { // 有下载记录
 					wx.shareFileMessage({ // 如果用checkFile检查文件是否存在后再分享，shareFileMess报错：shareFileMessage:fail can only be invoked by user TAP gesture.
 						filePath: filePath,
 						fileName: item.name,
 						success() {},
 						fail: (error) => {
 							console.log(error)
 							if (error.errMsg.indexOf('internal') != -1) { // 文件不存在重新下载
 								this.downloadFile(item.url, (result)=> {
 									wx.shareFileMessage({
 										filePath: result.tempFilePath,
 										fileName: item.name,
 										success() {},
 										fail: console.error,
 									})
 								})
 							}
 						},
 					})
 				} else { // 无下载记录
 					this.downloadFile(item.url, (res)=> {  // 下载
 						wx.shareFileMessage({
 							filePath: res.tempFilePath,
 							fileName: item.name,
 							success() {},
 							fail: console.error,
 						})
 					})
 				}
 			},
 			// 点击了查看
 			handlePreview(item) {
 				// 查看资料事件
 				getApp().track('preview_document', {
 					id: this.vuex_user.id,
 					url: item.url
 				});
 				let filePath = this.fileList[(item.url || '').split('/').pop()]
 				if (filePath) { // 有下载记录
 					this.checkFile(filePath, (res)=> {  // 文件是否还存在
 						if (res.size && res.size > 0) { // 存在，预览文件
 							this.previewFile(filePath)
 						} else {  // 文件已经不存在, 下载
 							this.downloadFile(item.url, (result)=> {
 								this.previewFile(result.tempFilePath)
 							})
 						}
 					})
 				} else {  // 无下载记录
 					this.downloadFile(item.url, (res)=> { // 下载
 						this.previewFile(res.tempFilePath)
 					})
 				}
 			},
 			// 缓存文件是否存在
 			checkFile(filePath, complete) {
 				uni.getFileInfo({
 					filePath: filePath,
 					complete: complete
 				})
 			},
 			// 下载文件
 			downloadFile(url, block) {
 				uni.showLoading({
 					title: '加载中'
 				})
 				uni.downloadFile({
 					url: url,
 					success: (res)=> {	
 						uni.hideLoading()
 						this.fileList[url.split('/').pop()] = res.tempFilePath 
 						block(res)
 					}
 				});
 			},
 			// 预览文件
 			previewFile(filePath) {
 				if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) { // 查看图片
 					wx.previewImage({
 					  current: filePath, // 当前显示图片的http链接
 					  urls: [filePath] // 需要预览的图片http链接列表
 					})
 				} else { // 查看文件
 					uni.openDocument({
 						filePath: filePath,
 						success: function(res) {
 							console.log('打开文档成功');
 						}
 					});
 				}
 			},
 			// 获取合作商或品牌列表
 			async loadFileLabel(type, partnerCompanyId) {
 				this.tapLoading[type] = true
 				let param = {
 					type: type, // 1:合作商标签，2：品牌标签
@@ -285,14 +285,14 @@
 				if (type == '2') {
 					param.partnerCompanyId = partnerCompanyId // 合作商的标签id
 				}
 				let res = await this.$u.api.fileLabel(param)
 				this.tapLoading[type] = false
 				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] // 测试模拟多条数据
 					// 初次进入页面，获取完合作商列表之后，接着获取第一个合作商的品牌列表
 					if (this.firstLoad && type == '1') {
 						this.firstLoad = false
 						if (this.labels[type].length > 0) {
@@ -301,7 +301,7 @@
 						}
 					}
 				}
 			},
 			// 获取文件列表
 			async loadFileList(partnerCompanyId, brandId) {
 				this.loading = true
@@ -310,20 +310,20 @@
 					brandId: brandId // 品牌标签
 				})
 				this.loading = false
 				if (res && res.code == 200) {
 					this.list = 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) {
 					let item = arr.pop()
 					return item.substr(0, 1).toUpperCase()
 				} else {
 					return 'P'
 				}
 			},
 		}
@@ -369,15 +369,15 @@
 			.label-content {
 				width: 100%;
                height: 104rpx;
 				white-space: nowrap;
 				.label-item {
                    overflow: hidden;
 					padding-right: 20rpx;
 					flex-shrink: 0;
 					display: inline-block;
 					.label-normal {
 						height: 104rpx;
 						width: 200rpx;
 						font-size: 26rpx;
 						color: #666666;
@@ -386,12 +386,12 @@
 						padding-left: 20rpx;
 						padding-right: 20rpx;
 						text-align: center;
 						display: flex;
 						justify-content: center;
 						align-items: center;
 						.label-text {
 							word-break:break-all;
                            white-space: normal !important;
 						}
 						&.selected {
 							color: #FFFFFF;
@@ -399,24 +399,24 @@
 						}
 					}
 				}
 				.tag-loading-view {
 					width: 100%;
 					display: flex;
 					align-items: center;
 					justify-content: center;
 					margin-top: 20rpx;
 					position: absolute;
 					padding-right: 30rpx;
 				}
 				.tag-tip-view {
 					color: #999999;
 					width: 100%;
 					margin-top: 30rpx;
 					text-align: center;
 					position: absolute;
 					padding-right: 30rpx;
 				}
 			}
 		}
 	}
@@ -449,22 +449,22 @@
 				color: #333333;
 				font-size: 26rpx;
 				.file-name {
 					margin-right: 20rpx;
 					position: relative;
 					.item-icon {
 						position: absolute;
 					}
 					.file-format-text {
 						position: relative;
 						width: 52rpx;
 						height: 52rpx;
 						text-align: center;
 						font-size: 32rpx;
 						font-weight: bold;
 						color: #FFFFFF;
 						line-height: 52rpx;
 					}
 				}
 			}
@@ -494,5 +494,5 @@
 			justify-content: center;
 			margin-top: 200rpx;
 		}
 	}
 </style>