首页 > 小程序教程 > 微信小程序选定商品前往支付页面设计制作开发教程

微信小程序选定商品前往支付页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序选定商品前往支付页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="pay_address_wrap">
	<view class="address_icon"></view>
	<view class="pay_address">
		<view class="pay_contact">
			<span>lalala</span>
			<span>187367327482</span>
		</view>
		<view>
			 浙江省杭州市西湖区文三西路沁雅花园12幢1单元401
		</view>
	</view>
	<view class="pay_address_sel"></view>
</view>
<view class="pay_order_wrap">
	<view class="table_header">
		<span class="table_goods_name">商品</span>
		<span class="table_goods_num">数量</span>
		<span class="table_goods_con">总价</span>
	</view>
	<view class="table_content">
		<view class="table_content_item">
			<span class="table_goods_name">木村耀司登山旅行大学生户外情侣双肩背包外带小背包</span>
			<span class="table_goods_num">10</span>
			<span class="table_goods_con">¥1920.00</span>
		</view>
		<view class="table_content_item">
			<span class="table_goods_name">木村耀司登山旅行大学生户外情侣双肩背包外带小背包</span>
			<span class="table_goods_num">10</span>
			<span class="table_goods_con">¥1920.00</span>
		</view>
	</view>
</view>
<view class="pay_remarks">
	<input placeholder="填写备注" type="text" />
</view>
<view class="car_bot">
	<view class="car_bot_wrap">
		总价
		<span class="car_order_confirm" bindtap="toPay">前往支付</span>
		<span class="car_total_money">¥579.00</span>
	</view>
</view>
 
二、wxss样式文件代码如下:
.pay_address_wrap {
	background-color: #FFF;
	padding: 10px 0;
	position: relative;
	padding-left: 50px;
	padding-right: 40px;
	height: 50px;
}
.address_icon {
	position: absolute;
	top: 10px;
	left: 0;
	width: 50px;
	height: 50px;
	background-image: url(../../image/icon-dw.png);
	background-size: 28px;
	background-repeat: no-repeat;
	background-position: center;
}
.pay_address {
	font-size: 14px;
}
.pay_contact {
	margin-bottom: 8px;
}
.pay_address_sel {
	position: absolute;
	width: 40px;
    height: 50px;
    right: 0;
    top: 10px;
    background-image: url(../../image/icon-arrow.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}
.pay_order_wrap {
	background-color: #FFF;
	margin-top: 10px;
}
.table_header {
	padding: 10px;
	font-size: 14px;
	border-bottom: 1px solid #E5E5E5;
}
.table_goods_name {
	display: inline-block;
	width: 60%;
	white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.table_goods_num {
	display: inline-block;
	width: 15%;
	text-align: right;
}
.table_goods_con {
	display: inline-block;
	width: 25%;
	text-align: right;
}
.table_content {
	font-size: 12px;
	padding: 0 10px;
	padding-bottom: 10px;
}
.table_content_item {
	padding-top: 10px;
}
.pay_remarks {
	background-color: #FFF;
	font-size: 14px;
	padding: 10px;
	margin-top: 10px;
}
.car_bot {
    position: fixed;
    width: 100%;
    background-color: #FFF;
    bottom: 0;
    border-bottom: 1px solid #E5E5E5;
    font-size: 14px;
}
.car_bot_wrap {
    padding: 10px;
    height: 30px;
    line-height: 30px;
}
.car_order_confirm {
    display: inline-block;
    float: right;
    background-color: #ff7e3a;
    color: #FFF;
    border-radius: 3px;
    width: 80px;
    text-align: center;
}
.car_total_money {
    display: inline-block;
    color: #FF0000;
    margin-left: 5px;
}
 

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

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