<view class='topMaxBox'>
 <view class='topLeft' style='width: {{ imgW }}px; height: {{ imgW }}px; flex: {{ imgW }}px 0 0;'>
 <image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image>
 </view>
 <view class='topRight'>
 <view class='r_top'>
 <text>商品名稱</text>
 <text>{{ evaluate }}</text>
 </view>
 <view class='r_bottom' catchtouchmove='moveFun' catchtouchstart='moveFun'>
 <image src='{{ starSrc }}'></image>
 </view>
 </view>
</view>

.topMaxBox{
 padding: 5%;
 display: flex;
 flex-direction: row;
}

.topLeft{
 border: 1px solid #e5e5e5;
 margin-right: 10px;
}

.topLeft image{
 width: 100%;
 height: 100%;
}

.topRight{
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.r_top{
 display: flex;
 justify-content: space-between;
 margin-bottom: 2%;
}

.r_bottom image{
 width: 130px;
 height: 18px;
}

 /**
 * 獲取系統(tǒng)信息
 */
 sysInfo: function () {
 let res = wx.getSystemInfoSync();
 let info = {
 width: res.windowWidth,//可使用窗口寬度
 height: res.windowHeight,//可使用窗口高度
 system: res.system,//操作系統(tǒng)版本
 statusBarHeight: res.statusBarHeight//狀態(tài)欄的高度
 }
 return info;
 },

const app = new getApp();

// page/issueEvaluate/issueEvaluate.js
Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 imgW: app.sysInfo().width * 0.146,//根據(jù)屏幕寬度動態(tài)設置圖片寬度
 starLen: 5,//星星評價的初始等級
 starSrcArr: ['../../image/star2-1.png', '../../image/star2-2.png', '../../image/star2-3.png', '../../image/star2-4.png', '../../image/star2-5.png', '../../image/star2-6.png'],//星星評價的圖片資源數(shù)組
 starSrc: '../../image/star2-6.png',//星星評價的初始圖片
 evaluate: '非常好',
 evaluateArr: ['非常差', '差', '一般', '好', '比較好', '非常好']
 },

 moveFun: function (e) {
 let imgBoxW = app.sysInfo().width * 0.146 + 10;//商品圖片X軸盡頭坐標(即星星的初始坐標值)
 let starW = 130 / 5;//每一顆星星的寬度(用于計算星星的X軸坐標)
 let xAxial = e.touches[0].clientX;//獲取當前觸摸的X軸坐標

 //如果當前觸摸的X軸坐標小于初始坐標則顯示為0顆星星
 if (xAxial < imgBoxW) {
 this.data.starLen = 0;
 //如果當前觸摸的X軸坐標大于初始坐標并小于第2顆星星的初始坐標則顯示為1顆星星
 } else if (imgBoxW + (starW * 2) > xAxial && xAxial > imgBoxW) {
 this.data.starLen = 1;
 //如果當前觸摸的X軸坐標大于第2顆星星的初始坐標并小于第3顆星星的初始坐標則顯示為2顆星星
 } else if (imgBoxW + (starW * 3) > xAxial && xAxial > imgBoxW + (starW * 2)) {
 this.data.starLen = 2;
 //如果當前觸摸的X軸坐標大于第3顆星星的初始坐標并小于第4顆星星的初始坐標則顯示為3顆星星
 } else if (imgBoxW + (starW * 4) > xAxial && xAxial > imgBoxW + (starW * 3)) {
 this.data.starLen = 3;
 //如果當前觸摸的X軸坐標大于第4顆星星的初始坐標并小于第5顆星星的初始坐標則顯示為4顆星星
 } else if (imgBoxW + (starW * 5) > xAxial && xAxial > imgBoxW + (starW * 4)) {
 this.data.starLen = 4;
 //如果當前觸摸的X軸坐標大于第5顆星星初始坐標則顯示為5顆星星
 } else if (xAxial > imgBoxW + (starW * 5)) {
 this.data.starLen = 5;
 }
 //設置img標簽的SRC路徑 替換成對應的星星圖片
 this.data.starSrc = this.data.starSrcArr[this.data.starLen];
 //設置為對應的評價等級文字
 this.data.evaluate = this.data.evaluateArr[this.data.starLen];
 this.setData({
 starSrc: this.data.starSrc,
 evaluate: this.data.evaluate
 });
 },

})