| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- const api = require('../../api/index.js');
-
- Page({
- data: {
- // 表单数据
- formData: {
- projectName: '', // 项目名称
- companyName: '', // 公司名称
- contactName: '', // 联系人
- contactPhone: '', // 联系电话
- addressDetails: '', // 地址
- longitude: '', // 经度
- latitude: '', // 纬度
- detail: '', // 详情
- images: [] // 上传图片列表
- },
- // 提交状态
- submitting: false
- },
-
- onLoad(options) {
- // 若从地图页跳转,自动填充经纬度
- if (options.lng && options.lat) {
- this.setData({
- 'formData.longitude': options.lng,
- 'formData.latitude': options.lat
- });
- }
- },
-
- /**
- * 输入框内容变化处理
- */
- handleInput(e) {
- const key = e.currentTarget.dataset.key;
- const value = e.detail.value;
- this.setData({
- [`formData.${key}`]: value
- });
- },
-
- /**
- * 选择定位(自动填充地址和经纬度)
- */
- chooseLocation() {
- wx.chooseLocation({
- success: (res) => {
- this.setData({
- 'formData.addressDetails': res.addressDetails,
- 'formData.longitude': res.longitude.toString(),
- 'formData.latitude': res.latitude.toString()
- });
- wx.showToast({
- title: '定位成功',
- icon: 'success',
- duration: 1000
- });
- },
- fail: (err) => {
- // 用户取消定位或授权失败
- if (err.errMsg !== 'chooseLocation:fail cancel') {
- wx.showToast({
- title: '定位失败,请手动输入',
- icon: 'none'
- });
- // 引导用户开启定位权限
- wx.openSetting({
- success: (res) => {
- if (!res.authSetting['scope.userLocation']) {
- wx.showToast({
- title: '请开启定位权限',
- icon: 'none'
- });
- }
- }
- });
- }
- }
- });
- },
-
- /**
- * 选择图片上传
- */
- chooseImage() {
- const { images } = this.data.formData;
- if (images.length >= 9) {
- wx.showToast({
- title: '最多上传9张图片',
- icon: 'none'
- });
- return;
- }
- wx.chooseMedia({
- count: 9 - images.length, // 剩余可上传数量
- mediaType: ['image'],
- sourceType: ['album', 'camera'], // 相册/相机
- sizeType: ['original', 'compressed'], // 原图/压缩
- success: (res) => {
- // 临时文件路径列表
- const tempFiles = res.tempFiles.map(item => item.tempFilePath);
- // 合并图片列表
- this.setData({
- 'formData.images': [...images, ...tempFiles]
- });
-
- // 实际项目中:上传图片到服务器,替换临时路径
- this.uploadImagesToServer(tempFiles);
- },
- fail: (err) => {
- wx.showToast({
- title: '图片选择失败',
- icon: 'none'
- });
- }
- });
- },
-
- /**
- * 删除已上传图片
- */
- deleteImage(e) {
- const index = e.currentTarget.dataset.index;
- const { images } = this.data.formData;
- images.splice(index, 1);
- this.setData({
- 'formData.images': images
- });
- },
-
- /**
- * 表单提交验证
- */
- validateForm() {
- const { formData } = this.data;
- // 1. 项目名称
- if (!formData.projectName.trim()) {
- wx.showToast({ title: '请输入项目名称', icon: 'none' });
- return false;
- }
- // 2. 公司名称
- if (!formData.companyName.trim()) {
- wx.showToast({ title: '请输入公司名称', icon: 'none' });
- return false;
- }
- // 3. 联系人
- if (!formData.contactName.trim()) {
- wx.showToast({ title: '请输入联系人', icon: 'none' });
- return false;
- }
- // 4. 联系电话(手机号验证)
- const phoneReg = /^1[3-9]\d{9}$/;
- if (!formData.contactPhone || !phoneReg.test(formData.contactPhone)) {
- wx.showToast({ title: '请输入正确的手机号码', icon: 'none' });
- return false;
- }
- // 5. 地址
- if (!formData.addressDetails.trim()) {
- wx.showToast({ title: '请输入地址或选择定位', icon: 'none' });
- return false;
- }
- // 6. 经纬度(数字验证)
- const lng = Number(formData.longitude);
- const lat = Number(formData.latitude);
- if (isNaN(lng) || isNaN(lat) || lng < 73 || lng > 135 || lat < 3 || lat > 54) {
- wx.showToast({ title: '请输入正确的经纬度(中国境内)', icon: 'none' });
- return false;
- }
- // 7. 图片
- if (formData.images.length === 0) {
- wx.showToast({ title: '请至少上传一张图片', icon: 'none' });
- return false;
- }
- return true;
- },
-
- /**
- * 表单提交
- */
- formSubmit(e) {
- // 防止重复提交
- if (this.data.submitting) return;
-
- // 表单验证
- if (!this.validateForm()) return;
-
- this.setData({ submitting: true });
-
- // 构造提交数据
- const submitData = {
- ...this.data.formData,
- longitude: Number(this.data.formData.longitude),
- latitude: Number(this.data.formData.latitude),
- createTime: new Date().toLocaleString() // 创建时间
- };
-
- // 实际项目中:调用接口提交数据
- this.submitFormToServer(submitData);
- },
-
- /**
- * 提交表单到服务器(实际项目替换为真实接口)
- */
- submitFormToServer(data) {
- // 重置提交状态
- this.setData({ submitting: false });
- console.log(data);
- api.request(`/sysproject/insertproject`, 'post',data ,{ isPublic: false })
- .then((data) => {
- console.log(data.data);
- if (data.code==200) {
- wx.showToast({ title: '提交成功', icon: 'success' });
- setTimeout(() => wx.navigateBack({ delta: 1 }), 1500);
- }else{
- wx.showToast({ title: res.data.msg || '提交失败', icon: 'none' });
- }
- })
- .catch((err) => {
- console.error('请求失败:', err);
- });
- },
- /**
- * 上传图片到服务器(实际项目使用
- */
- uploadImagesToServer(tempFiles) {
- tempFiles.forEach((filePath, index) => {
- wx.uploadFile({
- url: 'https://esos-iot.com:9442/sysproject/insertminio',
- filePath: filePath,
- name: 'file',
- formData: {
- 'fileType': 'project'
- },
- success: (res) => {
- const result = JSON.parse(res.data);
- if (result.code === 200) {
- // 替换临时路径为服务器路径
- const { images } = this.data.formData;
- images[index] = result.data.url;
- this.setData({
- 'formData.images': images
- });
- }
- },
- fail: () => {
- wx.showToast({ title: '图片上传失败', icon: 'none' });
- }
- });
- });
- }
- });
|