<!-- 可用组件：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