152 lines
3.4 KiB
Vue
152 lines
3.4 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { getAttrValue } from "@/api/shop.js";
|
|
import mitt from "@/utils/mitt.js";
|
|
|
|
const dialogVisible = ref(false);
|
|
const inputRef = ref(null);
|
|
|
|
const show = (e) => {
|
|
dialogVisible.value = e;
|
|
};
|
|
|
|
const form = ref({});
|
|
const loading = ref(false);
|
|
const mode = ref("add");
|
|
const setForm = (data, type = "add") => {
|
|
mode.value = type;
|
|
form.value = JSON.parse(JSON.stringify(data));
|
|
};
|
|
|
|
const emit = defineEmits(["changeItem"]);
|
|
|
|
const changeItem = () => {
|
|
if(!form.value.cart_num) form.value.cart_num = 1;
|
|
emit("changeItem", form.value);
|
|
dialogVisible.value = false;
|
|
};
|
|
|
|
defineExpose({
|
|
show,
|
|
setForm,
|
|
});
|
|
|
|
const aenter = () => {
|
|
if (!dialogVisible.value) return;
|
|
changeItem();
|
|
};
|
|
onMounted(() => {
|
|
mitt.on("enter", aenter);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
mitt.off("enter", aenter);
|
|
});
|
|
|
|
const close = () => {
|
|
console.log("sss");
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<el-dialog v-model="dialogVisible" title="购买数量" width="650" @opened="inputRef.focus()">
|
|
<div class="shop" v-loading="loading">
|
|
<div class="shop-info">
|
|
<div class="shop-info-left">
|
|
<el-image loading="lazy" :src="form.image"></el-image>
|
|
</div>
|
|
<div class="shop-info-right">
|
|
<div class="shop-info-right-top">{{ form.store_name }}</div>
|
|
<div class="shop-info-right-price">
|
|
¥<span>{{ form.price }}</span
|
|
><span style="font-size: 1rem; color: #777">
|
|
/ {{ form.unit_name }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="shop-sku">
|
|
<div class="title">购买数量 ( {{ form.unit_name }} )</div>
|
|
<div class="sku">
|
|
<el-input-number
|
|
ref="inputRef"
|
|
v-model="form.cart_num"
|
|
step-strictly
|
|
placeholder="请输入数量(默认为1)"
|
|
:min="0"
|
|
:step="1"
|
|
style="width: 20rem"
|
|
size="large"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template
|
|
#footer
|
|
v-if="!(mode != 'add' && form.attr && form.attr.length == 1)"
|
|
>
|
|
<div class="dialog-footer">
|
|
<el-button class="ok-btn" type="primary" @click="changeItem">
|
|
确定 (Enter)
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.dialog-footer {
|
|
.ok-btn {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
border-radius: 2.5rem;
|
|
}
|
|
}
|
|
.shop {
|
|
border-top: 1px solid #eee;
|
|
padding-top: 1rem;
|
|
.shop-info {
|
|
display: flex;
|
|
.shop-info-left {
|
|
flex-shrink: 0;
|
|
margin-right: 0.8rem;
|
|
height: 8rem;
|
|
width: 8rem;
|
|
overflow: hidden;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.shop-info-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.shop-info-right-top {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2; /* 限制文本显示为两行 */
|
|
font-size: 1.1rem;
|
|
}
|
|
.shop-info-right-center {
|
|
font-size: 0.8rem;
|
|
}
|
|
.shop-info-right-price {
|
|
color: #ff4a00;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
span {
|
|
font-size: 1.4rem;
|
|
margin-left: 0.2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.shop-sku {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 1rem 0;
|
|
}
|
|
}
|
|
</style>
|