TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
唐明明
2022-06-07 16:37:03 +08:00
parent b1e8d774ff
commit 1c6091371e
1706 changed files with 225309 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

459
components/add-goods-template/add-goods-template.vue Normal file
View File

@@ -0,0 +1,459 @@
<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>{{title}}</view>
<span @click="confirm">确认</span>
</view>
<!-- 商品详情 -->
<goodsList
:lists="selectGoods"
type="dian-right"
@tabGoodsInfo="tabGoodsInfo(selectGoods)"
class="goodsList"
/>
<view
class="delThis"
@click="delThis"
v-if="deleteThis!==''"
>
<u-icon
name="trash"
color="#999"
size="20"
:label="deleteThis"
labelPos="right"
labelSize="13"
labelColor="#999"
/>
</view>
<!-- 输入 -->
<view class="add-input">
<view class="left"><span>{{total}}千卡</span>{{Number(inputValue.join("")) || '0.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",
calory: 1, // 千卡值
title: "", // 弹窗 title
deleteThis: "", // 删除这条数据，为空不有删除功能
};
},
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,
},
},
created() {
// 获取每一百克的看千卡值
this.calory = this.selectGoods[0].calory;
if (this.selectGoods[0].weight) {
let weight = this.selectGoods[0].weight + "";
this.inputValue = weight.split("");
this.title = "修改食物信息";
this.deleteThis = "删除这条数据";
return;
}
this.title = "新增食物信息";
this.inputValue = ["1", "0", "0", ".", "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",
"删除",
];
},
// 根据输入的值计算 总能量
total() {
return (
(Number(this.inputValue.join("")) * Number(this.calory)) /
100
).toFixed(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: {
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;
}
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();
},
// 删除这条数据
delThis(item) {
this.$emit("delThis");
},
// 跳转到食品详情
tabGoodsInfo(e) {
this.$emit("tabGoodsInfo", { title: e[0].name, id: e[0].food_id });
},
},
};
</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;
.goodsList {
padding: $padding;
}
.delThis {
padding: $padding;
}
.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
View 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>

311
components/custom-digitKeyboard/custom-digitKeyboard.vue Normal file
View File

@@ -0,0 +1,311 @@
<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;
}
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>

330
components/date-template/index.vue Normal file
View File

