新增记录模块页面
This commit is contained in:
@@ -10,6 +10,10 @@
|
|||||||
{
|
{
|
||||||
"launchtype" : "local"
|
"launchtype" : "local"
|
||||||
},
|
},
|
||||||
|
"h5" :
|
||||||
|
{
|
||||||
|
"launchtype" : "local"
|
||||||
|
},
|
||||||
"type" : "uniCloud"
|
"type" : "uniCloud"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
30
App.vue
30
App.vue
@@ -1,18 +1,18 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
onLaunch: function() {
|
onLaunch: function () {
|
||||||
console.log('App Launch')
|
console.log("App Launch");
|
||||||
},
|
},
|
||||||
onShow: function() {
|
onShow: function () {
|
||||||
console.log('App Show')
|
console.log("App Show");
|
||||||
},
|
},
|
||||||
onHide: function() {
|
onHide: function () {
|
||||||
console.log('App Hide')
|
console.log("App Hide");
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "uview-ui/index.scss";
|
@import "uview-ui/index.scss";
|
||||||
@import "@/static/iconfont.css";
|
@import "@/static/iconfont.css";
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
411
components/addGoods/index.vue
Normal file
411
components/addGoods/index.vue
Normal file
@@ -0,0 +1,411 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="modal"
|
||||||
|
:animation="animationData1"
|
||||||
|
@touchmove.stop.prevent
|
||||||
|
>
|
||||||
|
|
||||||
|
<u-popup
|
||||||
|
:show="addShow"
|
||||||
|
:round="10"
|
||||||
|
mode="bottom"
|
||||||
|
>
|
||||||
|
<view class="addGoods">
|
||||||
|
<view class="add-btn">
|
||||||
|
<span @click="close">取消</span>
|
||||||
|
<view>新增食物</view>
|
||||||
|
<span @click="confirm">确认</span>
|
||||||
|
</view>
|
||||||
|
<!-- 商品详情 -->
|
||||||
|
<goodsList
|
||||||
|
:lists="selectGoods"
|
||||||
|
type="dian-right"
|
||||||
|
@tabGoodsInfo="tabGoodsInfo"
|
||||||
|
/>
|
||||||
|
<!-- 输入 -->
|
||||||
|
<view class="add-input">
|
||||||
|
<view class="left"><span>0千卡</span>0克</view>
|
||||||
|
<view class="total">{{inputValue.join("") || '0.0'}}<span>克</span></view>
|
||||||
|
<u-icon
|
||||||
|
name="hourglass-half-fill"
|
||||||
|
color="#999"
|
||||||
|
size="28"
|
||||||
|
label="估值"
|
||||||
|
labelPos="bottom"
|
||||||
|
labelSize="13"
|
||||||
|
labelColor="#999"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<!-- 键盘 -->
|
||||||
|
<view
|
||||||
|
class=" content-wrap"
|
||||||
|
:animation="animationData2"
|
||||||
|
>
|
||||||
|
<view class="key-box">
|
||||||
|
<view
|
||||||
|
:class="{
|
||||||
|
'handel-btn': ['.', '删除', ''].includes(item),
|
||||||
|
'active-btn': activeKey === item,
|
||||||
|
'active-handel-btn':
|
||||||
|
activeKey === item && ['.', '删除'].includes(item),
|
||||||
|
}"
|
||||||
|
v-for="(item, index) in keyboardList"
|
||||||
|
:key="index"
|
||||||
|
@click="setValue(item)"
|
||||||
|
>{{ item }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import goodsList from "@/components/foods";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
goodsList,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
animationData1: {},
|
||||||
|
animationData2: {},
|
||||||
|
activeKey: "",
|
||||||
|
inputValue: ["1", "0", "0", ".", "0"],
|
||||||
|
result: "100.0",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
addShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
selectGoods: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
//是否为带小数的数字键盘
|
||||||
|
decimals: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
//小数点前整数的位数
|
||||||
|
maxLength: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 9,
|
||||||
|
},
|
||||||
|
//小数点后的位数
|
||||||
|
pointLength: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
//最大的值
|
||||||
|
max: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 999999999,
|
||||||
|
},
|
||||||
|
//最小的值
|
||||||
|
min: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
keyboardList() {
|
||||||
|
return this.decimals
|
||||||
|
? [
|
||||||
|
"1",
|
||||||
|
"2",
|
||||||
|
"3",
|
||||||
|
"4",
|
||||||
|
"5",
|
||||||
|
"6",
|
||||||
|
"7",
|
||||||
|
"8",
|
||||||
|
"9",
|
||||||
|
".",
|
||||||
|
"0",
|
||||||
|
"删除",
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
"1",
|
||||||
|
"2",
|
||||||
|
"3",
|
||||||
|
"4",
|
||||||
|
"5",
|
||||||
|
"6",
|
||||||
|
"7",
|
||||||
|
"8",
|
||||||
|
"9",
|
||||||
|
"",
|
||||||
|
"0",
|
||||||
|
"删除",
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
visible(val) {
|
||||||
|
this.inputValue = [];
|
||||||
|
if (val) this.enterAnimate();
|
||||||
|
else this.leaveAnimate();
|
||||||
|
},
|
||||||
|
inputValue(value) {
|
||||||
|
let result = Number(this.inputValue.join(""));
|
||||||
|
if (result < this.min) {
|
||||||
|
uni.showToast({
|
||||||
|
title: `最小值为${this.min}`,
|
||||||
|
duration: 1500,
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
} else if (result > this.max) {
|
||||||
|
uni.showToast({
|
||||||
|
title: `最大值为${this.max}`,
|
||||||
|
duration: 1500,
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
this.inputValue = [9, 9, 9];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabGoodsInfo(e) {
|
||||||
|
console.log("父组件监听到了子组件的商品详情页面", e);
|
||||||
|
},
|
||||||
|
setValue(data) {
|
||||||
|
this.activeKey = data;
|
||||||
|
// let timer = setTimeout(() => {
|
||||||
|
|
||||||
|
// clearTimeout(timer);
|
||||||
|
// }, 100);
|
||||||
|
this.activeKey = "-";
|
||||||
|
|
||||||
|
if (
|
||||||
|
!data ||
|
||||||
|
(data !== "删除" &&
|
||||||
|
this.inputValue.includes(".") &&
|
||||||
|
this.inputValue.join("").split(".")[1].length ===
|
||||||
|
this.pointLength)
|
||||||
|
)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.inputValue.length === 1 &&
|
||||||
|
this.inputValue[0] === "0" &&
|
||||||
|
!["删除", "."].includes(data)
|
||||||
|
) {
|
||||||
|
return (this.inputValue = [data]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data !== "删除") {
|
||||||
|
if (this.inputValue.includes(".")) {
|
||||||
|
if (
|
||||||
|
this.inputValue.join("").split(".")[0].length ===
|
||||||
|
this.maxLength
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else if (this.inputValue.length === this.maxLength) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data === "删除") {
|
||||||
|
return this.inputValue.length && this.inputValue.pop();
|
||||||
|
}
|
||||||
|
if (data === ".") {
|
||||||
|
if (!this.inputValue.length || this.inputValue.includes("."))
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
console.log(data);
|
||||||
|
this.inputValue.push(data);
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.$emit("update:visible", false);
|
||||||
|
this.$emit("close");
|
||||||
|
},
|
||||||
|
confirm() {
|
||||||
|
let result = Number(this.inputValue.join(""));
|
||||||
|
this.$emit("confirm", result);
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
enterAnimate() {
|
||||||
|
this.animation1 = uni.createAnimation();
|
||||||
|
this.animation2 = uni.createAnimation();
|
||||||
|
this.animation1.backgroundColor("rgba(0,0,0,0.5)").step({
|
||||||
|
duration: 500,
|
||||||
|
timingFunction: "ease",
|
||||||
|
});
|
||||||
|
this.animation2.translateY(0).step({
|
||||||
|
timingFunction: "ease-out",
|
||||||
|
duration: 500,
|
||||||
|
});
|
||||||
|
this.animationData1 = this.animation1.export();
|
||||||
|
this.animationData2 = this.animation2.export();
|
||||||
|
},
|
||||||
|
leaveAnimate() {
|
||||||
|
this.animation1 = uni.createAnimation();
|
||||||
|
this.animation2 = uni.createAnimation();
|
||||||
|
this.animation1.backgroundColor("rgba(0,0,0,0)").step({
|
||||||
|
duration: 500,
|
||||||
|
timingFunction: "ease",
|
||||||
|
});
|
||||||
|
this.animation2.translateY(500).step({
|
||||||
|
timingFunction: "ease-out",
|
||||||
|
duration: 500,
|
||||||
|
});
|
||||||
|
this.animationData1 = this.animation1.export();
|
||||||
|
this.animationData2 = this.animation2.export();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.modal {
|
||||||
|
// position: fixed;
|
||||||
|
// bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
.content-wrap {
|
||||||
|
// position: fixed;
|
||||||
|
// bottom: 0;
|
||||||
|
// left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// transform: translateY(100%);
|
||||||
|
|
||||||
|
.content-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 80upx;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
.input-contant {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80upx;
|
||||||
|
font-size: 40upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
padding-left: 30upx;
|
||||||
|
color: #147ff2;
|
||||||
|
line-height: 80upx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
padding-right: 30upx;
|
||||||
|
color: #147ff2;
|
||||||
|
line-height: 80upx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-box {
|
||||||
|
margin-top: 60upx;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
view {
|
||||||
|
width: 251upx;
|
||||||
|
height: 100upx;
|
||||||
|
border: 1upx solid rgb(235, 237, 240);
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100upx;
|
||||||
|
font-size: 40upx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0 -1upx -1upx 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 1;
|
||||||
|
border: 1upx solid rgb(235, 237, 240);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.handel-btn {
|
||||||
|
background: rgb(235, 237, 240);
|
||||||
|
font-size: 30upx;
|
||||||
|
}
|
||||||
|
.active-btn {
|
||||||
|
background: rgb(235, 237, 240);
|
||||||
|
}
|
||||||
|
.active-handel-btn {
|
||||||
|
background: rgb(252, 252, 252);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addGoods {
|
||||||
|
// min-height: 40vh;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
padding: $padding;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: $title-size;
|
||||||
|
span {
|
||||||
|
padding: 10rpx 0;
|
||||||
|
}
|
||||||
|
view {
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.add-input {
|
||||||
|
padding: $padding * 2 $padding * 2 0 $padding * 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
span {
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.total {
|
||||||
|
color: $main-color;
|
||||||
|
font-size: $title-size * 2;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: solid 4rpx $main-color;
|
||||||
|
position: relative;
|
||||||
|
min-width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
min-height: 100rpx;
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -$padding - 10;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
196
components/ar-circle-progress/index.vue
Normal file
196
components/ar-circle-progress/index.vue
Normal file
@@ -0,0 +1,196 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="circle-progress"
|
||||||
|
:style="{
|
||||||
|
width: widthPx + 'px',
|
||||||
|
height: widthPx + 'px',
|
||||||
|
backgroundColor: bgColor
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 有的不支持canvas-id属性，必须用id属性 -->
|
||||||
|
<canvas
|
||||||
|
v-if="canvasId"
|
||||||
|
class="canvas-bg"
|
||||||
|
:canvas-id="canvasId"
|
||||||
|
:id="canvasId"
|
||||||
|
:style="{
|
||||||
|
width: widthPx + 'px',
|
||||||
|
height: widthPx + 'px'
|
||||||
|
}"
|
||||||
|
></canvas>
|
||||||
|
<canvas
|
||||||
|
class="canvas"
|
||||||
|
v-if="elId"
|
||||||
|
:canvas-id="elId"
|
||||||
|
:id="elId"
|
||||||
|
:style="{
|
||||||
|
width: widthPx + 'px',
|
||||||
|
height: widthPx + 'px'
|
||||||
|
}"
|
||||||
|
></canvas>
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "circle-progress",
|
||||||
|
props: {
|
||||||
|
// 圆环进度百分比值
|
||||||
|
percent: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
// 值在0到100之间
|
||||||
|
validator: (val) => {
|
||||||
|
return val >= 0 && val <= 100;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 圆环底色（灰色的圆环）
|
||||||
|
inactiveColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#ececec",
|
||||||
|
},
|
||||||
|
// 圆环激活部分的颜色
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#009dff",
|
||||||
|
},
|
||||||
|
// 圆环线条的宽度，单位rpx
|
||||||
|
borderWidth: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 14,
|
||||||
|
},
|
||||||
|
// 整个圆形的宽度，单位rpx
|
||||||
|
width: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 200,
|
||||||
|
},
|
||||||
|
// 整个圆环执行一圈的时间，单位ms
|
||||||
|
duration: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 1500,
|
||||||
|
},
|
||||||
|
// 圆环进度区域的背景色
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
canvasId: this.randomId(), //一个页面多个圆形进度
|
||||||
|
elId: this.randomId(),
|
||||||
|
widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
|
||||||
|
borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
|
||||||
|
startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
|
||||||
|
progressContext: null, // 活动圆的canvas上下文
|
||||||
|
newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
|
||||||
|
oldPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
percent(nVal, oVal = 0) {
|
||||||
|
if (nVal > 100) nVal = 100;
|
||||||
|
if (nVal < 0) oVal = 0;
|
||||||
|
this.newPercent = nVal;
|
||||||
|
this.oldPercent = oVal;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.drawCircleByProgress(oVal);
|
||||||
|
}, 50);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 赋值，用于加载后第一个画圆使用
|
||||||
|
this.newPercent = this.percent;
|
||||||
|
this.oldPercent = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.drawProgressBg();
|
||||||
|
this.drawCircleByProgress(this.oldPercent);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//一个页面多个progress时ID需不同
|
||||||
|
randomId() {
|
||||||
|
return "progressId" + parseInt(Math.random() * 1000000);
|
||||||
|
},
|
||||||
|
drawProgressBg() {
|
||||||
|
let ctx = uni.createCanvasContext(this.canvasId, this);
|
||||||
|
ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
|
||||||
|
ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
|
||||||
|
ctx.beginPath(); // 开始描绘路径
|
||||||
|
let radius = this.widthPx / 2;
|
||||||
|
ctx.arc(
|
||||||
|
radius,
|
||||||
|
radius,
|
||||||
|
radius - this.borderWidthPx,
|
||||||
|
0,
|
||||||
|
2 * Math.PI,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
ctx.stroke(); // 对路径进行描绘
|
||||||
|
ctx.draw();
|
||||||
|
},
|
||||||
|
drawCircleByProgress(progress) {
|
||||||
|
if (this.oldPercent === 0 && this.newPercent === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let ctx = this.progressContext;
|
||||||
|
if (!ctx) {
|
||||||
|
ctx = uni.createCanvasContext(this.elId, this);
|
||||||
|
this.progressContext = ctx;
|
||||||
|
}
|
||||||
|
// 表示进度的两端为圆形
|
||||||
|
ctx.setLineCap("round");
|
||||||
|
// 设置线条的宽度和颜色
|
||||||
|
ctx.setLineWidth(this.borderWidthPx);
|
||||||
|
ctx.setStrokeStyle(this.activeColor);
|
||||||
|
// 计算过渡时间
|
||||||
|
let time = Math.floor(this.duration / 200);
|
||||||
|
let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
|
||||||
|
ctx.beginPath();
|
||||||
|
// 半径为整个canvas宽度的一半
|
||||||
|
let radius = this.widthPx / 2;
|
||||||
|
ctx.arc(
|
||||||
|
radius,
|
||||||
|
radius,
|
||||||
|
radius - this.borderWidthPx,
|
||||||
|
this.startAngle,
|
||||||
|
endAngle,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.draw();
|
||||||
|
// 增大了百分比
|
||||||
|
if (this.newPercent > this.oldPercent) {
|
||||||
|
progress++;
|
||||||
|
if (progress > this.newPercent) return;
|
||||||
|
} else {
|
||||||
|
// 减少百分比
|
||||||
|
progress--;
|
||||||
|
if (progress < this.newPercent) return;
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
// 定时器，为了让进度条有动画效果
|
||||||
|
this.drawCircleByProgress(progress);
|
||||||
|
}, time);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.circle-progress {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.canvas-bg {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.canvas {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
312
components/custom-digitKeyboard/custom-digitKeyboard.vue
Normal file
312
components/custom-digitKeyboard/custom-digitKeyboard.vue
Normal file
@@ -0,0 +1,312 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="modal"
|
||||||
|
:animation="animationData1"
|
||||||
|
@touchmove.stop.prevent
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class=" content-wrap"
|
||||||
|
:animation="animationData2"
|
||||||
|
>
|
||||||
|
<view class="content-header">
|
||||||
|
<view
|
||||||
|
class="cancel-btn"
|
||||||
|
@click="close"
|
||||||
|
>取消</view>
|
||||||
|
<view class="input-contant">{{ inputValue.join("") }}</view>
|
||||||
|
<view
|
||||||
|
class="confirm-btn"
|
||||||
|
@click="confirm"
|
||||||
|
>完成</view>
|
||||||
|
</view>
|
||||||
|
<view class="key-box">
|
||||||
|
<view
|
||||||
|
:class="{
|
||||||
|
'handel-btn': ['.', '删除', ''].includes(item),
|
||||||
|
'active-btn': activeKey === item,
|
||||||
|
'active-handel-btn':
|
||||||
|
activeKey === item && ['.', '删除'].includes(item),
|
||||||
|
}"
|
||||||
|
v-for="(item, index) in keyboardList"
|
||||||
|
:key="index"
|
||||||
|
@click="setValue(item)"
|
||||||
|
>{{ item }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
animationData1: {},
|
||||||
|
animationData2: {},
|
||||||
|
activeKey: "",
|
||||||
|
inputValue: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
//是否为带小数的数字键盘
|
||||||
|
decimals: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
//小数点前整数的位数
|
||||||
|
maxLength: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 9,
|
||||||
|
},
|
||||||
|
//小数点后的位数
|
||||||
|
pointLength: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 2,
|
||||||
|
},
|
||||||
|
//最大的值
|
||||||
|
max: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 999999999,
|
||||||
|
},
|
||||||
|
//最小的值
|
||||||
|
min: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
keyboardList() {
|
||||||
|
return this.decimals
|
||||||
|
? [
|
||||||
|
"1",
|
||||||
|
"2",
|
||||||
|
"3",
|
||||||
|
"4",
|
||||||
|
"5",
|
||||||
|
"6",
|
||||||
|
"7",
|
||||||
|
"8",
|
||||||
|
"9",
|
||||||
|
".",
|
||||||
|
"0",
|
||||||
|
"删除",
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
"1",
|
||||||
|
"2",
|
||||||
|
"3",
|
||||||
|
"4",
|
||||||
|
"5",
|
||||||
|
"6",
|
||||||
|
"7",
|
||||||
|
"8",
|
||||||
|
"9",
|
||||||
|
"",
|
||||||
|
"0",
|
||||||
|
"删除",
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
visible(val) {
|
||||||
|
this.inputValue = [];
|
||||||
|
if (val) this.enterAnimate();
|
||||||
|
else this.leaveAnimate();
|
||||||
|
},
|
||||||
|
inputValue(value) {
|
||||||
|
this.confirm();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setValue(data) {
|
||||||
|
this.activeKey = data;
|
||||||
|
// let timer = setTimeout(() => {
|
||||||
|
|
||||||
|
// clearTimeout(timer);
|
||||||
|
// }, 100);
|
||||||
|
this.activeKey = "-";
|
||||||
|
|
||||||
|
if (
|
||||||
|
!data ||
|
||||||
|
(data !== "删除" &&
|
||||||
|
this.inputValue.includes(".") &&
|
||||||
|
this.inputValue.join("").split(".")[1].length ===
|
||||||
|
this.pointLength)
|
||||||
|
)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.inputValue.length === 1 &&
|
||||||
|
this.inputValue[0] === "0" &&
|
||||||
|
!["删除", "."].includes(data)
|
||||||
|
) {
|
||||||
|
return (this.inputValue = [data]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data !== "删除") {
|
||||||
|
if (this.inputValue.includes(".")) {
|
||||||
|
if (
|
||||||
|
this.inputValue.join("").split(".")[0].length ===
|
||||||
|
this.maxLength
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else if (this.inputValue.length === this.maxLength) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data === "删除") {
|
||||||
|
return this.inputValue.length && this.inputValue.pop();
|
||||||
|
}
|
||||||
|
if (data === ".") {
|
||||||
|
if (!this.inputValue.length || this.inputValue.includes("."))
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
console.log(data);
|
||||||
|
this.inputValue.push(data);
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.$emit("update:visible", false);
|
||||||
|
this.$emit("close");
|
||||||
|
},
|
||||||
|
confirm() {
|
||||||
|
let result = Number(this.inputValue.join(""));
|
||||||
|
if (result < this.min) {
|
||||||
|
uni.showToast({
|
||||||
|
title: `最小值为${this.min}`,
|
||||||
|
duration: 1500,
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
} else if (result > this.max) {
|
||||||
|
uni.showToast({
|
||||||
|
title: `最大值为${this.max}`,
|
||||||
|
duration: 1500,
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
this.inputValue = [9, 9, 9];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$emit("confirm", result);
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
enterAnimate() {
|
||||||
|
this.animation1 = uni.createAnimation();
|
||||||
|
this.animation2 = uni.createAnimation();
|
||||||
|
this.animation1.backgroundColor("rgba(0,0,0,0.5)").step({
|
||||||
|
duration: 500,
|
||||||
|
timingFunction: "ease",
|
||||||
|
});
|
||||||
|
this.animation2.translateY(0).step({
|
||||||
|
timingFunction: "ease-out",
|
||||||
|
duration: 500,
|
||||||
|
});
|
||||||
|
this.animationData1 = this.animation1.export();
|
||||||
|
this.animationData2 = this.animation2.export();
|
||||||
|
},
|
||||||
|
leaveAnimate() {
|
||||||
|
this.animation1 = uni.createAnimation();
|
||||||
|
this.animation2 = uni.createAnimation();
|
||||||
|
this.animation1.backgroundColor("rgba(0,0,0,0)").step({
|
||||||
|
duration: 500,
|
||||||
|
timingFunction: "ease",
|
||||||
|
});
|
||||||
|
this.animation2.translateY(500).step({
|
||||||
|
timingFunction: "ease-out",
|
||||||
|
duration: 500,
|
||||||
|
});
|
||||||
|
this.animationData1 = this.animation1.export();
|
||||||
|
this.animationData2 = this.animation2.export();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.modal {
|
||||||
|
// position: fixed;
|
||||||
|
// bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
.content-wrap {
|
||||||
|
// position: fixed;
|
||||||
|
// bottom: 0;
|
||||||
|
// left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// transform: translateY(100%);
|
||||||
|
|
||||||
|
.content-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 80upx;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
.input-contant {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80upx;
|
||||||
|
font-size: 40upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
padding-left: 30upx;
|
||||||
|
color: #147ff2;
|
||||||
|
line-height: 80upx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
padding-right: 30upx;
|
||||||
|
color: #147ff2;
|
||||||
|
line-height: 80upx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-box {
|
||||||
|
margin-top: 60upx;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
view {
|
||||||
|
width: 251upx;
|
||||||
|
height: 100upx;
|
||||||
|
border: 1upx solid rgb(235, 237, 240);
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100upx;
|
||||||
|
font-size: 40upx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0 -1upx -1upx 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 1;
|
||||||
|
border: 1upx solid rgb(235, 237, 240);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.handel-btn {
|
||||||
|
background: rgb(235, 237, 240);
|
||||||
|
font-size: 30upx;
|
||||||
|
}
|
||||||
|
.active-btn {
|
||||||
|
background: rgb(235, 237, 240);
|
||||||
|
}
|
||||||
|
.active-handel-btn {
|
||||||
|
background: rgb(252, 252, 252);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
222
components/foods/index.vue
Normal file
222
components/foods/index.vue
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
|
||||||
|
<!--
|
||||||
|
* @Description:是添加早中晚餐时候用的视频列表
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-11 12:08:34
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-11 15:41:47
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="foods--lists">
|
||||||
|
<view
|
||||||
|
class="foods-lists"
|
||||||
|
v-for="item in lists"
|
||||||
|
:key="item"
|
||||||
|
>
|
||||||
|
<view class="lists-left">
|
||||||
|
<u-image
|
||||||
|
:src="require('../../static/imgs/apple.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
radius="10rpx"
|
||||||
|
width="100rpx"
|
||||||
|
height="100rpx"
|
||||||
|
class="goods-img"
|
||||||
|
/>
|
||||||
|
<!-- 只有'点' -->
|
||||||
|
<view
|
||||||
|
class="lists-right"
|
||||||
|
v-if="type === 'dian'"
|
||||||
|
@click="addGoods"
|
||||||
|
>
|
||||||
|
<view class="lists-title">
|
||||||
|
苹果
|
||||||
|
<view class="des"><span>30.0</span> 千卡/100克</view>
|
||||||
|
</view>
|
||||||
|
<view class="dian dian1"></view>
|
||||||
|
</view>
|
||||||
|
<!-- 有'点'和'右箭头' -->
|
||||||
|
<view
|
||||||
|
class="lists-right"
|
||||||
|
v-else-if="type==='dian-right'"
|
||||||
|
@click="tabGoodsInfo"
|
||||||
|
>
|
||||||
|
<view class="lists-title">
|
||||||
|
苹果
|
||||||
|
<view class="des"><span>30.0</span> 千卡/100克</view>
|
||||||
|
</view>
|
||||||
|
<view class="dianlists">
|
||||||
|
<view class="dian dian1"></view>
|
||||||
|
<u-icon
|
||||||
|
name="arrow-right"
|
||||||
|
color="#ddd"
|
||||||
|
size="13"
|
||||||
|
:bold="true"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 没有'点' 显示总值 -->
|
||||||
|
<view
|
||||||
|
class="lists-right"
|
||||||
|
v-else-if="type==='no-dian'"
|
||||||
|
@click="editGoods"
|
||||||
|
>
|
||||||
|
<view class="lists-title">
|
||||||
|
苹果
|
||||||
|
<view class="des">100克</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="lists-right1">
|
||||||
|
558<span class="dw">千卡</span>
|
||||||
|
<u-icon
|
||||||
|
name="arrow-right"
|
||||||
|
color="#ddd"
|
||||||
|
size="13"
|
||||||
|
:bold="true"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
/** type
|
||||||
|
* 'dian'就是结尾处是点;
|
||||||
|
* 没有点'no-dian'是默认值没有任何点
|
||||||
|
* dian-right是有点和右箭头
|
||||||
|
* ***********************
|
||||||
|
* lists 传过来的列表
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
lists: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: "no-dian",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 跳转到食品详情页面
|
||||||
|
addGoods() {
|
||||||
|
this.$emit("addGoods", "addGoods窜过来的值");
|
||||||
|
},
|
||||||
|
// 跳转到食品详情
|
||||||
|
tabGoodsInfo() {
|
||||||
|
this.$emit("tabGoodsInfo", "tabGoodsInfo窜过来的值");
|
||||||
|
},
|
||||||
|
// 编辑食品
|
||||||
|
editGoods() {
|
||||||
|
this.$emit("editGoods", "editGoods窜过来的值");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 列表
|
||||||
|
.foods-lists {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: $margin;
|
||||||
|
.lists-right {
|
||||||
|
flex: 1;
|
||||||
|
font-size: $title-size-m - 6;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray-m;
|
||||||
|
border-bottom: solid 1rpx #f7f7f7;
|
||||||
|
margin-left: $margin * 0.8;
|
||||||
|
padding: $padding 0;
|
||||||
|
.dw {
|
||||||
|
margin: 0 $margin * 0.6 0 $margin * 0.4;
|
||||||
|
}
|
||||||
|
.lists-right1 {
|
||||||
|
font-size: $title-size-m - 6;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-weight: normal;
|
||||||
|
.dw {
|
||||||
|
margin: 0 $margin * 0.6 0 $margin * 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-img {
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
.lists-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size - 2;
|
||||||
|
color: $text-color;
|
||||||
|
font-weight: bold;
|
||||||
|
flex: 1;
|
||||||
|
.lists-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-color;
|
||||||
|
.des {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: $text-price;
|
||||||
|
font-size: $title-size-m - 6;
|
||||||
|
font-weight: normal;
|
||||||
|
padding-right: $padding * 0.3;
|
||||||
|
}
|
||||||
|
.des {
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m - 6;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dian {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: $margin;
|
||||||
|
}
|
||||||
|
.dian1 {
|
||||||
|
background: #fbbf0f;
|
||||||
|
}
|
||||||
|
.dian2 {
|
||||||
|
background: #fa624d;
|
||||||
|
}
|
||||||
|
.dian3 {
|
||||||
|
background: #02c7bd;
|
||||||
|
}
|
||||||
|
.dianlists {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
337
components/vueScale/index.vue
Normal file
337
components/vueScale/index.vue
Normal file
@@ -0,0 +1,337 @@
|
|||||||
|
<template>
|
||||||
|
<view class="scroll-choose-all">
|
||||||
|
<view class="middleLine">
|
||||||
|
<span class="sanjiao"></span>
|
||||||
|
</view>
|
||||||
|
<scroll-view
|
||||||
|
class="scroll-choose"
|
||||||
|
scroll-x="true"
|
||||||
|
upper-threshold="5"
|
||||||
|
lower-threshold="5"
|
||||||
|
:scroll-left="scrollLeftInit"
|
||||||
|
show-scrollbar="false"
|
||||||
|
@scroll="scroll"
|
||||||
|
@scrolltoupper="upper"
|
||||||
|
@scrolltolower="lower"
|
||||||
|
scroll-with-animation="true"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="scroll-con"
|
||||||
|
:style="{width: scrollWid}"
|
||||||
|
>
|
||||||
|
<view class="topLine">
|
||||||
|
<view
|
||||||
|
class="allLine"
|
||||||
|
:style="{'marginRight': maginL + 'px'}"
|
||||||
|
:class="item.type"
|
||||||
|
v-for="(item,index) in scrollList"
|
||||||
|
:key="index"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="bottomNum"
|
||||||
|
:style="{'paddingLeft': allNumLeft}"
|
||||||
|
>
|
||||||
|
<text
|
||||||
|
class="allNum"
|
||||||
|
:style="{width: (maginL + 2) * 10 + 'px',left: -((maginL + 2) * 5) + 'px'}"
|
||||||
|
v-for="(item,index) in scrollNumList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{radix ? item*0.1 : item}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ScrollChoose",
|
||||||
|
props: {
|
||||||
|
//起始值和终止值差距不要过大，否则会影响页面性能(暂不支持设置小数)
|
||||||
|
/**
|
||||||
|
* 初始值（注意：初始值应在起始值和终止值之间）
|
||||||
|
*/
|
||||||
|
scrollLeft: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 滚动区域起始值（注意：起始值不能大于终止值）
|
||||||
|
*/
|
||||||
|
scrollStart: {
|
||||||
|
type: Number,
|
||||||
|
default: 20,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 滚动区域终止值
|
||||||
|
*/
|
||||||
|
scrollEnd: {
|
||||||
|
type: Number,
|
||||||
|
default: 240,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 线间距
|
||||||
|
*/
|
||||||
|
maginL: {
|
||||||
|
type: Number,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 小数
|
||||||
|
*/
|
||||||
|
radix: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollList: [],
|
||||||
|
scrollNumList: [],
|
||||||
|
scrollWid: "100vw",
|
||||||
|
scrollLeftInit: 0,
|
||||||
|
allNumLeft: "",
|
||||||
|
|
||||||
|
timer: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
radix: {
|
||||||
|
handler(val) {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.scrollList = [];
|
||||||
|
this.scrollNumList = [];
|
||||||
|
for (let i = this.scrollStart; i < this.scrollEnd + 1; i++) {
|
||||||
|
let _line = {};
|
||||||
|
if (i % 5 == 0) {
|
||||||
|
if (i % 10 == 0) {
|
||||||
|
this.scrollNumList.push(i);
|
||||||
|
_line.type = "LLine";
|
||||||
|
} else {
|
||||||
|
_line.type = "MLine";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!this.radix) {
|
||||||
|
_line.type = "SLine";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.scrollList.push(_line);
|
||||||
|
}
|
||||||
|
this.scrollWid =
|
||||||
|
uni.upx2px(750) +
|
||||||
|
(this.scrollEnd - this.scrollStart) * (this.maginL + 2) +
|
||||||
|
"px";
|
||||||
|
if (this.scrollStart % 10 != 0) {
|
||||||
|
if (this.scrollStart > 0) {
|
||||||
|
this.allNumLeft =
|
||||||
|
(10 - (this.scrollStart % 10)) * (this.maginL + 2) +
|
||||||
|
uni.upx2px(372) +
|
||||||
|
"px";
|
||||||
|
} else {
|
||||||
|
this.allNumLeft =
|
||||||
|
Math.abs(this.scrollStart % 10) * (this.maginL + 2) +
|
||||||
|
uni.upx2px(372) +
|
||||||
|
"px";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
this.changScroll(
|
||||||
|
Math.round(
|
||||||
|
(this.scrollLeft - this.scrollStart) * (this.maginL + 2)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
changScroll(scrollLeft) {
|
||||||
|
if (!this.radix)
|
||||||
|
this.$emit(
|
||||||
|
"scroll",
|
||||||
|
Math.round(
|
||||||
|
scrollLeft / (this.maginL + 2) + this.scrollStart
|
||||||
|
)
|
||||||
|
);
|
||||||
|
clearTimeout(this.timer);
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
let scrollLen = (
|
||||||
|
Number(scrollLeft / (this.maginL + 2)) + this.scrollStart
|
||||||
|
).toFixed(1);
|
||||||
|
console.log(typeof scrollLen);
|
||||||
|
this.scrollLeftInit =
|
||||||
|
(scrollLen - this.scrollStart) * (this.maginL + 2);
|
||||||
|
this.$emit("scroll", scrollLen);
|
||||||
|
|
||||||
|
// //#region
|
||||||
|
// if (this.radix) {
|
||||||
|
// if (
|
||||||
|
// scrollLen > 10 &&
|
||||||
|
// (scrollLen % 5 != 0 || scrollLen % 10 != 0)
|
||||||
|
// ) {
|
||||||
|
// let strNum = Number(
|
||||||
|
// scrollLen
|
||||||
|
// .toString()
|
||||||
|
// .charAt(scrollLen.toString().length - 1)
|
||||||
|
// );
|
||||||
|
// if (strNum <= 3) {
|
||||||
|
// scrollLen -= strNum;
|
||||||
|
// } else if (strNum > 7) {
|
||||||
|
// scrollLen += 10 - strNum;
|
||||||
|
// } else if (strNum > 3 && strNum < 5) {
|
||||||
|
// scrollLen += 5 - strNum;
|
||||||
|
// } else if (strNum <= 7) {
|
||||||
|
// scrollLen += 5 - strNum;
|
||||||
|
// }
|
||||||
|
// console.log(strNum);
|
||||||
|
// }
|
||||||
|
// this.scrollLeftInit =
|
||||||
|
// (scrollLen - this.scrollStart) * (this.maginL + 2);
|
||||||
|
// this.$emit("scroll", scrollLen * 0.1);
|
||||||
|
// } else {
|
||||||
|
// this.scrollLeftInit =
|
||||||
|
// (scrollLen - this.scrollStart) * (this.maginL + 2);
|
||||||
|
// this.$emit("scroll", scrollLen);
|
||||||
|
// }
|
||||||
|
////#endregion
|
||||||
|
}, 50);
|
||||||
|
},
|
||||||
|
upper: function (e) {
|
||||||
|
setTimeout(() => {
|
||||||
|
// console.log('----' + this.scrollStart)
|
||||||
|
// this.$emit('scroll', this.radix ? this.scrollStart * 0.1 : this.scrollStart);
|
||||||
|
}, 50);
|
||||||
|
},
|
||||||
|
lower: function (e) {
|
||||||
|
setTimeout(() => {
|
||||||
|
// console.log('v----' + this.scrollStart)
|
||||||
|
// this.$emit('scroll', this.radix ? this.scrollStart * 0.1 : this.scrollStart);
|
||||||
|
}, 50);
|
||||||
|
},
|
||||||
|
scroll: function (e) {
|
||||||
|
this.changScroll(e.detail.scrollLeft);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
// * {
|
||||||
|
// touch-action: none;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.scroll-choose-all {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 100px;
|
||||||
|
background: rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
margin: 10px 0;
|
||||||
|
// border-bottom: 1px solid #ccc;
|
||||||
|
// border-top: 1px solid #ccc;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sanjiao {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
border-right: 25rpx solid transparent;
|
||||||
|
border-left: 25rpx solid transparent;
|
||||||
|
border-top: 25rpx solid $main-color;
|
||||||
|
position: relative;
|
||||||
|
left: -22rpx;
|
||||||
|
top: 18rpx;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middleLine {
|
||||||
|
position: absolute;
|
||||||
|
width: 2px;
|
||||||
|
height: 32px;
|
||||||
|
background: $main-color;
|
||||||
|
left: 375rpx;
|
||||||
|
margin-left: -5rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middleLine:after {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 50px solid transparent;
|
||||||
|
border-right: 50px solid transparent;
|
||||||
|
border-bottom: 100px solid $main-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-choose {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 100px;
|
||||||
|
|
||||||
|
.scroll-con {
|
||||||
|
height: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.topLine {
|
||||||
|
height: 70px;
|
||||||
|
padding: 0 372rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomNum {
|
||||||
|
height: 70px;
|
||||||
|
padding: 0 0 0 372rpx;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
// display: flex;
|
||||||
|
// flex-wrap: nowrap;
|
||||||
|
.allNum {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
// width: 70px;
|
||||||
|
// left: -35px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.allLine {
|
||||||
|
display: inline-block;
|
||||||
|
// margin-right: 5px;
|
||||||
|
width: 2px;
|
||||||
|
// background: #999;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.allLine:last-child {
|
||||||
|
margin-right: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LLine {
|
||||||
|
height: 60px;
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MLine {
|
||||||
|
height: 50px;
|
||||||
|
top: -10px;
|
||||||
|
background-color: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SLine {
|
||||||
|
height: 35px;
|
||||||
|
top: -15px;
|
||||||
|
background: #ebebeb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
package.json
Normal file
11
package.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"id": "sapling-vue-scale",
|
||||||
|
"name": "vue语法css实现刻度尺",
|
||||||
|
"version": "1.0.2",
|
||||||
|
"description": "vue语法css实现刻度尺",
|
||||||
|
"keywords": [
|
||||||
|
"vue",
|
||||||
|
"刻度尺",
|
||||||
|
"小程序"
|
||||||
|
]
|
||||||
|
}
|
||||||
302
pages.json
302
pages.json
@@ -1,109 +1,215 @@
|
|||||||
{
|
{
|
||||||
"pages": [{
|
"pages": [
|
||||||
"path": "pages/index/index",
|
{
|
||||||
"name": "Index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"name": "Index",
|
||||||
"navigationBarTitleText": "发现",
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationBarTitleText": "发现",
|
||||||
}
|
"navigationStyle": "custom"
|
||||||
}, {
|
}
|
||||||
"path": "pages/record/index",
|
},
|
||||||
"name": "Record",
|
{
|
||||||
"style": {
|
"path": "pages/record/index",
|
||||||
"navigationBarTitleText": "记录",
|
"name": "Record",
|
||||||
"navigationStyle": "custom"
|
"style": {
|
||||||
}
|
"navigationBarTitleText": "记录",
|
||||||
}, {
|
"navigationStyle": "custom"
|
||||||
"path": "pages/store/index",
|
}
|
||||||
"name": "Store",
|
},
|
||||||
"style": {
|
{
|
||||||
"navigationBarTitleText": "健康生活",
|
"path": "pages/record/drink",
|
||||||
"app-plus": {
|
"name": "Drink",
|
||||||
"titleNView": {
|
"style": {
|
||||||
"backgroundColor": "#FFFFFF",
|
"navigationBarTitleText": "记录喝水",
|
||||||
"titleSize": "16",
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
"buttons": [{
|
"navigationBarTextStyle": "white"
|
||||||
"float": "right",
|
}
|
||||||
"text": "\ue603",
|
},
|
||||||
"fontSrc": "/static/iconfont.ttf",
|
{
|
||||||
"color": "#666",
|
"path": "pages/record/weight",
|
||||||
"fontSize": "20px"
|
"name": "Weight",
|
||||||
}]
|
"style": {
|
||||||
|
"navigationBarTitleText": "记录体重",
|
||||||
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/record/foods",
|
||||||
|
"name": "RecordFoods",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "食物记录",
|
||||||
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/record/addFoods",
|
||||||
|
"name": "AddFoods",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "添加食物",
|
||||||
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/evaluation/list",
|
||||||
|
"name": "EvaluationList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "评测列表",
|
||||||
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/evaluation/introduce",
|
||||||
|
"name": "EvaluationIntroduce",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "评测题目",
|
||||||
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/evaluation/result",
|
||||||
|
"name": "EvaluationResult",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "评测结果",
|
||||||
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/vip/foods",
|
||||||
|
"name": "VipFoods",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "会员专享食谱",
|
||||||
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/vip/nutritionHelper",
|
||||||
|
"name": "NutritionHelper",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "营养小助手",
|
||||||
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/essentialInfo/index",
|
||||||
|
"name": "EssentialInfo",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "完善信息",
|
||||||
|
"navigationBarBackgroundColor": "#34CE98",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/store/index",
|
||||||
|
"name": "Store",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "健康生活",
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": {
|
||||||
|
"backgroundColor": "#FFFFFF",
|
||||||
|
"titleSize": "16",
|
||||||
|
"buttons": [
|
||||||
|
{
|
||||||
|
"float": "right",
|
||||||
|
"text": "\ue603",
|
||||||
|
"fontSrc": "/static/iconfont.ttf",
|
||||||
|
"color": "#666",
|
||||||
|
"fontSize": "20px"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}, {
|
{
|
||||||
"path": "pages/user/index",
|
"path": "pages/user/index",
|
||||||
"name": "User",
|
"name": "User",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的",
|
"navigationBarTitleText": "我的",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
}, {
|
},
|
||||||
"path": "pages/auth/auth",
|
{
|
||||||
"name": "Auth",
|
"path": "pages/auth/auth",
|
||||||
"style": {
|
"name": "Auth",
|
||||||
"navigationBarTitleText": "登录"
|
"style": {
|
||||||
}
|
"navigationBarTitleText": "登录"
|
||||||
}, {
|
}
|
||||||
"path": "pages/store/goods",
|
},
|
||||||
"name": "StoreGoods",
|
{
|
||||||
"style": {
|
"path": "pages/store/goods",
|
||||||
"navigationStyle": "custom",
|
"name": "StoreGoods",
|
||||||
"navigationBarTitleText": "详情",
|
"style": {
|
||||||
"app-plus": {
|
"navigationStyle": "custom",
|
||||||
"titleNView": {
|
"navigationBarTitleText": "详情",
|
||||||
"backgroundColor": "#FFFFFF",
|
"app-plus": {
|
||||||
"type": "transparent"
|
"titleNView": {
|
||||||
|
"backgroundColor": "#FFFFFF",
|
||||||
|
"type": "transparent"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/store/buy",
|
||||||
|
"name": "StoreBuy",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "确认订单",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/order/index",
|
||||||
|
"name": "Order",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "订单",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/order/details",
|
||||||
|
"name": "OrderDetails",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "订单详情",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/address/index",
|
||||||
|
"name": "Address",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "地址"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/address/edit",
|
||||||
|
"name": "AddressEdit",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "编辑",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/pay/pay",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "收银台",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, {
|
],
|
||||||
"path": "pages/store/buy",
|
|
||||||
"name": "StoreBuy",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "确认订单",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/order/index",
|
|
||||||
"name": "Order",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "订单",
|
|
||||||
"navigationBarBackgroundColor": "#FFFFFF",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/order/details",
|
|
||||||
"name": "OrderDetails",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "订单详情",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/address/index",
|
|
||||||
"name": "Address",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "地址"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/address/edit",
|
|
||||||
"name": "AddressEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "编辑",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/pay/pay",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "收银台",
|
|
||||||
"navigationBarBackgroundColor": "#FFFFFF"
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"borderStyle": "white",
|
"borderStyle": "white",
|
||||||
"selectedColor": "#34CE98",
|
"selectedColor": "#34CE98",
|
||||||
"list": [{
|
"list": [
|
||||||
|
{
|
||||||
"iconPath": "static/tabBar/tabBar_00.png",
|
"iconPath": "static/tabBar/tabBar_00.png",
|
||||||
"selectedIconPath": "static/tabBar/tabBar_show_00.png",
|
"selectedIconPath": "static/tabBar/tabBar_show_00.png",
|
||||||
"pagePath": "pages/index/index",
|
"pagePath": "pages/index/index",
|
||||||
@@ -139,4 +245,4 @@
|
|||||||
"easycom": {
|
"easycom": {
|
||||||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
679
pages/essentialInfo/index.vue
Normal file
679
pages/essentialInfo/index.vue
Normal file
@@ -0,0 +1,679 @@
|
|||||||
|
|
||||||
|
<!--
|
||||||
|
* @Description:
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-10 10:29:17
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-10 17:23:37
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="info">
|
||||||
|
<!-- 进度 -->
|
||||||
|
<view class="plan">
|
||||||
|
<view class="plan-1">
|
||||||
|
<span>基本信息</span>
|
||||||
|
<u-line-progress
|
||||||
|
:percentage="percentplan1"
|
||||||
|
activeColor="#34ce98"
|
||||||
|
class="line-progress"
|
||||||
|
:showText="false"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="plan-2">
|
||||||
|
<span>健康目标</span>
|
||||||
|
<u-line-progress
|
||||||
|
:percentage="percentplan2"
|
||||||
|
activeColor="#34ce98"
|
||||||
|
width="200rpx"
|
||||||
|
class="line-progress"
|
||||||
|
:showText="false"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="plan-3">
|
||||||
|
<span>行为习惯</span>
|
||||||
|
<u-line-progress
|
||||||
|
:percentage="percentplan3"
|
||||||
|
activeColor="#34ce98"
|
||||||
|
width="200rpx"
|
||||||
|
class="line-progress"
|
||||||
|
:showText="false"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 进度1 基本信息 -->
|
||||||
|
<view>
|
||||||
|
<!-- 进度1 基本信息页面展示 性别 -->
|
||||||
|
<view
|
||||||
|
class="plan-content"
|
||||||
|
v-if="sexShow"
|
||||||
|
>
|
||||||
|
<view class="info-des">生理性别和激素会影响我们的身体代谢食物的方式</view>
|
||||||
|
<view class="info-title">您的性别是？</view>
|
||||||
|
<view class="sex">
|
||||||
|
<view
|
||||||
|
class="sex-item"
|
||||||
|
@click="clickSex(1)"
|
||||||
|
>
|
||||||
|
<u-image
|
||||||
|
class="sex-item-avatar"
|
||||||
|
width="150rpx"
|
||||||
|
height="150rpx"
|
||||||
|
:src="require('../../static/imgs/avatar-1.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>男性
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="sex-item"
|
||||||
|
@click="clickSex(2)"
|
||||||
|
>
|
||||||
|
<u-image
|
||||||
|
class="sex-item-avatar"
|
||||||
|
width="150rpx"
|
||||||
|
height="150rpx"
|
||||||
|
:src="require('../../static/imgs/avatar-0.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>女性
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 进度1 基本信息页面展示 年龄 -->
|
||||||
|
<view
|
||||||
|
class="plan-content"
|
||||||
|
v-if="ageShow"
|
||||||
|
>
|
||||||
|
<u-image
|
||||||
|
class="sex-item-avatar"
|
||||||
|
width="100rpx"
|
||||||
|
height="100rpx"
|
||||||
|
:src="require('../../static/imgs/avatar-1.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>
|
||||||
|
<view class="age">
|
||||||
|
<view class="info-title">你的出生日期是？</view>
|
||||||
|
<view
|
||||||
|
class="year"
|
||||||
|
@change="dateShow = true"
|
||||||
|
>{{age}}</view>
|
||||||
|
<u-datetime-picker
|
||||||
|
confirmColor="#34ce98"
|
||||||
|
ref="datetimePicker"
|
||||||
|
v-model="age"
|
||||||
|
mode="date"
|
||||||
|
:show="dateShow"
|
||||||
|
:formatter="formatter"
|
||||||
|
:minDate="-302688000"
|
||||||
|
:maxDate="maxDate"
|
||||||
|
:closeOnClickOverlay="true"
|
||||||
|
@confirm="confirmAge"
|
||||||
|
@cancel="camcelAge"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 进度1 基本信息页面展示 身高体重 -->
|
||||||
|
<view
|
||||||
|
class="plan-content weight-content"
|
||||||
|
v-if="heightWeightShow"
|
||||||
|
>
|
||||||
|
<u-image
|
||||||
|
class="sex-item-avatar"
|
||||||
|
width="100rpx"
|
||||||
|
height="100rpx"
|
||||||
|
:src="require('../../static/imgs/avatar-1.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>
|
||||||
|
<view class="info-des">身高体重信息对健康信息有重要参考价值</view>
|
||||||
|
<view class="info-title">您的身高是？</view>
|
||||||
|
<!-- -->
|
||||||
|
<view class="weight">
|
||||||
|
<view class='count'><span>{{heightU}}</span>厘米</view>
|
||||||
|
<vue-scale
|
||||||
|
:min="10"
|
||||||
|
:max="100"
|
||||||
|
:int="false"
|
||||||
|
:single="10"
|
||||||
|
:h="80"
|
||||||
|
:styles="styles"
|
||||||
|
@scroll="scrollHeight"
|
||||||
|
:scrollLeft="160"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="
|
||||||
|
info-title">您的体重是？
|
||||||
|
</view>
|
||||||
|
<view class="weight">
|
||||||
|
<view class='count'><span>{{weightU}}</span>公斤</view>
|
||||||
|
<vue-scale
|
||||||
|
:min="10"
|
||||||
|
:max="100"
|
||||||
|
:int="false"
|
||||||
|
:single="10"
|
||||||
|
:h="80"
|
||||||
|
:styles="styles"
|
||||||
|
@scroll="scrollWeight"
|
||||||
|
:scrollLeft="55"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="pre-next">
|
||||||
|
<view
|
||||||
|
class="pro"
|
||||||
|
@click="weightClick(1)"
|
||||||
|
>上一步</view>
|
||||||
|
<view
|
||||||
|
class="next"
|
||||||
|
@click="weightClick(2)"
|
||||||
|
>下一步</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 进度2 健康目标 -->
|
||||||
|
<view>
|
||||||
|
<!-- 减脂类型 -->
|
||||||
|
<view
|
||||||
|
v-if="targetShow"
|
||||||
|
class="plan-content target-content"
|
||||||
|
>
|
||||||
|
<u-image
|
||||||
|
class="sex-item-avatar"
|
||||||
|
width="100rpx"
|
||||||
|
height="100rpx"
|
||||||
|
:src="require('../../static/imgs/avatar-1.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>
|
||||||
|
<view class="info-title">您的目标是？</view>
|
||||||
|
<view class="target-type">
|
||||||
|
<view class="target-type-item">
|
||||||
|
<u-image
|
||||||
|
class="target-img"
|
||||||
|
width="160rpx"
|
||||||
|
height="160rpx"
|
||||||
|
@click="activedTarget ='1'"
|
||||||
|
:src="activedTarget === '1'?require('../../static/imgs/ic-w-s.png'):require('../../static/imgs/ic-w-n.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>减肥
|
||||||
|
</view>
|
||||||
|
<view class="target-type-item">
|
||||||
|
<u-image
|
||||||
|
class="target-img"
|
||||||
|
width="160rpx"
|
||||||
|
height="160rpx"
|
||||||
|
@click="activedTarget ='2'"
|
||||||
|
:src="activedTarget === '2'?require('../../static/imgs/ic-b-s.png'):require('../../static/imgs/ic-b-n.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>保持体重
|
||||||
|
</view>
|
||||||
|
<view class="target-type-item">
|
||||||
|
<u-image
|
||||||
|
class="target-img"
|
||||||
|
width="160rpx"
|
||||||
|
height="160rpx"
|
||||||
|
@click="activedTarget ='3'"
|
||||||
|
:src="activedTarget === '3'?require('../../static/imgs/ic-m-s.png'):require('../../static/imgs/ic-m-n.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>增肌
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pre-next">
|
||||||
|
<view
|
||||||
|
class="pro"
|
||||||
|
@click="targetClick(1)"
|
||||||
|
>上一步</view>
|
||||||
|
<view
|
||||||
|
class="next"
|
||||||
|
@click="targetClick(2)"
|
||||||
|
>下一步</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 减脂体重 -->
|
||||||
|
<view
|
||||||
|
v-if="targetWeightShow"
|
||||||
|
class="plan-content target-content"
|
||||||
|
>
|
||||||
|
<u-image
|
||||||
|
class="sex-item-avatar"
|
||||||
|
width="100rpx"
|
||||||
|
height="100rpx"
|
||||||
|
:src="require('../../static/imgs/avatar-1.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>
|
||||||
|
<view class="info-title">您的打算减脂多少？</view>
|
||||||
|
<view class="target-type">
|
||||||
|
<view class="target-type-item">
|
||||||
|
<view class='count'><span>{{weightTargetU}}</span>公斤</view>
|
||||||
|
<vue-scale
|
||||||
|
:min="10"
|
||||||
|
:max="100"
|
||||||
|
:int="false"
|
||||||
|
:single="10"
|
||||||
|
:h="80"
|
||||||
|
:styles="styles"
|
||||||
|
@scroll="scrollTargetWeight"
|
||||||
|
:scrollLeft="50"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pre-next">
|
||||||
|
<view
|
||||||
|
class="pro"
|
||||||
|
@click="targetWeightClick(1)"
|
||||||
|
>上一步</view>
|
||||||
|
<view
|
||||||
|
class="next"
|
||||||
|
@click="targetWeightClick(2)"
|
||||||
|
>下一步</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 进度3 行为习惯 -->
|
||||||
|
|
||||||
|
<!-- 减脂类型 -->
|
||||||
|
<view
|
||||||
|
v-if="behaviorShow"
|
||||||
|
class="plan-content target-content"
|
||||||
|
>
|
||||||
|
<u-image
|
||||||
|
class="sex-item-avatar"
|
||||||
|
width="100rpx"
|
||||||
|
height="100rpx"
|
||||||
|
:src="require('../../static/imgs/avatar-1.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>
|
||||||
|
<view class="info-title">您的运动量是？</view>
|
||||||
|
<view class="target-type">
|
||||||
|
<view class="target-type-item">
|
||||||
|
<u-image
|
||||||
|
class="target-img"
|
||||||
|
width="120rpx"
|
||||||
|
height="120rpx"
|
||||||
|
@click="activedbehaviarTarget ='1'"
|
||||||
|
:src="activedbehaviarTarget === '1'?require('../../static/imgs/ic-w-01.png'):require('../../static/imgs/ic-w-02.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>久坐不动
|
||||||
|
</view>
|
||||||
|
<view class="target-type-item">
|
||||||
|
<u-image
|
||||||
|
class="target-img"
|
||||||
|
width="120rpx"
|
||||||
|
height="120rpx"
|
||||||
|
@click="activedbehaviarTarget ='2'"
|
||||||
|
:src="activedbehaviarTarget === '2'?require('../../static/imgs/ic-w-03.png'):require('../../static/imgs/ic-w-04.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>少量运动
|
||||||
|
</view>
|
||||||
|
<view class="target-type-item">
|
||||||
|
<u-image
|
||||||
|
class="target-img"
|
||||||
|
width="120rpx"
|
||||||
|
height="120rpx"
|
||||||
|
@click="activedbehaviarTarget ='3'"
|
||||||
|
:src="activedbehaviarTarget === '3'?require('../../static/imgs/ic-w-05.png'):require('../../static/imgs/ic-w-06.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>中等运动量
|
||||||
|
</view>
|
||||||
|
<view class="target-type-item">
|
||||||
|
<u-image
|
||||||
|
class="target-img"
|
||||||
|
width="120rpx"
|
||||||
|
height="120rpx"
|
||||||
|
@click="activedbehaviarTarget ='4'"
|
||||||
|
:src="activedbehaviarTarget === '4'?require('../../static/imgs/ic-w-07.png'):require('../../static/imgs/ic-w-08.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>超强度运动
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pre-next">
|
||||||
|
<view
|
||||||
|
class="pro"
|
||||||
|
@click="targetBehaviorClick(1)"
|
||||||
|
>上一步</view>
|
||||||
|
<view
|
||||||
|
class="next"
|
||||||
|
@click="targetBehaviorClick(2)"
|
||||||
|
>立即创建</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-toast ref="uToast"></u-toast>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import vueScale from "@/components/vueScale"; // 体重标尺
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
vueScale,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 第一部分基本信息 start
|
||||||
|
//#region
|
||||||
|
percentplan1: 0,
|
||||||
|
// 性别--start
|
||||||
|
sex: "1", //1是男生2是女生
|
||||||
|
sexShow: true, // 性别展示
|
||||||
|
// 性别 -- end
|
||||||
|
// 年龄 -- start
|
||||||
|
age: Date.parse(new Date()), // 年龄默认是当前时间
|
||||||
|
maxDate: Date.parse(new Date()), // 最大年龄为当前年月日
|
||||||
|
dateShow: false, // 显示日期
|
||||||
|
ageShow: false, // 显示年龄模块是否显示
|
||||||
|
// 年龄 -- end
|
||||||
|
// 身高体重 -- start
|
||||||
|
heightWeightShow: false, // 身高体重模块展示
|
||||||
|
weight: 11,
|
||||||
|
height: 180,
|
||||||
|
styles: {
|
||||||
|
line: "#dbdbdb",
|
||||||
|
bginner: "#fbfbfb",
|
||||||
|
bgoutside: "#ffffff",
|
||||||
|
font: "#404040",
|
||||||
|
fontColor: "#404040",
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
weightU: "", //体重
|
||||||
|
heightU: "", // 身高
|
||||||
|
// 身高体重 -- end
|
||||||
|
//#endregion
|
||||||
|
// 第一部分基本信息 end
|
||||||
|
// 第二部分
|
||||||
|
//#region
|
||||||
|
percentplan2: 0,
|
||||||
|
targetShow: false, // 减脂目标模块 是否显示减脂类型
|
||||||
|
activedTarget: "", // 减脂
|
||||||
|
targetWeightShow: false, // 目标体重页面展示
|
||||||
|
weightTargetU: 50,
|
||||||
|
//#endregion
|
||||||
|
behaviorShow: false, // 默认行为习惯页面不展示
|
||||||
|
percentplan3: 0,
|
||||||
|
activedbehaviarTarget: "", // 默认没有任何运动量
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//性别----------- 选择性别 1男2女
|
||||||
|
clickSex(sex) {
|
||||||
|
this.percentplan1 = 0;
|
||||||
|
this.sex = sex;
|
||||||
|
this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33);
|
||||||
|
this.sexShow = false;
|
||||||
|
this.ageShow = true;
|
||||||
|
this.dateShow = true;
|
||||||
|
console.log(this.percentplan1, this.sex);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 年龄-------------确认选择了出生年月日
|
||||||
|
confirmAge(e) {
|
||||||
|
this.age = e.value;
|
||||||
|
this.ageShow = false; // 年龄页面弹窗不显示
|
||||||
|
this.dateShow = false; // 关闭时间弹窗
|
||||||
|
this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33); // 增加进度
|
||||||
|
this.heightWeightShow = true; // 展示身高体重模块
|
||||||
|
},
|
||||||
|
// 年龄 ----- 取消选择年龄
|
||||||
|
camcelAge() {
|
||||||
|
this.ageShow = false; // // 年龄页面弹窗不显示
|
||||||
|
this.dataShow = false; // 关闭时间弹窗
|
||||||
|
this.percentplan1 = 0; // 进度为0
|
||||||
|
this.sexShow = true; // 显示性别页面
|
||||||
|
},
|
||||||
|
//年龄------------- 过滤出生年月日
|
||||||
|
formatter(type, value) {
|
||||||
|
if (type === "year") {
|
||||||
|
return `${value}年`;
|
||||||
|
}
|
||||||
|
if (type === "month") {
|
||||||
|
return `${value}月`;
|
||||||
|
}
|
||||||
|
if (type === "day") {
|
||||||
|
return `${value}日`;
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
// 体重---------标尺滚动
|
||||||
|
scrollWeight(msg) {
|
||||||
|
this.weightU = msg;
|
||||||
|
},
|
||||||
|
// 体重---------标尺滚动
|
||||||
|
scrollHeight(msg) {
|
||||||
|
this.heightU = msg;
|
||||||
|
},
|
||||||
|
// 体重 ------------ 点击 1 上一页 2 下一页
|
||||||
|
weightClick(type) {
|
||||||
|
if (type === 1) {
|
||||||
|
this.percentplan1 = 33.33;
|
||||||
|
this.heightWeightShow = false; // 关闭当前体重页面
|
||||||
|
this.ageShow = true;
|
||||||
|
this.dateShow = true;
|
||||||
|
} else {
|
||||||
|
this.percentplan1 = 100; // 第一个进度为100
|
||||||
|
this.heightWeightShow = false; // 关闭当前体重页面
|
||||||
|
this.targetShow = true; // 目标页面展示
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 目标 ------------点击 1上一页 2 下一页
|
||||||
|
targetClick(type) {
|
||||||
|
if (type === 1) {
|
||||||
|
console.log(1);
|
||||||
|
this.percentplan1 = 66.66;
|
||||||
|
this.heightWeightShow = true; // 打开体重身高页面
|
||||||
|
this.targetShow = false; // 关闭目标页面 减重 塑性 增肌
|
||||||
|
this.percentplan2 = 0;
|
||||||
|
} else {
|
||||||
|
console.log(2);
|
||||||
|
this.percentplan2 = 50;
|
||||||
|
this.targetShow = false; // 目标页面不展示 展示下一面目标体重
|
||||||
|
this.targetWeightShow = true; // 目标体重页面展示
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//目标体重-------------标尺滚动
|
||||||
|
scrollTargetWeight(msg) {
|
||||||
|
this.weightTargetU = msg;
|
||||||
|
},
|
||||||
|
// 目标 体重的 --------- 1上一页 2 下一页
|
||||||
|
targetWeightClick(type) {
|
||||||
|
if (type === 1) {
|
||||||
|
console.log(1);
|
||||||
|
this.percentplan2 = 0;
|
||||||
|
this.targetShow = true; // 打开目标页面 减重 塑性 增肌
|
||||||
|
this.targetWeightShow = false; // 打开体重身高页面
|
||||||
|
} else {
|
||||||
|
console.log(2);
|
||||||
|
this.percentplan2 = 100;
|
||||||
|
this.targetWeightShow = false; // 隐藏目标体重页面
|
||||||
|
this.behaviorShow = true; // 打开行为习惯页面
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 目标 运动量--------- 1上一页 2 下一页
|
||||||
|
targetBehaviorClick(type) {
|
||||||
|
if (type === 1) {
|
||||||
|
console.log(1);
|
||||||
|
this.percentplan2 = 50;
|
||||||
|
this.targetWeightShow = true; // 目标体重页面展示
|
||||||
|
this.behaviorShow = false; // 关闭运动量选择页面
|
||||||
|
} else {
|
||||||
|
console.log(2);
|
||||||
|
|
||||||
|
console.log("创建成功了。。。");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
type: "success",
|
||||||
|
title: "创建成功",
|
||||||
|
message: "创建成功啦",
|
||||||
|
iconUrl:
|
||||||
|
"https://cdn.uviewui.com/uview/demo/toast/success.png",
|
||||||
|
complete() {
|
||||||
|
this.percentplan3 = 100;
|
||||||
|
this.behaviorShow = false; // 关闭运动量页面
|
||||||
|
uni.navigateBack({});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.info {
|
||||||
|
// 完善信息顶部进度条
|
||||||
|
.plan {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-color;
|
||||||
|
padding: $padding;
|
||||||
|
.plan-3,
|
||||||
|
.plan-1,
|
||||||
|
.plan-2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
span {
|
||||||
|
padding-bottom: $padding * 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.plan-2 {
|
||||||
|
margin: $margin;
|
||||||
|
}
|
||||||
|
.line-progress {
|
||||||
|
width: 180rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//展示主要内容部分
|
||||||
|
.plan-content {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 70vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.info-title {
|
||||||
|
font-size: $title-size + 10;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: $margin - 10;
|
||||||
|
}
|
||||||
|
.info-des {
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
margin-top: $margin;
|
||||||
|
}
|
||||||
|
// 性别
|
||||||
|
.sex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.sex-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: $margin * 3;
|
||||||
|
.sex-item-avatar {
|
||||||
|
box-shadow: 0 0 10rpx 4rpx
|
||||||
|
rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//年龄
|
||||||
|
.age {
|
||||||
|
padding-top: $padding * 0.6;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.year {
|
||||||
|
font-size: $title-size * 1.9;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $main-color;
|
||||||
|
margin-top: $margin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 体重
|
||||||
|
}
|
||||||
|
// 体重身高模块展示
|
||||||
|
.count {
|
||||||
|
color: $main-color;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
margin-bottom: $margin * 0.1;
|
||||||
|
font-size: $title-size + 2;
|
||||||
|
span {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size * 2.2;
|
||||||
|
margin-right: $margin * 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pre-next {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
view {
|
||||||
|
background-color: rgba($color: $main-color, $alpha: 0.5);
|
||||||
|
color: $text-color;
|
||||||
|
font-size: $title-size;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: $padding * 0.6 $padding * 3;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin: $margin;
|
||||||
|
}
|
||||||
|
.next {
|
||||||
|
background-color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 健康目标模块展示
|
||||||
|
.target-content {
|
||||||
|
.target-type {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.target-type-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray-m;
|
||||||
|
.target-img {
|
||||||
|
background: #ececec;
|
||||||
|
border-radius: $radius;
|
||||||
|
margin: $margin $margin * 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
132
pages/evaluation/introduce.vue
Normal file
132
pages/evaluation/introduce.vue
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:测评前置,用于测试介绍展示
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-05 09:16:10
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-05 13:58:47
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="introduce">
|
||||||
|
<view
|
||||||
|
class="intro-history"
|
||||||
|
@click="$Router.push({name:'EvaluationResult'})"
|
||||||
|
>测评记录</view>
|
||||||
|
<view class="intro-content">
|
||||||
|
<view class="intro-title">肌肤年龄测评</view>
|
||||||
|
<u-read-more
|
||||||
|
class="intro-des"
|
||||||
|
:toggle="true"
|
||||||
|
showHeight="140"
|
||||||
|
ref="uReadMore"
|
||||||
|
:shadowStyle="shadowStyle"
|
||||||
|
color='#34ce98'
|
||||||
|
textIndent="0"
|
||||||
|
>
|
||||||
|
<rich-text :nodes="content"></rich-text>
|
||||||
|
</u-read-more>
|
||||||
|
<u-image
|
||||||
|
class="intro-img"
|
||||||
|
width="100%"
|
||||||
|
radius="20rpx"
|
||||||
|
height="700rpx"
|
||||||
|
:src="require('../../static/imgs/indro.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
/>
|
||||||
|
<view class="answer">开始测评</view>
|
||||||
|
</view>
|
||||||
|
<view class="remark">
|
||||||
|
本评测会收集孕产情况、健康状况、家族病史、用药情况信息，用于开展相关评测，为你生成分析报告。
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
content: `本测试预计完成时间5-8分钟
|
||||||
|
<br/>
|
||||||
|
—
|
||||||
|
<br/>
|
||||||
|
适用于18-65岁，存在亚健康或尿酸偏高人群`,
|
||||||
|
shadowStyle: {
|
||||||
|
backgroundImage: "none",
|
||||||
|
paddingTop: "0",
|
||||||
|
marginTop: "20rpx",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.introduce {
|
||||||
|
background-color: $main-color;
|
||||||
|
min-height: 100vh;
|
||||||
|
.intro-history {
|
||||||
|
padding: $padding * 1.5 $padding;
|
||||||
|
color: $window-color;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
// 测评展示
|
||||||
|
.intro-content {
|
||||||
|
background: rgba($color: #fff, $alpha: 1);
|
||||||
|
min-height: 30vh;
|
||||||
|
padding: 0 $padding;
|
||||||
|
margin: $margin * 1.5;
|
||||||
|
border-radius: $radius;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
// 标题
|
||||||
|
.intro-title {
|
||||||
|
font-size: $title-size * 1.8;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
position: relative;
|
||||||
|
top: -40rpx;
|
||||||
|
}
|
||||||
|
// 介绍
|
||||||
|
.intro-des {
|
||||||
|
line-height: $title-size * 1.8;
|
||||||
|
color: $text-color;
|
||||||
|
position: relative;
|
||||||
|
top: -10rpx;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
// 图片
|
||||||
|
.intro-img {
|
||||||
|
margin-top: $padding * 0.8;
|
||||||
|
}
|
||||||
|
// 开始测评
|
||||||
|
.answer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -30rpx;
|
||||||
|
width: 400rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
left: 50%;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba($color: #fff, $alpha: 0.94);
|
||||||
|
margin-left: -200rpx;
|
||||||
|
border-radius: $radius-m * 4;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
font-size: $title-size-m + 6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 备注信息
|
||||||
|
.remark {
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size - 6;
|
||||||
|
padding: $padding * 2 $padding;
|
||||||
|
line-height: $title-size * 1.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
186
pages/evaluation/list.vue
Normal file
186
pages/evaluation/list.vue
Normal file
@@ -0,0 +1,186 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:用于展示评测列表，带分页加载更多~
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-05 09:13:53
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-05 14:07:11
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="evaluation-list ">
|
||||||
|
<view
|
||||||
|
class="evaluation-item"
|
||||||
|
v-for="(item,index) in evalList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<!-- 评测列表主要内容 标题 图片 描述 -->
|
||||||
|
<view class="--content">
|
||||||
|
<u-image
|
||||||
|
class="content-img"
|
||||||
|
width="170rpx"
|
||||||
|
height="170rpx"
|
||||||
|
radius="20rpx"
|
||||||
|
:src="require('../../static/imgs/test.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
/>
|
||||||
|
<view class="title-des">
|
||||||
|
<view class="title">抗衰护肤测评抗衰护肤测评抗衰护肤测评</view>
|
||||||
|
<view class="des">科学护肤，‘精准’防衰老，延缓</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分数 -->
|
||||||
|
<view
|
||||||
|
class="score"
|
||||||
|
v-if="index === 0"
|
||||||
|
><span>80</span>分</view>
|
||||||
|
|
||||||
|
<!-- 评测状态 -->
|
||||||
|
<view class="--status">
|
||||||
|
<!-- 已测试展示 状态-->
|
||||||
|
<view
|
||||||
|
class="status"
|
||||||
|
v-if="index === 0"
|
||||||
|
>
|
||||||
|
<span class="dian">·</span>今日最新完成
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="index === 0"
|
||||||
|
class="history"
|
||||||
|
@click="$Router.push({name:'EvaluationResult'})"
|
||||||
|
>
|
||||||
|
查看历史结果
|
||||||
|
</view>
|
||||||
|
<!-- 未测试展示 状态-->
|
||||||
|
<view
|
||||||
|
class="status"
|
||||||
|
v-if="index !== 0"
|
||||||
|
>
|
||||||
|
<span class="dian">·</span>
|
||||||
|
<span class="person">32828837</span>
|
||||||
|
人已测 | 约4~8分钟
|
||||||
|
</view>
|
||||||
|
<u-icon
|
||||||
|
name="arrow-right"
|
||||||
|
:color="index === 0?'#26a377':'#faa81a'"
|
||||||
|
size="14"
|
||||||
|
:bold="true"
|
||||||
|
:label="index === 0?'重新评测':'开始测评'"
|
||||||
|
labelPos="left"
|
||||||
|
labelSize="14"
|
||||||
|
space="1"
|
||||||
|
:labelColor="index === 0?'#26a377':'#faa81a'"
|
||||||
|
@click="$Router.push({name:'EvaluationIntroduce'})"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 没有更多 -->
|
||||||
|
<view class="no-more">没有更多~</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
evalList: 4,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 列表
|
||||||
|
.evaluation-item {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: $padding;
|
||||||
|
margin: $margin;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
border-radius: $radius;
|
||||||
|
position: relative;
|
||||||
|
// 评测列表主要内容
|
||||||
|
.--content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.content-img {
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
.title-des {
|
||||||
|
padding-left: $padding - 10;
|
||||||
|
width: 440rpx;
|
||||||
|
.title {
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 340rpx;
|
||||||
|
}
|
||||||
|
.des {
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $text-gray;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-top: $padding - 8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// .测试状态
|
||||||
|
.--status {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
padding-top: $padding;
|
||||||
|
.status {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.dian {
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
margin-right: $padding * 0.2;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.person {
|
||||||
|
color: #faa81a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.history {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 分数
|
||||||
|
.score {
|
||||||
|
font-size: $title-size-m - 2;
|
||||||
|
color: $text-gray-m;
|
||||||
|
position: absolute;
|
||||||
|
right: $padding;
|
||||||
|
top: $padding - 10;
|
||||||
|
span {
|
||||||
|
font-size: 50rpx;
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 没有更多
|
||||||
|
.no-more {
|
||||||
|
color: $uni-text-color-disable;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: $padding;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
279
pages/evaluation/result.vue
Normal file
279
pages/evaluation/result.vue
Normal file
@@ -0,0 +1,279 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:测评结果页面,用于展示测评结果内容
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-05 09:16:10
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-06 10:54:57
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="answer">
|
||||||
|
<!-- 头像 -->
|
||||||
|
<view class="user">
|
||||||
|
<view class="left">
|
||||||
|
<u-image
|
||||||
|
width="80rpx"
|
||||||
|
height="80rpx"
|
||||||
|
:src="require('../../static/imgs/indro.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>
|
||||||
|
<span class="name">Aimee·ZhangAimee·ZhangAimee·ZhangAimee·Zhang</span>
|
||||||
|
</view>
|
||||||
|
<view class="right">
|
||||||
|
<u-icon
|
||||||
|
name="arrow-right"
|
||||||
|
color="#34ce98"
|
||||||
|
size="14"
|
||||||
|
:bold="true"
|
||||||
|
label="重新评测"
|
||||||
|
labelPos="left"
|
||||||
|
labelSize="14"
|
||||||
|
labelColor="#34ce98"
|
||||||
|
space="1"
|
||||||
|
@click="$Router.push({name:'EvaluationIntroduce'})"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 皮肤年龄 -->
|
||||||
|
<view class="answer-item">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="title-content">
|
||||||
|
<view class="title">你的肌肤年龄为35岁</view>
|
||||||
|
<u-icon
|
||||||
|
name="share-square"
|
||||||
|
color="#333"
|
||||||
|
size="30"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<!-- 雷达图 -->
|
||||||
|
<view class="charts-box">
|
||||||
|
<view class="charts-box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="radar"
|
||||||
|
:chartData="chartData"
|
||||||
|
:loadingType="4"
|
||||||
|
background="none"
|
||||||
|
:tooltipShow="false"
|
||||||
|
:tapLegend="false"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 描述 -->
|
||||||
|
<view class="des">
|
||||||
|
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 建议改进 -->
|
||||||
|
<view class="answer-item">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="title-content">
|
||||||
|
<view class="title">建议从一下几个方面改进</view>
|
||||||
|
</view>
|
||||||
|
<block
|
||||||
|
v-for="(itme,index) in 3"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view class="title2">
|
||||||
|
<u-image
|
||||||
|
width="34rpx"
|
||||||
|
height="34rpx"
|
||||||
|
:src="require('../../static/icon/health.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
shape="circle"
|
||||||
|
/>
|
||||||
|
<span>严厉节食导致营养不良，内分泌紊乱</span>
|
||||||
|
</view>
|
||||||
|
<!-- 描述 -->
|
||||||
|
<view class="des">
|
||||||
|
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<!-- 营养建议 -->
|
||||||
|
<view class="answer-item">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="title-content">
|
||||||
|
<view class="title">营养建议</view>
|
||||||
|
</view>
|
||||||
|
<block
|
||||||
|
v-for="(item,index) in 3"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view class="title2">
|
||||||
|
<span>{{item}}. 低Gi</span>
|
||||||
|
</view>
|
||||||
|
<!-- 描述 -->
|
||||||
|
<view class="des">
|
||||||
|
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<!-- 更多 -->
|
||||||
|
<view class="answer-item">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="title-content">
|
||||||
|
<view class="title">更多护肤知识</view>
|
||||||
|
<u-icon
|
||||||
|
name="arrow-right"
|
||||||
|
color="#333"
|
||||||
|
size="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<!-- 横向滚动推荐 -->
|
||||||
|
<scroll-view
|
||||||
|
class="scroll-view_H"
|
||||||
|
scroll-x="true"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-for="(item,index) in 6"
|
||||||
|
:key="index"
|
||||||
|
id="demo1"
|
||||||
|
class="scroll-view-item_H"
|
||||||
|
>
|
||||||
|
<u-image
|
||||||
|
width="180rpx"
|
||||||
|
height="180rpx"
|
||||||
|
:src="require('../../static/imgs/indro.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
radius="4"
|
||||||
|
/>
|
||||||
|
<view class="title">{{item}}正确洗脸</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartData: {
|
||||||
|
categories: [
|
||||||
|
"餐饮营养",
|
||||||
|
"面部肌肤活力",
|
||||||
|
"洗护习惯",
|
||||||
|
"生活方式",
|
||||||
|
"皮肤抵抗力",
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [99, 34, 100, 45, 17, 92],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.answer {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
|
||||||
|
// 用户头像
|
||||||
|
.user {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: $padding;
|
||||||
|
border-bottom: solid 1rpx #f7f7f7;
|
||||||
|
margin-bottom: $margin * 1.5;
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
.name {
|
||||||
|
padding-left: $padding;
|
||||||
|
width: 320rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: $text-color;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
border: solid 1rpx rgba($color: $main-color, $alpha: 0.6);
|
||||||
|
padding: 10rpx $padding * 0.4 10rpx $padding * 0.7;
|
||||||
|
border-radius: $padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 展示列表
|
||||||
|
.answer-item {
|
||||||
|
background: rgba($color: #fff, $alpha: 1);
|
||||||
|
padding: $padding * 1.3 $padding;
|
||||||
|
margin: $margin;
|
||||||
|
border-radius: $radius;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
//标题
|
||||||
|
.title-content {
|
||||||
|
font-size: $title-size + 6;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.title {
|
||||||
|
color: $text-color;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 描述
|
||||||
|
.des {
|
||||||
|
font-size: $title-size - 4;
|
||||||
|
color: $text-color;
|
||||||
|
line-height: $title-size * 2 - 18;
|
||||||
|
}
|
||||||
|
// 雷达图
|
||||||
|
.charts-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 400rpx;
|
||||||
|
margin: $margin 0;
|
||||||
|
}
|
||||||
|
//二级标题
|
||||||
|
.title2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
span {
|
||||||
|
font-size: $title-size-m + 2;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: $margin * 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 横向滚动
|
||||||
|
.scroll-view_H {
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: $radius;
|
||||||
|
.scroll-view-item_H {
|
||||||
|
display: inline-block;
|
||||||
|
width: 180rpx;
|
||||||
|
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx
|
||||||
|
rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
padding: $padding * 0.6 $padding * 0.3;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size - 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
79
pages/record/addFoods.vue
Normal file
79
pages/record/addFoods.vue
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-11 11:27:17
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-11 16:52:38
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="add-foods">
|
||||||
|
<!-- 搜索页面 -->
|
||||||
|
<u-search
|
||||||
|
:show-action="true"
|
||||||
|
actionText="搜索"
|
||||||
|
:animation="true"
|
||||||
|
:clearabled="true"
|
||||||
|
placeholder="请输入食品名称"
|
||||||
|
/>
|
||||||
|
<!-- 食品列表 -->
|
||||||
|
<goodsList
|
||||||
|
:lists='lists'
|
||||||
|
type="dian"
|
||||||
|
@addGoods="addGoods"
|
||||||
|
/>
|
||||||
|
<!-- 添加食谱弹窗 -->
|
||||||
|
<addFoods
|
||||||
|
:addShow="addShow"
|
||||||
|
:selectGoods="selectGoods"
|
||||||
|
:decimals="true"
|
||||||
|
@confirm="confirmHandle"
|
||||||
|
@close="closeHandle"
|
||||||
|
max="999"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import goodsList from "@/components/foods";
|
||||||
|
import addFoods from "@/components/addGoods";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { goodsList, addFoods },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lists: [1, 2, 3, 4, 5, 6], // 食品列表
|
||||||
|
addShow: false, // 添加食品显示
|
||||||
|
selectGoods: [1], // 选择新增的食品
|
||||||
|
digitKeyboardValue: 0, // 选择按钮返回的值
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 监听点击键盘触发返回值
|
||||||
|
confirmHandle(value) {
|
||||||
|
console.log(typeof value);
|
||||||
|
//点击键盘完成的回调函数
|
||||||
|
this.digitKeyboardValue = value;
|
||||||
|
this.addShow = false;
|
||||||
|
},
|
||||||
|
closeHandle() {
|
||||||
|
//键盘关闭的回调函数
|
||||||
|
this.addShow = false;
|
||||||
|
},
|
||||||
|
// 监听子组件的新增方法
|
||||||
|
addGoods(e) {
|
||||||
|
console.log("父组件监听到了子组件的新增方法", e);
|
||||||
|
this.addShow = true;
|
||||||
|
},
|
||||||
|
// 监听子组件的新增方法
|
||||||
|
tabGoodsInfo(e) {
|
||||||
|
console.log("父组件监听到了子组件的商品详情页面", e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-foods {
|
||||||
|
padding: $padding;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
393
pages/record/drink.vue
Normal file
393
pages/record/drink.vue
Normal file
@@ -0,0 +1,393 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:喝水记录 ，记录当前的喝水情况
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-06 14:48:07
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-10 10:56:31
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="drink">
|
||||||
|
<!-- 喝水及水杯文字 -->
|
||||||
|
<view class="drink-content">
|
||||||
|
<view class="title">再喝<span class="num">3.8</span>杯<span class="total">（1600ml）</span></view>
|
||||||
|
<!-- 水杯动态图片 -->
|
||||||
|
<view class="wave-content">
|
||||||
|
<u-image
|
||||||
|
class="grass"
|
||||||
|
:src="require('../../static/imgs/gress.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
mode="scaleToFill"
|
||||||
|
width="320rpx"
|
||||||
|
height="520rpx"
|
||||||
|
/>
|
||||||
|
<view
|
||||||
|
class="wave"
|
||||||
|
:style="{'--ballPercent': -ballPercent+40+'%'}"
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 目标 -->
|
||||||
|
<view class="water-target">
|
||||||
|
<view
|
||||||
|
class="target-item"
|
||||||
|
@click="targetShow = true"
|
||||||
|
>今日目标
|
||||||
|
<u-icon
|
||||||
|
class="target-icon"
|
||||||
|
name="arrow-right"
|
||||||
|
color="#666"
|
||||||
|
size="14"
|
||||||
|
:bold="true"
|
||||||
|
label="1600ml"
|
||||||
|
labelPos="left"
|
||||||
|
labelSize="16"
|
||||||
|
labelColor="#666"
|
||||||
|
space="6"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="target-item"
|
||||||
|
@click="waterCShow = true"
|
||||||
|
>水杯容量
|
||||||
|
<u-icon
|
||||||
|
class="target-icon"
|
||||||
|
name="arrow-right"
|
||||||
|
color="#666"
|
||||||
|
size="14"
|
||||||
|
:bold="true"
|
||||||
|
label="420ml"
|
||||||
|
labelPos="left"
|
||||||
|
labelSize="16"
|
||||||
|
labelColor="#666"
|
||||||
|
space="6"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 目标弹出层 -->
|
||||||
|
<view>
|
||||||
|
<u-picker
|
||||||
|
:show="targetShow"
|
||||||
|
:columns="targetcolumns"
|
||||||
|
title="每天喝水目标"
|
||||||
|
keyName="label"
|
||||||
|
confirmColor="#34ce98"
|
||||||
|
:closeOnClickOverlay="true"
|
||||||
|
@close="targetShow = false"
|
||||||
|
@confirm="targetSure"
|
||||||
|
/>
|
||||||
|
<u-picker
|
||||||
|
:show="waterCShow"
|
||||||
|
:columns="watercolumns"
|
||||||
|
title="设置水杯容量"
|
||||||
|
keyName="label"
|
||||||
|
confirmColor="#34ce98"
|
||||||
|
:closeOnClickOverlay="true"
|
||||||
|
@close="waterCShow = false"
|
||||||
|
@confirm="waterCSure"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<!-- 加水 -->
|
||||||
|
<view
|
||||||
|
class="add-water"
|
||||||
|
@click="ballPercent += 10"
|
||||||
|
>
|
||||||
|
<u-image
|
||||||
|
class="grass"
|
||||||
|
:src="require('../../static/imgs/gress2.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
mode="scaleToFill"
|
||||||
|
width="60rpx"
|
||||||
|
height="80rpx"
|
||||||
|
/>
|
||||||
|
<span>一杯水</span>
|
||||||
|
<u-icon
|
||||||
|
class="add-icon"
|
||||||
|
name="plus-circle-fill"
|
||||||
|
color="#34ce98"
|
||||||
|
size="24"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 喝水记录 -->
|
||||||
|
<view class="--history">
|
||||||
|
<view class="title">喝水记录</view>
|
||||||
|
<view
|
||||||
|
class="lists"
|
||||||
|
v-for="item in 4"
|
||||||
|
:key="item"
|
||||||
|
>
|
||||||
|
<view class="lists-water">
|
||||||
|
<u-icon
|
||||||
|
size="30"
|
||||||
|
:name="require('../../static/icon/water-icon.png')"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<view class="list-item-title">水<span>14:39</span></view>
|
||||||
|
420ml
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ballPercent: 0, // 喝水比例
|
||||||
|
targetShow: false,
|
||||||
|
targetcolumns: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: "1600ml",
|
||||||
|
// 其他属性值
|
||||||
|
number: 1600,
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "1700ml",
|
||||||
|
number: 1700,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
waterCShow: false,
|
||||||
|
watercolumns: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: "1600ml",
|
||||||
|
// 其他属性值
|
||||||
|
number: 1600,
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "1700ml",
|
||||||
|
number: 1700,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 设置目标弹出点击了确认方法
|
||||||
|
targetSure(e) {
|
||||||
|
console.log("触发了targetSure");
|
||||||
|
this.targetShow = false;
|
||||||
|
console.log(e.value[0]);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置水杯容量点击确认触发方法
|
||||||
|
waterCSure(e) {
|
||||||
|
console.log("触发了waterCSure");
|
||||||
|
this.targetShow = false;
|
||||||
|
console.log(e.value[0]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.drink {
|
||||||
|
// 喝水 水杯及文字
|
||||||
|
.drink-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: $padding * 2 0;
|
||||||
|
position: relative;
|
||||||
|
// 标题 再喝水
|
||||||
|
.title {
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: $margin * 2;
|
||||||
|
.num {
|
||||||
|
font-size: $title-size * 2.3;
|
||||||
|
padding: 0 $padding * 0.3;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.total {
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $text-gray-m;
|
||||||
|
padding-left: $padding * 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 加一杯水
|
||||||
|
.add-water {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $text-color;
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
position: relative;
|
||||||
|
span {
|
||||||
|
padding-top: $padding * 0.4;
|
||||||
|
}
|
||||||
|
.add-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: $margin + 8;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 目标
|
||||||
|
.water-target {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 110;
|
||||||
|
right: $padding * 1.4;
|
||||||
|
top: 50%;
|
||||||
|
.target-item {
|
||||||
|
margin-top: $margin * 1.6;
|
||||||
|
.target-icon {
|
||||||
|
padding-top: $padding * 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 喝水记录
|
||||||
|
.--history {
|
||||||
|
padding: $padding;
|
||||||
|
// 标题
|
||||||
|
.title {
|
||||||
|
font-size: $title-size * 1.4;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: $padding;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 8rpx;
|
||||||
|
height: 45rpx;
|
||||||
|
left: 0;
|
||||||
|
background-color: $main-color;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 列表
|
||||||
|
.lists {
|
||||||
|
// background-color: pink;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: solid 1rpx #f7f7f7;
|
||||||
|
.lists-water {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
$main-color,
|
||||||
|
$main-color * 0.9
|
||||||
|
);
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.list-item {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: $margin * 0.7;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $text-gray-m;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: $margin 0 $margin $margin * 0.7;
|
||||||
|
.list-item-title {
|
||||||
|
font-size: $title-size + 3;
|
||||||
|
color: $text-color;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-weight: bold;
|
||||||
|
span {
|
||||||
|
margin-top: $margin * 0.4;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: $title-size - 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 水杯动画
|
||||||
|
.wave-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 110;
|
||||||
|
.grass {
|
||||||
|
position: relative;
|
||||||
|
z-index: 120099;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
position: absolute;
|
||||||
|
width: 290rpx;
|
||||||
|
height: 500rpx;
|
||||||
|
background-color: rgba($color: $main-color, $alpha: 0.6);
|
||||||
|
background-size: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 10rpx;
|
||||||
|
left: 20rpx;
|
||||||
|
z-index: 10;
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 1000rpx;
|
||||||
|
height: 1000rpx;
|
||||||
|
top: var(--ballPercent);
|
||||||
|
left: 50%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.4);
|
||||||
|
border-radius: 45%;
|
||||||
|
transform: translate(-50%, -70%) rotate(0);
|
||||||
|
animation: rotate 4s linear infinite;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border-radius: 47%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
transform: translate(-50%, -70%) rotate(0);
|
||||||
|
animation: rotate 6s linear -5s infinite;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
50% {
|
||||||
|
transform: translate(-50%, -73%) rotate(180deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, -70%) rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
289
pages/record/foods.vue
Normal file
289
pages/record/foods.vue
Normal file
@@ -0,0 +1,289 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-11 08:54:49
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-11 15:41:12
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="record--foods">
|
||||||
|
<!-- 饮食进度条 -->
|
||||||
|
<view class="cricle-content">
|
||||||
|
<view class="info">饮食摄入<span>879</span></view>
|
||||||
|
<arprogress
|
||||||
|
:percent="percent"
|
||||||
|
inactiveColor="#f5f4f9"
|
||||||
|
activeColor="#34ce98"
|
||||||
|
width="300"
|
||||||
|
class="cricle"
|
||||||
|
borderWidth="20"
|
||||||
|
>
|
||||||
|
<span>还可以吃</span>
|
||||||
|
<span class="num">1829</span>
|
||||||
|
<span>推荐预算1829</span>
|
||||||
|
</arprogress>
|
||||||
|
<view class="info">运动消耗<span>879</span></view>
|
||||||
|
<view class="ic-left">摄入量推荐</view>
|
||||||
|
<u-icon
|
||||||
|
class="ic-day"
|
||||||
|
name="checkmark-circle"
|
||||||
|
color="#34ce98"
|
||||||
|
size="10"
|
||||||
|
label="4天"
|
||||||
|
labelColor="#34ce98"
|
||||||
|
labelSize="10"
|
||||||
|
space="3"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 没有饮食记录 -->
|
||||||
|
<!-- <view class="no-foods">
|
||||||
|
<u-image
|
||||||
|
:src="require('../../static/imgs/no-foods.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
radius="10rpx"
|
||||||
|
mode="widthFix"
|
||||||
|
width="300rpx"
|
||||||
|
class="no-foods-img"
|
||||||
|
/>
|
||||||
|
<view>还没有记录</view>
|
||||||
|
<view>请点击屏幕下方按钮来添加</view>
|
||||||
|
</view> -->
|
||||||
|
<!-- 有饮食记录 -->
|
||||||
|
<view
|
||||||
|
class="foods-add"
|
||||||
|
v-for="item in 2"
|
||||||
|
:key="item"
|
||||||
|
>
|
||||||
|
<view class="foods-title">
|
||||||
|
<view class="title-left">早餐<span>建议493~603千卡</span></view>
|
||||||
|
<view class="title-right">
|
||||||
|
558<span class="dw">千卡</span>
|
||||||
|
<u-icon
|
||||||
|
name="arrow-right"
|
||||||
|
color="#ddd"
|
||||||
|
size="13"
|
||||||
|
:bold="true"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<goodsList
|
||||||
|
:lists="lists"
|
||||||
|
type="no-dian"
|
||||||
|
@editGoods="editGoods"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<!-- 加餐模块 -->
|
||||||
|
<u-action-sheet
|
||||||
|
:actions="addEatList"
|
||||||
|
title="加餐模块"
|
||||||
|
:closeOnClickOverlay="true"
|
||||||
|
:closeOnClickAction="true"
|
||||||
|
@select="selectClick"
|
||||||
|
cancelText="取消"
|
||||||
|
:show="addEatShow"
|
||||||
|
@close="addEatShow = false"
|
||||||
|
></u-action-sheet>
|
||||||
|
<!-- 底部 早餐等菜单 -->
|
||||||
|
<u-tabbar
|
||||||
|
:fixed="true"
|
||||||
|
:placeholder="true"
|
||||||
|
:safeAreaInsetBottom="true"
|
||||||
|
inactiveColor="#333"
|
||||||
|
@click="tabbarClick"
|
||||||
|
>
|
||||||
|
<u-tabbar-item
|
||||||
|
text="+早餐"
|
||||||
|
@click="tabbarClick"
|
||||||
|
:icon="require('../../static/imgs/foods-1.png')"
|
||||||
|
></u-tabbar-item>
|
||||||
|
<u-tabbar-item
|
||||||
|
text="+晚餐"
|
||||||
|
@click="tabbarClick"
|
||||||
|
:icon="require('../../static/imgs/foods-2.png')"
|
||||||
|
></u-tabbar-item>
|
||||||
|
<u-tabbar-item
|
||||||
|
text="+晚餐"
|
||||||
|
@click="tabbarClick"
|
||||||
|
:icon="require('../../static/imgs/foods-3.png')"
|
||||||
|
></u-tabbar-item>
|
||||||
|
<u-tabbar-item
|
||||||
|
text="+加餐"
|
||||||
|
@click="tabbarClick"
|
||||||
|
:icon="require('../../static/imgs/foods-4.png')"
|
||||||
|
></u-tabbar-item>
|
||||||
|
</u-tabbar>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import arprogress from "@/components/ar-circle-progress/index.vue";
|
||||||
|
import goodsList from "@/components/foods";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
arprogress,
|
||||||
|
goodsList,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
percent: 1, // 摄入量 100 百分比
|
||||||
|
tabarIndex: 0,
|
||||||
|
lists: [1, 2, 3],
|
||||||
|
addEatShow: false, // 加餐弹窗默认不显示
|
||||||
|
addEatList: [
|
||||||
|
{
|
||||||
|
name: "上午加餐",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "下午加餐",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "晚上加餐",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 底部按钮点击触发的事件 早餐 午餐 晚餐 加餐
|
||||||
|
tabbarClick(e) {
|
||||||
|
console.log("点击事件,,,,");
|
||||||
|
console.log(e);
|
||||||
|
this.tabarIndex = e;
|
||||||
|
if (e === 3) {
|
||||||
|
this.addEatShow = true;
|
||||||
|
} else {
|
||||||
|
this.$Router.push({
|
||||||
|
name: "AddFoods",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择了加餐跳转
|
||||||
|
selectClick(e) {
|
||||||
|
console.log(e);
|
||||||
|
this.$Router.push({
|
||||||
|
name: "AddFoods",
|
||||||
|
});
|
||||||
|
// 选择加餐
|
||||||
|
},
|
||||||
|
// 编辑食品
|
||||||
|
editGoods(e) {
|
||||||
|
console.log("父组件监听到了子组件的商品详情页面", e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.record--foods {
|
||||||
|
padding: $padding $padding $padding * 2 $padding;
|
||||||
|
// background: green;
|
||||||
|
}
|
||||||
|
// 饮食进度条
|
||||||
|
.cricle-content {
|
||||||
|
box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
font-size: $title-size-m - 6;
|
||||||
|
padding: $padding * 1.8 $padding;
|
||||||
|
border-radius: $radius;
|
||||||
|
color: $text-gray-m;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
.cricle {
|
||||||
|
.num {
|
||||||
|
color: $text-color;
|
||||||
|
font-size: $title-size * 1.8;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: $padding * 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
span {
|
||||||
|
font-size: $title-size + 10;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
padding-top: $padding * 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ic-left {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background-image: linear-gradient(to right, #ffebb9, #fbd57b);
|
||||||
|
color: #664710;
|
||||||
|
padding: 10rpx $padding * 0.6;
|
||||||
|
border-radius: 0 0 $radius 0;
|
||||||
|
}
|
||||||
|
.ic-day {
|
||||||
|
position: absolute;
|
||||||
|
right: $padding;
|
||||||
|
top: $padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 没有饮食记录
|
||||||
|
.no-foods {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size-m - 4;
|
||||||
|
color: $text-gray-m;
|
||||||
|
min-height: 40vh;
|
||||||
|
// background: pink;
|
||||||
|
.no-foods-img {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
view {
|
||||||
|
padding: $padding * 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 饮食记录 早中晚加餐等
|
||||||
|
.foods-add {
|
||||||
|
border-bottom: solid 1rpx #f7f7f7;
|
||||||
|
margin-top: $margin;
|
||||||
|
// 主标题
|
||||||
|
.foods-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-color;
|
||||||
|
padding: $padding * 0.5 0;
|
||||||
|
.title-left {
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $text-color;
|
||||||
|
font-weight: bold;
|
||||||
|
span {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: $title-size-m - 6;
|
||||||
|
color: $text-gray-m;
|
||||||
|
margin-left: $margin - 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title-right {
|
||||||
|
font-size: $title-size-m - 6;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $main-color;
|
||||||
|
.dw {
|
||||||
|
margin: 0 $margin * 0.6 0 $margin * 0.4;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,39 +1,475 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:用于展示用户体重管理及体重记录饮食记录和饮水记录会员专享食谱和帮助小助手
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-05 09:01:12
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-11 08:57:30
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="record">
|
||||||
<view class="">
|
<!-- 搜索顶部 -->
|
||||||
健康档案基本信息（姓名，年龄，性别）
|
<view class="search">
|
||||||
</view>
|
<!-- 头像 -->
|
||||||
<view class="">
|
<view class="user">
|
||||||
体重
|
<u-image
|
||||||
</view>
|
class="avatar"
|
||||||
<view class="">
|
width="90rpx"
|
||||||
喝水
|
height="90rpx"
|
||||||
</view>
|
:src="require('../../static/imgs/avatar.png')"
|
||||||
<view class="">
|
:lazy-load="true"
|
||||||
心率
|
shape="circle"
|
||||||
</view>
|
/>
|
||||||
<view class="">
|
<u-icon
|
||||||
血压
|
name="arrow-down-fill"
|
||||||
</view>
|
color="#525252"
|
||||||
<view class="">
|
size="10"
|
||||||
血糖
|
class="downIcon"
|
||||||
</view>
|
:bold="true"
|
||||||
<view class="">
|
space="1"
|
||||||
血脂
|
@click="$Router.push({name:'EvaluationIntroduce'})"
|
||||||
</view>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<u-search
|
||||||
|
placeholder="搜索食物营养和热量"
|
||||||
|
shape="round"
|
||||||
|
:show-action="false"
|
||||||
|
searchIconColor="#34ce98"
|
||||||
|
bgColor="#f8f8f8"
|
||||||
|
:clearabled="false"
|
||||||
|
:disabled="true"
|
||||||
|
placeholderColor="#777"
|
||||||
|
class="searchTem"
|
||||||
|
/>
|
||||||
|
<!-- 消息中心 -->
|
||||||
|
<view class="news">
|
||||||
|
<u-icon
|
||||||
|
name="bell-fill"
|
||||||
|
color="#525252"
|
||||||
|
size="24"
|
||||||
|
:bold="true"
|
||||||
|
space="1"
|
||||||
|
@click="$Router.push({name:'EvaluationIntroduce'})"
|
||||||
|
/>
|
||||||
|
<u-badge
|
||||||
|
class="dian"
|
||||||
|
:isDot="true"
|
||||||
|
bgColor="#e6576b"
|
||||||
|
>
|
||||||
|
</u-badge>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 体重管理模块 -->
|
||||||
|
<view class="weight-manage">
|
||||||
|
<!-- 体重管理 -->
|
||||||
|
<view
|
||||||
|
class="manage"
|
||||||
|
@click="$Router.push({name:'EssentialInfo'})"
|
||||||
|
>体重管理</view>
|
||||||
|
<!-- 单位:公斤 -->
|
||||||
|
<u-icon
|
||||||
|
class="eye"
|
||||||
|
name="eye"
|
||||||
|
color="#fff"
|
||||||
|
size="14"
|
||||||
|
:bold="true"
|
||||||
|
label="单位 : 公斤"
|
||||||
|
labelPos="left"
|
||||||
|
labelSize="12"
|
||||||
|
labelColor="#fff"
|
||||||
|
space="6"
|
||||||
|
/>
|
||||||
|
<!-- 进度条 -->
|
||||||
|
<u-line-progress
|
||||||
|
:percentage="30"
|
||||||
|
:showText="false"
|
||||||
|
inactiveColor="#d5f2e8"
|
||||||
|
activeColor="none"
|
||||||
|
height="16"
|
||||||
|
>
|
||||||
|
<text class="u-percentage-slot">{{20}}%</text>
|
||||||
|
</u-line-progress>
|
||||||
|
<!-- 开始目标 结束目标 当前目标 -->
|
||||||
|
<view class="number">
|
||||||
|
<view class="--item">70<span>初始</span></view>
|
||||||
|
<view class="--item">66<span>当前</span></view>
|
||||||
|
<view class="--item">50<span>目标</span></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 实时消息 -->
|
||||||
|
<view class="real-news">
|
||||||
|
<view class="real-news-left">
|
||||||
|
<view class="news-icon">
|
||||||
|
<u-icon
|
||||||
|
class="volume-fill"
|
||||||
|
name="volume-fill"
|
||||||
|
color="#24ccb3"
|
||||||
|
size="20"
|
||||||
|
:bold="true"
|
||||||
|
label="公告"
|
||||||
|
labelPos="right"
|
||||||
|
labelSize="14"
|
||||||
|
labelColor="#24ccb3"
|
||||||
|
space="6"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<swiper
|
||||||
|
class="news-info"
|
||||||
|
:autoplay="true"
|
||||||
|
:vertical="true"
|
||||||
|
:circular="true"
|
||||||
|
>
|
||||||
|
<swiper-item
|
||||||
|
class="news-swiper-item"
|
||||||
|
v-for="item in 3"
|
||||||
|
:key="item"
|
||||||
|
>
|
||||||
|
<view>{{item}}洛基今天完成了健康状况测评1洛基今天完成了健康状况测评1洛基今天完成了健康状况测评</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 健康测评 -->
|
||||||
|
<u-image
|
||||||
|
:src="require('../../static/imgs/health1.png')"
|
||||||
|
class="eval-img"
|
||||||
|
@click="$Router.push({name:'EvaluationList'})"
|
||||||
|
:lazy-load="true"
|
||||||
|
radius="10rpx"
|
||||||
|
mode="widthFix"
|
||||||
|
width="100%"
|
||||||
|
/>
|
||||||
|
<!-- 健康记录 -->
|
||||||
|
<view class="title">健康记录</view>
|
||||||
|
<view
|
||||||
|
class="health"
|
||||||
|
@click="$Router.push({name:'RecordFoods'})"
|
||||||
|
>
|
||||||
|
<view>
|
||||||
|
<view class="h-title">饮食&运动健康</view>
|
||||||
|
<view class="h-date">11:55 更新</view>
|
||||||
|
<view class="h-eat">还可以吃<span>1545 </span> 千卡</view>
|
||||||
|
</view>
|
||||||
|
<u-image
|
||||||
|
:src="require('../../static/imgs/eat.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
radius="10rpx"
|
||||||
|
mode="widthFix"
|
||||||
|
width="140rpx"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="health-2">
|
||||||
|
<view
|
||||||
|
class="health"
|
||||||
|
@click="$Router.push({name:'Drink'})"
|
||||||
|
>
|
||||||
|
<view>
|
||||||
|
<view class="h-title">饮水记录</view>
|
||||||
|
<view class="h-date">11:55 更新</view>
|
||||||
|
<view class="h-eat">还可以喝<span>1545 </span> 毫升</view>
|
||||||
|
</view>
|
||||||
|
<u-image
|
||||||
|
:src="require('../../static/imgs/drink.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
radius="10rpx"
|
||||||
|
mode="widthFix"
|
||||||
|
width="110rpx"
|
||||||
|
class="h-icon"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="health"
|
||||||
|
@click="$Router.push({name:'Weight'})"
|
||||||
|
>
|
||||||
|
<view>
|
||||||
|
<view class="h-title">体重记录</view>
|
||||||
|
<view class="h-date">11:55 更新</view>
|
||||||
|
<view class="h-eat"><span>55 </span>公斤 </view>
|
||||||
|
</view>
|
||||||
|
<u-image
|
||||||
|
:src="require('../../static/imgs/weight.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
radius="10rpx"
|
||||||
|
mode="widthFix"
|
||||||
|
width="140rpx"
|
||||||
|
class="h-icon"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<!-- 营养管理 -->
|
||||||
|
<view class="title">营养管理</view>
|
||||||
|
<view class="nutrition">
|
||||||
|
<view
|
||||||
|
class="--item"
|
||||||
|
@click="$Router.push({name:'VipFoods'})"
|
||||||
|
>
|
||||||
|
<u-icon
|
||||||
|
:name="require('../../static/icon/vip.png')"
|
||||||
|
size="24"
|
||||||
|
:bold="true"
|
||||||
|
label="会员专享食谱"
|
||||||
|
labelPos="right"
|
||||||
|
labelSize="17"
|
||||||
|
labelColor="#525252"
|
||||||
|
space="10"
|
||||||
|
/>
|
||||||
|
<u-icon
|
||||||
|
name="arrow-right"
|
||||||
|
color="#999"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="--item mt20"
|
||||||
|
@click="$Router.push({name:'NutritionHelper'})"
|
||||||
|
>
|
||||||
|
<u-icon
|
||||||
|
:name="require('../../static/icon/helper.png')"
|
||||||
|
size="24"
|
||||||
|
:bold="true"
|
||||||
|
label="营养小助手"
|
||||||
|
labelPos="right"
|
||||||
|
labelSize="17"
|
||||||
|
labelColor="#525252"
|
||||||
|
space="10"
|
||||||
|
/>
|
||||||
|
<u-icon
|
||||||
|
name="arrow-right"
|
||||||
|
color="#999"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
|
.record {
|
||||||
|
padding: $padding;
|
||||||
|
// 顶部搜索
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.user {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
.downIcon {
|
||||||
|
margin: 0 0 0 $margin * 0.4;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
box-shadow: 0 0 10rpx 4rpx
|
||||||
|
rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.searchTem {
|
||||||
|
margin: 0 $margin * 0.6 !important;
|
||||||
|
}
|
||||||
|
.news {
|
||||||
|
position: relative;
|
||||||
|
.dian {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 体重管理
|
||||||
|
.weight-manage {
|
||||||
|
height: 288rpx;
|
||||||
|
background-image: url(../../static/imgs/banner-bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-radius: $radius + 1;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
margin-top: $margin + 6;
|
||||||
|
padding: 0 $padding;
|
||||||
|
.eye {
|
||||||
|
margin-bottom: $margin * 0.6;
|
||||||
|
}
|
||||||
|
// 体重管理
|
||||||
|
.manage {
|
||||||
|
font-size: $margin + 2;
|
||||||
|
color: #fff;
|
||||||
|
display: inline-block;
|
||||||
|
padding: $padding * 0.3 $padding;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: #fff, $alpha: 0.3);
|
||||||
|
left: -$padding;
|
||||||
|
top: 0;
|
||||||
|
border-radius: $radius + 1 0 $radius - 6;
|
||||||
|
}
|
||||||
|
// 进度条线上样式
|
||||||
|
.u-percentage-slot {
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #26a377;
|
||||||
|
border-radius: 200rpx;
|
||||||
|
font-size: $title-size - 10;
|
||||||
|
margin-right: -5px;
|
||||||
|
}
|
||||||
|
// 数值
|
||||||
|
.number {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-around;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
font-size: $title-size + 18;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: $margin * 0.6;
|
||||||
|
.--item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: $title-size - 6;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-top: $margin * 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.--item:nth-child(1),
|
||||||
|
.--item:nth-child(3) {
|
||||||
|
font-size: $margin + 4 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 实时消息
|
||||||
|
.real-news {
|
||||||
|
font-size: $title-size - 2;
|
||||||
|
color: $text-color;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: $padding 0;
|
||||||
|
.real-news-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex: 1;
|
||||||
|
// 消息图标
|
||||||
|
.news-icon {
|
||||||
|
background-color: #e9fbf8;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10rpx 20rpx 6rpx 20rpx;
|
||||||
|
border-radius: $margin;
|
||||||
|
// margin-right: $margin * 0.5;
|
||||||
|
}
|
||||||
|
// 轮播图
|
||||||
|
.news-info {
|
||||||
|
flex: 1;
|
||||||
|
margin: 0 $margin * 0.4;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
|
||||||
|
.news-swiper-item {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 评测图片
|
||||||
|
.eval-img {
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
}
|
||||||
|
// 标题
|
||||||
|
.title {
|
||||||
|
font-size: $title-size * 1.4;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: $margin * 1.5 0;
|
||||||
|
}
|
||||||
|
// 健康记录
|
||||||
|
.health-2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: $margin;
|
||||||
|
.h-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.health:nth-child(1) {
|
||||||
|
flex: 1 !important;
|
||||||
|
margin-right: $margin * 0.5;
|
||||||
|
}
|
||||||
|
.health:nth-child(2) {
|
||||||
|
flex: 1 !important;
|
||||||
|
margin-left: $margin * 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.health {
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
padding: $padding * 1 $padding;
|
||||||
|
border-radius: $radius - 10;
|
||||||
|
color: #a3a3a3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.h-title {
|
||||||
|
color: $text-color;
|
||||||
|
font-size: $title-size + 2;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.h-date {
|
||||||
|
margin-top: $margin * 0.4;
|
||||||
|
font-size: $title-size-sm + 2;
|
||||||
|
}
|
||||||
|
.h-eat {
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
margin-top: $margin;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: $title-size * 1.2;
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: $padding * 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 营养管理
|
||||||
|
.nutrition {
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
padding: $padding * 1.5 $padding;
|
||||||
|
border-radius: $radius - 10;
|
||||||
|
|
||||||
|
.--item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.mt20 {
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
274
pages/record/weight.vue
Normal file
274
pages/record/weight.vue
Normal file
@@ -0,0 +1,274 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:记录体重页面
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-07 12:32:50
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-10 15:00:51
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="weight">
|
||||||
|
<!-- 体重表 -->
|
||||||
|
<view class="progress-top">
|
||||||
|
<view class="unit">
|
||||||
|
<span
|
||||||
|
:class="isJin === 2?'active':''"
|
||||||
|
@click="isJin = 2"
|
||||||
|
>斤</span>
|
||||||
|
<span
|
||||||
|
:class="isJin === 1?'active':''"
|
||||||
|
@click="isJin = 1"
|
||||||
|
>公斤</span>
|
||||||
|
</view>
|
||||||
|
<view class="progress">
|
||||||
|
<view>比原来轻</view>
|
||||||
|
<u-count-to
|
||||||
|
class="uCountTo"
|
||||||
|
:startVal="0"
|
||||||
|
:endVal="3.2"
|
||||||
|
:decimals="1"
|
||||||
|
color="#333"
|
||||||
|
fontSize="36"
|
||||||
|
:bold="true"
|
||||||
|
/>
|
||||||
|
<view>保持 / 塑性</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="add-weight"
|
||||||
|
@click="addWeight"
|
||||||
|
>记录体重</view>
|
||||||
|
</view>
|
||||||
|
<!-- 体重列表 -->
|
||||||
|
<view class="weight-list">
|
||||||
|
<view
|
||||||
|
class="list-item"
|
||||||
|
v-for="item in 2"
|
||||||
|
:key="item"
|
||||||
|
>
|
||||||
|
<view class="list-left">
|
||||||
|
<view class="list-title">
|
||||||
|
<span>64.9</span>公斤
|
||||||
|
</view>
|
||||||
|
初始体重
|
||||||
|
</view>
|
||||||
|
<view class="list-right">
|
||||||
|
<span>开始保持 / 塑性</span>
|
||||||
|
2021-12-22 12:23
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 记录体重弹窗 -->
|
||||||
|
<u-popup
|
||||||
|
:show="addWeightShow"
|
||||||
|
:round="10"
|
||||||
|
@close="addWeightShow = false"
|
||||||
|
@open="open"
|
||||||
|
:closeable="true"
|
||||||
|
>
|
||||||
|
<view class="addWeightContent">
|
||||||
|
<view class="date">今天</view>
|
||||||
|
<view class='count'><span>{{horizontaPointVal}}</span>公斤</view>
|
||||||
|
<vue-scale
|
||||||
|
:min="10"
|
||||||
|
:max="100"
|
||||||
|
:int="false"
|
||||||
|
:single="10"
|
||||||
|
:h="80"
|
||||||
|
:styles="styles"
|
||||||
|
@scroll="scroll"
|
||||||
|
:scrollLeft="55"
|
||||||
|
/>
|
||||||
|
<view
|
||||||
|
class="addBtn"
|
||||||
|
@click="addWeightShow = false"
|
||||||
|
>确认添加</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import vueScale from "@/components/vueScale";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
vueScale,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isJin: 1, // 是公斤 2 是斤 所有用到斤的直接乘以这个字段即可
|
||||||
|
addWeightShow: true, // 是否添加体重展示
|
||||||
|
weight: 11,
|
||||||
|
height: 180,
|
||||||
|
styles: {
|
||||||
|
line: "#dbdbdb",
|
||||||
|
bginner: "#fbfbfb",
|
||||||
|
bgoutside: "#ffffff",
|
||||||
|
font: "#404040",
|
||||||
|
fontColor: "#404040",
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
horizontaPointVal: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addWeight() {
|
||||||
|
this.addWeightShow = true;
|
||||||
|
},
|
||||||
|
close() {},
|
||||||
|
open() {},
|
||||||
|
// 滚动标尺触发事件
|
||||||
|
scroll(msg) {
|
||||||
|
this.horizontaPointVal = msg;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
//体重top
|
||||||
|
.progress-top {
|
||||||
|
padding: $padding * 2 $padding;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: solid 1rpx #f7f7f7;
|
||||||
|
// 单位
|
||||||
|
.unit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100rpx;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $border-color;
|
||||||
|
padding: $padding * 0.5 0;
|
||||||
|
text-align: center;
|
||||||
|
border: solid 1rpx $border-color;
|
||||||
|
border-radius: 50rpx 0 0 50rpx;
|
||||||
|
}
|
||||||
|
span:nth-child(1) {
|
||||||
|
border-radius: 50rpx 0 0 50rpx;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $border-color $main-color $border-color $border-color;
|
||||||
|
}
|
||||||
|
span:nth-child(2) {
|
||||||
|
border-radius: 0 50rpx 50rpx 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $border-color $border-color $border-color $main-color;
|
||||||
|
}
|
||||||
|
span.active {
|
||||||
|
background-color: $main-color;
|
||||||
|
color: #fff;
|
||||||
|
border: solid 1rpx $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 展示圈
|
||||||
|
.progress {
|
||||||
|
width: 360rpx;
|
||||||
|
height: 360rpx;
|
||||||
|
border: solid $padding * 0.7 #f7f7f7;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
.uCountTo {
|
||||||
|
padding: $padding * 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 记录按钮
|
||||||
|
.add-weight {
|
||||||
|
font-size: $title-size + 2;
|
||||||
|
border-radius: $radius * 3;
|
||||||
|
border: solid 2rpx $main-color;
|
||||||
|
color: $main-color;
|
||||||
|
padding: $padding * 0.8 $padding * 2.8;
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 列表
|
||||||
|
.weight-list {
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray-m;
|
||||||
|
padding: $padding;
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: solid 1rpx #f9f9f9;
|
||||||
|
padding: $padding 0;
|
||||||
|
.list-title {
|
||||||
|
color: $text-color;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
margin-bottom: $margin * 0.4;
|
||||||
|
span {
|
||||||
|
font-size: $title-size + 14;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: $margin * 0.4;
|
||||||
|
span {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗
|
||||||
|
.addWeightContent {
|
||||||
|
width: 100%;
|
||||||
|
height: 54vh;
|
||||||
|
padding: $padding * 4 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.date {
|
||||||
|
font-size: $title-size + 9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
color: $main-color;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
margin-bottom: $margin * 0.1;
|
||||||
|
font-size: $title-size + 2;
|
||||||
|
span {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size * 2.2;
|
||||||
|
margin-right: $margin * 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addBtn {
|
||||||
|
background-color: $main-color * 0.8;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
font-size: $title-size * 1.2;
|
||||||
|
padding: $padding * 0.7 $padding * 4;
|
||||||
|
border-radius: $radius * 3;
|
||||||
|
font-size: $title-size + 6;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
142
pages/vip/foods.vue
Normal file
142
pages/vip/foods.vue
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-07 15:59:03
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-07 16:55:30
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="VipFoods">
|
||||||
|
<!-- 描述 -->
|
||||||
|
<view class="des">
|
||||||
|
<view>轻松健身食谱，</view>
|
||||||
|
<view>让改变放生</view>
|
||||||
|
</view>
|
||||||
|
<!-- 列表 -->
|
||||||
|
<view class="lists-content" v-for="it in 2" :key="it">
|
||||||
|
<view class="lists-title">
|
||||||
|
<view>
|
||||||
|
<span>一日三餐</span>
|
||||||
|
三餐很重要，搭配不能少
|
||||||
|
</view>
|
||||||
|
<u-image
|
||||||
|
class="p-img"
|
||||||
|
width="260rpx"
|
||||||
|
radius="20rpx"
|
||||||
|
mode="widthFix"
|
||||||
|
:src="it === 1 ? require('../../static/imgs/5.png') : require('../../static/imgs/6.png')"
|
||||||
|
:lazy-load="true"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="--item" v-for="item in 3" :key="item">
|
||||||
|
<u-image class="content-img" width="200rpx" height="160rpx" radius="20rpx" :src="require('../../static/imgs/1.png')" :lazy-load="true" />
|
||||||
|
<view class="--title">
|
||||||
|
<view>减脂早餐</view>
|
||||||
|
<view>早餐吃的好</view>
|
||||||
|
<view>给你一天满满正能量</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.VipFoods {
|
||||||
|
padding: $padding;
|
||||||
|
// 描述
|
||||||
|
.des {
|
||||||
|
font-size: $title-size * 1.4;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $main-color;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
//列表
|
||||||
|
.lists-content {
|
||||||
|
background: $main-color;
|
||||||
|
padding: $padding;
|
||||||
|
margin: $margin * 2 0;
|
||||||
|
border-radius: $radius;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
// 列表标题
|
||||||
|
.lists-title {
|
||||||
|
font-size: $title-size;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: $margin;
|
||||||
|
view {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
span {
|
||||||
|
font-size: $title-size * 1.6;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.p-img {
|
||||||
|
position: absolute;
|
||||||
|
right: -$margin;
|
||||||
|
top: -$margin * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 列表
|
||||||
|
.--item {
|
||||||
|
background: rgba($color: #fff, $alpha: 1);
|
||||||
|
padding: $padding;
|
||||||
|
border-radius: $radius;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: $margin * 0.6;
|
||||||
|
.--title {
|
||||||
|
width: 50vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $main-color;
|
||||||
|
view {
|
||||||
|
text-align: right;
|
||||||
|
font-size: $title-size-m + 1;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
view:nth-child(1) {
|
||||||
|
font-size: $title-size * 1.5;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
view:nth-child(2) {
|
||||||
|
margin-top: $margin * 0.8;
|
||||||
|
}
|
||||||
|
view:nth-child(2) {
|
||||||
|
margin-top: $margin * 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
277
pages/vip/nutritionHelper.vue
Normal file
277
pages/vip/nutritionHelper.vue
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-01-07 16:02:01
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-01-10 17:31:22
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="NutritionHelper">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<view class="swiper">
|
||||||
|
<view class="swiper-box">
|
||||||
|
<swiper autoplay @change="swiperCount = $event.detail.current">
|
||||||
|
<swiper-item><image src="https://yanxuan.nosdn.127.net/static-union/163971170765382b.jpg" mode="aspectFill" /></swiper-item>
|
||||||
|
<swiper-item><image src="https://yanxuan.nosdn.127.net/948240ec17accbb8bb2184bde9b62e8f.jpg" mode="aspectFill" /></swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view class="swiper-pages">
|
||||||
|
<text class="pages-item" :class="{ show: swiperCount === 0 }"></text>
|
||||||
|
<text class="pages-item" :class="{ show: swiperCount === 1 }"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 导航菜单 -->
|
||||||
|
<scroll-view class="scroll-view_H" scroll-x="true">
|
||||||
|
<view v-for="(item, index) in 5" :key="index" id="demo1" class="scroll-view-item_H">
|
||||||
|
<u-image width="120rpx" height="120rpx" v-if="item === 1" :src="require('../../static/imgs/ic_loca.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||||
|
<u-image width="120rpx" height="120rpx" v-if="item === 2" :src="require('../../static/imgs/ic_Medicine.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||||
|
<u-image width="120rpx" height="120rpx" v-if="item === 3" :src="require('../../static/imgs/ic_report.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||||
|
<u-image width="120rpx" height="120rpx" v-if="item === 4" :src="require('../../static/imgs/ic_SignIn.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||||
|
<u-image width="120rpx" height="120rpx" v-if="item === 5" :src="require('../../static/imgs/ic_SignIn.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||||
|
<view class="title">正确洗脸</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 精品推荐 -->
|
||||||
|
<view>
|
||||||
|
<view class="page-title">
|
||||||
|
精品推荐
|
||||||
|
<u-icon name="arrow-right" color="#999" label="更多" labelPos="left" labelColor="#999" />
|
||||||
|
</view>
|
||||||
|
<!-- 消息列表 -->
|
||||||
|
<view class="helper-list" v-for="item in 2" :key="item">
|
||||||
|
<view class="help-logo">
|
||||||
|
<view class="logo">ZH</view>
|
||||||
|
<view class="info">
|
||||||
|
<span class="title">ZH大健康</span>
|
||||||
|
<span class="des">ZH健康官方账号</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="help-content">
|
||||||
|
<view class="--content">
|
||||||
|
<view class="title ellipsis">不要随意按摩,小心加重你的劲椎病小心加重你的劲椎病小心加重你的劲椎病</view>
|
||||||
|
<view class="read-time">
|
||||||
|
<view class="read">阅读4k+</view>
|
||||||
|
<view class="zan">4k+ 点赞</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-image width="240rpx" height="180rpx" :src="require('../../static/imgs/newsss.png')" :lazy-load="true" class="u-img" radius="10" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 更多推荐 -->
|
||||||
|
<view>
|
||||||
|
<view class="page-title">
|
||||||
|
更多推荐
|
||||||
|
<u-icon name="arrow-right" color="#999" label="更多" labelPos="left" labelColor="#999" />
|
||||||
|
</view>
|
||||||
|
<!-- 消息列表 -->
|
||||||
|
<view class="helper-list" v-for="item in 2" :key="item">
|
||||||
|
<view class="help-logo">
|
||||||
|
<view class="logo">ZH</view>
|
||||||
|
<view class="info">
|
||||||
|
<span class="title">ZH大健康</span>
|
||||||
|
<span class="des">ZH健康官方账号</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="help-content">
|
||||||
|
<view class="--content pt10">
|
||||||
|
<u-image width="100%" :src="require('../../static/imgs/newsss.png')" :lazy-load="true" mode="widthFix" class="u-img" radius="2" />
|
||||||
|
<view class="title2">为什么工作效率那么低呢？</view>
|
||||||
|
<view class="des ellipsis">
|
||||||
|
因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒
|
||||||
|
</view>
|
||||||
|
<view class="read-time">
|
||||||
|
<view class="read">阅读4k+</view>
|
||||||
|
<view class="zan">4k+ 点赞</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
swiperCount: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.NutritionHelper {
|
||||||
|
// swiper
|
||||||
|
.swiper {
|
||||||
|
background: linear-gradient(#fff, #f3f6fb);
|
||||||
|
padding: $padding;
|
||||||
|
.swiper-box {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 40%;
|
||||||
|
swiper,
|
||||||
|
image {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
image {
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-pages {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: $margin - 10;
|
||||||
|
height: 7rpx;
|
||||||
|
text-align: center;
|
||||||
|
.pages-item {
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
height: 7rpx;
|
||||||
|
width: 25rpx;
|
||||||
|
margin: 0 5rpx;
|
||||||
|
background: rgba($color: #fff, $alpha: 0.5);
|
||||||
|
&.show {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 横向滚动
|
||||||
|
.scroll-view_H {
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: $radius;
|
||||||
|
.scroll-view-item_H {
|
||||||
|
display: inline-block;
|
||||||
|
width: 130rpx;
|
||||||
|
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
|
||||||
|
// box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
padding: $padding * 0.6 $padding * 0.3;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size - 2;
|
||||||
|
width: 160rpx;
|
||||||
|
}
|
||||||
|
.u-img {
|
||||||
|
margin-left: $margin;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标题
|
||||||
|
.page-title {
|
||||||
|
font-size: $title-size * 1.6;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: $padding;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 消息列表
|
||||||
|
.helper-list {
|
||||||
|
padding: $padding;
|
||||||
|
border-bottom: solid 1rpx #f9f9f9;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
|
margin: $margin;
|
||||||
|
border-radius: $radius;
|
||||||
|
// 企业logo
|
||||||
|
.help-logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.logo {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
background: $main-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: $text-color;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size + 12;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: $margin * 0.4;
|
||||||
|
.title {
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.des {
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray-m;
|
||||||
|
margin-top: $title-size * 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 标题部分
|
||||||
|
.help-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.pt10 {
|
||||||
|
padding-top: $padding;
|
||||||
|
}
|
||||||
|
.--content {
|
||||||
|
font-size: $title-size;
|
||||||
|
margin-right: $margin * 0.4;
|
||||||
|
.title {
|
||||||
|
font-size: $title-size + 6;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: $margin;
|
||||||
|
}
|
||||||
|
.title2 {
|
||||||
|
font-size: $title-size + 2;
|
||||||
|
margin-top: $margin;
|
||||||
|
}
|
||||||
|
.des {
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m + 2;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.read-time {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size;
|
||||||
|
padding: $padding * 1.4 0 0 0;
|
||||||
|
.read {
|
||||||
|
background: #fdf7ec;
|
||||||
|
color: #ffcb79;
|
||||||
|
padding: $padding * 0.2 $padding * 0.8;
|
||||||
|
border-radius: $radius * 0.4;
|
||||||
|
}
|
||||||
|
.zan {
|
||||||
|
margin-left: $margin;
|
||||||
|
color: $text-gray-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
static/icon/health.png
Normal file
BIN
static/icon/health.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 695 B |
BIN
static/icon/helper.png
Normal file
BIN
static/icon/helper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 2.2 KiB |
BIN
static/icon/vip.png
Normal file
BIN
static/icon/vip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/icon/water-icon.png
Normal file
BIN
static/icon/water-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/imgs/1.png
Normal file
BIN
static/imgs/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
static/imgs/5.png
Normal file
BIN
static/imgs/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
static/imgs/6.png
Normal file
BIN
static/imgs/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
static/imgs/apple.png
Normal file
BIN
static/imgs/apple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 666 KiB |
BIN
static/imgs/avatar-0.png
Normal file
BIN
static/imgs/avatar-0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
static/imgs/avatar-1.png
Normal file
BIN
static/imgs/avatar-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
static/imgs/avatar.png
Normal file
BIN
static/imgs/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
static/imgs/banner-bg.png
Normal file
BIN
static/imgs/banner-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
static/imgs/drink.png
Normal file
BIN
static/imgs/drink.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
static/imgs/eat.png
Normal file
BIN
static/imgs/eat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
static/imgs/foods-1.png
Normal file
BIN
static/imgs/foods-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
static/imgs/foods-2.png
Normal file
BIN
static/imgs/foods-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
static/imgs/foods-3.png
Normal file
BIN
static/imgs/foods-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
static/imgs/foods-4.png
Normal file
BIN
static/imgs/foods-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
static/imgs/gress.png
Normal file
BIN
static/imgs/gress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
static/imgs/gress2.png
Normal file
BIN
static/imgs/gress2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
static/imgs/health1.png
Normal file
BIN
static/imgs/health1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
static/imgs/ic-b-n.png
Normal file
BIN
static/imgs/ic-b-n.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/imgs/ic-b-s.png
Normal file
BIN
static/imgs/ic-b-s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
static/imgs/ic-m-n.png
Normal file
BIN
static/imgs/ic-m-n.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
static/imgs/ic-m-s.png
Normal file
BIN
static/imgs/ic-m-s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
static/imgs/ic-w-01.png
Normal file
BIN
static/imgs/ic-w-01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
static/imgs/ic-w-02.png
Normal file
BIN
static/imgs/ic-w-02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
static/imgs/ic-w-03.png
Normal file
BIN
static/imgs/ic-w-03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
static/imgs/ic-w-04.png
Normal file
BIN
static/imgs/ic-w-04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
static/imgs/ic-w-05.png
Normal file
BIN
static/imgs/ic-w-05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
static/imgs/ic-w-06.png
Normal file
BIN
static/imgs/ic-w-06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
static/imgs/ic-w-07.png
Normal file
BIN
static/imgs/ic-w-07.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
static/imgs/ic-w-08.png
Normal file
BIN
static/imgs/ic-w-08.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
static/imgs/ic-w-n.png
Normal file
BIN
static/imgs/ic-w-n.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
static/imgs/ic-w-s.png
Normal file
BIN
static/imgs/ic-w-s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
static/imgs/ic_Medicine.png
Normal file
BIN
static/imgs/ic_Medicine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
static/imgs/ic_SignIn.png
Normal file
BIN
static/imgs/ic_SignIn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
static/imgs/ic_loca.png
Normal file
BIN
static/imgs/ic_loca.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
static/imgs/ic_report.png
Normal file
BIN
static/imgs/ic_report.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
static/imgs/indro.png
Normal file
BIN
static/imgs/indro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/imgs/newsss.png
Normal file
BIN
static/imgs/newsss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 746 KiB |
BIN
static/imgs/no-foods.png
Normal file
BIN
static/imgs/no-foods.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
static/imgs/test.png
Normal file
BIN
static/imgs/test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
static/imgs/weight.png
Normal file
BIN
static/imgs/weight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
177
uni_modules/qiun-data-charts/changelog.md
Normal file
177
uni_modules/qiun-data-charts/changelog.md
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
## 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>
|
||||||
422
uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js
Normal file
422
uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js
Normal file
@@ -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;
|
||||||
650
uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
Normal file
650
uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
Normal file
@@ -0,0 +1,650 @@
|
|||||||
|
/*
|
||||||
|
* 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 = ['#91CB74', '#1890FF', '#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", "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", "bar", "area", "radar", "gauge", "candle", "mix", "demotype"],
|
||||||
|
//instance为实例变量承载属性，不要删除
|
||||||
|
"instance": {},
|
||||||
|
//option为opts及eopts承载属性，不要删除
|
||||||
|
"option": {},
|
||||||
|
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||||
|
"formatter": {
|
||||||
|
"yAxisDemo1": function (val) { return val + '元' },
|
||||||
|
"yAxisDemo2": function (val) { return val.toFixed(2) },
|
||||||
|
"xAxisDemo1": function (val) { return val + '年' },
|
||||||
|
"xAxisDemo2": function (val) { return formatDateTime(val, 'h:m') },
|
||||||
|
"seriesDemo1": function (val) { return val + '元' },
|
||||||
|
"tooltipDemo1": function (item, category, index, opts) {
|
||||||
|
if (index == 0) {
|
||||||
|
return '随便用' + item.data + '年'
|
||||||
|
} else {
|
||||||
|
return '其他我没改' + item.data + '天'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pieDemo": function (val, index, series) {
|
||||||
|
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,
|
||||||
|
"meterBorde": 1,
|
||||||
|
"meterFillColor": "#FFFFFF",
|
||||||
|
"activeBgColor": "#000000",
|
||||||
|
"activeBgOpacity": 0.08
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"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",
|
||||||
|
"canvasId": "",
|
||||||
|
"canvas2d": false,
|
||||||
|
"background": "none",
|
||||||
|
"animation": true,
|
||||||
|
"timing": "easeOut",
|
||||||
|
"duration": 1000,
|
||||||
|
"color": [
|
||||||
|
"#91CB74",
|
||||||
|
"#1890FF",
|
||||||
|
"#FAC858",
|
||||||
|
"#EE6666",
|
||||||
|
"#73C0DE",
|
||||||
|
"#3CA272",
|
||||||
|
"#FC8452",
|
||||||
|
"#9A60B4",
|
||||||
|
"#ea7ccc"
|
||||||
|
],
|
||||||
|
"padding": [
|
||||||
|
5,
|
||||||
|
5,
|
||||||
|
5,
|
||||||
|
5
|
||||||
|
],
|
||||||
|
"rotate": false,
|
||||||
|
"errorReload": true,
|
||||||
|
"fontSize": 10,
|
||||||
|
"fontColor": "#666666",
|
||||||
|
"enableScroll": false,
|
||||||
|
"touchMoveLimit": 60,
|
||||||
|
"enableMarkLine": false,
|
||||||
|
"dataLabel": false,
|
||||||
|
"dataPointShape": true,
|
||||||
|
"dataPointShapeType": "solid",
|
||||||
|
"tapLegend": true,
|
||||||
|
"legend": {
|
||||||
|
"show": false,
|
||||||
|
"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": 25,
|
||||||
|
"hiddenColor": "#CECECE",
|
||||||
|
"itemGap": 10
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"radar": {
|
||||||
|
"gridType": "radar",
|
||||||
|
"gridColor": "#CCCCCC",
|
||||||
|
"gridCount": 3,
|
||||||
|
"labelColor": "#666666",
|
||||||
|
"opacity": 0.2,
|
||||||
|
"border": false,
|
||||||
|
"borderWidth": 2,
|
||||||
|
"max": 200
|
||||||
|
},
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"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;
|
||||||
12
uni_modules/qiun-data-charts/js_sdk/u-charts/readme.md
Normal file
12
uni_modules/qiun-data-charts/js_sdk/u-charts/readme.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
# uCharts JSSDK说明
|
||||||
|
1、如不使用uCharts组件，可直接引用u-charts.js，打包编译后会`自动压缩`，压缩后体积约为`98kb`。
|
||||||
|
2、如果100kb的体积仍需压缩，请手动删除u-charts.js内您不需要的图表类型，如k线图candle。
|
||||||
|
3、config-ucharts.js为uCharts组件的用户配置文件，升级前请`自行备份config-ucharts.js`文件，以免被强制覆盖。
|
||||||
|
3、config-echarts.js为ECharts组件的用户配置文件，升级前请`自行备份config-echarts.js`文件，以免被强制覆盖。
|
||||||
|
|
||||||
|
# v1.0转v2.0注意事项
|
||||||
|
1、opts.colors变更为opts.color
|
||||||
|
2、ring圆环图的扩展配置由extra.pie变更为extra.ring
|
||||||
|
3、混合图借用的扩展配置由extra.column变更为extra.mix.column
|
||||||
|
4、全部涉及到format的格式化属性变更为formatter
|
||||||
|
5、不需要再传canvasId及$this参数，如果通过uChats获取context，可能会导致this实例混乱，导致小程序开发者工具报错。如果不使用qiun-data-charts官方组件，需要在new uCharts()实例化之前，自行获取canvas的上下文context（ctx），并传入new中的context（opts.context）。为了能跨更多的端，给您带来的不便敬请谅解。
|
||||||
6809
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
Normal file
6809
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
Normal file
File diff suppressed because it is too large
Load Diff
201
uni_modules/qiun-data-charts/license.md
Normal file
201
uni_modules/qiun-data-charts/license.md
Normal file
@@ -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.
|
||||||
84
uni_modules/qiun-data-charts/package.json
Normal file
84
uni_modules/qiun-data-charts/package.json
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
{
|
||||||
|
"id": "qiun-data-charts",
|
||||||
|
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
|
||||||
|
"version": "2.3.6-20211201",
|
||||||
|
"description": "uCharts v2.3上线，支持nvue！全新官方图表组件，支持H5及APP用ECharts渲染图表，uniapp可视化首选组件",
|
||||||
|
"keywords": [
|
||||||
|
"ucharts",
|
||||||
|
"echarts",
|
||||||
|
"f2",
|
||||||
|
"图表",
|
||||||
|
"可视化"
|
||||||
|
],
|
||||||
|
"repository": "https://gitee.com/uCharts/uCharts",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": "474119"
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "插件不采集任何数据",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
451
uni_modules/qiun-data-charts/readme.md
Normal file
451
uni_modules/qiun-data-charts/readme.md
Normal file
@@ -0,0 +1,451 @@
|
|||||||
|
## [uCharts官方网站](https://www.ucharts.cn)
|
||||||
|
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||||
|
## [优秀的nvue全端组件与模版库nPro](https://ext.dcloud.net.cn/plugin?id=5169)
|
||||||
|
## [图表组件在项目中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||||
|
### [v1.0文档（将在9月30日作废，请尽快转v2.0）](http://doc.ucharts.cn)
|
||||||
|
## [如何安装、更新 uni_modules 插件点这里，必看，必看，必看](https://uniapp.dcloud.io/uni_modules?id=%e4%bd%bf%e7%94%a8-uni_modules-%e6%8f%92%e4%bb%b6)
|
||||||
|
## 点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||||
|
## 初次使用不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||||
|
## <font color=#FF0000> 新手请先完整阅读【帮助文档】及【常见问题】3遍，右侧蓝色按钮【示例项目】请看2遍！ </font>
|
||||||
|
## <font color=#FF0000> 关于NVUE兼容的说明： </font> uCharts.js从2.3.0开始支持nuve（暂时只能通过原生canvas写法调用uCharts，nuve版本组件请见码云示例项目[uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)），因其渲染方式是通过nvue的gcanvas组件来渲染，理论上性能不及renderjs的qiun-data-charts组件性能。官方仍然建议NVUE使用图表的页面改为vue页面，在App端，从性能来讲，由于通讯阻塞的问题，nvue的canvas性能不可能达到使用renderjs的vue页面的canvas。在App端，仍然推荐使用qiun-data-charts组件。[详见uni-app官方说明](https://uniapp.dcloud.io/component/canvas?id=canvas)
|
||||||
|
|
||||||
|
[](https://gitee.com/uCharts/uCharts)
|
||||||
|
|
||||||
|
## 秋云图表组件使用帮助
|
||||||
|
|
||||||
|
全新图表组件，全端全平台支持，开箱即用，可选择uCharts引擎全端渲染，也可指定PC端或APP端`单独使用ECharts`引擎渲染图表。支持极简单的调用方式，只需指定图表类型及传入符合标准的图表数据即可，使开发者只需专注业务及数据。同时也支持datacom组件读取uniClinetDB，无需关心如何拼接数据等不必要的重复工作，大大缩短开发时间。
|
||||||
|
|
||||||
|
## 为何使用官方封装的组件？
|
||||||
|
|
||||||
|
封装组件并不难，谁都会，但组件调试却是一件令人掉头发的事，尤其是canvas封装成组件会带来一系列问题：例如封装后不显示，图表多次初始化导致抖动问题，单页面多个图表点击事件错乱，组件放在scroll-view中无法点击，在图表上滑动时页面无法滚动等等一系列问题。为解决开发者使用可视化组件的困扰，uCharts官方特推出可视化通用组件，本组件具备以下特点：
|
||||||
|
|
||||||
|
- 极简单的调用方式，默认配置下只需要传入`图表类型`及`图表数据`即可全端显示。
|
||||||
|
- 提供强大的`在线配置生成工具`，可视化中的可视化，鼠标点一点就可以生成图表，可视化从此不再难配。
|
||||||
|
- 兼容ECharts，可选择`PC端或APP端单独使用ECharts`引擎渲染图表。
|
||||||
|
- H5及App采用`renderjs`渲染图表，动画流畅、性能翻倍。
|
||||||
|
- 根据父容器尺寸`弹性显示图表`，再也不必为宽高匹配及多端适配问题发愁。
|
||||||
|
- 支持`加载状态loading及error展示`，避免数据读取显示空白的尴尬。
|
||||||
|
- chartData`配置与数据解耦`，即便使用ECharts引擎也不必担心拼接option的困扰。
|
||||||
|
- localdata`后端数据直接渲染`，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。
|
||||||
|
- 小程序端不必担心包体积过大问题，ECharts引擎将不会编译到各小程序端，u-charts.js编译后`仅为93kb`。
|
||||||
|
- 未来将支持通过HbuilderX的[schema2code自动生成全端全平台图表](https://ext.dcloud.net.cn/plugin?id=4684)，敬请期待！！！
|
||||||
|
- uCharts官方拥有3个2000人的QQ群支持，庞大的用户量证明我们一直在努力，本组件将持续更新，请各位放心使用，本组件问题请在`QQ3群`反馈，您的宝贵建议是我们努力的动力！！
|
||||||
|
|
||||||
|
|
||||||
|
## 致开发者
|
||||||
|
|
||||||
|
感谢各位开发者`两年`来对秋云及uCharts的支持，uCharts的进步离不开各位开发者的鼓励与贡献，为更好的帮助各位开发者在uni-app生态系统更好的应用图表，uCharts始终坚持开源，并提供社群帮助开发者解决问题。 为确保您能更好的应用图表组件，建议您先`仔细阅读本页文档`以及uCharts官方文档，而不是下载下来`直接使用`。 如遇到问题请先阅读文档，如仍然不能解决，请加入QQ群咨询，如群友均不能解决或者您有特殊需求，请在群内私聊我，因工作原因，回复不一定很及时，您可直接说问题，有时间一定会回复您。
|
||||||
|
|
||||||
|
uCharts的开源图表组件的开发，付出了大量的个人时间与精力，经过两年来的考验，不会有比较明显的bug，请各位放心使用。不求您5星评价，也不求您赞赏，`只求您对开源贡献的支持态度`，所以，当您想给`1星评价`的时候，秋云真的会`含泪希望您绕路而行……`。如果您有更好的想法，可以在`码云提交Pull Requests`以帮助更多开发者完成需求，再次感谢各位对uCharts的鼓励与支持！
|
||||||
|
|
||||||
|
## 快速体验
|
||||||
|
|
||||||
|
一套代码编到7个平台，依次扫描二维码，亲自体验uCharts图表跨平台效果！IOS因demo比较简单无法上架，请自行编译。
|
||||||
|
|
||||||
|
|
||||||
|
## 快速上手
|
||||||
|
### <font color=#FF0000> 注意前提条件【版本要求：HBuilderX 3.1.0+】 </font>
|
||||||
|
- 1、插件市场点击右侧绿色按钮【使用HBuilderX导入插件】，或者【使用HBuilderX导入示例项目】查看完整示例工程
|
||||||
|
- 2、依赖uniapp的vue-cli项目：请将uni-modules目录复制到src目录，即src/uni_modules。（请升级uniapp依赖为最新版本）
|
||||||
|
- 3、页面中直接按下面用法直接调用即可，无需在页面中注册组件qiun-data-charts
|
||||||
|
- 4、注意父元素class='charts-box'这个样式需要有宽高
|
||||||
|
|
||||||
|
## 基本用法
|
||||||
|
|
||||||
|
- template代码：（[建议使用在线工具生成](https://demo.ucharts.cn)）
|
||||||
|
|
||||||
|
```
|
||||||
|
<view class="charts-box">
|
||||||
|
<qiun-data-charts type="column" :chartData="chartData" />
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
- 标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）
|
||||||
|
|
||||||
|
```
|
||||||
|
chartData:{
|
||||||
|
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||||||
|
series: [{
|
||||||
|
name: "目标值",
|
||||||
|
data: [35, 36, 31, 33, 13, 34]
|
||||||
|
}, {
|
||||||
|
name: "完成量",
|
||||||
|
data: [18, 27, 21, 24, 6, 28]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- 标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型）
|
||||||
|
|
||||||
|
```
|
||||||
|
chartData:{
|
||||||
|
series: [{
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "一班",
|
||||||
|
value: 50
|
||||||
|
}, {
|
||||||
|
name: "二班",
|
||||||
|
value: 30
|
||||||
|
}, {
|
||||||
|
name: "三班",
|
||||||
|
value: 20
|
||||||
|
}, {
|
||||||
|
name: "四班",
|
||||||
|
value: 18
|
||||||
|
}, {
|
||||||
|
name: "五班",
|
||||||
|
value: 8
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
注：其他特殊图表类型，请参考mockdata文件夹下的数据格式，v2.0版本的uCharts已兼容ECharts的数据格式，v2.0版本仍然支持v1.0版本的数据格式。
|
||||||
|
|
||||||
|
## localdata数据渲染用法
|
||||||
|
|
||||||
|
- 使用localdata数据格式渲染图表的优势：数据结构简单，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。
|
||||||
|
- localdata数据的缺点：并不是所有的图表类型均可通过localdata渲染图表，例如混合图，组件并不能识别哪个series分组需要渲染成折线还是柱状图，涉及到复杂的图表，仍需要由chartData传入。
|
||||||
|
|
||||||
|
- template代码：（[建议使用在线工具生成](https://demo.ucharts.cn)）
|
||||||
|
|
||||||
|
```
|
||||||
|
<view class="charts-box">
|
||||||
|
<qiun-data-charts type="column" :localdata="localdata" />
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
- 标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）
|
||||||
|
|
||||||
|
其中value代表数据的数值，text代表X轴的categories数据点，group代表series分组的类型名称即series[i].name。
|
||||||
|
|
||||||
|
```
|
||||||
|
localdata:[
|
||||||
|
{value:35, text:"2016", group:"目标值"},
|
||||||
|
{value:18, text:"2016", group:"完成量"},
|
||||||
|
{value:36, text:"2017", group:"目标值"},
|
||||||
|
{value:27, text:"2017", group:"完成量"},
|
||||||
|
{value:31, text:"2018", group:"目标值"},
|
||||||
|
{value:21, text:"2018", group:"完成量"},
|
||||||
|
{value:33, text:"2019", group:"目标值"},
|
||||||
|
{value:24, text:"2019", group:"完成量"},
|
||||||
|
{value:13, text:"2020", group:"目标值"},
|
||||||
|
{value:6, text:"2020", group:"完成量"},
|
||||||
|
{value:34, text:"2021", group:"目标值"},
|
||||||
|
{value:28, text:"2021", group:"完成量"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
- 标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型）
|
||||||
|
|
||||||
|
其中value代表数据的数值，text代表value数值对应的描述。
|
||||||
|
|
||||||
|
```
|
||||||
|
localdata:[
|
||||||
|
{value:50, text:"一班"},
|
||||||
|
{value:30, text:"二班"},
|
||||||
|
{value:20, text:"三班"},
|
||||||
|
{value:18, text:"四班"},
|
||||||
|
{value:8, text:"五班"},
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
- 注意，localdata的数据格式必需要符合datacom组件规范[【详见datacom组件】](https://uniapp.dcloud.io/component/datacom?id=mixindatacom)。
|
||||||
|
|
||||||
|
## 进阶用法读取uniCloud数据库并渲染图表
|
||||||
|
|
||||||
|
- 组件基于uniCloud的[clientDB](https://uniapp.dcloud.net.cn/uniCloud/clientdb)技术，无需云函数，在前端对数据库通过where查询条件及group和count统计即可渲染图表。
|
||||||
|
- 具体可参考/pages/unicloud/unicloud.vue中的demo例子，使用前，请先关联云服务空间，然后在uniCloud/database/db_init.json文件上点右键，初始化云数据库，当控制台显示“初始化云数据库完成”即完成示例数据的导入，之后方可运行uniCloud的demo。
|
||||||
|
|
||||||
|
- template代码：
|
||||||
|
|
||||||
|
```
|
||||||
|
<qiun-data-charts
|
||||||
|
type="line"
|
||||||
|
:chartData="demoData"
|
||||||
|
collection="uni-id-users"
|
||||||
|
field="register_date,status"
|
||||||
|
:where="'publish_date >= ' + new Date(startDate).getTime() + ' && publish_date <= ' + new Date(endDate).getTime()"
|
||||||
|
groupby="dateToString(add(new Date(0),register_date),'%Y-%m-%d','+0800') as text,status as group"
|
||||||
|
group-field="count(*) as value"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
- 注意，从uniCloud读取出的数据，需要符合localdata的标准结果数据格式（参考上部分localdata），并需要把输出的字段as成规定的别名（value、text、group）。
|
||||||
|
|
||||||
|
|
||||||
|
## 示例文件地址：
|
||||||
|
|
||||||
|
### <font color=#FF0000> 强烈建议先看本页帮助，再看下面示例文件源码！</font>
|
||||||
|
|
||||||
|
```
|
||||||
|
/pages/ucharts/ucharts.vue（展示用uCharts全端运行的例子）
|
||||||
|
|
||||||
|
/pages/echarts/echarts.vue（展示H5和App用ECharts，小程序端用uCharts的例子）
|
||||||
|
|
||||||
|
/pages/unicloud/unicloud.vue（展示读取uniCloud数据库后直接渲染图表的例子）
|
||||||
|
|
||||||
|
/pages/updata/updata.vue（展示动态更新图表数据的例子）
|
||||||
|
|
||||||
|
/pages/other/other.vue（展示图表交互的例子：动态更新图表数据，渲染完成事件，获取点击索引，自定义tooltip，图表保存为图片，强制展示错误信息等）
|
||||||
|
|
||||||
|
/pages/format-u/format-u.vue（展示uCharts的formatter用法的例子）
|
||||||
|
|
||||||
|
/pages/format-e/format-e.vue（展示ECharts的formatter用法的例子）
|
||||||
|
|
||||||
|
/pages/tab/tab.vue（展示再tab选项卡中用法的例子，即父容器采用v-show或v-if时需要注意的问题）
|
||||||
|
|
||||||
|
/pages/layout/layout.vue（展示特殊布局用法的例子：swiper、scroll-view、绝对定位等布局）
|
||||||
|
|
||||||
|
/pages/canvas/canvas.vue（展示uCharts v2.0版本原生js用法的例子）
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 组件基本API参数
|
||||||
|
|
||||||
|
|属性名|类型|默认值|必填|说明|
|
||||||
|
| -- | -- | -- | -- | -- |
|
||||||
|
|type|String|null|`是`|图表类型，如全端用uCharts，可选值为pie、ring、rose、word、funnel、map、arcbar、line、column、bar、area、radar、gauge、candle、mix、tline、tarea、scatter、bubble <font color=#FF0000>（您也可以根据需求自定义新图表类型，需要在config-ucharts.js或config-echarts.js内添加，可参考config-ucharts.js内的"demotype"类型）</font>|
|
||||||
|
|chartData|Object|见说明|`是`|图表数据，常用的标准数据格式为{categories: [],series: []}，请按不同图表类型传入对应的标准数据。|
|
||||||
|
|localdata|Array|[]|`是`|图表数据，如果您觉得拼接上面chartData比较繁琐，可以通过使用localdata渲染，组件会根据传入的type类型，自动拼接categories或series数据（使用localdata就不必再传入chartData，详见 /pages/other/other.vue 中使用localdata渲染图表的例子）。【localdata和collection（uniCloud数据库）同时存在，优先使用localdata；如果localdata和chartData同时存在，优先使用chartData。<font color=#FF0000> 即chartData>localdata>collection的优先级</font>渲染图表】。|
|
||||||
|
|opts|Object|{}|否|uCharts图表配置参数(option)，请参考[【在线生成工具】](https://demo.ucharts.cn)<font color=#FF0000>注：传入的opts会覆盖默认config-ucharts.js中的配置，只需传入与config-ucharts.js中属性不一致的opts即可实现【同类型的图表显示不同的样式】。</font>|
|
||||||
|
|eopts|Object|{}|否|ECharts图表配置参数(option)，请参考[【ECharts配置手册】](https://echarts.apache.org/zh/option.html)传入eopts。<font color=#FF0000>注：1、传入的eopts会覆盖默认config-echarts.js中的配置，以实现同类型的图表显示不同的样式。2、eopts不能传递function，如果option配置参数需要function，请将option写在config-echarts.js中即可实现。</font>|
|
||||||
|
|loadingType|Number|2|否|加载动画样式，0为不显示加载动画，1-5为不同的样式，见下面示例。|
|
||||||
|
|errorShow|Boolean|true|否|是否在页面上显示错误提示，true为显示错误提示图片，false时会显示空白区域|
|
||||||
|
|errorReload|Boolean|true|否|是否启用点击错误提示图表重新加载，true为允许点击重新加载，false为禁用点击重新加载事件|
|
||||||
|
|errorMessage|String|null|否|自定义错误信息，强制显示错误图片及错误信息，当上面errorShow为true时可用。（组件会监听该属性的变化，只要有变化，就会强制显示错误信息！）。说明：1、一般用于页面网络不好或其他情况导致图表loading动画一直显示，可以传任意(不为null或者"null"或者空"")字符串强制显示错误图片及说明。2、如果组件使用了data-come属性读取uniCloud数据，组件会自动判断错误状态并展示错误图标，不必使用此功能。3、当状态从非null改变为null或者空时，会强制调用reload重新加载并渲染图表数据。|
|
||||||
|
|echartsH5|Boolean|false|否|是否在H5端使用ECharts引擎渲染图表|
|
||||||
|
|directory|String|'/'|否|二级目录名称，如果开启上面echartsH5即H5端用ECharts引擎渲染图表，并且项目未发布在website根目录，需要填写此项配置。例如二级目录是h5，则需要填写`/h5/`，左右两侧需要带`/`，发布到三级或更多层目录示例`/web/v2/h5/`|
|
||||||
|
|echartsApp|Boolean|false|否|是否在APP端使用ECharts引擎渲染图表|
|
||||||
|
|canvasId|String|见说明|否|默认生成32位随机字符串。如果指定canvasId，可方便后面调用指定图表实例，否则需要通过渲染完成事件获取自动生成随机的canvasId|
|
||||||
|
|canvas2d|Boolean|false|否|是否开启canvas2d模式，用于解决微信小程序层级过高问题，仅微信小程序端可用，其他端会强制关闭canvas2d模式。<font color=#FF0000>注：开启canvas2d模式，必须要传入上面的canvasId（随机字符串，不能是动态绑定的值，不能是数字），否则微信小程序可能会获取不到dom导致无法渲染图表！**开启后，开发者工具显示不正常，预览正常（不能“真机调试”,不能“真机调试”,不能“真机调试”）**</font>|
|
||||||
|
|background|String|none|否|背景颜色，默认透明none，可选css的16进制color值，如#FFFFFF|
|
||||||
|
|animation|Boolean|true|否|是否开启图表动画效果|
|
||||||
|
|inScrollView|Boolean|false|否|图表组件是否在scroll-view中，如果在请传true，否则会出现点击事件坐标不准确的现象|
|
||||||
|
|pageScrollTop|Number|0|否|如果图表组件是在scroll-view中，并且整个页面还存在滚动条，这个值应为绑定为页面滚动条滚动的距离，否则会出现点击事件坐标不准确的现象|
|
||||||
|
|reshow|Boolean|false|否|强制重新渲染属性，如果图表组件父级用v-show包裹，初始化的时候会获取不到元素的宽高值，导致渲染失败，此时需要把父元素的v-show方法复制到reshow中，组件检测到reshow值变化并且为true的时候会强制重新渲染|
|
||||||
|
|reload|Boolean|false|否|强制重新加载属性，与上面的reshow区别在于：1、reload会重新显示loading动画；2、如果组件绑定了uniCloud数据查询，通过reload会重新执行SQL语句查询，重新请求网络。而reshow则不会显示loading动画，只是应用现有的chartData数据进行重新渲染|
|
||||||
|
|disableScroll|Boolean|false|否|当在canvas中移动时，且有绑定手势事件时，禁止屏幕滚动以及下拉刷新（赋值为true时，在图表区域内无法拖动页面滚动）|
|
||||||
|
|tooltipShow|Boolean|true|否|点击或者鼠标经过图表时，是否显示tooltip提示窗，默认显示|
|
||||||
|
|tooltipFormat|String|undefined|否|自定义格式化Tooltip显示内容，详见下面【tooltipFormat格式化】|
|
||||||
|
|tooltipCustom|Object|undefined|否|（仅uCharts）如果以上系统自带的Tooltip格式化方案仍然不满足您，您可以用此属性实现更多需求，详见下面【tooltipCustom自定义】|
|
||||||
|
|startDate|String|undefined|否|需为标准时间格式，例如"2021-02-14"。用于配合uniClinetDB自动生成categories使用|
|
||||||
|
|endDate|String|undefined|否|需为标准时间格式，例如"2021-03-31"。用于配合uniClinetDB自动生成categories使用|
|
||||||
|
|groupEnum|Array|[]|否|当使用到uniCloud数据库时，group字段属性如果遇到统计枚举属性的字段，需要通过将DB Schema中的enum的描述定义指派给该属性，具体格式为[{value: 1,text: "男"},{value: 2,text: "女"}]|
|
||||||
|
|textEnum|Array|[]|否|当使用到uniCloud数据库时，text字段属性如果遇到统计枚举属性的字段，需要通过将DB Schema中的enum的描述定义指派给该属性，具体格式为[{value: 1,text: "男"},{value: 2,text: "女"}]|
|
||||||
|
|ontap|Boolean|true|否|是否监听@tap@cilck事件，禁用后不会触发组件点击事件|
|
||||||
|
|ontouch|Boolean|false|否|（仅uCharts）是否监听@touchstart@touchmove@touchend事件（赋值为true时，非PC端在图表区域内无法拖动页面滚动）|
|
||||||
|
|onmouse|Boolean|true|否|是否监听@mousedown@mousemove@mouseup事件，禁用后鼠标经过图表上方不会显示tooltip|
|
||||||
|
|on movetip|Boolean|false|否|（仅uCharts）是否开启跟手显示tooltip功能（前提条件，1、需要开启touch功能，即:ontouch="true"；2、并且opts.enableScroll=false即关闭图表的滚动条功能）（建议微信小程序开启canvas2d功能，否则原生canvas组件会很卡）|
|
||||||
|
|tapLegend|Boolean|true|否|（仅uCharts）是否开启图例点击交互事件 |
|
||||||
|
|
||||||
|
## 组件事件及方法
|
||||||
|
|
||||||
|
|事件名|说明|
|
||||||
|
| --| --|
|
||||||
|
|@complete|图表渲染完成事件，渲染完成会返回图表实例{complete: true, id:"xxxxx"(canvasId), type:"complete"}。可以引入config-ucharts.js/config-echarts.js来根据返回的id，调用uCharts或者ECharts实例的相关方法，详见other.vue其他图表高级应用。|
|
||||||
|
|@getIndex|获取点击数据索引，点击后返回图表索引currentIndex，图例索引（仅uCharts）legendIndex，等信息。返回数据：{type: "getIndex", currentIndex: 3, legendIndex: -1, id:"xxxxx"(canvasId), event: {x: 100, y: 100}（点击坐标值）}|
|
||||||
|
|@error|当组件发生错误时会触发该事件。返回数据：返回数据：{type:"error",errorShow:true/false(组件props中的errorShow状态值) , msg:"错误消息xxxx", id: "xxxxx"(canvasId)}|
|
||||||
|
|@getTouchStart|（仅uCharts）拖动开始监听事件。返回数据：{type:"touchStart",event:{x: 100, y: 100}（点击坐标值）,id:"xxxxx"(canvasId)}|
|
||||||
|
|@getTouchMove|（仅uCharts）拖动中监听事件。返回数据：{type:"touchMove",event:{x: 100, y: 100}（点击坐标值）,id:"xxxxx"(canvasId)}|
|
||||||
|
|@getTouchEnd|（仅uCharts）拖动结束监听事件。返回数据：{type:"touchEnd",event:{x: 100, y: 100}（点击坐标值）,id:"xxxxx"(canvasId)}|
|
||||||
|
|@scrollLeft|（仅uCharts）开启滚动条后，滚动条到最左侧触发的事件，用于动态打点，需要自行编写防抖方法。返回数据：{type:"scrollLeft", scrollLeft: true, id: "xxxxx"(canvasId)}|
|
||||||
|
|@scrollRight|（仅uCharts）开启滚动条后，滚动条到最右侧触发的事件，用于动态打点，需要自行编写防抖方法。返回数据：返回数据：{type:"scrollRight", scrollRight: true, id: "xxxxx"(canvasId)}|
|
||||||
|
|
||||||
|
## tooltipFormat格式化（uCharts和ECharts）
|
||||||
|
|
||||||
|
tooltipFormat类型为string字符串类型，需要指定config-ucharts.js/config-echarts.js中formatter下的属性值。因各小程序及app端通过组件均不能传递function类型参数，因此请先在config-ucharts.js/config-echarts.js内定义您想格式化的数据，然后在这里传入formatter下的key值，组件会自动匹配与其对应的function。如不定义该属性，组件会调用默认的tooltip方案，标准的tooltipFormat使用姿势如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
<qiun-data-charts
|
||||||
|
type="column"
|
||||||
|
:chartData="chartData"
|
||||||
|
tooltipFormat="tooltipDemo1"
|
||||||
|
⁄>
|
||||||
|
==================
|
||||||
|
config-ucharts.js
|
||||||
|
formatter:{
|
||||||
|
tooltipDemo1:function(item, category, index, opts){return item.data+'天'}
|
||||||
|
}
|
||||||
|
==================
|
||||||
|
config-echarts.js
|
||||||
|
formatter:{
|
||||||
|
tooltipDemo1:function(){
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
注意，config-ucharts.js内的formatter下的function需要携带(item, category, index, opts)参数，这4个参数都是uCharts实例内传递过来的数据，具体定义如下：
|
||||||
|
|
||||||
|
|属性名|说明|
|
||||||
|
| -- | -- |
|
||||||
|
|item|组件内计算好的当前点位的series[index]数据，其属性有data(继承series[index].format属性),color,type,style,pointShape,disableLegend,name,show|
|
||||||
|
|category|当前点位的X轴categories[index]分类名称（如果图表类型没有category，其值则为undefined）|
|
||||||
|
|index|当前点位的索引值|
|
||||||
|
|opts|全部uCharts的opts配置，包含categories、series等一切你需要的都在里面，可以根据index索引值获取其他相关数据。您可以在渲染完成后打印一下opts，看看里面都有什么，也可以自定义一些你需要的挂载到opts上，这样就可以根据需求更方便的显示自定义内容了。|
|
||||||
|
|
||||||
|
## tooltipCustom自定义（仅uCharts）
|
||||||
|
|
||||||
|
上面仅仅展示了Tooltip的自定义格式化，如果仍然仍然还不能还不能满足您的需求，只能看这里的方法了。tooltipCustom可以自定义在任何位置显示任何内容的文本，当然tooltipCustom可以和tooltipFormat格式化同时使用以达到更多不同的需求，下面展示了tooltip固定位置显示的方法：
|
||||||
|
|
||||||
|
```
|
||||||
|
<qiun-data-charts
|
||||||
|
type="column"
|
||||||
|
:chartData="chartData"
|
||||||
|
:tooltipCustom="{x:10,y:10}"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
tooltipCustom属性如下：
|
||||||
|
|
||||||
|
|属性名|类型|默认值|说明|
|
||||||
|
| -- | -- | -- | -- |
|
||||||
|
|x|Number|undefined|tooltip左上角相对于画布的X坐标|
|
||||||
|
|y|Number|undefined|tooltip左上角相对于画布的Y坐标|
|
||||||
|
|index|Number|undefined|相对于series或者categories中的索引值。当没有定义index或者index定义为undefined的时候，组件会自动获取当前点击的索引，并根据上面的xy位置绘制tooltip提示框。如果为0及以上的数字时，会根据您传的索引自动计算x轴方向的偏移量（仅直角坐标系有效）|
|
||||||
|
|textList|Array.Object|undefined|多对象数组，tooltip的文字组。当没有定义textList或者textList定义为undefined的时候，会调自动获取点击索引并拼接相应的textList。如传递[{text:'默认显示的tooltip',color:null},{text:'类别1：某个值xxx',color:'#2fc25b'},{text:'类别2：某个值xxx',color:'#facc14'},{text:'类别3：某个值xxx',color:'#f04864'}]这样定义好的数组，则会只显示该数组。|
|
||||||
|
|textList[i].text|String| |显示的文字|
|
||||||
|
|textList[i].color|Color| |左侧图表颜色|
|
||||||
|
|
||||||
|
## datacome属性及说明
|
||||||
|
|
||||||
|
- 通过配置datacome属性，可直接获取uniCloud云数据，并快速自动生成图表，使开发者只需专注业务及数据，无需关心如何拼接数据等不必要的重复工作，大大缩短开发时间。datacome属性及说明，详见[datacom组件规范](https://uniapp.dcloud.io/component/datacom?id=mixindatacom)
|
||||||
|
|
||||||
|
|属性名|类型|默认值|说明|
|
||||||
|
| -- | -- | -- | -- |
|
||||||
|
|collection|String| |表名。支持输入多个表名，用 , 分割|
|
||||||
|
|field|String| |查询字段，多个字段用 , 分割|
|
||||||
|
|where|String| |查询条件，内容较多，另见jql文档：[详情](https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=jsquery)|
|
||||||
|
|orderby|String| |排序字段及正序倒叙设置|
|
||||||
|
|groupby|String| |对数据进行分组|
|
||||||
|
|group-field|String| |对数据进行分组统计|
|
||||||
|
|distinct|Boolean|false|是否对数据查询结果中重复的记录进行去重|
|
||||||
|
|action|string| |云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理，详情。场景：前端无权操作的数据，比如阅读数+1|
|
||||||
|
|page-data|string|add|分页策略选择。值为 add 代表下一页的数据追加到之前的数据中，常用于滚动到底加载下一页；值为 replace 时则替换当前data数据，常用于PC式交互，列表底部有页码分页按钮|
|
||||||
|
|page-current|Number|0|当前页|
|
||||||
|
|page-size|Number|0|每页数据数量|
|
||||||
|
|getcount|Boolean|false|是否查询总数据条数，默认 false，需要分页模式时指定为 true|
|
||||||
|
|getone|Boolean|false|指定查询结果是否仅返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要[0]的方式获取。在值为 true 时，直接返回结果数据，少一层数组。一般用于非列表页，比如详情页|
|
||||||
|
|gettree|Boolean|false|是否查询树状数据，默认 false|
|
||||||
|
|startwith|String|''|gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询|
|
||||||
|
|limitlevel|Number|10|gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1|
|
||||||
|
|
||||||
|
## uni_modules目录说明
|
||||||
|
|
||||||
|
```
|
||||||
|
├── components
|
||||||
|
│ └── qiun-data-chatrs──────────# 组件主入口模块
|
||||||
|
│ └── qiun-error────────────────# 加载动画组件文件目录（可以修改错误提示图标以减少包体积）
|
||||||
|
│ └── qiun-loading──────────────# 加载动画组件文件目录（可以删除您不需要的动画效果以减少包体积）
|
||||||
|
├── js_skd
|
||||||
|
│ └── u-charts
|
||||||
|
│ ── └──config-echarts.js ──────# ECharts默认配置文件（非APP端内可作为实例公用中转）
|
||||||
|
│ ── └──config-ucharts.js ──────# uCharts默认配置文件（非APP端内可作为实例公用中转）
|
||||||
|
│ ── └──u-charts-v2.0.0.js──────# uCharts基础库v2.0.0版本，部分API与之前版本不同
|
||||||
|
├── static
|
||||||
|
│ └── app-plus──────────────────# 条件编译目录，仅编译到APP端
|
||||||
|
│ ── └──echarts.min.js──────────# Echarts基础库v4.2.1
|
||||||
|
│ └── h5────────────────────────# 条件编译目录，仅编译到H5端
|
||||||
|
│ ── └──echarts.min.js──────────# Echarts基础库v4.2.1
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 加载动画及错误提示
|
||||||
|
- 为保证编译后的包体积，加载动画引用作者wkiwi提供的[w-loading](https://ext.dcloud.net.cn/plugin?id=504)中选取5种，如需其他样式请看下面说明。
|
||||||
|
- loading的展示逻辑：
|
||||||
|
* 1、如果是uniCloud数据，从发送网络请求到返回数据期间展示。
|
||||||
|
* 2、如果是自行传入的chartData，当chartData.series=[]空数组的时候展示loading，也就是说初始化图表的时候，如果您没有数据，可以通过先传个空数组来展示loading效果，当chartData.series有数据后会自动隐藏loading图标。
|
||||||
|
- <font color=#FF0000>如您修改了qiun-data-charts.vue组件文件，请务必在升级前备份您的文件，以免被覆盖！！！建议将加载状态显示做成组件，避免下次升级时丢失后无法找到。</font>
|
||||||
|
|
||||||
|
|
||||||
|
## 配置文件说明
|
||||||
|
|
||||||
|
- <font color=#FF0000>注意，config-echarts.js和config-ucharts.js内只需要配置符合您项目整体UI的整体默认配置，根据需求，先用[【在线工具】](http://demo.ucharts.cn)调试好默认配置，并粘贴到配置文件中。</font>
|
||||||
|
- <font color=#FF0000>如果需要与configjs中不同的配置，只需要在组件上绑定:opts或者:eopts传入与默认配置不同的某个属性及值即可覆盖默认配置，极大降低了代码量。</font>
|
||||||
|
|
||||||
|
- ECharts默认配置文件：config-echarts.js
|
||||||
|
|
||||||
|
i、<font color=#FF0000>如您修改了默认配置文件，请务必在升级前备份您的配置文件，以免被覆盖！！！</font>
|
||||||
|
|
||||||
|
ii、ECharts配置手册：[https://echarts.apache.org/zh/option.html](https://echarts.apache.org/zh/option.html)
|
||||||
|
|
||||||
|
iii、"type"及"categories"属性为支持的图表属性，您可参照ECharts配置手册，配置您更多的图表类型，并将对应的图表配置添加至下面
|
||||||
|
|
||||||
|
iv、"formatter"属性，因各小程序及app端通过组件均不能传递function类型参数，因此请先在此属性下定义您想格式化的数据，组件会自动匹配与其对应的function
|
||||||
|
|
||||||
|
v、"seriesTemplate"属性，因ECharts的大部分配置均在series内，seriesTemplate作为series的模板，这样只需要在这里做好模板配置，组件的数组层chartData（或者localdata或者collection）的series会自动挂载模板配置。如需临时或动态改变seriesTemplate，可在:eopts中传递seriesTemplate，详见pages/echarts/echarts.vue中的曲线图。
|
||||||
|
|
||||||
|
vi、ECharts配置仅可用于H5或者APP端，并且配置`echartsH5`或`echartsApp`为`true`时可用
|
||||||
|
|
||||||
|
- uCharts默认配置文件：config-ucharts.js
|
||||||
|
|
||||||
|
i、<font color=#FF0000>如您修改了默认配置文件，请务必在升级前备份您的配置文件，以免被覆盖！！！</font>
|
||||||
|
|
||||||
|
ii、v2版本后的uCharts基础库不提供配置手册，您可以使用在线配置生成工具来快速生成配置：[http://demo.ucharts.cn](http://demo.ucharts.cn)
|
||||||
|
|
||||||
|
iii、"type"及"categories"属性为支持的图表属性，不支持添加uCharts基础库没有的图表类型
|
||||||
|
|
||||||
|
iv、"formatter"属性因各小程序及app端通过组件均不能传递function类型参数，因此请先在此属性下定义您想格式化的数据，组件会自动匹配与其对应的function
|
||||||
|
|
||||||
|
v、uCharts配置可跨全端使用
|
||||||
|
|
||||||
|
|
||||||
|
## 常见问题及注意事项
|
||||||
|
|
||||||
|
- `图表无法显示问题`：
|
||||||
|
* 请先检查您的HBuilderX版本，要求高于3.1.0+。
|
||||||
|
* 1、如果是首次导入插件不显示，或者报以下未注册`qiun-data-charts`的错误：
|
||||||
|
> Unknown custom element: < qiun-data-charts > - did you register the component correctly? For recursive components, make sure to provide the "name" option.
|
||||||
|
* 2、<font color=#FF0000>请【重启HBuilderX】或者【重启项目】或者【重启开发者工具】或者【删除APP基座】重新运行，避免缓存问题导致不能显示。</font>
|
||||||
|
* 3、如果是基于uniapp的vue-cli项目，1、请 npm update 升级uniapp依赖为最新版本；2、请尝试清理node-modules，重新install，还不行就删除项目，再重新install。如果仍然不行，请检查uniapp依赖是否为最新版本，再重试以上步骤。如果仍然不行，请使用<font color=#FF0000>【非uni_modules版本】</font>组件，最新非uni_modules版本在码云发布，[点击此处获取](https://gitee.com/uCharts/uCharts/tree/master/qiun-data-charts%EF%BC%88%E9%9D%9Euni-modules%EF%BC%89)。。
|
||||||
|
* 4、请检查控制台是否有报错或提示信息，如果没有报错，也没有提示信息，并且检查视图中class="charts-box"这个元素的宽高均为0，请修改父元素的css样式或进行下面第4步检查。
|
||||||
|
* 5、检查父级是否使用了v-show来控制显示。如果页面初始化时组件处于隐藏状态，组件则无法正确获取宽高尺寸，此时<font color=#FF0000>需要组件内绑定reshow属性（逻辑应与父级的v-show的逻辑相同）</font>，强制重新渲染图表，例如:reshow="父级v-show绑定的事件"。
|
||||||
|
* 6、如果在微信小程序端开启了canvas2d模式<font color=#FF0000>（不能使用真机调试，请直接预览）</font>不显示图表：
|
||||||
|
* a、请务必在组件上定义canvasId，不能为纯数字、不能为变量、不能重复、尽量长一些。
|
||||||
|
* b、请检查微信小程序的基础库，修改至2.16.0或者最新版本的基础库。
|
||||||
|
* c、请检查父元素或父组件是否用v-if来控制显示，如有请改为v-show，并将v-show的逻辑绑定至组件。
|
||||||
|
- `formatter格式化问题`：无论是uCharts还是ECharts，因为组件不能传递function，所有的formatter均需要变成别名format来定义，并在config-ucharts.js或config-echarts.js配置对应的formatter方法，组件会根据format的值自动替换配置文件中的formatter方法。（参考示例项目pages/format/format.vue）
|
||||||
|
- `图表抖动问题`：如果开启了animation动画效果，由于组件内开启了chartData和opts的监听，当数据变化时会重新渲染图表，<font color=#FF0000>建议整体改变chartData及opts的属性值</font>，而不要通过循环或遍历来改变this实例下的chartData及opts，例如先定义一个临时变量，拼接好数据后再整体赋值。（参考示例项目pages/updata/updata.vue）
|
||||||
|
- `微信小程序报错Maximum call stack size exceeded问题`:由于组件内开启了chartData和opts的监听，当数据变化时会重新渲染图表，<font color=#FF0000>建议整体改变chartData及opts的属性值</font>，而不要通过循环或遍历来改变this实例下的chartData及opts，例如先定义一个临时变量，拼接好数据后再整体赋值。（参考示例项目pages/updata/updata.vue）
|
||||||
|
- `Loading状态问题`：如不使用uniClinetDB获取数据源，并且需要展示Loading状态，请先清空series，使组件变更为Loading状态，即this.chartData.series=[]即可展示，然后再从服务端获取数据，拼接完成后再传入this.chartData。如果不需要展示Loading状态，则不需要以上步骤，获取到数据，拼接好标准格式后，直接赋值即可。
|
||||||
|
- `微信小程序图表层级过高问题`：因canvas在微信小程序是原生组件，如果使用自定义tabbar或者自定义导航栏，图表则会超出预期，此时需要给组件的canvas2d传值true来使用type='2d'的功能，开启此模式后，<font color=#FF0000>一定要在组件上自定义canvasId，不能为数字，不能动态绑定，要为随机字符串！不能“真机调试”，不能“真机调试”，不能“真机调试”</font>开发者工具显示不正常，图表层级会变高，而正常预览或者发布上线则是正常状态，开发者不必担心，一切以真机预览为准（因微信开发者工具显示不正确，canvas2d这种模式下给调试带来了困难，开发时，可以先用:canvas2d="false"来调试，预览无误后再改成true）。
|
||||||
|
- `开启canvas2d后图表不显示问题`：开启canvas2d后，需要手动指定canvasId，并且父元素不能含有v-if，否则会导致获取不到dom节点问题，请将v-if改成v-show，更多开启canvas2d不显示问题，请参考示例项目pages/layout/layout.vue文件，对照示例项目修改您的项目。
|
||||||
|
- `MiniPorgramError U.createEvent is ot a function`：此问题一般是微信小程序开启了canvas2d，并点击了“真机调试导致”，参考上面【微信小程序图表层级过高问题】解决办法，开启2d后，不可以真机调试，只能开发者工具调试或者扫二维码“预览”。
|
||||||
|
- `在图表上滑动无法使页面滚动问题`：此问题是因为监听了touchstart、touchmove和touchend三个事件，或者开启了disableScroll属性，如果您的图表不需要开启图表内的滚动条功能，请禁用这三个方法的监听，即:ontouch="false"或者:disableScroll="false"即可（此时图表组件默认通过@tap事件来监听点击，可正常显示Tooltip提示窗）。
|
||||||
|
- `开启滚动条无法拖动图表问题`：此问题正与以上问题相反，是因为禁用了监听touchstart、touchmove和touchend三个事件，请启用这三个方法的监听，即在组件上加入 :ontouch="true" 即可。注意，不要忘记在opts里需要配置enableScroll:true，另外如果需要显示滚动条，需要在xAxis中配置scrollShow:ture，及itemCount（单屏数据密度）数量的配置。
|
||||||
|
- `开启滚动条后图表两侧有白边问题`：此问题是因为组件上的background为none或者没有指定，请在组件上加入background="#000000"(您的背景色)。如果父元素为图片，尽量不要开启滚动条，此时图表是透明色，可以显示父元素背景图片。
|
||||||
|
- `开启滚动条后动态打点更新数据滚动条位置问题`：开启滚动条后动态打点，需要把opts中update需要赋值为true，来启用uCharts的updateData方法来更新视图，详见示例项目pages/updata/updata.vue。
|
||||||
|
- `地图变形问题`：此问题是因为您引用的geojson地图数据的坐标系可能是地球坐标(WGS84)导致，需要开启【是否进行WGS84转墨卡托投影】功能。开启后因大量的数据运算tooltip可能会不跟手，建议自行转换为墨卡托坐标系，可参照源码内function lonlat2mercator()。其他地图数据下载地址：[http://datav.aliyun.com/tools/atlas/](http://datav.aliyun.com/tools/atlas/)
|
||||||
|
- `支付宝（钉钉）小程序无法点击问题`：请检查支付宝小程序开发者工具中，点击【详情】，在弹出的【项目详情】中【取消】启用小程序基础库 2.0 构建，一定不要勾选此项。
|
||||||
|
- `uni-simple-router中使用问题`：如果使用uni-simple-router路由插件，H5开启完全路由模式（即h5:{vueRouterDev:true}）时，会导致组件内uni.xxx部分方法失效，引发节点获取不正常报错，请使用普通模式即可。
|
||||||
|
- `Y轴刻度标签数字重复问题`：此问题一般是series数据内数值较小，而Y轴网格数量较多，并且Y轴刻度点显示整数导致。解决方法1，Y轴刻度值保留两位小数，组件上传值 :opts="{yAxis:{data:[{tofix:2}]}}"；解决方法2，修改Y轴网格数量为series中的最大值的数量，例如series中最大值为3，那么修改yAxis.splitNumber=3即可；解决方法3，根据Y轴网格数量修改Y轴最大值 :opts="{yAxis:{data:[{max:5}]}}"。
|
||||||
|
- `柱状图柱子高度不符合预期问题`：此问题是Y轴最小值未默认为0的问题导致，组件上传值 :opts="{yAxis:{data:[{min:0}]}}"即可解决。
|
||||||
|
- `饼图类百分比改其他文案的问题`：参考示例项目pages/format-u/format-u.vue，在chartData的series中使用format。
|
||||||
|
|
||||||
|
## [更多常见问题以官方网站【常见问题】为准](http://demo.ucharts.cn)
|
||||||
|
|
||||||
|
## QQ群号码
|
||||||
|
## <font color=#FF0000> 请先完整阅读【帮助文档】及【常见问题】3遍，右侧蓝色按钮【示例项目】请看2遍！不看文档不看常见问题进群就问的拒绝回答问题！咨询量太大请理解作者！ </font>
|
||||||
|
- 放在下面是为了让您先看文档，看好群分类，再进群！！
|
||||||
|
- 交流群1：371774600（已满）
|
||||||
|
- 交流群2：619841586（不回答本组件问题，只回答uCharts基础库问题）
|
||||||
|
- 交流群3：955340127<font color=#FF0000>（优先解答本组件问题，其他问题群友互助）</font>
|
||||||
|
- 口令`uniapp`
|
||||||
|
|
||||||
|
|
||||||
|
## 相关链接
|
||||||
|
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
|
||||||
|
- [uCharts官网](https://www.ucharts.cn)
|
||||||
|
- [uCharts在线生成工具](http://demo.ucharts.cn)<font color=#FF0000>（注：v2.0版本后将不提供配置手册，请通过在线生成工具生成图表配置）</font>
|
||||||
|
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [](https://gitee.com/uCharts/uCharts/stargazers)
|
||||||
|
- [uCharts基础库更新记录](https://gitee.com/uCharts/uCharts/wikis/%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95?sort_id=1535998)
|
||||||
|
- [uCharts改造教程](https://gitee.com/uCharts/uCharts/wikis/%E6%94%B9%E9%80%A0uCharts%E6%89%93%E9%80%A0%E4%B8%93%E5%B1%9E%E5%9B%BE%E8%A1%A8?sort_id=1535997)
|
||||||
|
- [图表组件在项目中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||||
|
- [ECharts官网](https://echarts.apache.org/zh/index.html)
|
||||||
|
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
|
||||||
|
- [`wkiwi`提供的w-loading组件地址](https://ext.dcloud.net.cn/plugin?id=504)
|
||||||
23
uni_modules/qiun-data-charts/static/app-plus/echarts.min.js
vendored
Normal file
23
uni_modules/qiun-data-charts/static/app-plus/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
23
uni_modules/qiun-data-charts/static/h5/echarts.min.js
vendored
Normal file
23
uni_modules/qiun-data-charts/static/h5/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user