Skip to content

S
self-support
Commit 584e902d authored by Facius's avatar Facius
Browse files
Options

fix: 文件页面标签的换行

parent 2dcca078
Show whitespace changes
Inline Side-by-side
Showing with 549 additions and 475 deletions
src/pages/order/document.vue
View file @ 584e902d
<template> <template>
<view :class="['doc-wrap', {'order-file': orderFile}]"> <view :class="['doc-wrap', { 'order-file': orderFile }]">
<u-navbar back-icon-color="#333333" background="#FFFFFF" title="安装文件" titleColor="#333333" <u-navbar
:border-bottom="false" title-bold></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 v-for="(item, key) in labels" :key="key" class="label-list">
<view class="label-title"> <view class="label-title">
<!-- 合作商或品牌 --> <!-- 合作商或品牌 -->
<view>{{items[key]}}</view> <view>{{ items[key] }}</view>
<!-- 跳转到所有标签页面的更多按钮 --> <!-- 跳转到所有标签页面的更多按钮 -->
<view class="label-file-right" @click="handleMore(key)" v-if="item.length > 3"> <view
class="label-file-right"
@click="handleMore(key)"
v-if="item.length > 3"
>
<text class="label-right-text">更多</text> <text class="label-right-text">更多</text>
<u-icon name="arrow-right"></u-icon> <u-icon name="arrow-right"></u-icon>
</view> </view>
</view> </view>
<scroll-view scroll-x="true" class="label-content" :scroll-into-view="scrollId[key]"> <scroll-view
<view v-for="(label, ind) in item" :key="ind" class="label-item" :id="idText + label.id"> 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)"> <view
<text class="label-text u-line-2">{{label.name}}</text> :class="[
'label-normal',
{ selected: label.id == selected[key].id },
]"
@click="handleClick(key, label)"
>
<text class="label-text u-line-2">{{ label.name }}</text>
</view> </view>
</view> </view>
<!-- 标签加载中 --> <!-- 标签加载中 -->
...@@ -26,7 +51,9 @@ ...@@ -26,7 +51,9 @@
<u-loading mode="flower"></u-loading> <u-loading mode="flower"></u-loading>
</view> </view>
<!-- 无供应商、无品牌 --> <!-- 无供应商、无品牌 -->
<view class="tag-tip-view" v-else-if="item.length <= 0">{{'暂无' + items[key]}}</view> <view class="tag-tip-view" v-else-if="item.length <= 0">{{
'暂无' + items[key]
}}</view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
...@@ -36,17 +63,33 @@ ...@@ -36,17 +63,33 @@
<view class="file-row" v-for="(item, index) in list" :key="index"> <view class="file-row" v-for="(item, index) in list" :key="index">
<view class="file-left"> <view class="file-left">
<view class="file-name"> <view class="file-name">
<u-icon class="item-icon" name="doc" custom-prefix="wxh" size="52" color="#2272FF"></u-icon> <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 class="file-format-text">{{ formatText(item.name) }}</view>
</view> </view>
<text>{{item.name}}</text> <text>{{ item.name }}</text>
</view> </view>
<!-- 文件操作按钮 --> <!-- 文件操作按钮 -->
<view class="file-right"> <view class="file-right">
<u-button :custom-style="shareStyle" shape="circle" @click="handleShare(item)">分享</u-button> <u-button
<u-button :custom-style="previewStyle" shape="circle" @click="handlePreview(item)">查看</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> </view>
<!-- 如果是加载中，就显示转圈；如果加载完成 --> <!-- 如果是加载中，就显示转圈；如果加载完成 -->
...@@ -54,44 +97,46 @@ ...@@ -54,44 +97,46 @@
<u-loading mode="flower"></u-loading> <u-loading mode="flower"></u-loading>
</view> </view>
<!-- 加载完成之后，没有数据的提示：未选择品牌提示、无文件提示 --> <!-- 加载完成之后，没有数据的提示：未选择品牌提示、无文件提示 -->
<view class="tip-view" v-else-if="list.length <= 0">{{tipText}}</view> <view class="tip-view" v-else-if="list.length <= 0">{{ tipText }}</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
list: [], // 文件列表 list: [], // 文件列表
firstLoad: true, // 初次加载 firstLoad: true, // 初次加载
labels: { // 标签列表 labels: {
// 标签列表
'1': [], // 合作商标签列表 '1': [], // 合作商标签列表
'2': [] // 品牌标签列表 '2': [], // 品牌标签列表
}, },
selected: { // 选中的标签 selected: {
// 选中的标签
'1': {}, // 选中的合作商 '1': {}, // 选中的合作商
'2': {} // 选中的品牌 '2': {}, // 选中的品牌
}, },
scrollId: { scrollId: {
'1': '', // 选中的合作商view的id '1': '', // 选中的合作商view的id
'2': '' // 选中的品牌view的id '2': '', // 选中的品牌view的id
}, },
loading: false, // 文件列表加载中 loading: false, // 文件列表加载中
tapLoading: { tapLoading: {
'1': true, // 合作商加载中 '1': true, // 合作商加载中
'2': true // 品牌加载中 '2': true, // 品牌加载中
}, },
orderFile: false, // 是否是订单详情进来 orderFile: false, // 是否是订单详情进来
fileList: {}, // 文件地址缓存 {url最后一段： tmpPath} fileList: {}, // 文件地址缓存 {url最后一段： tmpPath}
}; }
}, },
computed: { computed: {
// 合作商的key是'1'，品牌的key是'2' // 合作商的key是'1'，品牌的key是'2'
items() { items() {
return { return {
'1': '合作商', '1': '合作商',
'2': '品牌' '2': '品牌',
} }
}, },
// 分享按钮风格 // 分享按钮风格
...@@ -104,7 +149,7 @@ ...@@ -104,7 +149,7 @@
color: '#2272FF', color: '#2272FF',
fontSize: '24rpx', fontSize: '24rpx',
fontWeight: '400', fontWeight: '400',
lineHeight: '52rpx' lineHeight: '52rpx',
} }
}, },
// 查看按钮风格 // 查看按钮风格
...@@ -116,7 +161,7 @@ ...@@ -116,7 +161,7 @@
color: '#FFFFFF', color: '#FFFFFF',
fontSize: '24rpx', fontSize: '24rpx',
fontWeight: '400', fontWeight: '400',
lineHeight: '52rpx' lineHeight: '52rpx',
} }
}, },
// 文件列表文件图片 // 文件列表文件图片
...@@ -125,26 +170,30 @@ ...@@ -125,26 +170,30 @@
}, },
// 列表无数据的提示文字 // 列表无数据的提示文字
tipText() { tipText() {
return (this.selected['2'].name || this.orderFile) ? '暂无文件' : '请选择品牌' return this.selected['2'].name || this.orderFile
? '暂无文件'
: '请选择品牌'
}, },
idText() { idText() {
return 'item' return 'item'
} },
}, },
onLoad(e) { onLoad(e) {
if (e && e.partnerCompanyId && e.brandId) { // 订单详情进来获取指定合作商和品牌的文件资料 if (e && e.partnerCompanyId && e.brandId) {
// 订单详情进来获取指定合作商和品牌的文件资料
this.orderFile = true this.orderFile = true
this.loadFileList(e.partnerCompanyId, e.brandId) this.loadFileList(e.partnerCompanyId, e.brandId)
} else { // 获取所有文件资料 } else {
// 获取所有文件资料
this.loadFileLabel('1') this.loadFileLabel('1')
} }
this.fileList = getApp().globalData.fileList || {} // 文件地址缓存 {url最后一段： tmpPath} this.fileList = getApp().globalData.fileList || {} // 文件地址缓存 {url最后一段： tmpPath}
}, },
onShow() { onShow() {
// 从标签列表页面返回，获取选中的标签 // 从标签列表页面返回，获取选中的标签
let pages = getCurrentPages(); let pages = getCurrentPages()
let page = pages[pages.length - 1]; let page = pages[pages.length - 1]
let selectedItem = page.selectedItem; let selectedItem = page.selectedItem
if (selectedItem) { if (selectedItem) {
page.selectedItem = null page.selectedItem = null
for (var item of this.labels[selectedItem.type]) { for (var item of this.labels[selectedItem.type]) {
...@@ -161,39 +210,52 @@ ...@@ -161,39 +210,52 @@
handleClick(key, label) { handleClick(key, label) {
this.selected[key] = label this.selected[key] = label
this.scrollId[key] = '' this.scrollId[key] = ''
if (key == '1') { // 合作商 if (key == '1') {
// 合作商
this.selected['2'] = {} // 清空选中品牌标签 this.selected['2'] = {} // 清空选中品牌标签
this.list = [] // 清空文件列表 this.list = [] // 清空文件列表
this.loadFileLabel('2', label.id) // 获取新合作商对应品牌 this.loadFileLabel('2', label.id) // 获取新合作商对应品牌
} else {// 品牌 } else {
// 品牌
this.loadFileList(this.selected['1'].id, this.selected['2'].id) // 获取文件列表 this.loadFileList(this.selected['1'].id, this.selected['2'].id) // 获取文件列表
} }
}, },
// 跳转到所有标签 // 跳转到所有标签
handleMore(key) { handleMore(key) {
var partnerCompanyId = '' // 合作商id var partnerCompanyId = '' // 合作商id
if (key == '2') { // 点击品牌的更多，跳转要传合作商id if (key == '2') {
// 点击品牌的更多，跳转要传合作商id
partnerCompanyId = this.selected['1'].id partnerCompanyId = this.selected['1'].id
} }
this.$u.route({url: 'pages/order/document-tag' + '?partnerCompanyId=' + partnerCompanyId + '&selectedId=' + this.selected[key].id}) this.$u.route({
url:
'pages/order/document-tag' +
'?partnerCompanyId=' +
partnerCompanyId +
'&selectedId=' +
this.selected[key].id,
})
}, },
// 点击了分享 // 点击了分享
handleShare(item) { handleShare(item) {
// 分享资料事件 // 分享资料事件
getApp().track('share_document', { getApp().track('share_document', {
id: this.vuex_user.id, id: this.vuex_user.id,
url: item.url url: item.url,
}); })
let filePath = this.fileList[(item.url || '').split('/').pop()] let filePath = this.fileList[(item.url || '').split('/').pop()]
if (filePath) { // 有下载记录 if (filePath) {
wx.shareFileMessage({ // 如果用checkFile检查文件是否存在后再分享，shareFileMess报错：shareFileMessage:fail can only be invoked by user TAP gesture. // 有下载记录
wx.shareFileMessage({
// 如果用checkFile检查文件是否存在后再分享，shareFileMess报错：shareFileMessage:fail can only be invoked by user TAP gesture.
filePath: filePath, filePath: filePath,
fileName: item.name, fileName: item.name,
success() {}, success() {},
fail: (error) => { fail: (error) => {
console.log(error) console.log(error)
if (error.errMsg.indexOf('internal') != -1) { // 文件不存在重新下载 if (error.errMsg.indexOf('internal') != -1) {
this.downloadFile(item.url, (result)=> { // 文件不存在重新下载
this.downloadFile(item.url, (result) => {
wx.shareFileMessage({ wx.shareFileMessage({
filePath: result.tempFilePath, filePath: result.tempFilePath,
fileName: item.name, fileName: item.name,
...@@ -204,8 +266,10 @@ ...@@ -204,8 +266,10 @@
} }
}, },
}) })
} else { // 无下载记录 } else {
this.downloadFile(item.url, (res)=> { // 下载 // 无下载记录
this.downloadFile(item.url, (res) => {
// 下载
wx.shareFileMessage({ wx.shareFileMessage({
filePath: res.tempFilePath, filePath: res.tempFilePath,
fileName: item.name, fileName: item.name,
...@@ -220,21 +284,27 @@ ...@@ -220,21 +284,27 @@
// 查看资料事件 // 查看资料事件
getApp().track('preview_document', { getApp().track('preview_document', {
id: this.vuex_user.id, id: this.vuex_user.id,
url: item.url url: item.url,
}); })
let filePath = this.fileList[(item.url || '').split('/').pop()] let filePath = this.fileList[(item.url || '').split('/').pop()]
if (filePath) { // 有下载记录 if (filePath) {
this.checkFile(filePath, (res)=> { // 文件是否还存在 // 有下载记录
if (res.size && res.size > 0) { // 存在，预览文件 this.checkFile(filePath, (res) => {
// 文件是否还存在
if (res.size && res.size > 0) {
// 存在，预览文件
this.previewFile(filePath) this.previewFile(filePath)
} else { // 文件已经不存在, 下载 } else {
this.downloadFile(item.url, (result)=> { // 文件已经不存在, 下载
this.downloadFile(item.url, (result) => {
this.previewFile(result.tempFilePath) this.previewFile(result.tempFilePath)
}) })
} }
}) })
} else { // 无下载记录 } else {
this.downloadFile(item.url, (res)=> { // 下载 // 无下载记录
this.downloadFile(item.url, (res) => {
// 下载
this.previewFile(res.tempFilePath) this.previewFile(res.tempFilePath)
}) })
} }
...@@ -243,37 +313,39 @@ ...@@ -243,37 +313,39 @@
checkFile(filePath, complete) { checkFile(filePath, complete) {
uni.getFileInfo({ uni.getFileInfo({
filePath: filePath, filePath: filePath,
complete: complete complete: complete,
}) })
}, },
// 下载文件 // 下载文件
downloadFile(url, block) { downloadFile(url, block) {
uni.showLoading({ uni.showLoading({
title: '加载中' title: '加载中',
}) })
uni.downloadFile({ uni.downloadFile({
url: url, url: url,
success: (res)=> { success: (res) => {
uni.hideLoading() uni.hideLoading()
this.fileList[url.split('/').pop()] = res.tempFilePath this.fileList[url.split('/').pop()] = res.tempFilePath
block(res) block(res)
} },
}); })
}, },
// 预览文件 // 预览文件
previewFile(filePath) { previewFile(filePath) {
if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) { // 查看图片 if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) {
// 查看图片
wx.previewImage({ wx.previewImage({
current: filePath, // 当前显示图片的http链接 current: filePath, // 当前显示图片的http链接
urls: [filePath] // 需要预览的图片http链接列表 urls: [filePath], // 需要预览的图片http链接列表
}) })
} else { // 查看文件 } else {
// 查看文件
uni.openDocument({ uni.openDocument({
filePath: filePath, filePath: filePath,
success: function(res) { success: function(res) {
console.log('打开文档成功'); console.log('打开文档成功')
} },
}); })
} }
}, },
// 获取合作商或品牌列表 // 获取合作商或品牌列表
...@@ -307,7 +379,7 @@ ...@@ -307,7 +379,7 @@
this.loading = true this.loading = true
let res = await this.$u.api.fileList({ let res = await this.$u.api.fileList({
partnerCompanyId: partnerCompanyId, // 合作商标签 partnerCompanyId: partnerCompanyId, // 合作商标签
brandId: brandId // 品牌标签 brandId: brandId, // 品牌标签
}) })
this.loading = false this.loading = false
if (res && res.code == 200) { if (res && res.code == 200) {
...@@ -326,19 +398,19 @@ ...@@ -326,19 +398,19 @@
return 'P' return 'P'
} }
}, },
} },
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.doc-wrap { .doc-wrap {
background-color: #F4F5F7; background-color: #f4f5f7;
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.order-file { &.order-file {
background-color: #FFFFFF; background-color: #ffffff;
} }
.label-list { .label-list {
...@@ -357,7 +429,7 @@ ...@@ -357,7 +429,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
color: #2272FF; color: #2272ff;
font-size: 26rpx; font-size: 26rpx;
padding-right: 30rpx; padding-right: 30rpx;
...@@ -381,21 +453,24 @@ ...@@ -381,21 +453,24 @@
width: 200rpx; width: 200rpx;
font-size: 26rpx; font-size: 26rpx;
color: #666666; color: #666666;
background-color: #FFFFFF; background-color: #ffffff;
border-radius: 8rpx; border-radius: 8rpx;
padding-left: 20rpx; padding-left: 20rpx;
padding-right: 20rpx; padding-right: 20rpx;
text-align: center; text-align: center;
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
display: table;
.label-text { .label-text {
word-break:break-all; word-break: break-all;
white-space: normal !important; white-space: normal !important;
display: table-cell;
vertical-align: middle;
} }
&.selected { &.selected {
color: #FFFFFF; color: #ffffff;
background-color: #2272FF; background-color: #2272ff;
} }
} }
} }
...@@ -418,23 +493,23 @@ ...@@ -418,23 +493,23 @@
} }
} }
} }
} }
.file-title { .file-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
border-radius: 32rpx; border-radius: 32rpx;
background-color: #FFFFFF; background-color: #ffffff;
// margin-top: 10rpx; // margin-top: 10rpx;
} }
.file-list { .file-list {
padding: 0 30rpx; padding: 0 30rpx;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: #FFFFFF; background-color: #ffffff;
.file-row { .file-row {
display: flex; display: flex;
...@@ -462,11 +537,10 @@ ...@@ -462,11 +537,10 @@
text-align: center; text-align: center;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #ffffff;
line-height: 52rpx; line-height: 52rpx;
} }
} }
} }
.file-right { .file-right {
...@@ -494,5 +568,5 @@ ...@@ -494,5 +568,5 @@
justify-content: center; justify-content: center;
margin-top: 200rpx; margin-top: 200rpx;
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment