优化首页公告、优化消息列表
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">
|
<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>
|
<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">
|
<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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -229,6 +230,7 @@
|
||||||
import pitera from '@/components/nothing/pitera.vue';
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
// 公告
|
// 公告
|
||||||
import lwNotice from '@/components/lw-notice/lw-notice.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 footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
||||||
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
||||||
const app = getApp();
|
const app = getApp();
|
||||||
|
|
@ -238,7 +240,8 @@
|
||||||
statusNavSlot,
|
statusNavSlot,
|
||||||
lwNotice,
|
lwNotice,
|
||||||
'foot-tab' :footTabOne,
|
'foot-tab' :footTabOne,
|
||||||
containerSubgroupTwo
|
containerSubgroupTwo,
|
||||||
|
noticeOne
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -246,7 +249,7 @@
|
||||||
role: uni.getStorageSync('type_id'), // 1：业务员 2:表示客户 3:表示客服 4：表示工程师
|
role: uni.getStorageSync('type_id'), // 1：业务员 2:表示客户 3:表示客服 4：表示工程师
|
||||||
statusHeight: uni.getSystemInfoSync().statusBarHeight + 50,
|
statusHeight: uni.getSystemInfoSync().statusBarHeight + 50,
|
||||||
messageNumber: 16 ,// 消息数量
|
messageNumber: 16 ,// 消息数量
|
||||||
noticeList:['2021年11月06日公司团建，维修服务暂停一天服务暂停一天服务暂停一天。','51akslfj;dkpiojasdjf;j1ij'],//公告
|
noticeList:[{id:1,title:'2021年11月06日公司团建，维修服务暂停一天服务暂停一天服务暂停一天。一天服务暂停一天服务暂停一天。'}],//公告
|
||||||
// 故障报修
|
// 故障报修
|
||||||
repairList:[
|
repairList:[
|
||||||
{imgsrc:'/static/public/icon-home-repair.png',title:'报修'},
|
{imgsrc:'/static/public/icon-home-repair.png',title:'报修'},
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,54 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<status-nav navBarTitle="消息中心" returnColor="#c2c2c2"></status-nav>
|
<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>
|
<container-subgroup>
|
||||||
<view slot="content">
|
<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="pad-sx30 pad-zy20 disjbac">
|
||||||
<view class="fon30 message-circle disac" :class="['activity-message','audit-failed','system-notification'][index]">活动消息</view>
|
<view class="fon30 message-circle disac" :class="['activity-message','audit-failed','system-notification'][index]">{{item.title}}{{item.id}}</view>
|
||||||
<view class="fon26 col9">2020.06.17 18:30</view>
|
<view class="fon26 col9">{{item.time}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="bbot"></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>
|
</view>
|
||||||
|
<pitera v-if="total==dataList.length" textStr="暂无更多"></pitera>
|
||||||
</view>
|
</view>
|
||||||
</container-subgroup>
|
</container-subgroup>
|
||||||
|
<nothing-page v-if="dataList.length==0"></nothing-page>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import rate from '@/components/rate.vue';
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
rate
|
pitera
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
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() {
|
onLoad() {
|
||||||
|
|
@ -36,6 +60,48 @@
|
||||||
this.$requst.get('/universal/api.message/message_list',{page: 1,list_rows: 200}).then(res=>{
|
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