微信小程序 地址璞

一、wxml代码

 <l-card type="primary"
          plaintext="{{true}}"
          title="ljy 19919992912">
    <view class="content">
      陕西省西安市未央区
    </view>
  </l-card>
  <navigator url="/pages/citys/citys"><l-button type="default" bindtap="city">添加按钮</l-button></navigator>

  <l-button type="default" bindtap="citys">导出</l-button>

js代码

Page({
  data: {
  },

  onLoad: function (options) {
  },
 
  //省市联动
  bindRegionChange: function (e) {
    var that = this
    //为了让选择框有个默认值，    
    that.setData({
      clas: ''
    })　　　//下拉框所选择的值
    console.log('picker发送选择改变，携带值为', e.detail.value)

    this.setData({
      //拼的字符串传后台
      detailed: e.detail.value[0] + " " + e.detail.value[1] + " " + e.detail.value[2],
      //下拉框选中的值
      region: e.detail.value
    })

    this.setData({
      "AddSite.area": e.detail.value[0] + " " + e.detail.value[1] + " " + e.detail.value[2]
    })
    console.log(this.data.AddSite)
  },

  citys(){
    wx.chooseAddress({
      success (res) {
        console.log(res.userName)
        console.log(res.postalCode)
        console.log(res.provinceName)
        console.log(res.cityName)
        console.log(res.countyName)
        console.log(res.detailInfo)
        console.log(res.nationalCode)
        console.log(res.telNumber)
      }
    })
  }

})

json代码

{
  "usingComponents": {
    "l-textarea":"/miniprogram_npm/lin-ui/textarea",
    "l-button":"/miniprogram_npm/lin-ui/button",
    "l-card":"/miniprogram_npm/lin-ui/card"
  }
}

   添加页面

<view  catchsubmit="formSubmit">
<l-input label="名字" type="text" placeholder="请输入名字" name="name" />
<l-input label="手机号" type="number" placeholder="请输入手机号" />
<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>
<l-textarea  placeholder="请输入详细地址..."  />
<l-input label="邮箱编码" type="number" placeholder="请输入邮箱编码" name="email" />
<l-button type="default">提交</l-button>
</view>

     添加页面wxml

<!--pages/demo1/demo1.wxml-->
<form bindsubmit='formSubmit'  bindreset='formReset'>
  <view class="container">
    <view class="login-from">
      <!--姓名-->
      <view class="inputView">
        <label class="loginLab">姓名</label>
        <input class="inputText" name="name" placeholder="请输入姓名" />
      </view>
      <view class="line"></view>
      <!--手机号-->
      <view class="inputView">
        <label class="loginLab">手机号</label>
        <input class="inputText" name="mobile"  placeholder="请输入手机号" />
      </view>
      <view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker"  name="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>
      <view class="inputView">
        <label class="loginLab">详细地址</label>
        <input class="inputText" name="address"  placeholder="请输入详细地址" name="email"/>
      </view>
      <!--登录按钮-->
      <view class="loginBtnView">
        <button class="loginBtn" catchtap="submit" type="primary" form-type='submit' bindtap="pages">提交</button>
        <button class="loginBtn" type="primary" form-type='reset'>重置</button>
      </view>
    </view>
  </view>
</form>

js代码

//var url = 'http://wxtest.com/index.php/index'//tp5
var url = 'http://www.ment.com/api/add_insert'//源生
Page({
  data: {
    region: ['广东省', '广州市', '海珠区'],
  },
  formSubmit: function (e) {
    var that = this
 console.log(e)
    wx.request({
     
      url: url,
      data: {
        'name': e.detail.value.name,
        'mobile': e.detail.value.mobile,
        'address': e.detail.value.address,
        'picker':e.detail.value.picker,
        "email":e.detail.value.email
      },
      method: 'POST',
      header: {
        'content-type': 'application/json'
      },
      success: function (res){
        console.log(1111);
        console.log(res.data.status);
        if (res.data.status == 1) {
          wx.showToast({
            title: res.data.info,
            duration: 2000
          });
      }else{
          wx.showToast({
            title: '提交失败',
            duration: 2000
          });
        }
      },


    })

  },
  bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})

css代码

/* pages/demo1/demo1.wxss */
page{
  height: 100%;
}
 
.container {
  height: 70%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  background-color: #f2f2f2
} 
 
 
/*表单内容*/
.login-from {
  margin-top: 20px;
  flex: auto;
  height:100%;
}
 
.inputView {
  background-color: #fff;
  line-height: 44px;
}
/*输入框*/
.nameImage, .keyImage {
  margin-left: 22px;
  width: 14px;
  height: 14px
}
 
.loginLab {
  margin: 15px 15px 15px 10px;
  color: #545454;
  font-size: 14px
}
.inputText {
  flex: block;
  float: right;
  text-align: right;
  margin-right: 22px;
  margin-top: 11px;
  color: #cccccc;
  font-size: 14px
}
 

/*按钮*/
.loginBtnView {
  width: 750rpx;
  height: 750rpx;
  background-color: #f2f2f2;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
 
.loginBtn {
  width: 350rpx;
  margin-top: 15rpx;
  margin-left: 17rpx;
  float: left;
}

后台代码

public function addInsert(){
        //接收数据
        $data = input('post.');
//        print_r($data);die();
        //将数据存入数据库
        $res = Phone::create($data);
        //将结果反馈给前台
        if($res){
            $arr['status'] = 1;
            $arr['info'] = '提交成功';
        }else{
            $arr['status'] = 0;
            $arr['info'] = '提交失败';
        }
        echo json_encode($arr);
        die;
    }