微信小程序收货人详细地址添加白色样式模板制作设计下载 立即下载
首页 > 小程序教程 > 微信小程序收货人详细地址添加白色样式模板制作设计下载

微信小程序收货人详细地址添加白色样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下：
一、wxml页面代码如下：
<view class="addAddress-edit-wrap">
  <view class="addAddress-content-container">
    <view style="padding:7px;background:#fff;">
      <view class="dialog-block-item">
        <text class="item-label">收货人</text>
        <input class="addAddress-edit-input" bindinput="nameInput" value="{{ name }}" />
      </view>
      <view class="dialog-block-item">
        <text class="item-label">联系电话</text>
        <input class="addAddress-edit-input" bindinput="contactInput" value="{{ contact }}" />
      </view>
      <view class="dialog-block-item">
        <view class="item-label">所在地区</view>
        <view class="picker-container">
          <picker bindchange="bindProvinceChange" value="{{ provinceIndex }}" range="{{ provinces }}">
            <view class="picker">{{ provincePara.text || '选择省' }}</view>
          </picker>
          <picker bindchange="bindCityChange" value="{{ cityIndex }}" range="{{ cities }}">
            <view class="picker">{{ cityPara.text || '选择市' }}</view>
          </picker>
          <picker bindchange="bindDistrictChange" value="{{ districtIndex }}" range="{{ districts }}">
            <view class="picker">{{ districtPara.text || '选择区' }}</view>
          </picker>
        </view>
      </view>
      <view class="dialog-block-item">
        <text class="item-label">详细地址</text>
        <textarea class="addAddress-edit-input" bindinput="detailInput" value="{{ detail }}"></textarea>
      </view>
      <view class="dialog-block-item" style="line-height:30px;">
        <text style="padding-left:10px;">设为默认</text>
        <switch wx:if="{{ isDefault }}" checked class="pull-right" bindchange="setDefaultAddress" />
        <switch wx:else class="pull-right" bindchange="setDefaultAddress" />
      </view>
    </view>
  </view>
</view>
<view class="addAddress-bottom-opt">
  <button class="btn btn-block btn-red" bindtap="addAddress">保存</button>
</view>
 
二、wxss样式文件代码如下：
.addAddress-top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  line-height: 42px;
  padding: 0 10px;
  text-align: center;
  box-shadow: 0 1px 2px #eee;
  background-color: #fff;
}
.addAddress-top-right {
  position: absolute;
  top: 0;
  right: 10px;
  width: 40px;
}
.addAddress-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  text-align: center;
  color: #666;
  background-color: #fff;
  box-shadow: 0 -1px 2px #eee;
}
.addAddress-content-container {
  overflow-y: auto;
  overflow-x: hidden;
}
.addAddress-show-wrap .addAddress-content-container {
  margin-bottom: 50px;
}
.addAddress-defalut-address, .myAdress-other-address {
  margin-bottom: 15px;
  padding: 0 10px;
  background-color: #fff;
}
.addAddress-address {
  display: inline-block;
  padding-top: 10px;
  line-height: 20px;
}
.addAddress-address view {
  position: relative;
}
.addAddress-address text {
  position: absolute;
  width: 70px;
}
.addAddress-address label {
  padding-left: 75px;
}
.addAddress-make-default, .addAddress-delete {
  display: inline-block;
  padding: 10px 10px 10px 0;
  color: #938CF9;
}
.addAddress-delete {
  padding-left: 10px;
  color: #F57979;
  float: right;
}
.addAddress-edit-wrap .dialog-block-item {
  padding: 10px 0;
}
.addAddress-edit-wrap picker {
  display: inline-block;
  width: 32%;
  margin-right: 1%;
}
.addAddress-bottom-opt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  text-align: center;
  padding: 12px 20px;
  background-color: #fff;
}
.addAddress-bottom-opt .btn {
  padding-top: 7px;
  padding-bottom: 7px;
  line-height: 24px;
}
.item-label {
  display:inline-block;
  box-sizing:border-box;
  padding: 0 10px;
  width:25%;
}
.addAddress-edit-input, .picker-container {
  display: inline-block;
  box-sizing: border-box;
  width: 75%;
  height: 36px;
  padding: 4px 20px;
  vertical-align: middle;
  border-radius: 4px;
  border: none;
}
textarea.addAddress-edit-input {
  height: 100px;
  margin-top: -4px;
  vertical-align: top;
}
.picker-container {
  height: auto;
  padding: 10px 20px;
}
三、js页面代码如下：
var app = getApp()

