微信小程序商城商品扫码支付待评价页面样式模板制作设计下载 立即下载
首页 > 小程序教程 > 微信小程序商城商品扫码支付待评价页面样式模板制作设计下载

微信小程序商城商品扫码支付待评价页面样式模板制作设计下载

上一篇 下一篇
今天给大家带来商城商品扫码支付待评价页面，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="container">
  <view class="header section">
    <view class="header_rt" bindtap="tapShow">{{show==true?'编辑':'完成'}}</view>
  </view>
  <view class="body">
    <scroll-view scroll-y="true" style="height: 100%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
      <view class="{{show==true?'order_list':'order_lists'}}">
        <view class="box">
          <navigator class="top" url="articleOrder">
            <image class="img" src="{{img_url}}store/img_store.jpg"></image>
            <text class="title">汇汇演示</text>
            <image src="{{img_url}}order/lt.png" class="icon" wx:if="{{show}}"></image>
          </navigator>
        </view>
        <view class="del" wx:if="{{!show}}">
          <image class="del-pic" src="{{img_url}}order/del.png"></image>
          <text class="del-title">删除</text>
        </view>
        <view class="info">
          <view class="info-left">
            <text class="span">扫码支付</text>
            <text class="time">2016-06-12 12:59</text>
          </view>
          <view class="info-right">
            <text class="price">98.00</text>
            <text class="evaluate">待评价</text>
          </view>
        </view>
        <view class="comment-btn" wx:if="{{show}}" bindtap="evaluationTap">
          <button type="warn" size="mini" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"> 评价 </button>
        </view>
      </view>
       <view class="{{show==true?'order_list':'order_lists'}}">
        <view class="box">
          <navigator class="top" url="articleOrder">
            <image class="img" src="{{img_url}}store/img_store.jpg"></image>
            <text class="title">汇汇演示</text>
            <image src="{{img_url}}order/lt.png" class="icon" wx:if="{{show}}"></image>
          </navigator>
        </view>
        <view class="del" wx:if="{{!show}}">
          <image class="del-pic" src="{{img_url}}order/del.png"></image>
          <text class="del-title">删除</text>
        </view>
        <view class="info">
          <view class="info-left">
            <text class="span">扫码支付</text>
            <text class="time">2016-06-12 12:59</text>
          </view>
          <view class="info-right">
            <text class="price">98.00</text>
            <text class="evaluate">待评价</text>
          </view>
        </view>
        <view class="comment-btn" wx:if="{{show}}">
          <button type="warn" size="mini" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"> 评价 </button>
        </view>
      </view>
       <view class="{{show==true?'order_list':'order_lists'}}">
        <view class="box">
          <navigator class="top" url="articleOrder">
            <image class="img" src="{{img_url}}store/img_store.jpg"></image>
            <text class="title">汇汇演示</text>
            <image src="{{img_url}}order/lt.png" class="icon" wx:if="{{show}}"></image>
          </navigator>
        </view>
        <view class="del" wx:if="{{!show}}">
          <image class="del-pic" src="{{img_url}}order/del.png"></image>
          <text class="del-title">删除</text>
        </view>
        <view class="info">
          <view class="info-left">
            <text class="span">扫码支付</text>
            <text class="time">2016-06-12 12:59</text>
          </view>
          <view class="info-right">
            <text class="price">98.00</text>
            <text class="evaluate">待评价</text>
          </view>
        </view>
        <view class="comment-btn" wx:if="{{show}}">
          <button type="warn" size="mini" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"> 评价 </button>
        </view>
      </view>
       <view class="{{show==true?'order_list':'order_lists'}}">
        <view class="box">
          <navigator class="top" url="articleOrder">
            <image class="img" src="{{img_url}}store/img_store.jpg"></image>
            <text class="title">汇汇演示</text>
            <image src="{{img_url}}order/lt.png" class="icon" wx:if="{{show}}"></image>
          </navigator>
        </view>
        <view class="del" wx:if="{{!show}}">
          <image class="del-pic" src="{{img_url}}order/del.png"></image>
          <text class="del-title">删除</text>
        </view>
        <view class="info">
          <view class="info-left">
            <text class="span">扫码支付</text>
            <text class="time">2016-06-12 12:59</text>
          </view>
          <view class="info-right">
            <text class="price">98.00</text>
            <text class="evaluate">待评价</text>
          </view>
        </view>
        <view class="comment-btn" wx:if="{{show}}">
          <button type="warn" size="mini" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"> 评价 </button>
        </view>
      </view>
    </scroll-view>
  </view>