@@ -0,0 +1,330 @@
<!--
* @Description:日历模板
* @Author: Aimee·Zhang
* @Date: 2022-02-08 09:06:45
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-02-08 09:06:45
-->
<template>
<view class="date">
<u-popup :show="dateShow" zIndex="10099890" @close="closeDate" mode="bottom" :safeAreaInsetBottom="true">
<view class="date-content">
<view class="title"><span @click="datePreNext('before')">上一月</span>{{month}}<span
@click="datePreNext('after')">下一月</span></view>
<view class="date-item">
<view class="week">
<view class="week-item" v-for="(item,index) in weekList" :key="index">{{item}}</view>
</view>
<!-- 饮食模块 -->
<block v-if="type === 'foods'">
<view class="week" style="padding-top: 30rpx;">
<view v-for="item in lists" :key="item.today" @click="dateClick(item)"
:class="['week-item',{'is_past':!item.is_month},{'is_today':item.today === today},{'is_intake0':item.intake === 1},{'is_intake1':item.intake === 2},{'is_intake2':item.intake === 3}]">
{{item.day}}
</view>
</view>
<view class="des">
<block> <view class="des-item">吃少了</view> <view class="des-item">正好</view> <view class="des-item">吃多了</view> </block>
<view class="back" @click="backDate"> 回今天 </view>
</view>
</block>
<!-- 喝水模块 -->
<block v-if="type === 'drink'">
<view class="week" style="padding-top: 30rpx;">
<view v-for="item in lists" :key="item.today" @click="dateClick(item)" :class="['week-item',{'is_past':!item.is_month},{'is_today':item.today === today}]">
{{item.day}}
<u-image class='waterIcon' :src="require('@/static/imgs/water-1.png')" v-if="item.drink === 2" :lazy-load="true" width="20rpx" radius="10rpx" mode="widthFix" />
<u-image class='waterIcon' :src="require('@/static/imgs/water-2.png')" v-if="item.drink === 1" :lazy-load="true" width="20rpx" radius="10rpx" mode="widthFix" />
</view>
</view>
<view class="drink">
<block>
<view class="drink-item">
<u-image class='waterIcon' :src="require('@/static/imgs/water-1.png')" :lazy-load="true" width="22rpx" radius="10rpx" mode="widthFix" />未完成指标
</view>
<view class="drink-item">
<u-image class='waterIcon' :src="require('@/static/imgs/water-2.png')" :lazy-load="true" width="22rpx" radius="10rpx" mode="widthFix" /> 完成指标
</view>
</block>
<view class="back" @click="backDate"> 回今天 </view>
</view>
</block>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
weekList: ['日', '一', '二', '三', '四', '五', '六'],
};
},
props: {
/**
* lists 传过来的列表
* type foods（食物运动） drink（饮水）weight（体重）
* today 勾选时间
* month 勾选日期
* dateShow 页面是否显示
**/
lists: {
type: Array,
default: [],
},
type: {
type: String,
default: "",
},
today: {
type: String,
default: moment(new Date()).format('YYYY-MM-DD')
},
month: {
type: String,
default: moment(new Date()).format('YYYY-MM')
},
dateShow: {
type: Boolean,
default: false
}
},
methods: {
// 选择日期
dateClick(item) {
this.$emit('dateClick', item)
},
// 返回今天
backDate() {
this.$emit('backDate', '')
},
// 点击上一个月或者下一个月 before 上一月 after下一个月
datePreNext(type) {
this.$emit('datePreNext', type)
},
// 关闭日历
closeDate() {
this.$emit('closeDate')
}
},
};
</script>
<style lang="scss" scoped>
.date {
// 日历弹窗
.date-content {
width: 100%;
padding: $padding *2;
min-height: 800rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.title {
font-size: $title-size + 4;
color: #20845f;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
span {
display: inline-block;
padding: $padding;
font-size: $title-size-m;
color: #cacaca;
font-weight: normal;
}
}
.date-item {
padding-top: $padding;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.drink {
display: flex;
color: #cacaca;
flex-direction: row;
align-items: center;
box-sizing: border-box;
font-size: $title-size-m;
justify-content: center;
margin-top: $margin;
width: 100%;
.drink-item {
padding-right: 40rpx;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
u-image{
padding-right: 10rpx;
}
}
}
.des {
display: flex;
color: #cacaca;
flex-direction: row;
align-items: center;
box-sizing: border-box;
font-size: $title-size-m;
justify-content: center;
margin-top: $margin;
width: 100%;
.des-item {
padding-left: 40rpx;
padding-right: 10rpx;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
&:before {
content: '';
position: absolute;
left: 14rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background: #fa624d;
}
&:nth-child(2):before {
background: #fbbf0f;
}
&:nth-child(1):before {
background: #02c7bd;
}
}
}
.back {
margin-left: 100rpx;
background-color: rgba($color: $main-color, $alpha: 1);
color: #fff;
padding: 10rpx $padding;
border-radius: $radius + 10;
}
}
.week {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
flex-wrap: wrap;
width: 100%;
.week-item {
width: 14.28%;
height: 90rpx;
line-height: 90rpx;
font-size: $title-size-m + 2;
color: #888;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
&::before {
content: '';
width: 14rpx;
height: 14rpx;
border-radius: 50%;
position: absolute;
bottom: 0;
// background: #02c7bd;
}
}
.waterIcon {
position: absolute;
width: 30rpx !important;
bottom: -12rpx;
padding-left: 10rpx;
}
&:nth-child(1),
&:nth-child(7),
&:nth-child(8),
&:nth-child(14),
&:nth-child(15),
&:nth-child(21),
&:nth-child(22),
&:nth-child(28),
&:nth-child(29),
&:nth-child(35),
{
color: rgba($color: #000000, $alpha: 0.4);
}
}
// 吃饭样式
.is_intake0::before {
background: #02c7bd !important;
}
.is_intake1::before {
background: #fbbf0f !important;
}
.is_intake2::before {
background: #fa624d !important;
}
.is_today {
color: #fff !important;
position: relative;
z-index: 1;
&:after {
content: '';
width: 50rpx;
height: 50rpx;
position: absolute;
border-radius: 50%;
background-color: $main-color;
color: #Fff;
z-index: -1;
}
}
.is_past {
color: rgba($color: #000000, $alpha: 0.1) !important;
}
}
}
</style>

227
components/foods/index.vue Normal file
View File

@@ -0,0 +1,227 @@
<!--
* @Description:是添加早中晚餐时候用的视频列表
* @Author: Aimee·Zhang
* @Date: 2022-01-11 12:08:34
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-20 10:03:43
-->
<template>
<view class="foods--lists">
<view
class="foods-lists"
v-for="foodsItem in lists"
:key="foodsItem.food_id"
>
<view class="lists-left">
<u-image
:src="foodsItem.cover?foodsItem.cover: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(foodsItem)"
>
<view class="lists-title">
{{foodsItem.name}}
<view class="des"><span>{{foodsItem.calory}}</span> 千卡/100克</view>
</view>
<view :class="['dian', foodsItem.color === 'high'?'dian2':foodsItem.color === 'low'?'dian3':'dian1']"></view>
</view>
<!-- 有'点'和'右箭头' -->
<view
class="lists-right"
v-else-if="type==='dian-right'"
@click="tabGoodsInfo(foodsItem)"
>
<view class="lists-title">
{{foodsItem.name}}
<view class="des"><span>{{foodsItem.calory}}</span> 千卡/100克</view>
</view>
<view class="dianlists">
<view :class="['dian', foodsItem.color === 'high'?'dian2':foodsItem.color === 'low'?'dian3':'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.stop="editGoods(foodsItem)"
@longpress.stop="longClickGoods(foodsItem)"
>
<view class="lists-title">
{{foodsItem.name}}
<view class="des">{{foodsItem.weight}}克</view>
</view>
<view class="lists-right1">
{{foodsItem.calory}}<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(item) {
this.$emit("addGoods", item);
},
// 跳转到食品详情
tabGoodsInfo(item) {
this.$emit("tabGoodsInfo", { title: item.name, id: item.food_id });
},
// 编辑食品
editGoods(item) {
this.$emit("editGoods", item);
},
// 长按删除
longClickGoods(item) {
this.$emit("longClickGoods", item);
},
},
};
</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>

91
components/property/record.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<view>
<block v-if="list.length > 0">
<view class="record--item" v-for="(item, index) in list" :key="index">
<view class="title ellipsis">{{item.hash || '-'}}</view>
<view class="time ellipsis">{{item.block_time || '-'}}</view>
<view class="webkit-box variation">
<view class="ellipsis" :class="item.is_in ? 'add': 'remove'">{{item.is_in ? '+': '-'}}{{item.amount}}</view>
<view class="symbol">{{item.assets.symbol}}</view>
</view>
</view>
</block>
<block v-else>
<view class="record--null webkit-box">
<image src="@/static/icon/logs-null.png" mode="widthFix" />
<view>没有相关数据~</view>
</view>
</block>
</view>
</template>
<script>
export default {
name:"property",
props:{
list: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.record--item{
padding: $padding 320rpx $padding 0;
border-bottom: solid 1rpx $border-color;
position: relative;
min-height: 50rpx;
.variation{
position: absolute;
right: 0;
top: $margin;
bottom: $margin;
width: 300rpx;
text-align: right;
font-weight: bold;
&>label{
font-size: 80%;
}
.symbol{
color: $text-gray;
font-weight: normal;
font-size: $title-size-m;
}
.add{
color: $text-price;
}
.remove{
color: $main-color;
}
}
.title{
line-height: 50rpx;
}
.time{
font-size: $title-size-m;
color: $text-gray;
}
}
// 数据空
.record--null{
padding-top: $padding * 3;
text-align: center;
color: $text-gray;
font-size: $title-size;
height: 50vh;
box-sizing: border-box;
line-height: 60rpx;
image{
width: 168rpx;
}
}
</style>

208
components/sports/addPopup.vue Normal file
View File

@@ -0,0 +1,208 @@
<!--
* @Description:运动列表
* @Author: Aimee·Zhang
* @Date: 2022-01-19 15:07:02
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-20 09:09:59
-->
<template>
<view class="foods--lists">
<u-popup
:show="addSportsShow"
:round="4"
mode="center"
>
<view class="popup">
<view class="popup-title">
<span @click="cancleSport">取消</span>
<span class="title">{{selectSports.title || '新增运动'}}</span>
<span @click="comfirmSport">确认</span>
</view>
<view class="popup-item">
<u-image
:lazy-load="true"
:src="selectSports.cover?selectSports.cover:require('../../static/imgs/apple.png')"
radius="10"
width="140rpx"
height="140rpx"
class="goods-img"
/>
<view class="popup-item-title">
{{selectSports.name}}
<view class="des"><span>{{selectSports.calory || '0.0'}}</span> 千卡/60分钟</view>
</view>
<u-icon
v-if="selectSports.title === '编辑运动'"
name="trash"
color="#ddd"
size="16"
label="删除这条数据"
labelColor="#ddd"
:bold="true"
@click="delSport"
style="padding-top: 30rpx;"
/>
</view>
<u-input
placeholder="60"
class="select-time"
v-model="duration"
type="number"
>
<u--text
text="运动时间："
slot="prefix"
margin="0 3px 0 0"
type="tips"
/>
<u--text
text="分钟"
slot="suffix"
margin="0 3px 0 0"
type="tips"
/>
</u-input>
<view class="all-calory"> ≈ <span> {{total}} </span> 千卡</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
duration: 60,
};
},
props: {
selectSports: {
type: Object,
default: {},
},
addSportsShow: {
type: Boolean,
default: false,
},
},
computed: {
total() {
return ((this.selectSports.calory * this.duration) / 60).toFixed(0);
},
},
watch: {
addSportsShow() {
this.duration = 60;
},
selectSports(val) {
console.log(val);
this.duration = val.duration;
console.log("监听传过来的参数");
},
},
methods: {
// 弹窗确认和取消功能
comfirmSport() {
this.$emit("comfirmSport", true, this.duration);
},
// 取消按钮触发事件
cancleSport() {
this.$emit("cancleSport", false);
},
// 删除按钮触发事件
delSport() {
this.$emit("delSport");
},
},
};
</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;
// 弹窗样式
.popup {
width: 600rpx;
// min-height: 700rpx;
position: relative;
.popup-title {
color: $main-color;
font-size: $title-size-m;
border-bottom: solid 1rpx #f9f9f9;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
span {
padding: $padding + 10 $padding;
}
.title {
color: $text-color;
font-size: $title-size;
font-weight: bold;
}
}
.popup-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: $padding * 2 $padding $padding $padding;
font-size: $title-size-m;
color: $text-color;
border-bottom: solid 1rpx #f9f9f9;
.popup-item-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding-top: $padding;
.des {
padding-top: $padding * 0.4;
span {
color: $text-price;
padding-right: $padding * 0.3;
}
}
}
}
.select-time {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: $padding 0;
// background: $main-color;
color: #fff;
margin: $margin * 3 0 $margin * 2 0;
width: 90%;
border-radius: 10rpx;
margin-left: 5%;
}
.all-calory {
position: absolute;
bottom: $padding * 6;
right: $padding;
font-size: $title-size-m;
color: $text-gray-m;
span {
padding: 0 $padding * 0.4;
font-size: $title-size + 10;
color: $main-color;
}
}
}
}
</style>

