新增记录模块页面
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user