init
This commit is contained in:
唐明明
459
components/add-goods-template/add-goods-template.vue
Normal file
459
components/add-goods-template/add-goods-template.vue
Normal 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>
|
||||
Reference in New Issue
Block a user