Skip to content

brandEventLibraryMiniProgram
brandEventLibraryMiniProgram
Commit 9d0575cf by LinChengbiao
Options

前端页面完成

parent cef8e82d
Showing with 2202 additions and 88 deletions
README.md
<img src="./README_STATIC/login_bg_1.png" width="60%">
## 品牌事件库 for Mini Program ## 品牌事件库 for Mini Program
该项目为 `品牌事件库` 的小程序版本，项目使用 `wepy` 框架开发，如果没有使用过，建议去[github.com](https://github.com/Tencent/wepy)看看，并且还需要一定vue基础。 该项目为 `品牌事件库` 的小程序版本，项目使用 `wepy` 框架开发，如果没有使用过，建议去[github.com](https://github.com/Tencent/wepy)看看，并且还需要一定vue基础。
...@@ -65,12 +67,19 @@ ...@@ -65,12 +67,19 @@
* 例子： `src` 下放入图片 `a.jpg` , 编译后 `dist` 目录下拷贝(生成) `a.jpg`，将 `src/a.jpg` 改为 `src/b.jpg` 后， `dist` 目录下同时有 `a.jpg` 和 `b.jpg` * 例子： `src` 下放入图片 `a.jpg` , 编译后 `dist` 目录下拷贝(生成) `a.jpg`，将 `src/a.jpg` 改为 `src/b.jpg` 后， `dist` 目录下同时有 `a.jpg` 和 `b.jpg`
* 这个坑点常常会导致一些莫名其妙的bug，解决方法： 先 `npmr run clean` 删除 `dist` (也可以手动删除，但是需要关闭开发工具)，然后重新 `npm run dev` 生成新的 `dist`。 * 这个坑点常常会导致一些莫名其妙的bug，解决方法： 先 `npmr run clean` 删除 `dist` (也可以手动删除，但是需要关闭开发工具)，然后重新 `npm run dev` 生成新的 `dist`。
* 提交代码之前需要 `npm run build` 一次。 * 提交代码之前需要 `npm run build` 一次。
* 有时候运行时没报错， `npm run build` 完反而报错了，这种情况，再次执行 `npm run build` 就行了。
* **真机调试坑点** * **真机调试坑点**
* 如果发现某一个元素内文字一直是首行缩进(非 `text-indent` 情况)可以尝试把元素内的内容写成一行： * 如果发现某一个元素内文字一直是首行缩进(非 `text-indent` 情况)可以尝试把元素内的内容写成一行：
![prtsc_001.png](./README_STATIC/prtsc_002.png) ![prtsc_001.png](./README_STATIC/prtsc_002.png)
![prtsc_001.png](./README_STATIC/prtsc_003.png) ![prtsc_001.png](./README_STATIC/prtsc_003.png)
* **公共样式 `_public.scss` 问题**
* 直接改好是不会生效的，这里比较麻烦
* 需要先 `npm run clean` 再 `npm run build` 或者 `npm run dev` 重新编译
* 推荐在 `app.wpy` 中测试好样式，再把样式拷进 `_public.scss` 中
* 不推荐直接写在 `app.wpy` ，因为这样显得很 **ugly** 且 **low**
--- ---
## 参考文档 ## 参考文档
...@@ -79,3 +88,8 @@ ...@@ -79,3 +88,8 @@
* [github 项目](https://github.com/Tencent/wepy) * [github 项目](https://github.com/Tencent/wepy)
* [微信小程序组件化开发框架WePY官方文档](https://tencent.github.io/wepy/document.html#/) * [微信小程序组件化开发框架WePY官方文档](https://tencent.github.io/wepy/document.html#/)
* [在wepy框架中使用echarts](https://blog.csdn.net/juzipidemimi/article/details/81807110) * [在wepy框架中使用echarts](https://blog.csdn.net/juzipidemimi/article/details/81807110)
## 开发者
* QQ：1072907338 (林)
* Vx：lcb961212 (林)
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"echarts": "^4.1.0", "echarts": "^4.1.0",
"moment": "^2.22.2",
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-actions": "^2.2.1", "redux-actions": "^2.2.1",
"redux-promise": "^0.5.3", "redux-promise": "^0.5.3",
...@@ -45,6 +46,7 @@ ...@@ -45,6 +46,7 @@
"wepy-compiler-less": "^1.3.12", "wepy-compiler-less": "^1.3.12",
"wepy-compiler-sass": "^1.3.12", "wepy-compiler-sass": "^1.3.12",
"wepy-eslint": "^1.5.3", "wepy-eslint": "^1.5.3",
"wepy-plugin-imagemin": "^1.5.3",
"wepy-plugin-uglifyjs": "^1.3.7" "wepy-plugin-uglifyjs": "^1.3.7"
} }
} }
src/app.wpy
...@@ -12,8 +12,10 @@ setStore(store) ...@@ -12,8 +12,10 @@ setStore(store)
export default class extends wepy.app { export default class extends wepy.app {
config = { config = {
pages: [ pages: [
'pages/home', 'pages/eventDetail',
'pages/login', 'pages/login',
'pages/home',
'pages/searchList',
'pages/temp' 'pages/temp'
], ],
window: { window: {
...@@ -34,34 +36,34 @@ export default class extends wepy.app { ...@@ -34,34 +36,34 @@ export default class extends wepy.app {
} }
onLaunch() { onLaunch() {
this.testAsync() // this.testAsync()
} }
sleep (s) { // sleep (s) {
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
setTimeout(() => { // setTimeout(() => {
resolve('promise resolved') // resolve('promise resolved')
}, s * 1000) // }, s * 1000)
}) // })
} // }
//
// async testAsync () {
// const data = await this.sleep(3)
// console.log(data)
// }
async testAsync () { // getUserInfo(cb) {
const data = await this.sleep(3) // const that = this
console.log(data) // if (this.globalData.userInfo) {
} // return this.globalData.userInfo
// }
getUserInfo(cb) { // wepy.getUserInfo({
const that = this // success (res) {
if (this.globalData.userInfo) { // that.globalData.userInfo = res.userInfo
return this.globalData.userInfo // cb && cb(res.userInfo)
} // }
wepy.getUserInfo({ // })
success (res) { // }
that.globalData.userInfo = res.userInfo
cb && cb(res.userInfo)
}
})
}
} }
</script> </script>
......
src/components/common/alert.wpy 0 → 100644
<template>
<view class="alertWpy popupMask {{ alertData.show ? 'active' : '' }}">
<view class="alertMain">
<view class="closeBtn" @tap="close">×</view>
<view class="main">
<view class="icon">
<image wx:if="{{ alertData.type === 'warn' }}" src="../../static/img/i_popup_warn.png" />
<image wx:if="{{ alertData.type === 'success' }}" src="../../static/img/i_popup_success.png" />
</view>
<view class="text">
<repeat for="{{ alertData.text }}" item="n" index="i" key="i">
<view class="item">{{ n }}</view>
</repeat>
</view>
</view>
<view class="closeText">
<view class="highlight">{{ countDownNum }}</view>
<view>秒钟后自动</view>
<view class="highlight btn" @tap="close">关闭</view>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class alert extends wepy.component {
props = {
alertData: {
type: Object,
default: {
show: false,
type: 'success',
text: [],
duration: 4,
callback () {}
},
twoWay: true
}
}
data = {
timer: null,
countDownNum: 4
}
onLoad () {
console.log('alert')
}
methods = {
close () {
this.alertData.show = false
this.alertData.callback()
}
}
countDown (t) {
clearTimeout(this.timer)
let loop = () => {
if (t) {
this.countDownNum = t--
this.timer = setTimeout(loop, 1000)
} else {
this.alertData.show = false
this.alertData.callback()
}
this.$apply()
}
loop()
}
computed = {
}
watch = {
alertData () {
let alt = this.alertData
alt.show && this.countDown(alt.duration)
}
}
}
</script>
<style lang="scss" scoped>
.alertWpy.popupMask{
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
&.active{
display: block;
}
.alertMain{
width: 620rpx;
min-height: 300rpx;
border-radius: 6rpx;
background-color: rgba(0, 0, 0, .7);
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
.closeBtn{
position: absolute;
width: 34rpx;
height: 34rpx;
top: 12rpx;
right: 12rpx;
}
.main{
display: flex;
justify-content: center;
font-size: 32rpx;
margin: 60rpx auto 0;
.icon{
display: flex;
max-width: 80rpx;
margin: 0 10rpx;
image{
width: 80rpx;
height: 80rpx;
margin: auto;
}
}
.text{
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.3;
margin: 0 10rpx;
.item{
display: inline-block;
}
}
}
.closeText{
display: flex;
justify-content: center;
padding: 60rpx 0 30rpx;
.highlight{
color: #F56485;
margin: 0 4rpx;
}
}
}
}
</style>
src/components/common/echart.wpy 0 → 100644
<style type="css">
.ec-canvas {
width: 100%;
height: 100%;
}
</style>
<template>
<canvas class="ec-canvas" canvas-id="ec-canvas" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
</canvas>
</template>
<script>
import wepy from 'wepy'
import WxCanvas from '@/static/plugs/ec-canvas/wx-canvas'
import * as echarts from '@/static/plugs/ec-canvas/echarts'
let ctx
export default class echart extends wepy.component {
props = {
ec: {}
}
data = {
canvasId: 'ec-canvas'
}
onLoad() {
if (!this.data.ec) {
console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' +
'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>')
return
}
if (!this.data.ec.lazyLoad) {
this.init()
}
}
initChart(canvas, width, height, option) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
chart.setOption(this.ec.option)
return chart
}
init(callback) {
const version = wepy.getSystemInfoSync().SDKVersion.split('.').map(n => parseInt(n, 10))
const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9) ||
(version[0] === 1 && version[1] === 9 && version[2] >= 91)
if (!isValid) {
console.error('微信基础库版本过低，需大于等于 1.9.91。' +
'参见：https://github.com/ecomfe/echarts-for-weixin' +
'#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82')
return
}
ctx = wepy.createCanvasContext(this.data.canvasId, this)
const canvas = new WxCanvas(ctx, this.data.canvasId)
echarts.setCanvasCreator(() => {
return canvas
})
var query = wepy.createSelectorQuery()
query.select('.ec-canvas').boundingClientRect(res => {
if (typeof callback === 'function') {
this.chart = callback(canvas, res.width, res.height)
} else if (this.data.ec) {
this.chart = this.initChart(canvas, res.width, res.height)
}
// if (typeof callback === 'function') {
// this.chart = callback(canvas, res.width, res.height)
// } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
// this.chart = this.data.ec.onInit(canvas, res.width, res.height)
// } else {
// this.triggerEvent('init', {
// canvas: canvas,
// width: res.width,
// height: res.height
// })
// }
}).exec()
}
methods = {
canvasToTempFilePath(opt) {
if (!opt.canvasId) {
opt.canvasId = this.data.canvasId
}
ctx.draw(true, () => {
wepy.canvasToTempFilePath(opt, this)
})
},
touchStart(e) {
if (!this.data.ec.disableTouch && this.chart && e.touches.length > 0) {
var touch = e.touches[0]
this.chart._zr.handler.dispatch('mousedown', {
zrX: touch.x,
zrY: touch.y
})
this.chart._zr.handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y
})
}
},
touchMove(e) {
if (!this.data.ec.disableTouch && this.chart && e.touches.length > 0) {
var touch = e.touches[0]
this.chart._zr.handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y
})
}
},
touchEnd(e) {
if (!this.data.ec.disableTouch && this.chart) {
const touch = e.changedTouches ? e.changedTouches[0] : {}
this.chart._zr.handler.dispatch('mouseup', {
zrX: touch.x,
zrY: touch.y
})
this.chart._zr.handler.dispatch('click', {
zrX: touch.x,
zrY: touch.y
})
}
}
}
watch = {
ec () {
// console.log(this.ec)
this.init()
}
}
}
</script>
src/components/common/loadMore.wpy 0 → 100644
<template>
<view class="loadMore" @tap="loadMore()">
<image src="../../static/img/i_refresh.png" /> 加载更多
</view>
</template>
<script>
import wepy from 'wepy'
export default class loadMore extends wepy.component {
onLoad () {
console.log('loadMore')
}
methods = {
loadMore () {
this.$emit('loadMoreClick')
}
}
}
</script>
<style lang="scss" scoped>
.loadMore{
height: 100rpx;
line-height: 86rpx;
border: 2rpx solid #3B4F81;
border-radius: 12rpx;
font-size: 40rpx;
background-color: #fff;
color: #3B4F81;
text-align: center;
transition: all .2s ease;
image{
display: inline-block;
width: calc(46rpx * .8);
height: calc(42rpx * .8);
position: relative;
top: 2rpx;
margin-right: 10rpx;
}
&:active{
background-color: #C1CEEA;
}
}
</style>
src/components/common/searchInput.wpy
<template> <template>
<view class="searchInputWpy"> <view class="searchInputWpy">
<input type="text" name="" value="{{searchWord}}" @input="input" /> <input type="text" name="" value="{{ searchWord }}" @input="input" />
<image src="../../static/img/i_search_clean.png" class="cleanBtn" @tap="toSearch()" wx:if="{{ !!searchWord }}" /> <image src="../../static/img/i_search_clean.png" class="cleanBtn" @tap="clean()" wx:if="{{ !!searchWord }}" />
<image src="../../static/img/i_search.png" class="searchBtn" @tap="clean()" /> <image src="../../static/img/i_search.png" class="searchBtn" @tap="toSearch()" />
</view> </view>
</template> </template>
...@@ -26,6 +26,9 @@ export default class searchInput extends wepy.component { ...@@ -26,6 +26,9 @@ export default class searchInput extends wepy.component {
toSearch () { toSearch () {
this.$emit('toSearch') this.$emit('toSearch')
}, },
clean () {
this.searchWord = ''
},
input (e) { input (e) {
this.searchWord = e.detail.value this.searchWord = e.detail.value
} }
......
src/components/eventDetail/channelParticipation.wpy 0 → 100644
<template>
<view class="channelParticipationWpy eventPageModule">
<view class="title">渠道参与情况</view>
<view class="content">
<repeat for="{{ channelData }}" item="n" index="i" key="i">
<view class="item">
<view class="left">
<view class="name">{{ n.mediaType }}媒体参与度</view>
<view class="progressBar">
<view class="progress" style="width: {{ n.showValue }}"></view>
</view>
<view class="value">{{ n.showValue }}</view>
</view>
<view class="right">
<view class="span">{{ n.ptList }}</view>等{{ n.mediaType }}媒体参与了该事件
</view>
</view>
</repeat>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class channelParticipation extends wepy.component {
data = {
channelData: [
{
mediaType: '央级',
value: 65.6,
showValue: '65.6%',
ptList: [ '人民网', '环球网' ].join('、')
},
{
mediaType: '财经类',
value: 65.6,
showValue: '65.6%',
ptList: [ '人民网', '环球网' ].join('、')
},
{
mediaType: '娱乐类',
value: 65.6,
showValue: '65.6%',
ptList: [ '人民网', '环球网' ].join('、')
}
]
}
onLoad () {
console.log('channelParticipation')
}
}
</script>
<style lang="scss" scoped>
.channelParticipationWpy{
.content{
font-size: 32rpx;
.item{
display: flex;
align-items: center;
padding: 24rpx 24rpx 20rpx;
.left{
.name{}
.progressBar{
width: 340rpx;
height: 26rpx;
border-radius: 26rpx;
background-color: #E8ECEF;
box-shadow: 0 0 2rpx 2rpx #DFE1E3;
position: relative;
margin: 16rpx 0;
.progress{
position: absolute;
height: 100%;
background-color: #49619F;
border-radius: 26rpx;
}
}
.value{
color: #49619F;
}
}
.right{
flex: 1 1;
padding-left: 28rpx;
.span{
display: inline;
color: #49619F;
}
}
&:not(:first-child){
border-top: 2rpx solid #C6C6C8;
}
}
}
}
</style>
src/components/eventDetail/importantChannel.wpy 0 → 100644
<template>
<view class="importantChannelWpy eventPageModule">
<view class="title">重要渠道参与</view>
<view class="content">
<view class="sum">共23家重要渠道参与34次</view>
<view class="list">
<repeat for="{{ channelData }}" item="n" index="i" key="i" wx:if="{{ i < upperLimit }}">
<view class="item">
<view class="left">
<view class="point"></view>
<view class="line"></view>
</view>
<view class="right">
<view class="ptTime">
<view class="pt">
<view class="point"></view>{{ n.ptName }}
</view>
<view class="time">{{ n.time }}</view>
</view>
<view class="name mult-ellipsis">{{ n.title }}</view>
</view>
</view>
</repeat>
</view>
<loadMore class="loadMoreBtn" wx:if="{{ upperLimit < channelData.length }}" />
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import loadMore from '@/components/common/loadMore'
export default class importantChannel extends wepy.component {
components = {
loadMore
}
data = {
upperLimit: 3,
channelData: Array(15).fill(0).map((n, i) => {
return {
ptName: '新浪',
time: '09-12 12:45',
title: '马云回应“转移1200亿元资产到国外”：我们要学会在谣言的口水里游泳'
}
})
}
onLoad () {
console.log('importantChannel')
}
events = {
loadMoreClick () {
this.upperLimit += 3
}
}
}
</script>
<style lang="scss" scoped>
.importantChannelWpy{
.content{
padding: 0 24rpx;
font-size: 32rpx;
.sum{
line-height: 72rpx;
color: #ACADAF;
}
.list{
margin-bottom: 20rpx;
.item{
display: flex;
.left{
width: 2rpx;
background-color: #49619F;
position: relative;
margin: 0 8rpx;
.point{
width: 14rpx;
height: 14rpx;
border-radius: 50%;
background-color: #49619F;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.right{
flex: 1 1;
overflow: hidden;
padding: 0 10rpx 10rpx;
border: 2rpx solid #49619F;
border-radius: 4rpx;
.ptTime{
display: flex;
justify-content: space-between;
align-items: center;
line-height: 60rpx;
vertical-align: middle;
.pt{
.point{
display: inline-block;
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background-color: #49619F;
margin-right: 8rpx;
}
}
.time{
color: #B2B2B2;
}
}
.name{
line-height: 1.2;
word-break: break-all;
-webkit-line-clamp: 2;
}
}
&:not(:first-child){
margin-top: 10rpx;
.left{
.line{
position: absolute;
height: 10rpx;
width: 2rpx;
background-color: #49619F;
top: -10rpx;
left: 0;
}
}
}
}
}
.loadMoreBtn{
margin-bottom: 20rpx;
}
}
}
</style>
src/components/eventDetail/influencePower.wpy 0 → 100644
<template>
<view class="influencePowerWpy eventPageModule">
<view class="title">影响力</view>
<view class="content">
<view class="fullInf">{{ influencePowerData.fullInf.showValue }}</view>
<view class="contrast">
<repeat for="{{ influencePowerData.contrast }}" item="n" index="i" key="i">
<view class="item">
<view class="name">{{ n.name }}</view>
<view class="value" style="color: {{ n.color }};">{{ n.showValue }}</view>
</view>
</repeat>
</view>
<view class="channelInf">
<repeat for="{{ influencePowerData.channelInf }}" item="n" index="i" key="i">
<view class="item">
<view class="name">{{ n.name }}</view>
<view class="progressBar">
<view class="progress" style="width: {{ n.value / channelInfSum * 100 }}%;"></view>
</view>
<view class="value">{{ n.showValue }}</view>
</view>
</repeat>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class influencePower extends wepy.component {
data = {
influencePowerData: {
fullInf: {
value: 12657,
showValue: Math.format.thousandBitSymbol(12657)
},
contrast: [
{ name: '过去24小时上升', color: '#000000', showValue: 315 },
{ name: '对比同类事件', color: 24.6 >= 0 && Date.now() ? '#F56485' : '#5DB85B', showValue: '+24.6%' },
{ name: '对比全局事件', color: -13.7 >= 0 && Date.now() ? '#F56485' : '#5DB85B', showValue: '-13.7%' }
],
channelInf: [
{ name: '网媒', value: 7787, showValue: Math.format.thousandBitSymbol(7787) },
{ name: '微博', value: 6908, showValue: Math.format.thousandBitSymbol(6908) },
{ name: '微信', value: 4342, showValue: Math.format.thousandBitSymbol(4342) }
]
}
}
onLoad () {
console.log('influencePower')
}
computed = {
channelInfSum () {
return Math.sum(...this.influencePowerData.channelInf.map(n => n.value))
}
}
}
</script>
<style lang="scss" scoped>
.influencePowerWpy{
.content{
padding: 0 24rpx;
font-size: 32rpx;
.fullInf{
color: #49619F;
line-height: 90rpx;
font-size: 44rpx;
}
.contrast{
border-bottom: 2rpx solid #C6C6C8;
.item{
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
}
.channelInf{
display: flex;
flex-direction: column;
justify-content: space-around;
height: 128px;
.item{
display: flex;
align-items: center;
.name{
width: 70rpx;
}
.progressBar{
height: 20rpx;
// border-radius: 20rpx;
flex: 1 1;
.progress{
display: block;
height: 100%;
border-radius: 20rpx;
background-color: currentColor;
}
}
.value{
min-width: 110rpx;
text-align: right;
}
&:nth-of-type(1) .progressBar{ color: #49619F; }
&:nth-of-type(2) .progressBar{ color: #FEC52D; }
&:nth-of-type(3) .progressBar{ color: #5DB85B; }
}
}
}
}
</style>
src/components/eventDetail/leader.wpy 0 → 100644
<template>
<view class="leaderWpy eventPageModule">
<view class="title">意见领袖观点</view>
<view class="content">
<view class="list">
<repeat for="{{ leaderData }}" item="n" index="i" key="i" wx:if="{{ i < upperLimit }}">
<view class="item">
<view class="left">
<image src="{{ n.avatar }}" />
</view>
<view class="right">
<view class="nameFans">
<view class="name">{{ n.name }}</view>
<view class="fans">{{ n.fans }}</view>
</view>
<view class="text mult-ellipsis">{{ n.text }}</view>
<view class="count">
<view class="participate">参与{{ n.participate }}次</view>
<view class="media">{{ n.media }}家报道</view>
</view>
</view>
</view>
</repeat>
</view>
<view class="loadMoreBtn" wx:if="{{ upperLimit < leaderData.length }}">
<loadMore />
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import loadMore from '@/components/common/loadMore'
export default class leader extends wepy.component {
components = {
loadMore
}
data = {
upperLimit: 5,
leaderData: Array(15).fill(0).map((n, i) => {
return {
name: '裸泳浩',
fans: '123万',
avatar: '../static/img/avatar.png',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.',
participate: 76,
media: 16
}
})
}
onLoad () {
console.log('leader')
}
events = {
loadMoreClick () {
this.upperLimit += 5
}
}
}
</script>
<style lang="scss" scoped>
.leaderWpy{
.content{
padding: 0 24rpx;
font-size: 32rpx;
.list{
.item{
display: flex;
padding: 20rpx 0;
.left{
padding-right: 24rpx;
image{
width: 96rpx;
height: 96rpx;
border: 2rpx solid #ccc;
border-radius: 50%;
}
}
.right{
flex: 1 1;
overflow: hidden;
.nameFans{
display: flex;
justify-content: space-between;
align-items: center;
color: #49619F;
.name{
font-size: 36rpx;
}
.fans{
font-size: 28rpx;
}
}
.text{
margin: 20rpx 0;
line-height: 1.2;
}
.count{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
.participate{}
.media{
color: #B0B0B0;
}
}
}
&:not(:first-child){
border-top: 2rpx solid #C6C6C8;
}
}
}
.loadMoreBtn{
padding: 24rpx 0;
border-top: 2rpx solid #C6C6C8;
}
}
}
</style>
src/components/eventDetail/mediaViews.wpy 0 → 100644
<template>
<view class="mediaViewsWpy eventPageModule">
<view class="title">媒体观点</view>
<view class="content">
<view class="list">
<repeat for="{{ mediaViews }}" item="n" index="i" key="i" wx:if="{{ i < upperLimit }}">
<view class="item">
<view class="left">{{ i + 1 }}.</view>
<view class="right">
<view class="name">{{ n.name }}</view>
<view class="count">{{ n.count }}家报道</view>
</view>
</view>
</repeat>
</view>
<view class="loadMoreBtn" wx:if="{{ upperLimit < mediaViews.length }}">
<loadMore />
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import loadMore from '@/components/common/loadMore'
export default class mediaViews extends wepy.component {
components = {
loadMore
}
data = {
upperLimit: 5,
mediaViews: Array(15).fill(0).map((n, i) => {
return {
name: '马云回应“转移1200亿元资产到国外”：我们要学会在谣言的口水里游泳',
count: parseInt(Math.random() * 10) + 6
}
})
}
onLoad () {
console.log('mediaViews')
}
events = {
loadMoreClick () {
this.upperLimit += 5
}
}
}
</script>
<style lang="scss" scoped>
.mediaViewsWpy{
.content{
padding: 0 24rpx;
font-size: 32rpx;
line-height: 1.2;
.list{
.item{
display: flex;
padding: 20rpx 0;
.left{}
.right{
flex: 1 1;
overflow: hidden;
.name{
margin-bottom: 20rpx;
}
.count{
text-align: right;
color: #49619F;
font-size: 28rpx;
}
}
&:not(:first-child){
border-top: 2rpx solid #C6C6C8;
}
}
}
.loadMoreBtn{
padding: 24rpx 0;
border-top: 2rpx solid #C6C6C8;
}
}
}
</style>
src/components/eventDetail/overview.wpy 0 → 100644
<template>
<view class="overviewWpy eventPageModule">
<view class="title">概览</view>
<view class="content">
<view class="info">
<view class="left">
<image src="{{ overviewData.img }}" />
</view>
<view class="right">
<view class="name ellipsis">{{ overviewData.name }}</view>
<view class="tagTime">
<view class="tags">
<repeat for="{{ overviewData.tags }}" item="n" index="i" key="i">
<view>{{ n }}</view>
</repeat>
</view>
<view class="time">{{ overviewData.time }}</view>
</view>
</view>
</view>
<view class="desc">{{ overviewData.desc }}</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class overview extends wepy.component {
data = {
overviewData: {
name: '事件名XXXXXXXXXX',
img: '../static/img/avatar.png',
tags: ['负面危机'],
time: '2018-09-23',
desc: Array(3).fill('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ').join('')
}
}
onLoad () {
console.log('overview')
}
}
</script>
<style lang="scss" scoped>
.overviewWpy{
.content{
padding: 20rpx 24rpx;
.info{
display: flex;
margin-bottom: 30rpx;
.left{
image{
display: block;
width: 96rpx;
height: 96rpx;
border: 2rpx solid #DADADA;
}
}
.right{
flex: 1 1;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 30rpx;
.name{
color: #49619F;
font-size: 36rpx;
}
.tagTime{
display: flex;
justify-content: space-between;
align-items: center;
.tags{
view{
display: inline-block;
border: 2rpx solid #49619F;
padding: 6rpx 12rpx;
margin-right: 10rpx;
}
}
.time{
color: #B5B5B5;
}
}
}
}
.desc{
line-height: 1.5;
color: #646464;
word-break: break-all;
}
}
}
</style>
src/components/eventDetail/riskHints.wpy 0 → 100644
<template>
<view class="riskHintsWpy eventPageModule">
<!-- <view class="title">riskHints</view> -->
<view class="content">
<view class="highLightTitle">
<image src="../../static/img/i_popup_warn.png" />
<view class="warnTips">风险提示</view>
</view>
<view class="text">央级媒体、党媒【人民日报】参与此事件，请注意风险。</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class riskHints extends wepy.component {
onLoad () {
console.log('riskHints')
}
}
</script>
<style lang="scss" scoped>
.riskHintsWpy{
.content{
padding: 24rpx;
.highLightTitle{
display: flex;
align-items: center;
color: #F56485;
font-size: 36rpx;
margin-bottom: 10rpx;
image{
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
}
.text{}
}
}
</style>
src/components/eventDetail/similarEvents.wpy 0 → 100644
<template>
<view class="similarEventsWpy eventPageModule">
<view class="title">同类事件对比</view>
<view class="content">
<view class="list">
<repeat for="{{ similarEventsData }}" item="n" index="i" key="i">
<view class="item">
<view class="name ellipsis">{{ i + 1 }}、{{ n.name }}</view>
<view class="value">
<view class="progressBar">
<view class="progress {{ n.isCurrent ? 'current' : '' }}" style="width: {{ n.percentage }}">
<view class="point"></view>
</view>
</view>
<view class="showValue">{{ n.showValue }}</view>
</view>
</view>
</repeat>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class similarEvents extends wepy.component {
data = {
similarEventsData: Array(5).fill(0).map((n, i) => {
return {
name: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.',
isCurrent: i === 1,
value: 563123,
showValue: Math.format.thousandBitSymbol(563123),
percentage: parseInt(Math.random() * 50) + 50 + '%'
}
})
}
onLoad () {
console.log('similarEvents')
}
}
</script>
<style lang="scss" scoped>
.similarEventsWpy{
.content{
padding: 12rpx 24rpx;
.list{
.item{
.name{
padding: 12rpx 0;
}
.value{
display: flex;
align-items: center;
padding: 12rpx 0;
.progressBar{
flex: 1 1;
height: 20rpx;
background-color: #E8ECEF;
border-radius: 20rpx;
position: relative;
.progress{
height: 20rpx;
color: #F56586;
border-radius: 20rpx;
background-color: currentColor;
position: absolute;
left: 0;
top: 0;
.point{
background-color: currentColor;
position: absolute;
height: 20rpx;
width: 20rpx;
border-radius: 50%;
right: 0;
top: 0;
transform: translateX(50%) scale(1.2);
box-shadow: 0 0 4rpx #333;
}
&.current{
color: #49619F;
}
}
}
.showValue{
width: 140rpx;
text-align: right;
}
}
}
}
}
}
</style>
src/components/eventDetail/trend.wpy 0 → 100644
<template>
<view class="trendWpy eventPageModule">
<view class="title">趋势</view>
<view class="content">
<view class="top">
<view>当前热度</view>
<view class="progressBar">
<view class="progress" style="width: {{ currentHeat }}%">
<image src="../../static/img/colorFullBar.jpg" />
</view>
</view>
</view>
<view class="chartWrap">
<view class="tabs">
<view class="tab {{ minUnit === 'hour' ? 'active' : '' }}" @tap="unitChange('hour')">按小时显示</view>
<view class="tab {{ minUnit === 'day' ? 'active' : '' }}" @tap="unitChange('day')">按天显示</view>
</view>
<view class="myChart">
<echart :ec.sync="ec" />
</view>
</view>
<view class="bottom">
<repeat for="{{trendData }}" item="n" index="i" key="i">
<view class="item">
<view class="name">{{ n.name }}</view>
<view class="value">{{ n.value }}</view>
</view>
</repeat>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import echart from '@/components/common/echart'
import { getOptions } from './trendOptions.js'
export default class trend extends wepy.component {
components = {
echart
}
data = {
currentHeat: 50,
minUnit: 'hour' || 'day',
ec: {
option: getOptions({})
},
trendData: [
{ name: '持续时长', value: '1天11小时' },
{ name: '过去24小时传播速度', value: '25条/小时' },
{ name: '峰值传播速度', value: '212条/小时' }
]
}
methods = {
unitChange (unit) {
this.minUnit = unit
}
}
onLoad () {
console.log('trend')
}
}
</script>
<style lang="scss" scoped>
.trendWpy{
.content{
font-size: 32rpx;
.top{
padding: 24rpx;
border-bottom: 2rpx solid #C6C6C8;
.progressBar{
height: 26rpx;
border-radius: 26rpx;
background-color: #E8ECEF;
box-shadow: 0 0 2rpx 2rpx #E0E2E5;
position: relative;
margin: 16rpx 0;
.progress{
position: absolute;
height: 100%;
border-radius: 26rpx;
overflow: hidden;
image{
display: block;
width: calc((375rpx - 30rpx * 2 - 24rpx * 2) * 2);
height: 100%;
}
}
}
}
.chartWrap{
padding: 0 24rpx;
.tabs{
display: flex;
.tab{
flex: 1 1;
line-height: 90rpx;
text-align: center;
color: #8B8B8B;
box-shadow: 0 -4rpx 0 #8B8B8B inset;
transition: all .2s ease;
&.active{
color: #49619F;
box-shadow: 0 -8rpx 0 #49619F inset;
}
}
}
.myChart{
height: 580rpx;
padding: 40rpx 0;
}
}
.bottom{
padding: 0 24rpx;
.item{
display: flex;
justify-content: space-between;
margin-bottom: 32rpx;
.name{}
.value{ color: #49619F; }
}
}
}
}
</style>
src/components/eventDetail/trendOptions.js 0 → 100644
export const getOptions = (params) => {
// 默认数据，传入 data 时将覆盖此数据
params.data = params.data || Array(4).fill(0).map((n, i) => {
return [
'10/0' + (i + 1),
parseInt(Math.random() * 60)
]
})
console.log('@/components/eventDetail/trendOptions.js 图表数据：', params.data)
let option = {
color: ['#49619F'],
grid: {
width: '95%',
top: '10rpx',
bottom: '10rpx',
left: '0rpx',
containLabel: true
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#000'
},
boundaryGap: false, // 两端留白策略
data: params.data.map(n => n[0])
},
yAxis: {
axisTick: { show: false },
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#000'
},
splitNumber: 3
},
series: [
{
name: '趋势图',
type: 'line',
symbolSize: 0,
smooth: true,
data: params.data
}
]
}
return option
}
src/components/home/classificationEvent.wpy
...@@ -47,7 +47,7 @@ export default class classificationEvent extends wepy.component { ...@@ -47,7 +47,7 @@ export default class classificationEvent extends wepy.component {
} }
onLoad () { onLoad () {
console.log('classificationEvent') // console.log('classificationEvent')
} }
methods = {} methods = {}
......
src/components/home/heatList.wpy
...@@ -37,7 +37,7 @@ export default class heatList extends wepy.component { ...@@ -37,7 +37,7 @@ export default class heatList extends wepy.component {
] ]
} }
onLoad () { onLoad () {
console.log('heatList') // console.log('heatList')
} }
methods = { methods = {
} }
...@@ -63,6 +63,7 @@ export default class heatList extends wepy.component { ...@@ -63,6 +63,7 @@ export default class heatList extends wepy.component {
height: 100%; height: 100%;
} }
.name{ .name{
flex: 1 1;
height: 100%; height: 100%;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
padding-right: 20rpx; padding-right: 20rpx;
......
src/components/home/monthlyEvent.wpy
...@@ -2,35 +2,63 @@ ...@@ -2,35 +2,63 @@
<view class="monthlyEventWpy homePageModule"> <view class="monthlyEventWpy homePageModule">
<view class="title">月度事件</view> <view class="title">月度事件</view>
<view class="content"> <view class="content">
<ecCanvas id="monthlyEventChart" canvas-id="monthlyEventChart" ec="{{ ec }}" bind:init="echartInit" /> <!-- <ecCanvas id="monthlyEventChart" canvas-id="monthlyEventChart" ec="{{ ec }}" bind:init="echartInit" /> -->
<view class="chartText">
<view class="text evts">
<view class="i"></view>事件数
</view>
<view class="text infs">
<view class="i"></view>影响力均值
</view>
</view>
<view class="myChart">
<echart :ec.sync="ec" />
</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import wepy from 'wepy' import wepy from 'wepy'
import echart from '@/components/common/echart'
import echarts from '@/static/plugs/ec-canvas/echarts.js' import echarts from '@/static/plugs/ec-canvas/echarts.js'
import { getOptions } from './monthlyEventOptions.js' import { getOptions } from './monthlyEventOptions.js'
export default class monthlyEvent extends wepy.component { export default class monthlyEvent extends wepy.component {
config = { config = {
usingComponents: { // usingComponents: {
ecCanvas: '../../static/plugs/ec-canvas/ec-canvas' // component: true,
} // ecCanvas: '../../static/plugs/ec-canvas/ec-canvas'
// }
}
components = {
echart
} }
data = { data = {
ec: {}, ec: {
option: getOptions({})
},
myChart: null myChart: null
} }
onLoad () { onLoad () {
console.log('monthlyEvent') // console.log('monthlyEvent')
// setTimeout(() => {
// console.log(111)
// this.ec.option = getOptions({})
// this.$apply()
// this.echartRefresh = false
// this.echartRefresh = true
// }, 2000)
// setTimeout(() => {
// this.ec.option = getOptions({})
// }, 1000)
} }
methods = { methods = {
echartInit (e) { echartInit (e) {
console.log(e)
this.initChart(e.detail.canvas, e.detail.width, e.detail.height) this.initChart(e.detail.canvas, e.detail.width, e.detail.height)
} }
} }
...@@ -57,7 +85,26 @@ export default class monthlyEvent extends wepy.component { ...@@ -57,7 +85,26 @@ export default class monthlyEvent extends wepy.component {
} }
.content{ .content{
padding: 24rpx; padding: 24rpx;
height: 650rpx; .chartText{
display: flex;
justify-content: space-between;
margin-bottom: 24rpx;
.text{
display: flex;
align-items: center;
.i{
width: 12rpx;
height: 12rpx;
border-radius: 50%;
margin-right: 6rpx;
}
&.evts .i{ background-color: #F56586 }
&.infs .i{ background-color: #49619F }
}
}
.myChart{
height: 520rpx;
}
} }
} }
</style> </style>
src/components/home/monthlyEventOptions.js
export const getOptions = (params) => { export const getOptions = (params) => {
let option = { // 默认数据，传入 data 时将覆盖此数据
title: { params.data = params.data || {
text: '测试下面legend的红色区域不应被裁剪', evts: {
left: 'center' name: '事件数',
}, data: Array(4).fill(0).map((n, i) => ['10-1' + i, parseInt(Math.random() * 40) + 20])
color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
legend: {
data: ['A', 'B', 'C'],
top: 50,
left: 'center',
backgroundColor: 'red',
z: 100
}, },
infs: {
name: '影响力均值',
data: Array(4).fill(0).map((n, i) => ['10-1' + i, parseInt(Math.random() * 4000) + 2000])
}
}
console.log('@/components/home/monthlyEventOption.js 图表数据：', params.data)
let option = {
color: ['#F56586', '#49619F'],
grid: { grid: {
width: '100%',
top: '10rpx',
bottom: '10rpx',
left: '0rpx',
containLabel: true containLabel: true
}, },
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, axisTick: { show: false },
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], axisLine: {
// show: false lineStyle: {
color: '#EDEDED'
}
},
axisLabel: {
color: '#000'
},
// boundaryGap: false, // 两端留白策略
data: params.data.evts.data.map(n => n[0])
}, },
yAxis: { yAxis: [
x: 'center', {
type: 'value', position: 'left',
splitLine: { axisLine: { show: false },
axisTick: { show: false },
splitLine: {
lineStyle: {
color: '#EDEDED'
}
},
splitNumber: 3
},
{
position: 'right',
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
lineStyle: {
color: '#EDEDED'
}
},
splitNumber: 3
}
],
series: [
{
name: params.data.evts.name,
type: 'line',
symbol: 'circle',
symbolSize: 6,
smooth: true,
data: params.data.evts.data,
yAxisIndex: 0,
lineStyle: {
type: 'solid'
}
},
{
name: params.data.infs.name,
type: 'line',
symbol: 'circle',
symbolSize: 6,
smooth: true,
data: params.data.infs.data,
yAxisIndex: 1,
lineStyle: { lineStyle: {
type: 'dashed' type: 'dashed'
} }
} }
// show: false ]
},
series: [{
name: 'A',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: 'B',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: 'C',
type: 'line',
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}]
} }
return option return option
} }
src/components/home/monthlyIncrease.wpy
...@@ -27,7 +27,7 @@ export default class monthlyIncrease extends wepy.component { ...@@ -27,7 +27,7 @@ export default class monthlyIncrease extends wepy.component {
} }
onLoad () { onLoad () {
console.log('monthlyIncrease') // console.log('monthlyIncrease')
} }
methods = { methods = {
...@@ -66,7 +66,6 @@ export default class monthlyIncrease extends wepy.component { ...@@ -66,7 +66,6 @@ export default class monthlyIncrease extends wepy.component {
text-align: center; text-align: center;
transition: all .2s ease; transition: all .2s ease;
&:active{ &:active{
transition: all .2s ease .2;
background-color: #fff; background-color: #fff;
color: #F46485; color: #F46485;
} }
......
src/components/home/propagationCycle.wpy
...@@ -41,7 +41,7 @@ export default class propagationCycle extends wepy.component { ...@@ -41,7 +41,7 @@ export default class propagationCycle extends wepy.component {
} }
onLoad () { onLoad () {
console.log('propagationCycle') // console.log('propagationCycle')
} }
} }
</script> </script>
......
src/components/searchList/eventCard.wpy 0 → 100644
<template>
<view class="eventCardWpy">
<view class="left">{{ eventData.index + 1 }}.</view>
<view class="middle">
<view class="name">
<view class="mult-ellipsis">{{ eventData.name }}</view>
</view>
<view class="info">
<view class="time">{{ eventData.time }}</view>
<view class="inf">{{ eventData.inf }}</view>
</view>
</view>
<view class="right">
<image src="{{ eventData.img }}" />
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class eventCard extends wepy.component {
props = {
eventData: {
type: Object,
default: {}
}
}
onLoad () {
console.log(this.eventData)
}
}
</script>
<style lang="scss" scoped>
.eventCardWpy{
display: flex;
padding: 20rpx 0rpx 10rpx;
font-size: 36rpx;
.left{
line-height: 1.2;
}
.middle{
flex: 1 1;
padding-right: 50rpx;
.name{
line-height: 1.2;
height: 110rpx;
word-break: break-all;
.mult-ellipsis{
-webkit-line-clamp: 2;
}
}
.info{
display: flex;
justify-content: space-between;
.time{
font-size: 28rpx;
color: #A8A8A8;
}
.inf{
color: #3B4F81;
}
}
}
.right{
display: flex;
image{
width: 96rpx;
height: 96rpx;
margin: auto;
border: 2rpx solid #DBDAD4;
}
}
}
</style>
src/mixins/bind2Way.js 0 → 100644
import wepy from 'wepy'
export default class bind2Way extends wepy.mixin {
onLoad () {
console.log('mixin - bind2Way')
}
methods = {
// input 双向数据绑定
bind2Way (d, e) {
// typeof d === 'string' && d.split('.').reduce((n, m) => typeof n === 'string' ? this[n][m] : n[m])
// 尝试用浅拷贝(地址拷贝)来解决 ----- (更新：2018-09-21)
let arr = (d || '').split('.')
if (arr.length > 1) {
let cacheData = [ this.data ]
let index = 0
let loop = () => {
if (index !== arr.length - 1) {
cacheData[index + 1] = cacheData[index][arr[index]]
index++
loop()
} else {
cacheData[index][arr[index]] = e.detail.value
}
}
loop()
} else if (arr[0] !== '') {
this[arr[0]] = e.detail.value
} else {
console.error('绑定参数错误：' + d)
}
}
}
}
src/pages/eventDetail.wpy 0 → 100644
<template>
<view class="eventDetailWpy eventPageModule">
<!-- 风险提示 -->
<riskHints class="item" wx:if="{{ false }}" />
<!-- 概览 -->
<overview class="item" />
<!-- 影响力 -->
<influencePower class="item" />
<!-- 渠道参与情况 -->
<channelParticipation class="item" />
<!-- 趋势 -->
<trend class="item" />
<!-- 重要渠道参与 -->
<importantChannel class="item" />
<!-- 媒体观点 -->
<mediaViews class="item" />
<!-- 意见领袖观点 -->
<leader class="item" />
<!-- 同类事件对比 -->
<similarEvents class="item" />
</view>
</template>
<script>
import wepy from 'wepy'
import riskHints from '@/components/eventDetail/riskHints' // 风险提示
import overview from '@/components/eventDetail/overview' // 概览
import influencePower from '@/components/eventDetail/influencePower' // 影响力
import channelParticipation from '@/components/eventDetail/channelParticipation' // 渠道参与情况
import trend from '@/components/eventDetail/trend' // 趋势
import importantChannel from '@/components/eventDetail/importantChannel' // 重要渠道参与
import mediaViews from '@/components/eventDetail/mediaViews' // 媒体观点
import leader from '@/components/eventDetail/leader' // 意见领袖观点
import similarEvents from '@/components/eventDetail/similarEvents' // 同类事件对比
export default class eventDetail extends wepy.page {
config = {
navigationBarTitleText: '事件名XXXXXXXXXX'
}
components = {
riskHints,
overview,
influencePower,
channelParticipation,
trend,
importantChannel,
mediaViews,
leader,
similarEvents
}
onLoad () {
console.log('eventDetail')
}
}
</script>
<style lang="scss" scoped>
.eventDetailWpy{
padding: 30rpx;
position: relative;
.item{
&:not(:first-child){
margin-top: 26rpx;
}
}
}
</style>
src/pages/home.wpy
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<view class="main"> <view class="main">
<searchInput class="item" :searchWord.sync="searchWord" @toSearch="toSearch" /> <searchInput class="item" :searchWord.sync="searchWord" />
<!-- 热度榜 --> <!-- 热度榜 -->
<heatList class="item" /> <heatList class="item" />
...@@ -52,15 +52,21 @@ export default class home extends wepy.page { ...@@ -52,15 +52,21 @@ export default class home extends wepy.page {
propagationCycle, propagationCycle,
classificationEvent classificationEvent
} }
data = { data = {
searchWord: '' searchWord: ''
} }
onLoad () { onLoad () {
// console.log('home') // console.log('home')
} }
events = { events = {
toSearch () { toSearch () {
console.log(this.searchWord) // console.log(this.searchWord)
wepy.navigateTo({
url: `/pages/searchList?wd=${this.searchWord}`
})
} }
} }
} }
......
src/pages/login.wpy
<template> <template>
<view class="loginWpy"> <view class="loginWpy">
<navigator url="/pages/home">去首页</navigator>
<!-- <navigator url="/pages/home">去首页</navigator> -->
<image class="bgImg {{ userInfo ? 'translucent' : '' }}" src="../static/img/login_bg_3.png" mode="aspectFit" />
<image class="bgImg {{ userInfo ? 'translucent' : '' }}" src="../static/img/login_bg_2.png" mode="aspectFit" />
<image class="bgImg {{ userInfo ? 'translucent' : '' }}" src="../static/img/login_bg_1.png" mode="aspectFit" />
<image class="logo" src="../static/img/logo.png" />
<!-- 点击按钮的时候弹出授权弹窗，已经授权过的不会弹出弹窗 -->
<button class="btn" wx:if="{{ !userInfo }}" open-type="getUserInfo" @getuserinfo="getUserInfo">登录</button>
<view class="btn" wx:if="{{ userInfo }}" @tap="bindZhiWei">绑定</view>
<view class="bindIpts" wx:if="{{ userInfo }}">
<view class="text">绑定已有帐号</view>
<view class="input">
<image src="../static/img/i_icon_username.png" />
<input type="text" value="{{ sendData.username }}" @input="bind2Way('sendData.username')" />
</view>
<view class="input">
<image src="../static/img/i_icon_password.png" />
<input type="text" value="{{ sendData.password }}" @input="bind2Way('sendData.password')" password="true" />
</view>
</view>
<!-- popup -->
<alert :alertData.sync="alertData" />
</view> </view>
</template> </template>
<script> <script>
import wepy from 'wepy' import wepy from 'wepy'
import bind2Way from '@/mixins/bind2Way.js'
import alert from '@/components/common/alert'
export default class login extends wepy.page { export default class login extends wepy.page {
components = {
alert
}
mixins = [ bind2Way ]
data = {
sendData: {
username: '',
password: ''
},
alertData: {}
}
onLoad () { onLoad () {
console.log('login') // console.log('login')
}
methods = {
bindZhiWei () {
this.alertData = {
show: true,
type: 'success',
text: [
'绑定成功'
],
duration: 4,
callback () {
console.log('弹窗关闭了')
}
}
// this.alertData = {
// show: true,
// type: 'warn',
// text: [
// '该帐号已绑定微信号"abc"',
// '请联系项目管理员解绑后再绑定'
// ],
// duration: 4
// }
}
}
getUserInfo (e) {
this.$parent.globalData.userInfo = e.detail.userInfo
}
computed = {
userInfo () {
return this.$parent.globalData.userInfo
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.loginWpy{} .loginWpy{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #3B4F81;
.bgImg{
position: absolute;
width: 100%;
height: 100%;
&.translucent{
opacity: .4;
}
}
.logo{
position: absolute;
width: 510rpx;
height: 100rpx;
top: 120rpx;
left: 50%;
transform: translateX(-50%);
}
.btn{
position: absolute;
width: 612rpx;
height: 96rpx;
line-height: 92rpx;
text-align: center;
color: #3B4F81;
background-color: #fff;
border: 2rpx solid #fff;
border-radius: 12rpx;
font-size: 48rpx;
letter-spacing: 14rpx;
text-indent: 14rpx;
top: calc(100% * 500 / 606);
left: 50%;
transform: translate(-50%, -50%);
transition: all .2s ease;
&:active{
color: #fff;
background-color: #3B4F81;
}
}
.bindIpts{
position: absolute;
top: calc(160 / 606 * 100%);
left: 50%;
transform: translateX(-50%);
.text{
font-size: 44rpx;
color: #fff;
margin-bottom: 60rpx;
text-align: center;
}
.input{
width: 610rpx;
position: relative;
margin-bottom: 50rpx;
input{
display: block;
width: 100%;
height: 80rpx;
line-height: 80rpx;
background-color: #fff;
padding: 0 40rpx 0 72rpx;
font-size: 36rpx;
color: #858E95;
}
image{
display: block;
position: absolute;
top: 50%;
left: 36rpx;
transform: translate(-50%, -50%);
z-index: 1;
}
}
}
}
</style> </style>
src/pages/searchList.wpy 0 → 100644
<template>
<view class="searchListWpy">
<homeHeader />
<view class="main">
<searchInput class="item" :searchWord.sync="searchWord" />
<view class="ListMain">
<view class="top">
<view class="pname">{{ pName }}</view>
<view class="sort">
<view
class="{{ sort === 'time' ? 'active' : '' }}"
@tap="sortChange('time')">
<image src="../static/img/i_sort{{ sort === 'time' ? '_active' : '' }}.png" /> 时间
</view>
<view
class="{{ sort === 'inf' ? 'active' : '' }}"
@tap="sortChange('inf')">
<image src="../static/img/i_sort{{ sort === 'inf' ? '_active' : '' }}.png" /> 影响力
</view>
</view>
</view>
<view class="bottom">
<view class="tab">
<repeat for="{{ tab }}" item="n" index="i" key="i">
<view class="classif {{ n.selected ? 'active' : '' }}" @tap="classifChange({{ n.name }})"><!--
-->{{ n.name }}<!--
--><view class="underline"></view>
</view>
</repeat>
</view>
<view class="list">
<repeat for="{{ eventList }}" item="n" index="i" key="i">
<eventCard class="card" :eventData="n" />
</repeat>
</view>
</view>
</view>
<loadMore class="loadMoreBtn" />
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import moment from 'moment'
import loadMore from '@/components/common/loadMore'
import homeHeader from '@/components/common/homeHeader' // header头
import searchInput from '@/components/common/searchInput' // 搜索框
import eventCard from '@/components/searchList/eventCard' // 事件卡片
export default class searchList extends wepy.page {
components = {
loadMore,
homeHeader,
searchInput,
eventCard
}
data = {
searchWord: '',
isSearchPage: false,
sort: 'time',
tab: [
{ name: '全部', selected: true },
{ name: '分类1', selected: false },
{ name: '分类2', selected: false },
{ name: '分类3', selected: false },
{ name: '分类4', selected: false },
{ name: '分类5', selected: false }
],
eventList: Array(10).fill(0).map((n, i) => {
return {
index: i,
name: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ve'
.slice(0, parseInt(Math.random() * 80) + 40) + '.',
inf: Math.format.thousandBitSymbol(1234),
time: moment(Date.now()).format('YYYY-MM-DD'),
img: '../../static/img/avatar.png'
}
})
}
onLoad (options) {
this.searchWord = options.wd
}
methods = {
// 排序条件改变
sortChange (sort) {
this.sort = sort
},
// tab切换
classifChange (name) {
this.tab.forEach(n => { n.selected = n.name === name })
}
}
computed = {
pName () {
return this.isSearchPage ? '搜索结果' : '事件列表'
}
}
events = {
toSearch () {
console.log(this.searchWord)
},
loadMoreClick () {
console.log('加载更多')
}
}
}
</script>
<style lang="scss" scoped>
.searchListWpy{
.main{
padding: 26rpx;
.ListMain{
margin-top: 26rpx;
border: 1px solid #EAEAEA;
border-radius: 6rpx;
font-size: 36rpx;
.top{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
border-bottom: 1px solid #EAEAEA;
.pname{
font-size: 40rpx;
}
.sort{
display: flex;
view{
display: flex;
align-items: center;
color: #AAACAB;
margin-left: 40rpx;
transition: all .2s ease;
image{
width: 28rpx;
height: 47rpx;
transform-origin: left center;
transform: scale(.9);
}
&.active{
color: #4B60A1;
}
}
}
}
.bottom{
padding: 20rpx 30rpx 0rpx;
.tab{
display: flex;
overflow-x: scroll;
overflow-y: hidden;
padding-bottom: 14rpx;
position: relative;
box-shadow: 0 -4rpx 0 #ccc inset;
.classif{
float: left;
white-space: nowrap;
transition: all .2s ease;
position: relative;
padding: 0 10rpx;
&:not(:first-child){
margin-left: 80rpx;
}
.underline{
width: 100%;
// height: 4rpx; // 这里高度本来应该是 4rpx,但是在手机上显示只有一半的效果
height: 8rpx; // 所以设置了8rpx，超出的 4rpx 不会被显示。
background-color: #ccc;
position: absolute;
left: 0rpx;
top: calc(100% + 10rpx);
transition: all .2s ease;
z-index: 1;
}
&.active{
color: #4B60A1;
.underline{
background-color: currentColor;
}
}
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar{
width: 0rpx;
height: 0rpx;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track{
border-radius: 0rpx;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb{
border-radius: 0rpx;
}
}
.list{
.card{
&:not(:first-child){
border-top: 2rpx solid #EAEAEA;
}
}
}
}
}
.loadMoreBtn{
margin-top: 26rpx;
}
}
}
</style>
src/static/css/_public.scss
...@@ -67,3 +67,16 @@ image{ ...@@ -67,3 +67,16 @@ image{
} }
.content{} .content{}
} }
// 事件页模块样式
.eventPageModule{
border: 2rpx solid #C6C6C8;
border-radius: 6rpx;
box-shadow: 0 0 4rpx #C6C6C8;
.title{
border-bottom: 2rpx solid #C6C6C8;
line-height: 70rpx;
font-size: 36rpx;
padding: 0 28rpx;
}
.content{}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment