diff --git a/components/FormCard/index.vue b/components/FormCard/index.vue index 6d11d9f..2688748 100644 --- a/components/FormCard/index.vue +++ b/components/FormCard/index.vue @@ -61,8 +61,8 @@ const ERROR_MESSAGES = { * @typedef {Object} FormCardProps * @property {string} title - 表单标题 * @property {Object} form - 表单数据对象 - * @property {string} form.name - 姓名 - * @property {string} form.phone - 手机号 + * @property {string} form.visitorName - 姓名 + * @property {string} form.contactPhone - 手机号 * @property {boolean} showDeleteIcon - 是否显示删除图标 */ const props = defineProps({ @@ -73,12 +73,16 @@ const props = defineProps({ form: { type: Object, default: () => ({ - name: "", - phone: "", + visitorName: "", + contactPhone: "", }), validator: (value) => { - return value && typeof value === 'object' && - 'name' in value && 'phone' in value; + return ( + value && + typeof value === "object" && + "visitorName" in value && + "contactPhone" in value + ); }, }, showDeleteIcon: { @@ -90,11 +94,15 @@ const props = defineProps({ /** * FormCard 组件事件 * @typedef {Object} FormCardEmits - * @property {Function} update:name - 更新姓名事件 - * @property {Function} update:phone - 更新手机号事件 + * @property {Function} update:visitorName - 更新姓名事件 + * @property {Function} update:contactPhone - 更新手机号事件 * @property {Function} delete - 删除表单事件 */ -const emit = defineEmits(["update:name", "update:phone", "delete"]); +const emit = defineEmits([ + "update:visitorName", + "update:contactPhone", + "delete", +]); // 响应式状态 const nameError = ref(""); @@ -102,16 +110,16 @@ const phoneError = ref(""); // 计算属性 - 双向绑定 const nameValue = computed({ - get: () => props.form?.name || "", - set: (value) => emit("update:name", value?.trim() || ""), + get: () => props.form?.visitorName || "", + set: (value) => emit("update:visitorName", value?.trim() || ""), }); const phoneValue = computed({ - get: () => props.form?.phone || "", + get: () => props.form?.contactPhone || "", set: (value) => { // 只允许数字输入 const numericValue = value.replace(/\D/g, ""); - emit("update:phone", numericValue); + emit("update:contactPhone", numericValue); }, }); @@ -145,11 +153,11 @@ const getPhoneError = (phone) => { // 验证方法 const validateName = () => { - nameError.value = getNameError(props.form?.name); + nameError.value = getNameError(props.form?.visitorName); }; const validatePhone = () => { - phoneError.value = getPhoneError(props.form?.phone); + phoneError.value = getPhoneError(props.form?.contactPhone); }; // 事件处理 diff --git a/components/LocationCard/index.vue b/components/LocationCard/index.vue new file mode 100644 index 0000000..2e13cf6 --- /dev/null +++ b/components/LocationCard/index.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/components/LocationCard/styles/index.scss b/components/LocationCard/styles/index.scss new file mode 100644 index 0000000..d007b0b --- /dev/null +++ b/components/LocationCard/styles/index.scss @@ -0,0 +1,49 @@ +.store-address { + display: flex; + align-items: start; + flex-direction: column; + padding: 16px 12px; + background-color: #f0f0f0; + background-image: url(""); // 预留背景图片位置,用户手动导入 + background-size: cover; + background-position: center; + border-radius: 12px; + font-size: 14px; + color: #333; + position: relative; + overflow: hidden; + + // 添加半透明遮罩层确保文字可读性 + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.8); + z-index: 1; + } + + // 确保内容在遮罩层之上 + .location-label, + .address-text { + position: relative; + z-index: 2; + } + + .location-label { + color: #333; + font-size: 14px; + margin-right: 4px; + font-weight: 500; + } + + .address-text { + margin-top: 4px; + flex: 1; + color: #666; + font-size: 12px; + font-weight: 400; + } +} diff --git a/pages/goods/components/GoodConfirm/index.vue b/pages/goods/components/GoodConfirm/index.vue index b4e0087..e1d527b 100644 --- a/pages/goods/components/GoodConfirm/index.vue +++ b/pages/goods/components/GoodConfirm/index.vue @@ -83,8 +83,12 @@ :form="item" :showDeleteIcon="userFormList.length > 1" :key="index" - @update:name="(value) => updateUserForm(index, 'name', value)" - @update:phone="(value) => updateUserForm(index, 'phone', value)" + @update:visitorName=" + (value) => updateUserForm(index, 'visitorName', value) + " + @update:contactPhone=" + (value) => updateUserForm(index, 'contactPhone', value) + " @delete="() => deleteUserForm(index)" /> @@ -126,10 +130,10 @@ const showToast = (title, icon = "none", duration = 2000) => { const isValidUserForm = (user) => { return ( user && - typeof user.name === "string" && - user.name.trim() !== "" && - typeof user.phone === "string" && - user.phone.trim() !== "" + typeof user.visitorName === "string" && + user.visitorName.trim() !== "" && + typeof user.contactPhone === "string" && + user.contactPhone.trim() !== "" ); }; @@ -165,7 +169,7 @@ const emits = defineEmits(["confirm", "close"]); // 工具函数 const createEmptyUserForm = () => { - return { name: "", phone: "" }; + return { visitorName: "", contactPhone: "" }; }; // 响应式数据 @@ -243,7 +247,7 @@ const updateUserForm = (index, field, value) => { return; } - if (!["name", "phone"].includes(field)) { + if (!["visitorName", "contactPhone"].includes(field)) { return; } @@ -308,8 +312,8 @@ const confirmOrder = () => { quantity: quantity.value, totalPrice: parseFloat(totalPrice.value), userFormList: userFormList.value.map((user) => ({ - name: user.name.trim(), - phone: user.phone.trim(), + visitorName: user.visitorName.trim(), + contactPhone: user.contactPhone.trim(), })), commodityType: props.goodsData?.commodityTypeCode, timestamp: Date.now(), @@ -349,4 +353,4 @@ defineExpose({ \ No newline at end of file + diff --git a/pages/goods/components/GoodInfo/index.vue b/pages/goods/components/GoodInfo/index.vue index b03bdb5..3e00723 100644 --- a/pages/goods/components/GoodInfo/index.vue +++ b/pages/goods/components/GoodInfo/index.vue @@ -21,7 +21,7 @@ - + @@ -41,7 +41,7 @@