举个例子一个页面有2种表单的提交方式
<navigator url="/pages/shop/shop">
<l-button type="default">店铺</l-button>
</navigator>
<navigator url="/pages/company/company">
<l-button type="error">企业</l-button>
</navigator>先讲第一个按钮 进去后跳转
页面代码：因为我用了ui 所以没写css
<l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit">
<l-steps active-index="{{showIndex}}">
<l-step title="店铺认证" bindtap="one"></l-step>
<l-step title="开始赚钱"></l-step>
</l-steps>
<view wx:if="{{showIndex==0}}">
<l-image-picker count="9" bind:linchange="onChangeTap" />
<l-form-item label="真实姓名:" name="name">
<l-input id="name" bind:lininput="name" value="{{name}}" hide-label show-row="{{false}}"/>
</l-form-item>
<l-form-item label="身份证号:" name="card">
<l-input id="card" bind:lininput="card" value="{{card}}" hide-label show-row="{{false}}"/>
</l-form-item>
<l-form-item label="开始日期:" name="startTime">
<picker mode="date" value="{{startTime}}" start="2015-09-01" end="2017-09-01" bindchange="bindStartChange">
<l-input id="startTime" class="picker" value="{{startTime}}" hide-label show-row="{{false}}"/>
</picker>
</l-form-item>
<l-form-item label="结束日期:" name="stopTime">
<picker mode="date" value="{{stopTime}}" start="2015-09-01" end="2100-09-01" bindchange="bindStopChange">
<l-input id="stopTime" class="picker" value="{{stopTime}}" hide-label show-row="{{false}}"/>
</picker>
</l-form-item>
</view>
<view wx:if="{{showIndex==1}}">
开店成功
<navigator url="/pages/user/user">
<l-button>ok</l-button>
</navigator>
</view>
<view slot="submit" wx:if="{{showIndex==0}}">
<l-button >提交</l-button>
</view>
</l-form>js部分
const http=require('../../utils/http')
import tool from "../../utils/tools";
Page({
/**
* 页面的初始数据
*/
data: {
showIndex:0,
startTime:'2015-9-1',
stopTime:'2020-9-1',
ulrs:[],
name:'',
card:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.lin.initValidateForm(this)
},
submit:tool.debounce(function(e){
http.request('addshop',{
name:this.data.name,
card:this.data.card,
stopTime:this.data.stopTime,
startTime:this.data.startTime,
pic:this.data.urls
}).then(res=>{
console.log(res);
if(res.data.error_code==0){
this.setData({
showIndex:1
})
}else{
wx.showToast({
title: res.data.msg,
duration:2000,
icon:'none'
})
}
})
}),
one(e){
this.setData({
showIndex:0
})
},
name(e){
this.setData({
name:e.detail.value
})
},
card(e){
this.setData({
card:e.detail.value
})
},
onChangeTap(e){
// console.log(e.detail);
let filePath = e.detail.current;
// console.log(tempFilePaths);
//定义一个空数组，进行存放上传图片url
var urlArr = [];
for( let index=0;index<filePath.length;index++){
wx.uploadFile({
filePath: filePath[index],
name: 'file',
url: 'http://www.接口.com/api/fileupload',
header:{'token':wx.getStorageSync('token')},
success:res=>{
console.log(res);
const data = JSON.parse(res.data);
console.log(data);
// console.log(data);
urlArr.push(data.data)
this.setData({
urls:urlArr
})
console.log(this.data.urls);
}
})
}
},
down(e){
let page=this.data.showIndex+1;
console.log(page);
this.setData({
showIndex:page
})
},
bindStartChange: function(e) {
console.log(e);
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
startTime: e.detail.value
})
},
bindStopChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
stopTime: e.detail.value
})
}
})json中：
"usingComponents": {
"l-form":"/miniprogram_npm/lin-ui/form",
"l-form-item":"/miniprogram_npm/lin-ui/form-item",
"l-input":"/miniprogram_npm/lin-ui/input",
"l-button":"/miniprogram_npm/lin-ui/button",
"l-image-picker":"/miniprogram_npm/lin-ui/image-picker",
"l-steps":"/miniprogram_npm/lin-ui/steps",
"l-step":"/miniprogram_npm/lin-ui/step"
}微信小程序就写好了
然后是后台接口
?腾讯云的图片上传的：
创建一个名为?composer.json的文件，内容如下：
{
"require": {
"qcloud/cos-sdk-v5": ">=2.0"
}
}执行以下命令，使用 Composer 安装
php composer.phar install?config/filesystem.php
'disks' => [
'local' => [
'type' => 'local',
'root' => app()->getRootPath() . 'storage',//一定要该
],控制器中
public function fileupload(Request $request)
{
$file=$request->file("file");
$savename = \think\facade\Filesystem::putFile( 'topic', $file);
$data=Cos::getCos($savename);
return json(['error_code'=>0,'data'=>$data,'msg'=>'ok']);
}?创建server/Cos.php
<?php
namespace app\api\server;
use app\Request;
use Qcloud\Cos\Client;
class Cos
{
public static function getCos($savename)
{
//腾讯云cos
$secretId = ""; //"云 API 密钥 SecretId";
$secretKey = ""; //"云 API 密钥 SecretKey";
$region = "ap-shanghai"; //设置一个默认的存储桶地域
$cosClient = new Client(
array(
'region' => $region,
'schema' => 'https', //协议头部，默认为http
'credentials' => array(
'secretId' => $secretId,
'secretKey' => $secretKey)
)
);
//设置一个对象键(尽量不包含特殊符号)
$keyv = rand(0,99999999);
# 上传文件
### 上传文件流
try {
$bucket = ""; //存储桶名称 格式：BucketName-APPID
$key = $keyv; //此处的 key 为对象键，对象键是对象在存储桶中的唯一标识
$srcPath = 'D:\phpstudy_pro\WWW\yuanlaixlm\storage/'.$savename;//本地文件绝对路径
$file = fopen($srcPath,'rb');
if ($file) {
$cosClient->Upload(
$bucket = $bucket,
$key = $key,
$body = $file
);
}
} catch (\Exception $e) {
return $e;
}
//拼接存储路径
$path = '网址'.$key;
return $path;
}然后是表单的提交接口
先创建验证类w
protected $rule = [
'uid'=>'require',
'name'=>'require',
'card'=>'require',
'pic'=>'require',
'startTime'=>'require',
'stopTime'=>'require'
];
protected $message = [
'uid.require'=>'请先登录',
'name.require'=>'请填写真实姓名',
'card.require'=>'请填写身份证号',
'pic.require'=>'请上传图片',
'startTime.require'=>'请填开始日期',
'stopTime.require'=>'请填写结束日期'
];控制器中?
public function addShop(Request $request)
{
$data=$request->param();
$data['uid']=$request->uid;
try {
validate(ShopVerify::class)->check($data);
}catch (ValidateException $e){
return json(['error_code'=>1000,'data'=>'','msg'=>$e->getError()]);
}
$result=Shop::createForm($data);
if ($result){
return json(['error_code'=>0,'data'=>'','msg'=>'添加成功']);
}
return json(['error_code'=>1000,'data'=>'','msg'=>'添加失败']);
}?第一个完事了
第二个表单
小程序页面
<l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit">
<l-steps active-index="{{showIndex}}">
<l-step title="企业认证" bindtap="one"></l-step>
<l-step title="选择等级" bindtap="two"></l-step>
<l-step title="开始赚钱" ></l-step>
</l-steps>
<view wx:if="{{showIndex==0}}">
<l-image-picker count="9" bind:linchange="onChangeTap" />
<l-form-item label="统一社会信用代码:" name="number">
<l-input id="number" bind:lininput="number" value="{{number}}" hide-label show-row="{{false}}"/>
</l-form-item>
<l-form-item label="所在省市" name="city">
<picker mode="region" bindchange="bindRegionChange" value="{{city}}" custom-item="{{customItem}}">
<l-input id="city" value="{{region[0]}}，{{region[1]}}，{{region[2]}}" hide-label show-row="{{false}}"/>
</picker>
</l-form-item>
<l-form-item label="有效期至:" name="timeStop">
<picker mode="date" value="{{timeStop}}" start="2015-09-01" end="2100-09-01" bindchange="bindTimeChange">
<l-input id="timeStop" class="picker" value="{{timeStop}}" hide-label show-row="{{false}}"/>
</picker>
</l-form-item>
<l-form-item label="详细地址:" name="address">
<l-input id="address" bindtap="map" value="{{address}}" hide-label show-row="{{false}}"/>
</l-form-item>
<l-button bind:lintap="down">下一步</l-button>
</view>
<view wx:if="{{showIndex==1}}">
<l-form-item label="选择vip:" name="vip">
<l-radio-group current="{{vipReq}}" id="vip" placement="column">
<block wx:for="{{vip}}">
<l-radio key="{{item.id}}">
<view>
{{item.title}}
</view>
<view>
￥{{item.pice}}
</view>
</l-radio>
</block>
</l-radio-group>
</l-form-item>
</view>
<view wx:if="{{showIndex==2}}">
开店成功
<navigator url="/pages/user/user">
<l-button>ok</l-button>
</navigator>
</view>
<view slot="submit" wx:if="{{showIndex==1}}">
<l-button >提交</l-button>
</view>
</l-form>?js部分
const http=require('../../utils/http')
import tool from "../../utils/tools";
Page({
/**
* 页面的初始数据
*/
data: {
showIndex:0,
number:'',
timeStop:'2020-9-1',
region: ['上海市', '上海市', '奉贤区'],
city:[],
latitude:'',
longitude:'',
address:'',
picture:'',
vip:[],
},
submit:tool.debounce(function(e){
console.log(e);
http.request('addmempany',{
number:this.data.number,
time_stop:this.data.timeStop,
pic:this.data.picture,
longitude:this.data.longitude,
latitude:this.data.latitude,
address:this.data.address,
province:this.data.region[0],
city:this.data.region[1],
region:this.data.region[2],
vip:e[0].detail.values.vip
}).then(res=>{
console.log(res);
if(res.data.error_code==0){
this.setData({
showIndex:2
})
}else{
wx.showToast({
title: res.data.msg,
duration:2000,
icon:'none'
})
}
})
}),
onChangeTap(e){
// console.log(e.detail);
let filePath = e.detail.current;
// console.log(tempFilePaths);
//定义一个空数组，进行存放上传图片url
var urlArr = [];
wx.uploadFile({
filePath: filePath[0],
name: 'file',
url: 'http://www.接口.com/api/fileupload',
header:{'token':wx.getStorageSync('token')},
success:res=>{
const data = JSON.parse(res.data);
this.setData({
picture:data.data
})
console.log(this.data.picture);
}
})
},
number(e){
this.setData({
number:e.detail.value
})
console.log(this.data.number);
},
bindRegionChange: function (e) {
wx.getLocation({
altitude: 'altitude',
})
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
},
bindTimeChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
timeStop: e.detail.value
})
},
map(e){
wx.chooseLocation({
latitude:0,
success:ret=>{
console.log(ret);
this.setData({
latitude:ret.latitude,
longitude:ret.longitude,
address:ret.name
})
}
})
},
down(e){
let page=this.data.showIndex+1;
console.log(page);
this.setData({
showIndex:page
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.lin.initValidateForm(this)
http.request('vip').then(res=>{
console.log(res.data.data);
this.setData({
vip:res.data.data
})
})
},
one(e){
this.setData({
showIndex:0
})
}
})这里的图片上传和之前的是一个接口
所以再写一个提交接口就可以了
validate
protected $rule = [
'uid'=>'require',
"number" => "require",
"time_stop" => "require",
"pic" => "require",
"longitude" => "require",
"latitude" => "require",
"address" => "require",
"province" => "require",
"city" => "require",
"region" => "require",
"vip" => "require",
];
protected $message = [
'uid.require'=>'请登录',
"number.require" => "营业执照码必填",
"time_stop.require" => "有效期必填",
"pic.require" => "营业执照未上传",
"longitude.require" => "未定位",
"latitude.require" => "未定位",
"address.require" => "详细地址未填",
"province.require" => "省未选",
"city.require" => "城市未选",
"region.require" => "地区未选",
"vip.require" => 'vip未选',
];?控制器中
public function addmempany(Request $request)
{
$data=$request->param();
$data['uid']=$request->uid;
try {
validate(MempanyVerify::class)->check($data);
}catch (ValidateException $e){
return json(['error_code'=>1000,'data'=>'','msg'=>$e->getError()]);
}
$data['province_id']=China::where('name',$data['province'])->value('id');
$data['city_id']=China::where('name',$data['city'])->value('id');
$data['region_id']=China::where('name',$data['region'])->value('id');
$result=Company::create($data);
if ($result){
return json(['error_code'=>0,'data'=>'','msg'=>'添加成功']);
}
return json(['error_code'=>1000,'data'=>'','msg'=>'添加失败']);
}单选框是后台渲染的 所以还有一个
public function vip()
{
$data=Member::select();
return json(['error_code'=>0,'data'=>$data,'msg'=>'ok']);
}全部搞定
最后最后 再方个封装方法 和 按钮防抖
封装requert
//正好定义一个公共请求的接口名，如下
const host="http://www.接口.com/api/";
//关于接口健全的token，也可以有自己的想法(可以不写)
const token=wx.getStorageSync('token')
//开始封装request
function request(url,data,method){
return new Promise((resolve,reject)=>{
wx.request({
url: host+url,
data:data||{},
header:{
'token':token
},
method:method||'GET',
success:res=>{
let statusCode=res.statusCode;
if(statusCode==429){
wx.showToast({
title: '频繁请求',
icon:'none',
duration:3000
})
return
}
if(statusCode==200){
resolve(res)
}
},
//报错也返回
fail:res=>{
wx.hideLoading()
wx.showToast({
title: '网络异常，请检查网络状态',
icon:'none',
duration:3000
})
resolve(res)
}
})
})
}
//特别注意 调用 必须写
module.exports={
request:request
}按钮防抖
/*函数节流*/
function throttle(fn, interval) {
var enterTime = 0;//触发的时间
var gapTime = interval || 300 ;//间隔时间，如果interval不传，则默认300ms
return function() {
var context = this;
var backTime = new Date();//第一次函数return即触发的时间
if (backTime - enterTime > gapTime) {
fn.call(context,arguments);
enterTime = backTime;//赋值给第一次触发的时间，这样就保存了第二次触发的时间
}
};
}
/*函数防抖*/
function debounce(fn, interval) {
var timer;
var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms
return function() {
clearTimeout(timer);
var context = this;
var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
timer = setTimeout(function() {
fn.call(context,args);
}, gapTime);
};
}
export default {
throttle,
debounce
};路由route/route.php
use think\facade\Route;
Route::get('login','Login/login');
Route::get('phone','Login/phone');
Route::group(function (){
Route::get('code','Login/code');
Route::get('wxlogin','Login/wxlogin');
Route::get('addshop','Order/addShop');
Route::get('addmempany','Order/addmempany');
Route::get('vip','Picture/vip');
Route::post('fileupload','Picture/fileupload');
})->middleware(\app\middleware\CheckToken::class)
->middleware(\think\middleware\Throttle::class, [
'visit_rate' => '5/m',
'key' => '__CONTROLLER__/__ACTION__/__IP__',
]);