</view>
 
二、wxss样式文件代码如下：
.container {
  height: 100%;
}

.header {
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden;
  height: 4%;
}

.section {
  margin-bottom: 0rpx;
  padding:20rpx 0 20rpx 0;

}

.header_rt {
  font-size: 30rpx;
  font-weight: 300;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #666;
  z-index: 12;
  float: right;
  margin-right: 50rpx;
  padding:4rpx 0 4rpx 0;
}

.body {
  top: 0;
  left: 0;
  width: 100%;
  height: 92%;
  padding: 0;
  margin: 0;
  background: none;
  list-style: none;
}

.order_list {
  position: relative;
  width: 100%;
  padding: 0 30rpx;
  height: 300rpx;  
  background: #fff;
  margin-top: 8px;
}

.order_lists{
  position: relative;
  padding: 0 30rpx;
  background: #fff;
  margin-top: 16rpx;
  width: 84%;
}

.del{
    position: absolute;
    right: -56rpx;
    bottom: 0px;
    width: 120rpx;
    height: 100%;
    background: #E64340;
    text-align: center;
    color: #fff;
    z-index: 1;
}

.del-pic{
    display: block;
    padding-top: 64rpx;
    padding-left: 36rpx;
    width:50rpx;
    height: 50rpx;
}

.del-title{
display: block;
    padding-top: 12rpx;
    font-size: 32rpx;
}

.box {
  width: 100%;
}

.box:after {
  content: " ";
  float: left;
  width: 92%;
  margin-top: -4rpx;
  height: 1rpx;
  background: #dedede;
  overflow: hidden;
  opacity: 0.5;
}

.top {
  width: 100%;
  padding: 6px 0;
  overflow: hidden;
}

.top:after {
  position: relative;
}

.img {
  float: left;
  width: 80rpx;
  height: 80rpx;
  background: url(http://appuat.huihuishenghuo.com/img/store/grey.gif) no-repeat center / auto 42px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
}

.title {
  float: left;
  width: 60%;
  padding: 4rpx 16rpx;
  margin: 0;
  line-height: 78rpx;
  font-size: 28rpx;
  font-weight: normal;
  color: #333;
}

.icon {
  width: 80rpx;
  height: 80rpx;
  float: right;
  margin-right: 44rpx;
}

.info {
  width: 93%;
  margin-top: 6rpx;
  padding: 16rpx 0 12rpx;
  line-height: 36rpx;
  overflow: hidden;
}

.info-left {
  float: left;
  padding-left: 6rpx;
}

.info-right {
  float: right;
  padding-right: 20rpx;
  text-align: right;
}

.span {
  display: block;
  font-size: 28rpx;
  color: #333;
}

.time {
  display: block;
  padding-top: 8rpx;
  font-size: 28rpx;
  color: #999;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.price {
  display: block;
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.evaluate {
  color: #ff7e01;
  display: block;
  padding-top: 8rpx;
  font-size: 26rpx;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.comment-btn {
    width: 93%;
    overflow: hidden;
    text-align: right;
}
三、js页面代码如下：
var app = getApp();
Page({
	data: {
		show: true,
		img_url: 'http://appuat.huihuishenghuo.com/img/'
	},
	onLoad: function () {
	},
	onShow: function () {
	},
	onScroll: function (e) {
	},
	tapSearch: function () {
	},
	evaluationTap: function () {
		wx.navigateTo({
		  url: 'evaluation',
		  success: function(res){
			// success
		  },
		  fail: function() {
			// fail
		  },
		  complete: function() {
			// complete
		  }
		})
	},
	tapShow: function () {
		var isShow = this.data.show;
		this.setData({
			show: !isShow
		})
	},
});

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

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 23,221次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-28
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
响应式 单页式简历模板 企业网站 微信图片 微信文章 html5 微信模板 微信公众平台 自适应 微信素材
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 604
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 671
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,921
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,264
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,707
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,482
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备 42010602001367号 懒人模板-Copyright © 2023 版权所有