首页 > 小程序教程 > 微信小程序收货人联系地址设置页面样式设计制作开发教程

微信小程序收货人联系地址设置页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序收货人联系地址设置页面样式设计制作开发教程,制作好以后效果图如下:
一、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" class="ww" 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;
}


button {
  width: 90%;
 position: relative;

  top:100rpx;
  color: #fff;
  background-color: #d9002f;
}

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

三、js页面代码如下:
//城市选择
var app = getApp();
Page({
  data: {
    shengArr: [],//省级数组
    shengId: [],//省级id数组
    shiArr: [],//城市数组
    shiId: [],//城市id数组
    quArr: [],//区数组
    shengIndex: 0,
    shiIndex: 0,
    quIndex: 0,
    mid: 0,
    sheng:0,
    city:0,
    area:0,
    code:0,
    cartId:0
  },
  formSubmit: function (e) {
    var adds = e.detail.value;
    var cartId = this.data.cartId;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Address/add_adds',
      data: {
        user_id:app.d.userId,
        receiver: adds.name,
        tel: adds.phone,
        sheng: this.data.sheng,
        city: this.data.city,
        quyu: this.data.area,
        adds: adds.address,
        code: this.data.code,
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {// 设置请求的 header
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        // success
        var status = res.data.status;
        if(status==1){
          wx.showToast({
            title: '保存成功!',
            duration: 2000
          });
        }else{
          wx.showToast({
            title: res.data.err,
            duration: 2000
          });
        }
        wx.redirectTo({
          url: 'user-address/user-address?cartId=' + cartId
        });
      },
      fail: function () {
        // fail
        wx.showToast({
          title: '网络异常!',
          duration: 2000
        });
      }
    })


  },
  onLoad: function (options) {
    // 生命周期函数--监听页面加载
    var that = this;
    that.setData({
      cartId: options.cartId
    })
    //获取省级城市
    wx.request({
      url: app.d.ceshiUrl + '/Api/Address/get_province',
      data: {},
      method: 'POST',
      success: function (res) {
        var status = res.data.status;
        var province = res.data.list;
        var sArr = [];
        var sId = [];
        sArr.push('请选择');
        sId.push('0');
        for (var i = 0; i < province.length; i++) {
          sArr.push(province[i].name);
          sId.push(province[i].id);
        }
        that.setData({
          shengArr: sArr,
          shengId: sId
        })
      },
      fail: function () {
        // fail
        wx.showToast({
          title: '网络异常!',
          duration: 2000
        });
      },
    })

  },

  bindPickerChangeshengArr: function (e) {
    this.setData({
      shengIndex: e.detail.value,
      shiArr: [],
      shiId: [],
      quArr:[],
      quiId: []
    });
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Address/get_city',
      data: {sheng:e.detail.value},
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {// 设置请求的 header
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        // success
        var status = res.data.status;
        var city = res.data.city_list;

        var hArr = [];
        var hId = [];
        hArr.push('请选择');
        hId.push('0');
        for (var i = 0; i < city.length; i++) {
          hArr.push(city[i].name);
          hId.push(city[i].id);
        }
        that.setData({
          sheng:res.data.sheng,
          shiArr: hArr,
          shiId: hId
        })
      },
      fail: function () {
        // fail
        wx.showToast({
          title: '网络异常!',
          duration: 2000
        });
      },

    })
  },
  bindPickerChangeshiArr: function (e) {
    this.setData({
      shiIndex: e.detail.value,
      quArr:[],
      quiId: []
    })
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Address/get_area',
      data: {
        city:e.detail.value,
        sheng:this.data.sheng
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {// 设置请求的 header
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var status = res.data.status;
        var area = res.data.area_list;

        var qArr = [];
        var qId = [];
        qArr.push('请选择');
        qId.push('0');
        for (var i = 0; i < area.length; i++) {
          qArr.push(area[i].name)
          qId.push(area[i].id)
        }
        that.setData({
          city:res.data.city,
          quArr: qArr,
          quiId: qId
        })
      },
      fail: function () {
        // fail
        wx.showToast({
          title: '网络异常!',
          duration: 2000
        });
      }
    })
  },
  bindPickerChangequArr: function (e) {
    console.log(this.data.city)
    this.setData({
      quIndex: e.detail.value
    });
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Address/get_code',
      data: {
        quyu:e.detail.value,
        city:this.data.city
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {// 设置请求的 header
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        that.setData({
          area:res.data.area,
          code:res.data.code
        })
      },
      fail: function () {
        // fail
        wx.showToast({
          title: '网络异常!',
          duration: 2000
        });
      }
    })
  }

})

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

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