我是使用了表单相关组件,不知道是什么原因,请求帮助这个是有关getSystemInfoSync搜索结果 在表单提交后还有警告:[pages/my/Feedback] Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./uni_modules/uni-load-more/components/uni-load-more/uni-load-more.wxss:65:29)
[pages/my/Feedback] Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.wxss:62:31) 下面是源vue <template>
<view class="center">
<view class="title">建议与反馈</view>
<view class="uni-container">
<uni-forms class="from" ref="formRef" :model="formData" validate-trigger="submit" err-show-type="toast">
<uni-forms-item name="contact" label="用户联系方式" required>
<uni-easyinput placeholder="请输入微信或QQ号" v-model="formData.contact"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="问题类型" required>
<uni-data-checkbox
:multiple="false"
v-model="formData.issueType"
:localdata="[
{ text: '平台相关', value: '平台相关' },
{ text: '卖家问题', value: '卖家问题' },
{ text: '热心建议', value: '热心建议' }
]"
/>
</uni-forms-item>
<uni-forms-item class="content" name="content" label="内容" required>
<uni-easyinput type="textarea" autoHeight v-model="formData.content" placeholder="请输入反馈内容,不得小于30字"></uni-easyinput>
</uni-forms-item>
<view class="uni-button-group">
<button type="primary" class="uni-button" @click="submit()">提交</button>
</view>
</uni-forms>
<view v-if="thankYouMessage" class="thank-you">{{ thankYouMessage }}</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const formData = ref({
contact: "",
issueType: "", // 改为字符串以适应单选
content: ""
});
const thankYouMessage = ref("");
async function submit(){
try {
if (!validateContact(formData.value.contact)) {
throw new Error("联系方式必须是微信或QQ号");
}
if (formData.value.content.length < 30) {
throw new Error("内容不得少于30字");
}
const db = await uniCloud.database();
await db.collection('Feeback').add({
contact: formData.value.contact,
issueType: formData.value.issueType,
content: formData.value.content, // 修正为内容
});
thankYouMessage.value = "感谢您的反馈,我们会认真回复您的!";
formData.value = { contact: "", issueType: "", content: "" }; // 清空表单
} catch (err) {
console.error(err);
uni.showToast({
title: err.message,
icon: 'none'
});
}
}
function validateContact(contact) {
const wechatPattern = /^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/; // 微信号正则
const qqPattern = /^[1-9][0-9]{4,}$/; // QQ号正则
return wechatPattern.test(contact) || qqPattern.test(contact);
}
</script>
<style lang="scss" scoped>
.center {
width: 100vw;
height: 100vh;
background-color: #f3f2f2;
.title {
padding-top: 100rpx;
padding-bottom: 20rpx;
text-align: center;
font-size: 34rpx;
font-weight: 500;
}
.uni-container {
padding-left: 20rpx;
padding-right: 20rpx;
}
.uni-button {
background-color: #f44;
}
.thank-you {
margin-top: 20rpx;
text-align: center;
font-size: 28rpx;
color: red;
}
}
</style>