首页 > 小程序教程 > 微信小程序企业版联系地址填写黄色按钮页面设计制作开发教程

微信小程序企业版联系地址填写黄色按钮页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序企业版联系地址填写黄色按钮页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section">
      <input type="text" hidden="true" value="{{mid}}" name="user_id"/>
      <input type="text" name="name" placeholder="收货人姓名" />
    </view>
    <view class="section">
      <input type="text" name="phone" placeholder="电话号码" />
    </view>
    <view class="section">
      <picker bindchange="bindPickerChangeshengArr" value="{{shengIndex}}" range="{{shengArr}}" data-id="{{shengId[shengIndex]}}">
        <view class="picker">
          选择省份:{{shengArr[shengIndex]}}
          <input hidden="true" name="province" value="{{shengArr[shengIndex]}}"/>
        </view>
      </picker>
    </view>
    <view class="section">
      <picker bindchange="bindPickerChangeshiArr" value="{{shiIndex}}" range="{{shiArr}}">
        <view class="picker">
          选择城市:{{shiArr[shiIndex]}}
          <input hidden="true" name="city" value="{{shiArr[shiIndex]}}"/>
        </view>
      </picker>
    </view>
    <view class="section">
      <picker bindchange="bindPickerChangequArr" value="{{quIndex}}" range="{{quArr}}">
        <view class="picker">
          选择地区:{{quArr[quIndex]}}
          <input hidden="true" name="town" value="{{quArr[quIndex]}}"/>
        </view>
      </picker>
    </view>
    <view class="section">
      <input type="text" name="address" placeholder="详细地址" />
    </view>
    <view>
      <label></label>
    </view>
    <view class="btn-area">
      <button formType="submit">保存地址</button>
    </view>
  </form>
</view>
 
二、wxss样式文件代码如下:
page {
  background: #efeff4;
}

/* pages/address/address.wxss */

.container {
  font-size: 12px;
  background-color: white;
}

.section {
  height: 100rpx;
  border-bottom: 1px lightgrey solid;
  display: flex;
  align-items: center;
  margin: 0 30rpx;
}

.btn-area {
  display: flex;
  justify-content: center;
}

button {
  width: 90%;
  position: fixed;
  bottom: 40rpx;
  color: #fff;
  background-color: #fc0;
}

.picker {
  width: 600rpx;
  height: 100%;
}

三、js页面代码如下:
//城市选择
var app = getApp();
Page({
  data: {
    shengArr: [],//省级数组
    shengId: [],//省级id数组
    shiArr: [],//城市数组
    shiId: [],//城市id数组
    quArr: [],//区数组
    shengIndex: 0,
    shiIndex: 0,
    quIndex: 0,
    mid: ''
  },
  formSubmit: function (e) {
    console.log(e)
    var addressOld = wx.getStorageSync('address')
    if (addressOld) {
      addressOld.push(e.detail.value)
    } else {
      var addressOld = [];
      addressOld.push(e.detail.value)
    }
    wx.setStorageSync('address', addressOld)
    wx.request({
      url: `${app.globalData.API}/address`,
      data: e.detail.value,
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        // success
        console.log(res)
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })

    wx.navigateBack({
      delta: 1, // 回退前 delta(默认为1) 页面
      success: function (res) {
        // success
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  onLoad: function (options) {
    // 生命周期函数--监听页面加载
    var that = this;
    //获取用户mid
    var mid = wx.getStorageSync('login').mid;
    that.setData({
      mid: mid
    })
    //获取省级城市
    wx.request({
      url: `${app.globalData.API}/api/district?level=1&limit=100`,
      data: {},
      method: 'GET',
      success: function (res) {
        console.log(res)
        var sArr = [];
        var sId = [];
        for (var i = 0; i < res.data.length; i++) {
          sArr.push(res.data[i].name)
          sId.push(res.data[i].id)
        }
        that.setData({
          shengArr: sArr,
          shengId: sId
        })

      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })

  },

  bindPickerChangeshengArr: function (e) {
    console.log('picker发送选择改变,携带值为', e)
    this.setData({
      shengIndex: e.detail.value
    })
    var that = this;
    wx.request({
      url: `${app.globalData.API}/api/district?level=2&upid=` + that.data.shengId[e.detail.value],
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        // success
        console.log(res)
        var hArr = [];
        var hId = [];
        for (var i = 0; i < res.data.length; i++) {
          hArr.push(res.data[i].name)
          hId.push(res.data[i].id)
        }
        that.setData({
          shiArr: hArr,
          shiId: hId
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  bindPickerChangeshiArr: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      shiIndex: e.detail.value
    })
    var that = this;
    wx.request({
      url: `${app.globalData.API}/api/district?level=3&upid=` + that.data.shiId[e.detail.value],
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        var qArr = [];
        var qId = [];
        for (var i = 0; i < res.data.length; i++) {
          qArr.push(res.data[i].name)
          qId.push(res.data[i].id)
        }
        that.setData({
          quArr: qArr,
          quiId: qId
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  bindPickerChangequArr: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      quIndex: e.detail.value
    })
  }

})

模板简介:该模板名称为【微信小程序企业版联系地址填写黄色按钮页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 17,255次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-13
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
自适应 单页式简历模板 响应式 微信公众平台 微信图片 微信文章 html5 微信模板 微信素材 企业网站
您可能会喜欢的其他模板