zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 意见反馈调整

Browse Source
This commit is contained in:
zoujing
2025-10-20 20:36:33 +08:00
parent 3055d49644
commit 5e981b6de3
8 changed files with 140 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/components/CreateServiceOrder/index.vue
View File

@@ -1,87 +1,73 @@
<template>
<view class="create-service-order">
<view class="create-service-wrapper">
<view class="order-header">
<text>创建服务工单</text>
</view>
<view class="order-content">
<view class="order-item">
<image src="./images/icon_service.png" class="order-icon"></image>
<uni-data-select
v-if="!isCallSuccess && workOrderTypeList.length > 0"
class="order-select"
placeholder="请选择服务工单"
v-model="workOrderTypeName"
:localdata="workOrderTypeListSelectData"
@change="changeWorkOrderType"
></uni-data-select>
<text v-else class="order-description">{{ workOrderTypeName }}</text>
</view>
<view class="order-line"></view>
<view class="order-details">
<view class="detail-item">
<text class="detail-label">房间号：</text>
<input
v-if="!isCallSuccess"
class="detail-input"
placeholder="请填写房间号"
v-model="roomId"
/>
<text v-else class="detail-value">{{ roomId }}</text>
</view>
<view class="detail-item">
<text class="detail-label">服务时间：</text>
<text class="detail-value">2025-08-11 14:00</text>
</view>
<view class="detail-item">
<text class="detail-label">联系房客：</text>
<!-- 呼叫成功后显示为文本，否则显示输入框 -->
<input
v-if="!isCallSuccess"
class="detail-input"
placeholder="请填写联系人"
v-model="contactName"
/>
<text v-else class="detail-value">{{ contactName }}</text>
</view>
<view class="detail-item">
<text class="detail-label">联系电话：</text>
<!-- 呼叫成功后显示为文本，否则显示输入框 -->
<input
v-if="!isCallSuccess"
class="detail-input"
placeholder="请填写联系电话"
v-model="contactPhone"
/>
<text v-else class="detail-value">{{ contactPhone }}</text>
</view>
</view>
<!-- 呼叫前显示立即呼叫按钮 -->
<button v-if="!isCallSuccess" class="order-button" @click="handleCall">
立即呼叫
</button>
<!-- 呼叫成功后显示两个按钮 -->
<view v-else class="order-buttons">
<button class="order-button-secondary" @click="viewWorkOrder">
查看工单
</button>
<button
v-if="!isMarkCompleted"
class="order-button-primary"
@click="markCompleted"
<view
class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
>
已完成
</button>
<view
class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
>
<text class="font-size-18 font-500 color-171717 text-left ml-12">
{{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
</text>
<image
class="header-icon"
src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
/>
</view>
<view v-if="!isCallSuccess" class="order-content border-box p-12">
<view
class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
>
<text class="font-500 line-height-22 mr-20">房间号</text>
<input placeholder="请填写房间号" v-model="roomId" />
</view>
<view
class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
>
<text class="font-500 line-height-22 mr-20">联系电话</text>
<input placeholder="请填写联系电话" v-model="contactPhone" />
</view>
<view
class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
>
<view class="font-500 line-height-22 mb-12">需求信息描述</view>
<textarea
placeholder="请输入需求信息描述"
maxlength="100"
v-model="contactText"
/>
</view>
</view>
<view class="footer-help">
<image src="./images/icon_volume.png" class="help-icon"></image>
<text class="help-text">没解决问题？给我打电话吧！</text>
<text class="help-phone" @click="makePhoneCall">15185111210</text>
<view v-else class="border-box card-content flex flex-items-center p-12">
<view class="border-box left flex-full pr-20">
<view class="font-size-12 color-525866 line-height-20 mb-4"
>房间号：{{ roomId }}</view
>
<view class="font-size-12 color-525866 line-height-20 mb-4"
>联系方式: {{ contactPhone }}</view
>
<view class="font-size-12 color-525866 line-height-20 ellipsis-2"
>需求描述: {{ contactText }}</view
>
</view>
<image
class="right rounded-6"
src="https://picsum.photos/300/300"
mode="aspectFill"
/>
</view>
<view
class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-12"
@click="handleCall"
>
{{ isCallSuccess ? "查看服务" : "立即呼叫" }}
</view>
</view>
</view>
</template>
@@ -89,49 +75,20 @@
<script setup>
import { ref, onMounted, nextTick } from "vue";
import { SCROLL_TO_BOTTOM } from "@/constant/constant";
import { createWorkOrder } from "@/request/api/OrderApi";
import {
createWorkOrder,
workOrderTypeListForBiz,
} from "@/request/api/OrderApi";
const workOrderTypeId = ref("");
const workOrderTypeName = ref("");
const roomId = ref("");
const contactName = ref("");
const contactPhone = ref("");
const contactText = ref("");
const contentImgUrl = ref("");
const isCallSuccess = ref(false); // 呼叫成功状态
const workOrderId = ref(0); // 工单ID
const workOrderTypeList = ref([]);
const workOrderTypeListSelectData = ref([]);
const isMarkCompleted = ref(false);
const changeWorkOrderType = (index) => {
if (index < 0 || index >= workOrderTypeListSelectData.value.length) {
return;
}
const item = workOrderTypeList.value[index];
console.log("item:", item);
workOrderTypeId.value = item.id;
workOrderTypeName.value = item.workOrderTypeName;
};
const handleCall = async () => {
// 验证输入
if (!roomId.value.trim()) {
uni.showToast({
title: "请填写房间号",
icon: "none",
duration: 2000,
});
return;
}
if (!contactName.value.trim()) {
uni.showToast({
title: "请填写联系人",
icon: "none",
duration: 2000,
});
if (isCallSuccess.value) {
// 查看工单
viewWorkOrder();
return;
}
@@ -144,6 +101,15 @@ const handleCall = async () => {
return;
}
if (!contactText.value.trim()) {
uni.showToast({
title: "请填写需求信息描述内容",
icon: "none",
duration: 2000,
});
return;
}
sendCreateWorkOrder();
};
@@ -151,33 +117,34 @@ const handleCall = async () => {
const sendCreateWorkOrder = async () => {
try {
const res = await createWorkOrder({
contactName: contactName.value,
contactPhone: contactPhone.value,
workOrderTypeId: workOrderTypeId.value,
roomId: roomId.value,
contactPhone: contactPhone.value,
content: contactText.value,
contentImgUrl: contentImgUrl.value,
});
if (res.code === 0) {
// 保存工单ID
workOrderId.value = res.data?.id || "";
// 设置呼叫成功状态
// 设置成功状态
isCallSuccess.value = true;
uni.showToast({
title: "工单创建成功",
title: "呼叫成功",
icon: "success",
duration: 2000,
});
} else {
uni.showToast({
title: res.message || "创建工单失败",
title: res.message || "呼叫失败",
icon: "none",
duration: 2000,
});
}
} catch (error) {
console.error("创建工单失败:", error);
console.error("呼叫失败:", error);
uni.showToast({
title: "网络错误，请重试",
icon: "none",
@@ -186,25 +153,6 @@ const sendCreateWorkOrder = async () => {
}
};
/// 获取工单类型
const getWorkOrderType = async () => {
const res = await workOrderTypeListForBiz();
if (res.code === 0) {
workOrderTypeList.value = res.data;
workOrderTypeList.value.forEach((item, index) => {
workOrderTypeListSelectData.value.push({
value: index,
text: item.workOrderTypeName,
});
});
if (workOrderTypeList.value.length > 0) {
workOrderTypeId.value = workOrderTypeList.value[0].id;
workOrderTypeName.value = workOrderTypeList.value[0].workOrderTypeName;
}
}
};
// 查看工单
const viewWorkOrder = () => {
console.log("查看工单:", workOrderId.value);
@@ -214,35 +162,7 @@ const viewWorkOrder = () => {
});
};
// 标记已完成
const markCompleted = () => {
console.log("标记工单已完成:", workOrderId.value);
uni.showModal({
title: "确认完成",
content: "确认标记此工单为已完成吗？",
success: (res) => {
if (res.confirm) {
isMarkCompleted.value = true;
// 这里可以调用API标记工单完成
uni.showToast({
title: "工单已完成",
icon: "success",
duration: 2000,
});
}
},
});
};
const makePhoneCall = () => {
// 使用 uniapp 的 API 拨打电话
uni.makePhoneCall({
phoneNumber: "15185111210",
});
};
onMounted(() => {
getWorkOrderType();
nextTick(() => {
setTimeout(() => {
uni.$emit(SCROLL_TO_BOTTOM, true);

178
src/components/CreateServiceOrder/styles/index.scss
View File

@@ -1,179 +1,25 @@
.create-service-wrapper {
padding: 12px 0;
}
.order-header {
font-size: $uni-font-size-base;
font-weight: 500;
margin-bottom: 10px;
color: $uni-text-color;
height: 48px;
}
.header-icon {
width: 98px;
height: 48px;
}
.order-content {
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 12px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.order-item {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.order-icon {
width: 24px;
height: 24px;
margin-right: 8px;
border-radius: $uni-border-radius-circle;
background-color: #ffa500;
display: flex;
align-items: center;
justify-content: center;
}
.order-description {
font-size: $uni-font-size-base;
font-weight: 500;
color: $uni-text-color;
}
.order-line {
position: relative;
border: 1px dashed #eeeeee;
margin-left: -12px;
margin-right: -12px;
&::before,
&::after {
content: "";
position: absolute;
top: -8px;
width: 16px;
height: 16px;
border-radius: $uni-border-radius-50px;
background-color: #eff6fa;
}
&::before {
left: -8px;
}
&::after {
right: -8px;
}
}
.order-details {
margin-top: 12px;
}
.detail-item {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.detail-label {
width: 70px;
margin-right: 10px;
}
.detail-value {
color: $uni-text-color;
}
.detail-input {
border: none;
outline: none;
width: calc(100% - 80px);
font-size: $uni-font-size-base;
color: $uni-text-color;
border-bottom: 1px solid #ddd;
}
.order-select {
border: none;
outline: none;
width: 100%;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.order-button {
width: 300px;
height: 42px;
background: linear-gradient(90deg, #ff7e00, #ffba00);
color: #fff;
font-size: $uni-font-size-base;
font-weight: 600;
border-radius: 20px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
// 呼叫成功后的按钮容器
.order-buttons {
display: flex;
justify-content: space-between;
margin-top: 20px;
gap: 12px;
}
// 查看工单按钮（次要按钮）
.order-button-secondary {
flex: 1;
height: 42px;
background: linear-gradient(90deg, #0256ff, #00a6ff);
color: #fff;
font-size: $uni-font-size-base;
font-weight: 600;
border: none;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
// 已完成按钮（主要按钮）
.order-button-primary {
flex: 1;
height: 42px;
background: linear-gradient(90deg, #ff7e00, #ffba00);
color: #fff;
font-size: $uni-font-size-base;
font-weight: 600;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.footer-help {
margin-bottom: 12px;
display: flex;
align-items: center;
font-size: $uni-font-size-base;
color: #ed6a0c;
width: 335px;
}
.help-icon {
width: 16px;
height: 14px;
margin-right: 5px;
height: 16px;
}
.help-text {
margin-right: 5px;
.btn {
height: 44px;
}
.help-phone {
cursor: pointer;
.right {
height: 88px;
width: 88px;
}

36
src/components/Feedback/index.vue
View File

@@ -3,38 +3,37 @@
<view
class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
>
<view
class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
>
<text class="font-size-18 font-500 color-171717 text-left ml-12">
{{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
</text>
<image
class="order-header w-full"
src="https://oss.nianxx.cn/mp/static/version_101/home/feedback_1.png"
mode="aspectFill"
class="header-icon"
src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
/>
<view class="order-content border-box p-12">
</view>
<view v-if="!isCallSuccess" class="order-content border-box p-12">
<view
class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
>
<text class="font-500 line-height-22 mr-20">联系电话</text>
<input
v-if="!isCallSuccess"
placeholder="请填写联系电话"
v-model="contactPhone"
/>
<text v-else class="detail-value">{{ contactPhone }}</text>
<input placeholder="请填写联系电话" v-model="contactPhone" />
</view>
<view
class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
>
<view class="font-500 line-height-22 mb-12">意见内容</view>
<textarea
v-if="!isCallSuccess"
placeholder="请输入反馈意见"
maxlength="100"
v-model="contactText"
/>
<text v-else class="detail-value">{{ contactText }}</text>
</view>
<view
v-if="!isCallSuccess"
class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center"
@click="handleCall"
>
@@ -42,9 +41,16 @@
</view>
</view>
<view
class="footer-help flex flex-items-center flex-justify-center mb-12"
<view v-else class="border-box left flex-full p-12">
<view class="font-size-12 color-525866 line-height-20 mb-4"
>联系方式: {{ contactPhone }}</view
>
<view class="font-size-12 color-525866 line-height-20 ellipsis-2"
>意见内容: {{ contactText }}</view
>
</view>
<view class="footer-help flex flex-items-center pl-12 mb-12">
<image class="help-icon mr-4" src="./images/icon_volume.png" />
<text class="font-size-12 font-500 color-FA7319">
{{ appName }}收到您的意见将第一时间为您处理!

5
src/components/Feedback/styles/index.scss
View File

@@ -2,6 +2,11 @@
height: 48px;
}
.header-icon {
width: 98px;
height: 48px;
}
.order-content {
width: 335px;
}

1
src/pages/index/components/module/MoreService/index.vue
View File

@@ -13,7 +13,6 @@
class="item border-box border-bottom pt-20 pb-20"
v-for="(item, index) in list"
:key="index"
@click="handleClick(item)"
>
<view class="flex flex-items-center flex-justify-center">
<image v-if="item.icon" class="left" :src="item.icon" />

4
src/static/scss/background.scss
View File

@@ -19,6 +19,10 @@
background-color: #f5f7fa;
}
.bg-EEF8FF {
background-color: #eef8ff;
}
.bg-liner {
background: linear-gradient(205deg, #8ae3fc 0%, rgba(138, 227, 252, 0) 20%),
linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),

8
src/static/scss/margin.scss
View File

@@ -55,6 +55,10 @@
margin: 12px;
}
.mt-12 {
margin-top: 12px;
}
.mb-12 {
margin-bottom: 12px;
}
@@ -63,6 +67,10 @@
margin-left: 12px;
}
.mr-12 {
margin-right: 12px;
}
.ml-16 {
margin-left: 16px;
}

4
src/static/scss/width.scss
View File

@@ -2,6 +2,10 @@
width: 100%;
}
.w-vw {
width: 100vw;
}
.w-50 {
width: 50%;
}