1
This commit is contained in:
Vinjor
parent
68abf222ef
commit
06082ddf85
11
api/business/base.js
Normal file
11
api/business/base.js
Normal file
@ -0,0 +1,11 @@
|
||||
import upload from '@/utils/upload'
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 关注取消关注
|
||||
export function postForkUser(params) {
|
||||
return request({
|
||||
url: '/busi/love/userLoveIs',
|
||||
method: 'post',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
710
pages/components/index.vue
Normal file
710
pages/components/index.vue
Normal file
@ -0,0 +1,710 @@
|
||||
<template>
|
||||
<view class="dl-notice-box-index">
|
||||
<!-- 标题 -->
|
||||
<view class="dl-title">
|
||||
<view class="left-search" @click="goSeach()">
|
||||
<view v-show="!showSearch" style="position: relative;">
|
||||
<image class="dl-image" src="@/static/index/search.png" mode="aspectFit"></image>
|
||||
<image class="dl-vip" src="@/static/index/vip.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view v-show="showSearch" style="width: 90%;">
|
||||
<uni-search-bar radius="5" style="width: 100%;" placeholder="请输入关键词" clearButton="auto"
|
||||
cancelButton="none" @confirm="search" @clear="clear">
|
||||
</uni-search-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-text" :style="{width: showSearch ? '40%':'56%'}">
|
||||
<text class="dl-text">通告</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 菜单 -->
|
||||
<view class="dl-menu-box">
|
||||
<view v-for="(item,index) in menus" @click="itemClick(index,item)" class="dl-menu"
|
||||
:class="index==menuIndex?'dl-menu click':'dl-menu'">{{item}}</view>
|
||||
</view>
|
||||
<!-- 筛选条件 -->
|
||||
<view class="dl-menu-box" style="padding-bottom: 20rpx;">
|
||||
<view :class="[0==chooseCondition?'dl-focus dl-search-box':'dl-search-box']" @click="choosePlat(0)"
|
||||
:key="chooseCondition">
|
||||
<text>{{queryParams.platformName}}</text>
|
||||
<view class="image-box">
|
||||
<image v-if="0==chooseCondition" class="dl-icon" src="@/static/index/shang.png" mode="aspectFit">
|
||||
</image>
|
||||
<image v-else class="dl-icon" src="@/static/index/sanjiao.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="[1==chooseCondition?'dl-focus dl-search-box':'dl-search-box']" @click="choosePlat(1)"
|
||||
:key="chooseCondition">
|
||||
<text>{{queryParams.bloggerTypeName}}</text>
|
||||
<view class="image-box">
|
||||
<image v-if="1==chooseCondition" class="dl-icon" src="@/static/index/shang.png" mode="aspectFit">
|
||||
</image>
|
||||
<image v-else class="dl-icon" src="@/static/index/sanjiao.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="[2==chooseCondition?'dl-focus dl-search-box':'dl-search-box']" @click="choosePlat(2)"
|
||||
:key="chooseCondition">
|
||||
<text>筛选</text>
|
||||
<view class="image-box">
|
||||
<image v-if="2==chooseCondition" class="dl-icon" src="@/static/index/shang.png" mode="aspectFit">
|
||||
</image>
|
||||
<image v-else class="dl-icon" src="@/static/index/sanjiao.png" mode="aspectFit"></image>
|
||||
<image class="dl-vip" src="@/static/index/vip.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 主体内容区域 -->
|
||||
<view class="dl-body">
|
||||
<!-- 会员开通 -->
|
||||
<view class="dl-member-box">
|
||||
<view class="dl-left">
|
||||
<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
|
||||
<text>开通会员 解锁更多权益</text>
|
||||
</view>
|
||||
<view class="dl-right">
|
||||
<image class="dl-go-view" src="@/static/index/go-view.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 通告列表 -->
|
||||
<view class="dl-item-box">
|
||||
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
|
||||
@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
|
||||
<notice-item v-if="dataList.length>0" :dataList="dataList" @goDetail="goDetail()"></notice-item>
|
||||
<view style="text-align: center" v-if="dataList.length==0">
|
||||
<image class="" src="@/static/images/nothing.png"></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右侧抽屉 -->
|
||||
<uni-drawer ref="showRight" mode="right" :mask-click="true" @change="change($event)" width="160">
|
||||
<view class="scroll-view">
|
||||
<scroll-view class="scroll-view-box" scroll-y="true">
|
||||
<view class="info-content" @click="confirmItem(null)">
|
||||
<image v-show="0==chooseCondition" class="image" :src="'/static/platform/xiaohongshu.png'"
|
||||
mode="aspectFit"></image>
|
||||
<view class="title">不限</view>
|
||||
</view>
|
||||
<view v-show="0==chooseCondition" class="info-content" v-for="(item,index) in platformList"
|
||||
@click="confirmItem(item)" :key="index">
|
||||
<image class="image" :src="'/static/platform/'+item.code+'.png'" mode="aspectFit"></image>
|
||||
<view class="title">{{item.title}}</view>
|
||||
</view>
|
||||
<view v-show="1==chooseCondition" class="info-content" v-for="(item,index) in bloggerTypeList"
|
||||
@click="confirmItem(item)" :key="index">
|
||||
<view class="title">{{item.title}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
<!-- 右侧抽屉 -->
|
||||
<uni-drawer ref="showRight2" mode="right" :mask-click="true" @change="change($event)" width="260">
|
||||
<view class="scroll-view">
|
||||
<scroll-view class="scroll-view-box" scroll-y="true">
|
||||
<view style="padding: 20rpx 30rpx;">
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">粉丝量要求</view>
|
||||
<view class="dl-drawer-item">
|
||||
<input class="uni-input" v-model="queryParams.fansDown" type="digit"
|
||||
placeholder="最低" />
|
||||
<view>—</view>
|
||||
<input class="uni-input" v-model="queryParams.fansUp" type="digit"
|
||||
placeholder="最高" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">奖励类型</view>
|
||||
<view class="dl-drawer-item">
|
||||
<view
|
||||
:class="[''==queryParams.rewardType?'dl-focus dl-reward-type':'dl-reward-type']"
|
||||
@click="chooseRewardType('')">不限</view>
|
||||
<view
|
||||
:class="['money'==queryParams.rewardType?'dl-focus dl-reward-type':'dl-reward-type']"
|
||||
@click="chooseRewardType('money')">稿费
|
||||
</view>
|
||||
<view
|
||||
:class="['gift'==queryParams.rewardType?'dl-focus dl-reward-type':'dl-reward-type']"
|
||||
@click="chooseRewardType('gift')">赠品
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">稿费要求</view>
|
||||
<view class="dl-drawer-item">
|
||||
<input class="uni-input" v-model="queryParams.feeDown" type="digit"
|
||||
placeholder="最低" />
|
||||
<view>—</view>
|
||||
<input class="uni-input" v-model="queryParams.feeUp" type="digit"
|
||||
placeholder="最高" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;margin-top: 10rpx;">
|
||||
<button class="mini-btn" type="default" size="mini" @click="reset()">重置</button>
|
||||
<button class="mini-btn" type="warn" size="mini"
|
||||
@click="onRefresherrefresh()">应用</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
<!-- 普通弹窗 -->
|
||||
<uni-popup ref="popup" background-color="#fff" @change="change">
|
||||
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
|
||||
class="text">popup 内容</text></view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import noticeItem from '@/pages/components/notice-item.vue'
|
||||
import rightsCode from '@/utils/rightsCode'
|
||||
import {
|
||||
getCatgByCode
|
||||
} from '@/api/system/config.js'
|
||||
import {
|
||||
toast,
|
||||
hasRights
|
||||
} from '@/utils/common.js'
|
||||
import {
|
||||
getNoticeList
|
||||
} from '@/api/business/notice.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
noticeItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menus: ['全部', '最新', '高奖励', '品牌置换'],
|
||||
menuIndex: 0,
|
||||
dataList: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
//排序方式:new-最新；money-高奖励；
|
||||
sortBy: "",
|
||||
//品牌置换--只要有值代表查品牌置换
|
||||
gift: "",
|
||||
platformCode: "",
|
||||
platformName: "平台",
|
||||
bloggerType: "",
|
||||
bloggerTypeName: "领域",
|
||||
//搜索的文字
|
||||
searchValue: "",
|
||||
//奖励类型选中值:""-不限 | money-稿费 | gift-赠品
|
||||
rewardType: "",
|
||||
//粉丝量要求
|
||||
fansUp: null,
|
||||
fansDown: null,
|
||||
//稿费要求
|
||||
feeUp: null,
|
||||
feeDown: null,
|
||||
},
|
||||
//是否显示搜索框
|
||||
showSearch: false,
|
||||
//当前焦点
|
||||
chooseCondition: 9,
|
||||
total: 0,
|
||||
//下来刷新状态
|
||||
isTriggered: false,
|
||||
//平台列表
|
||||
platformList: [],
|
||||
//博主分类
|
||||
bloggerTypeList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initData("dl_platform", "platformList")
|
||||
this.initData("dl_blogger_type", "bloggerTypeList")
|
||||
this.selectDataList()
|
||||
},
|
||||
onLoad: function() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 初始化数据
|
||||
* @param {Object} code
|
||||
* @param {Object} dataObj
|
||||
*/
|
||||
initData(code, dataObj) {
|
||||
let that = this
|
||||
getCatgByCode({
|
||||
code: code
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this[dataObj] = res.data
|
||||
}
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 确认选择的条目
|
||||
* @param {Object} item
|
||||
*/
|
||||
confirmItem(item) {
|
||||
if (0 == this.chooseCondition) {
|
||||
//选择平台
|
||||
if (null == item) {
|
||||
this.queryParams.platformCode = ""
|
||||
this.queryParams.platformName = "平台"
|
||||
} else {
|
||||
this.queryParams.platformCode = item.code
|
||||
this.queryParams.platformName = item.title
|
||||
}
|
||||
} else if (1 == this.chooseCondition) {
|
||||
//选择领域
|
||||
if (null == item) {
|
||||
this.queryParams.bloggerType = ""
|
||||
this.queryParams.bloggerTypeName = "领域"
|
||||
} else {
|
||||
this.queryParams.bloggerType = item.code
|
||||
this.queryParams.bloggerTypeName = item.title
|
||||
}
|
||||
}
|
||||
this.onRefresherrefresh()
|
||||
this.closeDrawer()
|
||||
},
|
||||
toggle(type) {
|
||||
this.type = type
|
||||
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
||||
this.$refs.popup.open(type)
|
||||
},
|
||||
/**
|
||||
* 选择平台
|
||||
*/
|
||||
choosePlat(index) {
|
||||
if (index == 2) {
|
||||
//鉴权
|
||||
if (!this.checkIfHasRights(rightsCode.subscribeSelect)) {
|
||||
return
|
||||
}
|
||||
this.$refs.showRight2.open()
|
||||
} else {
|
||||
this.$refs.showRight.open()
|
||||
}
|
||||
this.chooseCondition = index
|
||||
},
|
||||
/**
|
||||
* 选择奖励类型
|
||||
* @param {Object} value
|
||||
*/
|
||||
chooseRewardType(value) {
|
||||
this.queryParams.rewardType = value
|
||||
},
|
||||
/**
|
||||
* 重置筛选条件
|
||||
*/
|
||||
reset() {
|
||||
this.queryParams.rewardType = ""
|
||||
this.queryParams.feeUp = null
|
||||
this.queryParams.feeDown = null
|
||||
this.queryParams.fansDown = null
|
||||
this.queryParams.fansUp = null
|
||||
},
|
||||
// 关闭窗口
|
||||
closeDrawer(e) {
|
||||
this.chooseCondition = 9
|
||||
this.$refs.showRight.close()
|
||||
this.$refs.showRight2.close()
|
||||
},
|
||||
// 抽屉状态发生变化触发
|
||||
change(e) {
|
||||
if (!e) {
|
||||
//抽屉关闭
|
||||
this.chooseCondition = 9
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 菜单点击
|
||||
* @param {Object} index
|
||||
* @param {Object} item
|
||||
*/
|
||||
itemClick(index, item) {
|
||||
if ('全部' == item) {
|
||||
//全部
|
||||
this.queryParams.sortBy = ""
|
||||
this.queryParams.gift = ""
|
||||
} else if ('最新' == item) {
|
||||
//最新
|
||||
//鉴权
|
||||
if (!this.checkIfHasRights(rightsCode.highNewNotice)) {
|
||||
return
|
||||
}
|
||||
this.queryParams.sortBy = "new"
|
||||
} else if ('高奖励' == item) {
|
||||
//高奖励
|
||||
if (!this.checkIfHasRights(rightsCode.highNewNotice)) {
|
||||
return
|
||||
}
|
||||
this.queryParams.sortBy = "money"
|
||||
} else if ('品牌置换' == item) {
|
||||
//品牌置换
|
||||
this.queryParams.gift = "gift"
|
||||
}
|
||||
this.menuIndex = index
|
||||
this.onRefresherrefresh()
|
||||
},
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
goSeach() {
|
||||
//鉴权
|
||||
if (!this.checkIfHasRights(rightsCode.searchNotice)) {
|
||||
return
|
||||
}
|
||||
this.showSearch = true
|
||||
},
|
||||
/**
|
||||
* 鉴权通用方法
|
||||
* @param {Object} rigthsCode
|
||||
*/
|
||||
checkIfHasRights(rigthsCode) {
|
||||
if (!hasRights(rigthsCode)) {
|
||||
toast("请开通会员")
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
/**
|
||||
* 上滑加载数据
|
||||
*/
|
||||
onReachBottomCus() {
|
||||
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
||||
if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
|
||||
toast("没有更多数据了")
|
||||
return
|
||||
}
|
||||
//页码+1,调用获取数据的方法获取第二页数据
|
||||
this.queryParams.pageNum++
|
||||
this.selectDataList()
|
||||
},
|
||||
/**
|
||||
* 下拉刷新数据
|
||||
*/
|
||||
onRefresherrefresh() {
|
||||
this.isTriggered = true
|
||||
this.queryParams.pageNum = 1
|
||||
this.total = 0
|
||||
this.closeDrawer()
|
||||
this.selectDataList()
|
||||
},
|
||||
/**
|
||||
* 文本搜索
|
||||
* @param {Object} res
|
||||
*/
|
||||
search(res) {
|
||||
this.queryParams.searchValue = res.value
|
||||
this.onRefresherrefresh()
|
||||
},
|
||||
/**
|
||||
* 清空搜索
|
||||
*/
|
||||
clear() {
|
||||
this.queryParams.searchValue = ""
|
||||
this.onRefresherrefresh()
|
||||
},
|
||||
/**
|
||||
* 查询数据
|
||||
*/
|
||||
selectDataList() {
|
||||
getNoticeList(this.queryParams).then(res => {
|
||||
this.isTriggered = false
|
||||
if (res.code == 200) {
|
||||
if (this.queryParams.pageNum == 1) {
|
||||
this.dataList = res.data.records
|
||||
} else {
|
||||
this.dataList = this.dataList.concat(res.data.records)
|
||||
}
|
||||
}
|
||||
}).catch((e) => {
|
||||
this.isTriggered = false
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 查看通告详情
|
||||
* @param {Object} item
|
||||
*/
|
||||
goDetail(item) {
|
||||
this.$tab.navigateTo(`/pages/notice/detail?id=${item.id}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@mixin flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.dl-notice-box-index {
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
background-color: white;
|
||||
font-size: 38rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.dl-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 55rpx 10rpx 0 15rpx;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
|
||||
|
||||
.left-search {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
position: relative;
|
||||
|
||||
.dl-image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.dl-vip {
|
||||
position: absolute;
|
||||
height: 25rpx;
|
||||
top: -10rpx;
|
||||
right: -22px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-text {
|
||||
transition: 1s;
|
||||
|
||||
.dl-text {
|
||||
line-height: 78rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dl-menu-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.dl-menu {
|
||||
flex-grow: 1;
|
||||
font-size: 30rpx;
|
||||
margin: 0 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.click {
|
||||
color: #FF434E;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #FF434E;
|
||||
}
|
||||
|
||||
.dl-search-box {
|
||||
border: 1rpx solid rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
font-size: 30rpx;
|
||||
margin: 0 15rpx;
|
||||
padding: 15rpx 25rpx;
|
||||
background-color: #F7F7F7;
|
||||
border-radius: 30rpx;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
display: flex;
|
||||
|
||||
.image-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dl-icon {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.dl-vip {
|
||||
position: absolute;
|
||||
width: 50rpx;
|
||||
height: 25rpx;
|
||||
top: -16rpx;
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dl-body {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #EEEEEE;
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
|
||||
.dl-member-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 35rpx;
|
||||
justify-content: center;
|
||||
height: 120rpx;
|
||||
width: 100%;
|
||||
background: url('/static/index/member-bg.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
/* 图片居中显示 */
|
||||
background-repeat: no-repeat;
|
||||
/* 不重复背景图片 */
|
||||
|
||||
.dl-left {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding-left: 30rpx;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
color: #623109;
|
||||
justify-content: left;
|
||||
|
||||
.dl-icon {
|
||||
width: 60rpx;
|
||||
height: 56rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.dl-right {
|
||||
.dl-go-view {
|
||||
width: 190rpx;
|
||||
float: right;
|
||||
height: 76rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dl-item-box {
|
||||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 571rpx);
|
||||
isplay: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
flex: 1
|
||||
}
|
||||
|
||||
// 处理抽屉内容滚动
|
||||
.scroll-view-box {
|
||||
flex: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: calc(var(--status-bar-height) + 100rpx);
|
||||
padding-bottom: 100rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
justify-content: center;
|
||||
|
||||
.image {
|
||||
flex: none;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
padding-left: 15rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.dl-focus {
|
||||
border: 1rpx solid RGBA(255, 175, 179, 1) !important;
|
||||
background-color: RGBA(255, 175, 179, 0.3) !important;
|
||||
color: #FF434E !important;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-popup {
|
||||
top: 370rpx !important;
|
||||
}
|
||||
|
||||
.vue-ref {
|
||||
top: 370rpx !important;
|
||||
}
|
||||
|
||||
.dl-drawer-item {
|
||||
display: flex;
|
||||
color: #929292;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
input {
|
||||
border: 1rpx solid #F4F4F4;
|
||||
border-radius: 15rpx;
|
||||
color: #929292;
|
||||
padding: 5rpx 10rpx;
|
||||
margin: 10rpx 0;
|
||||
text-align: center;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.dl-reward-type {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
border: 1rpx solid #F4F4F4;
|
||||
color: #929292;
|
||||
border-radius: 15rpx;
|
||||
padding: 10rpx 25rpx;
|
||||
margin: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
pages/components/subscribe.vue
Normal file
107
pages/components/subscribe.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<view class="dingyue-box">
|
||||
<!-- 标题 -->
|
||||
<view class="dl-title">
|
||||
订阅
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="dl-opt-box">
|
||||
<view class="dl-menu-box">
|
||||
<view v-for="(item,index) in menus" @click="itemClick(index,item)" class="dl-menu"
|
||||
:class="index==menuIndex?'dl-menu click':'dl-menu'">{{item}}</view>
|
||||
</view>
|
||||
<view class="seting">
|
||||
设置
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menus: ['订阅', '关注'],
|
||||
menuIndex: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 菜单点击
|
||||
* @param {Object} index
|
||||
* @param {Object} item
|
||||
*/
|
||||
itemClick(index, item) {
|
||||
if ('订阅' == item) {
|
||||
//全部
|
||||
} else if ('关注' == item) {
|
||||
//关注
|
||||
}
|
||||
this.menuIndex = index
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.dingyue-box {
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
background-color: white;
|
||||
font-size: 30rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.dl-title {
|
||||
font-size: 38rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
padding: 55rpx 0 25rpx 0;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
}
|
||||
|
||||
.dl-opt-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.dl-menu-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: initial;
|
||||
width: 100%;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.dl-menu {
|
||||
width: 100rpx;
|
||||
font-size: 30rpx;
|
||||
margin: 0 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.click {
|
||||
color: #FF434E;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #FF434E;
|
||||
}
|
||||
}
|
||||
|
||||
.seting {
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
align-items: self-end;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
800
pages/notice/detail.vue
Normal file
800
pages/notice/detail.vue
Normal file
@ -0,0 +1,800 @@
|
||||
<template>
|
||||
<view class="dl-detail-box">
|
||||
<!-- 博主信息 -->
|
||||
<view class="info-box">
|
||||
<image class="image" :src="userDetail.avatar?imageUrl+userDetail.avatar :'/static/images/profile.jpg'"
|
||||
mode="aspectFit"></image>
|
||||
<view class="name-info">
|
||||
<view class="name">{{userDetail.nickName}}</view>
|
||||
<view class="text">{{userDetail.identityType}}</view>
|
||||
</view>
|
||||
<view class="fork-info">
|
||||
<view class="up-box">
|
||||
<view class="item-dom-guanzhu" v-if="!isLove" @click="forkUser('1')">关注</view>
|
||||
<view class="item-dom-yiguanzhu" v-if="isLove" @click="forkUser('0')">已关注</view>
|
||||
<view class="item-dom-zhuye">主页</view>
|
||||
</view>
|
||||
<view class="down-box">举报</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 通告信息 -->
|
||||
<view class="info-box notice-main">
|
||||
<view class="dl-notice-title">
|
||||
<image class="dl-image" :src="'/static/platform/'+platformCode+'.png'" mode="aspectFit"></image>
|
||||
<view class="dl-text">{{noticeDetail.title}}</view>
|
||||
</view>
|
||||
<view class="end-time">截止日期：{{noticeDetail.endDate}}</view>
|
||||
<view class="field-box">
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
奖励：
|
||||
</view>
|
||||
<view class="dl-value">
|
||||
<text v-if="null==noticeDetail.feeUp">无稿费</text>
|
||||
<text v-else>¥{{noticeDetail.feeDown}}-{{noticeDetail.feeUp}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
招募名额：
|
||||
</view>
|
||||
<view class="dl-value">{{noticeDetail.needNum}}人 </view>
|
||||
</view>
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
产品品牌：
|
||||
</view>
|
||||
<view class="dl-value">{{noticeDetail.brand}} </view>
|
||||
</view>
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
粉丝要求：
|
||||
</view>
|
||||
<view class="dl-value">
|
||||
{{formatNumberWithUnits(noticeDetail.fansDown)}}-{{formatNumberWithUnits(noticeDetail.fansUp)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
地区要求：
|
||||
</view>
|
||||
<view class="dl-value">{{noticeDetail.city}} </view>
|
||||
</view>
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
博主类型：
|
||||
</view>
|
||||
<view class="dl-value">{{noticeDetail.bloggerTypes}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-box">
|
||||
<text class="update-text">{{calculateTimeDifference(noticeDetail.updateTime)}}更新</text>
|
||||
<text class="view-text">{{noticeDetail.viewNum}} 阅读</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 通告详情 -->
|
||||
<view class="info-box notice-detail">
|
||||
<view class="detail-title">通告详情</view>
|
||||
<view class="detail-content">
|
||||
<rich-text style="width: 100%" :nodes="noticeDetail.detail" />
|
||||
</view>
|
||||
<view class="detail-images">
|
||||
<image v-for="(item,index) in noticeDetail.imageArray" :src="imageUrl+item" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 联系方式 -->
|
||||
<view class="info-box notice-detail">
|
||||
<view class="detail-title">联系方式</view>
|
||||
<view class="field-box">
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
联系人：
|
||||
</view>
|
||||
<view class="dl-value">报名后可查看 </view>
|
||||
</view>
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
微信号：
|
||||
</view>
|
||||
<view class="dl-value">报名后可查看 </view>
|
||||
</view>
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
微信二维码：
|
||||
</view>
|
||||
<view class="dl-value">报名后可查看 </view>
|
||||
</view>
|
||||
<view class="dl-item">
|
||||
<view class="dl-label">
|
||||
加入通告二维码：
|
||||
</view>
|
||||
<view class="dl-value">报名后可查看 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 报名列表 -->
|
||||
<view class="info-box notice-detail">
|
||||
<view class="detail-title">收到报名：{{imageArray.length}}人</view>
|
||||
<view class="image-box" v-if="imageArray.length>0"
|
||||
:style="{height:(imageArray.length*(imageWidth+10)+20)+'rpx'}">
|
||||
<view class="image-row" v-for="(row,rowIndex) in imageArray">
|
||||
<image v-for="(item,i) in row"
|
||||
:style="{ top:(imageWidth+10)*rowIndex+'rpx',left:imageWidth*i+'rpx'}"
|
||||
src="@/static/images/profile.jpg" mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 去报名，始终浮动下方 -->
|
||||
<view class="dl-bottom-box" v-show="showBottom">
|
||||
<!-- 报名 -->
|
||||
<view class="report-box" v-if="null==userInfo || noticeDetail.userId!=userInfo.userId">
|
||||
<view @click="goHome()">
|
||||
<image src="@/static/detail/home.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view @click="shareFun()">
|
||||
<image src="@/static/detail/share.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view v-if="null==userInfo" class="join-report">请登录后报名</view>
|
||||
<view v-else-if="ifBz" class="join-report">报名参加</view>
|
||||
<view v-else class="join-report" @click="changeUserType()">切换博主后报名</view>
|
||||
</view>
|
||||
<!-- 通告发布人能操作的 -->
|
||||
<view class="report-box" v-if="null!=userInfo && userInfo.userId==noticeDetail.userId">
|
||||
<view v-if="'0'==noticeDetail.approvalStatus" class="close-notice">关闭</view>
|
||||
<view v-if="'0'==noticeDetail.approvalStatus" class="waiting-approval">
|
||||
<view>审核中</view>
|
||||
<image @click="useCoupon()" src="@/static/detail/approval.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view v-if="'2'==noticeDetail.approvalStatus" class="waiting-approval">已关闭</view>
|
||||
<view v-if="'1'==noticeDetail.approvalStatus" class="waiting-approval" @click="closeNotice('2')">关闭
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 提示窗示例 -->
|
||||
<uni-popup ref="alertDialog" type="dialog">
|
||||
<uni-popup-dialog cancelText="取消" confirmText="创建" iconPath="/static/detail/card.png"
|
||||
content="没有符合粉丝要求的名片,无法报名" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
<!-- 分享示例 -->
|
||||
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
|
||||
<uni-popup-share @select="selectShare()"></uni-popup-share>
|
||||
</uni-popup>
|
||||
<!-- 海报 -->
|
||||
<shareImages ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :shareTitle="shareTitle"
|
||||
:goodsTitle="goodsTitle" :shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl"
|
||||
@success="shareSuccess()" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas';
|
||||
import shareImages from '@/components/hj-placard/shareImages.vue'
|
||||
import constant from '@/utils/constant';
|
||||
import {
|
||||
changeUserType,
|
||||
getUserType,
|
||||
formatNumberWithUnits,
|
||||
calculateTimeDifference
|
||||
} from '@/utils/common.js'
|
||||
import {
|
||||
getJSONData
|
||||
} from '@/utils/auth.js'
|
||||
import {
|
||||
getNoticeDetail,
|
||||
addView,
|
||||
closeNotice
|
||||
} from '@/api/business/notice';
|
||||
import {
|
||||
postForkUser
|
||||
} from '@/api/business/base.js'
|
||||
import config from '@/config'
|
||||
export default {
|
||||
components: {
|
||||
shareImages
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//通告ID
|
||||
noticeId: null,
|
||||
imageUrl: config.baseUrl,
|
||||
//是否显示下方操作按钮--刚开始不显示
|
||||
showBottom: false,
|
||||
//当前用户
|
||||
userInfo: null,
|
||||
//报名的头像数组
|
||||
imageArray: [
|
||||
|
||||
],
|
||||
//每张图片的宽度rpx--堆叠后的宽度
|
||||
imageWidth: 70,
|
||||
//默认博主
|
||||
ifBz: true,
|
||||
//当前用户是否关注该博主
|
||||
isLove: false,
|
||||
//当前用户是否已报名该通告
|
||||
isSign: false,
|
||||
//通告主详情
|
||||
userDetail: {
|
||||
avatar: '',
|
||||
identityType: "未认证",
|
||||
nickName: "",
|
||||
userId: null
|
||||
},
|
||||
//通告详情
|
||||
noticeDetail: {
|
||||
id: "",
|
||||
title: "",
|
||||
endDate: null,
|
||||
feeDown: null,
|
||||
feeUp: null,
|
||||
needNum: null,
|
||||
userId: null,
|
||||
brand: null,
|
||||
fansDown: null,
|
||||
fansUp: null,
|
||||
city: null,
|
||||
bloggerTypes: null,
|
||||
updateTime: null,
|
||||
approvalStatus: '0',
|
||||
viewNum: 0,
|
||||
detail: null,
|
||||
platformCode: "",
|
||||
platformName: "",
|
||||
//通告产品图
|
||||
imageArray: []
|
||||
},
|
||||
canvasImages: '',
|
||||
canvasWidth: 375, // 宽度
|
||||
canvasHeight: 500, // 高度
|
||||
shareTitle: '我是这张图片的标题', // 分享标题
|
||||
goodsTitle: '我是这张图片的标题我是这张图片的标题我是这张图片的标', // 商品宣传标题
|
||||
shareImage: '/static/bg.jpg', // 背景图片
|
||||
qrSize: 100, // 二维码大小
|
||||
qrUrl: 'https://ext.dcloud.net.cn/plugin?id=5747', // 生成二维码的链接
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.calculateImagesPerRow();
|
||||
//通知
|
||||
this.checkUserType()
|
||||
this.showBottom = true
|
||||
// this.$refs.alertDialog.open()
|
||||
},
|
||||
onLoad(params) {
|
||||
this.noticeId = params.id
|
||||
if (null != getJSONData(constant.userInfo)) {
|
||||
this.userInfo = getJSONData(constant.userInfo)
|
||||
}
|
||||
this.getDetail()
|
||||
this.viewNotice()
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 转换时间单位
|
||||
* @param {Object} time
|
||||
*/
|
||||
calculateTimeDifference(time) {
|
||||
return calculateTimeDifference(time)
|
||||
},
|
||||
/**
|
||||
* 数值单位转换
|
||||
* @param {Object} number
|
||||
*/
|
||||
formatNumberWithUnits(number) {
|
||||
return formatNumberWithUnits(number)
|
||||
},
|
||||
/**
|
||||
* 关闭通告
|
||||
*/
|
||||
closeNotice(status) {
|
||||
closeNotice({
|
||||
noticeId: this.noticeId,
|
||||
publishTakeDown: status
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
duration: 2000,
|
||||
title: '操作成功'
|
||||
});
|
||||
this.getDetail(this.noticeId)
|
||||
}
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 关注、取消关注
|
||||
* @param {Object} isLove
|
||||
*/
|
||||
forkUser(isLove) {
|
||||
postForkUser({
|
||||
userId: this.noticeDetail.userId,
|
||||
isLove: isLove
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
duration: 2000,
|
||||
title: '操作成功'
|
||||
});
|
||||
this.getDetail(this.noticeId)
|
||||
}
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 查通告详情
|
||||
*/
|
||||
getDetail() {
|
||||
getNoticeDetail({
|
||||
noticeId: this.noticeId
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.noticeDetail = res.data.noticeDetail
|
||||
this.userDetail = res.data.userDetail
|
||||
this.imageArray = res.data.signUserAvatarList
|
||||
this.isLove = res.data.isLove
|
||||
this.isSign = res.data.isSign
|
||||
if (this.noticeDetail.images) {
|
||||
this.noticeDetail.imageArray = this.noticeDetail.images.split(",")
|
||||
}
|
||||
}
|
||||
}).catch((e) => {
|
||||
this.isTriggered = false
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 浏览通告
|
||||
*/
|
||||
viewNotice() {
|
||||
let userId = null
|
||||
if (null != this.userInfo) {
|
||||
userId = this.userInfo.userId
|
||||
}
|
||||
addView({
|
||||
noticeId: this.noticeId,
|
||||
userId: userId
|
||||
}).then(res => {
|
||||
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
// 回调图片地址
|
||||
shareSuccess(e) {
|
||||
// console.log('地址',e)
|
||||
this.canvasImages = e
|
||||
uni.previewImage({
|
||||
urls: [this.canvasImages],
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 分享点击事件
|
||||
* @param {Object} item
|
||||
* @param {Object} index
|
||||
*/
|
||||
selectShare(dataObj) {
|
||||
if ('hb' == dataObj.item.name) {
|
||||
//海报
|
||||
this.$refs.canvas.canvasCreate();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 微信分享
|
||||
* @param {Object} res
|
||||
*/
|
||||
onShareAppMessage(res) {
|
||||
if (res.from === 'button') { // 来自页面内分享按钮
|
||||
console.log(res.target)
|
||||
}
|
||||
return {
|
||||
title: '【' + this.noticeDetail.platformName + '】' + this.noticeDetail.title,
|
||||
path: '/pages/notice/detail?id=' + this.noticeDetail.id
|
||||
}
|
||||
},
|
||||
dialogConfirm() {
|
||||
console.log('点击确认')
|
||||
},
|
||||
dialogClose() {
|
||||
console.log('点击关闭')
|
||||
},
|
||||
/**
|
||||
* 去首页
|
||||
*/
|
||||
goHome() {
|
||||
this.$tab.reLaunch('/pages/index')
|
||||
},
|
||||
/**
|
||||
* 分享
|
||||
*/
|
||||
shareFun() {
|
||||
this.$refs.share.open()
|
||||
},
|
||||
/**
|
||||
* 使用通告券加速
|
||||
*/
|
||||
useCoupon() {
|
||||
|
||||
},
|
||||
/**
|
||||
* 计算头像显示区域高度
|
||||
*/
|
||||
calculateImagesPerRow() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
//1rpx 转换px 的单位
|
||||
let rpxUnit = (systemInfo.screenWidth / 750)
|
||||
// 显示头像区域的宽度--去掉多余的空间-px
|
||||
let screenWidth = systemInfo.screenWidth - (86 * rpxUnit)
|
||||
// 每张图片的宽度px
|
||||
let imageWidthPx = this.imageWidth * rpxUnit;
|
||||
//每行可以显示多少张图片
|
||||
let imagesPerRow = Math.floor(screenWidth / imageWidthPx);
|
||||
//设置测试数据
|
||||
let thisArray = []
|
||||
for (var i = 0; i < 50; i++) {
|
||||
thisArray.push('/static/images/profile.jpg')
|
||||
}
|
||||
for (let i = 0; i < thisArray.length; i += imagesPerRow) {
|
||||
this.imageArray.push(thisArray.slice(i, i + imagesPerRow));
|
||||
}
|
||||
console.log(this.imageArray, "imageArray")
|
||||
},
|
||||
/**
|
||||
* 判断用户类型
|
||||
*/
|
||||
checkUserType() {
|
||||
let userType = getUserType()
|
||||
if (constant.bz != userType) {
|
||||
//不是博主
|
||||
this.ifBz = false
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 切换当前用户类型为博主
|
||||
*/
|
||||
changeUserType() {
|
||||
this.ifBz = true
|
||||
changeUserType(constant.bz)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.dl-detail-box {
|
||||
padding: 20rpx 25rpx 130rpx 25rpx;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 30rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.info-box {
|
||||
width: 100%;
|
||||
padding: 28rpx;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
border-radius: 30rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 25rpx;
|
||||
|
||||
.image {
|
||||
flex: none;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
width: calc(100% - 350rpx);
|
||||
flex: 1;
|
||||
padding-left: 30rpx;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
|
||||
.fork-info {
|
||||
flex: none;
|
||||
width: 250rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.up-box {
|
||||
padding-bottom: 5rpx;
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
padding-left: 10rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.item-dom-guanzhu {
|
||||
padding: 5rpx 22rpx;
|
||||
border-radius: 20rpx;
|
||||
color: white;
|
||||
background-color: #FC1F3E;
|
||||
}
|
||||
|
||||
.item-dom-yiguanzhu {
|
||||
padding: 5rpx 22rpx;
|
||||
border: 1rpx solid #FC1F3E;
|
||||
border-radius: 20rpx;
|
||||
color: #FC1F3E;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.item-dom-zhuye {
|
||||
margin-left: 15rpx;
|
||||
padding: 5rpx 22rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
}
|
||||
|
||||
.down-box {
|
||||
padding-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.notice-main {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
.dl-notice-title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-bottom: 10rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.dl-image {
|
||||
flex: none;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.dl-text {
|
||||
margin-left: 10rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.end-time {
|
||||
border-radius: 15rpx;
|
||||
background-color: #FFF4F5;
|
||||
padding: 8rpx 20rpx;
|
||||
color: #FC1F3E;
|
||||
}
|
||||
|
||||
.field-box {
|
||||
margin: 20rpx 0;
|
||||
padding: 25rpx 20rpx;
|
||||
background-color: #FAFAFA;
|
||||
border-radius: 15rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
.dl-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.dl-label {}
|
||||
|
||||
.dl-value {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
width: 100%;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
padding: 25rpx 30rpx 5rpx 30rpx;
|
||||
color: #929292;
|
||||
font-size: 24rpx;
|
||||
|
||||
.update-text {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.view-text {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
.detail-title {
|
||||
border-left: 8rpx solid #FC1F3E;
|
||||
font-weight: bold;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
}
|
||||
|
||||
.detail-images {
|
||||
width: 100%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.field-box {
|
||||
margin-top: 20rpx;
|
||||
padding-top: 10rpx;
|
||||
border-radius: 15rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
.dl-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.dl-label {}
|
||||
|
||||
.dl-value {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.image-row {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dl-bottom-box {
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
color: #363636;
|
||||
position: fixed;
|
||||
padding-bottom: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
padding-left: 40rpx;
|
||||
padding-right: 40rpx;
|
||||
bottom: 0;
|
||||
background-color: #F7F7F7;
|
||||
width: 100%;
|
||||
|
||||
.report-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.share-image {
|
||||
pointer-events: none;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
|
||||
image {
|
||||
margin-right: 25rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.join-report {
|
||||
margin-left: 20rpx;
|
||||
flex: 1;
|
||||
padding: 15rpx;
|
||||
text-align: center;
|
||||
background-color: #FC1F3E;
|
||||
border-radius: 14rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.close-notice {
|
||||
padding: 15rpx 25rpx;
|
||||
background-color: #F7F7F7;
|
||||
border: 1rpx solid #E2E2E2;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.waiting-approval {
|
||||
text-align: center;
|
||||
padding: 15rpx 25rpx;
|
||||
background-color: #E2E2E2;
|
||||
border: 1rpx solid #D1D1D1;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
margin: auto;
|
||||
left: 200rpx;
|
||||
width: 150rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
pages/work/my-notice.vue
Normal file
183
pages/work/my-notice.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 轮播图 -->
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="系统管理" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
||||
<text class="text">用户管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
||||
<text class="text">角色管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="color" size="30"></uni-icons>
|
||||
<text class="text">菜单管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
||||
<text class="text">部门管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
||||
<text class="text">岗位管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="bars" size="30"></uni-icons>
|
||||
<text class="text">字典管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
||||
<text class="text">参数设置</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
||||
<text class="text">通知公告</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
||||
<text class="text">日志管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperDotIndex: 0,
|
||||
data: [{
|
||||
image: '/static/images/banner/banner01.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner02.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner03.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickBannerItem(item) {
|
||||
console.info(item)
|
||||
},
|
||||
changeSwiper(e) {
|
||||
this.current = e.detail.current
|
||||
},
|
||||
changeGrid(e) {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.uni-swiper-dot-box {
|
||||
width: 400px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/images/nothing.png
Normal file
BIN
static/images/nothing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
static/index/shang.png
Normal file
BIN
static/index/shang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 B |
BIN
static/mine/change_role.png
Normal file
BIN
static/mine/change_role.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/mine/dizhi.png
Normal file
BIN
static/mine/dizhi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
static/mine/fans.png
Normal file
BIN
static/mine/fans.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 707 B |
BIN
static/mine/gognzhonghao.png
Normal file
BIN
static/mine/gognzhonghao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
static/mine/jairushequ.png
Normal file
BIN
static/mine/jairushequ.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/mine/kefu.png
Normal file
BIN
static/mine/kefu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/mine/mingpian.png
Normal file
BIN
static/mine/mingpian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/mine/sex_girl.png
Normal file
BIN
static/mine/sex_girl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/mine/shezhi.png
Normal file
BIN
static/mine/shezhi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
static/mine/tongyong.png
Normal file
BIN
static/mine/tongyong.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/mine/xinrenshouce.png
Normal file
BIN
static/mine/xinrenshouce.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 764 B |
BIN
static/mine/yijianfankui.png
Normal file
BIN
static/mine/yijianfankui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/mine/zuji.png
Normal file
BIN
static/mine/zuji.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
29
utils/rightsCode.js
Normal file
29
utils/rightsCode.js
Normal file
@ -0,0 +1,29 @@
|
||||
const rightsCode = {
|
||||
//每日报名上线
|
||||
report: 'report',
|
||||
//足迹
|
||||
history: 'history',
|
||||
//通告搜索
|
||||
searchNotice: 'search_notice',
|
||||
//积分翻倍
|
||||
doublePoints: 'double_points',
|
||||
//曝光增加
|
||||
moreExposure: 'more_exposure',
|
||||
//新增通告额度
|
||||
addNotice: 'add_notice',
|
||||
//超级报名
|
||||
superReport: 'super_report',
|
||||
//高奖励&最新通告
|
||||
highNewNotice: 'high_new_notice',
|
||||
//筛选探店城市
|
||||
selectCity: 'select_city',
|
||||
//多名片报名特权
|
||||
manyCardReport: 'many_card_report',
|
||||
//通告订阅&筛选
|
||||
subscribeSelect: 'subscribe_select',
|
||||
//每日解锁通告上限
|
||||
unlockNotice: 'unlockNotice',
|
||||
//报名信息收集
|
||||
reportInfoCollect: 'report_info_collect'
|
||||
}
|
||||
export default rightsCode
|
||||
Loading…
Reference in New Issue
Block a user