123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- <template>
- <view class="feedback-container">
- <view class="form-container">
- <input v-model="formData.companyName" placeholder="公司名称" class="input-field" />
- <input v-model="formData.contactPerson" placeholder="联系人" class="input-field" />
- <input v-model="formData.contactPhone" placeholder="联系电话" class="input-field" />
- <textarea v-model="formData.opinion" placeholder="您的意见" class="textarea-field" style="width: 93%;" />
- <button @click="submitForm" class="submit-btn">提交</button>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- formData: {
- companyName: '',
- contactPerson: '',
- contactPhone: '',
- opinion: ''
- },
- apiUrl: 'https://ylaiapi.raycos.com.cn'
- }
- },
- onLoad() {
- },
- methods: {
- validateForm() {
- if (!this.formData.companyName.trim()) {
- uni.showToast({
- title: '请输入公司名称',
- icon: 'none'
- })
- return false
- }
- if (!this.formData.contactPerson.trim()) {
- uni.showToast({
- title: '请输入联系人',
- icon: 'none'
- })
- return false
- }
- if (!/^1\d{10}$/.test(this.formData.contactPhone)) {
- uni.showToast({
- title: '请输入有效的联系电话',
- icon: 'none'
- })
- return false
- }
- if (!this.formData.opinion.trim()) {
- uni.showToast({
- title: '请输入您的意见',
- icon: 'none'
- })
- return false
- }
- return true
- },
- async submitForm() {
- if (this.validateForm()) {
- try {
- uni.showLoading({
- title: '提交中...'
- });
- const result = await this.sendRequest();
- if (result.success) {
- this.resetForm();
- uni.showToast({
- title: '提交成功!',
- icon: 'success'
- });
- } else {
- throw new Error(result.message || '提交失败,请重试');
- }
- } catch (error) {
- console.error('提交失败', error);
- uni.showToast({
- title: error.message || '提交失败,请重试',
- icon: 'none'
- });
- } finally {
- uni.hideLoading();
- }
- }
- },
- sendRequest() {
- return new Promise((resolve) => {
- uni.request({
- url: this.apiUrl + '/complaint/insertComplaint',
- method: 'POST',
- data: {
- name: this.formData.contactPerson,
- phone: this.formData.contactPhone,
- corporate_name: this.formData.companyName,
- content: this.formData.opinion,
- status: 5
- },
- header: {
- 'content-type': 'application/x-www-form-urlencoded'
- },
- success: (res) => {
- if (res.statusCode === 200 && res.data && res.data.status == 200) {
- resolve({
- success: true
- });
- } else {
- resolve({
- success: false,
- message: res.data?.message || '提交失败,请重试'
- });
- }
- },
- fail: (err) => {
- resolve({
- success: false,
- message: '网络请求失败'
- });
- }
- });
- });
- },
- resetForm() {
- this.formData = {
- companyName: '',
- contactPerson: '',
- contactPhone: '',
- opinion: ''
- };
- }
- }
- }
- </script>
- <style scoped>
- .feedback-container {
- background-color: #0066cc;
- min-height: 100vh;
- padding: 20px;
- }
- .header {
- color: white;
- font-size: 18px;
- margin-bottom: 20px;
- }
- .form-container {
- background-color: transparent;
- }
- .input-field,
- .textarea-field {
- margin-bottom: 15px;
- padding: 12px;
- background-color: white;
- border: none;
- border-radius: 5px;
- font-size: 14px;
- }
- .textarea-field {
- height: 120px;
- }
- .submit-btn {
- width: 100%;
- background-color: #00aaff;
- color: white;
- border: none;
- padding: 12px;
- border-radius: 5px;
- font-size: 16px;
- margin-top: 10px;
- }
- </style>
|