212
components/sports/index.vue Normal file
View File

@@ -0,0 +1,212 @@
<!--
* @Description:运动列表
* @Author: Aimee·Zhang
* @Date: 2022-01-19 15:07:02
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-20 10:03:27
-->
<template>
<view class="foods--lists">
<view
class="foods-lists"
v-for="sportItem in lists"
:key="sportItem.sport_id"
>
<view class="lists-left">
<u-image
:src="sportItem.cover?sportItem.cover:require('../../static/imgs/apple.png')"
:lazy-load="true"
v-if="type === 'add'"
radius="10rpx"
width="100rpx"
height="100rpx"
class="goods-img"
/>
<!-- 新增-->
<view
class="lists-right"
v-if="type === 'add'"
@click="addSport(sportItem)"
>
<view class="lists-title">
{{sportItem.name}}
<view class="des"><span>{{sportItem.calory}}</span> 千卡/60分钟</view>
</view>
<u-icon
name="arrow-right"
color="#ddd"
size="13"
:bold="true"
/>
</view>
<!-- 显示结果 -->
<u-image
:src="sportItem.sport.cover?sportItem.sport.cover:require('../../static/imgs/apple.png')"
:lazy-load="true"
v-if="type === 'edit'"
radius="10rpx"
width="100rpx"
height="100rpx"
class="goods-img"
/>
<view
class="lists-right"
v-if="type==='edit'"
@click.stop="editSport(sportItem)"
@longpress.stop="longClick(sportItem)"
>
<view class="lists-title">
{{sportItem.sport.name}}
<view class="des">{{sportItem.duration}}分钟</view>
</view>
<view class="lists-right1">
{{sportItem.calory}}<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: {
lists: {
type: Array,
default: [],
},
type: {
type: String,
default: "add",
},
},
methods: {
// 添加运动模块
addSport(item) {
this.$emit("addSport", item);
},
// 编辑运动
editSport(item) {
this.$emit("editSport", item);
},
// 长按删除触发事件
longClick(item) {
this.$emit("longClick", item);
},
},
};
</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;
opacity: 0.4;
}
.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>

