优化首页公告、优化消息列表
parent
3f52122721
commit
6629e9b4d5
|
|
@ -1,75 +0,0 @@
|
|||
<template>
|
||||
<view id="main-img">
|
||||
<!-- <view class="mar-x40" v-for="(item,index) in list" :key="index"> -->
|
||||
<!-- 活动商品 start -->
|
||||
<view v-for="(item,index) in activityList" :key="index" class="mar-x50">
|
||||
<h1 class="fon36 bold">{{item.name}}</h1>
|
||||
<view class="colpeili fon26 mar-s20 mar-x40 clips1">{{item.subtitle}}</view>
|
||||
<view class="posir" @tap="goDetail(item.id)">
|
||||
<image class="radius30 animated fadeIn" :src="item.cover" mode="aspectFill" lazy-load style="height: 425rpx;width: 100%;" :style="{height:activityHeight + 'px'}"></image>
|
||||
<view v-if="item.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 活动商品 end -->
|
||||
|
||||
<!-- 子商品 start -->
|
||||
<view class="disjbac fw">
|
||||
<view @tap="goDetail(item.id)" class="width47 mar-x50 posir" v-for="(item,index) in list" :key="index">
|
||||
<image :src="item.cover" mode="aspectFill" lazy-load style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.name}}</view>
|
||||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
||||
<view v-if="item.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 子商品 end -->
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"list-one",
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return []
|
||||
}
|
||||
},
|
||||
activityList:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
check:uni.getStorageSync('is_active'),
|
||||
activityHeight:''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
uni.createSelectorQuery().in(this).select('#main-img').boundingClientRect().exec(rect => {
|
||||
this.activityHeight = rect[0].width;
|
||||
console.log(this.activityHeight,55);
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
goDetail(id){//前往详情页
|
||||
if(this.check){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url:`/pages/login/login`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
<template>
|
||||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" :style="{height: scrollHeight +'px'}">
|
||||
<view class="disjbac fw">
|
||||
<view @tap="goDetail(item.id)" class="width48_5 mar-x50 posir" v-for="(item,index) in dataList" :key="index">
|
||||
<image class="animated fadeIn" :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
|
||||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
||||
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 暂无更多数据 -->
|
||||
<pitera v-if="showpitera"></pitera>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 暂无更多组件
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
name:"list-two",
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
props:{
|
||||
// 高度类型
|
||||
scrollCate:{
|
||||
type:Number,
|
||||
default:1
|
||||
},
|
||||
// 页面来源
|
||||
pageSource: {
|
||||
type:Number,
|
||||
default:1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollHeight:uni.getStorageSync('scrollHeight'),
|
||||
// 数据
|
||||
dataList:[
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝',
|
||||
price:'2,000',
|
||||
isActivity:true,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选',
|
||||
price:'2,000',
|
||||
isActivity:true,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
}
|
||||
],
|
||||
page:1, // 第几页
|
||||
size:10, // 数量
|
||||
total:0, // 总数
|
||||
showpitera:true, // 是否显示暂无数据
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
switch (this.scrollCate){
|
||||
case 1:
|
||||
this.scrollHeight = uni.getStorageSync('scrollHeight-one'); // App.vue缓存的数据
|
||||
break;
|
||||
case 2:
|
||||
this.scrollHeight = uni.getStorageSync('scrollHeight-two'); // App.vue缓存的数据
|
||||
break;
|
||||
case 3:
|
||||
this.scrollHeight = uni.getStorageSync('scrollHeight-three'); // App.vue缓存的数据
|
||||
break;
|
||||
case 4:
|
||||
this.scrollHeight = uni.getStorageSync('scrollHeight-four'); // App.vue缓存的数据
|
||||
break;
|
||||
}
|
||||
switch (this.pageSource){
|
||||
case 1:
|
||||
this.checkList();
|
||||
break;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
checkList(){
|
||||
console.log('列表事件')
|
||||
},
|
||||
// 视图容器触底事件
|
||||
scrollBottomEv(){
|
||||
console.log('触底了',55)
|
||||
// 判断总数是否等于数组长度，如果相等显示暂无更多，否则继续执行列表事件
|
||||
if(this.total!=this.dataList.length){
|
||||
// 页数每次+1
|
||||
this.page++
|
||||
switch (this.pageSource){
|
||||
case 1:
|
||||
// this.checkList();// 调用列表事件
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
// 显示暂无数据
|
||||
this.pitera = true;
|
||||
}
|
||||
},
|
||||
goDetail(id){//前往详情页
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
<template>
|
||||
<view class="xzw_notice" :style="{color:getColor(theme),backgroundColor:getBgColor(theme)}">
|
||||
<uni-icons v-if="showIcon === true || showIcon === 'true'" class="notice_left" type="sound" :color="getColor(theme)" size="22" />
|
||||
<swiper class="notice_center" vertical v-if="direction=='column'" :autoplay="true" :interval="4000" :duration="500" :circular="true" disable-touch>
|
||||
<swiper-item v-for="(item, index) in list" :key="index" class="swiperIn" @click="goItem(item)">
|
||||
<view>{{item[theKey]}}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view :class="['','notice_center1','notice_center2','notice_center3','notice_center4','notice_center5'][speedTime]" v-else><view class="content">{{list[0][theKey]}}</view></view>
|
||||
<view class="notice_right" v-if="showMore">
|
||||
<view @click="goMore">更多</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"notice-one",
|
||||
props:{
|
||||
// 速度
|
||||
speed: {
|
||||
type:Number,
|
||||
default:1
|
||||
},
|
||||
//主题色,default|primary|error|warning|success|info
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 是否显示左侧icon
|
||||
showIcon: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
// 是否显示更多
|
||||
showMore: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [{id:1,title:'公告1'},{id:2,title:'公告2'}]
|
||||
}
|
||||
},
|
||||
//公告数组的键名
|
||||
theKey:{
|
||||
type: String,
|
||||
default: 'title'
|
||||
},
|
||||
//方向，column垂直，row水平时取第一条公告
|
||||
direction:{
|
||||
type: String,
|
||||
default: 'column'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text:'',
|
||||
speedTime:1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 缓存状态栏+标题栏的高度
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query.select('.content').boundingClientRect((rect) => {
|
||||
console.log(rect.width);
|
||||
let newWidth = rect.width;
|
||||
if(newWidth <=420) {
|
||||
this.speedTime = 1;
|
||||
}
|
||||
if(newWidth >= 420 && newWidth < 720) {
|
||||
this.speedTime = 2;
|
||||
}
|
||||
if(newWidth >= 720 && newWidth < 820) {
|
||||
this.speedTime = 3;
|
||||
}
|
||||
if(newWidth >= 820 && newWidth < 920) {
|
||||
this.speedTime = 4;
|
||||
}
|
||||
if(newWidth >= 920) {
|
||||
this.speedTime = 5;
|
||||
}
|
||||
}).exec()
|
||||
},
|
||||
methods:{
|
||||
getColor(theme){
|
||||
if(theme=="primary"){
|
||||
return "#2979FF"
|
||||
}else if(theme=="error"){
|
||||
return "#FA3534"
|
||||
}else if(theme=="warning"){
|
||||
return "#FF9A43"
|
||||
}else if(theme=="success"){
|
||||
return "#1BBF6C"
|
||||
}else if(theme=="info"){
|
||||
return "#909399"
|
||||
}else{
|
||||
return "#303133"
|
||||
}
|
||||
},
|
||||
getBgColor(theme){
|
||||
if(theme=="primary"){
|
||||
return "#ECF5FF"
|
||||
}else if(theme=="error"){
|
||||
return "#FEF0F0"
|
||||
}else if(theme=="warning"){
|
||||
return "#FDF6EC"
|
||||
}else if(theme=="success"){
|
||||
return "#DBF1E1"
|
||||
}else if(theme=="info"){
|
||||
return "#F4F4F5"
|
||||
}else{
|
||||
return "#FFFFFF"
|
||||
}
|
||||
},
|
||||
goItem(item){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/notice-detail/notice-detail?id=${item.id}`
|
||||
})
|
||||
},
|
||||
goMore(){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/notice-list/notice-list`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.xzw_notice {
|
||||
font-size: 26upx;
|
||||
height: 40upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
.notice_left{
|
||||
margin: 0 20upx 0 0;
|
||||
}
|
||||
.notice_center{
|
||||
flex:1;
|
||||
height:90upx;
|
||||
.swiperIn{
|
||||
height:80upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
view{
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.notice_center1{
|
||||
flex:1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height:90upx;
|
||||
overflow: hidden;
|
||||
view{
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
padding-left: 100%;
|
||||
animation: notice 5s 0s linear infinite both;
|
||||
}
|
||||
}
|
||||
.notice_right {
|
||||
margin: 0 0 0 20upx;
|
||||
}
|
||||
@keyframes notice {
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.notice_center1{
|
||||
flex:1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height:90upx;
|
||||
overflow: hidden;
|
||||
view{
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
padding-left: 100%;
|
||||
animation: notice 5s 0s linear infinite both;
|
||||
}
|
||||
}
|
||||
.notice_right {
|
||||
margin: 0 0 0 20upx;
|
||||
}
|
||||
@keyframes notice {
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.notice_center2{
|
||||
flex:1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height:90upx;
|
||||
overflow: hidden;
|
||||
view{
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
padding-left: 100%;
|
||||
animation: notice 10s 0s linear infinite both;
|
||||
}
|
||||
}
|
||||
.notice_right {
|
||||
margin: 0 0 0 20upx;
|
||||
}
|
||||
@keyframes notice {
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.notice_center3{
|
||||
flex:1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height:90upx;
|
||||
overflow: hidden;
|
||||
view{
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
padding-left: 100%;
|
||||
animation: notice 15s 0s linear infinite both;
|
||||
}
|
||||
}
|
||||
.notice_right {
|
||||
margin: 0 0 0 20upx;
|
||||
}
|
||||
@keyframes notice {
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.notice_center4{
|
||||
flex:1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height:90upx;
|
||||
overflow: hidden;
|
||||
view{
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
padding-left: 100%;
|
||||
animation: notice 20s 0s linear infinite both;
|
||||
}
|
||||
}
|
||||
.notice_right {
|
||||
margin: 0 0 0 20upx;
|
||||
}
|
||||
@keyframes notice {
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.notice_center5{
|
||||
flex:1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height:90upx;
|
||||
overflow: hidden;
|
||||
view{
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
padding-left: 100%;
|
||||
animation: notice 25s 0s linear infinite both;
|
||||
}
|
||||
}
|
||||
.notice_right {
|
||||
margin: 0 0 0 20upx;
|
||||
}
|
||||
@keyframes notice {
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
### 安装方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||
|
||||
### 说明
|
||||
由于官方公告组件uni-notice-bar没有垂直滚动的功能, 所以利用swiper加入了垂直滚动, 加入了常用主题色, 可以自己去添加, 需要用到uni-icons
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 默认垂直滚动 -->
|
||||
<xzw-notice/>
|
||||
<!-- 水平滚动,取数组第一条 -->
|
||||
<xzw-notice theme="info" direction="row"/>
|
||||
<!-- theme主题色,default|primary|error|warning|success|info -->
|
||||
<xzw-notice theme="error" direction="row"/>
|
||||
<!-- 点击公告,点击更多 -->
|
||||
<xzw-notice theme="warning" @goItem="goItem" @goMore="goMore"/>
|
||||
<!-- 绑定公告数组,默认取每一项的title字段,可以通过theKey改变读取的字段 -->
|
||||
<xzw-notice theme="success" :list="list2" theKey="name"/>
|
||||
<!-- 是否显示左侧喇叭,是否显示更多 -->
|
||||
<xzw-notice theme="primary" :list="list2" theKey="name" :showIcon="false" :showMore="false"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list:[{id:1,title:'公告1'},{id:2,title:'公告2'}]
|
||||
list2:[{id:1,name:'公告3'},{id:2,name:'公告4'}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goItem(item){
|
||||
uni.showToast({
|
||||
title:'你点击的公告id是'+item.id,
|
||||
icon:'none'
|
||||
})
|
||||
},
|
||||
goMore(){
|
||||
uni.showToast({
|
||||
title:'点击更多',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Tag Props
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:-: |:-: |:-: |:-: |
|
||||
|list |Array | |公告数组 |
|
||||
|theme |String |default |主题 |
|
||||
|showIcon |Boolean |true |是否显示左侧icon |
|
||||
|showMore |Boolean |true |是否显示更多 |
|
||||
|theKey |String |title |公告数组的键名 |
|
||||
|direction |String |column |滚动的方向 |
|
||||
|
||||
|
||||
### Tag Events
|
||||
|
||||
|事件称名 |说明 |返回值 |
|
||||
|:-: |:-: |:-: |
|
||||
|@goItem |点击公告 |- |
|
||||
|@goMore |点击更多 |- |
|
||||
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
export default {
|
||||
"pulldown": "\ue588",
|
||||
"refreshempty": "\ue461",
|
||||
"back": "\ue471",
|
||||
"forward": "\ue470",
|
||||
"more": "\ue507",
|
||||
"more-filled": "\ue537",
|
||||
"scan": "\ue612",
|
||||
"qq": "\ue264",
|
||||
"weibo": "\ue260",
|
||||
"weixin": "\ue261",
|
||||
"pengyouquan": "\ue262",
|
||||
"loop": "\ue565",
|
||||
"refresh": "\ue407",
|
||||
"refresh-filled": "\ue437",
|
||||
"arrowthindown": "\ue585",
|
||||
"arrowthinleft": "\ue586",
|
||||
"arrowthinright": "\ue587",
|
||||
"arrowthinup": "\ue584",
|
||||
"undo-filled": "\ue7d6",
|
||||
"undo": "\ue406",
|
||||
"redo": "\ue405",
|
||||
"redo-filled": "\ue7d9",
|
||||
"bars": "\ue563",
|
||||
"chatboxes": "\ue203",
|
||||
"camera": "\ue301",
|
||||
"chatboxes-filled": "\ue233",
|
||||
"camera-filled": "\ue7ef",
|
||||
"cart-filled": "\ue7f4",
|
||||
"cart": "\ue7f5",
|
||||
"checkbox-filled": "\ue442",
|
||||
"checkbox": "\ue7fa",
|
||||
"arrowleft": "\ue582",
|
||||
"arrowdown": "\ue581",
|
||||
"arrowright": "\ue583",
|
||||
"smallcircle-filled": "\ue801",
|
||||
"arrowup": "\ue580",
|
||||
"circle": "\ue411",
|
||||
"eye-filled": "\ue568",
|
||||
"eye-slash-filled": "\ue822",
|
||||
"eye-slash": "\ue823",
|
||||
"eye": "\ue824",
|
||||
"flag-filled": "\ue825",
|
||||
"flag": "\ue508",
|
||||
"gear-filled": "\ue532",
|
||||
"reload": "\ue462",
|
||||
"gear": "\ue502",
|
||||
"hand-thumbsdown-filled": "\ue83b",
|
||||
"hand-thumbsdown": "\ue83c",
|
||||
"hand-thumbsup-filled": "\ue83d",
|
||||
"heart-filled": "\ue83e",
|
||||
"hand-thumbsup": "\ue83f",
|
||||
"heart": "\ue840",
|
||||
"home": "\ue500",
|
||||
"info": "\ue504",
|
||||
"home-filled": "\ue530",
|
||||
"info-filled": "\ue534",
|
||||
"circle-filled": "\ue441",
|
||||
"chat-filled": "\ue847",
|
||||
"chat": "\ue263",
|
||||
"mail-open-filled": "\ue84d",
|
||||
"email-filled": "\ue231",
|
||||
"mail-open": "\ue84e",
|
||||
"email": "\ue201",
|
||||
"checkmarkempty": "\ue472",
|
||||
"list": "\ue562",
|
||||
"locked-filled": "\ue856",
|
||||
"locked": "\ue506",
|
||||
"map-filled": "\ue85c",
|
||||
"map-pin": "\ue85e",
|
||||
"map-pin-ellipse": "\ue864",
|
||||
"map": "\ue364",
|
||||
"minus-filled": "\ue440",
|
||||
"mic-filled": "\ue332",
|
||||
"minus": "\ue410",
|
||||
"micoff": "\ue360",
|
||||
"mic": "\ue302",
|
||||
"clear": "\ue434",
|
||||
"smallcircle": "\ue868",
|
||||
"close": "\ue404",
|
||||
"closeempty": "\ue460",
|
||||
"paperclip": "\ue567",
|
||||
"paperplane": "\ue503",
|
||||
"paperplane-filled": "\ue86e",
|
||||
"person-filled": "\ue131",
|
||||
"contact-filled": "\ue130",
|
||||
"person": "\ue101",
|
||||
"contact": "\ue100",
|
||||
"images-filled": "\ue87a",
|
||||
"phone": "\ue200",
|
||||
"images": "\ue87b",
|
||||
"image": "\ue363",
|
||||
"image-filled": "\ue877",
|
||||
"location-filled": "\ue333",
|
||||
"location": "\ue303",
|
||||
"plus-filled": "\ue439",
|
||||
"plus": "\ue409",
|
||||
"plusempty": "\ue468",
|
||||
"help-filled": "\ue535",
|
||||
"help": "\ue505",
|
||||
"navigate-filled": "\ue884",
|
||||
"navigate": "\ue501",
|
||||
"mic-slash-filled": "\ue892",
|
||||
"search": "\ue466",
|
||||
"settings": "\ue560",
|
||||
"sound": "\ue590",
|
||||
"sound-filled": "\ue8a1",
|
||||
"spinner-cycle": "\ue465",
|
||||
"download-filled": "\ue8a4",
|
||||
"personadd-filled": "\ue132",
|
||||
"videocam-filled": "\ue8af",
|
||||
"personadd": "\ue102",
|
||||
"upload": "\ue402",
|
||||
"upload-filled": "\ue8b1",
|
||||
"starhalf": "\ue463",
|
||||
"star-filled": "\ue438",
|
||||
"star": "\ue408",
|
||||
"trash": "\ue401",
|
||||
"phone-filled": "\ue230",
|
||||
"compose": "\ue400",
|
||||
"videocam": "\ue300",
|
||||
"trash-filled": "\ue8dc",
|
||||
"download": "\ue403",
|
||||
"chatbubble-filled": "\ue232",
|
||||
"chatbubble": "\ue202",
|
||||
"cloud-download": "\ue8e4",
|
||||
"cloud-upload-filled": "\ue8e5",
|
||||
"cloud-upload": "\ue8e6",
|
||||
"cloud-download-filled": "\ue8e9",
|
||||
"headphones":"\ue8bf",
|
||||
"shop":"\ue609"
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" :class="[customIcons,customIcons?type:'']" @click="_onClick">{{icons[type]}}</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './icons.js';
|
||||
export default {
|
||||
name: 'UniIcons',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customIcons:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: icons
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
src: url('./uni.ttf') format('truetype');
|
||||
}
|
||||
/* #endif */
|
||||
.uni-icons {
|
||||
font-family: uniicons;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
|
@ -48,7 +48,8 @@
|
|||
<view class="disac pad-s30 pad-x10">
|
||||
<image class="mar-zy20" style="width: 64rpx;height: 27rpx;" src="/static/public/icon-home-notice.png" mode=""></image>
|
||||
<view class="fon24 color6 mar-y20 width100 bleft pad-z20">
|
||||
<lwNotice @dangGao="goNoticeDetail" :list="noticeList" :backgroundColor="'#FFFFFF'"></lwNotice>
|
||||
<!-- <lwNotice @dangGao="goNoticeDetail" :list="noticeList" :backgroundColor="'#FFFFFF'"></lwNotice> -->
|
||||
<notice-one direction="row" :list="noticeList"></notice-one>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -229,6 +230,7 @@
|
|||
import pitera from '@/components/nothing/pitera.vue';
|
||||
// 公告
|
||||
import lwNotice from '@/components/lw-notice/lw-notice.vue';
|
||||
import noticeOne from '@/components/notices/notice-one/notice-one.vue';
|
||||
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
||||
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
||||
const app = getApp();
|
||||
|
|
@ -238,7 +240,8 @@
|
|||
statusNavSlot,
|
||||
lwNotice,
|
||||
'foot-tab' :footTabOne,
|
||||
containerSubgroupTwo
|
||||
containerSubgroupTwo,
|
||||
noticeOne
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -246,7 +249,7 @@
|
|||
role: uni.getStorageSync('type_id'), // 1：业务员 2:表示客户 3:表示客服 4：表示工程师
|
||||
statusHeight: uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
messageNumber: 16 ,// 消息数量
|
||||
noticeList:['2021年11月06日公司团建，维修服务暂停一天服务暂停一天服务暂停一天。','51akslfj;dkpiojasdjf;j1ij'],//公告
|
||||
noticeList:[{id:1,title:'2021年11月06日公司团建，维修服务暂停一天服务暂停一天服务暂停一天。一天服务暂停一天服务暂停一天。'}],//公告
|
||||
// 故障报修
|
||||
repairList:[
|
||||
{imgsrc:'/static/public/icon-home-repair.png',title:'报修'},
|
||||
|
|
|
|||
|
|
@ -1,30 +1,54 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-nav navBarTitle="消息中心" returnColor="#c2c2c2"></status-nav>
|
||||
<view v-show="ifDel" class="bacf pad-sx20 pad-zy40 fon24 disjbac animated" :class="ifDel ? 'fadeInDown' :'fadeOutUp'" style="position: sticky;" :style="{top: newTop+'px'}">
|
||||
<view @tap="delEv(0)">删除所有</view>
|
||||
<view @tap="delEv(1)">删除（{{delNum}}）</view>
|
||||
</view>
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<view class="bacf mar-x10" v-for="(item,index) in 10" :key="index">
|
||||
<view @longtap.stop="longTap(index)" @tap="chooseDel(index,item.id)" class="mar-x10 bacf" :style="{backgroundColor: (ifDel && item.status) ? '#dddddd' :''}" v-for="(item,index) in dataList" :key="index">
|
||||
<view class="pad-sx30 pad-zy20 disjbac">
|
||||
<view class="fon30 message-circle disac" :class="['activity-message','audit-failed','system-notification'][index]">活动消息</view>
|
||||
<view class="fon26 col9">2020.06.17 18:30</view>
|
||||
<view class="fon30 message-circle disac" :class="['activity-message','audit-failed','system-notification'][index]">{{item.title}}{{item.id}}</view>
|
||||
<view class="fon26 col9">{{item.time}}</view>
|
||||
</view>
|
||||
<view class="bbot"></view>
|
||||
<view class="fon27 line-h46 pad-zy20 pad-sx30" style="color: #737373;">恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....</view>
|
||||
<view class="fon27 line-h46 pad-zy20 pad-sx30" style="color: #737373;">{{item.content}}</view>
|
||||
</view>
|
||||
<pitera v-if="total==dataList.length" textStr="暂无更多"></pitera>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
<nothing-page v-if="dataList.length==0"></nothing-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rate from '@/components/rate.vue';
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{
|
||||
rate
|
||||
},
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
delNum:0,
|
||||
newTop: uni.getSystemInfoSync().statusBarHeight + 40,
|
||||
ifDel:false,
|
||||
total:12,
|
||||
dataList:[
|
||||
{id:1,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:2,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:3,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:4,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:5,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:6,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:7,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:8,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:9,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:10,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:11,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
{id:12,title:'活动消息',time:'2020.06.17 18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
|
||||
],
|
||||
delArrId:[]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -36,6 +60,48 @@
|
|||
this.$requst.get('/universal/api.message/message_list',{page: 1,list_rows: 200}).then(res=>{
|
||||
|
||||
})
|
||||
},
|
||||
// 长按事件
|
||||
longTap(index) {
|
||||
console.log(index);
|
||||
this.ifDel = true;
|
||||
this.dataList[index].status = true;
|
||||
this.delNum++;
|
||||
this.delArrId.push(this.dataList[index].id);
|
||||
},
|
||||
// 删除事件
|
||||
delEv(index) {
|
||||
if(index) {
|
||||
console.log('删除选中项');
|
||||
this.delArrId.forEach(item=>{
|
||||
this.dataList.forEach((item1,index1)=>{
|
||||
if(item == item1.id) {
|
||||
console.log(item);
|
||||
this.dataList.splice(index1,1);
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
console.log('清空所有');
|
||||
this.dataList = [];
|
||||
}
|
||||
this.ifDel = false;
|
||||
this.delNum = 0;
|
||||
this.delArrId = [];
|
||||
},
|
||||
// 选中删除
|
||||
chooseDel(index,id){
|
||||
if(this.ifDel) {
|
||||
this.dataList[index].status = !this.dataList[index].status;
|
||||
this.delNum = 0;
|
||||
this.delArrId = [];
|
||||
this.dataList.forEach(item=>{
|
||||
if(item.status) {
|
||||
this.delNum++;
|
||||
this.delArrId.push(item.id);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue