小程序提交
This commit is contained in:
Ghost
421
pages/form/input.vue
Normal file
421
pages/form/input.vue
Normal file
@@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 表单内容 -->
|
||||
<view class="form-container">
|
||||
<!-- 计划名称 -->
|
||||
<view class="form-group">
|
||||
<text class="form-label">计划名称</text>
|
||||
<view class="form-value">
|
||||
<text class="value-text">{{taskname}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 手机号输入 -->
|
||||
<view class="form-group">
|
||||
<text class="form-label required">手机号/微信号</text>
|
||||
<view class="input-wrapper">
|
||||
<textarea
|
||||
class="form-input"
|
||||
v-model="form.phone"
|
||||
:placeholder="phonePlaceholder"
|
||||
:maxlength="500"
|
||||
:auto-height="true"
|
||||
></textarea>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="submit-wrapper">
|
||||
<button
|
||||
class="submit-button"
|
||||
:class="{loading: isSubmitting, success: submitSuccess}"
|
||||
@click="submit"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<text class="button-text">
|
||||
{{submitSuccess ? '提交成功' : (isSubmitting ? '提交中...' : '提交')}}
|
||||
</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
phone: ""
|
||||
},
|
||||
// 多行 placeholder 需要放在 data 中，避免模板字符串里直接换行导致小程序编译错误
|
||||
phonePlaceholder: '请输入手机号或微信号，如有备注请用逗号隔开，多个用换行隔开，格式如下:18888888888,张三',
|
||||
taskid: '',
|
||||
taskname: '',
|
||||
cid: '',
|
||||
isSubmitting: false,
|
||||
submitSuccess: false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
let taskId = options.id;
|
||||
let cid = options.channelId;
|
||||
//h5
|
||||
if (taskId != undefined) {
|
||||
this.taskid = taskId;
|
||||
this.cid = cid;
|
||||
} else {
|
||||
let paramsArr = decodeURIComponent(options.scene).split('&');
|
||||
this.taskid = paramsArr[0].split('=')[1];
|
||||
this.cid = paramsArr[1].split('=')[1];
|
||||
}
|
||||
//修改标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: "表单录入"
|
||||
});
|
||||
|
||||
this.getPosterData();
|
||||
},
|
||||
methods: {
|
||||
getPosterData() {
|
||||
let that = this;
|
||||
uni.request({
|
||||
method: 'POST',
|
||||
url: that.$config.apiUrl2 + '/v1/frontend/business/poster/getone',
|
||||
data: {
|
||||
oldId: this.taskid
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
if (res.data.code == 200) {
|
||||
that.taskname = res.data.data.name
|
||||
that.taskid = res.data.data.task.id
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
let that = this;
|
||||
|
||||
// 防止重复提交
|
||||
if (that.isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!that.form.phone.length) {
|
||||
return uni.showToast({
|
||||
title: '请输入手机号或微信号',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
|
||||
// 开始提交
|
||||
that.isSubmitting = true;
|
||||
|
||||
let data = {
|
||||
id: that.taskid,
|
||||
cid: that.cid,
|
||||
phone: that.form.phone,
|
||||
}
|
||||
uni.request({
|
||||
method: 'POST',
|
||||
url: that.$config.apiUrl2 + '/v1/frontend/business/form/importsave',
|
||||
data: data,
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
if (res.data.code == 200) {
|
||||
// 处理响应数据
|
||||
that.submitSuccess = true;
|
||||
that.form.phone = ""
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
// 3秒后重置成功状态
|
||||
setTimeout(() => {
|
||||
that.submitSuccess = false;
|
||||
}, 3000);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('提交失败:', error);
|
||||
uni.showToast({
|
||||
title: '网络错误，请重试',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
complete: () => {
|
||||
// 无论成功失败都重置提交状态
|
||||
that.isSubmitting = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面容器 */
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/* 表单容器 */
|
||||
.form-container {
|
||||
padding: 40px 24px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 表单项 */
|
||||
.form-group {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.form-label.required {
|
||||
color: #e74c3c;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #e74c3c;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 计划名称显示 */
|
||||
.form-value {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-value::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 16px;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* 输入框包装器 */
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
color: #2c3e50;
|
||||
background: #fff;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 1.6;
|
||||
transition: all 0.3s ease;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
||||
transform: translateY(-2px);
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #95a5a6;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* 提交按钮区域 */
|
||||
.submit-wrapper {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.submit-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.submit-button:hover:not(:disabled) {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.submit-button:active:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.submit-button:active::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.submit-button.loading {
|
||||
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
|
||||
pointer-events: none;
|
||||
box-shadow: 0 8px 24px rgba(149, 165, 166, 0.3);
|
||||
}
|
||||
|
||||
.submit-button.success {
|
||||
background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
|
||||
box-shadow: 0 8px 24px rgba(39, 174, 96, 0.3);
|
||||
}
|
||||
|
||||
.submit-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 375px) {
|
||||
.form-container {
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.submit-wrapper {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 优雅的动画效果 */
|
||||
.form-container {
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.form-group:nth-child(1) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.form-group:nth-child(2) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.submit-wrapper {
|
||||
animation: fadeInUp 0.5s ease-out 0.6s both;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
424
pages/form/input2.vue
Normal file
424
pages/form/input2.vue
Normal file
@@ -0,0 +1,424 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 表单内容 -->
|
||||
<view class="form-container">
|
||||
<!-- 计划名称 -->
|
||||
<view class="form-group">
|
||||
<text class="form-label">计划名称</text>
|
||||
<view class="form-value">
|
||||
<text class="value-text">{{taskname}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 手机号输入 -->
|
||||
<view class="form-group">
|
||||
<text class="form-label required">手机号/微信号</text>
|
||||
<view class="input-wrapper">
|
||||
<textarea
|
||||
class="form-input"
|
||||
v-model="form.phone"
|
||||
:placeholder="phonePlaceholder"
|
||||
:maxlength="500"
|
||||
:auto-height="true"
|
||||
></textarea>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="submit-wrapper">
|
||||
<button
|
||||
class="submit-button"
|
||||
:class="{loading: isSubmitting, success: submitSuccess}"
|
||||
@click="submit"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<text class="button-text">
|
||||
{{submitSuccess ? '提交成功' : (isSubmitting ? '提交中...' : '提交')}}
|
||||
</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
request
|
||||
} from '@/utils/request';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
phone: ""
|
||||
},
|
||||
// 多行 placeholder 需要放在 data 中，避免模板字符串里直接换行导致小程序编译错误
|
||||
phonePlaceholder: '请输入手机号或微信号，如有备注请用逗号隔开，多个用换行隔开，格式如下:18888888888,张三',
|
||||
token: "test",
|
||||
taskid: '',
|
||||
taskname: '',
|
||||
cid: '',
|
||||
isSubmitting: false,
|
||||
submitSuccess: false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
let taskId = options.id;
|
||||
let cid = options.channelId;
|
||||
//h5
|
||||
if (taskId != undefined) {
|
||||
this.taskid = taskId;
|
||||
this.cid = cid;
|
||||
} else {
|
||||
let paramsArr = decodeURIComponent(options.scene).split('&');
|
||||
this.taskid = paramsArr[0].split('=')[1];
|
||||
this.cid = paramsArr[1].split('=')[1];
|
||||
}
|
||||
//修改标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: "表单录入"
|
||||
});
|
||||
|
||||
this.getPosterData();
|
||||
},
|
||||
methods: {
|
||||
getPosterData() {
|
||||
let that = this;
|
||||
uni.request({
|
||||
method: 'POST',
|
||||
url: that.$config.apiUrl2 + '/v1/frontend/business/poster/getone',
|
||||
data: {
|
||||
id: that.taskid,
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
if (res.data.code == 200) {
|
||||
that.taskname = res.data.data.name
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
let that = this;
|
||||
|
||||
// 防止重复提交
|
||||
if (that.isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!that.form.phone.length) {
|
||||
return uni.showToast({
|
||||
title: '请输入手机号或微信号',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
|
||||
// 开始提交
|
||||
that.isSubmitting = true;
|
||||
|
||||
let data = {
|
||||
id: that.taskid,
|
||||
cid: that.cid,
|
||||
phone: that.form.phone,
|
||||
}
|
||||
uni.request({
|
||||
method: 'POST',
|
||||
url: that.$config.apiUrl2 + '/v1/frontend/business/form/importsave',
|
||||
data: data,
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
if (res.data.code == 200) {
|
||||
// 处理响应数据
|
||||
that.submitSuccess = true;
|
||||
that.form.phone = ""
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
// 3秒后重置成功状态
|
||||
setTimeout(() => {
|
||||
that.submitSuccess = false;
|
||||
}, 3000);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('提交失败:', error);
|
||||
uni.showToast({
|
||||
title: '网络错误，请重试',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
complete: () => {
|
||||
// 无论成功失败都重置提交状态
|
||||
that.isSubmitting = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面容器 */
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/* 表单容器 */
|
||||
.form-container {
|
||||
padding: 40px 24px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 表单项 */
|
||||
.form-group {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.form-label.required {
|
||||
color: #e74c3c;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #e74c3c;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 计划名称显示 */
|
||||
.form-value {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-value::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 16px;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* 输入框包装器 */
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
color: #2c3e50;
|
||||
background: #fff;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 1.6;
|
||||
transition: all 0.3s ease;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
||||
transform: translateY(-2px);
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #95a5a6;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* 提交按钮区域 */
|
||||
.submit-wrapper {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.submit-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.submit-button:hover:not(:disabled) {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.submit-button:active:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.submit-button:active::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.submit-button.loading {
|
||||
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
|
||||
pointer-events: none;
|
||||
box-shadow: 0 8px 24px rgba(149, 165, 166, 0.3);
|
||||
}
|
||||
|
||||
.submit-button.success {
|
||||
background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
|
||||
box-shadow: 0 8px 24px rgba(39, 174, 96, 0.3);
|
||||
}
|
||||
|
||||
.submit-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 375px) {
|
||||
.form-container {
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.submit-wrapper {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 优雅的动画效果 */
|
||||
.form-container {
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.form-group:nth-child(1) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.form-group:nth-child(2) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.submit-wrapper {
|
||||
animation: fadeInUp 0.5s ease-out 0.6s both;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
113
pages/form/list.vue
Normal file
113
pages/form/list.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-list @scrolltolower="scrolltolower">
|
||||
<u-list-item v-for="(item, index) in dataList" :key="index" class="custom-list-item">
|
||||
<view class="list-item-content">
|
||||
<u-cell :title="item.sPhoneOrWechatId" class="cell-item" :border="false" />
|
||||
<view class="additional-info">
|
||||
<text class="item-time">{{ item.dNewTime }}</text>
|
||||
<text class="item-status">{{ item.status }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<u-loadmore :status="status" />
|
||||
</u-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
request
|
||||
} from '@/utils/request';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: "",
|
||||
page: 1,
|
||||
limit: 20,
|
||||
dataList: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
scrolltolower() {
|
||||
this.page++
|
||||
this.loadmore()
|
||||
},
|
||||
loadmore() {
|
||||
this.status = "loading"
|
||||
request({
|
||||
url: '/v1/frontend/business/form/listdata',
|
||||
data: {
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
},
|
||||
// ...
|
||||
}).then((response) => {
|
||||
for (let i = 0; i < response.data.data.list.length; i++) {
|
||||
let data = response.data.data.list[i]
|
||||
data.status = "333"
|
||||
this.dataList.push(data)
|
||||
}
|
||||
|
||||
if (response.data.data.list.length == 0) {
|
||||
this.status = "nomore"
|
||||
} else {
|
||||
this.status = ""
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
// 处理错误
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: "我的表单"
|
||||
});
|
||||
|
||||
this.loadmore()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-list-item {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.list-item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.cell-item {
|
||||
border-bottom: none;
|
||||
font-size: 16px;
|
||||
/* 标题字体大小 */
|
||||
color: #333;
|
||||
/* 标题字体颜色 */
|
||||
}
|
||||
|
||||
.additional-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.item-time {
|
||||
color: #666;
|
||||
/* 时间的颜色 */
|
||||
font-size: 12px;
|
||||
/* 时间的字体大小 */
|
||||
}
|
||||
|
||||
.item-status {
|
||||
color: #1989fa;
|
||||
/* 状态的颜色，可根据实际需求调整 */
|
||||
font-size: 14px;
|
||||
/* 状态的字体大小 */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user