updates
This commit is contained in:
parent
022b8bc835
commit
6b9dd15e33
|
|
@ -0,0 +1,20 @@
|
|||
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
||||
"version": "0.0",
|
||||
"configurations": [{
|
||||
"default" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-toutiao" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-weixin" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"type" : "uniCloud"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="myValues">
|
||||
<value>
|
||||
<list size="1">
|
||||
<item index="0" class="java.lang.String" itemvalue="setup" />
|
||||
</list>
|
||||
</value>
|
||||
</option>
|
||||
<option name="myCustomValuesEnabled" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="JavaDoc" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="TOP_LEVEL_CLASS_OPTIONS">
|
||||
<value>
|
||||
<option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
|
||||
<option name="REQUIRED_TAGS" value="" />
|
||||
</value>
|
||||
</option>
|
||||
<option name="INNER_CLASS_OPTIONS">
|
||||
<value>
|
||||
<option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
|
||||
<option name="REQUIRED_TAGS" value="" />
|
||||
</value>
|
||||
</option>
|
||||
<option name="METHOD_OPTIONS">
|
||||
<value>
|
||||
<option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
|
||||
<option name="REQUIRED_TAGS" value="@return@param@throws or @exception" />
|
||||
</value>
|
||||
</option>
|
||||
<option name="FIELD_OPTIONS">
|
||||
<value>
|
||||
<option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
|
||||
<option name="REQUIRED_TAGS" value="" />
|
||||
</value>
|
||||
</option>
|
||||
<option name="IGNORE_DEPRECATED" value="false" />
|
||||
<option name="IGNORE_JAVADOC_PERIOD" value="true" />
|
||||
<option name="IGNORE_DUPLICATED_THROWS" value="false" />
|
||||
<option name="IGNORE_POINT_TO_ITSELF" value="false" />
|
||||
<option name="myAdditionalJavadocTags" value="date" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="JavadocDeclaration" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="ADDITIONAL_TAGS" value="date" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="MissingJavadoc" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="PACKAGE_SETTINGS">
|
||||
<Options>
|
||||
<option name="ENABLED" value="false" />
|
||||
</Options>
|
||||
</option>
|
||||
<option name="MODULE_SETTINGS">
|
||||
<Options>
|
||||
<option name="ENABLED" value="false" />
|
||||
</Options>
|
||||
</option>
|
||||
<option name="TOP_LEVEL_CLASS_SETTINGS">
|
||||
<Options>
|
||||
<option name="ENABLED" value="false" />
|
||||
</Options>
|
||||
</option>
|
||||
<option name="INNER_CLASS_SETTINGS">
|
||||
<Options>
|
||||
<option name="ENABLED" value="false" />
|
||||
</Options>
|
||||
</option>
|
||||
<option name="METHOD_SETTINGS">
|
||||
<Options>
|
||||
<option name="REQUIRED_TAGS" value="@return@param@throws or @exception" />
|
||||
<option name="ENABLED" value="false" />
|
||||
</Options>
|
||||
</option>
|
||||
<option name="FIELD_SETTINGS">
|
||||
<Options>
|
||||
<option name="ENABLED" value="false" />
|
||||
</Options>
|
||||
</option>
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
# zyb-mini-app
|
||||
|
||||
秋云 ucharts uniapp
|
||||
|
||||
#### 介绍
|
||||
{**以下是 Gitee 平台说明,您可以替换此简介**
|
||||
Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台(同时支持 SVN)。专为开发者提供稳定、高效、安全的云端软件开发协作平台
|
||||
|
|
|
|||
|
|
@ -1,48 +1,67 @@
|
|||
export default {
|
||||
Major: {
|
||||
recommendMajorCount: '/art/recommendMajor/recommendMajorCount',//获取推荐专业总数量
|
||||
recommendMajorPage: '/art/recommendMajor/mini/page',//获取推荐专业列表
|
||||
recommendMajorList: '/art/recommendMajor/list',//获取学校的其他专业
|
||||
recommendMajorPage: '/mini/major/recommendMajor/page',//获取推荐专业列表
|
||||
aiAuto: '/mini/major/recommendMajor/aiAuto',//智能填报
|
||||
recommendSchoolOtherMajor: '/mini/major/schoolOtherMajor',//推荐该学校的其他专业
|
||||
schoolMajorList: '/mini/major/schoolMajorList',//获取学校开设专业分页数据
|
||||
schoolHistoryMajorEnrollList: '/yx/yxHistoryMajorEnroll/list',//获取学校的分数计划
|
||||
majorList: '/yx/yxMajor/list',//获取专业信息表-分页列表查询
|
||||
majorInfo: '/mini/major/majorInfo',//获取专业详情
|
||||
miniMajorList: '/mini/major/miniMajorList',//专业列表
|
||||
calculateInvestment: '/art/recommendMajor/calculateInvestment',//投档分测算
|
||||
testCultural: '/art/recommendMajor/testCultural',//文化分测算
|
||||
aiAuto: '/art/recommendMajor/mini/aiAuto',//智能填报
|
||||
schoolMajorListByBatchAndMajorType: '/art/major/schoolMajorListByBatchAndMajorType',//智能填报页面获取专业列表
|
||||
calculateInvestment: '/mini/recommendMajor/calculateInvestment',//投档分测算
|
||||
testCultural: '/mini/recommendMajor/testCultural',//文化分测算
|
||||
groupByBatchNumber:'/mini/major/groupByBatchNumber',//获取各个批次是否有专业
|
||||
rulesEnrollrobabilityMenuList: '/mini/major/rulesEnrollrobabilityMenuList',
|
||||
schoolMajorListByBatchAndMajorType: '/mini/major/schoolMajorListByBatchAndMajorType',//智能填报页面获取专业列表
|
||||
},
|
||||
GraduateDegree:{
|
||||
findSchoolGraduateDegreeList:'/mini/schoolGraduateDegree/findSchoolGraduateDegreeList',//获取院校下的研究生点列表
|
||||
getSchoolGraduateDegreeDetail:'/mini/schoolGraduateDegree/getSchoolGraduateDegreeDetail',//获取院校下的研究生点列表
|
||||
majorGroupAll:'/mini/schoolGraduateDegree/majorGroupAll',//艺考考研列表数据
|
||||
},//研究生点信息
|
||||
//用户类
|
||||
User: {
|
||||
exchangeVipCard: '/yx/yxVipCard/exchange',//兑换vip卡
|
||||
wxLogin: '/wx/login',
|
||||
login:'/mini/user/login',//密码登录
|
||||
userInfo: '/wx/userInfo',
|
||||
register:'/mini/user/register',//注册
|
||||
//微信
|
||||
wxLogin: '/mini/user/phoneLogin',//手机号快捷登录
|
||||
wxQrCodeStatus:'/wx/user/getQrCodeStatus',//获取微信二维码登录 状态
|
||||
wxQrCodeUpdateStatus:'/wx/user/updateQrCodeStatus',//更新微信二维码登录 状态
|
||||
wxQrCodeExit:'/wx/user/cancelQrCode',//取消微信二维码登录
|
||||
//=================================================================抖音
|
||||
dyLogin:'/mini/user/dy/login',//抖音登录
|
||||
dyCheckBindPhone :'/mini/user/dy/checkBindPhone',//抖音判断手机号绑定
|
||||
dyBindPhone :'/mini/user/dy/bindPhone',//抖音判断手机号绑定
|
||||
},
|
||||
System: {
|
||||
findPassWord: '/sys/findPassWord',//找回密码
|
||||
register: '/sys/register',//注册
|
||||
feedbackSave:'/mini/feedback/userSaveFeedBack',
|
||||
},
|
||||
//高考分数类
|
||||
Score: {
|
||||
reloadCalMajor:'/yx/yxScore/reloadCalMajor',//刷新计算专业
|
||||
scoreSave: "/yx/yxScore/save",//保存用户专业得分
|
||||
getScore: "/yx/yxScore/getUserScoreInfo",//获取当前用户的高考分数信息
|
||||
conversionScoreBatch: "/yx/yxHistoryScoreBatch/conversionScoreBatch",//获取分数批次段
|
||||
historyScoreControlLineListGroupYear: '/yx/yxHistoryScoreControlLine/listGroupByYear',//省控线分页列表 根据year分组
|
||||
historyScoreControlLineList: '/yx/yxHistoryScoreControlLine/list',//省控线分页列表
|
||||
scoreSegmentSearchByScore: '/yx/yxScoreSegment/searchByScore',//获取五分一段信息
|
||||
todayOfEditScoreCount:'/yx/yxScore/todayOfEditScoreCount',//今天可编辑成绩次数
|
||||
},
|
||||
//学校类
|
||||
School: {
|
||||
searchSchoolList: "/mini/school/search",//搜索 学校列表
|
||||
schoolInfo: "/mini/school/schoolInfo",//学校介绍详情
|
||||
hotSchoolList: '/art/school/hotList',//热门院校 列表
|
||||
doubleFirstPlan:'/mini/school/doubleFirstPlan',//院校双万计划
|
||||
subjectEvaluation:'/mini/school/subjectEvaluation',//院校第四轮学科评估
|
||||
},
|
||||
//志愿
|
||||
Volunteer: {
|
||||
addNew: '/art/volunteer/addNew',//新建志愿单
|
||||
volunteerSave: "/art/volunteer/save",//保存用户的志愿
|
||||
//volunteerList:'/art/volunteer/list',
|
||||
volunteerInfo: '/art/volunteer/info',//当前使用中志愿单详情
|
||||
volunteerPage: '/art/volunteer/page',//志愿单列表
|
||||
volunteerDelete: '/art/volunteer/delete',//志愿单删除
|
||||
|
|
@ -51,14 +70,25 @@ export default {
|
|||
volunteerRecordDelete: '/art/volunteer/volunteerRecordDelete',//删除志愿明细
|
||||
volunteerRecordReplace: '/art/volunteer/replaceVolunteer',//替换志愿明细
|
||||
saveAs: '/art/volunteer/saveAs',//另存为
|
||||
moveIndexs: '/art/volunteer/moveIndexs',//移动志愿位置
|
||||
switchVolunteer: '/art/volunteer/switchVolunteer',//切换志愿及成绩
|
||||
exChangeIndexs: '/art/volunteer/exchangeIndexs',//交换志愿位置
|
||||
updateFctj: '/art/volunteer/updateFctj',//修改服从调剂
|
||||
},
|
||||
Pay: {
|
||||
vip1: '/wx/pay/v1/jsApiPay',//支付类型1
|
||||
//vip1: '/wx/pay/v1/jsApiPay',//支付类型1
|
||||
vip1: '/mini/pay/v1/jsApiPay',//支付类型1
|
||||
},
|
||||
VIP: {
|
||||
cardActivation: '/mini/vip/card/activation',//卡密兑换
|
||||
orderDetail: '/mini/vip/orderDetail',//获取订单信息
|
||||
orderList:'/mini/order/orderList',//获取订单列表
|
||||
orderDetail: '/mini/order/orderDetail',//获取订单信息
|
||||
skuList: '/mini/vip/sku/all',//获取全部商品
|
||||
}
|
||||
vipInfo: '/mini/vip/getVipInfo',//获取当前用户vip信息
|
||||
},
|
||||
Article: {
|
||||
articlePage: '/mini/article/page',//文章列表
|
||||
articleContent: '/mini/article/articleContent',//文章详细内容
|
||||
},//文章信息
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
export default {
|
||||
defaultIcon:'http://files.yitisheng.vip/images/icons/swiper-dot.png',
|
||||
systemIcon:'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/yitisheng.png',//系统图片
|
||||
major:'http://files.yitisheng.vip/images/icons/major.png',
|
||||
skx:'http://files.yitisheng.vip/images/icons/skx.png',//省控线
|
||||
cwh:'http://files.yitisheng.vip/images/icons/cwh.png',//测文化
|
||||
cwc:'http://files.yitisheng.vip/images/icons/ccw.png',//查位次
|
||||
std:'http://files.yitisheng.vip/images/icons/jsq.png',//算投档
|
||||
|
||||
yxjs: 'http://files.yitisheng.vip/images/icons/fwjs.png',//院校介绍
|
||||
zlsj: 'http://files.yitisheng.vip/images/icons/zexian.png',//招录数据
|
||||
lqxx: 'http://files.yitisheng.vip/images/icons/dbx.png',//录取信息
|
||||
skx:'http://files.yitisheng.vip/images/icons/options/shengkongxian.png',//省控线
|
||||
cwh:'http://files.yitisheng.vip/images/icons/options/cewenhua.png',//测文化
|
||||
cwc:'http://files.yitisheng.vip/images/icons/options/chaweici.png',//查位次
|
||||
std:'http://files.yitisheng.vip/images/icons/options/suantoudang.png',//算投档
|
||||
customerServiceQrCode:'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/customerServiceQrCode.png',//客服二维码
|
||||
yxjs: '/static/icons/options/message.png',//院校介绍
|
||||
zlsj: '/static/icons/options/gupiao.png',//招录数据
|
||||
lqxx: '/static/icons/options/dataLevelUp.png',//录取信息
|
||||
|
||||
loveWhile:'http://files.yitisheng.vip/images/icons/love-while.png',//收藏按钮
|
||||
loveDarkturquoise:'http://files.yitisheng.vip/images/icons/love-darkturquoise.png',//已搜藏按钮
|
||||
|
|
@ -22,6 +23,7 @@ export default {
|
|||
shuqian:'/static/icons/24gl-bookmarkMinus.png',//书签-时风绿
|
||||
|
||||
edit:'http://files.yitisheng.vip/images/icons/%E7%BC%96%E8%BE%91.png',//编辑
|
||||
edit2:'/static/icons/edit.png',
|
||||
cuti:{
|
||||
edit:'http://files.yitisheng.vip/images/icons/cuti/edit.png',//编辑
|
||||
delete:'http://files.yitisheng.vip/images/icons/cuti/delete.png',//删除
|
||||
|
|
@ -38,5 +40,12 @@ export default {
|
|||
kebaodi:'http://files.yitisheng.vip/images/icons/%E4%BF%9D/%E5%8F%AF%E4%BF%9D%E5%BA%95.png',//可保底
|
||||
nanluqu:'http://files.yitisheng.vip/images/icons/%E4%BF%9D/%E9%9A%BE%E5%BD%95%E5%8F%96.png',//难录取
|
||||
kechongji:'http://files.yitisheng.vip/images/icons/%E4%BF%9D/%E5%8F%AF%E5%86%B2%E5%87%BB.png',//可冲击.png
|
||||
}
|
||||
},
|
||||
cdx: 'http://files.yitisheng.vip/images/icons/options/chayuanxiao.png',
|
||||
czy: 'http://files.yitisheng.vip/images/icons/options/chazhuanye.png',
|
||||
|
||||
close:'/static/icons/clonse.png',//关闭
|
||||
duigou_orange:'/static/icons/duigou_orange.png',//对钩
|
||||
add_orange:'/static/icons/add_orange.png',//添加
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import ImagesConstant from "@/common/ImagesConstant";
|
||||
|
||||
export default {
|
||||
systemName: '艺体志愿宝',
|
||||
email:'yitisheng@163.com',
|
||||
bm: '及第生涯',
|
||||
year: '2024',//年份
|
||||
yearSx: '24',//缩写年份
|
||||
|
|
@ -7,6 +10,9 @@ export default {
|
|||
categoryList: [
|
||||
{name: '文科'}, {name: '理科'}
|
||||
],
|
||||
TYPES:{
|
||||
admissionsRegulations:'1',//招生章程类型编码
|
||||
},//类型编码
|
||||
batchAllList: [
|
||||
{
|
||||
label: '本科提前批',
|
||||
|
|
@ -121,33 +127,37 @@ export default {
|
|||
HomeOptions: [
|
||||
{
|
||||
title: "查大学",
|
||||
icon: "http://files.yitisheng.vip/images/icons/xx.png",
|
||||
//icon: "http://files.yitisheng.vip/images/icons/xx.png",
|
||||
icon: ImagesConstant.cdx,
|
||||
url: "/pages/zyb/school/list"
|
||||
},
|
||||
{
|
||||
title: "查专业",
|
||||
icon: 'http://files.yitisheng.vip/images/icons/major.png',
|
||||
//icon: 'http://files.yitisheng.vip/images/icons/major.png',
|
||||
icon: ImagesConstant.czy,
|
||||
url: "/pages/zyb/major/list",
|
||||
width: '85rpx',
|
||||
},
|
||||
{
|
||||
title: "省控线",
|
||||
icon: 'http://files.yitisheng.vip/images/icons/skx.png',
|
||||
//icon: 'http://files.yitisheng.vip/images/icons/skx.png',
|
||||
icon: ImagesConstant.skx,
|
||||
url: "/pages/zyb/historyScoreControlLine/index"
|
||||
},
|
||||
{
|
||||
title: "测文化",
|
||||
icon: "http://files.yitisheng.vip/images/icons/cwh.png",
|
||||
//icon: "http://files.yitisheng.vip/images/icons/cwh.png",
|
||||
icon: ImagesConstant.cwh,
|
||||
url: "/pages/zyb/testCultural/index"
|
||||
},
|
||||
{
|
||||
title: "查位次",
|
||||
icon: "http://files.yitisheng.vip/images/icons/ccw.png",
|
||||
icon: ImagesConstant.cwc,
|
||||
url: "/pages/zyb/other/checkRanking"
|
||||
},
|
||||
{
|
||||
title: "算投档",
|
||||
icon: "http://files.yitisheng.vip/images/icons/jsq.png",
|
||||
//icon: "http://files.yitisheng.vip/images/icons/jsq.png",
|
||||
icon: ImagesConstant.std,
|
||||
url: "/pages/zyb/other/calculateInvestment"
|
||||
},
|
||||
/*{
|
||||
|
|
@ -156,11 +166,13 @@ export default {
|
|||
},*/
|
||||
{
|
||||
title: "艺考考研",
|
||||
icon:'http://files.yitisheng.vip/images/icons/options/tongji.png',
|
||||
url: "/pages/zyb/npee/index"
|
||||
},
|
||||
{
|
||||
title: "等位分转换",
|
||||
url: "/pages/zyb/dwfzh/index"
|
||||
title: "招生章程",
|
||||
icon:'http://files.yitisheng.vip/images/icons/options/zhaoshengzhangcheng.png',
|
||||
url: "/pages/zyb/article/list"
|
||||
}
|
||||
],//首页菜单
|
||||
|
||||
|
|
@ -235,6 +247,25 @@ export default {
|
|||
title: '筛选',
|
||||
type: 'filter',
|
||||
children: [
|
||||
{
|
||||
title: "院校层次",
|
||||
type: 'radio',
|
||||
value: [],
|
||||
options: [
|
||||
{
|
||||
label: "全部",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label: "本科",
|
||||
value: "本科"
|
||||
},
|
||||
{
|
||||
label: "专科",
|
||||
value: "专科"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "院校标签",
|
||||
type: 'checkbox',
|
||||
|
|
@ -325,18 +356,29 @@ export default {
|
|||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '科研教学',
|
||||
dtype: '科研教学',
|
||||
type: 'filter',
|
||||
children: [
|
||||
{
|
||||
title: "科研教学",
|
||||
type: 'checkbox',
|
||||
value: [],
|
||||
options: [
|
||||
{label: "硕士点", value: "硕士点"},
|
||||
{label: "博士点", value: "博士点"},
|
||||
{label: "保研", value: "保研"}]
|
||||
}],
|
||||
},
|
||||
{
|
||||
title: '筛选',
|
||||
type: 'filter',
|
||||
children: [{
|
||||
title: "录取方式",
|
||||
type: 'radio',
|
||||
value: null,
|
||||
type: 'checkbox',
|
||||
value: [],
|
||||
options: [
|
||||
{
|
||||
label: "全部",
|
||||
value: null
|
||||
},
|
||||
{
|
||||
label: "文过专排",
|
||||
value: '文过专排'
|
||||
|
|
@ -416,4 +458,21 @@ export default {
|
|||
contentnomore: '没有更多'
|
||||
},
|
||||
|
||||
opts:{
|
||||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||||
padding: [5, 5, 5, 5],
|
||||
enableScroll: false,
|
||||
extra: {
|
||||
pie: {
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: true,
|
||||
borderWidth: 3,
|
||||
borderColor: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},//charts配置参数
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,17 +11,32 @@
|
|||
.green {
|
||||
color: #3e8e43 !important;
|
||||
}
|
||||
.lightGreen {
|
||||
color: #85e689 !important;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red !important;
|
||||
}
|
||||
.redBlack{
|
||||
color: #bb0303 !important;
|
||||
}
|
||||
|
||||
.orange {
|
||||
color: #f9ca1b !important;
|
||||
}
|
||||
|
||||
.redOrange2 {
|
||||
color :#f2891b !important;
|
||||
/*color: #f2891b !important;*/
|
||||
}
|
||||
|
||||
.redOrange {
|
||||
color: #f2891b !important;
|
||||
color :#f96543 !important;
|
||||
/*color: #f2891b !important;*/
|
||||
}
|
||||
.royalBlue{
|
||||
color: #4975fd;
|
||||
}
|
||||
|
||||
.white {
|
||||
|
|
@ -30,6 +45,9 @@
|
|||
.black{
|
||||
color: black;
|
||||
}
|
||||
.black3 {
|
||||
color: #333333;
|
||||
}
|
||||
.brown {
|
||||
color: #6e3c14;
|
||||
}
|
||||
|
|
@ -41,11 +59,30 @@
|
|||
.slateGray {
|
||||
color: #708090;
|
||||
}
|
||||
.black4 {
|
||||
color: #261f1f;
|
||||
}
|
||||
.bab9c4{
|
||||
color: #bab9c4;
|
||||
}
|
||||
.d3d3d3{
|
||||
color: #d3d3d3;
|
||||
}
|
||||
.d999999{
|
||||
color:#999999;
|
||||
}
|
||||
.darkGray{
|
||||
color:darkGray;
|
||||
}
|
||||
|
||||
.shiFengGreen {
|
||||
color: #42c6c6;
|
||||
}
|
||||
|
||||
.mediumSlateBlue{
|
||||
color: #6862fd;
|
||||
}
|
||||
|
||||
/*字体颜色 end*/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,34 @@
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap
|
||||
}
|
||||
.multiline-text {
|
||||
word-wrap: break-word; /* 对长单词进行换行 */
|
||||
white-space: pre-line; /* 保留换行符,并且允许自动换行 */
|
||||
}
|
||||
/*自定义宽度*/
|
||||
.flex-item-03 {
|
||||
width: 3%;
|
||||
}
|
||||
.flex-item-05 {
|
||||
width: 5%;
|
||||
}
|
||||
.flex-item-06 {
|
||||
width: 6%;
|
||||
}
|
||||
.flex-item-07 {
|
||||
width: 7%;
|
||||
}
|
||||
.flex-item-09 {
|
||||
width: 9%;
|
||||
}
|
||||
.flex-item-1 {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.flex-item-12 {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.flex-item-15 {
|
||||
width: 15%;
|
||||
}
|
||||
|
|
@ -36,6 +59,13 @@
|
|||
.flex-item-25 {
|
||||
width: 25%;
|
||||
}
|
||||
.flex-item-26 {
|
||||
width: 26%;
|
||||
}
|
||||
|
||||
.flex-item-28 {
|
||||
width: 28%;
|
||||
}
|
||||
|
||||
.flex-item-3 {
|
||||
width: 30%;
|
||||
|
|
@ -45,6 +75,14 @@
|
|||
width: 33%;
|
||||
}
|
||||
|
||||
.flex-item-36 {
|
||||
width: 36%;
|
||||
}
|
||||
.flex-item-38 {
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
|
||||
.flex-item-35 {
|
||||
width: 35%;
|
||||
}
|
||||
|
|
@ -53,6 +91,10 @@
|
|||
width: 40%;
|
||||
}
|
||||
|
||||
.flex-item-42 {
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
.flex-item-45 {
|
||||
width: 45%;
|
||||
}
|
||||
|
|
@ -97,6 +139,15 @@
|
|||
width: 80%;
|
||||
}
|
||||
|
||||
.flex-item-85 {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.flex-item-88 {
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
|
||||
.flex-item-9 {
|
||||
width: 90%;
|
||||
}
|
||||
|
|
@ -152,11 +203,41 @@
|
|||
.margin30 {
|
||||
margin: 30rpx;
|
||||
}
|
||||
.margin-left-10{
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.margin-left-20{
|
||||
margin-left: 20rpx
|
||||
}
|
||||
.margin-left-30{
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.margin-left-50{
|
||||
margin-left: 50rpx;
|
||||
}
|
||||
.margin-left-100{
|
||||
margin-left: 100rpx;
|
||||
}
|
||||
|
||||
.margin-right-10 {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.margin-right-20{
|
||||
margin-right:20rpx;
|
||||
}
|
||||
.margin-right-30{
|
||||
margin-right:30rpx;
|
||||
}
|
||||
.margin-right-100{
|
||||
margin-right:100rpx;
|
||||
}
|
||||
.margin-top-10{
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.margin-top-20{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.margin-top-300 {
|
||||
margin-top: 300rpx;
|
||||
}
|
||||
|
|
@ -205,10 +286,22 @@
|
|||
font-size: 32rpx !important;
|
||||
}
|
||||
|
||||
.font-size-mini5 {
|
||||
font-size: 35rpx !important;
|
||||
}
|
||||
|
||||
.font-size-mini6 {
|
||||
font-size: 38rpx !important;
|
||||
}
|
||||
|
||||
.font-size-medium {
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
|
||||
.font-size-medium2 {
|
||||
font-size: 45rpx !important;
|
||||
}
|
||||
|
||||
.font-size-big {
|
||||
font-size: 50rpx !important;
|
||||
}
|
||||
|
|
@ -219,6 +312,9 @@
|
|||
|
||||
/*字体大小 End*/
|
||||
/*字体粗细 Start*/
|
||||
.font-weight-none{
|
||||
font-weight: normal;
|
||||
}
|
||||
.font-weight-500 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -256,6 +352,12 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon40{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon50 {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
|
|
@ -279,7 +381,11 @@
|
|||
height: 128rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon256{
|
||||
width: 256rpx;
|
||||
height: 256rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.not-border {
|
||||
border: none !important;
|
||||
}
|
||||
|
|
@ -305,6 +411,13 @@
|
|||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.radius10 {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.radius15 {
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.radius60 {
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import Request from '@/common/request'
|
||||
import ApiConstant from '../ApiConstant'
|
||||
let request = new Request()
|
||||
export default {
|
||||
//调试vip信息
|
||||
|
|
@ -13,12 +12,27 @@ export default {
|
|||
},
|
||||
//刷新vip信息
|
||||
reloadVipInfo() {
|
||||
request.get(ApiConstant.VIP.vipInfo,{},{showLoad:false}).then(r => {
|
||||
console.log(r)
|
||||
return request.post('/api/static/data/getJson', { key: key }, { showLoad: false }).then(r => {
|
||||
if (r.success) {
|
||||
this.checkVipInfo(r.result)
|
||||
return r.result;
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log('请求:'+key+"时出错:")
|
||||
console.log(err)
|
||||
return {};
|
||||
}).finally(() => {
|
||||
});
|
||||
},
|
||||
async loadStaticConfig(key){
|
||||
return request.post('/api/static/data/getJson',{key:key},{showLoad:false}).then(r => {
|
||||
console.log(r)
|
||||
if (r.success) {
|
||||
return r.result
|
||||
}
|
||||
}).catch(err => {
|
||||
return {}
|
||||
}).finally(() => {
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
export default {
|
||||
//接口
|
||||
// api: "http://127.0.0.1:8080/jeecg-boot/",//本地
|
||||
api: "http://192.168.0.100:8080/jeecg-boot/",//本地
|
||||
// api: "https://yitisheng.vip/jbt/",//生产环境
|
||||
api :"https://yitisheng.vip//jbttest/",//测试环境
|
||||
// api :"https://yitisheng.vip//jbttest/",//测试环境
|
||||
|
||||
// 图片服务器
|
||||
file:'http://files.yitisheng.vip',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/*网络请求*/
|
||||
import operate from '@/common/operate'
|
||||
import {stringIsNotEmpty} from "@/common/util";
|
||||
import ApiConstant from "@/common/ApiConstant";
|
||||
// vuex 的使用 详情参考官网 https://uniapp.dcloud.io/vue-vuex
|
||||
|
||||
export default class Request {
|
||||
|
|
@ -13,9 +14,12 @@ export default class Request {
|
|||
'X-Access-Token':param.token || "",
|
||||
},
|
||||
data = param.data || {},
|
||||
showLoading = param.showLoad || true;
|
||||
//hideLoading = param.hideLoading || false;
|
||||
/*token = param.token || "",*/
|
||||
showLoading = true;
|
||||
if (param.showLoad===false) {
|
||||
showLoading = false;
|
||||
}
|
||||
/*hideLoading = param.hideLoading || false;
|
||||
token = param.token || "",*/
|
||||
|
||||
//拼接完整请求地址
|
||||
var requestUrl = operate.api + url;
|
||||
|
|
@ -61,6 +65,9 @@ export default class Request {
|
|||
|
||||
|
||||
if (res.data && res.data.code === 401) {
|
||||
try {
|
||||
uni.clearStorageSync();
|
||||
} catch (e) {}
|
||||
//请登录
|
||||
wx.reLaunch({
|
||||
url: '/pages/zyb/login',
|
||||
|
|
@ -102,14 +109,14 @@ export default class Request {
|
|||
})
|
||||
})
|
||||
}
|
||||
get(url,data,options={}){
|
||||
get(url,data,options={},header={}){
|
||||
options.method='get';
|
||||
options.data=data;
|
||||
options.url=url;
|
||||
options.token=uni.getStorageSync('token');
|
||||
return this.http(options);
|
||||
}
|
||||
get(url,data,headers={},options={}){
|
||||
get2(url,data,headers={},options={}){
|
||||
options.method='get';
|
||||
options.data=data;
|
||||
options.url=url;
|
||||
|
|
@ -148,6 +155,34 @@ export default class Request {
|
|||
options.token=uni.getStorageSync('token');
|
||||
return this.http(options);
|
||||
}
|
||||
|
||||
getUserScore(){
|
||||
this.get(ApiConstant.Score.getScore, {},{showLoad:false}).then(res => {
|
||||
if (res.success && res.result) {
|
||||
let scoreInfo = res.result.scoreInfo
|
||||
uni.removeStorageSync('scoreInfo')
|
||||
uni.removeStorageSync('fillVolunteer')//清除可报志愿数量
|
||||
uni.removeStorageSync('volunteer')//清除志愿单
|
||||
if(scoreInfo){
|
||||
uni.setStorageSync('scoreInfo', scoreInfo)
|
||||
}
|
||||
if(res.result.fillVolunteer){
|
||||
uni.setStorageSync('fillVolunteer',res.result.fillVolunteer)
|
||||
}
|
||||
if(res.result.volunteer){
|
||||
uni.setStorageSync('volunteer',res.result.volunteer)
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
}).finally(() => {
|
||||
});
|
||||
}
|
||||
|
||||
goto(e){
|
||||
uni.navigateTo({
|
||||
url :e
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ function formatLocation(longitude, latitude) {
|
|||
latitude: latitude.toString().split('.')
|
||||
}
|
||||
}
|
||||
|
||||
var dateUtils = {
|
||||
UNITS: {
|
||||
'年': 31557600000,
|
||||
|
|
@ -73,7 +74,7 @@ var dateUtils = {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
function stringIsNotEmpty(e){
|
||||
if (e === undefined || e === '') {
|
||||
if (e === null || e === undefined || e === '') {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
|
|
|||
|
|
@ -134,7 +134,8 @@
|
|||
"usingComponents" : true,
|
||||
"uniStatistics" : {
|
||||
"enable" : true
|
||||
}
|
||||
},
|
||||
"appid" : "tt59a72f1ac6964bfa01"
|
||||
},
|
||||
"mp-jd" : {
|
||||
"usingComponents" : true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"name": "hello-uniapp",
|
||||
"version": "3.4.5",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-helper-json": {
|
||||
"version": "1.0.13",
|
||||
"resolved": "https://registry.npmmirror.com/@dcloudio/uni-helper-json/-/uni-helper-json-1.0.13.tgz",
|
||||
"integrity": "sha512-FO9Iu4zW4td3Tr+eiCDWuele2ehkJ4qxQ/UhpAMLjso+ZdWz6NagK5Syh6cdy1hoDqbxpNoqnLynuJXe81Ereg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -109,5 +109,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-helper-json": "^1.0.13"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
302
pages.json
302
pages.json
|
|
@ -2,19 +2,84 @@
|
|||
"leftWindow": {
|
||||
"path": "windows/left-window.vue",
|
||||
"style": {
|
||||
"width": "350px"
|
||||
"width": "350rpx"
|
||||
}
|
||||
},
|
||||
"topWindow": {
|
||||
"path": "windows/top-window.vue",
|
||||
"style": {
|
||||
"height": "60px"
|
||||
"height": "60rpx"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
// pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
||||
|
||||
// pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/zyb/home",
|
||||
"style": {
|
||||
"navigationBarTitleText": "艺体志愿宝",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "120rpx",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zyb/vip/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "开通VIP"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zyb/qrcodeLogin",
|
||||
"style": {
|
||||
"navigationBarTitleText": "艺体志愿宝"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/zyb/order/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单列表"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/zyb/order/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zyb/other/feedback",
|
||||
"style": {
|
||||
"navigationBarTitleText": "问题反馈"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zyb/npee/schoolNpee",
|
||||
"style": {
|
||||
"navigationBarTitleText": "科研教学"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zyb/npee/schoolNpeeDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "研究方向详情"
|
||||
}
|
||||
},
|
||||
//登录页
|
||||
{
|
||||
"path": "pages/zyb/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "艺体志愿宝"
|
||||
}
|
||||
|
|
@ -25,6 +90,12 @@
|
|||
"navigationBarTitleText": "智能填报"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zyb/fillVolunteer/mockList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "智能推荐"
|
||||
}
|
||||
},
|
||||
/*查大学*/
|
||||
{
|
||||
"path": "pages/zyb/school/list",
|
||||
|
|
@ -48,13 +119,7 @@
|
|||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
//登录页
|
||||
{
|
||||
"path": "pages/zyb/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "艺体志愿宝"
|
||||
}
|
||||
},
|
||||
|
||||
/*我的志愿*/
|
||||
{
|
||||
"path": "pages/zyb/fillVolunteer/my",
|
||||
|
|
@ -64,26 +129,22 @@
|
|||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*我的志愿-详情明细*/
|
||||
/*志愿草表-详情明细*/
|
||||
{
|
||||
"path": "pages/zyb/fillVolunteer/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的志愿",
|
||||
"navigationBarTitleText": "志愿单",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*志愿草表-我的志愿单跳转-详情明细*/
|
||||
{
|
||||
"path": "pages/zyb/fillVolunteer/my-detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "志愿单",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -146,20 +207,16 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "个人资料",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*绑定手机号*/
|
||||
{
|
||||
"path": "pages/zyb/user/bindPhone",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人资料",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*省控线*/
|
||||
|
|
@ -170,26 +227,13 @@
|
|||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
/*更新快报*/
|
||||
/*专家一对一*/
|
||||
{
|
||||
"path": "pages/zyb/other/updateLogs",
|
||||
"style": {
|
||||
"navigationBarTitleText": "更新快报",
|
||||
"navigationBarTitleText": "专家一对一",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*我的收藏*/
|
||||
|
|
@ -198,20 +242,7 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "我的收藏",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*常见问题*/
|
||||
|
|
@ -241,20 +272,7 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "设置",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*使用说明*/
|
||||
|
|
@ -263,20 +281,7 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "使用说明",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*志愿卡说明*/
|
||||
|
|
@ -285,20 +290,7 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "志愿卡说明",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*免责声明*/
|
||||
|
|
@ -307,20 +299,7 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "免责声明",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*用户协议*/
|
||||
|
|
@ -329,20 +308,7 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "用户协议",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
/*智能推荐*/
|
||||
|
|
@ -351,20 +317,7 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "智能推荐",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": {
|
||||
"buttons": [
|
||||
{
|
||||
"text": "\ue534",
|
||||
"fontSrc": "/static/uni.ttf",
|
||||
"fontSize": "22px",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -415,12 +368,7 @@
|
|||
"navigationBarTitleText": "艺体志愿宝"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zyb/vip/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "开通VIP"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/zyb/vip/checkoutCounter",
|
||||
"style": {
|
||||
|
|
@ -444,8 +392,19 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "维护中"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zyb/article/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "招生章程"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zyb/article/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "招生章程"
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
"subPackages": [
|
||||
],
|
||||
|
|
@ -470,26 +429,29 @@
|
|||
},
|
||||
"tabBar": {
|
||||
"color": "#7A7E83",
|
||||
"selectedColor": "#007AFF",
|
||||
//"selectedColor": "#007AFF",
|
||||
"selectedColor":"#f96543",
|
||||
"borderStyle": "black",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/zyb/home",
|
||||
"iconPath": "static/icons/linear/index.png",
|
||||
"selectedIconPath": "static/icons/linear/index-active.png",
|
||||
//"iconPath": "static/icons/linear/index.png",
|
||||
"iconPath": "static/icons/icons8-home.png",
|
||||
"selectedIconPath": "static/icons/icons8-home-active.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/zyb/fillVolunteer/my",
|
||||
"iconPath": "static/icons/linear/edit.png",
|
||||
"selectedIconPath": "static/icons/linear/edit-active.png",
|
||||
"text": "填志愿"
|
||||
/*"pagePath": "pages/zyb/fillVolunteer/my",*/
|
||||
"pagePath": "pages/zyb/fillVolunteer/detail",
|
||||
"iconPath": "static/icons/icons8-notepad.png",
|
||||
"selectedIconPath": "static/icons/icons8-notepad-active.png",
|
||||
"text": "志愿单"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/zyb/user/index",
|
||||
"iconPath": "static/icons/linear/user.png",
|
||||
"selectedIconPath": "static/icons/linear/user-active.png",
|
||||
"iconPath": "static/icons/icons8-woman.png",
|
||||
"selectedIconPath": "static/icons/icons8-woman-active.png",
|
||||
"text": "个人中心"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import ApiConstant from "@/common/ApiConstant";
|
|||
import Request from '@/common/request'
|
||||
import ImagesConstant from "@/common/ImagesConstant";
|
||||
import {stringIsNotEmpty} from "@/common/util";
|
||||
import CommonTool from "@/common/js/commonTool";
|
||||
|
||||
let request = new Request()
|
||||
// 缓存每页最多
|
||||
|
|
@ -60,7 +61,8 @@ export default {
|
|||
{batchLabel: '本科批', batch: '本科批', type: '平行志愿', max: 35, status: false},
|
||||
{batchLabel: '高职高专', batch: '高职高专', type: '平行志愿', max: 35, status: false},
|
||||
],
|
||||
collapseItemList: []
|
||||
collapseItemList: [],
|
||||
volunteerPreview:{}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
|
@ -99,13 +101,14 @@ export default {
|
|||
this.getFilledVolunteerList()
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
async onLoad(e) {
|
||||
if (e.volunteerId) {
|
||||
//从志愿列表进来
|
||||
this.volunteerId = e.volunteerId;
|
||||
console.log(e.volunteerId)
|
||||
}
|
||||
|
||||
// 志愿单打印配置
|
||||
this.volunteerPreview = await CommonTool.loadStaticConfig('volunteer_preview')
|
||||
},
|
||||
methods: {
|
||||
goto(url) {
|
||||
|
|
@ -374,15 +377,15 @@ export default {
|
|||
},
|
||||
/*点击创建志愿单*/
|
||||
onClickCreateVolunteer(){
|
||||
let that = this
|
||||
request.post(ApiConstant.Volunteer.addNew, {
|
||||
volunteerName:'模拟志愿草表'
|
||||
},{}).then(res => {
|
||||
uni.setStorageSync('volunteerInfo',res.result)
|
||||
request.getUserScore()
|
||||
}).catch(err => {
|
||||
}).finally(() => {
|
||||
});
|
||||
let that = this
|
||||
request.post(ApiConstant.Volunteer.addNew, {
|
||||
volunteerName:'模拟志愿草表'
|
||||
},{}).then(res => {
|
||||
uni.setStorageSync('volunteerInfo',res.result)
|
||||
request.getUserScore()
|
||||
}).catch(err => {
|
||||
}).finally(() => {
|
||||
});
|
||||
},
|
||||
/*返回已填志愿数量*/
|
||||
getVolunteerNum(citem){
|
||||
|
|
@ -393,6 +396,28 @@ export default {
|
|||
}else{
|
||||
return this.filledVolunteer.volunteerJuniorCollegeNum
|
||||
}
|
||||
},
|
||||
onPreview(){
|
||||
if(this.volunteerPreview && this.volunteerPreview.type==='1'){
|
||||
let href = this.volunteerPreview.filePrefixUrl +'?id='+this.volunteerId+"&type=1"
|
||||
let message = this.volunteerPreview.message
|
||||
// 跳转浏览器下载
|
||||
uni.setClipboardData({
|
||||
data: href
|
||||
});
|
||||
uni.showModal({
|
||||
content: message,
|
||||
showCancel: false
|
||||
});
|
||||
}else{
|
||||
// web-view预览
|
||||
let href = this.volunteerPreview.webViewUrl+'?id='+this.volunteerId+"&type=2"
|
||||
uni.setStorageSync('volunteer_preview',href)
|
||||
uni.navigateTo({
|
||||
url: '/pages/zyb/other/web-view?url=volunteer_preview'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -409,7 +434,13 @@ export default {
|
|||
<!--成绩卡片-->
|
||||
<view class="score-info-card white" v-if="this.scoreInfo">
|
||||
<view class="flexWrap">
|
||||
<text class="font-size-mini4 font-weight-550">{{ volunteerInfo.volunteerName }}</text>
|
||||
<view class="flex-item-8">
|
||||
<text class="font-size-mini4 font-weight-550">{{ volunteerInfo.volunteerName }}</text>
|
||||
</view>
|
||||
<view class="flex-item-2">
|
||||
<button v-show="volunteerId" type="primary" style="height: 42rpx;line-height: 42rpx" @click="onPreview">打印</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="flexWrap tags font-size-mini2" v-if="scoreInfo">
|
||||
<view class="tag">{{ scoreInfo.province }}</view>
|
||||
|
|
@ -429,28 +460,28 @@ export default {
|
|||
<text class="margin-right-10 font-weight-b">{{ scoreInfo.professionalScore }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flexWrap" style="margin-top: 30rpx;height: 30rpx;" v-if="scoreInfo && scoreInfo.professionalCategoryChildren">
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.yybysy && scoreInfo.yybysy!==0">
|
||||
<view class="flexWrap" style="margin-top: 30rpx;height: 30rpx;" v-if="scoreInfo && scoreInfo.professionalCategoryChildren">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.yybysy && scoreInfo.yybysy!==0">
|
||||
<text class="margin-right-10">音乐表演声乐</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.yybysy }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.yybyqy && scoreInfo.yybyqy!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.yybyqy && scoreInfo.yybyqy!==0">
|
||||
<text class="margin-right-10">音乐表演器乐</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.yybyqy }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.yyjy && scoreInfo.yyjy!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.yyjy && scoreInfo.yyjy!==0">
|
||||
<text class="margin-right-10">音乐教育</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.yyjy }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.fzby && scoreInfo.fzby!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.fzby && scoreInfo.fzby!==0">
|
||||
<text class="margin-right-10">服装表演</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.fzby }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.xjysdy && scoreInfo.xjysdy!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.xjysdy && scoreInfo.xjysdy!==0">
|
||||
<text class="margin-right-10">戏剧影视导演</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.xjysdy }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.xjysby && scoreInfo.xjysby!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.xjysby && scoreInfo.xjysby!==0">
|
||||
<text class="margin-right-10">戏剧影视表演</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.xjysby }}</text>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ export default {
|
|||
}
|
||||
}
|
||||
this.clearData()
|
||||
this.getRecommendVolunteerList()
|
||||
this.getHaveMajorBatchList()
|
||||
},
|
||||
onChange(e, index) {
|
||||
console.log('onChange')
|
||||
|
|
@ -253,7 +253,7 @@ export default {
|
|||
this.recommendVolunteerList = []
|
||||
this.selectForm.paneName = '全部'
|
||||
this.page.current = 1
|
||||
this.getRecommendVolunteerList()
|
||||
this.getHaveMajorBatchList()
|
||||
},
|
||||
goto(url) {
|
||||
uni.navigateTo({
|
||||
|
|
@ -285,7 +285,7 @@ export default {
|
|||
this.selectForm.batch = this.tabBars[index].id
|
||||
if (this.selectForm.batch ==='本科' && this.scoreInfo.professionalCategory !== '体育类') {
|
||||
//如果是艺术类,选择的本科,那就选择到本科下的985/211提前批
|
||||
this.selectForm.batch = '提前批'
|
||||
this.selectForm.batch = '本科A段'
|
||||
this.tabIndex2 = 1
|
||||
}
|
||||
this.selectForm.paneName = '全部'
|
||||
|
|
@ -393,7 +393,7 @@ export default {
|
|||
this.selectForm.batch = this.scoreInfo.batch
|
||||
//======目前所有批次的专业都可以看到 start
|
||||
if (this.scoreInfo.professionalCategory === '体育类') {
|
||||
this.tabBars = [{name: '本科', id: '本科'}, {name: '高职高专', id: '高职高专'}]
|
||||
this.tabBars = [{name: '本科', id: '本科'}, {name: '高职高专', id: '高职高专'}]
|
||||
} else {
|
||||
this.tabBars = [{name: '本科提前批', id: '校考'},
|
||||
{
|
||||
|
|
@ -404,25 +404,35 @@ export default {
|
|||
}, {name: '高职高专', id: '高职高专'}]
|
||||
}
|
||||
//======目前所有批次的专业都可以看到 end
|
||||
|
||||
console.log('qqq')
|
||||
//====================调整默认选中的导航栏 start
|
||||
if (this.scoreInfo.batch === '本科A段' || this.scoreInfo.batch === '本科B段') {
|
||||
this.selectForm.batch = this.scoreInfo.batch
|
||||
if (this.scoreInfo.batch === '本科B段'){
|
||||
this.tabIndex2 = 2
|
||||
}
|
||||
this.tabIndex = 1;
|
||||
}else if(this.scoreInfo.batch === '高职高专'){
|
||||
this.tabIndex = 2;
|
||||
} else {
|
||||
for (let i = 0; i < this.tabBars.length; i++) {
|
||||
if (this.tabBars[i].id === this.selectForm.batch) {
|
||||
//选中
|
||||
this.tabIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.scoreInfo.professionalCategory === '体育类') {
|
||||
if(this.scoreInfo.batch === '本科'){
|
||||
this.tabIndex = 0;
|
||||
}else{
|
||||
this.tabIndex = 1;
|
||||
}
|
||||
}else{
|
||||
if (this.scoreInfo.batch === '本科A段' || this.scoreInfo.batch === '本科B段') {
|
||||
this.selectForm.batch = this.scoreInfo.batch
|
||||
if (this.scoreInfo.batch === '本科B段'){
|
||||
this.tabIndex2 = 2
|
||||
}
|
||||
this.tabIndex = 1;
|
||||
} else if(this.scoreInfo.batch === '高职高专' && this.scoreInfo.professionalCategory!=='体育类'){
|
||||
this.tabIndex = 2;
|
||||
}
|
||||
else {
|
||||
for (let i = 0; i < this.tabBars.length; i++) {
|
||||
if (this.tabBars[i].id === this.selectForm.batch) {
|
||||
//选中
|
||||
this.tabIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//=====================调整默认选中的导航栏 end
|
||||
}
|
||||
request.get(ApiConstant.Volunteer.artVolunteerDetail, {id: this.filledVolunteer.volunteerId}).then(res => {
|
||||
|
|
@ -497,7 +507,8 @@ export default {
|
|||
if (e && e === 'load') {
|
||||
this.laodRecommendVolunterList()
|
||||
} else {
|
||||
this.getRecommendVolunteerList()
|
||||
this.getHaveMajorBatchList()
|
||||
//this.getRecommendVolunteerList()
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -523,6 +534,74 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
getHaveMajorBatchList(){
|
||||
let kyjxStrs = ''
|
||||
if (this.selectForm.kyjxList && this.selectForm.kyjxList.length > 0) {
|
||||
kyjxStrs = this.selectForm.kyjxList.join(',')
|
||||
}
|
||||
let tagsStrs = ''
|
||||
if (this.selectForm.tagsList && this.selectForm.tagsList.length > 0) {
|
||||
tagsStrs = this.selectForm.tagsList.join(",")
|
||||
}
|
||||
let schoolNatureStrs = ''
|
||||
if (this.selectForm.schoolNatureList && this.selectForm.schoolNatureList.length > 0) {
|
||||
schoolNatureStrs = this.selectForm.schoolNatureList.join(",")
|
||||
}
|
||||
//地区
|
||||
let province = ''
|
||||
if (arrayIsNotEmpty(this.selectForm.addressList)) {
|
||||
province = this.selectForm.addressList.join(",")
|
||||
}
|
||||
//录取方式
|
||||
let rulesEnrollProbability = ''
|
||||
if (arrayIsNotEmpty(this.selectForm.rulesEnrollProbabilityList)) {
|
||||
rulesEnrollProbability = this.selectForm.rulesEnrollProbabilityList.join(",")
|
||||
}
|
||||
let params = {
|
||||
schoolName: this.selectForm.schoolName,//学校名称
|
||||
province: province,
|
||||
rulesEnrollProbability: rulesEnrollProbability,
|
||||
tagsStrs: tagsStrs,
|
||||
schoolNatureStrs: schoolNatureStrs,
|
||||
kyjxStrs: kyjxStrs,
|
||||
scoreId: this.scoreInfo.id,
|
||||
kslx:this.selectForm.kslx
|
||||
}
|
||||
request.get(ApiConstant.Major.groupByBatchNumber, params).then(res => {
|
||||
if (res.success) {
|
||||
let haveMajorList = res.result
|
||||
if (arrayIsNotEmpty(haveMajorList)) {
|
||||
if(haveMajorList.includes('提前批')){
|
||||
this.tabIndex=1
|
||||
this.tabIndex2=0
|
||||
this.selectForm.batch='提前批'
|
||||
} else if(haveMajorList.includes('本科A段')){
|
||||
this.tabIndex=1
|
||||
this.tabIndex2=1
|
||||
this.selectForm.batch='本科A段'
|
||||
} else if(haveMajorList.includes('本科B段')){
|
||||
this.tabIndex=1
|
||||
this.tabIndex2=2
|
||||
this.selectForm.batch='本科B段'
|
||||
} else if(haveMajorList.includes('本科批') || haveMajorList.includes('本科')){
|
||||
this.tabIndex=0
|
||||
this.selectForm.batch='本科'
|
||||
} else if(haveMajorList.includes('高职高专')){
|
||||
if(this.scoreInfo.professionalCategory==='体育类'){
|
||||
this.tabIndex=1
|
||||
}else{
|
||||
this.tabIndex=2
|
||||
}
|
||||
this.selectForm.batch='高职高专'
|
||||
}
|
||||
}
|
||||
console.log(result.haveMajorList)
|
||||
}
|
||||
}).catch(err => {
|
||||
}).finally(() => {
|
||||
this.getRecommendVolunteerList()
|
||||
});
|
||||
},
|
||||
//获取推荐志愿列表
|
||||
getRecommendVolunteerList() {
|
||||
this.status = 'loading'
|
||||
|
|
@ -933,6 +1012,7 @@ export default {
|
|||
</view>
|
||||
<view class="flex">
|
||||
<view class="flex-item-65 slateGray" style="line-height: 50rpx">
|
||||
<text v-if="item.state==='新增'" style="color: red;font-size: 25rpx">新增</text>
|
||||
<text class="tag">[{{ item.enrollmentCode }}]{{ item.majorName }}</text>
|
||||
<text v-if="item.limitation">{{ item.majorDetail }}</text>
|
||||
<text class="margin-left-10">
|
||||
|
|
@ -944,10 +1024,10 @@ export default {
|
|||
</view>
|
||||
<view class="flex-item-35">
|
||||
<view style="float: right;line-height: 50rpx;" class="font-weight-600"
|
||||
v-if="item.privateStudentScore && vipInfo && vipInfo.vipLevel >= 2">
|
||||
v-if="vipInfo && (item.privateStudentScore||item.studentConvertedScore) && vipInfo.vipLevel >= 2">
|
||||
<text>计算分</text>
|
||||
<text class="font-size-mini margin-left-10" :style="'color:'+checkColorText(item.enrollProbability)">
|
||||
{{ item.privateStudentScore }}
|
||||
{{ item.privateStudentScore||item.studentConvertedScore }}
|
||||
</text>
|
||||
</view>
|
||||
<view style="float: right;line-height: 50rpx;" class="font-weight-600" v-if="item.studentScore">
|
||||
|
|
@ -993,7 +1073,7 @@ export default {
|
|||
</view>
|
||||
<view class="container" @click="loadMore" v-if="userInfo.vipFlag">
|
||||
<uni-load-more :status="status" :content-text="contentText"/>
|
||||
</view>1
|
||||
</view>
|
||||
</view>
|
||||
<!--其他专业-->
|
||||
<px-popup-bottom :background="'#ffffff'" :color="'black'" :visible.sync="otherMajor.visible" title=""
|
||||
|
|
@ -1046,12 +1126,11 @@ export default {
|
|||
</view>
|
||||
<view class="flex-item-5" style="line-height: 40rpx">
|
||||
<view class="flex" style="float: right">
|
||||
<view style="float: right;line-height: 50rpx;" class="font-weight-600"
|
||||
v-if="otherMajor.nowMajor.studentConvertedScore">
|
||||
<view style="float: right;line-height: 50rpx;" class="font-weight-600">
|
||||
<text>折合分</text>
|
||||
<text class="font-size-mini margin-left-10"
|
||||
:style="'color:'+checkColorText(otherMajor.nowMajor.enrollProbability)">
|
||||
{{ (vipInfo && vipInfo.vipLevel >= 2) ? otherMajor.nowMajor.studentConvertedScore : '??' }}
|
||||
{{ (vipInfo && vipInfo.vipLevel >= 2) ? otherMajor.nowMajor.studentScore : '??' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -1129,7 +1208,7 @@ export default {
|
|||
v-if="item.studentConvertedScore">
|
||||
<text>折合分</text>
|
||||
<text class="font-size-mini margin-left-10" :style="'color:'+checkColorText(item.enrollProbability)">
|
||||
{{ vipInfo && vipInfo.vipLevel >= 2 ? item.studentConvertedScore : '??' }}
|
||||
{{ vipInfo && vipInfo.vipLevel >= 2 ? item.studentScore : '??' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -442,7 +442,9 @@ export default {
|
|||
<!--成绩卡片-->
|
||||
<view class="score-info-card white" v-if="this.scoreInfo">
|
||||
<view class="flexWrap">
|
||||
<text class="font-size-mini4 font-weight-550">{{ volunteerInfo.volunteerName }}</text>
|
||||
<view class="flex-item-8">
|
||||
<text class="font-size-mini4 font-weight-550">{{ volunteerInfo.volunteerName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flexWrap tags font-size-mini2" v-if="scoreInfo">
|
||||
<view class="tag">{{ scoreInfo.province }}</view>
|
||||
|
|
@ -463,27 +465,27 @@ export default {
|
|||
</view>
|
||||
</view>
|
||||
<view class="flexWrap" style="margin-top: 30rpx;height: 30rpx;" v-if="scoreInfo && scoreInfo.professionalCategoryChildren">
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.yybysy && scoreInfo.yybysy!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.yybysy && scoreInfo.yybysy!==0">
|
||||
<text class="margin-right-10">音乐表演声乐</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.yybysy }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.yybyqy && scoreInfo.yybyqy!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.yybyqy && scoreInfo.yybyqy!==0">
|
||||
<text class="margin-right-10">音乐表演器乐</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.yybyqy }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.yyjy && scoreInfo.yyjy!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.yyjy && scoreInfo.yyjy!==0">
|
||||
<text class="margin-right-10">音乐教育</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.yyjy }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.fzby && scoreInfo.fzby!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.fzby && scoreInfo.fzby!==0">
|
||||
<text class="margin-right-10">服装表演</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.fzby }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.xjysdy && scoreInfo.xjysdy!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.xjysdy && scoreInfo.xjysdy!==0">
|
||||
<text class="margin-right-10">戏剧影视导演</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.xjysdy }}</text>
|
||||
</view>
|
||||
<view class="scoreLeft margin-right-30" v-if="scoreInfo.xjysby && scoreInfo.xjysby!==0">
|
||||
<view class="scoreLeft margin-right-20" v-if="scoreInfo.xjysby && scoreInfo.xjysby!==0">
|
||||
<text class="margin-right-10">戏剧影视表演</text>
|
||||
<text class="font-weight-b">{{ scoreInfo.xjysby }}</text>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
<script>
|
||||
import ImagesConstant from "@/common/ImagesConstant";
|
||||
|
||||
export default {
|
||||
name: "web-view",
|
||||
data(){
|
||||
return{
|
||||
viewUrl:'https://yitisheng.vip/wxSJIRHyQUBA/wxkf.html'
|
||||
viewUrl:''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ImagesConstant() {
|
||||
return ImagesConstant
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
if (e.url) {
|
||||
this.viewUrl = e.url
|
||||
if(e.url === 'volunteer_preview'){
|
||||
this.viewUrl = uni.getStorageSync('volunteer_preview')
|
||||
}else{
|
||||
this.viewUrl = e.url
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <view>{{viewUrl}}</view>-->
|
||||
<web-view :src="viewUrl"></web-view>
|
||||
<!-- <image class="marginCenter" :src="ImagesConstant.kfImage" style="height: 800rpx"/>-->
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
import graceChecker from "@/common/graceChecker";
|
||||
import StaticConstant from "@/common/StaticConstant";
|
||||
import ApiConstant from "@/common/ApiConstant";
|
||||
import Request from '@/common/request'
|
||||
import {arrayIsNotEmpty, stringIsNotEmpty} from "@/common/util";
|
||||
import CommonTool from "@/common/js/commonTool";
|
||||
|
||||
let request = new Request()
|
||||
export default {
|
||||
|
|
@ -43,9 +43,14 @@ export default {
|
|||
professionalCategoryIndex: null,
|
||||
pCategoryChildrenList: [],//子级选择
|
||||
professionalCategoryScoreMax: '',//选择的专业最高分
|
||||
contentHeight: 600
|
||||
contentHeight: 600,
|
||||
reloadMajorModalMessageConfig:{},
|
||||
}
|
||||
},
|
||||
async onLoad() {
|
||||
// 志愿单打印配置
|
||||
this.reloadMajorModalMessageConfig = await CommonTool.loadStaticConfig('reload_major_modal_message')
|
||||
},
|
||||
onShow() {
|
||||
this.getEditScoreCount()
|
||||
this.getUserScore()
|
||||
|
|
@ -280,6 +285,35 @@ export default {
|
|||
formReset: function (e) {
|
||||
console.log('清空数据')
|
||||
},
|
||||
reloadMajor:function (e){
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: that.reloadMajorModalMessageConfig.message1,
|
||||
confirmText: '确定',
|
||||
cancelText: '取消',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
that.reloadMajorSave()
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
reloadMajorSave(){
|
||||
request.post(ApiConstant.Score.reloadCalMajor, {}).then(res => {
|
||||
if (res.success) {
|
||||
let scoreInfo = res.result
|
||||
request.getUserScore()
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/zyb/home'
|
||||
})
|
||||
}, 800)
|
||||
}
|
||||
}).catch(err => {
|
||||
}).finally(() => {
|
||||
});
|
||||
},
|
||||
onProfessionalCategory() {
|
||||
//其他用户只能改一次专业类别
|
||||
if (this.vipInfo.vipLevel === 9 || this.oldScoreInfo === null || !stringIsNotEmpty(this.oldScoreInfo.professionalCategory)) {
|
||||
|
|
@ -490,6 +524,7 @@ export default {
|
|||
:class="formRuleFlag?'button-active':'button-disabled'" @click="formSubmit">
|
||||
<text class="font-weight-b">保存</text>
|
||||
</view>
|
||||
|
||||
<!--普通vip 一天只能改10次成绩-->
|
||||
<view v-else-if="vipInfo && vipInfo.vipLevel && vipInfo.vipLevel <=2 && (10-useCount)>0" class="submitButtonView"
|
||||
:class="formRuleFlag?'button-active':'button-disabled'" @click="formSubmit">
|
||||
|
|
@ -503,9 +538,14 @@ export default {
|
|||
<view v-else class="submitButtonView button-disabled">
|
||||
<text class="font-weight-b">今日修改次数已用完</text>
|
||||
</view>
|
||||
<view class="darkGray padding10-30" v-if="vipInfo.vipLevel ===null || vipInfo.vipLevel!==9">
|
||||
注:仅可修改一次专业类别
|
||||
<view class="submitButtonView button-active" v-if="scoreInfo && scoreInfo.id && scoreInfo.professionalCategory" @click="reloadMajor">
|
||||
<text class="font-weight-b">刷新专业</text>
|
||||
</view>
|
||||
<view class="darkGray padding10-30" >
|
||||
注:{{(vipInfo.vipLevel ===null || vipInfo.vipLevel!==9)?'仅可修改一次专业类别':''}};
|
||||
{{reloadMajorModalMessageConfig.message2}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 每次弹出重新计算内容高度适用动态数据加载 -->
|
||||
<px-popup-bottom :visible.sync="professionalCategoryVisible" title="请选择专业类别"
|
||||
|
|
|
|||
|
|
@ -84,15 +84,16 @@ export default {
|
|||
//结果
|
||||
success: function (res) {
|
||||
console.log('==== uni.requestPayment success', res);
|
||||
let code = ''
|
||||
// #ifdef MP-TOUTIAO
|
||||
let code = res.code
|
||||
code = res.code
|
||||
if(0 === code){
|
||||
//支付成功
|
||||
console.log('支付成功!')
|
||||
setTimeout(function () {
|
||||
commonTool.reloadVipInfo()
|
||||
uni.showToast({title:'支付成功', icon: "none"});
|
||||
}, 100)
|
||||
}, 200)
|
||||
setTimeout(function () {
|
||||
uni.switchTab({
|
||||
url: '/pages/zyb/home'
|
||||
|
|
@ -107,7 +108,7 @@ export default {
|
|||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
let code = res.errMsg
|
||||
code = res.errMsg
|
||||
if("requestPayment:ok" === code){
|
||||
//支付成功
|
||||
console.log('支付成功!')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
## 1.1.6(2023-12-18)
|
||||
- 【官方文档】[flower-empty 缺省库](https://flowerui.com/documents/flower-empty/guide/sketch.html)
|
||||
- 【调整】调整组件的前缀,前缀 `ui` 调整为 `fr`
|
||||
- 【新增】可自定义配置主题色彩
|
||||
## 1.1.5(2023-11-16)
|
||||
- 【官方文档】[flower-empty 缺省库](https://flowerui.com/documents/flower-empty/guide/sketch.html)
|
||||
- 【优化】优化组件结构
|
||||
## 1.1.4(2023-11-16)
|
||||
- 【官方文档】[flower-empty 缺省库](https://flowerui.com/documents/flower-empty/guide/sketch.html)
|
||||
- 【优化】优化组件结构
|
||||
## 1.1.3(2023-11-16)
|
||||
- 【官方文档】[flower-empty 缺省库](https://flowerui.com/documents/flower-empty/guide/sketch.html)
|
||||
- 【修复】修复vue2版本编译出错问题。
|
||||
## 1.1.2(2023-11-13)
|
||||
- 【官方文档】[flower-empty 缺省库](https://flowerui.com/documents/flower-empty/guide/sketch.html)
|
||||
- 【优化】全端兼容,支持uni-app-x
|
||||
## 1.1.1(2023-09-22)
|
||||
- 【修复】组件属性`offsetTop` 和 `offsetBottom`问题。
|
||||
## 1.1.0(2023-09-22)
|
||||
- 【重置】调整结构重置所有组件,兼容vue2/vue3
|
||||
## 1.0.4(2023-08-22)
|
||||
- 【优化】移除`offset` 属性,拆分为 `offsetTop` 和 `offsetBottom` 属性
|
||||
## 1.0.3(2023-05-23)
|
||||
- 【优化】`<ui-empty-loading />` 添加加载转圈动画
|
||||
## 1.0.2(2023-05-17)
|
||||
- 【调整】将 `offsetTop` 和 `offsetBottom` 属性合并为 `offset` 属性。
|
||||
## 1.0.1(2023-04-21)
|
||||
- 【修复】修复组件 JS 引入问题
|
||||
## 1.0.0(2023-04-19)
|
||||
- 缺省页 `<ui-empty-shopping />` - 购物车空空如也
|
||||
- 缺省页 `<ui-empty-fail />` - 加载失败
|
||||
- 缺省页 `<ui-empty-loading />` - 加载中
|
||||
- 缺省页 `<ui-empty-null />` - 空数据
|
||||
- 缺省页 `<ui-empty-permission />` - 无权限
|
||||
- 缺省页 `<ui-empty-agenda />` - 暂无日程
|
||||
- 缺省页 `<ui-empty-page />` - 页面不见了
|
||||
- 缺省页 `<ui-empty-coupon />` - 暂无优惠券
|
||||
- 缺省页 `<ui-empty-data />` - 暂无数据
|
||||
- 缺省页 `<ui-empty-card />` - 暂无银行卡
|
||||
- 缺省页 `<ui-empty-signal />` - 暂无信号
|
||||
- 缺省页 `<ui-empty-collection />` - 暂无收藏
|
||||
- 缺省页 `<ui-empty-network />` - 无网络
|
||||
- 缺省页 `<ui-empty-folder />` - 文件夹空空如也
|
||||
- 缺省页 `<ui-empty-search />` - 暂无搜索结果
|
||||
- 缺省页 `<ui-empty-record />` - 暂无记录
|
||||
- 缺省页 `<ui-empty-slow />` - 网络不给力
|
||||
- 缺省页 `<ui-empty-message />` - 暂无消息
|
||||
- 缺省页 `<ui-empty-direction />` - 暂无方向
|
||||
- 缺省页 `<ui-empty-html />` - 404
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<view>
|
||||
<text>多平台 uni-app-x 生态缺省页组件库 ,根据异常的场景给予相关元素的缺省页。</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<view>
|
||||
<text>多平台 uni-app 生态缺省页组件库 ,根据异常的场景给予相关元素的缺省页。</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,125 @@
|
|||
let emptyValue = {
|
||||
// 主题颜色
|
||||
themeColor: "#296BEF",
|
||||
// 头发颜色
|
||||
hairColor: '#483029',
|
||||
// 衣服颜色
|
||||
clothesColor: "#EDA20C",
|
||||
// 裤子颜色
|
||||
trousersColor: "#296BEF",
|
||||
// 鞋子颜色
|
||||
shoesColor: "#296BEF",
|
||||
// 物品颜色
|
||||
itemColor: "#483029",
|
||||
// 人物肤色
|
||||
skinColor: "#ffcda5",
|
||||
// 元素颜色
|
||||
elementColor: "#ffffff"
|
||||
};
|
||||
|
||||
/**
|
||||
* 参数合并
|
||||
*/
|
||||
function initEmptyConfig(config) {
|
||||
// 当主题色不为空时,将裤子和鞋子的颜色同步
|
||||
if(config.themeColor !== undefined){
|
||||
// 当裤子颜色为空时,默认主题色
|
||||
if(config.trousersColor == undefined){config.trousersColor = config.themeColor};
|
||||
// 当鞋子颜色为空时,默认主题色
|
||||
if(config.shoesColor == undefined){config.shoesColor = config.themeColor};
|
||||
};
|
||||
emptyValue = Object.assign(emptyValue, config);
|
||||
return emptyValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* 颜色解析
|
||||
*/
|
||||
/**
|
||||
* 主题色渐变混色
|
||||
* @param c1 混色1
|
||||
* @param c2 混色2
|
||||
* @param weight 权重 0~1 之间
|
||||
* @returns hex规定颜色值为十六进制值颜色
|
||||
*/
|
||||
function generateMixedColor(c1, c2, weight) {
|
||||
weight = Math.max(Math.min(weight, 1), 0);
|
||||
const r1 = parseInt(c1.substring(1, 3), 16);
|
||||
const g1 = parseInt(c1.substring(3, 5), 16);
|
||||
const b1 = parseInt(c1.substring(5, 7), 16);
|
||||
const r2 = parseInt(c2.substring(1, 3), 16);
|
||||
const g2 = parseInt(c2.substring(3, 5), 16);
|
||||
const b2 = parseInt(c2.substring(5, 7), 16);
|
||||
const r = Math.round(r1 * (1 - weight) + r2 * weight);
|
||||
const g = Math.round(g1 * (1 - weight) + g2 * weight);
|
||||
const b = Math.round(b1 * (1 - weight) + b2 * weight);
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 主题颜色
|
||||
*/
|
||||
function funThemeColor(coefficient = 1) {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.themeColor}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 头发颜色
|
||||
*/
|
||||
function funHairColor() {
|
||||
return `${emptyValue.hairColor}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 衣服颜色
|
||||
*/
|
||||
function funClothesColor(coefficient = 1) {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.clothesColor}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 裤子颜色
|
||||
*/
|
||||
function funTrousersColor(coefficient = 1) {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.trousersColor}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 鞋子颜色
|
||||
*/
|
||||
function funShoesColor(coefficient = 1) {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.shoesColor}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 人物肤色
|
||||
*/
|
||||
function funSkinColor(coefficient = 1) {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.skinColor}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 元素颜色
|
||||
*/
|
||||
function funElementColor() {
|
||||
return `${emptyValue.elementColor}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 元素颜色
|
||||
*/
|
||||
function funItemColor() {
|
||||
return `${emptyValue.itemColor}`;
|
||||
};
|
||||
|
||||
export {
|
||||
funThemeColor,
|
||||
funHairColor,
|
||||
funClothesColor,
|
||||
funTrousersColor,
|
||||
funShoesColor,
|
||||
funSkinColor,
|
||||
funItemColor,
|
||||
funElementColor,
|
||||
initEmptyConfig
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
let emptyValue : UTSJSONObject = {
|
||||
// 主题颜色
|
||||
themeColor: "#296BEF",
|
||||
// 头发颜色
|
||||
hairColor: '#483029',
|
||||
// 衣服颜色
|
||||
clothesColor: "#EDA20C",
|
||||
// 裤子颜色
|
||||
trousersColor: "#296BEF",
|
||||
// 鞋子颜色
|
||||
shoesColor: "#296BEF",
|
||||
// 物品颜色
|
||||
itemColor: "#483029",
|
||||
// 人物肤色
|
||||
skinColor: "#ffcda5",
|
||||
// 元素颜色
|
||||
elementColor: "#ffffff"
|
||||
};
|
||||
|
||||
/**
|
||||
* 参数合并
|
||||
*/
|
||||
|
||||
function initEmptyConfig(config : UTSJSONObject) : UTSJSONObject {
|
||||
// 当主题色不为空时,将裤子和鞋子的颜色同步
|
||||
if (config.getString("themeColor") !== null) {
|
||||
// 当裤子颜色为空时,默认主题色
|
||||
if (config.getString("trousersColor") == null) {config.set("trousersColor", config.getString("themeColor"));};
|
||||
// 当鞋子颜色为空时,默认主题色
|
||||
if (config.getString("shoesColor") == null) {config.set("shoesColor", config.getString("themeColor"));};
|
||||
};
|
||||
emptyValue = Object.assign(emptyValue, config);
|
||||
return emptyValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* 颜色解析
|
||||
*/
|
||||
/**
|
||||
* 主题色渐变混色
|
||||
* @param c1 混色1
|
||||
* @param c2 混色2
|
||||
* @param weight 权重 0~1 之间
|
||||
* @returns hex规定颜色值为十六进制值颜色
|
||||
*/
|
||||
function generateMixedColor(c1 : string, c2 : string, weight : number) : string {
|
||||
weight = Math.max(Math.min(weight, 1), 0);
|
||||
const r1 = parseInt(c1.substring(1, 3), 16);
|
||||
const g1 = parseInt(c1.substring(3, 5), 16);
|
||||
const b1 = parseInt(c1.substring(5, 7), 16);
|
||||
const r2 = parseInt(c2.substring(1, 3), 16);
|
||||
const g2 = parseInt(c2.substring(3, 5), 16);
|
||||
const b2 = parseInt(c2.substring(5, 7), 16);
|
||||
const r = Math.round(r1 * (1 - weight) + r2 * weight);
|
||||
const g = Math.round(g1 * (1 - weight) + g2 * weight);
|
||||
const b = Math.round(b1 * (1 - weight) + b2 * weight);
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 主题颜色
|
||||
*/
|
||||
function funThemeColor(coefficient : number = 1) : string {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.getString("themeColor")}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 头发颜色
|
||||
*/
|
||||
function funHairColor() : string {
|
||||
return `${emptyValue.getString("hairColor")}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 衣服颜色
|
||||
*/
|
||||
function funClothesColor(coefficient : number = 1) : string {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.getString("clothesColor")}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 裤子颜色
|
||||
*/
|
||||
function funTrousersColor(coefficient : number = 1) : string {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.getString("trousersColor")}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 鞋子颜色
|
||||
*/
|
||||
function funShoesColor(coefficient : number = 1) : string {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.getString("shoesColor")}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 人物肤色
|
||||
*/
|
||||
function funSkinColor(coefficient : number = 1) : string {
|
||||
return generateMixedColor("#ffffff", `${emptyValue.getString("skinColor")}`, coefficient);
|
||||
};
|
||||
|
||||
/**
|
||||
* 元素颜色
|
||||
*/
|
||||
function funElementColor() : string {
|
||||
return `${emptyValue.getString("elementColor")}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 元素颜色
|
||||
*/
|
||||
function funItemColor() : string {
|
||||
return `${emptyValue.getString("itemColor")}`;
|
||||
};
|
||||
|
||||
export {
|
||||
funThemeColor, funHairColor, funClothesColor, funTrousersColor, funShoesColor, funSkinColor, funItemColor, funElementColor, initEmptyConfig
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
|
||||
/**
|
||||
* @param {Object} svg svg数据参数
|
||||
*
|
||||
* 手动修改颜色配置
|
||||
* 裤子: funTrousersColor
|
||||
* 鞋子: funShoesColor
|
||||
* 物品: funHairColor => funItemColor
|
||||
* 压缩svg网址:http://tool.mkblog.cn/svgo/
|
||||
*/
|
||||
|
||||
function test(svg) {
|
||||
const encoded = svg
|
||||
.replace(/#5792f0/g, "${funThemeColor(1)}")
|
||||
.replace(/#8ab4f7/g, "${funThemeColor(0.6)}")
|
||||
.replace(/#bfd4fa/g, "${funThemeColor(0.5)}")
|
||||
.replace(/#ccdcf6/g, "${funThemeColor(0.4)}")
|
||||
.replace(/#cfdffa/g, "${funThemeColor(0.3)}")
|
||||
.replace(/#eaf0fc/g, "${funThemeColor(0.2)}")
|
||||
.replace(/#f9ab21/g, "${funClothesColor(1)}")
|
||||
.replace(/#fee127/g, "${funClothesColor(0.6)}")
|
||||
.replace(/#483029/g, "${funHairColor()}")
|
||||
.replace(/#fee0bc/g, "${funSkinColor(0.8)}")
|
||||
.replace(/#fff2df/g, "${funSkinColor(0.3)}")
|
||||
.replace(/#ffdec4/g, "${funSkinColor(0.7)}")
|
||||
.replace(/#ffcda5/g, "${funSkinColor(1)}")
|
||||
.replace(/#ffe8d1/g, "${funSkinColor(0.6)}")
|
||||
.replace(/#ffffff/g, "${funElementColor()}")
|
||||
.replace(/#fafafa/g, "${funThemeColor(0.3)}");
|
||||
console.log(encoded)
|
||||
};
|
||||
|
||||
|
||||
export {
|
||||
test
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
{
|
||||
"id": "flower-empty",
|
||||
"displayName": "flower-empty 缺省页,全平台全版本兼容,最新支持 uni-app-x",
|
||||
"version": "1.1.6",
|
||||
"description": "多平台 uni-app-x 生态缺省页 ,根据异常的场景给予相关元素的缺省页。",
|
||||
"keywords": [
|
||||
"vue,nvue,uvue,vue2版本,vue3版本,缺省页"
|
||||
],
|
||||
"repository": "https://github.com/dengqichang/flower-library/tree/main/uni_modules/flower-empty",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.96"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["flower-svg"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-uvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<p align="center"><img alt="logo" src="https://www.flowerui.com/logo.png" width="123"></p>
|
||||
<h3 align="center">FLOWER EMPTY</h3>
|
||||
<p align="center">多平台 uni-app-x 生态缺省页组件库 ,根据异常的场景给予相关元素的缺省页。</p>
|
||||
|
||||
#### 简述
|
||||
缺省页是页面无内容或者异常的状态时展示的页面。
|
||||
设计缺省页作用是设计更好的用户体验,即在异常状态下的给予用户友好提示及安抚用户情绪。
|
||||
根据异常的场景给予相关元素的缺省页,在产品页面相对应的场景特点来设计页面内容。
|
||||
|
||||
#### 官方文档
|
||||
官网地址:<a target="_blank" href="https://flowerui.com/documents/flower-empty/guide/sketch.html">缺省组件库官方文档</a>
|
||||
#### 交流反馈
|
||||
官方QQ群:<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=_a2CXouL0H2OvaJ8vPalp3S6DABKIoCH&jump_from=webapi&authKey=riLWFXQamGAWrXQnBW0NCCFVeodvRvAEAooJNxuNybHBCOs9w0V9yR2F1NhVsZS/">654105306</a>
|
||||
#### 源码
|
||||
[](https://github.com/dengqichang/flower-library/tree/main/uni_modules/flower-empty)
|
||||
[](https://github.com/dengqichang/flower-library/tree/main/uni_modules/flower-empty)
|
||||
[](https://github.com/dengqichang/flower-library/tree/main/uni_modules/flower-empty)
|
||||
[](https://github.com/dengqichang/flower-library/tree/main/uni_modules/flower-empty)
|
||||
[](https://github.com/dengqichang/flower-library/tree/main/uni_modules/flower-empty)
|
||||
[](https://github.com/dengqichang/flower-library/tree/main/uni_modules/flower-empty)
|
||||
|
||||
#### 版本兼容
|
||||
| Vue2 | Vue3 |
|
||||
| :------: | :------: |
|
||||
| √ | √ |
|
||||
#### 平台兼容
|
||||
| app-uvue | app-vue | app-nvue | 各端小程序 | H5 |
|
||||
| :------: | :------: | :------: | :-------: | :-------: |
|
||||
| √ | √ | √ | √ |√ |
|
||||
#### 适用领域
|
||||
基于 `uni-app` 生态开发的缺省页,`uni-app` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
|
||||
#### 版权信息
|
||||
- 遵循 `MIT` 开源协议,无需支付任何费用,也无需授权,即可将框架应用到产品中。
|
||||
- 开发扩展与插件时,请注明基于 [FLOWER LIBRARY](https://flowerui.com/) 开发。
|
||||
- 仅供学习交流,如作它用所承受的法律责任一概与作者无关。
|
||||
|
||||
#### 致谢
|
||||
首先感谢 [DCloud](https://www.dcloud.io/) 官方,旗下出品的 [uni-app](https://uniapp.dcloud.net.cn/) 、[uniCloud](https://uniapp.dcloud.net.cn/uniCloud/)、[uni-app 小程序](https://nativesupport.dcloud.net.cn/README) 等多平台、多元化的技术体系。
|
||||
其次感谢 [DCloud 插件市场](https://ext.dcloud.net.cn/) 开源作品的作者们,"捧着一颗心来,不带半棵草去。" 的开源奉献精神致敬。
|
||||
|
|
@ -550,17 +550,18 @@
|
|||
}
|
||||
|
||||
.le-dropdown-filter-box {
|
||||
width: 200rpx;
|
||||
//width: 200rpx;
|
||||
min-width: 180rpx;
|
||||
padding: 18rpx 10rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 14rpx;
|
||||
padding: 18rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 999rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.le-dropdown-filter-box-active {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ $circle-trail-cap-color: currentColor;//var(--l-circle-trail-cap-color, currentC
|
|||
$circle-stroke-cap-size: var(--l-circle-stroke-cap-size, 6px);
|
||||
$circle-stroke-cap-start-color: var(--l-circle-stroke-cap-start-color, $fill-2);
|
||||
$circle-stroke-cap-end-color: var(--l-circle-stroke-cap-end-color, $fill-2);
|
||||
//:root
|
||||
:root {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@
|
|||
<canvas v-if="useCanvas" type="2d" :canvas-id="canvasId" :id="canvasId" class="l-circle__canvas" ></canvas>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<web-view
|
||||
@pagefinish="finished = true"
|
||||
<web-view
|
||||
@pagefinish="finished = true"
|
||||
@error="onerror"
|
||||
@onPostMessage="onMessage"
|
||||
class="l-circle__view"
|
||||
class="l-circle__view"
|
||||
ref="webview"
|
||||
src="/uni_modules/lime-circle/hybrid/html/index.html"></web-view>
|
||||
<!-- #endif -->
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
import { isString } from '@/uni_modules/lime-shared/isString';
|
||||
import { getRect } from '@/uni_modules/lime-shared/getRect';
|
||||
// import { useTransition } from '@/uni_modules/lime-use';
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'l-circle',
|
||||
props: CircleProps,
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
const useCanvas = ref(props.canvas)
|
||||
const canvasId = `l-circle-${context.uid}`;
|
||||
let circleCanvas = null
|
||||
|
||||
|
||||
const RADIAN = Math.PI / 180
|
||||
const ratio = computed(() => 100 / props.max)
|
||||
const percent = ref<number>(0)
|
||||
|
|
@ -84,8 +84,8 @@
|
|||
// }
|
||||
return lineCap ? `is-${lineCap} ` : ' ' + !clockwise && !useCanvas.value && `clockwise`
|
||||
})
|
||||
|
||||
// css render
|
||||
|
||||
// css render
|
||||
const trailStyles = computed(() => {
|
||||
const { size, trailWidth, trailColor, dashboard } = props
|
||||
const circle = getCircle(size, trailWidth)
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
}
|
||||
}
|
||||
gradient += gradientEnd
|
||||
}
|
||||
}
|
||||
return {
|
||||
mask,
|
||||
'-webkit-mask': mask,
|
||||
|
|
@ -201,11 +201,11 @@
|
|||
percent.value = v
|
||||
circleCanvas && circleCanvas.play(v)
|
||||
})
|
||||
|
||||
|
||||
const stopCurrent = watch(current, (v) => {
|
||||
if(!useCanvas.value) {
|
||||
calcStrokeCap()
|
||||
}
|
||||
}
|
||||
emit('update:current', v.toFixed(2))
|
||||
})
|
||||
const getProps = () => {
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
const init = ref(false)
|
||||
const webview = ref(null)
|
||||
const onerror = () => {
|
||||
|
||||
|
||||
}
|
||||
const onMessage = (e: any) => {
|
||||
const {detail:{data: [res]}} = e;
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
}
|
||||
percent.value = props.percent
|
||||
})
|
||||
|
||||
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
onMounted(() => {
|
||||
|
|
@ -311,4 +311,4 @@
|
|||
</script>
|
||||
<style lang="scss">
|
||||
@import './index';
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
## 1.0.8(2023-08-15)
|
||||
## 新增slot布局
|
||||
- 可自定义title布局
|
||||
- 可自定unit布局
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<mrsongCharts type='column' title="柱状图" align='left'>
|
||||
<div slot="title" class="chart-title">测试slot自定义title</div>
|
||||
<div slot="unit" class="chart-unit">测试slot自定义unit</div>
|
||||
</mrsongCharts>
|
||||
<mrsongCharts type='line' title="折线图" align='left' />
|
||||
<mrsongCharts type='mount' title="山峰图无边渐变色" align='left' />
|
||||
<mrsongCharts type='pie' title="圆角条状图+渐变色" align='left' />
|
||||
<mrsongCharts type='bar' title="带分割线+渐变色" align='left' />
|
||||
<mrsongCharts type='ring' title="环形图" align='left' />
|
||||
<mrsongCharts type='funnel' title="标准漏斗图" align='left' />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 1.0.7(2023-08-15)
|
||||
## 更新示例工程
|
||||
## 1.0.6(2023-08-15)
|
||||
## 更改组件样式表
|
||||
## 1.0.5(2023-08-15)
|
||||
## 修复小程序兼容问题
|
||||
## 修复tooltip不显示问题
|
||||
注意:包裹组件的元素不能出现定位,否则tooltip显示异常
|
||||
## 1.0.4(2022-08-18)
|
||||
## 修复bug
|
||||
小程序语法兼容
|
||||
## 1.0.3(2022-08-15)
|
||||
## 新增个人配置
|
||||
```json
|
||||
// config:组件props,个人配置
|
||||
{
|
||||
"itemCount": 3, //x轴单屏显示数据的数量,默认为5个
|
||||
"scrollShow": false, //新增是否显示滚动条,默认false
|
||||
"scrollAlign": 'left', //滚动条初始位置
|
||||
"rotateLabel": true, //X轴label旋转
|
||||
"min": 0, //Y轴最小值
|
||||
"max": 150, //Y轴大值
|
||||
"unit": "", //Y轴单位
|
||||
"enableScroll": false, //开启滚动模式
|
||||
"color": [//颜色设置
|
||||
"#9A60B4",
|
||||
"#ea7ccc"
|
||||
],
|
||||
}
|
||||
```
|
||||
## 1.0.2(2022-08-02)
|
||||
## 图表新增unit单位展示
|
||||
## 1.0.1(2022-08-02)
|
||||
修复bug
|
||||
## 1.0.0(2022-08-02)
|
||||
init
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
<template>
|
||||
<view v-if="showChart" class="mrsong-charts">
|
||||
<view class="chart-title-box" :style="'text-align:' + align">
|
||||
<slot name="title" v-if="title && title!==''">
|
||||
<text class="chart-title">{{ title }}</text>
|
||||
</slot>
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<slot name="unit">
|
||||
<view v-if="unit" class="chart-unit">单位:{{ unit ? `(${unit})` : '' }}</view>
|
||||
</slot>
|
||||
<qiun-data-charts :opts="opts" type="column" :chart-data="currentData" background="none" :animation="false" :ontouch="true" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { initColumnData, initLineData, initFunnelData, initRingData, initMountData, initBarData, initPieData } from './uchart.config.js';
|
||||
import qiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts';
|
||||
export default {
|
||||
name: 'MrsongCharts',
|
||||
components: {
|
||||
qiunDataCharts
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'column'
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
chartsData: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
itemCount: 3, // x轴单屏显示数据的数量,默认为5个
|
||||
scrollShow: false, // 新增是否显示滚动条,默认false
|
||||
scrollAlign: 'left', // 滚动条初始位置
|
||||
rotateLabel: true, // X轴label旋转
|
||||
min: 0, // Y轴最小值
|
||||
// "max": 150, //Y轴大值
|
||||
unit: '', // Y轴单位
|
||||
enableScroll: false, // 开启滚动模式
|
||||
color: [
|
||||
// 颜色设置
|
||||
'#9A60B4',
|
||||
'#ea7ccc'
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
color: ['#008749', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
|
||||
xAxis: {
|
||||
itemCount: 3, // x轴单屏显示数据的数量,默认为5个
|
||||
scrollShow: false, // 新增是否显示滚动条,默认false
|
||||
scrollAlign: 'left', // 滚动条初始位置
|
||||
rotateLabel: true // X轴label旋转
|
||||
},
|
||||
yAxis: {
|
||||
data: [
|
||||
{
|
||||
min: 0, // Y轴最小值
|
||||
// "max": 150, //Y轴大值
|
||||
unit: '' // Y轴单位
|
||||
}
|
||||
]
|
||||
},
|
||||
enableScroll: false // 开启滚动模式
|
||||
};
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
align: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
opts: {},
|
||||
yMax: 10,
|
||||
currentData: {
|
||||
categories: [],
|
||||
series: []
|
||||
},
|
||||
showChart: false
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
type: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.formatType(val);
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
options: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
let opts = this.assignDeep(this.opts, val);
|
||||
if (this.config) {
|
||||
let xAxis = opts.xAxis;
|
||||
let yAxis = opts.yAxis.length ? opts.yAxis[0] : {};
|
||||
let color = this.config.color;
|
||||
if (opts.color) opts.color = color;
|
||||
for (let key in this.config) {
|
||||
if (Object.keys(xAxis).includes(key)) xAxis[key] = this.config[key];
|
||||
if (Object.keys(yAxis).includes(key)) yAxis[key] = this.config[key];
|
||||
if (Object.keys(opts).includes(key)) {
|
||||
opts[key] = this.config[key];
|
||||
}
|
||||
}
|
||||
this.opts = opts;
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
chartsData: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.currentData = val;
|
||||
let list = [];
|
||||
let opts = {};
|
||||
let seriesItem = val.series || [];
|
||||
seriesItem.map((item) => {
|
||||
list = [...list, ...item.data];
|
||||
});
|
||||
if (this.type == 'column' || this.type == 'line') {
|
||||
let max = Math.max.apply(
|
||||
Math,
|
||||
list.map((item) => {
|
||||
return item;
|
||||
})
|
||||
);
|
||||
this.yMax = max > 10 ? max : 10;
|
||||
this.opts.yAxis.data.forEach((item) => {
|
||||
if (max > 10) {
|
||||
delete item.max;
|
||||
} else {
|
||||
item.max = this.yMax;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.currentData = this.initchartsData();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
uni.showLoading({
|
||||
title: '正在加载'
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.showChart = true;
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initchartsData() {
|
||||
if (this.type == 'mount' || this.type == 'pie' || this.type == 'ring' || this.type == 'funnel') {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '一班',
|
||||
value: 82
|
||||
},
|
||||
{
|
||||
name: '二班',
|
||||
value: 63
|
||||
},
|
||||
{
|
||||
name: '三班',
|
||||
value: 50
|
||||
},
|
||||
{
|
||||
name: '四班',
|
||||
value: 40
|
||||
},
|
||||
{
|
||||
name: '五班',
|
||||
value: 30
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
||||
series: [
|
||||
{
|
||||
name: '目标值',
|
||||
data: [40, 36, 31, 33, 13, 34]
|
||||
},
|
||||
{
|
||||
name: '完成量',
|
||||
data: [18, 27, 21, 24, 6, 28]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
assignDeep(target) {
|
||||
// 判断是否是纯粹对象
|
||||
const isPlainObject = (obj) => {
|
||||
return Object.prototype.toString.call(obj) === '[object Object]';
|
||||
};
|
||||
const args = Array.from(arguments);
|
||||
if (args.length < 2) return args[0];
|
||||
let result = args[0];
|
||||
args.shift();
|
||||
args.forEach((item) => {
|
||||
if (isPlainObject(item)) {
|
||||
if (!isPlainObject(result)) result = {};
|
||||
for (let key in item) {
|
||||
if (result[key] && isPlainObject(item[key])) {
|
||||
result[key] = this.assignDeep(result[key], item[key]);
|
||||
} else {
|
||||
result[key] = item[key];
|
||||
}
|
||||
}
|
||||
} else if (item instanceof Array) {
|
||||
if (!(result instanceof Array)) result = [];
|
||||
item.forEach((arrItem, arrIndex) => {
|
||||
if (isPlainObject(arrItem)) {
|
||||
result[arrIndex] = this.assignDeep(result[arrIndex]);
|
||||
} else {
|
||||
result[arrIndex] = arrItem;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
formatType(str) {
|
||||
switch (str) {
|
||||
case 'column':
|
||||
this.opts = initColumnData();
|
||||
break;
|
||||
case 'line':
|
||||
this.opts = initLineData();
|
||||
break;
|
||||
case 'funnel':
|
||||
this.opts = initFunnelData();
|
||||
break;
|
||||
case 'ring':
|
||||
this.opts = initRingData();
|
||||
break;
|
||||
case 'mount':
|
||||
this.opts = initMountData();
|
||||
break;
|
||||
case 'bar':
|
||||
this.opts = initBarData();
|
||||
break;
|
||||
case 'pie':
|
||||
this.opts = initPieData();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
padding: 50rpx 0;
|
||||
background: #fff;
|
||||
|
||||
.chart-unit {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
line-height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-title-box,
|
||||
.mrsong-charts {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-title-box {
|
||||
font-size: 30rpx;
|
||||
color: '#666666';
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mrsong-charts {
|
||||
padding: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
## 2.4.3-20220505(2022-05-05)
|
||||
- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时,再次赋值后画布闪动的bug
|
||||
- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.gridEval,数据点位网格抽希,默认1
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel, 是否显示刻度点值,默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix,刻度点值小数位数,默认0
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow,是否显示末端刻度圆点,默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius,刻度圆点的半径,默认3
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor,刻度圆点的颜色,默认#cccccc
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.linearType,渐变色类型,可选值"none"关闭渐变,"custom"开启渐变
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.customColor,自定义渐变颜色,数组类型对应series的数组长度以匹配不同series颜色的不同配色方案,例如["#FA7D8D", "#EB88E2"]
|
||||
- uCharts.js 雷达图优化支持series.textColor、series.textSize属性
|
||||
- uCharts.js 柱状图中温度计式图标,优化支持全圆角类型,修复边框有缝隙的bug,详见官网【演示】中的温度计图表
|
||||
- uCharts.js 柱状图新增参数opts.extra.column.activeWidth,当前点击柱状图的背景宽度,默认一个单元格单位
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度,默认0.2
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelText,自定义标签文字,避免formatter格式化的繁琐,详见官网【演示】中的饼图
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelShow,自定义是否显示某一个指示标签,避免因饼图类别太多导致标签重复或者居多导致图形变形的问题,详见官网【演示】中的饼图
|
||||
- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText(与series.name同级)自定义图例显示文字的方法
|
||||
- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参,统一为fromatter:function(value,index,opts){}
|
||||
- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug
|
||||
- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug
|
||||
- 【官网模板】增加外部自定义图例与图表交互的例子,[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2)
|
||||
|
||||
## 注意:非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下,请到码云更新非 unimodules 版本组件,[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)
|
||||
> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0"
|
||||
## 2.4.2-20220421(2022-04-21)
|
||||
- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题
|
||||
## 2.4.2-20220420(2022-04-20)
|
||||
## 重要!此版本uCharts新增了很多功能,修复了诸多已知问题
|
||||
- 秋云图表组件 新增onzoom开启双指缩放功能(仅uCharts),前提需要直角坐标系类图表类型,并且ontouch为true、opts.enableScroll为true,详见实例项目K线图
|
||||
- 秋云图表组件 新增optsWatch是否监听opts变化,关闭optsWatch后,动态修改opts不会触发图表重绘
|
||||
- 秋云图表组件 修复开启canvas2d功能后,动态更新数据后画布闪动的bug
|
||||
- 秋云图表组件 去除directory属性,改为自动获取echarts.min.js路径(升级不受影响)
|
||||
- 秋云图表组件 增加getImage()方法及@getImage事件,通过ref调用getImage()方法获,触发@getImage事件获取当前画布的base64图片文件流。
|
||||
- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。
|
||||
- 秋云图表组件 新增加【非uniCloud】版本组件,避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题,请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6),或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。
|
||||
- uCharts.js 新增dobuleZoom双指缩放功能
|
||||
- uCharts.js 新增山峰图type="mount",数据格式为饼图类格式,不需要传入categories,具体详见新版官网在线演示
|
||||
- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug
|
||||
- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug
|
||||
- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts),方便格式化时有更多参数可用
|
||||
- uCharts.js 标记线功能增加labelText自定义显示文字,增加labelAlign标签显示位置(左侧或右侧),增加标签显示位置微调labelOffsetX、labelOffsetY
|
||||
- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug
|
||||
- uCharts.js 修复X轴开启disabled后,X轴仍占用空间的bug
|
||||
- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后,X轴文字与滚动条重叠的bug
|
||||
- uCharts.js 增加X轴rotateAngle文字旋转自定义角度,取值范围(-90至90)
|
||||
- uCharts.js 修复地图文字标签层级显示不正确的bug
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug
|
||||
- uCharts.js 修复当opts.padding上边距为0时,Y轴顶部刻度标签位置不正确的bug
|
||||
|
||||
## 另外我们还开发了各大原生小程序组件,已发布至码云和npm
|
||||
[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts)
|
||||
[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun)
|
||||
|
||||
## 对于原生uCharts文档我们已上线新版官方网站,详情点击下面链接进入官网
|
||||
[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/)
|
||||
## 2.3.7-20220122(2022-01-22)
|
||||
## 重要!使用vue3编译,请使用cli模式并升级至最新依赖,HbuilderX编译需要使用3.3.8以上版本
|
||||
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
|
||||
## 2.3.7-20220118(2022-01-18)
|
||||
## 注意,使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder!
|
||||
## 2.3.67-20220118(2022-01-18)
|
||||
- 秋云图表组件 组件初步支持vue3,全端编译会有些问题,具体详见下面修改:
|
||||
1. 小程序端运行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts,将.uCharts去掉。
|
||||
2. 小程序端发行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts,将.uCharts去掉,变为 new e。
|
||||
3. 如果觉得上述步骤比较麻烦,如果您的项目只编译到小程序端,可以修改u-charts.js最后一行导出方式,将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后,H5和App端的renderjs会有问题,请开发者自行选择。(此问题非组件问题,请等待DC官方修复Vue3的小程序端)
|
||||
## 2.3.6-20220111(2022-01-11)
|
||||
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
|
||||
## 2.3.6-20211201(2021-12-01)
|
||||
- uCharts.js 修复bar条状图开启圆角模式时,值很小时圆角渲染错误的bug
|
||||
## 2.3.5-20211014(2021-10-15)
|
||||
- uCharts.js 增加vue3的编译支持(仅原生uCharts,qiun-data-charts组件后续会支持,请关注更新)
|
||||
## 2.3.4-20211012(2021-10-12)
|
||||
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug
|
||||
## 2.3.3-20210706(2021-07-06)
|
||||
- uCharts.js 增加雷达图开启数据点值(opts.dataLabel)的显示
|
||||
## 2.3.2-20210627(2021-06-27)
|
||||
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug
|
||||
## 2.3.1-20210616(2021-06-16)
|
||||
- uCharts.js 修复圆角柱状图使用4角圆角时,当数值过大时不正确的bug
|
||||
## 2.3.0-20210612(2021-06-12)
|
||||
- uCharts.js 【重要】uCharts增加nvue兼容,可在nvue项目中使用gcanvas组件渲染uCharts,[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)
|
||||
- 秋云图表组件 增加tapLegend属性,是否开启图例点击交互事件
|
||||
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数,以便在页面中调用参数
|
||||
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法,详见showOptsTooltip方法
|
||||
## 2.2.1-20210603(2021-06-03)
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图,当起始角度不为0时,tooltip位置不准确的bug
|
||||
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置
|
||||
## 2.2.0-20210529(2021-05-29)
|
||||
- uCharts.js 增加条状图type="bar"
|
||||
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo
|
||||
## 2.1.7-20210524(2021-05-24)
|
||||
- uCharts.js 修复大数据量模式下曲线图不平滑的bug
|
||||
## 2.1.6-20210523(2021-05-23)
|
||||
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug
|
||||
## 2.1.5-2021051702(2021-05-17)
|
||||
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug
|
||||
## 2.1.5-20210517(2021-05-17)
|
||||
- uCharts.js 修复Y轴自定义min和max时,未按指定的最大值最小值显示坐标轴刻度的bug
|
||||
## 2.1.4-20210516(2021-05-16)
|
||||
- 秋云图表组件 优化onWindowResize防抖方法
|
||||
- 秋云图表组件 修复APP端uCharts更新数据时,清空series显示loading图标后再显示图表,图表抖动的bug
|
||||
- uCharts.js 修复开启canvas2d后,x轴、y轴、series自定义字体大小未按比例缩放的bug
|
||||
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表
|
||||
## 2.1.3-20210513(2021-05-13)
|
||||
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法,支持带滚动条的数据动态打点
|
||||
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言,如尘般染指流年づ
|
||||
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时,原数据闪现的bug
|
||||
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法
|
||||
- uCharts.js 增加tooltip显示category(x轴对应点位)标题的功能,opts.extra.tooltip.showCategory,默认为false
|
||||
- uCharts.js 修复mix混合图只有柱状图时,tooltip的分割线显示位置不正确的bug
|
||||
- uCharts.js 修复开启滚动条,图表在拖动中动态打点,滚动条位置不正确的bug
|
||||
- uCharts.js 修复饼图类数据格式为echarts数据格式,series为空数组报错的bug
|
||||
- 示例项目 修改uCharts.js更新到v2.1.2版本后,@getIndex方法获取索引值变更为e.currentIndex.index
|
||||
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新(数据动态打点)的demo
|
||||
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo
|
||||
## 2.1.2-20210509(2021-05-09)
|
||||
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug
|
||||
## 2.1.1-20210509(2021-05-09)
|
||||
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行,支持在config-echarts.js配置文件内写function配置。
|
||||
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。
|
||||
- 秋云图表组件 修复APP端报错Error: Not Found:Page[6][-1,27] at view.umd.min.js:1的bug。
|
||||
## 2.1.0-20210507(2021-05-07)
|
||||
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug
|
||||
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug
|
||||
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug
|
||||
## 2.1.0-20210506(2021-05-06)
|
||||
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug
|
||||
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用,无法显示图表的bug
|
||||
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图(type="tline")、时间轴区域图(type="tarea")、散点图(type="scatter")、气泡图demo(type="bubble")、倒三角形漏斗图(opts.extra.funnel.type="triangle")、金字塔形漏斗图(opts.extra.funnel.type="pyramid")
|
||||
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例
|
||||
- uCharts.js 升级至v2.1.0版本
|
||||
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 玫瑰图点击图例,只剩一个类别显示空白的bug
|
||||
- uCharts.js 修复 饼图类图点击图例,其他图表tooltip位置某些情况下不准的bug
|
||||
- uCharts.js 修复 x轴为矢量轴(时间轴)情况下,点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug
|
||||
- uCharts.js 增加 直角坐标系图表X轴format格式化方法(原生uCharts.js用法请使用formatter)
|
||||
- uCharts.js 增加 漏斗图扩展配置,倒三角形(opts.extra.funnel.type="triangle"),金字塔形(opts.extra.funnel.type="pyramid")
|
||||
- uCharts.js 增加 散点图(opts.type="scatter")、气泡图(opts.type="bubble")
|
||||
- 后期计划 完善散点图、气泡图,增加markPoints标记点,增加横向条状图。
|
||||
## 2.0.0-20210502(2021-05-02)
|
||||
- uCharts.js 修复词云图获取点击索引不正确的bug
|
||||
## 2.0.0-20210501(2021-05-01)
|
||||
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下,v-for循环使用图表,显示不正确的bug
|
||||
## 2.0.0-20210426(2021-04-26)
|
||||
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug
|
||||
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug
|
||||
- uCharts.js 增加 extra.column.categoryGap 参数,柱状图类每个category点位(X轴点)柱子组之间的间距
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数,标题纵向偏移距离,负数为向上偏移,正数向下偏移
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数,标题横向偏移距离,负数为向左偏移,正数向右偏移
|
||||
- uCharts.js 增加 extra.gauge.labelOffset 参数,仪表盘标签文字径向便宜距离,默认13px
|
||||
## 2.0.0-20210422-2(2021-04-22)
|
||||
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug
|
||||
## 2.0.0-20210422(2021-04-22)
|
||||
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug
|
||||
## 2.0.0-20210421(2021-04-21)
|
||||
- uCharts.js 修复多行图例的情况下,图例在上方或者下方时,图例float为左侧或者右侧时,第二行及以后的图例对齐方式不正确的bug
|
||||
## 2.0.0-20210420(2021-04-20)
|
||||
- 秋云图表组件 修复微信小程序开启canvas2d模式后,windows版微信小程序不支持canvas2d模式的bug
|
||||
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件
|
||||
## 2.0.0-20210419(2021-04-19)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
|
||||
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
|
||||
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug
|
||||
- uCharts.js 修复多Y轴单独设置fontSize时,开启canvas2d后,未对应放大字体的bug
|
||||
## 2.0.0-20210418(2021-04-18)
|
||||
- 秋云图表组件 增加directory配置,修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug
|
||||
## 2.0.0-20210416(2021-04-16)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
|
||||
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
|
||||
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员
|
||||
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员
|
||||
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug
|
||||
## 2.0.0-20210415(2021-04-15)
|
||||
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug
|
||||
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug
|
||||
## 2.0.0-20210414(2021-04-14)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
|
||||
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
|
||||
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug
|
||||
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue)
|
||||
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor
|
||||
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug
|
||||
## 2.0.0-20210413(2021-04-13)
|
||||
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug
|
||||
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug
|
||||
- 秋云图表组件 修改ontouch时,@getTouchStart@getTouchMove@getTouchEnd的触发条件
|
||||
- uCharts.js 修复饼图类数据格式series属性不生效的bug
|
||||
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue
|
||||
## 2.0.0-20210412-2(2021-04-12)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX。如仍不好用,请重启电脑,此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug
|
||||
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图(条状图)的示例
|
||||
## 2.0.0-20210412(2021-04-12)
|
||||
- 秋云图表组件 修复created中判断echarts导致APP端无法识别,改回mounted中判断echarts初始化
|
||||
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug
|
||||
## 2.0.0-20210411(2021-04-11)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,并清空小程序开发者工具缓存。
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 折线图区域图增加connectNulls断点续连的功能,详见示例项目中ucharts.vue
|
||||
- 秋云图表组件 变更初始化方法为created,变更type2d默认值为true,优化2d模式下组件初始化后dom获取不到的bug
|
||||
- 秋云图表组件 修复左右布局时,右侧图表点击坐标错误的bug,修复tooltip柱状图自定义颜色显示object的bug
|
||||
## 2.0.0-20210410(2021-04-10)
|
||||
- 修复左右布局时,右侧图表点击坐标错误的bug,修复柱状图自定义颜色tooltip显示object的bug
|
||||
- 增加标记线及柱状图自定义颜色的demo
|
||||
## 2.0.0-20210409(2021-04-08)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug,修复2d模式下饼图类activeRadius为按比例放大的bug
|
||||
- 修复组件在支付宝小程序端点击位置不准确的bug
|
||||
## 2.0.0-20210408(2021-04-07)
|
||||
- 修复组件在支付宝小程序端不能显示的bug(目前支付宝小程不能点击交互,后续修复)
|
||||
- uCharts.js 修复高分屏下柱状图类,圆弧进度条 自定义宽度不能按比例放大的bug
|
||||
## 2.0.0-20210407(2021-04-06)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode`
|
||||
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
## 2.0.0-20210406(2021-04-05)
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页
|
||||
## 2.0.0(2021-04-05)
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<view class="container loading1">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading1',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.container.loading1 {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading1 .shape1 {
|
||||
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape2 {
|
||||
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape3 {
|
||||
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape4 {
|
||||
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<view class="container loading2">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading2',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading2 {
|
||||
-webkit-transform: rotate(10deg);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
.container.loading2 .shape {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.container.loading2{
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading2 .shape1 {
|
||||
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape2 {
|
||||
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape3 {
|
||||
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape4 {
|
||||
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<view class="container loading3">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading3',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading3 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading3 .shape1 {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape2 {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape3 {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape4 {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading3 .shape1 {
|
||||
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape2 {
|
||||
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape3 {
|
||||
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape4 {
|
||||
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<view class="container loading5">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading5',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading5 .shape {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading5 .shape1 {
|
||||
animation: animation5shape1 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
.loading5 .shape2 {
|
||||
animation: animation5shape2 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape3 {
|
||||
animation: animation5shape3 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape4 {
|
||||
animation: animation5shape4 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<view class="container loading6">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading6',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading6 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading6 .shape {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading6 .shape1 {
|
||||
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
|
||||
animation: animation6shape1 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
.loading6 .shape2 {
|
||||
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
|
||||
animation: animation6shape2 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape3 {
|
||||
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
|
||||
animation: animation6shape3 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape4 {
|
||||
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
|
||||
animation: animation6shape4 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<view>
|
||||
<Loading1 v-if="loadingType==1"/>
|
||||
<Loading2 v-if="loadingType==2"/>
|
||||
<Loading3 v-if="loadingType==3"/>
|
||||
<Loading4 v-if="loadingType==4"/>
|
||||
<Loading5 v-if="loadingType==5"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading1 from "./loading1.vue";
|
||||
import Loading2 from "./loading2.vue";
|
||||
import Loading3 from "./loading3.vue";
|
||||
import Loading4 from "./loading4.vue";
|
||||
import Loading5 from "./loading5.vue";
|
||||
export default {
|
||||
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
|
||||
name: 'qiun-loading',
|
||||
props: {
|
||||
loadingType: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释,感谢支持开源!
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址:
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 通用配置项
|
||||
|
||||
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
const cfe = {
|
||||
//demotype为自定义图表类型
|
||||
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
|
||||
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型例如最后的"demotype"
|
||||
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
|
||||
//instance为实例变量承载属性,option为eopts承载属性,不要删除
|
||||
"instance": {},
|
||||
"option": {},
|
||||
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"tooltipDemo1":function(res){
|
||||
let result = ''
|
||||
for (let i in res) {
|
||||
if (i == 0) {
|
||||
result += res[i].axisValueLabel + '年销售额'
|
||||
}
|
||||
let value = '--'
|
||||
if (res[i].data !== null) {
|
||||
value = res[i].data
|
||||
}
|
||||
// #ifdef H5
|
||||
result += '\n' + res[i].seriesName + ':' + value + ' 万元'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
result += '<br/>' + res[i].marker + res[i].seriesName + ':' + value + ' 万元'
|
||||
// #endif
|
||||
}
|
||||
return result;
|
||||
},
|
||||
legendFormat:function(name){
|
||||
return "自定义图例+"+name;
|
||||
},
|
||||
yAxisFormatDemo:function (value, index) {
|
||||
return value + '元';
|
||||
},
|
||||
seriesFormatDemo:function(res){
|
||||
return res.name + '年' + res.value + '元';
|
||||
}
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在eopts参数,会将demotype与eopts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
"color": color,
|
||||
//在这里填写echarts的option即可
|
||||
|
||||
},
|
||||
//下面是自定义配置,请添加项目所需的通用配置
|
||||
"column": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'bar',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"line": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"area": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"areaStyle": {},
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"pie": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": '50%',
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"ring": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": ['40%', '70%'],
|
||||
"avoidLabelOverlap": false,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
"labelLine": {
|
||||
"show": true
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": "55%",
|
||||
"center": ['50%', '50%'],
|
||||
"roseType": 'area',
|
||||
},
|
||||
},
|
||||
"funnel": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item',
|
||||
"formatter": "{b} : {c}%"
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'funnel',
|
||||
"left": '10%',
|
||||
"top": 60,
|
||||
"bottom": 60,
|
||||
"width": '80%',
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"minSize": '0%',
|
||||
"maxSize": '100%',
|
||||
"sort": 'descending',
|
||||
"gap": 2,
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": 'inside'
|
||||
},
|
||||
"labelLine": {
|
||||
"length": 10,
|
||||
"lineStyle": {
|
||||
"width": 1,
|
||||
"type": 'solid'
|
||||
}
|
||||
},
|
||||
"itemStyle": {
|
||||
"bordercolor": '#fff',
|
||||
"borderwidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"label": {
|
||||
"fontSize": 20
|
||||
}
|
||||
},
|
||||
"data": [],
|
||||
},
|
||||
},
|
||||
"gauge": {
|
||||
"color": color,
|
||||
"tooltip": {
|
||||
"formatter": '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '业务指标',
|
||||
"type": 'gauge',
|
||||
"detail": {"formatter": '{value}%'},
|
||||
"data": [{"value": 50, "name": '完成率'}]
|
||||
},
|
||||
},
|
||||
"candle": {
|
||||
"xAxis": {
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {},
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"dataZoom": [{
|
||||
"type": 'inside',
|
||||
"xAxisIndex": [0, 1],
|
||||
"start": 10,
|
||||
"end": 100
|
||||
},
|
||||
{
|
||||
"show": true,
|
||||
"xAxisIndex": [0, 1],
|
||||
"type": 'slider',
|
||||
"bottom": 10,
|
||||
"start": 10,
|
||||
"end": 100
|
||||
}
|
||||
],
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'k',
|
||||
"data": [],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default cfe;
|
||||
|
|
@ -0,0 +1,601 @@
|
|||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释,感谢支持开源!
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址:
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
//事件转换函数,主要用作格式化x轴为时间轴,根据需求自行修改
|
||||
const formatDateTime = (timeStamp, returnType)=>{
|
||||
var date = new Date();
|
||||
date.setTime(timeStamp * 1000);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? ('0' + m) : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? ('0' + d) : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? ('0' + h) : h;
|
||||
var minute = date.getMinutes();
|
||||
var second = date.getSeconds();
|
||||
minute = minute < 10 ? ('0' + minute) : minute;
|
||||
second = second < 10 ? ('0' + second) : second;
|
||||
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
|
||||
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
|
||||
if(returnType == 'h:m'){return h +':' + minute;}
|
||||
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
|
||||
return [y, m, d, h, minute, second];
|
||||
}
|
||||
|
||||
const cfu = {
|
||||
//demotype为自定义图表类型,一般不需要自定义图表类型,只需要改根节点上对应的类型即可
|
||||
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
|
||||
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
|
||||
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype"
|
||||
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories
|
||||
"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
|
||||
//instance为实例变量承载属性,不要删除
|
||||
"instance":{},
|
||||
//option为opts及eopts承载属性,不要删除
|
||||
"option":{},
|
||||
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"yAxisDemo1":function(val, index, opts){return val+'元'},
|
||||
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
|
||||
"xAxisDemo1":function(val, index, opts){return val+'年';},
|
||||
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
|
||||
"seriesDemo1":function(val, index, series, opts){return val+'元'},
|
||||
"tooltipDemo1":function(item, category, index, opts){
|
||||
if(index==0){
|
||||
return '随便用'+item.data+'年'
|
||||
}else{
|
||||
return '其他我没改'+item.data+'天'
|
||||
}
|
||||
},
|
||||
"pieDemo":function(val, index, series, opts){
|
||||
if(index !== undefined){
|
||||
return series[index].name+':'+series[index].data+'元'
|
||||
}
|
||||
},
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
//我这里把曲线图当做了自定义图表类型,您可以根据需要随意指定类型或配置
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2
|
||||
},
|
||||
}
|
||||
},
|
||||
//下面是自定义配置,请添加项目所需的通用配置
|
||||
"pie":{
|
||||
"type": "pie",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"extra": {
|
||||
"pie": {
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"ring":{
|
||||
"type": "ring",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"rotate": false,
|
||||
"dataLabel": true,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"title": {
|
||||
"name": "收益率",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "70%",
|
||||
"fontSize": 25,
|
||||
"color": "#7cb5ec"
|
||||
},
|
||||
"extra": {
|
||||
"ring": {
|
||||
"ringWidth":30,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose":{
|
||||
"type": "rose",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "left",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"rose": {
|
||||
"type": "area",
|
||||
"minRadius": 50,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": false,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"word":{
|
||||
"type": "word",
|
||||
"color": color,
|
||||
"extra": {
|
||||
"word": {
|
||||
"type": "normal",
|
||||
"autoColors": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel":{
|
||||
"type": "funnel",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"extra": {
|
||||
"funnel": {
|
||||
"activeOpacity": 0.3,
|
||||
"activeWidth": 10,
|
||||
"border": true,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF",
|
||||
"fillOpacity": 1,
|
||||
"labelAlign": "right"
|
||||
},
|
||||
}
|
||||
},
|
||||
"map":{
|
||||
"type": "map",
|
||||
"color": color,
|
||||
"padding": [0,0,0,0],
|
||||
"dataLabel": true,
|
||||
"extra": {
|
||||
"map": {
|
||||
"border": true,
|
||||
"borderWidth": 1,
|
||||
"borderColor": "#666666",
|
||||
"fillOpacity": 0.6,
|
||||
"activeBorderColor": "#F04864",
|
||||
"activeFillColor": "#FACC14",
|
||||
"activeFillOpacity": 1
|
||||
},
|
||||
}
|
||||
},
|
||||
"arcbar":{
|
||||
"type": "arcbar",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "百分比",
|
||||
"fontSize": 25,
|
||||
"color": "#00FF00"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "默认标题",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"extra": {
|
||||
"arcbar": {
|
||||
"type": "default",
|
||||
"width": 12,
|
||||
"backgroundColor": "#E9E9E9",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"gap": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"line":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "straight",
|
||||
"width": 2
|
||||
},
|
||||
}
|
||||
},
|
||||
"tline":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2
|
||||
},
|
||||
}
|
||||
},
|
||||
"tarea":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "curve",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": true
|
||||
},
|
||||
}
|
||||
},
|
||||
"column":{
|
||||
"type": "column",
|
||||
"color": color,
|
||||
"padding": [15,15,0,5],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"data":[{"min":0}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"column": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"mount":{
|
||||
"type": "mount",
|
||||
"color": color,
|
||||
"padding": [15,15,0,5],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"data":[{"min":0}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"mount": {
|
||||
"type": "mount",
|
||||
"widthRatio": 1.5,
|
||||
},
|
||||
}
|
||||
},
|
||||
"bar":{
|
||||
"type": "bar",
|
||||
"color": color,
|
||||
"padding": [15,30,0,5],
|
||||
"xAxis": {
|
||||
"boundaryGap":"justify",
|
||||
"disableGrid":false,
|
||||
"min":0,
|
||||
"axisLine":false
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bar": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"meterBorde": 1,
|
||||
"meterFillColor": "#FFFFFF",
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"area":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "straight",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": false
|
||||
},
|
||||
}
|
||||
},
|
||||
"radar":{
|
||||
"type": "radar",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"dataLabel": false,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"radar": {
|
||||
"gridType": "radar",
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridCount": 3,
|
||||
"opacity": 0.2,
|
||||
"max": 200
|
||||
},
|
||||
}
|
||||
},
|
||||
"gauge":{
|
||||
"type": "gauge",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "66Km/H",
|
||||
"fontSize": 25,
|
||||
"color": "#2fc25b",
|
||||
"offsetY": 50
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "实时速度",
|
||||
"fontSize": 15,
|
||||
"color": "#1890ff",
|
||||
"offsetY": -50
|
||||
},
|
||||
"extra": {
|
||||
"gauge": {
|
||||
"type": "default",
|
||||
"width": 30,
|
||||
"labelColor": "#666666",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"startNumber": 0,
|
||||
"endNumber": 100,
|
||||
"labelFormat": "",
|
||||
"splitLine": {
|
||||
"fixRadius": 0,
|
||||
"splitNumber": 10,
|
||||
"width": 30,
|
||||
"color": "#FFFFFF",
|
||||
"childNumber": 5,
|
||||
"childWidth": 12
|
||||
},
|
||||
"pointer": {
|
||||
"width": 24,
|
||||
"color": "auto"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"candle":{
|
||||
"type": "candle",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"enableScroll": true,
|
||||
"enableMarkLine": true,
|
||||
"dataLabel": false,
|
||||
"xAxis": {
|
||||
"labelCount": 4,
|
||||
"itemCount": 40,
|
||||
"disableGrid": true,
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"scrollShow": true,
|
||||
"scrollAlign": "left",
|
||||
"scrollColor": "#A6A6A6",
|
||||
"scrollBackgroundColor": "#EFEBEF"
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"candle": {
|
||||
"color": {
|
||||
"upLine": "#f04864",
|
||||
"upFill": "#f04864",
|
||||
"downLine": "#2fc25b",
|
||||
"downFill": "#2fc25b"
|
||||
},
|
||||
"average": {
|
||||
"show": true,
|
||||
"name": ["MA5","MA10","MA30"],
|
||||
"day": [5,10,20],
|
||||
"color": ["#1890ff","#2fc25b","#facc14"]
|
||||
}
|
||||
},
|
||||
"markLine": {
|
||||
"type": "dash",
|
||||
"dashLength": 5,
|
||||
"data": [
|
||||
{
|
||||
"value": 2150,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
},
|
||||
{
|
||||
"value": 2350,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"mix":{
|
||||
"type": "mix",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"disabled": false,
|
||||
"disableGrid": false,
|
||||
"splitNumber": 5,
|
||||
"gridType": "dash",
|
||||
"dashLength": 4,
|
||||
"gridColor": "#CCCCCC",
|
||||
"padding": 10,
|
||||
"showTitle": true,
|
||||
"data": []
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"mix": {
|
||||
"column": {
|
||||
"width": 20
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
"scatter":{
|
||||
"type": "scatter",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"dataLabel":false,
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"scatter": {
|
||||
},
|
||||
}
|
||||
},
|
||||
"bubble":{
|
||||
"type": "bubble",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0,
|
||||
"max":250
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"data":[{
|
||||
"min":0,
|
||||
"max":150
|
||||
}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bubble": {
|
||||
"border":2,
|
||||
"opacity": 0.5,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default cfu;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# uCharts JSSDK说明
|
||||
1、如不使用uCharts组件,可直接引用u-charts.js,打包编译后会`自动压缩`,压缩后体积约为`120kb`。
|
||||
2、如果120kb的体积仍需压缩,请手到uCharts官网通过在线定制选择您需要的图表。
|
||||
3、config-ucharts.js为uCharts组件的用户配置文件,升级前请`自行备份config-ucharts.js`文件,以免被强制覆盖。
|
||||
4、config-echarts.js为ECharts组件的用户配置文件,升级前请`自行备份config-echarts.js`文件,以免被强制覆盖。
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,201 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
{
|
||||
"id": "qiun-data-charts",
|
||||
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
|
||||
"version": "2.4.3-20220505",
|
||||
"description": "uCharts 新增双指缩放、新增山峰图!支持H5及APP用 ucharts echarts 渲染图表,uniapp可视化首选组件",
|
||||
"keywords": [
|
||||
"ucharts",
|
||||
"echarts",
|
||||
"f2",
|
||||
"图表",
|
||||
"可视化"
|
||||
],
|
||||
"repository": "https://gitee.com/uCharts/uCharts",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.3.8"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "474119"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/~qiun"
|
||||
},
|
||||
"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": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
|
||||
|
||||
## <font color='red'>写给uCharts使用者的一封信</font>
|
||||
<font color='red'>
|
||||
亲爱的用户:
|
||||
|
||||
- 由于最近上线的官网中实行了部分收费体验,收到了许多用户的使用反馈,大致反馈的问题都指向同一矛头:为何新官网的在线工具也要收费?对于这件事,我们深表歉意。由于新官网本身未提供技术文档,使得用户误以为我们对文档实行了收费。经我们连夜整改,新官网目前已经将技术文档开放出来供大家阅读使用,并免费对外开放了【演示】中的查看全端全平台的代码的功能,为此再次向所受影响的用户们致以诚恳的歉意。
|
||||
|
||||
- 其次,我们须澄清几点,如下:
|
||||
1. uCharts的插件本身遵循开源原则,并不收费,用户可自行到DCloud市场与Gitee码云上获取源码
|
||||
2. uCharts的技术文档永久对用户开放
|
||||
3. 收费内容仅针对原生工具、组件工具、定制功能以及模板市场的部分收费模板
|
||||
|
||||
- uCharts为什么实行收费原则?
|
||||
1. 服务器的费用支撑
|
||||
2. 团队的运营支出;正如你所见,我们的群里有大量的用户在请教图表配置与反馈问题,群里的每一位管理员都在花费不少精力在积极解决用户的问题,然而遇到巨大的咨询量时,我们无法及时、精准解答回复,因此,我们推出了会员优先服务
|
||||
3. 与其说模板市场是收费,倒不如说给野生用户提供了创造价值的机会,用户既可以在上面发布模板赚取费用,遇到心动的模板也能免费/付费使用
|
||||
|
||||
- 收费不是目的,正如你们所见,用户可以申请成为[【开发者】](https://www.ucharts.cn/v2/#/agreement/developer),开发者不限制任何官网功能,并享有官方指导、开发、改造uCharts的权力,并且活动期间【返还超级会员费用】!我们想说的是,我们新版官网上线旨在希望更多的用户加入到开发者的队伍,我们共同去维护uCharts!
|
||||
|
||||
我们相信:星星之火可以燎原!
|
||||
|
||||
uCharts技术团队
|
||||
|
||||
2022.4.23
|
||||
|
||||
</font>
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
[](https://gitee.com/uCharts/uCharts/stargazers)
|
||||
[](https://gitee.com/uCharts/uCharts/members)
|
||||
[](https://www.apache.org/licenses/LICENSE-2.0.html)
|
||||
[](https://www.npmjs.com/~qiun)
|
||||
|
||||
|
||||
## uCharts简介
|
||||
|
||||
`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web、iOS、Android(基于 uni-app / taro )、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等更多支持 canvas API 的平台。
|
||||
|
||||
## 官方网站
|
||||
|
||||
## [https://www.ucharts.cn](https://www.ucharts.cn)
|
||||
|
||||
## 快速体验
|
||||
|
||||
一套代码编到多个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!其他平台请自行编译。
|
||||
|
||||

|
||||
|
||||
## 致开发者
|
||||
|
||||
感谢各位开发者`四年`来对秋云及uCharts的支持,uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具,我们推出了新版官网,增加了在线定制、问答社区、在线配置等一些增值服务,为确保您能更好的应用图表组件,建议您先`仔细阅读本页指南`以及`常见问题`,而不是下载下来`直接使用`。如仍然不能解决,请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。
|
||||
|
||||
## 社群支持
|
||||
|
||||
uCharts官方拥有4个2000人的QQ群及专属VIP会员群支持,庞大的用户量证明我们一直在努力,请各位放心使用!uCharts的开源图表组件的开发,团队付出了大量的时间与精力,经过四来的考验,不会有比较明显的bug,请各位放心使用。如果您有更好的想法,可以在`码云提交Pull Requests`以帮助更多开发者完成需求,再次感谢各位对uCharts的鼓励与支持!
|
||||
|
||||
#### 官方交流群
|
||||
- 交流群1:371774600(已满)
|
||||
- 交流群2:619841586(已满)
|
||||
- 交流群3:955340127(已满)
|
||||
- 交流群4:641669795
|
||||
- 口令`uniapp`
|
||||
|
||||
#### 专属VIP会员群
|
||||
- 开通会员后详见【账号详情】页面中顶部的滚动通知
|
||||
- 口令`您的用户ID`
|
||||
|
||||
## 版权信息
|
||||
|
||||
uCharts始终坚持开源,遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议,意味着您无需支付任何费用,即可将uCharts应用到您的产品中。
|
||||
|
||||
注意:这并不意味着您可以将uCharts应用到非法的领域,比如涉及赌博,暴力等方面。如因此产生纠纷或法律问题,uCharts相关方及秋云科技不承担任何责任。
|
||||
|
||||
## 合作伙伴
|
||||
|
||||
[](https://www.diygw.com/)
|
||||
[](https://gitee.com/howcode/has-chat)
|
||||
[](https://www.uviewui.com/)
|
||||
[](https://ext.dcloud.net.cn/plugin?id=7088)
|
||||
[](https://ext.dcloud.net.cn/publisher?id=202)
|
||||
[](https://www.firstui.cn/)
|
||||
[](https://ext.dcloud.net.cn/plugin?id=5169)
|
||||
[](https://www.graceui.com/)
|
||||
|
||||
|
||||
## 更新记录
|
||||
|
||||
详见官网指南中说明,[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100)
|
||||
|
||||
|
||||
## 相关链接
|
||||
- [uCharts官网](https://www.ucharts.cn)
|
||||
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
|
||||
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [](https://gitee.com/uCharts/uCharts/stargazers)
|
||||
- [uCharts npm开源地址](https://www.ucharts.cn)
|
||||
- [ECharts官网](https://echarts.apache.org/zh/index.html)
|
||||
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
|
||||
- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1)
|
||||
File diff suppressed because one or more lines are too long
23
uni_modules/mrsong-charts/components/mrsong-charts/qiun-data-charts/static/h5/echarts.min.js
vendored
Normal file
23
uni_modules/mrsong-charts/components/mrsong-charts/qiun-data-charts/static/h5/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,539 @@
|
|||
export function initColumnData(options) {
|
||||
return {
|
||||
"type": "column",
|
||||
"canvasId": "",
|
||||
"canvas2d": false,
|
||||
"background": "none",
|
||||
"animation": true,
|
||||
"timing": "easeOut",
|
||||
"duration": 1000,
|
||||
"color": [
|
||||
"#008749",
|
||||
"#91CB74",
|
||||
"#FAC858",
|
||||
"#EE6666",
|
||||
"#73C0DE",
|
||||
"#3CA272",
|
||||
"#FC8452",
|
||||
"#9A60B4",
|
||||
"#ea7ccc"
|
||||
],
|
||||
"padding": [
|
||||
15,
|
||||
10,
|
||||
0,
|
||||
15
|
||||
],
|
||||
"rotate": false,
|
||||
"rotateLock": false,
|
||||
"fontSize": 13,
|
||||
"fontColor": "#666666",
|
||||
"enableScroll": true,
|
||||
"touchMoveLimit": 60,
|
||||
"enableMarkLine": false,
|
||||
"dataLabel": true,
|
||||
"dataPointShape": true,
|
||||
"dataPointShapeType": "solid",
|
||||
"xAxis": {
|
||||
"disabled": false,
|
||||
"axisLine": true,
|
||||
"axisLineColor": "#CCCCCC",
|
||||
"calibration": false,
|
||||
"fontColor": "#666666",
|
||||
"fontSize": 11,
|
||||
"rotateLabel": true,
|
||||
"itemCount": 4,
|
||||
"padding": 10,
|
||||
"margin": 10,
|
||||
"boundaryGap": "center",
|
||||
"disableGrid": true,
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"gridEval": 1,
|
||||
"type": 'grid',
|
||||
"gridType": 'dash',
|
||||
"itemCount": 5, //x轴单屏显示数据的数量,默认为5个
|
||||
"scrollShow": false, //新增是否显示滚动条,默认false
|
||||
"scrollAlign": 'left', //滚动条初始位置
|
||||
},
|
||||
"yAxis": {
|
||||
"disabled": false,
|
||||
"disableGrid": false,
|
||||
"splitNumber": 4,
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"gridColor": "#CCCCCC",
|
||||
"padding": 10,
|
||||
"showTitle": false,
|
||||
"data": [{
|
||||
"type": "value",
|
||||
"position": "left",
|
||||
"disabled": false,
|
||||
"axisLine": true,
|
||||
"axisLineColor": "#CCCCCC",
|
||||
"calibration": false,
|
||||
"fontColor": "#666666",
|
||||
"fontSize": 13,
|
||||
"textAlign": "right",
|
||||
"title": "",
|
||||
"titleFontSize": 13,
|
||||
"titleOffsetY": 0,
|
||||
"titleOffsetX": 0,
|
||||
"titleFontColor": "#666666",
|
||||
"min": 0,
|
||||
"tofix": null,
|
||||
"unit": "",
|
||||
"format": "format1"
|
||||
}]
|
||||
},
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "bottom",
|
||||
"float": "center",
|
||||
"padding": 5,
|
||||
"margin": 10,
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"borderColor": "rgba(0,0,0,0)",
|
||||
"borderWidth": 0,
|
||||
"fontSize": 13,
|
||||
"fontColor": "#666666",
|
||||
"lineHeight": 11,
|
||||
"hiddenColor": "#CECECE",
|
||||
"itemGap": 10
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "straight",
|
||||
"width": 2
|
||||
},
|
||||
"tooltip": {
|
||||
"showBox": true,
|
||||
"showArrow": true,
|
||||
"borderWidth": 0,
|
||||
"borderRadius": 0,
|
||||
"borderColor": "#000000",
|
||||
"borderOpacity": 0.7,
|
||||
"bgColor": "#000000",
|
||||
"bgOpacity": 0.7,
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"gridColor": "#CCCCCC",
|
||||
"fontColor": "#FFFFFF",
|
||||
"splitLine": true,
|
||||
"horizentalLine": false,
|
||||
"xAxisLabel": false,
|
||||
"yAxisLabel": false,
|
||||
"labelBgColor": "#FFFFFF",
|
||||
"labelBgOpacity": 0.7,
|
||||
"labelFontColor": "#666666"
|
||||
},
|
||||
"markLine": {
|
||||
"type": "solid",
|
||||
"dashLength": 4,
|
||||
"data": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export function initLineData() {
|
||||
return {
|
||||
"type": "line",
|
||||
"canvasId": "",
|
||||
"canvas2d": false,
|
||||
"background": "none",
|
||||
"animation": true,
|
||||
"timing": "easeOut",
|
||||
"duration": 1000,
|
||||
"color": [
|
||||
"#008749",
|
||||
"#91CB74",
|
||||
"#FAC858",
|
||||
"#EE6666",
|
||||
"#73C0DE",
|
||||
"#3CA272",
|
||||
"#FC8452",
|
||||
"#9A60B4",
|
||||
"#ea7ccc"
|
||||
],
|
||||
"padding": [
|
||||
15,
|
||||
10,
|
||||
0,
|
||||
15
|
||||
],
|
||||
"rotate": false,
|
||||
"rotateLock": false,
|
||||
"fontSize": 13,
|
||||
"fontColor": "#666666",
|
||||
"enableScroll": false,
|
||||
"touchMoveLimit": 60,
|
||||
"enableMarkLine": false,
|
||||
"dataLabel": true,
|
||||
"dataPointShape": true,
|
||||
"dataPointShapeType": "solid",
|
||||
"xAxis": {
|
||||
"disabled": false,
|
||||
"axisLine": true,
|
||||
"axisLineColor": "#CCCCCC",
|
||||
"calibration": false,
|
||||
"fontColor": "#666666",
|
||||
"fontSize": 10,
|
||||
"rotateLabel": true,
|
||||
"boundaryGap": "center",
|
||||
"disableGrid": true,
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"gridEval": 1,
|
||||
"type": 'grid',
|
||||
"gridType": 'dash',
|
||||
"itemCount": 30, //x轴单屏显示数据的数量,默认为5个
|
||||
"scrollShow": true, //新增是否显示滚动条,默认false
|
||||
"scrollAlign": 'left', //滚动条初始位置
|
||||
},
|
||||
"yAxis": {
|
||||
"disabled": false,
|
||||
"disableGrid": false,
|
||||
"splitNumber": 5,
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"gridColor": "#CCCCCC",
|
||||
"padding": 10,
|
||||
"showTitle": false,
|
||||
"data": []
|
||||
},
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "bottom",
|
||||
"float": "center",
|
||||
"padding": 5,
|
||||
"margin": 5,
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"borderColor": "rgba(0,0,0,0)",
|
||||
"borderWidth": 0,
|
||||
"fontSize": 13,
|
||||
"fontColor": "#666666",
|
||||
"lineHeight": 20,
|
||||
"hiddenColor": "#CECECE",
|
||||
"itemGap": 10
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "straight",
|
||||
"width": 2
|
||||
},
|
||||
"tooltip": {
|
||||
"showBox": true,
|
||||
"showArrow": true,
|
||||
"borderWidth": 0,
|
||||
"borderRadius": 0,
|
||||
"borderColor": "#000000",
|
||||
"borderOpacity": 0.7,
|
||||
"bgColor": "#000000",
|
||||
"bgOpacity": 0.7,
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"gridColor": "#CCCCCC",
|
||||
"fontColor": "#FFFFFF",
|
||||
"splitLine": true,
|
||||
"horizentalLine": false,
|
||||
"xAxisLabel": false,
|
||||
"yAxisLabel": false,
|
||||
"labelBgColor": "#FFFFFF",
|
||||
"labelBgOpacity": 0.7,
|
||||
"labelFontColor": "#666666"
|
||||
},
|
||||
"markLine": {
|
||||
"type": "solid",
|
||||
"dashLength": 4,
|
||||
"data": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export function initFunnelData() {
|
||||
return {
|
||||
"type": "funnel",
|
||||
"canvasId": "",
|
||||
"canvas2d": false,
|
||||
"background": "none",
|
||||
"animation": true,
|
||||
"timing": "easeOut",
|
||||
"duration": 1000,
|
||||
"color": [
|
||||
"#008749",
|
||||
"#91CB74",
|
||||
"#FAC858",
|
||||
"#EE6666",
|
||||
"#73C0DE",
|
||||
"#3CA272",
|
||||
"#FC8452",
|
||||
"#9A60B4",
|
||||
"#ea7ccc"
|
||||
],
|
||||
"padding": [
|
||||
15,
|
||||
15,
|
||||
0,
|
||||
15
|
||||
],
|
||||
"rotate": false,
|
||||
"rotateLock": false,
|
||||
"fontSize": 13,
|
||||
"fontColor": "#666666",
|
||||
"enableScroll": false,
|
||||
"touchMoveLimit": 60,
|
||||
"enableMarkLine": false,
|
||||
"dataLabel": true,
|
||||
"dataPointShape": true,
|
||||
"dataPointShapeType": "solid",
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "bottom",
|
||||
"float": "center",
|
||||
"padding": 5,
|
||||
"margin": 0,
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"borderColor": "rgba(0,0,0,0)",
|
||||
"borderWidth": 0,
|
||||
"fontSize": 13,
|
||||
"fontColor": "#666666",
|
||||
"lineHeight": 20,
|
||||
"hiddenColor": "#CECECE",
|
||||
"itemGap": 10
|
||||
},
|
||||
"extra": {
|
||||
"funnel": {
|
||||
"activeOpacity": 0.3,
|
||||
"activeWidth": 10,
|
||||
"border": true,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF",
|
||||
"fillOpacity": 1,
|
||||
"labelAlign": "right",
|
||||
"linearType": "custom"
|
||||
},
|
||||
"tooltip": {
|
||||
"showBox": true,
|
||||
"showArrow": true,
|
||||
"borderWidth": 0,
|
||||
"borderRadius": 0,
|
||||
"borderColor": "#000000",
|
||||
"borderOpacity": 0.7,
|
||||
"bgColor": "#000000",
|
||||
"bgOpacity": 0.7,
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"gridColor": "#CCCCCC",
|
||||
"fontColor": "#FFFFFF",
|
||||
"splitLine": true,
|
||||
"horizentalLine": false,
|
||||
"xAxisLabel": false,
|
||||
"yAxisLabel": false,
|
||||
"labelBgColor": "#FFFFFF",
|
||||
"labelBgOpacity": 0.7,
|
||||
"labelFontColor": "#666666"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export function initRingData() {
|
||||
return {
|
||||
"type": "ring",
|
||||
"canvasId": "",
|
||||
"canvas2d": false,
|
||||
"background": "none",
|
||||
"animation": true,
|
||||
"timing": "easeOut",
|
||||
"duration": 1000,
|
||||
"color": [
|
||||
"#008749",
|
||||
"#91CB74",
|
||||
"#FAC858",
|
||||
"#EE6666",
|
||||
"#73C0DE",
|
||||
"#3CA272",
|
||||
"#FC8452",
|
||||
"#9A60B4",
|
||||
"#ea7ccc"
|
||||
],
|
||||
"padding": [
|
||||
5,
|
||||
5,
|
||||
5,
|
||||
5
|
||||
],
|
||||
"rotate": false,
|
||||
"errorReload": true,
|
||||
"fontSize": 13,
|
||||
"fontColor": "#666666",
|
||||
"enableScroll": false,
|
||||
"touchMoveLimit": 60,
|
||||
"enableMarkLine": false,
|
||||
"dataLabel": true,
|
||||
"dataPointShape": true,
|
||||
"dataPointShapeType": "solid",
|
||||
"tapLegend": true,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "bottom",
|
||||
"float": "center",
|
||||
"padding": 5,
|
||||
"margin": 5,
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"borderColor": "rgba(0,0,0,0)",
|
||||
"borderWidth": 0,
|
||||
"fontSize": 12,
|
||||
"fontColor": "#666666",
|
||||
"lineHeight": 25,
|
||||
"hiddenColor": "#CECECE",
|
||||
"itemGap": 10,
|
||||
"format": function(res) {
|
||||
console.log(res)
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"name": "",
|
||||
"fontSize": 15,
|
||||
"color": "#666666",
|
||||
"offsetX": 0,
|
||||
"offsetY": 0
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "",
|
||||
"fontSize": 25,
|
||||
"color": "#7cb5ec",
|
||||
"offsetX": 0,
|
||||
"offsetY": 0
|
||||
},
|
||||
"extra": {
|
||||
"ring": {
|
||||
"ringWidth": 30,
|
||||
"centerColor": "#FFFFFF",
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"customRadius": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF",
|
||||
"linearType": "custom"
|
||||
},
|
||||
"tooltip": {
|
||||
"showBox": true,
|
||||
"showArrow": true,
|
||||
"showCategory": false,
|
||||
"borderWidth": 0,
|
||||
"borderRadius": 0,
|
||||
"borderColor": "#000000",
|
||||
"borderOpacity": 0.7,
|
||||
"bgColor": "#000000",
|
||||
"bgOpacity": 0.7,
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"gridColor": "#CCCCCC",
|
||||
"fontColor": "#FFFFFF",
|
||||
"splitLine": true,
|
||||
"horizentalLine": false,
|
||||
"xAxisLabel": false,
|
||||
"yAxisLabel": false,
|
||||
"labelBgColor": "#FFFFFF",
|
||||
"labelBgOpacity": 0.7,
|
||||
"labelFontColor": "#666666"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export function initMountData() {
|
||||
return {
|
||||
"type": "mount",
|
||||
"canvasId": "",
|
||||
"canvas2d": false,
|
||||
"background": "none",
|
||||
"animation": true,
|
||||
"timing": "easeOut",
|
||||
"duration": 1000,
|
||||
"color": ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||||
"padding": [15, 15, 0, 5],
|
||||
"legend": {},
|
||||
"xAxis": {
|
||||
"disableGrid": true
|
||||
},
|
||||
"yAxis": {
|
||||
"data": [{
|
||||
"min": 0
|
||||
}]
|
||||
},
|
||||
"extra": {
|
||||
"mount": {
|
||||
"type": "mount",
|
||||
"widthRatio": 1.5,
|
||||
"borderWidth": 0,
|
||||
"linearType": "custom"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export function initBarData() {
|
||||
return {
|
||||
"type": "bar",
|
||||
"canvasId": "",
|
||||
"canvas2d": false,
|
||||
"background": "none",
|
||||
"animation": true,
|
||||
"timing": "easeOut",
|
||||
"duration": 1000,
|
||||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||||
padding: [15, 30, 0, 5],
|
||||
legend: {},
|
||||
xAxis: {
|
||||
boundaryGap: "justify",
|
||||
disableGrid: false,
|
||||
min: 0,
|
||||
axisLine: false,
|
||||
max: 40
|
||||
},
|
||||
yAxis: {},
|
||||
extra: {
|
||||
bar: {
|
||||
type: "group",
|
||||
width: 30,
|
||||
meterBorde: 1,
|
||||
meterFillColor: "#FFFFFF",
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08,
|
||||
linearType: "custom",
|
||||
barBorderCircle: true,
|
||||
seriesGap: 2,
|
||||
categoryGap: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export function initPieData() {
|
||||
return {
|
||||
"type": "pie",
|
||||
"canvasId": "",
|
||||
"canvas2d": false,
|
||||
"background": "none",
|
||||
"animation": true,
|
||||
"timing": "easeOut",
|
||||
"duration": 1000,
|
||||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||||
padding: [5, 5, 5, 5],
|
||||
extra: {
|
||||
pie: {
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: true,
|
||||
borderWidth: 3,
|
||||
borderColor: "#FFFFFF",
|
||||
linearType: "custom"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,16 @@
|
|||
{
|
||||
"id": "wei-dropdown-menu",
|
||||
"displayName": "wei-dropdown-menu",
|
||||
"version": "1.0.3",
|
||||
"description": "支持二级分类的下拉菜单列表,兼容小程序、h5、app-nvue",
|
||||
"id": "mrsong-charts",
|
||||
"displayName": "mrsong-charts",
|
||||
"version": "1.0.8",
|
||||
"description": "基于ucharts的二次封装,柱状图,折线图,环形图,山峰图,漏斗图",
|
||||
"keywords": [
|
||||
"下拉菜单列表",
|
||||
"向下弹出菜单列表",
|
||||
"二级分类搜索",
|
||||
"头部搜索"
|
||||
"柱状图,折线图,环形图,山峰图,漏斗图"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.8.7"
|
||||
"HBuilderX": "^3.5.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
|
|
@ -31,7 +27,8 @@
|
|||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
"npmurl": "",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
|
|
@ -43,12 +40,12 @@
|
|||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "n",
|
||||
"vue3": "y"
|
||||
"vue2": "y",
|
||||
"vue3": "n"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
|
|
@ -58,7 +55,7 @@
|
|||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "n",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
|
|
@ -67,16 +64,16 @@
|
|||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
# mrsong-charts
|
||||
|
||||
## 使用方法
|
||||
```js
|
||||
import mrsongCharts from '@/uni_modules/mrsong-charts/components/mrsong-charts/mrsong-charts.vue';
|
||||
```
|
||||
|
||||
## 参数
|
||||
```json
|
||||
{
|
||||
"type":"line",//类型(必选)
|
||||
"title":"标题",//标题(非必选)
|
||||
"align":"left",//标题位置,left,center,right;(非必选)
|
||||
"options":{},//图表配置,与ucharts配置一样,自带默认配置(非必选)
|
||||
"config":{},//组件props,个人配置
|
||||
"unit":'人',//图表新增unit单位展示
|
||||
"chartsData":{
|
||||
"series": [{
|
||||
"data": [{
|
||||
"name": "一班",
|
||||
"value": 82
|
||||
}, {
|
||||
"name": "二班",
|
||||
"value": 63
|
||||
}, {
|
||||
"name": "三班",
|
||||
"value": 50
|
||||
}, {
|
||||
"name": "四班",
|
||||
"value": 40
|
||||
}, {
|
||||
"name": "五班",
|
||||
"value": 30
|
||||
}]
|
||||
}]
|
||||
},//图表数据,与ucharts配置一样(必选)
|
||||
// 注意:图表数据,与ucharts数据格式一样,不同图表,数据结构有差异
|
||||
}
|
||||
```
|
||||
## 新增个人配置
|
||||
```json
|
||||
// config:组件props,个人配置
|
||||
{
|
||||
"itemCount": 3, //x轴单屏显示数据的数量,默认为5个
|
||||
"scrollShow": false, //新增是否显示滚动条,默认false
|
||||
"scrollAlign": 'left', //滚动条初始位置
|
||||
"rotateLabel": true, //X轴label旋转
|
||||
"min": 0, //Y轴最小值
|
||||
"max": 150, //Y轴大值
|
||||
"unit": "", //Y轴单位
|
||||
"enableScroll": false, //开启滚动模式
|
||||
"color": [//颜色设置
|
||||
"#9A60B4",
|
||||
"#ea7ccc"
|
||||
],
|
||||
}
|
||||
```
|
||||
## 柱状图
|
||||
```vue
|
||||
<mrsongCharts type='column' title="柱状图" align='left' />
|
||||
```
|
||||
|
||||
## 折线图
|
||||
```vue
|
||||
<mrsongCharts type='line' title="折线图" align='left' />
|
||||
```
|
||||
|
||||
## 山峰图无边渐变色
|
||||
```vue
|
||||
<mrsongCharts type='mount' title="山峰图无边渐变色" align='left' />
|
||||
```
|
||||
|
||||
## 圆角条状图+渐变色
|
||||
```vue
|
||||
<mrsongCharts type='pie' title="圆角条状图+渐变色" align='left' />
|
||||
```
|
||||
|
||||
## 带分割线+渐变色
|
||||
```vue
|
||||
<mrsongCharts type='bar' title="带分割线+渐变色" align='left' />
|
||||
```
|
||||
|
||||
## 环形图
|
||||
```vue
|
||||
<mrsongCharts type='ring' title="环形图" align='left' />
|
||||
```
|
||||
|
||||
## 标准漏斗图
|
||||
```vue
|
||||
<mrsongCharts type='funnel' title="标准漏斗图" align='left' />
|
||||
```
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<view id="title-bar" class="title-bar" v-show="title">
|
||||
<view class="title" :style="{fontWeight:fontweight}">{{title}}</view>
|
||||
<view class="close-wrap" @click.stop="onClose">
|
||||
<text>完成</text>
|
||||
<text>{{closeText}}</text>
|
||||
<!-- <image class="close-icon" :src="closeIcon" mode="widthFix"></image>-->
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -74,6 +74,10 @@
|
|||
color:{
|
||||
type:String,
|
||||
default:'#000000'
|
||||
},
|
||||
closeText:{
|
||||
type:String,
|
||||
default:'完成'
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -301,7 +305,7 @@
|
|||
|
||||
.popup_content {
|
||||
width: 100%;
|
||||
padding: 30rpx;
|
||||
padding: 30rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
<template>
|
||||
<view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
|
||||
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
|
||||
<!-- <view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
|
||||
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
|
||||
:style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
|
||||
class="uni-grid-item__box" @click="_onClick">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</view>-->
|
||||
<view v-if="width" :style="'width:'+width+''" class="uni-grid-item">
|
||||
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
|
||||
:style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
|
||||
class="uni-grid-item__box" @click="_onClick">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<!-- #ifndef APP-NVUE -->
|
||||
<view v-else-if="!webviewHide && status === 'loading' && showIcon"
|
||||
:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
|
||||
<image :src="imgBase64" mode="widthFix"></image>
|
||||
<image class="image" :src="imgBase64" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<text v-if="showText" class="uni-load-more__text"
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
animation: loading-ios-H5 1s 0s step-end infinite;
|
||||
}
|
||||
|
||||
.uni-load-more__img--ios-H5 image {
|
||||
.uni-load-more__img--ios-H5 .image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
:duration="duration" :show="showTrans" @click="onTap" />
|
||||
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
|
||||
:show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
|
||||
<view class="uni-popup__wrapper radius15" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<view class="uni-searchbar">
|
||||
<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box"
|
||||
<view :style="{borderRadius:radius+'rpx',backgroundColor: bgColor}" class="uni-searchbar__box"
|
||||
@click="searchClick">
|
||||
<view class="uni-searchbar__box-icon-search">
|
||||
<slot name="searchIcon">
|
||||
<uni-icons color="#c0c4cc" size="18" type="search" />
|
||||
<uni-icons color="#c0c4cc" size="40rpx" type="search" />
|
||||
</slot>
|
||||
</view>
|
||||
<input v-if="show || searchVal" :focus="showSync" :disabled="readonly" :placeholder="placeholderText" :maxlength="maxlength"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='') &&!readonly"
|
||||
class="uni-searchbar__box-icon-clear" @click="clear">
|
||||
<slot name="clearIcon">
|
||||
<uni-icons color="#c0c4cc" size="20" type="clear" />
|
||||
<uni-icons color="#c0c4cc" size="40rpx" type="clear" />
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-searchbar-height: 36px;
|
||||
$uni-searchbar-height: 72rpx;
|
||||
|
||||
.uni-searchbar {
|
||||
/* #ifndef APP-NVUE */
|
||||
|
|
@ -234,7 +234,7 @@
|
|||
/* #endif */
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding: 10rpx;
|
||||
// background-color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: $uni-searchbar-height;
|
||||
padding: 5px 8px 5px 0px;
|
||||
padding: 5rpx 8rpx 5rpx 0rpx;
|
||||
}
|
||||
|
||||
.uni-searchbar__box-icon-search {
|
||||
|
|
@ -259,7 +259,7 @@
|
|||
/* #endif */
|
||||
flex-direction: row;
|
||||
// width: 32px;
|
||||
padding: 0 8px;
|
||||
padding: 0 8rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #B3B3B3;
|
||||
|
|
@ -267,29 +267,32 @@
|
|||
|
||||
.uni-searchbar__box-search-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
height: 60rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-searchbar__box-icon-clear {
|
||||
align-items: center;
|
||||
line-height: 24px;
|
||||
padding-left: 8px;
|
||||
line-height: 24rpx;
|
||||
padding-left: 8rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-searchbar__text-placeholder {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #B3B3B3;
|
||||
margin-left: 5px;
|
||||
margin-left: 5rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.uni-searchbar__cancel {
|
||||
padding-left: 10px;
|
||||
padding-left: 10rpx;
|
||||
line-height: $uni-searchbar-height;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="uni-section">
|
||||
<view class="uni-section-header" @click="onClick">
|
||||
<view class="uni-section-header" @click="onClick" :style="{'background':background}">
|
||||
<view class="uni-section-header__decoration" v-if="type" :class="type" />
|
||||
<slot v-else name="decoration"></slot>
|
||||
|
||||
|
|
@ -74,7 +74,11 @@
|
|||
padding: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
background:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
_padding(){
|
||||
|
|
@ -101,7 +105,7 @@
|
|||
</script>
|
||||
<style lang="scss" >
|
||||
$uni-primary: #2979ff !default;
|
||||
|
||||
$uni-orange: #F96543 !default;
|
||||
.uni-section {
|
||||
background-color: #fff;
|
||||
.uni-section-header {
|
||||
|
|
@ -116,7 +120,7 @@
|
|||
|
||||
&__decoration{
|
||||
margin-right: 6px;
|
||||
background-color: $uni-primary;
|
||||
background-color: $uni-orange;
|
||||
&.line {
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
## 1.0.7(2023-11-20)
|
||||
修复issues问题:https://gitee.com/climblee/uv-ui/issues/I8HDLO
|
||||
## 1.0.6(2023-10-13)
|
||||
1. 优化vue,内容有背景色,设置圆角被遮挡的情况
|
||||
## 1.0.5(2023-09-10)
|
||||
1. 修复H5默认层级过高的问题
|
||||
2. 修复全局设置prop无效的问题
|
||||
## 1.0.4(2023-08-08)
|
||||
1. 修复修改zIndex不生效的BUG
|
||||
## 1.0.3(2023-07-02)
|
||||
uv-popup 弹出层,代码重构优化,性能翻倍,小程序体验性能更加,避免卡顿。打开和关闭方法更改,详情参考文档:https://www.uvui.cn/components/popup.html
|
||||
## 1.0.2(2023-06-11)
|
||||
1. 修复zIndex层级问题
|
||||
## 1.0.1(2023-05-16)
|
||||
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0(2023-05-10)
|
||||
1. 新增uv-popup组件
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,539 @@
|
|||
<template>
|
||||
<view
|
||||
v-if="showPopup"
|
||||
class="uv-popup"
|
||||
:class="[popupClass, isDesktop ? 'fixforpc-z-index' : '']"
|
||||
:style="[{zIndex: zIndex}]"
|
||||
>
|
||||
<view @touchstart="touchstart">
|
||||
<!-- 遮罩层 -->
|
||||
<uv-overlay
|
||||
key="1"
|
||||
v-if="maskShow && overlay"
|
||||
:show="showTrans"
|
||||
:duration="duration"
|
||||
:custom-style="overlayStyle"
|
||||
:opacity="overlayOpacity"
|
||||
:zIndex="zIndex"
|
||||
@click="onTap"
|
||||
></uv-overlay>
|
||||
<uv-transition
|
||||
key="2"
|
||||
:mode="ani"
|
||||
name="content"
|
||||
:custom-style="transitionStyle"
|
||||
:duration="duration"
|
||||
:show="showTrans"
|
||||
@click="onTap"
|
||||
>
|
||||
<view
|
||||
class="uv-popup__content"
|
||||
:style="[contentStyle]"
|
||||
:class="[popupClass]"
|
||||
@click="clear"
|
||||
>
|
||||
<uv-status-bar v-if="safeAreaInsetTop"></uv-status-bar>
|
||||
<slot />
|
||||
<uv-safe-bottom v-if="safeAreaInsetBottom"></uv-safe-bottom>
|
||||
<view
|
||||
v-if="closeable"
|
||||
@tap.stop="close"
|
||||
class="uv-popup__content__close"
|
||||
:class="['uv-popup__content__close--' + closeIconPos]"
|
||||
hover-class="uv-popup__content__close--hover"
|
||||
hover-stay-time="150"
|
||||
>
|
||||
<uv-icon
|
||||
name="close"
|
||||
color="#909399"
|
||||
size="18"
|
||||
bold
|
||||
></uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
</uv-transition>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<keypress v-if="maskShow" @esc="onTap" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import keypress from './keypress.js'
|
||||
// #endif
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件,为了解决遮罩弹层的问题
|
||||
* @tutorial https://www.uvui.cn/components/popup.html
|
||||
* @property {String} mode = [top|center|bottom|left|right] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value left 左侧弹出
|
||||
* @value right 右侧弹出
|
||||
* @property {Number} duration 动画时长,默认300
|
||||
* @property {Boolean} overlay 是否显示遮罩,默认true
|
||||
* @property {Boolean} overlayOpacity 遮罩透明度,默认0.5
|
||||
* @property {Object} overlayStyle 遮罩自定义样式
|
||||
* @property {Boolean} closeOnClickOverlay = [true|false] 蒙版点击是否关闭弹窗,默认true
|
||||
* @property {Number | String} zIndex 弹出层的层级
|
||||
* @property {Boolean} safeAreaInsetTop 是否留出顶部安全区(状态栏高度),默认false
|
||||
* @property {Boolean} safeAreaInsetBottom 是否为留出底部安全区适配,默认true
|
||||
* @property {Boolean} closeable 是否显示关闭图标,默认false
|
||||
* @property {Boolean} closeIconPos 自定义关闭图标位置,`top-left`-左上角,`top-right`-右上角,`bottom-left`-左下角,`bottom-right`-右下角,默认top-right
|
||||
* @property {String} bgColor 主窗口背景色
|
||||
* @property {String} maskBackgroundColor 蒙版颜色
|
||||
* @property {Boolean} customStyle 自定义样式
|
||||
* @event {Function} change 打开关闭弹窗触发,e={show: false}
|
||||
* @event {Function} maskClick 点击遮罩触发
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-popup',
|
||||
components: {
|
||||
// #ifdef H5
|
||||
keypress
|
||||
// #endif
|
||||
},
|
||||
mixins: [mpMixin, mixin],
|
||||
emits: ['change', 'maskClick'],
|
||||
props: {
|
||||
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// 动画时长,单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: 300
|
||||
},
|
||||
// 层级
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
// #ifdef H5
|
||||
default: 997
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
default: 10075
|
||||
// #endif
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示遮罩
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 点击遮罩是否关闭弹窗
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 遮罩的透明度,0-1之间
|
||||
overlayOpacity: {
|
||||
type: [Number, String],
|
||||
default: 0.4
|
||||
},
|
||||
// 自定义遮罩的样式
|
||||
overlayStyle: {
|
||||
type: [Object, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否为iPhoneX留出底部安全距离
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否留出顶部安全距离(状态栏高度)
|
||||
safeAreaInsetTop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示关闭图标
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 自定义关闭图标位置,top-left为左上角,top-right为右上角,bottom-left为左下角,bottom-right为右下角
|
||||
closeIconPos: {
|
||||
type: String,
|
||||
default: 'top-right'
|
||||
},
|
||||
// mode=center,也即中部弹出时,是否使用缩放模式
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
round: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
...uni.$uv?.props?.popup
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type]) return
|
||||
this[this.config[type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal]) return
|
||||
this[this.config[this.mode]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: 'top',
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
right: 'right',
|
||||
message: 'top',
|
||||
dialog: 'center',
|
||||
share: 'bottom'
|
||||
},
|
||||
transitionStyle: {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupClass: this.isDesktop ? 'fixforpc-top' : 'top',
|
||||
direction: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500
|
||||
},
|
||||
bg() {
|
||||
if (this.bgColor === '' || this.bgColor === 'none' || this.$uv.getPx(this.round)>0) {
|
||||
return 'transparent'
|
||||
}
|
||||
return this.bgColor
|
||||
},
|
||||
contentStyle() {
|
||||
const style = {};
|
||||
if (this.bgColor) {
|
||||
style.backgroundColor = this.bg
|
||||
}
|
||||
if(this.round) {
|
||||
const value = this.$uv.addUnit(this.round)
|
||||
const mode = this.direction?this.direction:this.mode
|
||||
style.backgroundColor = this.bgColor
|
||||
if(mode === 'top') {
|
||||
style.borderBottomLeftRadius = value
|
||||
style.borderBottomRightRadius = value
|
||||
} else if(mode === 'bottom') {
|
||||
style.borderTopLeftRadius = value
|
||||
style.borderTopRightRadius = value
|
||||
} else if(mode === 'center') {
|
||||
style.borderRadius = value
|
||||
}
|
||||
}
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
|
||||
}
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
created() {
|
||||
// TODO 处理 message 组件生命周期异常的问题
|
||||
this.messageChild = null
|
||||
// TODO 解决头条冒泡的问题
|
||||
this.clearPropagation = false
|
||||
},
|
||||
methods: {
|
||||
setH5Visible() {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = 'visible'
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 公用方法,不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
// #ifndef APP-NVUE
|
||||
e.stopPropagation()
|
||||
// #endif
|
||||
this.clearPropagation = true
|
||||
},
|
||||
|
||||
open(direction) {
|
||||
// fix by mehaotian 处理快速打开关闭的情况
|
||||
if (this.showPopup) {
|
||||
return
|
||||
}
|
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.mode
|
||||
}else {
|
||||
this.direction = direction;
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
return this.$uv.error(`缺少类型:${direction}`);
|
||||
}
|
||||
this[this.config[direction]]()
|
||||
this.$emit('change', {
|
||||
show: true,
|
||||
type: direction
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.mode
|
||||
})
|
||||
clearTimeout(this.timer)
|
||||
// // 自定义关闭事件
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
},
|
||||
// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false
|
||||
},
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
// fix by mehaotian 兼容 nvue
|
||||
this.clearPropagation = false
|
||||
return
|
||||
}
|
||||
this.$emit('maskClick')
|
||||
if (!this.closeOnClickOverlay) return
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupClass = this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
this.ani = ['slide-top']
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
this.$nextTick(() => {
|
||||
if (this.messageChild && this.mode === 'message') {
|
||||
this.messageChild.timerClose()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupClass = 'bottom'
|
||||
this.ani = ['slide-bottom']
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupClass = 'center'
|
||||
this.ani = this.zoom?['zoom-in', 'fade']:['fade'];
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
/* #endif */
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
left(type) {
|
||||
this.popupClass = 'left'
|
||||
this.ani = ['slide-left']
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
right(type) {
|
||||
this.popupClass = 'right'
|
||||
this.ani = ['slide-right']
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uv-popup {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
|
||||
/* #endif */
|
||||
&.top,
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uv-popup__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
padding-top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: 0;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
&__close {
|
||||
position: absolute;
|
||||
|
||||
&--hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&__close--top-left {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
&__close--top-right {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
&__close--bottom-left {
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
&__close--bottom-right {
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixforpc-z-index {
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
{
|
||||
"id": "uv-popup",
|
||||
"displayName": "uv-popup 弹出层 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.7",
|
||||
"description": "uv-popup 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义。",
|
||||
"keywords": [
|
||||
"uv-popup",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"popup",
|
||||
"弹出层"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-overlay",
|
||||
"uv-transition",
|
||||
"uv-icon",
|
||||
"uv-status-bar",
|
||||
"uv-safe-bottom"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
## Popup 弹出层
|
||||
|
||||
> **组件名:uv-popup**
|
||||
|
||||
弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义。
|
||||
|
||||
该组件已经放弃原来`uview2.x`的写法,参照了官方`uni-popup`的写法进行重构。在小程序端的性能大大提升,打开和关闭避免延迟,调用方法与之前相比也有所差异,具体请查看文档。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/popup.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>(请不要 下载插件ZIP)</small>
|
||||
|
||||
### [更多插件,请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||

|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈,或者您对uv-ui有一些好的建议,欢迎加入uv-ui官方交流群:<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
## 1.0.3(2023-07-07)
|
||||
增加一些样式配置
|
||||
## 1.0.2(2023-07-07)
|
||||
解决一些bug
|
||||
## 1.0.1(2023-07-07)
|
||||
修复弹出位置问题
|
||||
## 1.0.0(2023-07-06)
|
||||
完成基本功能
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
export const dropdownMenuProps = {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#1989fa'
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 0.3
|
||||
},
|
||||
menuItemStyle: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
popupSytle: {
|
||||
type: Object,
|
||||
default: {},
|
||||
}
|
||||
}
|
||||
|
|
@ -1,570 +0,0 @@
|
|||
<script>
|
||||
import { dropdownMenuProps } from './props.js';
|
||||
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, unref, watch } from "vue";
|
||||
|
||||
/**
|
||||
* 下拉菜单列表
|
||||
* @description 高性能下拉菜单列表组件,兼容多端
|
||||
* @property {Object} value 传递给组件的值,不支持双向绑定,可以通过监听change自己实现双向绑定 默认: {}
|
||||
* @property {Array} data 整个菜单栏的下拉选择的数据,必填
|
||||
* @property {String} activeColor 菜单标题和选项的选中态颜色 默认: #1989fa
|
||||
* @property {Number} z-index 菜单栏 z-index 层级 默认: 10
|
||||
* @property {Number} duration 动画时长,单位秒,设置为 0 可以禁用动画 默认: 0.2
|
||||
* @property {Boolean} overlay 是否显示遮罩层 默认: true
|
||||
* @property {Boolean} close-on-click-overlay 是否在点击遮罩层后关闭菜单 默认: true
|
||||
* @property {Objecct} menuItemStyle 每个菜单栏的样式设置,必须为对象 默认: {}
|
||||
* @property {Objecct} popupSytle 下拉选择项弹出样式设置,必须为对象 默认: {}
|
||||
* @event {Function} change 当菜单的值改变触发的事件,e = { item: Object, value: Object }
|
||||
*/
|
||||
|
||||
export default {
|
||||
emits: ['change'],
|
||||
props: dropdownMenuProps,
|
||||
setup(props, { emit, expose }) {
|
||||
const $this = getCurrentInstance();
|
||||
|
||||
let windowInfo = {};
|
||||
|
||||
const state = reactive({
|
||||
activeIndex: -1,
|
||||
activeOptions: {},
|
||||
activeTreeIndex: -1,
|
||||
currentOptions: [],
|
||||
popupContentShow: false,
|
||||
treeContentHeight: 0,
|
||||
popupTop: 0,
|
||||
})
|
||||
|
||||
let query = null;
|
||||
|
||||
let animationIng = false;
|
||||
|
||||
onMounted(() => {
|
||||
query = uni.createSelectorQuery().in($this);
|
||||
windowInfo = uni.getWindowInfo();
|
||||
setTimeout(() => { //等待加载完毕
|
||||
query.select('.wei-dropdown-menu').boundingClientRect(rect => {
|
||||
if(rect) {
|
||||
state.popupTop = rect.height + rect.top + windowInfo.windowTop;
|
||||
}
|
||||
}).exec();
|
||||
}, 100)
|
||||
})
|
||||
|
||||
watch(() => props.value, (newValue) => {
|
||||
if(newValue && newValue instanceof Object) {
|
||||
Object.keys(newValue).forEach((key) => {
|
||||
const index = props.data.findIndex((item) => item.name === key);
|
||||
const options = props.data[index] ? props.data[index].options : null;
|
||||
if(index > -1
|
||||
&& options
|
||||
) {
|
||||
if(Array.isArray(newValue[key])) { //二级树元素负值
|
||||
if(newValue[key].length !== 2) {
|
||||
console.warn('二级分类的value值格式有误,请检查!!!');
|
||||
return;
|
||||
}
|
||||
const parentIndex = options.findIndex((item) => item.value === newValue[key][0]);
|
||||
if(parentIndex > -1) {
|
||||
const valueIndex = options[parentIndex].children.findIndex((item) => item.value === newValue[key][1]);
|
||||
if(valueIndex > -1) {
|
||||
state.activeOptions[index] = [options[parentIndex].children[valueIndex], valueIndex, parentIndex];
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const valueIndex = options.findIndex((item) => {
|
||||
return item.value === newValue[key];
|
||||
});
|
||||
if (valueIndex > -1) {
|
||||
state.activeOptions[index] = [options[valueIndex], valueIndex];
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
|
||||
watch(() => props.data, () => {
|
||||
state.activeOptions = {};
|
||||
state.activeIndex = -1;
|
||||
state.activeTreeIndex = -1;
|
||||
})
|
||||
|
||||
const menuPopupClass = ref('hide');
|
||||
const menuPopupMaskClass = ref('hide');
|
||||
const menuPopupContentClass = ref('hide');
|
||||
|
||||
const menuData = computed(() => {
|
||||
return props.data;
|
||||
})
|
||||
|
||||
function onMenuClick(item, index) {
|
||||
if(animationIng) {
|
||||
return;
|
||||
}
|
||||
animationIng = true;
|
||||
if(state.activeIndex > -1) {
|
||||
closeOptionPopup();
|
||||
return;
|
||||
}
|
||||
state.currentOptions = menuData.value[index].options || [];
|
||||
state.activeIndex = index;
|
||||
if(menuData.value[index].treeSelect
|
||||
&& state.activeOptions[index]) {
|
||||
state.activeTreeIndex = state.activeOptions[index][2];
|
||||
}
|
||||
nextTick(() => {
|
||||
openOptionPopup();
|
||||
})
|
||||
}
|
||||
|
||||
function openOptionPopup() {
|
||||
menuPopupClass.value = 'show';
|
||||
menuPopupMaskClass.value = 'fade-in';
|
||||
menuPopupContentClass.value = 'slide-down';
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
menuPopupContentClass.value = 'show';
|
||||
menuPopupMaskClass.value = 'show';
|
||||
updateTreeContentHeight();
|
||||
animationIng = false;
|
||||
}, props.duration * 1000);
|
||||
})
|
||||
}
|
||||
|
||||
function closeOptionPopup() {
|
||||
menuPopupContentClass.value = 'slide-up';
|
||||
menuPopupMaskClass.value = 'fade-out';
|
||||
setTimeout(() => {
|
||||
menuPopupClass.value = 'hide';
|
||||
menuPopupContentClass.value = 'hide';
|
||||
menuPopupMaskClass.value = 'hide';
|
||||
state.activeIndex = -1;
|
||||
state.currentOptions = [];
|
||||
state.activeTreeIndex = -1;
|
||||
animationIng = false;
|
||||
}, props.duration * 1000);
|
||||
}
|
||||
|
||||
function onOptionClick(item, index, parentIndex = null) {
|
||||
state.activeOptions[state.activeIndex] = [item, index, parentIndex];
|
||||
const tmpValue = {};
|
||||
Object.keys(state.activeOptions).forEach(key => {
|
||||
if(state.activeOptions[key]) {
|
||||
const curOption = state.activeOptions[key];
|
||||
const name = props.data[key].name;
|
||||
//判断是否属于分类结构
|
||||
if(curOption[2]) {
|
||||
const parentValue = props.data[key].options[curOption[2]].value;
|
||||
tmpValue[name] = [parentValue, curOption[0].value];
|
||||
} else {
|
||||
tmpValue[name] = curOption[0].value;
|
||||
}
|
||||
}
|
||||
})
|
||||
emit('change', {
|
||||
item: unref(item),
|
||||
value: tmpValue,
|
||||
});
|
||||
closeOptionPopup();
|
||||
}
|
||||
|
||||
function onEmptyClick() { }
|
||||
|
||||
function onOverlayClick() {
|
||||
if(props.closeOnClickOverlay) {
|
||||
closeOptionPopup();
|
||||
}
|
||||
}
|
||||
|
||||
function onTreeOptionClick(item, index) {
|
||||
state.activeOptions[state.activeIndex] = [item, index, unref(state.activeTreeIndex)];
|
||||
}
|
||||
|
||||
function onTreeParent(item, index) {
|
||||
state.activeTreeIndex = index;
|
||||
}
|
||||
|
||||
function updateTreeContentHeight() {
|
||||
query.select('.wei-dropdown-menu-popup-content').boundingClientRect(rect => {
|
||||
state.treeContentHeight = rect.height;
|
||||
}).exec();
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
menuPopupClass,
|
||||
menuPopupContentClass,
|
||||
menuPopupMaskClass,
|
||||
menuData,
|
||||
onOptionClick,
|
||||
onMenuClick,
|
||||
onTreeParent,
|
||||
onTreeOptionClick,
|
||||
onOverlayClick,
|
||||
onEmptyClick
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="wei-dropdown-menu" :style="{
|
||||
'--active-color': activeColor,
|
||||
'--duration': duration + 's'
|
||||
}">
|
||||
<view class="wei-dropdown-menu-bar">
|
||||
<view
|
||||
class="wei-dropdown-menu-item"
|
||||
v-for="(item, index) in menuData" :key="index"
|
||||
@tap="onMenuClick(item, index)"
|
||||
:class="[activeIndex === index && menuPopupMaskClass !== 'fade-out' ? 'active' : '' ]"
|
||||
:style="{
|
||||
width: item.menuWidth ? item.menuWidth : 'auto',
|
||||
...menuItemStyle
|
||||
}"
|
||||
>
|
||||
<view class="label">
|
||||
<text class="label-text" v-if="activeOptions[index]">
|
||||
{{activeOptions[index][0].value===''?item.title:activeOptions[index][0].label}}
|
||||
</text>
|
||||
<text class="label-text" v-else>{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="indicator">
|
||||
<view class="indicator-icon"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wei-dropdown-menu-popup"
|
||||
:class="'wei-dropdown-menu-popup--'+menuPopupClass"
|
||||
:style="{
|
||||
top: popupTop + 'px',
|
||||
zIndex: zIndex
|
||||
}"
|
||||
>
|
||||
<view class="wei-dropdown-menu-popup-mask"
|
||||
:class="'wei-dropdown-menu-popup-mask--'+menuPopupMaskClass"
|
||||
:style="{
|
||||
zIndex: zIndex - 1
|
||||
}"
|
||||
v-if="overlay"
|
||||
@tap="onOverlayClick"
|
||||
></view>
|
||||
<view
|
||||
class="wei-dropdown-menu-popup-content"
|
||||
:class="'wei-dropdown-menu-popup-content--'+menuPopupContentClass"
|
||||
:style="{
|
||||
zIndex: zIndex + 1,
|
||||
...popupSytle,
|
||||
}"
|
||||
@tap.native.stop="onEmptyClick"
|
||||
>
|
||||
<template v-if="activeIndex > -1 && data[activeIndex].treeSelect === true">
|
||||
<view class="wei-dropdown-menu-tree" :style="{
|
||||
height: data[activeIndex].popupHeight ? data[activeIndex].popupHeight : 'auto',
|
||||
}">
|
||||
<view class="wei-dropdown-menu-tree-nav">
|
||||
<view
|
||||
class="wei-dropdown-menu-tree-nav-item"
|
||||
v-for="(item, index) in currentOptions"
|
||||
:key="index"
|
||||
:class="activeTreeIndex === index ? 'active' : ''"
|
||||
@tap="onTreeParent(item, index)"
|
||||
>
|
||||
<text class="wei-dropdown-menu-tree-nav-item-text">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y :style="{ height: treeContentHeight + 'px' }" class="wei-dropdown-menu-tree-content">
|
||||
<template v-if="activeTreeIndex >-1
|
||||
&& currentOptions[activeTreeIndex].children">
|
||||
<view
|
||||
class="wei-dropdown-menu-tree-nav-option"
|
||||
v-for="(childItem, childIndex) in currentOptions[activeTreeIndex].children"
|
||||
:key="childIndex"
|
||||
@tap="onOptionClick(childItem, childIndex, activeTreeIndex)"
|
||||
:class="activeOptions[activeIndex] && activeOptions[activeIndex][2] === activeTreeIndex
|
||||
&& activeOptions[activeIndex][1] === childIndex ? 'active' : ''"
|
||||
>
|
||||
<text
|
||||
class="wei-dropdown-menu-tree-nav-option-text"
|
||||
>{{ childItem.label }}</text>
|
||||
<view class="wei-dropdown-menu-tree-nav-option-ft">
|
||||
<icon
|
||||
v-if="activeOptions[activeIndex] && activeOptions[activeIndex][2] === activeTreeIndex
|
||||
&& activeOptions[activeIndex][1] === childIndex"
|
||||
type="success_no_circle"
|
||||
size="15"
|
||||
:color="activeColor">
|
||||
>
|
||||
</icon>
|
||||
<text class="wei-dropdown-menu-option-tip" v-if="childItem.tip">{{ childItem.tip }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="wei-dropdown-menu-option"
|
||||
v-for="(item, index) in currentOptions"
|
||||
:key="index"
|
||||
@tap="onOptionClick(item, index, null)"
|
||||
:class="activeOptions[activeIndex] && activeOptions[activeIndex][1] === index ? 'active' : ''"
|
||||
>
|
||||
<text class="wei-dropdown-menu-option-label">{{ item.label }}</text>
|
||||
<icon
|
||||
v-if="activeOptions[activeIndex] && activeOptions[activeIndex][1] === index"
|
||||
type="success_no_circle"
|
||||
class="wei-dropdown-menu-option-icon"
|
||||
size="15"
|
||||
:color="activeColor">
|
||||
</icon>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
$wei-dropdown-menu-height: 48px !default;
|
||||
$wei-dropdown-menu-label-font-size: 15px !default;
|
||||
$wei-dropdown-menu-indicator-color: #dcdee0 !default;
|
||||
$wei-dropdown-menu-indicator-size: 5px !default;
|
||||
|
||||
.wei-dropdown-menu-bar {
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
height: $wei-dropdown-menu-height;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(100, 101, 102, .12);
|
||||
}
|
||||
|
||||
.wei-dropdown-menu-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $wei-dropdown-menu-label-font-size;
|
||||
.label {
|
||||
margin-right: 5px;
|
||||
&-text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
color: var(--active-color);
|
||||
.indicator-icon {
|
||||
border-color: var(--active-color) transparent transparent transparent;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
.indicator-icon {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: $wei-dropdown-menu-indicator-size $wei-dropdown-menu-indicator-size 0 $wei-dropdown-menu-indicator-size;
|
||||
border-color: $wei-dropdown-menu-indicator-color transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.wei-dropdown-menu-popup {
|
||||
position: fixed;
|
||||
top: $wei-dropdown-menu-height;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
&--show {
|
||||
display: block !important;
|
||||
}
|
||||
&--hide {
|
||||
display: none !important;
|
||||
}
|
||||
&-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
&--hide {
|
||||
opacity: 0;
|
||||
}
|
||||
&--show {
|
||||
opacity: 1;
|
||||
}
|
||||
&--fade-up {
|
||||
animation: weiDropdownMenuFadeIn ease var(--duration) forwards;
|
||||
}
|
||||
&--fade-out {
|
||||
animation: weiDropdownMenuFadeOut ease var(--duration) forwards;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
max-height: 80%;
|
||||
background-color: #fff;
|
||||
animation-duration: .4;
|
||||
&--slide-up {
|
||||
animation: weiDropdownMenuSlideUp ease var(--duration) forwards;
|
||||
}
|
||||
&--slide-down {
|
||||
animation: weiDropdownMenuSlideDown ease var(--duration) forwards;
|
||||
}
|
||||
&--hide {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
&--show {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wei-dropdown-menu-popup-content {
|
||||
.wei-dropdown-menu-option {
|
||||
position: relative;
|
||||
padding: 10px 16px;
|
||||
box-sizing: border-box;
|
||||
&-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
&-icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--active-color);
|
||||
}
|
||||
&.active {
|
||||
color: var(--active-color);
|
||||
}
|
||||
}
|
||||
.wei-dropdown-menu-option + .wei-dropdown-menu-option {
|
||||
&::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
right: 16px;
|
||||
top: 0;
|
||||
left: 16px;
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
transform: scaleY(.5)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wei-dropdown-menu-tree {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&-nav {
|
||||
box-sizing: border-box;
|
||||
max-width: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f7f8fa;
|
||||
&-item {
|
||||
padding: 14px 12px;
|
||||
position: relative;
|
||||
&-text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
}
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
&::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: var(--active-color);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-option {
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
&.active {
|
||||
color: var(--active-color);
|
||||
}
|
||||
&-text {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
&-ft {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wei-dropdown-menu-option {
|
||||
&-tip {
|
||||
margin-left: 5px;
|
||||
font-size: 13px;
|
||||
color: #969799;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes weiDropdownMenuSlideUp{
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes weiDropdownMenuSlideDown {
|
||||
from {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes weiDropdownMenuFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes weiDropdownMenuFadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
|
||||
|
||||
## 介绍
|
||||
向下弹出的菜单列表,支持二级分类选择。不依赖任何第三方插件,支持小程序、h5、app-vue。
|
||||
注意: 仅支持vue3
|
||||
### 基本用法
|
||||
```
|
||||
<template>
|
||||
<view class="content">
|
||||
<wei-dropdown-menu :data="menuData" @change="onChange" :value="menuValue"
|
||||
:popupSytle="{ borderRadius: '0 0 10px 10px', overflow: 'hidden' }"></wei-dropdown-menu>
|
||||
<view class="action-btns">
|
||||
<button @tap="setValueChange" type="primary">手动触发值改变</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { menuData } from './data.js';
|
||||
|
||||
const menuValue = ref({});
|
||||
|
||||
function onChange(e) {
|
||||
console.log('↓↓↓↓触发change事件↓↓↓↓')
|
||||
console.log(e)
|
||||
menuData.value = e.value;
|
||||
}
|
||||
|
||||
function setValueChange() {
|
||||
menuValue.value = {
|
||||
city: ['1', '1_2'],
|
||||
sort: "2",
|
||||
};
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性/事件说明
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:--:|:--:|:--:|:--:|
|
||||
|value |Object |{} |传递给组件的值,不支持双向绑定,可以通过监听change自己实现双向绑定|
|
||||
|data |Array |[] |整个菜单栏的下拉选择的数据,必填,具体看下面说明
|
||||
|activeColor |String |#1989fa|菜单标题和选项的选中态颜色 |
|
||||
|z-index |Number |10 |菜单栏 z-index 层级|
|
||||
|duration |Number |.2 |动画时长,单位秒,设置为 0 可以禁用动画|
|
||||
|overlay |Boolean |true |是否显示遮罩层|
|
||||
|close-on-click-overlay |Boolean |true |是否在点击遮罩层后关闭菜单|
|
||||
|menuItemStyle |Object |{} |每个菜单栏的样式设置,必须为对象|
|
||||
|popupSytle |Object |{} |下拉选择项弹出样式设置,必须为对象|
|
||||
|@change |Function | |当菜单的值改变触发的事件,e = { item: Object, value: Object }|
|
||||
|
||||
### 属性 Data
|
||||
|
||||
Data 属性必须为数组,数组每一项的配置如下
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:--:|:--:|:--:|:--:|
|
||||
|name|String|null| 必填,每栏菜单项的唯一标识,也就是组件value值的key|
|
||||
|title|String|null| 必填,每栏菜单显示的标题|
|
||||
|options|Array|null| 必填,下拉菜单的选择项,格式 { label:"xxx", value:"xxx", tip: "显示在最右边的提示" }|
|
||||
|treeSelect|Boolean|false| 是否为二级分类选择, 如果是,options需要有children字段|
|
||||
|popupHeight|String|null| 弹出选择菜单的高度,如果为空,则会自适应选项高度, 必须带单位 |
|
||||
|menuWidth|String|null|每项菜单栏的宽度,为空自适应,必须带单位|
|
||||
|
||||
### 后期继续完善的功能
|
||||
|
||||
- [ ] 增加出更多样式配置
|
||||
- [ ] 兼容nvue
|
||||
|
||||
|
||||
Loading…
Reference in New Issue