|
|
@@ -1,236 +1,247 @@
|
|
|
-<template>
|
|
|
- <view class="container cart clearfix">
|
|
|
- <tui-skeleton
|
|
|
- v-if="skeletonShow"
|
|
|
- backgroundColor="#fafafa"
|
|
|
- borderRadius="10rpx"
|
|
|
- :isLoading="true"
|
|
|
- :loadingType="5"
|
|
|
- ></tui-skeleton>
|
|
|
- <view class="container-main" v-else>
|
|
|
- <view class="clearfix">
|
|
|
- <!-- 空白页 -->
|
|
|
- <view class="empty-container" v-if="isEmpty">
|
|
|
- <image class="empty-container-image" :src="StaticUrl + '/icon/icon-notice-empty@2x.png'"></image>
|
|
|
- <text class="error-text">暂无任何消息~</text>
|
|
|
- </view>
|
|
|
- <!-- 列表 -->
|
|
|
- <view
|
|
|
- class="tui-notice"
|
|
|
- v-else
|
|
|
- v-for="(cell, index) in list"
|
|
|
- :key="index"
|
|
|
- @click.stop="handleOrderClick(cell)"
|
|
|
- >
|
|
|
- <tui-swipe-action :operateWidth="80" :backgroundColor="'#F7F7F7'">
|
|
|
- <template v-slot:content>
|
|
|
- <notice-cell :cellType="5" :cell="cell"></notice-cell>
|
|
|
- </template>
|
|
|
- <template v-slot:button>
|
|
|
- <view class="tui-custom-btn_box">
|
|
|
- <view class="tui-custom-btn" @click.stop="deleteBtn(cell.id, index)">
|
|
|
- <text class="iconfont icon-shanchu3"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </tui-swipe-action>
|
|
|
- </view>
|
|
|
- <!--加载loadding-->
|
|
|
- <tui-loadmore :visible="loadding" :index="3" type="black" />
|
|
|
- <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
|
|
|
- <!--加载loadding-->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import { mapState, mapMutations } from 'vuex'
|
|
|
-import noticeMixins from './mixins/notice.mixins.js'
|
|
|
-import noticeCell from './components/notice-cell.vue'
|
|
|
-export default {
|
|
|
- mixins: [noticeMixins],
|
|
|
- components: {
|
|
|
- noticeCell
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- skeletonShow: true,
|
|
|
- StaticUrl: this.$Static,
|
|
|
- listQuery: {
|
|
|
- source: 2,
|
|
|
- commonId: 0,
|
|
|
- messageType: 0,
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10
|
|
|
- },
|
|
|
- list: [
|
|
|
+<template>
|
|
|
+ <view class="container cart clearfix">
|
|
|
+ <tui-skeleton
|
|
|
+ v-if="skeletonShow"
|
|
|
+ backgroundColor="#fafafa"
|
|
|
+ borderRadius="10rpx"
|
|
|
+ :isLoading="true"
|
|
|
+ :loadingType="5"
|
|
|
+ ></tui-skeleton>
|
|
|
+ <view class="container-main" v-else>
|
|
|
+ <view class="clearfix">
|
|
|
+ <!-- 空白页 -->
|
|
|
+ <view class="empty-container" v-if="isEmpty">
|
|
|
+ <image class="empty-container-image" :src="StaticUrl + '/icon/icon-notice-empty@2x.png'"></image>
|
|
|
+ <text class="error-text">暂无任何消息~</text>
|
|
|
+ </view>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view
|
|
|
+ class="tui-notice"
|
|
|
+ v-else
|
|
|
+ v-for="(cell, index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click.stop="handleOrderClick(cell)"
|
|
|
+ >
|
|
|
+ <tui-swipe-action :operateWidth="80" :backgroundColor="'#F7F7F7'">
|
|
|
+ <template v-slot:content>
|
|
|
+ <notice-cell :cellType="5" :cell="cell"></notice-cell>
|
|
|
+ </template>
|
|
|
+ <template v-slot:button>
|
|
|
+ <view class="tui-custom-btn_box">
|
|
|
+ <view class="tui-custom-btn" @click.stop="deleteBtn(cell.id, index)">
|
|
|
+ <text class="iconfont icon-shanchu3"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </tui-swipe-action>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black" />
|
|
|
+ <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
|
|
|
+ <!--加载loadding-->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+import noticeMixins from './mixins/notice.mixins.js'
|
|
|
+import noticeCell from './components/notice-cell.vue'
|
|
|
+export default {
|
|
|
+ mixins: [noticeMixins],
|
|
|
+ components: {
|
|
|
+ noticeCell
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ skeletonShow: true,
|
|
|
+ StaticUrl: this.$Static,
|
|
|
+ listQuery: {
|
|
|
+ source: 2,
|
|
|
+ commonId: 0,
|
|
|
+ messageType: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ list: [
|
|
|
{
|
|
|
id: 1,
|
|
|
time: '16546464',
|
|
|
- articleContent: 'abnwahdowadjhwadojw',
|
|
|
+ content: 'abnwahdowadjhwadojw',
|
|
|
link: 'https://www.caimei365.com/info/detail-7880-1.html'
|
|
|
},
|
|
|
{
|
|
|
id: 1,
|
|
|
time: '16546464',
|
|
|
- articleContent: 'abnwahdowadjhwadojw'
|
|
|
+ content: 'abnwahdowadjhwadojw'
|
|
|
}
|
|
|
- ],
|
|
|
- isEmpty: false,
|
|
|
- loadding: false,
|
|
|
- pullUpOn: true,
|
|
|
- pullFlag: true,
|
|
|
- hasNextPage: false,
|
|
|
- nomoreText: '上拉显示更多'
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.initData(option)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async initData(option) {
|
|
|
- console.log(123324234)
|
|
|
- const userInfo = await this.$api.getStorage()
|
|
|
- this.listQuery.messageType = option.messageType
|
|
|
- this.listQuery.commonId = userInfo.clubId ? userInfo.clubId : 0
|
|
|
- this.getUserAuthClubMessageList()
|
|
|
- },
|
|
|
- handleOrderClick(cell) {
|
|
|
- this.$api.navigateTo(`/pages/h5/article/path?link=${cell.link}`)
|
|
|
- },
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
- if (this.hasNextPage) {
|
|
|
- this.loadding = true
|
|
|
- this.pullUpOn = true
|
|
|
- this.getReachBottomData()
|
|
|
- }
|
|
|
- },
|
|
|
- onPullDownRefresh() {
|
|
|
- //下拉刷新
|
|
|
- this.listQuery.pageNum = 1
|
|
|
- this.getUserAuthClubMessageList()
|
|
|
- uni.stopPullDownRefresh()
|
|
|
- },
|
|
|
- onShow() {}
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- background-color: #f7f7f7;
|
|
|
-}
|
|
|
-.container-main {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 24rpx 0;
|
|
|
- .empty-container-image {
|
|
|
- width: 260rpx;
|
|
|
- height: 260rpx;
|
|
|
- margin-top: -300rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-.tui-notice {
|
|
|
- margin-bottom: 24rpx;
|
|
|
-}
|
|
|
-.tui-notice-cell {
|
|
|
- width: 702rpx;
|
|
|
- height: auto;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 16rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 16rpx 24rpx;
|
|
|
- margin: 0 auto;
|
|
|
- .tui-cell-top {
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- line-height: 88rpx;
|
|
|
- .cell-title {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
- float: left;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .cell-time {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- float: right;
|
|
|
- }
|
|
|
- }
|
|
|
- .tui-cell-content {
|
|
|
- width: 100%;
|
|
|
- height: 160rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 16rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- background-color: #f7f7f7;
|
|
|
- .cell-image {
|
|
|
- width: 128rpx;
|
|
|
- height: 128rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- float: left;
|
|
|
- image {
|
|
|
- width: 128rpx;
|
|
|
- height: 128rpx;
|
|
|
- display: block;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .cell-content {
|
|
|
- width: 490rpx;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 20rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666666;
|
|
|
- text-align: justify;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .tui-cell-bot {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 16rpx 0 0 0;
|
|
|
- .tui-cell-btn {
|
|
|
- width: 160rpx;
|
|
|
- height: 64rpx;
|
|
|
- border-radius: 35rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid #999999;
|
|
|
- text-align: center;
|
|
|
- line-height: 64rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
- float: right;
|
|
|
- margin-left: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.tui-custom-btn_box {
|
|
|
- width: 80px;
|
|
|
- height: 100%;
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: #f7f7f7;
|
|
|
-}
|
|
|
-
|
|
|
-.tui-custom-btn {
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #f94b4b;
|
|
|
- color: #ffffff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-shrink: 0;
|
|
|
- .icon-shanchu3 {
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-}
|
|
|
+ ],
|
|
|
+ isEmpty: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ pullFlag: true,
|
|
|
+ hasNextPage: false,
|
|
|
+ nomoreText: '上拉显示更多'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.initData(option)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initData(option) {
|
|
|
+ console.log(123324234)
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.listQuery.messageType = option.messageType
|
|
|
+ this.listQuery.commonId = userInfo.clubId ? userInfo.clubId : 0
|
|
|
+ this.getUserAuthClubMessageList()
|
|
|
+ },
|
|
|
+ handleOrderClick(cell) {
|
|
|
+ const link = `${
|
|
|
+ process.env.NODE_ENV === 'development' ? 'http://120.79.25.27:8009/' : 'https://www.caimei365.com/'
|
|
|
+ }/info/detail-${cell.thisId}-1.html`
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/h5/article/path?link=${link}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.getReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ //下拉刷新
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.getUserAuthClubMessageList()
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+}
|
|
|
+.container-main {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ .empty-container-image {
|
|
|
+ width: 260rpx;
|
|
|
+ height: 260rpx;
|
|
|
+ margin-top: -300rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-notice {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+.tui-notice-cell {
|
|
|
+ width: 702rpx;
|
|
|
+ height: auto;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ .tui-cell-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ .cell-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ float: left;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .cell-time {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-cell-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 160rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ .cell-image {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ float: left;
|
|
|
+ image {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ display: block;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cell-content {
|
|
|
+ width: 490rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: justify;
|
|
|
+ float: left;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-cell-bot {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16rpx 0 0 0;
|
|
|
+ .tui-cell-btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 35rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #999999;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ float: right;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-custom-btn_box {
|
|
|
+ width: 80px;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+}
|
|
|
+
|
|
|
+.tui-custom-btn {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #f94b4b;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ .icon-shanchu3 {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
xiebaomin