<!-- 可用组件:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ --> <view class="gratuity"> <!--服务员信息--> <view class="waiter"> <image src="{{ waiter.img }}"></image> <view class="waiter-info"> <view class="name"> {{ waiter.name }} </view> <view class="iconfont icon-wuxing {{ waiter.grade }}"> {{ waiter.score }}分 </view> </view> </view> <!--服务员大标签--> <view class="waiter-title"> <text wx:for="{{ waiter.title }}">{{ item }}</text> </view> <!--评分--> <view class="give-star"> 打分: <text bindtap="chooseStar" data-star="{{ index }}" wx:for="12345" class="iconfont icon-star {{ currentStar >= index ? 'active' : '' }}"></text> </view> <!--底部标签--> <view class="tip"> 标签 </view> <view class="menu2-comment"> <view bindtap="choosetip" data-choose="{{ index }}" class="menu2-comment-item {{ chooseArr[index] ? 'active' : '' }}" wx:for="{{ waiter.comment}}" wx:key="unique"> {{ item }} </view> </view> <view class="btn" bindtap="send">提交信息</view> </view> |
.waiter { padding: 50rpx 0 40rpx 60rpx; background-image: linear-gradient(160deg, #3e4a63, #a09e94); display: flex; align-items: center; } .waiter image { width: 136rpx; height: 136rpx; border-radius: 50%; border: 2rpx solid #fff; } .waiter .waiter-info { line-height: 50rpx; margin-left: 20rpx; } .waiter .waiter-info .name { color: #fff; } .waiter .icon-wuxing { transform: translateX(40rpx); color: #fff; } .waiter-title { display: flex; line-height: 105rpx; justify-content: space-around; color: #f00; padding: 0 40rpx; border-bottom: 20rpx solid #efefef; } .give-star { font-size: 40rpx; line-height: 90rpx; padding-left: 60rpx; border-bottom: 20rpx solid #efefef; } .give-star text { margin-left: 10rpx; color: #f4e6bd; } .give-star .active { color: #ffd80d; } .tip { font-size: 30rpx; color: #333; padding-left: 25rpx; background-color: #efefef; border-bottom: 20rpx solid #efefef; position: relative; } .tip::before { content: ''; position: absolute; height: 30rpx; width: 6rpx; left: 0; background-color: #ffd300; } .menu2-comment { display: flex; flex-wrap: wrap; padding: 10px; padding-bottom: 30rpx; } .menu2-comment .menu2-comment-item { font-size: 24rpx; padding: 10rpx 30rpx; border-radius: 30rpx; color: #a67c52; border: 1rpx solid #a67c52; margin: 10rpx; } .menu2-comment .active { color: #603813; background-color: #fdf899; } .btn { line-height: 80rpx; background-color: #f00; border-radius: 10rpx; width: 80%; position: fixed; bottom: 5rpx; left: 50%; transform: translate(-50%); text-align: center; color: #fff; } |
'use strict'; // 获取全局应用程序实例对象 // const app = getApp() // 创建页面实例对象 Page({ /** * 页面的初始数据 */ data: { title: 'gratuity', currentStar: 4, chooseArr: [], waiter: { img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', name: '张三', grade: 'four-star', score: '4.8', title: ['服务周到', '负责任', '有礼貌'], comment: ['服务态度好', '分量足', '热情周到', '味道赞', '长得帅有食欲', '人很nice'] } }, /** * 星星打分 * @param e */ chooseStar: function chooseStar(e) { this.setData({ currentStar: e.currentTarget.dataset.star }); }, /** * 改变标签选择 * @param e */ choosetip: function choosetip(e) { var index = e.currentTarget.dataset.choose; this.data.chooseArr[index] = !this.data.chooseArr[index]; this.setData({ chooseArr: this.data.chooseArr }); }, /** * 打赏发送 */ send: function send() { wx.showToast({ title: '成功', icon: 'success', duration: 2000, success: function success() { wx.switchTab({ url: '../index/index' }); } }); }, /** * 初始化标签选择项 */ setChosseArr: function setChosseArr() { var comment = this.data.waiter.comment; var chooseArr = []; for (var i = 0; i < comment.length; i++) { chooseArr.push(false); } this.setData({ chooseArr: chooseArr }); }, /** * 生命周期函数--监听页面加载 */ onLoad: function onLoad() { // TODO: onLoad // 初始化chooseArr this.setChosseArr(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function onReady() { // TODO: onReady }, /** * 生命周期函数--监听页面显示 */ onShow: function onShow() { // TODO: onShow }, /** * 生命周期函数--监听页面隐藏 */ onHide: function onHide() { // TODO: onHide }, /** * 生命周期函数--监听页面卸载 */ onUnload: function onUnload() { // TODO: onUnload }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function onPullDownRefresh() { // TODO: onPullDownRefresh } }); //# sourceMappingURL=gratuity.js.map |
模板简介:该模板名称为【微信小程序打赏服务态度打分橙色样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。