230 lines
4.7 KiB
Plaintext
230 lines
4.7 KiB
Plaintext
<template>
|
|
<view class="uni-container">
|
|
<view class="head">
|
|
<view class="personClass">
|
|
<uni-icons type="person" size="30" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="inputClass">
|
|
<input class="uni-input" v-model="changeValue" placeholder="请输入查询的内容" />
|
|
</view>
|
|
<view class="head-right">
|
|
<text class="headtext">积分</text>
|
|
<text class="headtext">我的</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentBox">
|
|
<view class="constList">
|
|
<view class="constList-left">
|
|
<view class="imgbox">
|
|
<view>图片</view>
|
|
</view>
|
|
<view class="constList-left-con">
|
|
文案
|
|
</view>
|
|
</view>
|
|
<view class="constList-right">
|
|
<view class="constList-right-con">文案</view>
|
|
<view class="constList-right-con">文案</view>
|
|
</view>
|
|
</view>
|
|
<view class="constList-bottom">
|
|
<uni-icons type="heart-filled" size="30" color="#fd0505" style="color: red;"></uni-icons>
|
|
<uni-icons type="chatboxes-filled" size="30"></uni-icons>
|
|
<uni-icons type="images-filled" size="30"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="contentBox">
|
|
<view class="constList">
|
|
<view class="constList-left">
|
|
<view class="imgbox">
|
|
<view>图片</view>
|
|
</view>
|
|
<view class="constList-left-con">
|
|
文案
|
|
</view>
|
|
</view>
|
|
<view class="constList-right">
|
|
<view class="constList-right-con">文案</view>
|
|
<view class="constList-right-con">文案</view>
|
|
</view>
|
|
</view>
|
|
<view class="constList-bottom">
|
|
<uni-icons type="heart-filled" size="30" color="#fd0505" style="color: red;"></uni-icons>
|
|
<uni-icons type="chatboxes-filled" size="30"></uni-icons>
|
|
<uni-icons type="images-filled" size="30"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
// TODO 修复Android v3 加载过慢问题
|
|
// #ifdef APP-PLUS
|
|
var domModule = weex.requireModule('dom');
|
|
domModule.addRule('fontFace', {
|
|
'fontFamily': "uniicons",
|
|
'src': "url('/static/uni.ttf')"
|
|
});
|
|
// #endif
|
|
export default {
|
|
props: {
|
|
hasLeftWin: {
|
|
type: Boolean
|
|
},
|
|
leftWinActive: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
changeValue: ""
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '欢迎体验uni-app',
|
|
path: '/pages/tabBar/component/component'
|
|
}
|
|
},
|
|
onNavigationBarButtonTap(e) {
|
|
uni.navigateTo({
|
|
url: '/pages/about/about'
|
|
});
|
|
},
|
|
// #ifdef H5
|
|
watch: {
|
|
$route: {
|
|
immediate: true,
|
|
handler(newRoute) {
|
|
if (newRoute.matched.length) {
|
|
let path = newRoute.path.split('/')[3]
|
|
for (const item of this.list) {
|
|
if (Array.isArray(item.pages)) {
|
|
for (const page of item.pages) {
|
|
if (page === path || page.url && page.url === newRoute.path) {
|
|
item.open = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// #endif
|
|
methods: {
|
|
triggerCollapse(e, id) {
|
|
if (!this.list[e].pages) {
|
|
this.goDetailPage('', this.list[e].url);
|
|
return;
|
|
}
|
|
for (var i = 0; i < this.list.length; ++i) {
|
|
if (e === i) {
|
|
this.list[i].open = !this.list[i].open;
|
|
} else {
|
|
this.list[i].open = false;
|
|
}
|
|
}
|
|
},
|
|
goDetailPage(panel, e) {
|
|
if (typeof e === 'string') {
|
|
const url = '/pages/component/' + e + '/' + e
|
|
if (this.hasLeftWin) {
|
|
uni.reLaunch({
|
|
url: url
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
}
|
|
} else {
|
|
if (this.hasLeftWin) {
|
|
uni.reLaunch({
|
|
url: e.url
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: e.url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
@import '../../../common/uni-nvue.css';
|
|
.head{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 20px;
|
|
}
|
|
.personClass{
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: #c9cdd4;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
margin-right: 10px;
|
|
}
|
|
.uni-input{
|
|
height: 30px;
|
|
}
|
|
.head-right{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
.headtext{
|
|
margin: 0 10px;
|
|
}
|
|
.constList{
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
height: 200px;
|
|
background-color: #ecb2b2;
|
|
border-radius: 15px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.constList-left{
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 30px;
|
|
}
|
|
.constList-right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.constList-left-con{
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
.imgbox{
|
|
width: 200px;
|
|
height: 100px;
|
|
color: black;
|
|
margin: 5px 20px 10px 0px;
|
|
background-color: #fff;
|
|
}
|
|
.constList-right-con{
|
|
font-size: 20px;
|
|
text-align: center;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
}
|
|
uni-icons[type="heart-filled"] {
|
|
color: red !important;
|
|
}
|
|
.constList-bottom{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|