首页 > 小程序教程 > 微信小程序收件人唯一收货仓库地址页设计制作开发教程

微信小程序收件人唯一收货仓库地址页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序收件人唯一收货仓库地址页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--depotAddressAccount.wxml-->
<view class="in">
    <view class="left">
        <text class="left-in">基本资料</text>
    </view>
    <view class="right">
        <text class="right-in">仓库地址</text>
    </view>
</view>

<view class="advice">
  <view class="title-wrap">
    <view class="title">
      <view class="expense_before">
      </view>
      <text class="word">您唯一的收货地址</text>
    </view>
  </view>
  <view class="tips">
          您在中国购物网站进行购物时,请使用以下地址提交运单
      </view>
  <view class="all-wrap">
      
      <view class="address">
          <text class="common">收件人:<text class="detail">佰客国际9218</text></text>
          <text class="common">电话:<text class="detail">18681069319</text></text>
          <text class="common">所在地区:<text class="detail">广东省 东莞市 虎门镇</text></text>
          <text class="common" style="margin-bottom:0">地址:<text class="detail">广东省东莞市虎门镇金州梁屋新区8巷2号</text></text>
      </view>
  </view>
</view>
<view class="depot-bottom">
    <view class="wrap">
        <view class="all-title">
          <view class="for-img">
            <image class="img" src="../../images/member/fritip.png" mode="aspectFit"></image>
          </view>
          <text class="title-text">友情提示</text>
        </view>
        <view class="para">
            1、请不要发平邮和到付包裹,由于平邮需到邮局领包裹,3天内部领取邮局将收取滞纳金,佰客国际会拒收任何平邮和到付包裹。
        </view>
        <view class="para">
            2、请不要提交海关限制出口和邮政禁邮物品,否则可能会被邮政退包或海关没收物品,对于私自邮寄违禁物品我们将不负责哦。
        </view>
    </view>
</view>
 
二、wxss样式文件代码如下:
/* depotAddressAccount.wxss */.in{
  background-color:#ffffff;
  display:flex;
  justify-content:center;
  padding:15px;
  margin-bottom:15px;

}
.left{
  border-right:1px solid #d6d6d6;
  padding-right:20px;
}
.right{
  padding-left:20px;
}
.left-in{
      color: #9a9a9a;
}
.right-in{
  color: #f9364f;
}
.expense_before{
  display: inline-block;
  background-color: #0398e7;
  width: 4px;
  height: 10px;
  }
   .word{
    margin-left:10px; 
  }
.title{
  color:#6c6c6c;
  font-size: 16px;
}
.advice{

  background-color:#ffffff;
padding:10px;
padding-bottom:20px;


}
.title-wrap{
margin-bottom:10px;
}
/*additionnal   */

.all-wrap{
padding: 12px;
box-shadow:#666 0px 0px 10px;
margin-left:14px;
border-radius:3px;
margin-top: 20px;
background-color:#eeeeee;
}
.tips{
  padding-left:14px;
  color:#ff2a4f;
  margin-top: 20px;
}
.common{

  display:block;
  margin-bottom:10px;
  color:#646464;
  font-weight:bold;
}
.detail{
  font-weight:normal;
}
.depot-bottom{
  margin-top:20px;
  padding:15px 20px;
}
.wrap{
}
.all-title{
  display:flex;
  margin-bottom:10px;
}
.for-img{
  width:16px;
  height:16px;
}
.title-text{
  margin-left: 5px;
  font-weight: bold;
  color:#646464;

}
.para{
  text-indent:1.5em;
  line-height:15px;
  color:#949494;
  font-size:12px;
  margin-bottom: 5px;
}
.img{
  width:15px;
  height:15px;
}
三、js页面代码如下:
// depotAddressAccount.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

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

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