Commit da86ae9c authored by Facius's avatar Facius

资料页面UI改动

parent cf66069b
...@@ -331,6 +331,15 @@ ...@@ -331,6 +331,15 @@
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
},
{
"path": "document-tag",
"style": {
"navigationBarTitleText": "", // 合作商或品牌标签列表
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"disableScroll": true
}
} }
] ]
}, },
......
<template>
<view class="doc-tag">
<u-navbar back-icon-color="#333333" background="#FFFFFF" title="安装文件" titleColor="#333333"
:border-bottom="false" title-bold></u-navbar>
<!-- 合作商或品牌标签列表 -->
<view class="label-content">
<view v-for="(label, index) in labels" :key="index" class="label-item">
<!-- 选中为蓝底,非选中状态为灰底 -->
<view :class="['label-normal', {'selected': label.id == selectedId}]"
@click="handleClick(label)">
<text class="label-text">{{label.name}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
labels: [], // 标签列表
selectedId: ''
};
},
onLoad(e) {
if (e && e.partnerCompanyId) { // 合作商id
this.tagTitle = '品牌'
this.loadFileLabel('2', e.partnerCompanyId)
} else { // 获取所有文件资料
this.tagTitle = '合作商'
this.loadFileLabel('1')
}
},
methods: {
// 选中标签
handleClick(key, label) {
},
// 获取合作商列表
async loadFileLabel(type, partnerCompanyId) {
let param = {
type: type, // 1:合作商标签,2:品牌标签
}
if (type == '2') {
param.partnerCompanyId = partnerCompanyId // 合作商的标签id
}
let res = await this.$u.api.fileLabel(param)
if (res && res.code == 200) {
this.labels = res.data || []
// this.labels = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data] // 测试模拟多条数据
}
},
}
};
</script>
<style lang="scss" scoped>
.doc-tag {
background-color: #F4F5F7;
height: 100vh;
display: flex;
flex-direction: column;
.label-content {
width: 100%;
display: flex;
align-items: center;
overflow: auto;
padding: 0 10rpx 44rpx 30rpx;
.label-item {
padding-right: 20rpx;
flex-shrink: 0;
.label-normal {
height: 104rpx;
width: 200rpx;
font-size: 26rpx;
color: #666666;
background-color: #FFFFFF;
border-radius: 8rpx;
padding-left: 30rpx;
padding-right: 30rpx;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
.label-text {
word-break: break-all;
}
&.selected {
color: #FFFFFF;
background-color: #2272FF;
}
}
}
}
}
</style>
...@@ -5,9 +5,11 @@ ...@@ -5,9 +5,11 @@
<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 class="label-file-right"> <view>{{items[key]}}</view>
<!-- 跳转到所有标签页面的更多按钮 -->
<view class="label-file-right" @click="handleMore(key)">
<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>
...@@ -52,7 +54,6 @@ ...@@ -52,7 +54,6 @@
</template> </template>
<script> <script>
let now = Date.now()
export default { export default {
data() { data() {
return { return {
...@@ -133,6 +134,14 @@ ...@@ -133,6 +134,14 @@
this.loadFileList(this.selected['1'].id, this.selected['2'].id) // 获取文件列表 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) { handleShare(item) {
uni.showLoading({ uni.showLoading({
...@@ -179,7 +188,7 @@ ...@@ -179,7 +188,7 @@
} }
}); });
}, },
// 获取合作商列表 // 获取合作商或品牌列表
async loadFileLabel(type, partnerCompanyId) { async loadFileLabel(type, partnerCompanyId) {
let param = { let param = {
type: type, // 1:合作商标签,2:品牌标签 type: type, // 1:合作商标签,2:品牌标签
......
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