首页 > 小程序教程 > 微信小程序企业版地址管理新增地址页面设计制作开发教程

微信小程序企业版地址管理新增地址页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序企业版地址管理新增地址页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--地址管理-->
<radio-group class="radio-group" bindchange="radioChange">
<view hidden="{{hiddenAddress}}" class="address" wx:for="{{address}}">
  <view  class="address-icon">
    <radio checked="{{index==radioindex?true:false}}"   value="{{index}}" />
  </view>
  
  <view class="address-detail">
    <view class="address-name-phone">
      <text class="address-name">{{item.name}}</text>
      <text class="address-phone">{{item.phone}}</text>
    </view>
    <view class="address-info">{{item.province}}{{item.city}}{{item.town}}{{item.address}}</view>
    <view class="address-edit">
      <view>
        <icon></icon>
        <text hidden="{{index==radioindex?false:true}}">默认</text>
        </view>
      <view>
        <text>编辑</text>
        <text> | </text>
        <text data-id="{{index}}" bindtap="delAddress">删除</text>
      </view>
    </view>
  </view>
</view>
</radio-group>
<navigator url="../address">
  <view hidden="{{hiddenAddress}}" class="add-address">
    <image class="add-address-icon" src="#"></image>
    <view>新增地址</view>
  </view>
</navigator>
 
二、wxss样式文件代码如下:
/*地址管理*/

page {
  background-color: #efeff4;
  font-size: 10pt;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  overflow-x: hidden;
}

.address {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  margin-top: 1px;
  padding: 30rpx;
  margin: 30rpx 0;
}

.address-icon {
  width: 100rpx;
}

.address-detail {
  width: 590rpx;
}

.address-name-phone {
  margin-bottom: 20rpx;
  font-size: 11pt;
  font-weight: 900;
}

.address-name{
  margin-right: 20rpx;
}

.address-info {
  margin-bottom: 30rpx;
}

.address-edit {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px #efeff4 solid;
  padding-top: 30rpx;
}

.add-address {
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding: 18rpx;
  background-color: #fff;
  font-size: 11pt;
  font-weight: 900;
}

.add-address-icon {
  height: 20px;
  width: 20px;
}
三、js页面代码如下:
// pages/address/user-address/user-address.js
var app = getApp()
Page({
  data: {
    address: [],
    radioindex: '',
   
  },
  onLoad: function (options) {

    var that = this
    // 页面初始化 options为页面跳转所带来的参数
    var address = wx.getStorageSync('address')
    var radioindex = wx.getStorageSync('radioindex')
    var that = this
    that.setData({
      address: address,
      radioindex: radioindex
    })
    if (!address) {
      //获取物流地址
    var addname = wx.getStorageSync('address')
    var login = wx.getStorageSync('login')
    wx.request({
      url: `${app.globalData.API_URL}/address?id=` + login.mid,
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        // success
        console.log(res)
        var addname = res.data[0]
        var address = that.data.address
        if (address == '') {
          var address = []
        }
        address.push(addname)
        that.setData({
          address: address
        })

      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
    }
    
  },
  radioChange: function (e) {
    console.log(e)
    var that = this
    var login = wx.getStorageSync('login')
    console.log(that.data.address[e.detail.value])
    wx.setStorageSync('radioindex', e.detail.value)
    wx.request({
      url: `${app.globalData.API}/address`,
      data: that.data.address[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
      }
    })
    this.onLoad()
  },
  onReady: function () {
    // 页面渲染完成
  },
  delAddress: function (e) {
    console.log(e.currentTarget.dataset.id);
    var that = this;
    var cardId = e.currentTarget.dataset.cardId;
    wx.showModal({
      title: '提示',
      content: '你确认移除吗',
      success: function(res) {
        res.confirm && wx.request({
          url: app.d.hostUrl + '/ztb/shopCartZBT/DeleteShopCart',
          method:'post',
          data: {
            cartID: cardId,
          },
          header: {
            'Content-Type':  'application/x-www-form-urlencoded'
          },
          success: function (res) {
            //--init data
            var data = res.data;
            console.log(data);
            //todo
            if(data.result == 'ok'){
              //that.data.productData.length =0;
              that.loadProductData();
            }
          },
        });
      }
    });

  },
  onShow: function () {
    // 页面显示

  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

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

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