微信小程序实现订单多商品评价(页面模板)

微信小程序实现多商品评论(页面模板)

wxml


<block wx:for="{{orderList}}" wx:for-index="index" wx:for-item="item" wx:key="key"><view class="order-info"><view class="order-info-prod"><image src="{{item.image}}" mode="aspectFit"></image><view class="order-info-prod-right"><view class="order-info-prod-right-name">{{item.subTitle}}</view><view class="order-info-prod-right-size">尺寸：{{item.orderColor}} {{item.orderSize}}</view></view></view><view class="order-info-star"><view class="order-info-star-label">整体评价</view><van-rate value="{{item.star }}" data-item="{{item}}" data-id="{{index}}"  void-icon="star" color='#F3AE5A' void-color="#eee" custom-class="order-info-star-star" bind:change="changeStar" /></view><view class="showImages"><textarea bindinput="setMessage" placeholder-class="message-placeholder" maxlength="100" placeholder="快写下你的感受分享给大家吧！" /><van-uploader file-list="{{ item.fileList }}" multiple="true" accept="image" max-count="3" data-id="{{index}}"  image-fit="aspectFit" bind:after-read="afterRead" bind:delete="deleteImages" /></view><view class="publish"><view class="message"><van-checkbox custom-class="checkbox"  data-id="{{index}}"  value="{{item.anonymity }}" checked-color="#D40A14" bind:change="changeCheck">匿名</van-checkbox><view class="showImages-label">您的评价会以匿名的形式展现</view></view><view class="publishBtn" id="{{item.orderItemId}}" bindtap="publish">发布</view></view></view>
</block>
<van-toast id="van-toast" />
<van-dialog id="van-dialog" />

wxss

/* pages/prod-comm/prod-comm.wxss */
page{background-color: whitesmoke;
}
.order-info{width: 89%;background-color: white;border-radius: 8px;margin: 10px 0px 10px 10px;padding: 10px;
}.order-info-prod image{margin-top: -20px;width: 60px;height: 80px;
}
.order-info-prod .order-info-prod-right{margin-left: 70px;margin-top: -60px;
}.order-info-prod .order-info-prod-right .order-info-prod-right-name {width: 260px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 15px;
}.order-info-prod .order-info-prod-right .order-info-prod-right-size{width: 260px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 13px;color: darkgray;
}.order-info .showImages{margin-top: 10px;
}.order-info .showImages textarea{width: 98%;
}
.message-placeholder{font-size: 13px;color: darkgray;
}.showImages-label{font-size: 12px;margin-top: -17px;margin-left: 70px;color: darkgray;width: 160px;
}.publish{padding-top: 10px;
}
.publishBtn{float: right;margin-top: -26px;background-color: #ff3333;color: white;width: 65px;line-height: 30px;text-align: center;border-radius: 5px;
}.order-info-star{padding-top: 10px;
}.order-info-star .order-info-star-star{margin-top: -21px;margin-left: 70px;
}

js 假数据

orderList : [{"image":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=596276033,515392538&fm=26&gp=0.jpg","subTitle":"测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据ss","orderColor":"22","orderSize":"2222222222222222222222222222222222222222222222222223"},{"image":"https://ss1.bdstatic.com//it/u=596276033,515392538&fm=26&gp=0.jpg","subTitle":"测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据ss","orderColor":"22","orderSize":"2222222222222222222222222222222222222222222222222223"}],

源代码来其它文章，此处拿着进行修改了，原有文章没有wxss，只有js和wxml，此文章的wxss完全自己手写，如果喜欢的话请点个赞吧。(后端人员来写前段真不容易啊)

微信小程序实现订单多商品评价(页面模板)相关推荐

微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...
微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
【SpringBoot学习】39、SpringBoot 集成 wxJava 微信小程序：订单支付
文章目录 SpringBoot 集成 wxJava 微信小程序:订单支付 1.整合 wxJava 小程序 2.支付配置类 3.application.yml 配置 4.授权登录流程 5.uniapp ...
微信小程序的订单评论页面-仿淘宝
微信小程序的订单评论页面-仿淘宝在网上搜了下,大部分都挺麻烦的,所以自己写了个,感觉还可以先看效果图: 需要用到的图片: 上代码: wxml: <view class='contains'& ...
[附源码]计算机毕业设计Python+uniapp基于微信小程序社区订单管理系统lum8u(程序+lw+远程部署)
[附源码]计算机毕业设计Python+uniapp基于微信小程序社区订单管理系统lum8u(程序+lw+远程部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: ...
[微信小程序]商城之购买商品数量实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 这里有三种变更数量的方式, 加号,减号,input输入 , 这里做了限制,数量不能小于等于0并且不能超 ...
微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
微信小程序上线订单管理功能：实现订单管理、售后维权一体化
[TechWeb]3月13日消息,微信小程序正式上线订单管理功能,可支持用户统一查看小程序交易订单并进行管理. 如今在小程序"云逛街"早已成了微信用户的新潮流.为了方便用户对小程序 ...

微信小程序实现订单多商品评价(页面模板)

微信小程序实现多商品评论(页面模板)

微信小程序实现订单多商品评价(页面模板)相关推荐

最新文章

热门文章