188
components/tki-file-manager/tki-file-manager.vue Normal file
View File

@@ -0,0 +1,188 @@
<template xlang="wxml" minapp="mpvue">
<view>
</view>
</template>
<script>
export default {
name: 'tki-file-manager',
props: {},
data() {
return {}
},
methods: {
_openFile() {
// #ifdef APP-PLUS
if (plus.os.name.toLowerCase() != "android") {
uni.showModal({
title: '提示',
content: '仅支持Android平台',
success: function(res) {}
});
return false
}
let that = this
// java 代码来自 http://www.cnblogs.com/panhouye/archive/2017/04/23/6751710.html
let main = plus.android.runtimeMainActivity();
let Intent = plus.android.importClass("android.content.Intent");
//
let fileIntent = new Intent(Intent.ACTION_GET_CONTENT)
//fileIntent.setType(“image/*”);//选择图片
//fileIntent.setType(“audio/*”); //选择音频
//fileIntent.setType(“video/*”); //选择视频 （mp4 3gp 是android支持的视频格式）
//fileIntent.setType(“video/*;image/*”);//同时选择视频和图片
fileIntent.setType("*/*"); //无类型限制
fileIntent.addCategory(Intent.CATEGORY_OPENABLE);
main.startActivityForResult(fileIntent, 1);
// 获取回调
main.onActivityResult = function(requestCode, resultCode, data) {
let Activity = plus.android.importClass("android.app.Activity");
let ContentUris = plus.android.importClass("android.content.ContentUris");
let Cursor = plus.android.importClass("android.database.Cursor");
let Uri = plus.android.importClass("android.net.Uri");
let Build = plus.android.importClass("android.os.Build");
let Environment = plus.android.importClass("android.os.Environment");
let DocumentsContract = plus.android.importClass("android.provider.DocumentsContract");
let MediaStore = plus.android.importClass("android.provider.MediaStore");
// 给系统导入 contentResolver
let contentResolver = main.getContentResolver()
plus.android.importClass(contentResolver);
// 返回路径
let path = '';
if (resultCode == Activity.RESULT_OK) {
let uri = data.getData()
if ("file" == uri.getScheme().toLowerCase()) { //使用第三方应用打开
path = uri.getPath();
return;
}
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) { //4.4以后
path = getPath(this, uri);
} else { //4.4以下下系统调用方法
path = getRealPathFromURI(uri)
}
// 回调
that.$emit('result', path)
}
// 4.4 以上 从Uri 获取文件绝对路径
function getPath(context, uri) {
let isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;
let scheme = uri.getScheme().toLowerCase()
if (isKitKat && DocumentsContract.isDocumentUri(context, uri)) {
// ExternalStorageProvider
if (isExternalStorageDocument(uri)) {
let docId = DocumentsContract.getDocumentId(uri);
let split = docId.split(":");
let type = split[0];
// 如果是手机内部存储
if ("primary" == type.toLowerCase()) {
return Environment.getExternalStorageDirectory() + "/" + split[1];
} else {
return '/storage/' + type + "/" + split[1];
}
}
// DownloadsProvider
else if (isDownloadsDocument(uri)) {
let docId = DocumentsContract.getDocumentId(uri);
let split = docId.split(":");
return split[1]
// console.log(id)
// let contentUri = ContentUris.withAppendedId(Uri.parse("content://downloads/public_downloads"), id);
// return getDataColumn(context, contentUri, null, null);
}
// MediaProvider
else if (isMediaDocument(uri)) {
let docId = DocumentsContract.getDocumentId(uri);
let split = docId.split(":");
let type = split[0];
let contentUri = null;
if ("image" == type.toLowerCase()) {
contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
} else if ("video" == type.toLowerCase()) {
contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
} else if ("audio" == type.toLowerCase()) {
contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
}
let selection = "_id=?";
let selectionArgs = [split[1]];
return getDataColumn(context, contentUri, selection, selectionArgs);
}
}
// MediaStore (and general)
else if ("content" == scheme) {
return getDataColumn(context, uri, null, null);
}
// File
else if ("file" == scheme) {
return uri.getPath();
}
}
// 4.4 以下 获取 绝对路径
function getRealPathFromURI(uri) {
let res = null
let proj = [MediaStore.Images.Media.DATA]
let cursor = contentResolver.query(uri, proj, null, null, null);
if (null != cursor && cursor.moveToFirst()) {
;
let column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
res = cursor.getString(column_index);
cursor.close();
}
return res;
}
// 通过uri 查找出绝对路径
function getDataColumn(context, uri, selection, selectionArgs) {
let cursor = null;
let column = "_data";
let projection = [column];
// let contentResolver = context.getContentResolver()
// plus.android.importClass(contentResolver);
cursor = contentResolver.query(uri, projection, selection, selectionArgs, null);
if (cursor != null && cursor.moveToFirst()) {
let column_index = cursor.getColumnIndexOrThrow(column);
return cursor.getString(column_index);
}
}
function isExternalStorageDocument(uri) {
return "com.android.externalstorage.documents" == uri.getAuthority() ? true : false
}
function isDownloadsDocument(uri) {
return "com.android.providers.downloads.documents" == uri.getAuthority() ? true : false
}
function isMediaDocument(uri) {
return "com.android.providers.media.documents" == uri.getAuthority() ? true : false
}
}
// #endif
// #ifndef APP-PLUS
uni.showModal({
title: '提示',
content: '仅支持Android平台',
success: function(res) {
}
});
// #endif
},
},
onLoad() {
// plus.io.resolveLocalFileSystemURL( '/storage/emulated/0', function(fs) {
// var directoryReader = fs.createReader();
// directoryReader.readEntries(function(entries) {
// var i;
// for (i = 0; i < entries.length; i++) {
// console.log(entries[i].name);
// }
// }, function(e) {
// console.log("Read entries failed: " + e.message);
// });
// }, function(e) {
// console.log("Request file system failed: " + e.message);
// });
}
}
</script>

336
components/vueScale/index.vue Normal file
View File

@@ -0,0 +1,336 @@
<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);
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>