首页 > 小程序教程 > 微信小程序酒类商家红色编辑客户地址信息设计制作开发教程

微信小程序酒类商家红色编辑客户地址信息设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序酒类商家红色编辑客户地址信息设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/customer/customerDetail.wxml-->
<view class="container">
    <view class="customerInfo">
        <view class="hd-title">
                基本信息
        </view>
        <view class="view-list line-before-bottom ">
            <view class="list__hd">
                    <view class="weui-label font-color-666">客户名称</view>
            </view>
            <view class="list__bd">
               <input class="choose" bindinput="bindKeyInput" value="{{customerInfo.customerName}}"/>
            </view>
        </view>
          <view class="view-list line-before-bottom arrow-right ">
            <view class="list__hd">
                    <view class="weui-label font-color-666">客户性别</view>
            </view>
            <view class="list__bd ">
                <picker bindchange="bindSexChange" class="picker" value="{{sexIndex}}" range="{{sexs}}">
                    <input class="choose" disabled="true" placeholder="请选择" placeholder-class="font-color-ccc" value="{{customerInfo.sex || sexs[sexIndex]}}"/>
                </picker>
            </view>
        </view>
        <view class="view-list arrow-right" >
            <view class="list__hd">
                    <view class="weui-label font-color-666">客户年龄</view>
            </view>
            <view class="list__bd">
                <picker bindchange="bindAgeChange" class="picker"  value="{{ageIndex}}" range="{{ages}}">
                       <input class="choose" disabled="true"  placeholder="请选择" placeholder-class="font-color-ccc" value="{{customerInfo.age || ages[ageIndex]}}"/>
                </picker>
            </view>
        </view>
     </view>
     <view class="customerInfo">
          <view class="hd-title">
            收货地址
          </view> 
          <navigator url="shippingAddress?type=edit&addressid={{list.addressId}}" class="view-group line-before-bottom" wx:for="{{customerInfo.address}}" wx:for-item="list">
              <view class="group-hd"><image class="imgsize" src="/assets/images/address.png"></image> <text class="font-color-c24e4e">{{list.addressName}}</text></view>
              <view class="group-bd">
                  <view class="group-bd-hd">地址:<text class="font-color-999">{{list.address}}</text></view>
                  <view class="consignee-info">
                      <view>收货人:<text class="font-color-999">{{list.consignee}}</text></view>
                      <view>电话:<text class="font-color-999">{{list.phone}}</text></view>
                  </view>
              </view>
              <view class="group-icon">
                  <image src="/assets/images/buy_go@2x.png"></image>
              </view>
          </navigator>
      </view>
      <view class="butbox" style="margin:30rpx auto; ">
             <navigator url="shippingAddress?type=add" class="but bg-color-c24e4e font-color-white">添加收货地址</navigator>
      </view>
</view>        
 
二、wxss样式文件代码如下:
/* pages/customer/customerDetail.wxss */
@import '/assets/styles/view-input.wxss';

.view-group{
    background-color: #fff;
    padding: 30rpx;
    position: relative;
}
.group-hd{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: 40rpx;
}
.group-bd{
    padding-right:30rpx;
}
.group-hd .imgsize{
    width: 50rpx;
    height: 50rpx;
    margin-right: 30rpx;
}
.group-icon{
    width:40rpx;
    height: 40rpx;
    position: absolute;
    top: 50%;
    margin-top: -25rpx;
    right: 10rpx;  
}
.group-icon image{
    width:30rpx;
    height: 50rpx;
}
.consignee-info{
    display: flex;
    flex-direction: row;
}
.group-bd-hd{
    margin-bottom: 30rpx;
}
.consignee-info{
    display: flex;
    flex-direction: row;
    
}
.consignee-info view{
    flex: 1;
}

三、js页面代码如下:
// pages/customer/customerDetail.js
Page({
  data:{
     customerInfo:{
       
     },
     sexs: ["男", "女"],
     sexIndex: null,
     ages:["20岁以下","20~30岁",'30~40岁','50~60岁','60岁以上'],
     ageIndex:null
  },
  bindSexChange(e) {
          console.log('picker account 发生选择改变,携带值为', e.detail.value);
          this.setData({
              'sexIndex': e.detail.value,
              'customerInfo.sex':this.data.sexs[e.detail.value]
          })
      },
  bindAgeChange (e) {
      this.setData({
          'ageIndex': e.detail.value,
          'customerInfo.age':this.data.ages[e.detail.value]
      });
  },
  bindKeyInput(e){
     this.setData({
      'customerInfo.customerName':e.detail.value
     })
  },
  onLoad: function (options) {
      let type = options.type=='add' ?  'add' : 'edit';
      let title =  options.type=='add' ? '新建客户' : '编辑客户';
      wx.setNavigationBarTitle({
        title:title, 
      })
      let customerInfo={};
      if(type=="add"){
        customerInfo={}
      }else{
        customerInfo={
         customerName:'测试',
          sex:'男',
          age:'20~30岁',
          address:[{
            addressId:1,
            addressName:'公司',
            address:'湖北省武汉市硚口区人名西路302号明日财富大厦20层,迪吧拉亚公司研发部',
            consignee:'轩少',
            phone:13985858585
          },{
            addressId:2,
            addressName:'家',
            address:'湖北省武汉市硚口区人名西路302号明日财富大厦20层,迪吧拉亚公司研发部',
            consignee:'袁小娇',
            phone:13985858585
          }
          ]
        }
      }
      this.setData({
        customerInfo:customerInfo
      })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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

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