Page({
  data: {
    addressId: '',
    orderId: '',
    provinces: [],
    provinceIds: [],
    provinceIndex: 0,
    cities: [],
    cityIds: [],
    cityIndex: 0,
    districts: [],
    districtIds: [],
    districtIndex: 0,
    name: '',
    contact: '',
    detail: '',
    isDefault: 0,
    provincePara: {
      text: '',
      id: ''
    },
    cityPara: {
      text: '',
      id: ''
    },
    districtPara: {
      text: '',
      id: ''
    }
  },
  onLoad: function(options){
    var id = options.id;    
    var orderId = options.oid; 
    if(id){
      this.getAddressDetail(id);
      this.setData({
        addressId: id
      })
    }
    if(orderId) {
      this.setData({
        orderId: orderId
      })
    }
    this.getArea('province', 0);
  },
  getAddressDetail: function(id){
    var that = this;

    app.sendRequest({
      url: '/index.php?r=AppShop/GetAddressById',
      data: { address_id: id },
      success: function(res){
        var data = res.data;
        that.setData({
          name: data.address_info.name,
          contact: data.address_info.contact,
          detail: data.address_info.detailAddress,
          isDefault: +data.is_default,
          provincePara: data.address_info.province,
          cityPara: data.address_info.city,
          districtPara: data.address_info.district
        })
      }
    });
  },
  getArea: function(category, pid){
    var that = this;

    app.sendRequest({
      url: '/index.php?r=Region/getRegionList',
      data: { pid: pid },
      success: function(res){
        var list = res.data,
            ids = [];

        for (var i = 0, j = list.length - 1; i <= j; i++) {
          ids.push(list[i].id);
          list[i] = list[i].name;
        }
        switch(category){
          case 'province':  that.setData({ provinces:list, provinceIds:ids, cities:[], districts:[] })
                            break;
              case 'city':  that.setData({ cities:list, cityIds:ids, districts:[] })
                            break;
          case 'district':  that.setData({ districts:list, districtIds:ids })
                            break;
        }
      }
    });
  },
  bindProvinceChange: function(e){
    var index = e.detail.value,
        id = this.data.provinceIds[index];

    this.getArea('city', id);
    this.setData({
      provincePara: {
        text: this.data.provinces[index],
        id: id
      },
      cityPara: {
        text: '',
        id: ''
      },
      districtPara: {
        text: '',
        id: ''
      }
    })
  },
  bindCityChange: function(e){
    var index = e.detail.value,
        id = this.data.cityIds[index];

    this.getArea('district', id);
    this.setData({
      cityPara: {
        text: this.data.cities[index],
        id: id
      },
      districtPara: {
        text: '',
        id: ''
      }
    })
  },
  bindDistrictChange: function(e){
    var index = e.detail.value,
        id = this.data.districtIds[index];

    this.setData({
      districtPara: {
        text: this.data.districts[index],
        id: id
      }
    })
  },
  nameInput: function(e){
    this.setData({
      name: e.detail.value
    })
  },
  contactInput: function(e){
    this.setData({
      contact: e.detail.value
    })
  },
  detailInput: function(e){
    this.setData({
      detail: e.detail.value
    })
  },
  addAddress: function(){
    var para = {};
    var that = this;

    if(!this.completeAddressInfo()){
      return;
    }
    para.province = this.data.provincePara;
    para.city = this.data.cityPara;
    para.district = this.data.districtPara;

    para.name = this.data.name;
    para.contact = this.data.contact;
    para.detailAddress = this.data.detail;

    app.sendRequest({
      method: 'post',
      url: '/index.php?r=AppShop/addAddress',
      data: {
        address_id: this.data.addressId,
        address_info: para,
        is_default: this.data.isDefault
      },
      success: function(res){
        if(that.data.orderId){
          that.setAddress(res.data);
        } else {
          app.turnBack();
        }
      }
    })
  },
  setAddress: function(addressId){
    var orderId = this.data.orderId;

    app.sendRequest({
      url: '/index.php?r=AppShop/setAddress',
      data: {
        order_id: orderId,
        address_id: addressId
      },
      success: function(res){
        app.turnBack();
      }
    });
  },
  completeAddressInfo: function(){
    var data = this.data,
        tip = '';

    if(!tip && !data.name.trim()){
      tip = '请填写名字';
    }
    if(!tip && !data.contact){
      tip = '请填写联系方式';
    }
    if(!tip && !data.provincePara.text){
      tip = '请选择省份';
    }
    if(!tip && !data.cityPara.text){
      tip = '请选择城市';
    }
    if(!tip && !data.districtPara.text){
      tip = '请选择地区';
    }
    if(!tip && !data.detail){
      tip = '请填写详细地址';
    }

    if(tip){
      app.showModal({
        content: tip
      });
      return false;
    }
    return true;
  },
  setDefaultAddress: function(e){
    var checked = e.detail.value;
    if(checked){
      this.setData({
        isDefault: 1
      })
    } else {
      this.setData({
        isDefault: 0
      })
    }
  }
})

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

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 19,964次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-11
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信公众平台 微信文章 企业网站 响应式 单页式简历模板 微信图片 自适应 html5 微信素材 微信模板
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 670
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 759
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 12,001
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,350
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,859
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,580
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备42011302000988号 懒人模板-Copyright © 2023 版权所有