462 lines
13 KiB
Vue
462 lines
13 KiB
Vue
<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;
|
|
}
|
|
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();
|
|
},
|
|
// 删除这条数据
|
|
delThis(item) {
|
|
this.$emit("delThis");
|
|
},
|
|
// 跳转到食品详情
|
|
tabGoodsInfo(e) {
|
|
console.log("父组件监听到了子组件的商品详情页面", 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>
|