本文给大家带来的是微信小程序收件人唯一收货仓库地址页设计制作开发教程,制作好以后效果图如下:
一、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 () {
}
})
|