422 lines
7.9 KiB
Vue
422 lines
7.9 KiB
Vue
<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>
|