185 lines
3.8 KiB
Vue
185 lines
3.8 KiB
Vue
<template>
|
||
<!-- 留言 -->
|
||
<u-popup
|
||
v-model="showPopup"
|
||
mode="bottom"
|
||
@close="closePopup"
|
||
close-icon-color="#333"
|
||
close-icon-pos="top-right"
|
||
borderRadius="16"
|
||
closeable
|
||
>
|
||
<view class="leave-message-container">
|
||
<view class="leave-message-title">留言</view>
|
||
<view class="leave-message-content">
|
||
<textarea
|
||
class="message-input"
|
||
v-model="messageContent"
|
||
placeholder="请输入留言，100字以内"
|
||
maxlength="100"
|
||
placeholder-style="color: #999999;"
|
||
:disabled="loading"
|
||
></textarea>
|
||
</view>
|
||
<view class="message-buttons">
|
||
<u-button
|
||
class="submit-btn"
|
||
type="primary"
|
||
@click="handleSubmit"
|
||
:disabled="loading"
|
||
>
|
||
{{ loading ? "提交中..." : "提交" }}
|
||
</u-button>
|
||
<u-button
|
||
class="cancel-btn"
|
||
type="default"
|
||
@click="closePopup"
|
||
:disabled="loading"
|
||
>
|
||
取消
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "LeaveMessage",
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
teacher: {
|
||
type: Object,
|
||
default: () => null,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
showPopup: false,
|
||
messageContent: "",
|
||
loading: false,
|
||
};
|
||
},
|
||
watch: {
|
||
show: {
|
||
handler(newVal) {
|
||
this.showPopup = newVal;
|
||
},
|
||
immediate: true,
|
||
},
|
||
showPopup(val) {
|
||
if (val !== this.show) {
|
||
this.$emit("update:show", val);
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
closePopup() {
|
||
if (this.loading) return; // 如果正在提交，阻止关闭
|
||
this.messageContent = "";
|
||
this.showPopup = false;
|
||
this.$emit("update:show", false);
|
||
},
|
||
handleSubmit() {
|
||
if (this.loading) return; // 如果正在提交，阻止重复提交
|
||
|
||
if (!this.messageContent.trim()) {
|
||
uni.showToast({
|
||
title: "请输入留言内容",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 模拟接口调用
|
||
this.loading = true;
|
||
uni.showLoading({
|
||
title: "提交中...",
|
||
});
|
||
|
||
// 模拟网络请求延迟
|
||
setTimeout(() => {
|
||
// 模拟接口调用成功
|
||
uni.hideLoading();
|
||
this.loading = false;
|
||
|
||
// 发送留言内容和教师信息给父组件
|
||
this.$emit("submit", {
|
||
content: this.messageContent,
|
||
teacher: this.teacher,
|
||
success: true,
|
||
});
|
||
|
||
// 成功提示
|
||
uni.showToast({
|
||
title: "留言成功",
|
||
icon: "success",
|
||
});
|
||
|
||
// 清空留言内容
|
||
this.messageContent = "";
|
||
// 关闭弹窗
|
||
this.showPopup = false;
|
||
this.$emit("update:show", false);
|
||
}, 1500); // 模拟1.5秒的网络延迟
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.leave-message-container {
|
||
padding: 40rpx 0 0;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
|
||
.leave-message-title {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
text-align: left;
|
||
padding-left: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.leave-message-content {
|
||
padding: 0 30rpx;
|
||
|
||
.message-input {
|
||
width: 100%;
|
||
height: 280rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.message-buttons {
|
||
padding: 30rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 50rpx;
|
||
|
||
.cancel-btn,
|
||
.submit-btn {
|
||
width: 156rpx;
|
||
height: 70rpx;
|
||
margin: 0;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.submit-btn {
|
||
background-color: #477bfb;
|
||
}
|
||
}
|
||
}
|
||
</style>
|