新增发现水晶发现更多
This commit is contained in:
唐明明
44
apis/interfaces/chain.js
Normal file
44
apis/interfaces/chain.js
Normal file
@@ -0,0 +1,44 @@
|
||||
|
||||
/**
|
||||
* Web唐明明
|
||||
* 匆匆数载恍如梦，岁月迢迢华发增。
|
||||
* 碌碌无为枉半生，一朝惊醒万事空。
|
||||
* moduleName: 区块链
|
||||
*/
|
||||
|
||||
import { request } from '../index'
|
||||
|
||||
// 最新区块列表
|
||||
const chain = () => {
|
||||
return request({
|
||||
url: 'chain'
|
||||
})
|
||||
}
|
||||
|
||||
// 发行量概况
|
||||
const situation = () => {
|
||||
return request({
|
||||
url: 'nodes'
|
||||
})
|
||||
}
|
||||
|
||||
// 区块详情
|
||||
const hash = (hash) => {
|
||||
return request({
|
||||
url: 'chain/block/' + hash
|
||||
})
|
||||
}
|
||||
|
||||
// 区块链首页
|
||||
const occ = () => {
|
||||
return request({
|
||||
url: 'occ/index'
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
chain,
|
||||
situation,
|
||||
hash,
|
||||
occ
|
||||
}
|
||||
63
apis/interfaces/crystal.js
Normal file
63
apis/interfaces/crystal.js
Normal file
@@ -0,0 +1,63 @@
|
||||
|
||||
/**
|
||||
* Web唐明明
|
||||
* 匆匆数载恍如梦，岁月迢迢华发增。
|
||||
* 碌碌无为枉半生，一朝惊醒万事空。
|
||||
* moduleName: 矿机
|
||||
*/
|
||||
|
||||
import { request } from '../index'
|
||||
|
||||
// 水晶原石
|
||||
const crystals = () => {
|
||||
return request({
|
||||
url: 'user/account/crystals'
|
||||
})
|
||||
}
|
||||
|
||||
// 领取水晶
|
||||
const thawlog = (data) => {
|
||||
return request({
|
||||
url: 'user/account/thawlog',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 水晶分类
|
||||
const category = () => {
|
||||
return request({
|
||||
url: 'crystal/category'
|
||||
})
|
||||
}
|
||||
|
||||
// 水晶任务
|
||||
const task = () => {
|
||||
return request({
|
||||
url: 'crystal/task'
|
||||
})
|
||||
}
|
||||
|
||||
// 水晶用户签到-信息
|
||||
const sign = () => {
|
||||
return request({
|
||||
url: 'user/sign'
|
||||
})
|
||||
}
|
||||
|
||||
// 水晶用户签到
|
||||
const operateSign = () => {
|
||||
return request({
|
||||
url: 'user/sign',
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
export{
|
||||
crystals,
|
||||
thawlog,
|
||||
category,
|
||||
task,
|
||||
sign,
|
||||
operateSign
|
||||
}
|
||||
123
apis/interfaces/index.js
Normal file
123
apis/interfaces/index.js
Normal file
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* Web-zdx
|
||||
* moduleName: 商城首页
|
||||
*/
|
||||
|
||||
import { request } from '../index'
|
||||
|
||||
// 首页信息
|
||||
const index = () => {
|
||||
return request({
|
||||
url: 'mall',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
// 今日特惠页面 （大于三显示3个 两个显示两个 1个就显示一张图）
|
||||
const indexT = (data) => {
|
||||
return request({
|
||||
url: 'mall/goods',
|
||||
method: 'GET',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
// 获取首页弹窗
|
||||
const popups = () => {
|
||||
return request({
|
||||
url: 'popups/mall',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
const banner = () => {
|
||||
return request({
|
||||
url: 'mall/banners',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 全养头条
|
||||
const cmsArticles = () => {
|
||||
return request({
|
||||
url: 'cms/articles',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 全养头条详情
|
||||
const cmsArticlesDetail = (id) => {
|
||||
return request({
|
||||
url: 'cms/articles/'+id,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取是否有未读消息
|
||||
const notifyCounts = () => {
|
||||
return request({
|
||||
url: 'notifications/counts',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 判断是否能跳转到钱包页面
|
||||
const canGoWallet = () => {
|
||||
return request({
|
||||
url: 'user/datas',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 是否设置了激活激活钱包
|
||||
const security = () => {
|
||||
return request({
|
||||
url: 'chain/safe/security',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 是否个人认证成功
|
||||
const certified = () => {
|
||||
return request({
|
||||
url: 'user/certified',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取首页商品列表 taos ='淘宝客' goods/mall （自己商品）
|
||||
const getIndexGoodsList = (name,data) => {
|
||||
return request({
|
||||
url: name,
|
||||
method: 'GET',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
// 获取淘宝客的标签
|
||||
const getTaoCategories = () =>{
|
||||
return request({
|
||||
url: 'tao/categories',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
// 获取自营的标签
|
||||
const getTags = () =>{
|
||||
return request({
|
||||
url: 'mall/tags',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export {
|
||||
index,
|
||||
cmsArticles,
|
||||
notifyCounts,
|
||||
cmsArticlesDetail,
|
||||
canGoWallet,
|
||||
security,
|
||||
certified,
|
||||
getIndexGoodsList,
|
||||
getTaoCategories,
|
||||
getTags,
|
||||
banner,
|
||||
popups,
|
||||
indexT
|
||||
}
|
||||
@@ -1,17 +1,549 @@
|
||||
<template>
|
||||
<view class="crystal">
|
||||
发现更多
|
||||
<!-- 公共提示弹出 start -->
|
||||
<order-tips title="温馨提示" content="恭喜您,签到成功" :tipsState="sign.signShow" @tipseject="signject" />
|
||||
<!-- 公共提示弹出 end -->
|
||||
|
||||
<!-- 公共提示弹出 start -->
|
||||
<order-tips :title="tips.tipsTitle" :content="tips.tipsContent" :tipsState="tips.tipsState" @tipseject="tipseject" />
|
||||
<!-- 公共提示弹出 end -->
|
||||
|
||||
<!-- 账户余额 -->
|
||||
<view class="total">
|
||||
<view class="item ellipsis"><image src="@/static/icons/gemstone-icon.png"/>原石 {{ account.coin }}</view>
|
||||
<view class="item ellipsis"><image src="@/static/icons/crystal-icon.png"/>水晶 {{ account.crystal }}</view>
|
||||
</view>
|
||||
<!-- 矿石 -->
|
||||
<view class="ore">
|
||||
<image src="/static/img/crystal-ore.png" mode="widthFix" />
|
||||
<view class="ore-lists">
|
||||
<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
|
||||
<block v-if="item.amount !== null">
|
||||
<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" />
|
||||
<view class="text">水晶{{ item.amount || '-'}}</view>
|
||||
</block>
|
||||
</view>
|
||||
<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav">
|
||||
<image src="/static/imgs/gemstone-ore-icon.png" mode="widthFix" class="icon" />
|
||||
<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 任务分类 -->
|
||||
<scroll-view class="task-block" scroll-x="true">
|
||||
<!-- url="../index/index" open-type="switchTab" -->
|
||||
<view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
|
||||
<view class="text">{{ item.remark }}</view>
|
||||
<view class="icon">
|
||||
<image :src="item.cover" />
|
||||
</view>
|
||||
<view class="title">{{ item.title }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 内容 -->
|
||||
<view class="content">
|
||||
<!-- 签到 -->
|
||||
<view class="signCont">
|
||||
<view class="content-title">
|
||||
<view class="content-title-text">
|
||||
每日签到
|
||||
<view class="tips">
|
||||
累计天数越多。水晶奖励越多
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-titl-btn" v-if="sign.signCan" @click="signClick">
|
||||
立即签到
|
||||
</view>
|
||||
</view>
|
||||
<view class="sign">
|
||||
<view class="sign-list">
|
||||
<view class="item" v-for="(item, index) in sign.signArr" :key="index">
|
||||
<view class="item-icon item-done" v-if="item.sign">
|
||||
<image src="@/static/imgs/crystal-sign.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="item-icon show" :class="{ active: index == 3 || index == 7 }" v-else><text>+{{ item.crystal }}</text></view>
|
||||
<view class="item-title">{{ item.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sign-text">再签到{{ sign.nextTask.day }}天额外赠送{{ sign.nextTask.diff }}个水晶奖励</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 水晶任务 -->
|
||||
<view class="content-title">
|
||||
<view class="content-title-text">
|
||||
水晶任务
|
||||
</view>
|
||||
</view>
|
||||
<view class="task">
|
||||
<view class="task-item" v-for="(item, index) in task" :key="index" @click="JumpUrl(item.url, item.title)">
|
||||
<image class="task-icon" :src="item.ico" mode="aspectFill"></image>
|
||||
<view class="task-title">{{item.title || '-'}}</view>
|
||||
<view class="task-subtitle">{{item.remark || '-'}}</view>
|
||||
<view class="task-label">{{item.tips || '-'}}<image class="task-label-icon" src="@/static/imgs/user-crystalMark-grey.png" @click.stop="crystalShow"></image></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { crystals, thawlog, task, category, sign, operateSign } from '@/apis/interfaces/crystal'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
account: {
|
||||
coin: 0,
|
||||
crystal: '0.00'
|
||||
},
|
||||
yesterday: '0.00',
|
||||
crystalArr: [],
|
||||
categoryArr: [], // 分类列表
|
||||
ids: [],
|
||||
task: [],
|
||||
sign: {
|
||||
signArr : [],
|
||||
nextTask: '',
|
||||
signCan : false,
|
||||
signShow: false
|
||||
},
|
||||
tips : {
|
||||
tipsTitle : '', // 弹出的动态名称
|
||||
tipsContent : '', // 弹出的动态内容
|
||||
tipsState : false // 弹出的动态状态
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 获取水晶领取信息
|
||||
crystals().then(res => {
|
||||
this.account = {
|
||||
coin: res.coin,
|
||||
crystal: res.crystal
|
||||
}
|
||||
this.crystalArr = res.crystal_array
|
||||
this.ids = res.all_ids
|
||||
this.yesterday = res.yesterday_crystal
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
// 获取水晶任务
|
||||
task().then(res => {
|
||||
this.task = res
|
||||
})
|
||||
|
||||
// 获取水晶分类
|
||||
category().then(res => {
|
||||
this.categoryArr = res
|
||||
})
|
||||
|
||||
// 获取水晶签到信息
|
||||
this.signInfo();
|
||||
|
||||
},
|
||||
methods: {
|
||||
ledCrystal(index) {
|
||||
// 领取水晶
|
||||
thawlog({
|
||||
thaw_id: this.crystalArr[index].log_id,
|
||||
all_ids: this.ids
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '+' + this.crystalArr[index].amount + '水晶',
|
||||
duration: 2000
|
||||
})
|
||||
this.$set(this.account, 'crystal', res.crystal)
|
||||
this.ids = res.all_ids
|
||||
if (JSON.stringify(res.last) === '[]') {
|
||||
this.$set(this.crystalArr, index, {
|
||||
amount: null
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$set(this.crystalArr, index, res.last)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err
|
||||
})
|
||||
})
|
||||
},
|
||||
// 商品详情
|
||||
onTack(e) {
|
||||
uni.navigateTo({
|
||||
url: '../goods/goods?id=' + e.goods_id
|
||||
})
|
||||
},
|
||||
// 提示信息
|
||||
onShowToast() {
|
||||
uni.showToast({
|
||||
title: '暂未开放，敬请期待',
|
||||
icon : 'none'
|
||||
})
|
||||
},
|
||||
// 水晶签到信息
|
||||
signInfo() {
|
||||
sign().then(res => {
|
||||
this.sign.signArr = res.lists
|
||||
this.sign.nextTask = res.next_task
|
||||
this.sign.signCan = res.can_sign
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err
|
||||
})
|
||||
})
|
||||
},
|
||||
// 签到
|
||||
signClick() {
|
||||
uni.vibrateShort({
|
||||
success: () => {
|
||||
operateSign().then(res => {
|
||||
// 获取水晶签到信息
|
||||
this.signInfo();
|
||||
|
||||
this.sign.signShow = !this.sign.signShow
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提示语-组件返回参数
|
||||
signject(val) {
|
||||
console.log(val)
|
||||
this.sign.signShow = val.tipsState
|
||||
},
|
||||
|
||||
// 水晶分类跳转
|
||||
JumpUrl(open, title) {
|
||||
var type = open.openType;
|
||||
switch(type){
|
||||
case 'switchTab':
|
||||
uni.switchTab({
|
||||
url: open.path
|
||||
})
|
||||
break;
|
||||
case 'web':
|
||||
uni.navigateTo({
|
||||
url: `/pages/web-view/index?title=${title}&url=${open.url}`
|
||||
})
|
||||
break;
|
||||
case 'navigateTo':
|
||||
uni.navigateTo({
|
||||
url: open.path
|
||||
})
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// 水晶原则提示语
|
||||
crystalShow () {
|
||||
this.tips.tipsTitle = '水晶规则'
|
||||
this.tips.tipsContent = '水晶是用户获取原石的影响因子，同一时段内，水晶越高，获取的原石越多.'
|
||||
this.tips.tipsState = !this.tips.tipsState
|
||||
},
|
||||
// 水晶原则提示语-组件返回参数
|
||||
tipseject(val) {
|
||||
this.tips.tipsState = val.tipsState
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 水晶漂浮动画 */
|
||||
.oct-float {
|
||||
animation: 4s octfloat infinite;
|
||||
}
|
||||
@keyframes octfloat {
|
||||
0% {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 背景
|
||||
.crystal{
|
||||
background: $mian-color-deep;
|
||||
min-height: 100vh;
|
||||
padding-top: var(--status-bar-height);
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/static/background/crystal-background.png);
|
||||
background-size: 100%;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
// 底部内容
|
||||
.content{
|
||||
margin-top: $margin * 2;
|
||||
padding: $padding;
|
||||
background: white;
|
||||
border-radius: $radius $radius 0 0;
|
||||
// 标题
|
||||
.content-title{
|
||||
padding: 0 $padding / 2;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
.content-title-text {
|
||||
font-weight: bold;
|
||||
font-size: $title-size + 4;
|
||||
width: calc(100% - 160rpx);
|
||||
margin-bottom: $margin;
|
||||
.tips {
|
||||
font-weight: normal;
|
||||
font-size: $title-size-sm;
|
||||
margin-top: $margin - 10;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
}
|
||||
.content-titl-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: $margin;
|
||||
background-image: linear-gradient(to left, $mian-color-deep, $mian-color);
|
||||
color: $uni-text-color-inverse;
|
||||
font-size: $title-size-sm;
|
||||
line-height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: $radius * 2;
|
||||
width: 160rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
// 签到
|
||||
.sign{
|
||||
padding-top: $padding;
|
||||
padding-bottom: $padding * 2;
|
||||
.sign-list{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.item{
|
||||
text-align: center;
|
||||
.item-icon{
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(to left, $mian-color-deep, $mian-color);
|
||||
color: white;
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
line-height: 50rpx;
|
||||
border-radius: 50%;
|
||||
border:solid 2rpx $mian-color;
|
||||
box-sizing: border-box;
|
||||
&.item-done {
|
||||
background-image: linear-gradient(to left, #999, #999);
|
||||
border-color: #999;
|
||||
}
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
&.active {
|
||||
background-image: linear-gradient(to left, #ee1d23, #ef8c85);
|
||||
border-color: #fd6165;
|
||||
}
|
||||
text {
|
||||
font-size: $title-size-sm;
|
||||
transform: scale(.8);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.item-title{
|
||||
color: $text-gray;
|
||||
padding-top: $padding / 2;
|
||||
font-size: $title-size-sm - 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sign-text{
|
||||
padding: $padding ($padding / 2) 0;
|
||||
color: $mian-color-deep;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
// 水晶任务
|
||||
.task{
|
||||
padding: 0 ($padding / 2) $padding * 2;
|
||||
.task-item{
|
||||
position: relative;
|
||||
margin: 0 ($margin / 2);
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
padding: $padding 200rpx $padding 90rpx;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
.task-icon{
|
||||
position: absolute;
|
||||
top: $padding + 8;
|
||||
left: 0;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
// background: $border-color-lg;
|
||||
}
|
||||
.task-title{
|
||||
font-size: $title-size;
|
||||
color: $text-color;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.task-subtitle{
|
||||
color: $text-gray;
|
||||
font-size: $uni-font-size-sm;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.task-label{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: $padding;
|
||||
line-height: 80rpx;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $text-color;
|
||||
display: flex;
|
||||
.task-label-icon {
|
||||
width: $uni-img-size-sm - 6;
|
||||
height: $uni-img-size-sm - 6;
|
||||
margin: $margin + 4 0 0 $margin - 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 数据统计
|
||||
.total {
|
||||
position: relative;
|
||||
margin: $margin ($margin + $margin/2);
|
||||
background: rgba($color: $mian-color-deep, $alpha: .6);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
border-radius: $radius;
|
||||
.item {
|
||||
width: 50%;
|
||||
padding: 0 $padding;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: $title-size-m;
|
||||
line-height: 90rpx;
|
||||
image{
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
vertical-align: top;
|
||||
margin-top: calc((90rpx - 38rpx) / 2);
|
||||
margin-right: $margin / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 2rpx;
|
||||
left: 50%;
|
||||
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7), transparent);
|
||||
}
|
||||
}
|
||||
// 矿石
|
||||
.ore {
|
||||
position: relative;
|
||||
&>image {
|
||||
width: 100%;
|
||||
}
|
||||
.ore-lists {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.oct-float-item{
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
.text {
|
||||
margin-top: $margin / 2;
|
||||
color: white;
|
||||
font-size: $title-size-sm;
|
||||
line-height: 40rpx;
|
||||
text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
|
||||
}
|
||||
.icon {
|
||||
width: 58rpx;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.ore-item-nav{
|
||||
@extend .oct-float-item;
|
||||
right: $margin * 3;
|
||||
top: 12%;
|
||||
}
|
||||
.ore-item {
|
||||
@extend .oct-float-item;
|
||||
&:nth-child(1) { top: 16%; left: 13%; }
|
||||
&:nth-child(2) { top: 50%; right: 10%; }
|
||||
&:nth-child(3) { top: 23%; right: 20%; }
|
||||
&:nth-child(4) { top: 70%; left: 33%;}
|
||||
&:nth-child(5) { top: 40%; left: 20%; }
|
||||
&:nth-child(6) { top: 58%; left: 10%;}
|
||||
&:nth-child(7) { top: 10%; right: 43%;}
|
||||
&:nth-child(8) { top: 46%; right: 29%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 任务
|
||||
.task-block {
|
||||
white-space: nowrap;
|
||||
.item {
|
||||
background: rgba($color: $mian-color, $alpha: .2);
|
||||
display: inline-block;
|
||||
margin-left: $margin;
|
||||
width: 210rpx;
|
||||
padding: $padding * 2 $padding;
|
||||
border-radius: $radius;
|
||||
box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-left: $margin + $margin/2;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: $margin + $margin/2;
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin: $margin 0;
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
line-height: 98rpx;
|
||||
background: $mian-color-deep;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: $title-size-m;
|
||||
color: $mian-color;
|
||||
}
|
||||
.title {
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,484 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
发现能量
|
||||
<!-- 水晶获得公告 -->
|
||||
<view class="notice" v-if="notice.length >= 1">
|
||||
<swiper class="notice-swiper" :vertical="true" autoplay circular>
|
||||
<swiper-item v-for="(item, index) in notice" :key="index">
|
||||
<view class="notice-item">
|
||||
<image class="notice-cover" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="notice-title ellipsis">{{item.nickname}} {{item.title}} {{item.amount}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 账户余额 -->
|
||||
<view class="info">
|
||||
<view class="info-number">
|
||||
<image class="number-background number-rotate" src="@/static/background/chain-back-01.png" />
|
||||
<view class="info-content webkit-box">
|
||||
<view class="text">{{isAuth ? '持有原石量': '恒量发行原石量'}}<uni-icons class="help-icon" @click="showHelp('occ')" type="help-filled" size="18" color="#fff" /></view>
|
||||
<view class="number">{{occ}}</view>
|
||||
<view class="login" @click="$Router.push({name: 'Login'})" v-if="!isAuth">立即登录</view>
|
||||
<view class="login" @click="openWallet" v-else>我的钱包</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 公告信息 -->
|
||||
<!-- <view class="increase">今日消费100元，预计原石单价增长0.1%</view> -->
|
||||
<!-- 平台概况 -->
|
||||
<view class="situation">
|
||||
<view class="header">
|
||||
<view class="header-item">
|
||||
<view class="title">平台原石余量<uni-icons class="help-icon" @click="showHelp('occBalance')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="number ellipsis">{{ occBalance }}</view>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<view class="title">昨日瓜分水晶<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="number ellipsis">{{ yesterdayCrystal }}</view>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('blockHeight')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="number ellipsis">{{ blockHeight }}</view>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<view class="title">平台累计盈利额<uni-icons class="help-icon" @click="showHelp('gain')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="number ellipsis">{{ gain }}</view>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('nodeNumber')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="number ellipsis">{{ nodeNumber }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 节点信息 -->
|
||||
<view class="node-info">
|
||||
<view class="node-item">
|
||||
<view class="title">轻节点</view>
|
||||
<view class="number ellipsis">{{occs.light || '-'}}</view>
|
||||
</view>
|
||||
<view class="node-item">
|
||||
<view class="title">合作节点</view>
|
||||
<view class="number ellipsis">{{occs.cooperation || '-'}}</view>
|
||||
</view>
|
||||
<view class="node-item">
|
||||
<view class="title">主节点</view>
|
||||
<view class="number ellipsis">{{occs.main || '-'}}</view>
|
||||
</view>
|
||||
<view class="node-item">
|
||||
<view class="title">超级节点</view>
|
||||
<view class="number ellipsis">{{occs.super || '-'}}</view>
|
||||
</view>
|
||||
<view class="node-item">
|
||||
<view class="title">运营节点</view>
|
||||
<view class="number ellipsis">{{occs.operating || '-'}}</view>
|
||||
</view>
|
||||
<view class="node-item">
|
||||
<view class="title">技术节点</view>
|
||||
<view class="number ellipsis">{{occs.technology || '-'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 平台盈利额，原石数量 -->
|
||||
<view class="chart">
|
||||
<view class="title">平台累计营业额和原石价值走势图</view>
|
||||
<view class="chart-f2">
|
||||
<l-f2 ref="chartChange"></l-f2>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { occ } from '@/apis/interfaces/chain'
|
||||
import { certified, security } from '@/apis/interfaces/index'
|
||||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
||||
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||
export default {
|
||||
components: {
|
||||
lF2
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
occs: {},
|
||||
blockHeight: 0,
|
||||
occBalance: 0,
|
||||
occ: 0,
|
||||
yesterdayCrystal: 0,
|
||||
gain: 0,
|
||||
nodeNumber: 0,
|
||||
notice: [],
|
||||
isAuth: false,
|
||||
helpToast: {
|
||||
occ: '恒量发行原石量',
|
||||
occBalance: '平台原石量',
|
||||
yesterdayCrystal: '昨日瓜分水晶',
|
||||
blockHeight: '区块链高度',
|
||||
gain: '平台累计盈利额',
|
||||
nodeNumber: '已开通节点数'
|
||||
}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if(this.$store.state.token != '') this.isAuth = true
|
||||
this.getOcc()
|
||||
},
|
||||
methods:{
|
||||
// 求助信息
|
||||
showHelp(type) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: this.helpToast[type],
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
// 原石钱包
|
||||
openWallet(){
|
||||
Promise.all([certified(), security()]).then(res=> {
|
||||
let certified = res[0],
|
||||
security = res[1]
|
||||
if(!certified){
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您还为完成个人认证，无法激活您的钱包',
|
||||
confirmText: '去认证',
|
||||
confirmColor: '#009B69',
|
||||
cancelColor: '#666666',
|
||||
cancelText: '稍后再说',
|
||||
success: res=> {
|
||||
if(res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/certification/personal'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
if(!security) {
|
||||
uni.showModal({
|
||||
title: '激活提示',
|
||||
content: '您的钱包未激活，是否立即导出助记词并激活您的钱包?',
|
||||
confirmText: '去激活',
|
||||
confirmColor: '#009B69',
|
||||
cancelColor: '#666666',
|
||||
cancelText: '稍后再说',
|
||||
success: res=> {
|
||||
if(res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/wallet/add'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/wallet/property'
|
||||
})
|
||||
})
|
||||
},
|
||||
// occ信息
|
||||
getOcc(){
|
||||
occ().then(res => {
|
||||
this.occs = res.occs
|
||||
this.yesterdayCrystal = res.yesterday_crystal
|
||||
this.occ = res.occ
|
||||
this.occBalance = res.occ_balance
|
||||
this.blockHeight = res.block_height
|
||||
this.gain = res.gain
|
||||
this.nodeNumber = res.node_number
|
||||
this.notice = res.notice
|
||||
if(res.help_toast) this.helpToast = res.help_toast
|
||||
this.showCartc(res.movements)
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
// 绘制图表
|
||||
showCartc(data){
|
||||
// 图表信息
|
||||
this.$refs.chartChange.init(config => {
|
||||
config.appendPadding = [10, 15, 10, 15]
|
||||
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(data, {
|
||||
date: {
|
||||
range: [0, 1],
|
||||
type: 'timeCat',
|
||||
mask: 'MM-DD'
|
||||
},
|
||||
value: {
|
||||
tickCount: 5
|
||||
}
|
||||
});
|
||||
chart.axis('time', {
|
||||
line: null,
|
||||
label: function label(text, index, total) {
|
||||
const textCfg = {};
|
||||
if (index === 0) {
|
||||
textCfg.textAlign = 'left';
|
||||
} else if (index === total - 1) {
|
||||
textCfg.textAlign = 'right';
|
||||
}
|
||||
return textCfg;
|
||||
}
|
||||
});
|
||||
chart.axis('tem', {
|
||||
grid: function grid(text) {
|
||||
if (text === '0%') {
|
||||
return {
|
||||
lineDash: null,
|
||||
lineWidth: 1
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
chart.tooltip({
|
||||
showCrosshairs: true
|
||||
});
|
||||
chart.legend({
|
||||
position: 'bottom',
|
||||
offsetY: 0,
|
||||
offsetX: 30
|
||||
});
|
||||
chart.area()
|
||||
.position('date*value')
|
||||
.color('name', [ '#009b69', '#9f8052' ])
|
||||
.shape('smooth')
|
||||
chart.line()
|
||||
.position('date*value')
|
||||
.color('name', [ '#009b69', '#9f8052' ])
|
||||
.shape('smooth', name=> {
|
||||
if (name === '预期收益率') {
|
||||
return 'line';
|
||||
}
|
||||
if (name === '实际收益率') {
|
||||
return 'dash';
|
||||
}
|
||||
});
|
||||
chart.render();
|
||||
return chart;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
<style scoped>
|
||||
/* 气泡漂浮 */
|
||||
.number-float{
|
||||
animation: 4s octfloat infinite;
|
||||
}
|
||||
@keyframes octfloat{
|
||||
0%{
|
||||
margin-top: 0;
|
||||
}
|
||||
50%{
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
100%{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
/* 背景旋转 */
|
||||
.number-rotate{
|
||||
animation: 30s octrotate infinite linear;
|
||||
}
|
||||
@keyframes octrotate{
|
||||
from{
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
to{
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// 背景
|
||||
.content{
|
||||
background: $mian-color-deep;
|
||||
min-height: 100vh;
|
||||
padding-top: var(--status-bar-height);
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/static/background/chain-back-00.png);
|
||||
background-size: 100%;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
// 求助icon
|
||||
.help-icon{
|
||||
vertical-align: middle;
|
||||
margin-bottom: 4px;
|
||||
margin-left: $margin/2;
|
||||
opacity: .7;
|
||||
}
|
||||
// 原石账户
|
||||
.info{
|
||||
margin-top: calc(#{$margin * 2} + 60rpx);
|
||||
padding: var(--status-bar-height) $padding * 2 $padding * 3;
|
||||
text-align: center;
|
||||
.info-number{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 568rpx;
|
||||
height: 568rpx;
|
||||
.number-background{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.info-content{
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 12%;
|
||||
width: 76%;
|
||||
height: 76%;
|
||||
background-image: url(@/static/background/chain-back-02.png);
|
||||
background-size: cover;
|
||||
color: white;
|
||||
.text{
|
||||
font-size: $title-size-m;
|
||||
text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
|
||||
}
|
||||
.number{
|
||||
font-weight: bold;
|
||||
font-size: $title-size + 8;
|
||||
line-height: 70rpx;
|
||||
text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
|
||||
}
|
||||
.login{
|
||||
margin-top: $margin;
|
||||
background-color: $mian-color;
|
||||
display: inline-block;
|
||||
padding: ( $padding / 2 ) $padding;
|
||||
font-size: $title-size-m;
|
||||
border-radius: 30rpx;
|
||||
border:solid 1rpx $mian-color-deep;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 预计增长
|
||||
.increase{
|
||||
margin: 0 ($margin + $margin / 2) ($margin * 2);
|
||||
background: rgba($color: $mian-color, $alpha: .1);
|
||||
text-align: center;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: $title-size-m;
|
||||
color: $mian-color;
|
||||
border-radius: $radius-sm;
|
||||
padding: 0 $padding;
|
||||
}
|
||||
// 公告信息
|
||||
.notice{
|
||||
position: fixed;
|
||||
top: $margin * 2;
|
||||
left: $margin + $margin / 2;
|
||||
right: $margin + $margin / 2;
|
||||
padding-top: var(--status-bar-height);
|
||||
z-index: 99;
|
||||
.notice-swiper{
|
||||
height: 60rpx;
|
||||
}
|
||||
.notice-item{
|
||||
position: relative;
|
||||
height: 60rpx;
|
||||
padding-left: 80rpx;
|
||||
padding-right: $padding * 2;
|
||||
display: inline-block;
|
||||
background: rgba($color: $mian-color-deep, $alpha: .3);
|
||||
border-radius: 30rpx;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
.notice-cover{
|
||||
position: absolute;
|
||||
height: 60rpx;
|
||||
width: 60rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $mian-color-deep;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.notice-title{
|
||||
line-height: 60rpx;
|
||||
color: white;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 平台概况
|
||||
.situation{
|
||||
margin: 0 ($margin + $margin / 2);
|
||||
background-image: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .1), $mian-color-deep);
|
||||
border-radius: $radius-sm;
|
||||
padding: $padding;
|
||||
// 平台统计
|
||||
.header{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: $margin*2;
|
||||
.number{
|
||||
color: white;
|
||||
font-size: $title-size + 4;
|
||||
font-weight: bold;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.title{
|
||||
color: $mian-color;
|
||||
font-weight: bold;
|
||||
font-size: $title-size-sm;
|
||||
}
|
||||
.header-item{
|
||||
width: 50%;
|
||||
padding: $padding $padding / 2;
|
||||
box-sizing: border-box;
|
||||
&:first-child{
|
||||
width: 100%;
|
||||
.number{
|
||||
font-size: $title-size + 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 节点信息
|
||||
.node-info{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -$margin / 2;
|
||||
.node-item{
|
||||
background: rgba($color: $mian-color, $alpha: .2);
|
||||
width: calc(50% - #{$margin});
|
||||
margin: $margin / 2;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
border-radius: $radius-sm;
|
||||
}
|
||||
.number{
|
||||
font-size: $title-size + 4;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.title{
|
||||
font-size: $title-size-m;
|
||||
font-weight: bold;
|
||||
color: rgba($color: white, $alpha: .7);
|
||||
}
|
||||
}
|
||||
// 图表
|
||||
.chart{
|
||||
background: rgba($color: $mian-color, $alpha: .2);
|
||||
padding: $padding;
|
||||
border-radius: $radius-sm;
|
||||
margin-top: $margin*2;
|
||||
.title{
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
color: rgba($color: $mian-color, $alpha: 1.0);
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
.chart-f2{
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,6 +10,8 @@ $text-color: #333;
|
||||
$text-gray: #555;
|
||||
$text-gray-m: #999;
|
||||
$text-price: #8b64fd;
|
||||
$mian-color: #8b64fd;
|
||||
$mian-color-deep: #824f9a;
|
||||
|
||||
// 边框颜色
|
||||
$border-color: #ddd;
|
||||
@@ -23,6 +25,7 @@ $title-size-sm: 26rpx;
|
||||
|
||||
// 模块圆角
|
||||
$radius: 20rpx;
|
||||
$radius-sm: 10rpx;
|
||||
|
||||
// 模块边距
|
||||
$margin: 30rpx;
|
||||
|
||||
BIN
static/background/chain-back-00.png
Normal file
BIN
static/background/chain-back-00.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
BIN
static/background/chain-back-01.png
Normal file
BIN
static/background/chain-back-01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
static/background/chain-back-02.png
Normal file
BIN
static/background/chain-back-02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
static/background/crystal-background.png
Normal file
BIN
static/background/crystal-background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
BIN
static/background/idcard-positive.png
Normal file
BIN
static/background/idcard-positive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
static/background/idcard-reverse.png
Normal file
BIN
static/background/idcard-reverse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
static/background/wallet-back.png
Normal file
BIN
static/background/wallet-back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
BIN
static/background/wallet-code-background.png
Normal file
BIN
static/background/wallet-code-background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/icons/crystal-icon.png
Normal file
BIN
static/icons/crystal-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
static/icons/gemstone-icon.png
Normal file
BIN
static/icons/gemstone-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
static/imgs/crystal-sign.png
Normal file
BIN
static/imgs/crystal-sign.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
BIN
static/imgs/user-crystalMark-grey.png
Normal file
BIN
static/imgs/user-crystalMark-grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
149
uni_modules/lime-f2/changelog.md
Normal file
149
uni_modules/lime-f2/changelog.md
Normal file
@@ -0,0 +1,149 @@
|
||||
## 0.5.1（2021-05-14）
|
||||
- feat: props 增加 `isDisableScroll` ，触摸图表时是否禁止页面滚动
|
||||
- feat: props 增加 `webviewStyles` ，webview 的样式, 仅nvue有效
|
||||
## 0.5.0（2021-05-13）
|
||||
- docs: 插件用到了css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装它
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.9（2021-05-12）
|
||||
- fix: 修复 百度平台 多个图表时 只生效一个的bug
|
||||
## 0.4.8（2021-05-10）
|
||||
- feat: 增加 `destroy` 方法，用于销毁实例
|
||||
- feat: 增加 `canvasToTempFilePath` 方法，用于生成图片
|
||||
```js
|
||||
this.$refs.chart.canvasToTempFilePath({success: res => {
|
||||
console.log('tempFilePath:', res.tempFilePath)
|
||||
}})
|
||||
```
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
|
||||
## 0.4.7（2021-05-10）
|
||||
- chore: F2 版本更新至 3.8.7
|
||||
## 0.4.6（2021-05-05）
|
||||
- docs: nvue 使用文档更新
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5.7（2021-04-30）
|
||||
- chore: nvue 增强 支持 console.log 输出到控制台方便调试
|
||||
- docs: nvue 使用文档更新，不再需要声明F2
|
||||
## 0.4.5.6（2021-04-29）
|
||||
- fix: nvue 修复打包后 函数字符串被压缩无效的问题
|
||||
- 若发现打包依然无效可使用直接返回字符串
|
||||
```js
|
||||
this.$refs.chart.init(config => {
|
||||
return `
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(data);
|
||||
chart
|
||||
.interval()
|
||||
.position('genre*sold')
|
||||
.color('genre');
|
||||
chart.render();
|
||||
return chart;
|
||||
`
|
||||
},{data});
|
||||
```
|
||||
- chore: 新增支持词云能力，头条小程序需要1.78.0后
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5.5（2021-04-25）
|
||||
- fix: 修复新版谷歌浏览器(90.0.4430.85) 报 `transform ` 的问题
|
||||
## 0.4.5.4（2021-04-23）
|
||||
- fix: 修复支付宝小程序尺寸问题
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5.3（2021-04-22）
|
||||
- chore: 删除多余console.log
|
||||
## 0.4.5.2（2021-04-21）
|
||||
- chore: 修复字节颜色报错的问题。
|
||||
## 0.4.5.1（2021-04-18）
|
||||
- chore: 增加默认尺寸 **300 x 300** , 当父级没有尺寸时启用。
|
||||
- 由于 F2 **云图** 依赖的 `@antv/data-set` 只支持H5创建Canvas，所以暂时只有 H5 支持。
|
||||
- 由于 F2 对绘制地图 不佳，故地图示例南海诸岛使用图片。
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5（2021-04-16）
|
||||
- fix: 修复 app-vue 字体固定问题
|
||||
- fix: 修复 h5 app-vue 画多边形尺寸过大
|
||||
- fix: 修复 初始化 func 问题
|
||||
- docs: 增加 矩形式树图 示例
|
||||
- 由于 F2 **云图** 依赖的 `@antv/data-set` 只支持H5创建Canvas，所以暂时只有 H5 支持。
|
||||
## 0.4.4.1（2021-04-16）
|
||||
- chore: 更改 `webview` 地址
|
||||
## 0.4.4（2021-04-16）
|
||||
- chore: `nvue` 增加 chart.$emit 事件，主要用于图表交互，接收动作事件数据。
|
||||
```html
|
||||
<l-f2 @change="onChange" />
|
||||
```
|
||||
```js
|
||||
chart.tooltip({
|
||||
onChange: (ev) => {
|
||||
chart.$emit('change', ev)
|
||||
}
|
||||
})
|
||||
```
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.3.1（2021-04-14）
|
||||
- docs: 更新官网上的代码示例！复制粘贴即用
|
||||
## [代码示例 http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.3（2021-04-13）
|
||||
- chore: 增加`onInit`的属性函数，直接向图表传递初始化函数
|
||||
```html
|
||||
<l-f2 :onInit="onInitChart" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data: ()=>({
|
||||
onInitChart: config => {
|
||||
const chart = new F2.Chart(config);
|
||||
const data = [
|
||||
{ value: 63.4, city: 'New York', date: '2011-10-01' },
|
||||
{ value: 62.7, city: 'Alaska', date: '2011-10-01' },
|
||||
{ value: 72.2, city: 'Austin', date: '2011-10-01' },
|
||||
{ value: 58, city: 'New York', date: '2011-10-02' },
|
||||
{ value: 59.9, city: 'Alaska', date: '2011-10-02' },
|
||||
{ value: 67.7, city: 'Austin', date: '2011-10-02' },
|
||||
{ value: 53.3, city: 'New York', date: '2011-10-03' },
|
||||
{ value: 59.1, city: 'Alaska', date: '2011-10-03' },
|
||||
{ value: 69.4, city: 'Austin', date: '2011-10-03' },
|
||||
];
|
||||
chart.source(data, {
|
||||
date: {
|
||||
range: [0, 1],
|
||||
type: 'timeCat',
|
||||
mask: 'MM-DD'
|
||||
},
|
||||
value: {
|
||||
max: 300,
|
||||
tickCount: 4
|
||||
}
|
||||
});
|
||||
chart.area().position('date*value').color('city').adjust('stack');
|
||||
chart.line().position('date*value').color('city').adjust('stack');
|
||||
chart.render();
|
||||
// 注意：需要把chart return 出来
|
||||
return chart;
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
## 0.4.2（2021-04-09）
|
||||
- chore: `nvue` webview 改为网络地址
|
||||
## 0.4.1（2021-04-09）
|
||||
- chore: `redraw(callback)` 更名为 `reset(callback)`
|
||||
- fix: 修复 `nvue` 某些情况下无法传递函数字符串
|
||||
- feat: 增加 `nvue` 下使用 `insertCss` 给节点设置 style
|
||||
## 0.4.0（2021-04-08）
|
||||
- chore: antv F2 version 更新到 `3.8.6`
|
||||
- feat: `f2-all`,`f2-simple`等文件，默认只提供`f2.min.js`,如果需要`f2-all`或`f2-simple`可去码云下载按自已需要引入！
|
||||
- fix: 修复钉钉小程序measureText undefined的问题
|
||||
- fix: 修复小程序因`hammer`引用报错
|
||||
## 0.3.0（2021-04-06）
|
||||
- feat: `redraw(callback)` 方法重绘
|
||||
- feat: `clear()` 方法清空图表
|
||||
- feat: `changeData(data)` 方法更新图表，需要传数据
|
||||
- feat: `repaint()` 方法更新图表：`source` 数据源 更新后，在需要的时候调用
|
||||
- feat: `source` 数据源 和 `is-auto-play` 开启自动更新，配置这两个参数只要 `source` 数据源更新，就会更新图表
|
||||
## 0.2.2（2021-04-05）
|
||||
- fix: 修复微信小程序缺少`Transform`报错问题
|
||||
## 0.2.1（2021-04-04）
|
||||
- chore: 考虑到不是所有人需要 `nvue`，所以 `webview` 改为网络路径 , 当然你也可以把html下载放置到项目根目录的`hybrid`文件夹下
|
||||
## 0.2.0（2021-04-04）
|
||||
- chore: 基于 `webview` 实现兼容 `nvue`
|
||||
## 0.1.0（2021-04-02）
|
||||
- chore: 第一次上传，基本全端兼容，使用方法与官网一致。
|
||||
121
uni_modules/lime-f2/components/lime-f2/canvas.js
Normal file
121
uni_modules/lime-f2/components/lime-f2/canvas.js
Normal file
@@ -0,0 +1,121 @@
|
||||
import {
|
||||
pixelRatio,
|
||||
sleep
|
||||
} from './utils';
|
||||
|
||||
const UNI_CANVAS_CONTEXT_MAP = {
|
||||
// #ifndef MP-WEIXIN
|
||||
fillStyle: 'FillStyle',
|
||||
fontSize: 'FontSize',
|
||||
globalAlpha: 'GlobalAlpha',
|
||||
opacity: 'GlobalAlpha',
|
||||
lineCap: 'LineCap',
|
||||
lineJoin: 'LineJoin',
|
||||
lineWidth: 'LineWidth',
|
||||
miterLimit: 'MiterLimit',
|
||||
strokeStyle: 'StrokeStyle',
|
||||
textAlign: 'TextAlign',
|
||||
textBaseline: 'TextBaseline',
|
||||
shadow: 'Shadow',
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO || H5 || APP-PLUS
|
||||
font: 'FontSize',
|
||||
// #endif
|
||||
};
|
||||
|
||||
function strLen(str) {
|
||||
let len = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
||||
len++;
|
||||
} else {
|
||||
len += 2;
|
||||
}
|
||||
}
|
||||
return len;
|
||||
}
|
||||
|
||||
// 头条小程序目前仅支持 setFontSize
|
||||
// f2 会将所有属性整合为 font 简写，从中提取 fontSize 支持
|
||||
const fontSizeReg = /(\d*\.?\d*)px/;
|
||||
const colorReg = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])\b/g;
|
||||
export default (ctx) => {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
ctx.uniTransform = ctx.transform
|
||||
ctx.transform = (...agrs) => {
|
||||
if (ctx.draw && agrs[6]) {
|
||||
agrs[4] *= pixelRatio
|
||||
agrs[5] *= pixelRatio
|
||||
}
|
||||
if (agrs.length > 6) {
|
||||
agrs.pop()
|
||||
}
|
||||
ctx.uniTransform(...agrs)
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
ctx.canvasGetImageData = ctx.getImageData
|
||||
ctx.getImageData = null
|
||||
// #endif
|
||||
if (!ctx.getImageData) {
|
||||
ctx.getImageData = (...agrs) => {
|
||||
const [x, y, width, height] = agrs
|
||||
return new Promise(resolve => {
|
||||
const parms = {
|
||||
canvasId: ctx.id || ctx.canvasId,
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
success: res => {
|
||||
resolve(res.data)
|
||||
}
|
||||
}
|
||||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||
uni.canvasGetImageData(parms)
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
||||
ctx.canvasGetImageData(parms)
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
}
|
||||
// 钉钉小程序框架不支持 measureText 方法，用此方法 mock
|
||||
if (!ctx.measureText) {
|
||||
ctx.measureText = text => {
|
||||
let fontSize = 12;
|
||||
const font = ctx.__font;
|
||||
if (font) {
|
||||
fontSize = parseInt(font.split(' ')[3], 10);
|
||||
}
|
||||
fontSize /= 2;
|
||||
return {
|
||||
width: strLen(text) * fontSize
|
||||
};
|
||||
}
|
||||
}
|
||||
Object.keys(UNI_CANVAS_CONTEXT_MAP).forEach(key => {
|
||||
Object.defineProperty(ctx, key, {
|
||||
set(val) {
|
||||
const name = `set${UNI_CANVAS_CONTEXT_MAP[key]}`;
|
||||
if (!ctx[name]) {
|
||||
return;
|
||||
}
|
||||
if (key === 'font' && fontSizeReg.test(val)) {
|
||||
const match = fontSizeReg.exec(val);
|
||||
ctx[name](match[1]);
|
||||
return;
|
||||
}
|
||||
if (key === 'shadow' && Array.isArray(val)) {
|
||||
ctx[name](...val);
|
||||
return;
|
||||
}
|
||||
if(colorReg.test(val)) {
|
||||
val = val.replace(colorReg, '#$1$1$2$2$3$3')
|
||||
}
|
||||
ctx[name](val);
|
||||
}
|
||||
});
|
||||
});
|
||||
return ctx
|
||||
}
|
||||
15
uni_modules/lime-f2/components/lime-f2/f2.min.js
vendored
Normal file
15
uni_modules/lime-f2/components/lime-f2/f2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
437
uni_modules/lime-f2/components/lime-f2/index.vue
Normal file
437
uni_modules/lime-f2/components/lime-f2/index.vue
Normal file
@@ -0,0 +1,437 @@
|
||||
<template>
|
||||
<view class="l-f2" :style="customStyle" v-if="canvasId">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<cover-view class="l-f2__mask" v-if="isMask"></cover-view>
|
||||
<canvas
|
||||
class="l-f2__canvas"
|
||||
v-if="use2dCanvas"
|
||||
type="2d"
|
||||
:id="canvasId"
|
||||
:style="'width:' + width + 'px;height:' + height + 'px'"
|
||||
:disable-scroll="isDisableScroll"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
/>
|
||||
<canvas
|
||||
class="l-f2__canvas"
|
||||
v-else
|
||||
:width="nodeWidth"
|
||||
:height="nodeHeight"
|
||||
:style="'width:' + width + 'px;height:' + height + 'px'"
|
||||
:canvas-id="canvasId"
|
||||
:id="canvasId"
|
||||
:disable-scroll="isDisableScroll"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
/>
|
||||
<view v-if="isCloud" style="width:2048px; height:2048px; position: fixed; left: 9999px;">
|
||||
<canvas v-if="use2dCanvas" type="2d" :canvas-id="canvasId + '_cloud'" :id="canvasId + '_cloud'" class="l-f2__canvas"></canvas>
|
||||
<canvas v-else :canvas-id="canvasId + '_cloud'" :id="canvasId + '_cloud'" class="l-f2__canvas"></canvas>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<web-view
|
||||
class="l-f2__canvas"
|
||||
:id="canvasId"
|
||||
ref="webview"
|
||||
:webviewStyles="webviewStyles"
|
||||
src="http://liangei.gitee.io/limeui/hybrid/html/lime-ui/lime-f2/index.html?v=0.4.8"
|
||||
@pagefinish="isFinish = true"
|
||||
@onPostMessage="onMessage"
|
||||
></web-view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// #ifndef APP-NVUE
|
||||
import extendContext from './canvas';
|
||||
import { compareVersion, wrapEvent, pixelRatio } from './utils';
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
import { base64ToPath } from './utils';
|
||||
// #endif
|
||||
export default {
|
||||
// version: '0.5.1'
|
||||
name: 'l-f2',
|
||||
props: {
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
type: {
|
||||
type: String,
|
||||
default: '2d'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
webviewStyles: Object,
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
// #endif
|
||||
customStyle: String,
|
||||
imageMask: String,
|
||||
source: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
isAutoPlay: Boolean,
|
||||
isDisableScroll: Boolean,
|
||||
isCloud: Boolean,
|
||||
onInit: {
|
||||
type: [Function, Object],
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
use2dCanvas: true,
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN || MP-TOUTIAO
|
||||
use2dCanvas: false,
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
width: null,
|
||||
height: null,
|
||||
nodeWidth: null,
|
||||
nodeHeight: null,
|
||||
isMask: false,
|
||||
isInited: false,
|
||||
imageData: null,
|
||||
config: {},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
isFinish: false,
|
||||
file: ''
|
||||
// #endif
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canvasId() {
|
||||
return `l-f2${this._uid}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isAutoPlay(val) {
|
||||
if (val) {
|
||||
this.changeData(this.source);
|
||||
}
|
||||
},
|
||||
source: {
|
||||
handler: function(data) {
|
||||
if (this.isAutoPlay) {
|
||||
this.changeData(data);
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clear();
|
||||
this.destroy();
|
||||
},
|
||||
created() {
|
||||
this.isMask = this.isCloud && this.imageMask;
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
const { SDKVersion, version, platform, environment } = uni.getSystemInfoSync();
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '2.9.2') >= 0 && !((/ios/i.test(platform) && /7.0.20/.test(version)) || /wxwork/i.test(environment));
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '1.78.0') >= 0;
|
||||
// #endif
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
if (this.onInit) {
|
||||
this.init(this.onInit);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef APP-NVUE
|
||||
onMessage(e) {
|
||||
const res = e?.detail?.data[0] || null;
|
||||
if (res?.event) {
|
||||
this.$emit(res.event, JSON.parse(res.data));
|
||||
} else if (res?.file) {
|
||||
this.file = res.data;
|
||||
} else {
|
||||
console.error(res);
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
async init(func, params = null) {
|
||||
// #ifdef APP-NVUE
|
||||
this.$watch(
|
||||
'isFinish',
|
||||
(n, o) => {
|
||||
(n || o) && (params || this.params) && this.$refs.webview.evalJs(`init(${JSON.stringify(func.toString())}, ${JSON.stringify(params || this.params)})`);
|
||||
this.isInited = true;
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
let config = await this.getContext(this.canvasId);
|
||||
if (this.isCloud) {
|
||||
let imageMask = null;
|
||||
if (this.imageMask) {
|
||||
this.isMask = true;
|
||||
imageMask = await this.getImageMask(config);
|
||||
this.imageData = imageMask;
|
||||
this.isMask = false;
|
||||
}
|
||||
let cloud = await this.getContext(this.canvasId + '_cloud');
|
||||
config = Object.assign({}, config, { cloud, imageMask });
|
||||
}
|
||||
const chart = await func(config);
|
||||
if (chart) {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
chart.repaint();
|
||||
// #endif
|
||||
this.chart = chart;
|
||||
this.canvasEl = chart.get('el');
|
||||
this.isInited = true;
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
changeData(data) {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.chart) {
|
||||
this.chart.changeData(data || this.source);
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`changeData(${JSON.stringify(data || this.source)})`);
|
||||
// #endif
|
||||
},
|
||||
clear() {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.chart) {
|
||||
this.chart.clear();
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`clear()`);
|
||||
// #endif
|
||||
},
|
||||
destroy() {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`destroy()`);
|
||||
// #endif
|
||||
},
|
||||
repaint() {
|
||||
this.changeData(this.source);
|
||||
},
|
||||
reset(func, params = null) {
|
||||
// #ifndef APP-NVUE
|
||||
this.$watch(
|
||||
'isInited',
|
||||
v => v && func(this.chart),
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`reset(${JSON.stringify(func.toString())}, ${JSON.stringify(params || this.params)})`);
|
||||
// #endif
|
||||
},
|
||||
canvasToTempFilePath(args = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
const { use2dCanvas, canvasId, config } = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
const copyArgs = Object.assign(
|
||||
{
|
||||
canvasId,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
},
|
||||
args
|
||||
);
|
||||
if (use2dCanvas) {
|
||||
let { canvas } = config[canvasId];
|
||||
delete copyArgs.canvasId;
|
||||
copyArgs.canvas = canvas;
|
||||
}
|
||||
uni.canvasToTempFilePath(copyArgs, this);
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.file = '';
|
||||
this.$refs.webview.evalJs(`canvasToTempFilePath()`);
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$watch('file', async file => {
|
||||
if (file) {
|
||||
const tempFilePath = await base64ToPath(file);
|
||||
resolve(args.success({ tempFilePath }));
|
||||
} else {
|
||||
reject(args.fail({ error: `` }));
|
||||
}
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// #ifndef APP-NVUE
|
||||
getImageMask(config) {
|
||||
return new Promise(resolve => {
|
||||
uni.getImageInfo({
|
||||
src: this.imageMask,
|
||||
success: async res => {
|
||||
if (res.path) {
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
|
||||
const localReg = /^\.|^\/(?=[^\/])/;
|
||||
res.path = localReg.test(this.imageMask) ? `/${res.path}` : res.path;
|
||||
// #endif
|
||||
const { context, width, height, canvas } = config;
|
||||
if (this.use2dCanvas) {
|
||||
const imageMask = () => {
|
||||
const imageMask = canvas.createImage();
|
||||
imageMask.crossOrigin = '';
|
||||
imageMask.src = res.path;
|
||||
imageMask.onload = async () => {
|
||||
context.drawImage(imageMask, 0, 0, res.width, res.height, 0, 0, width, height);
|
||||
const imageData = context.getImageData(0, 0, width, height).data;
|
||||
context.clearRect(0, 0, width, height);
|
||||
resolve(imageData);
|
||||
};
|
||||
};
|
||||
imageMask();
|
||||
} else {
|
||||
// #ifndef MP-BAIDU
|
||||
context.drawImage(res.path, 0, 0, res.width, res.height, 0, 0, width, height);
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
context.drawImage(res.path, 0, 0, width, height, 0, 0, res.width, res.height);
|
||||
// #endif
|
||||
await this.canvasDraw(context);
|
||||
const imageData = await context.getImageData(0, 0, width, height);
|
||||
context.clearRect(0, 0, width, height);
|
||||
await this.canvasDraw(context);
|
||||
resolve(imageData);
|
||||
}
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
console.error(JSON.stringify(err));
|
||||
resolve(null);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
canvasDraw(ctx) {
|
||||
return new Promise(resolve => {
|
||||
ctx.draw(false, () => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
},
|
||||
getContext(canvasId) {
|
||||
const { use2dCanvas, type = '2d', config } = this;
|
||||
if (config[canvasId]?.context) {
|
||||
return Promise.resolve(config[canvasId]);
|
||||
}
|
||||
if (use2dCanvas) {
|
||||
return new Promise(resolve => {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(`#${canvasId}`)
|
||||
.fields({
|
||||
node: true,
|
||||
size: true
|
||||
})
|
||||
.exec(res => {
|
||||
let { node, width, height } = res[0];
|
||||
width = width || 300;
|
||||
height = height || 300;
|
||||
const context = node.getContext(type);
|
||||
if (!canvasId.includes('_cloud')) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
}
|
||||
node.width = width * pixelRatio;
|
||||
node.height = height * pixelRatio;
|
||||
this.config[canvasId] = { context: extendContext(context), width, height, pixelRatio, canvas: node };
|
||||
resolve(this.config[canvasId]);
|
||||
});
|
||||
});
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(`#${canvasId}`)
|
||||
.boundingClientRect()
|
||||
.exec(res => {
|
||||
if (res) {
|
||||
let { width, height } = res[0];
|
||||
width = width || 300;
|
||||
height = height || 300;
|
||||
const context = uni.createCanvasContext(canvasId, this);
|
||||
if (!canvasId.includes('_cloud')) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
// #ifdef MP-ALIPAY
|
||||
this.nodeWidth = width * pixelRatio;
|
||||
this.nodeHeight = height * pixelRatio;
|
||||
// #endif
|
||||
}
|
||||
this.config[canvasId] = { context: extendContext(context), width, height, pixelRatio };
|
||||
resolve(this.config[canvasId]);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
touchStart(e) {
|
||||
if (this.canvasEl) {
|
||||
this.canvasEl.dispatchEvent('touchstart', wrapEvent(e));
|
||||
}
|
||||
},
|
||||
touchMove(e) {
|
||||
if (this.canvasEl) {
|
||||
this.canvasEl.dispatchEvent('touchmove', wrapEvent(e));
|
||||
}
|
||||
},
|
||||
touchEnd(e) {
|
||||
if (this.canvasEl) {
|
||||
this.canvasEl.dispatchEvent('touchend', wrapEvent(e));
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="stylus">
|
||||
full()
|
||||
// #ifndef APP-NVUE
|
||||
width 100%
|
||||
height 100%
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
flex 1
|
||||
// #endif
|
||||
.l-f2
|
||||
full()
|
||||
position relative
|
||||
&__mask
|
||||
position absolute
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
top 0
|
||||
background-color #fff
|
||||
z-index 1
|
||||
&__canvas
|
||||
full()
|
||||
</style>
|
||||
65
uni_modules/lime-f2/components/lime-f2/utils.js
Normal file
65
uni_modules/lime-f2/components/lime-f2/utils.js
Normal file
@@ -0,0 +1,65 @@
|
||||
// #ifndef APP-NVUE
|
||||
// 计算版本
|
||||
export function compareVersion(v1, v2) {
|
||||
v1 = v1.split('.')
|
||||
v2 = v2.split('.')
|
||||
const len = Math.max(v1.length, v2.length)
|
||||
while (v1.length < len) {
|
||||
v1.push('0')
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0')
|
||||
}
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i], 10)
|
||||
const num2 = parseInt(v2[i], 10)
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1
|
||||
} else if (num1 < num2) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
export function wrapEvent(e) {
|
||||
if (!e) return;
|
||||
if (!e.preventDefault) {
|
||||
e.preventDefault = function() {};
|
||||
}
|
||||
return e;
|
||||
}
|
||||
|
||||
export const pixelRatio = uni.getSystemInfoSync().pixelRatio
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
export function base64ToPath(base64) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||
const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
|
||||
bitmap.loadBase64Data(base64, () => {
|
||||
if (!format) {
|
||||
reject(new Error('ERROR_BASE64SRC_PARSE'))
|
||||
}
|
||||
const time = new Date().getTime();
|
||||
const filePath = `_doc/uniapp_temp/${time}.${format}`
|
||||
|
||||
bitmap.save(filePath, {},
|
||||
() => {
|
||||
bitmap.clear()
|
||||
resolve(filePath)
|
||||
},
|
||||
(error) => {
|
||||
bitmap.clear()
|
||||
console.error(`${JSON.stringify(error)}`)
|
||||
reject(error)
|
||||
})
|
||||
}, (error) => {
|
||||
bitmap.clear()
|
||||
console.error(`${JSON.stringify(error)}`)
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
82
uni_modules/lime-f2/package.json
Normal file
82
uni_modules/lime-f2/package.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"id": "lime-f2",
|
||||
"displayName": "蚂蚁图表 antv F2",
|
||||
"version": "0.5.1",
|
||||
"description": "全端兼容,一个专注于移动,开箱即用的可视化解决方案",
|
||||
"keywords": [
|
||||
"蚂蚁金服",
|
||||
"AntV",
|
||||
"F2",
|
||||
"canvas",
|
||||
"图表"
|
||||
],
|
||||
"repository": "https://gitee.com/liangei/lime-f2",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
}
|
||||
}
|
||||
358
uni_modules/lime-f2/readme.md
Normal file
358
uni_modules/lime-f2/readme.md
Normal file
@@ -0,0 +1,358 @@
|
||||
# F2 图表
|
||||
> F2，一个专注于移动，开箱即用的可视化解决方案 [查看更多](http://liangei.gitee.io/limeui/#/f2)
|
||||
> 基于antv F2 做了兼容处理，更多示例请访问 [uni示例](http://liangei.gitee.io/limeui/#/f2-example) [官方示例](https://f2.antv.vision/zh/examples/gallery)
|
||||
> Q群：1046793420
|
||||
> antv F2 v3.8.7
|
||||
|
||||
|
||||
|
||||
## 平台兼容
|
||||
|
||||
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
|
||||
| --- | ---------- | ------------ | ---------- | ---------- | --------- | ---- |
|
||||
| √ | √ | √ | √ | √ | √ | √ |
|
||||
|
||||
|
||||
* ✨ **注意**
|
||||
* 🔔 插件用到了 css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装
|
||||
* 🌈 本插件使用了`webview`支持`nvue`。
|
||||
* 📦 本插件没有对F2内部的方法和样式做过改动，只是使其兼容uniapp。
|
||||
* 🔔 若F2无法满足于你或有需要特殊能力的请直接去F2 提建议
|
||||
* 👉 若F2有兼容问题可向我反馈。
|
||||
* 🔔 默认只提供`f2.min.js`,如果需要`f2-all`或`f2-simple`可去码云下载按自已需要引入！
|
||||
|
||||
## 安装
|
||||
在uniapp 插件市场 找到 [蚂蚁图表](https://ext.dcloud.net.cn/plugin?id=4613) 导入即可
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
通过`ref`获取节点组件内部`init`方法生成图表
|
||||
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
// 非 nvue 页面需要引进
|
||||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js';
|
||||
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||
export default {
|
||||
components: {lF2},
|
||||
data() {
|
||||
return {
|
||||
baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(this.baseData);
|
||||
chart
|
||||
.interval()
|
||||
.position('genre*sold')
|
||||
.color('genre');
|
||||
chart.render();
|
||||
// 需要把 chart 返回
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 图饼
|
||||
图饼示例，更多用法和示例请访问[F2 示例](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
pieMap: {
|
||||
'芳华': '40%',
|
||||
'妖猫传': '20%',
|
||||
'机器之血': '18%',
|
||||
'心理罪': '15%',
|
||||
'寻梦环游记': '5%',
|
||||
'其他': '2%'
|
||||
},
|
||||
pieData: [
|
||||
{
|
||||
name: '芳华',
|
||||
percent: 0.4,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '妖猫传',
|
||||
percent: 0.2,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '机器之血',
|
||||
percent: 0.18,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '心理罪',
|
||||
percent: 0.15,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '寻梦环游记',
|
||||
percent: 0.05,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
percent: 0.02,
|
||||
a: '1'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(this.pieData, {
|
||||
percent: {
|
||||
formatter: val => val * 100 + '%';
|
||||
}
|
||||
});
|
||||
chart.legend({
|
||||
position: 'right',
|
||||
itemFormatter: val => val + ' ' + this.pieMap[val];
|
||||
});
|
||||
chart.tooltip(false);
|
||||
chart.coord('polar', {
|
||||
transposed: true,
|
||||
radius: 0.85
|
||||
});
|
||||
chart.axis(false);
|
||||
chart
|
||||
.interval()
|
||||
.position('a*percent')
|
||||
.color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
|
||||
.adjust('stack')
|
||||
.style({
|
||||
lineWidth: 1,
|
||||
stroke: '#fff',
|
||||
lineJoin: 'round',
|
||||
lineCap: 'round'
|
||||
})
|
||||
.animate({
|
||||
appear: {
|
||||
duration: 1200,
|
||||
easing: 'bounceOut'
|
||||
}
|
||||
});
|
||||
chart.render();
|
||||
// 需要把 chart 返回
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 数据更新
|
||||
> F2 更新数据的方式有三种：
|
||||
|
||||
|
||||
1、通过 `ref` 获取组件实例，使用内部方法`changeData(data)`更新数据
|
||||
- 前后数据结构不发生变化，需要马上更新图表。
|
||||
```js
|
||||
this.$refs.chart.changeData(data)
|
||||
```
|
||||
|
||||
2、在节点上设置 `source` 源数据和 `isAutoPlay` 自动更新。
|
||||
- 前后数据结构不发生变化，需要马上更新图表。
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" is-auto-play></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
data: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3、如果仅仅是更新数据，而不需要马上更新图表，在节点上设置 `source` 源数据，然后在需要更新图表时调用内部方法 `repaint()` 或在节点上设置 `isAutoPlay` 为 `true`
|
||||
- 前后数据结构不发生变化，不需要立即更新数据
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" :isAutoPlay="isAutoPlay"></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
// 1 调用内部方法
|
||||
this.$refs.chart.repaint();
|
||||
// 2 先设置isAutoPlay为false,再需要时设置为true
|
||||
this.isAutoPlay = true
|
||||
```
|
||||
|
||||
4、更新数据时还可以清除图表上的所有元素，重新定义图形语法，改变图表类型和各种配置。
|
||||
- 前后数据结构发生变化 或 需要更改text等元素。
|
||||
|
||||
```js
|
||||
this.$refs.chart.reset(chart => {
|
||||
const baseData = [{ genre: '成犬粮', sold: 375 }, { genre: '化毛膏', sold: 15 }, { genre: '益生菌', sold: 20 }, { genre: '氨糖', sold: 240 }, { genre: '其它', sold: 150 }];
|
||||
chart.clear() // 清理所有
|
||||
chart.source(baseData); // 加载新数据
|
||||
chart.interval().position('genre*sold').color('sold'); // 重新定义图形语法
|
||||
chart.render();
|
||||
return chart;
|
||||
})
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Nvue
|
||||
本插件通过`webview`组件使得 `antv F2` 能在`nvue`里使用。
|
||||
|
||||
* ✨ **温馨提示**
|
||||
* 👉 webview使用了网络路径，可自行下载放置根目录下的`hybrid`文件夹里再修改路径即可。
|
||||
* 🛡 **不需要引进F2 JS文件**
|
||||
* ⚙️ 在函数外面的数据需要通过`init`方法的第二个参数传递数据
|
||||
|
||||
```html
|
||||
<view class="f2"><l-f2 ref="chart"></l-f2></view>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
// 在函数外面的数据，需要在第二个参数传进去。
|
||||
// 数据名保持跟this里的一致
|
||||
chart.source(baseData);
|
||||
chart
|
||||
.interval()
|
||||
.position('genre*sold')
|
||||
.color('genre');
|
||||
chart.render();
|
||||
return chart;
|
||||
},
|
||||
// 在函数外面的数据需要传进组件
|
||||
{baseData: this.baseData}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
## Nvue 使用注意事项
|
||||
- 由于 nvue 使用的是字符串模板传输，打包的时候会被混淆压缩
|
||||
- 所在要保持 **关键词** 不被 **混淆压缩**
|
||||
|
||||
#### 1、F2、DataSet 不需要被引入
|
||||
|
||||
👎 错误
|
||||
|
||||
```js
|
||||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2-all.min.js';
|
||||
import DataSet from '@/antv/DataSet'
|
||||
export default {
|
||||
...code
|
||||
}
|
||||
```
|
||||
|
||||
👍 正确
|
||||
|
||||
```js
|
||||
export default {
|
||||
...code
|
||||
}
|
||||
```
|
||||
|
||||
#### 2、引用函数外面数据的**关键词**不需要声明
|
||||
|
||||
👎 错误
|
||||
|
||||
```js
|
||||
const {data} = this
|
||||
this.$refs.chart.init(config => {
|
||||
chart.source(data);
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
👍 正确
|
||||
|
||||
```js
|
||||
// 所有用函数外里的数据，只要保持跟 this 里的一致
|
||||
this.$refs.chart.init(config => {
|
||||
chart.source(data);
|
||||
})
|
||||
|
||||
- or -
|
||||
|
||||
this.$refs.chart.init(config => {
|
||||
chart.source(this.data);
|
||||
})
|
||||
```
|
||||
|
||||
#### 3、引用函数外面的数据需要通过**params**或函数的第二个参数传递
|
||||
|
||||
👎 错误
|
||||
|
||||
```html
|
||||
<l-f2 />
|
||||
|
||||
- or -
|
||||
|
||||
this.$refs.chart.init(config => {...code})
|
||||
```
|
||||
|
||||
👍 正确
|
||||
|
||||
```html
|
||||
<l-f2 :params="{data}"/>
|
||||
|
||||
- or -
|
||||
|
||||
this.$refs.chart.init(config => {...code}, {data: this.data})
|
||||
```
|
||||
|
||||
## 不支持的功能
|
||||
- 目前由于小程序不支持 `document`，所以 `Guide.Html` 辅助元素组件目前仍无法使用，其他 F2 的功能全部支持。
|
||||
- **Nvue**是通过`webview`实现的,所以它不受影响！
|
||||
- **H5** uni官方 `canvas` 模拟了 小程序 所以也不支持 。
|
||||
- 缩放手势暂时不支持，因为原厂也不支持小程序，将来如果有需要考虑修改源码。
|
||||
- 词云原厂也是不支持小程序，本插件修改源码使得支持，但头条小程序需要1.78.0以后。
|
||||
|
||||
|
||||
## Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------------- | -------- | ------- | ------------ | ----- |
|
||||
| custom-style | 自定义样式 | `string` | - | - |
|
||||
| params | 仅针对nvue的数据传递,同init函数的第二个参数，两选一 | `object` | - | - |
|
||||
| webviewStyles | 仅针对nvue的webview设置样式 | `object` | - | - |
|
||||
| source | 图表数据 | `array` | - | 0.3.0 |
|
||||
| type | canvas 类型 2d 仅针对微信和头条有效 | `string` | `2d` | 0.3.0 |
|
||||
| isAutoPlay | 设置了上方的 图表数据 再 设置本参数 ，只要数据发生改动就更新图表 | `boolean` | `false` | 0.3.0 |
|
||||
| is-disable-scroll | 触摸图表时是否禁止页面滚动 | `boolean` | `false` | |
|
||||
|
||||
## 事件
|
||||
|
||||
| 参数 | 说明 |
|
||||
| --------------- | --------------- |
|
||||
| init(callback, data) | **callback**: 回调函数 **data**: `nvue` 如果使用了外部数据，需要传递 |
|
||||
| changeData(data) | 更新数据 ，传递是数据数组 |
|
||||
| clear() | 清除所有 |
|
||||
| destroy() | 销毁实例 |
|
||||
| repaint() | 用于暂时只更新数据，等需要时再调用重绘 |
|
||||
| reset(callback, data) | 重新定义图形语法，改变图表类型和各种配置, **callback**: 回调函数 **data**: `nvue` 如果使用了外部数据，需要传递 |
|
||||
| canvasToTempFilePath(opt) | 用于生成图片 |
|
||||
|
||||
## 打赏
|
||||
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user