renshou/card/index/index.vue

<template>
	<view style="padding-bottom: 30rpx;">
		<view class="top-fixed" :style="'height: '+ systems.barHeight + 'rpx;'">
			<view :class="'bgcolor' + (isTop == 1 ? ' opacity' : '')" :style="'height:' + systems.barHeight + 'rpx'">
			</view>
			<view class="top-fixed-c"
				:style="'height: '+ systems.navigationHeight + 'rpx;margin-top:' + systems.ktxStatusHeight + 'rpx;'">
				<navigator url="" hover-class="none" open-type="navigateBack" class="back ddflex"
					:style="'height: '+ systems.navigationHeight + 'rpx;'">
					<image src="/static/pages/images/back_black.png"></image>
				</navigator>
				<view :class="'top-title tover' + (isTop == 1 ? ' top-black':'')"
					:style="'line-height: '+ systems.navigationHeight + 'rpx;'">名片</view>
			</view>
		</view>
		<view :style="'height: '+ systems.barHeight + 'rpx;'"></view>
		<view class="bg">
			<image src="/static/pages/images/userBg.png"></image>
		</view>
		<view class="infos">
			<view class="infos-border">
				<view class="photo">
					<block v-if="cardInfo.avatar">
						<image :src="cardInfo.avatar" mode="aspectFill" class="poster"></image>
						<view v-if="cardId" class="change ddflex" style="right: 140rpx;background-color:#27D699;"
							@click="userBehavior(3)">
							<image v-if="!cardInfo.isThumbs" style="width: 35rpx;height: 32rpx;"
								src="/card/static/images/dz1.png"></image>
							<image v-else style="width: 35rpx;height:32rpx;" src="/card/static/images/dz1_h.png">
							</image>
							<!-- 点赞 -->
						</view>
						<view v-if="cardId" class="change ddflex" @click="jumpUrl('/card/cardFound/cardFound')">
							<image src="/card/static/images/change.png"></image>
							<!-- 更换销售员-->
						</view>
					</block>
				</view>
				<view class="info dflex">
					<view class="flex">
						<view class="name">
							{{ cardInfo.realName }}
							<text class="job" v-if="cardInfo.job">{{ cardInfo.jobName }}</text>
							<text class="job">入司{{cardInfo.inDate?getAge(cardInfo.inDate):1}}年</text>
						</view>
						<view class="company ddflex" style="margin-top: 20rpx;">
							<image src="/card/static/images/gs.png"></image>
							{{ cardInfo.companyName }}
						</view>
						<view class="company ddflex">
							<image src="/card/static/images/area.png"></image>
							服务区域 {{ cardInfo.industryName }}
						</view>
						<view class="company">
							执业证书：02000043090080002013000260
						</view>
						<view class="ddflex" style="margin-top: 30rpx;" v-if="cardInfo.wechat||cardInfo.wechat">
							<view class="ddflex fflex" style="background: #F8F8F8;border-radius: 10rpx;padding: 20rpx;font-size: 26rpx;margin-right: 30rpx;" v-if="cardInfo.phone">
								<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" src="/card/static/images/phone.png"></image>
								{{cardInfo.phone}}
							</view>
							<view class="ddflex fflex" style="background: #F8F8F8;border-radius: 10rpx;padding: 20rpx;font-size: 26rpx;" v-if="cardInfo.wechat">
								<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" src="/card/static/images/wx.png"></image>
								{{cardInfo.wechat}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btns ddflex" v-if="cardId">
				<view class="share-ta ddflex fflex" style="background: linear-gradient(80deg, #7EBFF1 0%, #458EEE 100%);"
					@click="copy(cardInfo.wechat, 1)">
					<image src="../../static/pages/images/wx.png"></image>微信联系</view>
				<view class="share-ta ddflex fflex" style="background: linear-gradient(84deg, #6FE5BC 0%, #27D699 100%);"
					@click="goPhone()">
					<image src="/card/static/images/phone1.png"></image>电话联系</view>
				<view class="share-ta ddflex fflex" style="background: linear-gradient(80deg, #FF985A 0%, #FF5700 100%);"
					 @click="jumpUrl('/card/poster/poster?id'+cardInfo.id)">
					<image src="/card/static/images/fx.png"></image>分享名片</view>
			</view>
			<view class="save-text ddflex" v-if="cardId">
				<image src="/card/static/images/save.png" @click="saveToPhone()"></image>保存到通讯录
			</view>
			<view class="btns ddflex" v-if="!cardId" style="justify-content: center;">
				<view class="share-ta ddflex" style="background: linear-gradient(84deg, #6FE5BC 0%, #27D699 100%);width: 260rpx;margin-right: 30rpx;"
					@click="jumpUrl('/card/poster/poster?id'+cardInfo.id)">
					<image src="/card/static/images/wdmp.png"></image>我的名片码</view>
				<button open-type="share" class="share-ta ddflex" style="background: linear-gradient(80deg, #FF985A 0%, #FF5700 100%);width: 260rpx !important;"
					>
					<image src="/card/static/images/fx.png"></image>发送名片</button>
			</view>
			<view class="extend-info ddflex">
				<view class="extend-info-item fflex">
					<view class="extend-info-data">{{cardInfo.cntCust?cardInfo.cntCust:0}}</view>
					<view class="extend-info-label ddflex">
						<image src="../../static/pages/images/fw_hui.png"></image>
						<view>服务客户</view>
					</view>
				</view>
				<view class="extend-info-item fflex">
					<view class="extend-info-data">{{cardInfo.cntCntr?cardInfo.cntCntr:0}}</view>
					<view class="extend-info-label ddflex">
						<image src="/static/pages/images/cy_hui.png"></image>
						<view>保单件数</view>
					</view>
				</view>
				<view class="extend-info-item fflex">
					<view class="extend-info-data">{{cardInfo.thumbs?cardInfo.thumbs:0}}</view>
					<view class="extend-info-label ddflex">
						<image src="/static/pages/images/dz_hui.png"></image>
						<view>点赞量</view>
					</view>
				</view>
			</view>
			<view class="q-hud ddflex">
				<view class="q-hud-c ddflex">
					<view class="q-users ddflex">
						<image :src="item.avatar?item.avatar:'../../static/images/userimg.png'" mode="aspectFill" v-for="(item, index) in cardInfo.pageUser.list"
							v-if="index<3" :key="index"></image>
					</view>
					<view class="fflex">
						{{cardInfo.pageUser.total}}人看过
					</view>
					<!-- <image src="../static/images/q_rico.png" class="q-rico"></image> -->
				</view>
				<view class="q-hud-r ddflex">
					<view class="ddflex">
						<image style="width: 23rpx;height: 31rpx;margin-right: 10rpx;"
							src="/card/static/images/hot.png"></image>
						<text>{{cardInfo.share}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 评分 -->
		<view class="pf-box">
			<view class="ddflex" style="justify-content: space-between;">
				<view class="pf-nav">客户评价</view>
				<view class="ddflex pf-more" @click="jumpUrl('/card/evaluateList/evaluateList?groupId='+cardInfo.id)">
					全部评价
					<image style="width: 9rpx;height: 19rpx;margin-left: 10rpx;" src="/static/pages/images/more.png"></image>
				</view>
			</view>
			<view class="ddflex" style="justify-content: center;margin-top: 40rpx;">
				<view class="pf-number">
				{{evaluateInfo.info.avage}}<text style="font-size: 24rpx;color: #333333;font-weight: 400;margin-left: 10rpx;">分</text>
				</view>
				<uni-rate style="justify-content: center;margin-left: 30rpx;" class="ddflex" color="#999999" active-color="#FF4600" :readonly="true" size="18" allow-half :value="evaluateInfo.info.avage/2" />
			</view>
			<view class="pf-note">综合评分 {{evaluateInfo.info.total}}人评分</view>
			<view class="pf-data">
				<view class="pf-user ddflex">
					<view class="ddflex">
						<image class="pf-user-header" :src="evaluateInfo.evaluateDTO.avatar?evaluateInfo.evaluateDTO.avatar:'../../static/images/userimg.png'"></image>
						<view class="pf-user-name tover">{{evaluateInfo.evaluateDTO.name}}</view>
						<uni-rate style="justify-content: center;margin-left: 30rpx;" class="ddflex" color="#999999" active-color="#FF4600" :readonly="true" size="14" allow-half :value="evaluateInfo.evaluateDTO.serveScore/2" />
						<text style="font-size: 20rpx;color: #FF4600;">{{evaluateInfo.evaluateDTO.serveScore}}分</text>
					</view>
					<view class="pf-user-time">{{evaluateInfo.evaluateDTO.createDate}}</view>
				</view>
				<view class="pf-user-content">
					{{evaluateInfo.evaluateDTO.content}}
				</view>
				<view class="" style="margin-top: 20rpx;">
					<image :style="'width: 200rpx;height: 200rpx;margin-bottom: 10rpx;display: inline-block;'+((index+1)%3==0?'':'margin-right:10rpx')" 
						v-for="item,index in evaluateInfo.evaluateDTO.evaluateImgUrls" :src="item" mode="aspectFit"
						@click="previewImg(evaluateInfo.evaluateDTO.evaluateImgUrls,index)"></image>
				</view>
			</view>
			<view class="pf-btn" v-if="cardId" @click="jumpUrl('/card/evaluate/evaluate?id='+cardInfo.id)">点击输入您的评价</view>
		</view>
		
		<view class="box brief" v-if="cardInfo.honorImg">
			<view class="tit ddflex">
				<view class="flex ddflex">
					<image src="/card/static/images/shry.png"></image>
					<view>所获荣誉</view>
				</view>
			</view>
			<view class="contacts" style="height: 300rpx;margin-top: 20rpx;">
				<scroll-view scroll-x="true" class="contact" style="height: 300rpx;">
					<view class=" ry-image" v-for="item,index in cardInfo.honorImg.split(',')" @click="previewImg(cardInfo.honorImg.split(','),index)">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="box brief" v-if="cardInfo.styleImg">
			<view class="tit ddflex">
				<view class="flex ddflex">
					<image src="/card/static/images/grfc.png"></image>
					<view>个人风采</view>
				</view>
			</view>
			<view class="contacts" style="height: 300rpx;margin-top: 20rpx;">
				<scroll-view scroll-x="true" class="contact" style="height: 300rpx;">
					<view class=" ry-image" v-for="item in cardInfo.styleImg.split(',')" @click="previewImg(cardInfo.styleImg.split(','),index)">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="box brief">
			<view class="tit ddflex">
				<view class="flex ddflex">
					<image src="/card/static/images/grjj.png"></image>
					<view>个人简介</view>
				</view>
				<!-- <image v-if="!cardId" src="../static/images/bj_ico.png" class="edit" @tap="jumpUrl('/card/editDesc/editDesc?id=' + cardInfo.id)"></image> -->
			</view>
			<view class="bri"><rich-text :nodes="cardInfo.brief ? cardInfo.brief : ''"></rich-text></view>
		</view>
		<view class="box brief">
			<view class="tit ddflex">
				<view class="flex ddflex">
					<image src="/card/static/images/gsjj.png"></image>
					<view>公司简介</view>
				</view>
				<!-- <image v-if="!cardId" src="../static/images/bj_ico.png" class="edit" @tap="jumpUrl('/card/editDesc/editDesc?id=' + cardInfo.id)"></image> -->
			</view>
			<view class="bri"><rich-text :nodes="cardInfo.companyIntroduction ? cardInfo.companyIntroduction : ''"></rich-text></view>
		</view>
		<!-- <view class="box videos">
			<view class="tit ddflex">
				<view class="flex ddflex">
					<image src="../static/images/sp_ico.png"></image>
					<view>我的视频</view>
				</view>
				<image v-if="cardInfo.videoId && !cardId" @click="uploadVodChangeHandle()"
					src="../static/images/bj_ico.png" class="edit"></image>
			</view>
			<view class="video">
				<video v-if="cardInfo.videoId" controls="true" class="video-sp" :src="videoInfo.playUrl"></video>
				<view v-else class="not" @click="uploadVodChangeHandle()">
					<image src="../static/images/add_ico1.png"></image>
					<view>点击添加个人介绍视频</view>
				</view>
			</view>
		</view>
		<view class="also" v-if="cardId" @click="jumpUrl('/card/create/create')">我也要创建电子名片</view> -->
		
		<serviceContact></serviceContact>
	</view>
</template>
<script>
	const app = getApp();
	const req = require('../../utils/request.js');
	const api = require('../../utils/api.js');
	import VODUpload from '@/utils/aliyun-upload-sdk-1.0.1.min.js'
	import serviceContact from '@/components/service-contact/index.vue'
import util from '../../utils/util.js';
	export default {
		data() {
			return {
				systems: {},
				isTop: 0,
				options: {},
				scene: null,
				cardId: '',
				cardInfo: '',
				cardCount: '',
				zhiPicUrls: [],

				isFirst: true, //页面加载第一次调用

				uploader: '',
				isStart: false,
				videoInfo: '',
				fileName: '', //视频名称
				
				evaluateInfo:null,//评分
			};
		},
		components:{ serviceContact },
		onLoad(options) {
			this.options = options
			this.cardId = options.cardId;
			if (options.scene)
				this.scene = options.scene
		},

		async onShow() {
			if (this.scene) {
				await this.loadCodeParams();
			}
			await req.silenceLogin(this.options.userId ? this.options.userId : '', '')
			this.getCardInfo();
		},

		onShareAppMessage(res) {
			if (res.from == 'button') {
				let userInfo = req.getStorage('userInfo');
				this.userBehavior(6)
				return {
					title: this.cardInfo.realName,
					path: '/card/index/index?cardId=' + this.cardInfo.id + '&userId=' + userInfo.id,
					imageUrl: this.cardInfo.avatar + '?x-oss-process=style/w375', // 分享图
				};
			}
		},
		onShareTimeline(res) {
			if (res.from == 'button') {
				let userInfo = req.getStorage('userInfo');
				this.userBehavior(6)
				return {
					title: this.cardInfo.realName,
					path: '/card/index/index?cardId=' + this.cardInfo.id + '&userId=' + userInfo.id,
					imageUrl: this.cardInfo.avatar + '?x-oss-process=style/w375', // 分享图
				};
			}
		},

		methods: {
			loadCodeParams() {
				let _ts = this;
				return new Promise((resolve, reject) => {
					if (!_ts.scene) {
						resolve();
						return false;
					}
					req.getRequest(
						'/api/code/params', {
							scene: _ts.scene
						},
						data => {
							this.options.userId = data.userId
							this.cardId = data.scene
							resolve();
						}
					);
				});
			},
			getImgList(url) {
				var list = [];
				if (url) {
					list = url.split(',');
				}
				return list;
			},

			jumpUrl(url) {
				uni.navigateTo({
					url: url
				});
			},

			getCardInfo() {
				var url = '';
				var dataP = {
					id:this.cardId
				};
				if (this.cardId) {
					url = '/api/visiting/card/info';
					dataP.id = this.cardId;
				} else {
					url = '/api/visiting/card/userInfo';
					dataP = {};
				}
				req.getRequest(url, dataP, data => {
					this.cardInfo = data;
					console.log('isFirst')
					if (this.cardId && this.cardInfo.userId == req.getStorage('userInfo').id) {
						this.cardId = null
						this.getCardInfo()
					} else {
						if (this.cardInfo.userId == req.getStorage('userInfo').id) {

						} else {
							// 用户浏览
							if (this.isFirst) {
								this.userBehavior(4)
							}
						}
						this.isFirst = false
					}
					this.getEvaluate()
				});
			},

			// 用户行为
			userBehavior(type) {
				var dataP = {};
				dataP.type =
					23 //、产品 2、活动 3、未知 4、内容 5、课程 6、老师 7、素材 8、题目 9、资料领取 10、招聘职位 12、用户须知 13、素材 15、医院科室 16、海报 20、医生 21 新闻 23名片
				dataP.behavior = type; //1、关注 2、收藏 3、点赞 4、浏览 5、确认 6、分享
				dataP.bindId = this.cardInfo.id;
				req.postRequestLoding('/api/v3/behavior/save', dataP, data => {
					if (type == 3) {
						this.cardInfo.isThumbs = !this.cardInfo.isThumbs
					}
					if (type == 1) {
						this.cardInfo.follow = !this.cardInfo.follow
					}
				});
			},

			// 存入名片夹
			saveToFolder() {
				let form = {
					visitingCardId: this.cardInfo.id,
					userId: req.getStorage('userInfo').id
				}
				req.postRequest('/api/v3/visiting/card/folder/saveOrUpdate', form, res => {
					req.msg('已存入名片夹')
					this.cardInfo.isSave = true
				})
			},
			// 存入通讯录
			saveToPhone() {
				uni.addPhoneContact({
					nickName: this.cardInfo.realName,
					firstName: this.cardInfo.realName,
					mobilePhoneNumber: this.cardInfo.phone,
					success: (res) => {
						this.$showModal({
								title: '提示',
								content: '已存入通讯录，请前往手机通讯录查看',
								showCancel: false,
							})
							.then(res => {

							})
							.catch(err => {});
					},
					fail: () => {
						req.msg('存入失败')
					}
				})
			},

			goPhone() {
				uni.makePhoneCall({
					phoneNumber: this.cardInfo.phone
				}); // 传参带入号码即可
			},

			copy(valueText, type) {
				uni.setClipboardData({
					data: valueText,
					success: function(res) {
						if (type == 1) {
							req.msg('微信号复制成功');
						} else if (type == 2) {
							req.msg('邮箱复制成功');
						}
					}
				});
			},

			getPlayInfo(videoId) {
				req.getRequest('/api/v3/vod/playInfo', {
					videoId: videoId
				}, data => {
					this.videoInfo = data
				})
			},
			createUploader() {
				let self = this;
				return new VODUpload({
					timeout: 60000,
					partSize: 1048576,
					parallel: 5,
					retryCount: 3,
					retryDuration: 2,
					region: this.regionId,
					userId: this.accountId,
					// 开始上传
					onUploadstarted: function(uploadInfo) {
						uni.showLoading({
							title: '视频上传中'
						})
						console.log('uploadInfo==', uploadInfo)
						if (!uploadInfo.videoId) {
							req.getRequest('/api/v3/vod/uploadAuth?fileName=' + self.fileName, {}, res => {
								var data = res;
								self.uploader.setUploadAuthAndAddress(uploadInfo, data.uploadAuth, data
									.uploadAddress, data.videoId)
							})
							self.isStart = true;
						} else {
							req.getRequest('/api/v3/vod/refreshUploadAuth?videoId=' + uploadInfo.videoId, {},
								res => {
									var data = res;
									self.uploader.setUploadAuthAndAddress(uploadInfo, data.uploadAuth, data
										.uploadAddress, data.videoId)
								})
						}
					},
					// 文件上传成功
					onUploadSucceed: function(uploadInfo) {
						// req.msg("视频上传成功");
						let dataP = {
							id: self.cardInfo.id,
							videoId: uploadInfo.videoId,
							videoInfo: JSON.stringify(uploadInfo)
						}
						req.postRequest('/api/v3/visiting/card/saveOrUpdate', dataP, res => {
							self.getPlayInfo(uploadInfo.videoId);
							setTimeout(() => {
								self.isStart = false;
							}, 1000);
							uni.hideLoading()
						})
					},
					// 文件上传失败
					onUploadFailed: function(uploadInfo, code, message) {
						req.msg("文件上传失败");
					},
					// 取消文件上传
					onUploadCanceled: function(uploadInfo, code, message) {
						req.msg("文件已暂停上传");
					},
					// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
					onUploadProgress: function(uploadInfo, totalSize, progress) {
						var progressPercent = Math.ceil(progress * 100);
						// self.$set(self.uploader, 'authProgress', progressPercent);
					},
					// 上传凭证超时
					onUploadTokenExpired: function(uploadInfo) {
						req.getRequest('/api/v3/vod/refreshUploadAuth?videoId=' + uploadInfo.videoId, {},
							res => {
								var data = res;
								self.uploader.resumeUploadWithAuth(data.uploadAuth)
							})
					}
				})
			},
			uploadVodChangeHandle: function(e) {
				let self = this;
				uni.chooseVideo({
					count: 1, //上传视频的个数
					mediaType: ['video'], //限制上传的类型为video
					sourceType: ['album', 'camera'], //视频选择来源
					maxDuration: 58, //拍摄限制时间
					camera: 'back', //采用后置摄像头
					success: function(res) {
						//获取临时存放的视频资源
						// let tempFilePath=res.tempFiles[0]
						console.log('视频文件==', res)
						var file = {
							url: res.tempFilePath,
							coverUrl: res.thumbTempFilePath
						};
						self.fileName = res.tempFilePath.substring(res.tempFilePath.lastIndexOf('/') + 1)
						// if (self.uploader) {
						// 	self.uploader.stopUpload();
						// 	self.authProgress = 0;
						// }
						var userData = '{"Vod":{}}';
						self.uploader = self.createUploader();
						self.uploader.addFile(file, null, null, null, userData);
						self.uploader.startUpload();
					},
				})
			},
			uploadImg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function({
						tempFilePaths
					}) {
						var promise = Promise.all(
							tempFilePaths.map(tempFilePath => {
								return new Promise(function(resolve, reject) {
									req.uploadFile(api.upload, tempFilePath, res => {
										that.imageMap = res.src;
										//上传完成，则更新保存
										that.updateCard(3, that.imageMap);
									});
								});
							})
						);
						promise
							.then(function(results) {
								console.log(results);
							})
							.catch(function(err) {
								console.log(err);
							});
					}
				});
			},

			uploadImgs() {
				let that = this;
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function({
						tempFilePaths
					}) {
						var promise = Promise.all(
							tempFilePaths.map(tempFilePath => {
								return new Promise(function(resolve, reject) {
									req.uploadFile(api.upload, tempFilePath, res => {
										let picUrls = that.zhiPicUrls;
										that.zhiPicUrls = picUrls.concat(res.src);
										if (tempFilePaths.length == that.zhiPicUrls
											.length) {
											//上传完成，则更新保存
											that.updateCard(1, that.zhiPicUrls.join(
												','));
										}
									});
								});
							})
						);
						promise
							.then(function(results) {
								console.log(results);
							})
							.catch(function(err) {
								console.log(err);
							});
					}
				});
			},

			//预览图片
			previewImg(picUrls, index) {
				//预览合同图片
				var src = picUrls[index];
				let imgs = picUrls;
				uni.previewImage({
					current: src, // 当前显示图片的http链接
					urls: imgs
				});
			},

			cleanimages(index) {
				// 删除图片
				let arr = this.zhiPicUrls;
				arr.splice(index, 1);
				this.zhiPicUrls = arr;
			},

			/**
			 * @param {Object} type 1图片 2、视频
			 * @param {Object} url 资源地址
			 */
			updateCard(type, url) {
				var dataP = {};
				dataP.id = this.cardInfo.id;
				if (type == 1) {
					dataP.pictures = url;
				} else if (type == 2) {
					dataP.video = url;
				} else if (type == 3) {
					dataP.imageMap = url;
				}
				req.postRequest(api.api_addressList_update, dataP, json => {
					if (type == 1) {
						this.cardInfo.pictures = url;
					} else if (type == 2) {
						this.cardInfo.video = url;
					} else if (type == 3) {
						this.cardInfo.imageMap = url;
					}
				});
			},
			getAge(date){
				return util.getAge(date)
			},
			
			// 获取评论
			getEvaluate(){
				req.getRequest('/api/evaluate/cardInfo',{bindId:this.cardInfo.id,type:2},res=>{
					this.evaluateInfo = res
				})
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	};
</script>

<style>
	@import './index.css';
</style>