4232f7bc36
Replace all hardcoded #525866 text color with the text-ink-600 design token across components and pages. Refactor the OrderCard component by moving external SCSS styles to scoped styles, replace legacy class names with Tailwind utilities, and fix minor inconsistencies. Fix the typo in src/pages/quick/index.vue where rounded-[5px]0 was used incorrectly, and delete the unused OrderCard styles file.
115 lines
3.5 KiB
Vue
115 lines
3.5 KiB
Vue
<template>
|
|
<div class="create-service-order">
|
|
<div class="w-full bg-white border-ff overflow-hidden rounded-20">
|
|
<div class=" order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50">
|
|
<span class="font-size-18 font-500 color-171717 text-left ml-12">
|
|
{{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
|
|
</span>
|
|
<img class="header-icon" src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png" />
|
|
</div>
|
|
|
|
<div v-if="!isCallSuccess" class=" p-[12px]">
|
|
<div class="bg-F5F7FA flex flex-items-center p-[12px] rounded-10 text-[14px] color-171717 mb-12">
|
|
<span class="font-500 line-height-22 mr-20">联系电话</span>
|
|
<input placeholder="请填写联系电话" v-model="contactPhone" />
|
|
</div>
|
|
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-500 color-171717 mb-12">
|
|
<div class="font-500 line-height-22 mb-12">意见内容</div>
|
|
<textarea class="h-80" placeholder="请输入反馈意见" placeholder-class="text-[14px] font-400" maxlength="100"
|
|
v-model="contactText" />
|
|
</div>
|
|
|
|
<div class="btn rounded-[5px]0 text-white bg-button flex flex-items-center flex-justify-center"
|
|
@click="handleCall">
|
|
立即提交
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class=" left flex-full p-[12px]">
|
|
<div class="text-[12px] text-ink-600 leading-[20px] mb-4">
|
|
联系方式: {{ contactPhone }}
|
|
</div>
|
|
<div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">
|
|
意见内容: {{ contactText }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-help flex flex-items-center pl-12 mb-12">
|
|
<img class="help-icon mr-[4px]" src="./images/icon_volume.png" />
|
|
<span class="text-[12px] font-500 color-FA7319">
|
|
{{ appName }}收到您的意见将第一时间为您处理!
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, nextTick, computed } from "vue";
|
|
import { SCROLL_TO_BOTTOM } from "@/constants/constant";
|
|
import { getCurrentConfig } from "@/constants/base";
|
|
import { submitFeedback } from "@/api/home";
|
|
|
|
const contactPhone = ref("");
|
|
const contactText = ref("");
|
|
const isCallSuccess = ref(false); // 呼叫成功状态
|
|
const appName = computed(() => getCurrentConfig().name);
|
|
|
|
const handleCall = async () => {
|
|
if (!contactPhone.value.trim()) {
|
|
uni.showToast({ title: "请填写联系电话", icon: "none" });
|
|
return;
|
|
}
|
|
|
|
if (!contactText.value.trim()) {
|
|
uni.showToast({ title: "请填写意见内容", icon: "none" });
|
|
return;
|
|
}
|
|
|
|
sendFeedback();
|
|
};
|
|
|
|
/// 提交反馈意见
|
|
const sendFeedback = async () => {
|
|
try {
|
|
const res = await submitFeedback({
|
|
userPhone: contactPhone.value,
|
|
content: contactText.value,
|
|
});
|
|
|
|
if (res.code === 0) {
|
|
// 设置成功状态
|
|
isCallSuccess.value = true;
|
|
|
|
uni.showToast({
|
|
title: "反馈意见成功",
|
|
icon: "success",
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: res.message || "反馈意见失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("反馈意见失败:", error);
|
|
uni.showToast({
|
|
title: "网络错误，请重试",
|
|
icon: "none",
|
|
});
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
setTimeout(() => {
|
|
uni.$emit(SCROLL_TO_BOTTOM, true);
|
|
}, 200);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|