1 <view class="content" wx:for="{{content}}">
2 <view class="opinion">
3 <view class="title">
4 <image src='{{staticImg}}home/evaluation/store.png' class='store'></image>
5 <text class='style'>{{item.style}}</text>
6 <text class='price'>¥{{item.price}}</text>
7 <view class='place'>{{item.place}}</view>
8 </view>
9 </view>
10
11 <view class='middle'>
12 <view class='score'>
13 <text class='value'>评分</text>
14 <view class="block">
15 <view class='num' wx:for="{{assImg}}">
16 <image src='{{item.src}}' class='wjx'></image>
17 </view>
18 </view>
19 <text class='total'>{{item.total}}分</text>
20 <text class='date'>{{item.date}}</text>
21 </view>
22 <view class="detail">
23 <view class='describe'>{{item.describe}}</view>
24 <view class="specific">{{item.specific}}</view>
25 <view class='show'>
26 <view class='cont' wx:for="{{item.src}}">
27 <image src='{{item}}' data-index='{{index}}' bindtap='previewImg' class="bask"></image>
28 </view>
29 </view>
30 </view>
31 </view>
32 </view>
1 page{
2 font-family: "微软雅黑";
3 background-color: #f0f0f0;
4 }
5 .content{
6 width:100%;
7 overflow: hidden;
8 background-color: #fff;
9 margin-bottom: 17rpx;
10 }
11 .title{
12 width:707rpx;
13 height:133rpx;
14 background-color: #f0f0f0;
15 margin-top:13rpx;
16 margin-left:20rpx;
17 position: relative;
18 }
19 .store{
20 width: 100rpx;
21 height:100rpx;
22 position: absolute;
23 top:15rpx;
24 left:15rpx;
25 }
26 .style{
27 width:300rpx;
28 font-size: 30rpx;
29 font-weight: 700;
30 color: #000;
31 position: absolute;
32 left:132rpx;
33 top:16rpx;
34 }
35 .price{
36 width:100rpx;
37 font-size: 30rpx;
38 font-weight: 700;
39 color:#c00;
40 position: absolute;
41 left:610rpx;
42 top:16rpx;
43 }
44 .place{
45 width: 300rpx;
46 font-size: 26rpx;
47 position: absolute;
48 left:136rpx;
49 top:84rpx;
50 }
51 .middle{
52 width:707rpx;
53 overflow: hidden;
54 margin-left:20rpx;
55 background-color: #fff;
56 }
57 .score{
58 width:707rpx;
59 height:74rpx;
60 position: relative;
61 }
62 .value{
63 width:80rpx;
64 height:74rpx;
65 line-height: 74rpx;
66 float: left;
67 font-size: 30rpx;
68 }
69 .block{
70 width:160rpx;
71 height:35rpx;
72 position: absolute;
73 top:24rpx;
74 left:75rpx;
75 }
76 .wjx{
77 float: left;
78 width:30rpx;
79 height:30rpx;
80 }
81 .total{
82 width:80rpx;
83 height:35rpx;
84 font-size: 30rpx;
85 color: #c00;
86 position: absolute;
87 left:230rpx;
88 top:20rpx;
89 }
90 .date{
91 width:200rpx;
92 height:30rpx;
93 font-size: 26rpx;
94 color: #888888;
95 position: absolute;
96 left:555rpx;
97 top:24rpx;
98 }
99 .detail{
100 width:630rpx;
101 overflow: hidden;
102 margin-left: 102rpx;
103 }
104 .describe{
105 font-size: 26rpx;
106 color: #888888;
107 line-height: 43rpx;
108 text-overflow: ellipsis;
109 overflow: hidden;
110 white-space: nowrap;
111 }
112 .specific{
113 width:600rpx;
114 font-size: 26rpx;
115 line-height: 48rpx;
116 overflow : hidden;
117 text-overflow: ellipsis;
118 display: -webkit-box;
119 -webkit-line-clamp: 3;
120 -webkit-box-orient: vertical;
121 }
122 .show{
123 /* margin-top:rpx; */
124 margin-bottom: 15rpx;
125 }
126 .con{
127 width:100rpx;
128 height: 100rpx;
129 float: left;
130 display: inline-block;
131 }
132 .bask{
133 width:100rpx;
134 height:100rpx;
135 margin-top: 15rpx;
136 margin-right: 15rpx;
137 margin-bottom: 15rpx;
138 float: left;
139 }
1 const app = getApp()
2 Page({
3
4 data: {
5 staticImg: app.globalData.staticImg,
6 // 评价中的五角星(四颗星)
7 assImg: [
8 { src: "/pages/home/evaluation/img/rwj.png" },
9 { src: "/pages/home/evaluation/img/rwj.png" },
10 { src: "/pages/home/evaluation/img/rwj.png" },
11 { src: "/pages/home/evaluation/img/rwj.png" },
12 { src: "/pages/home/evaluation/img/wj.png"},
13 ],
14 // 评价中的五角星(五颗星)
15 assRImg: [
16 { src: "/pages/home/evaluation/img/rwj.png"},
17 { src: "/pages/home/evaluation/img/rwj.png"},
18 { src: "/pages/home/evaluation/img/rwj.png" },
19 { src: "/pages/home/evaluation/img/rwj.png" },
20 { src: "/pages/home/evaluation/img/rwj.png" },
21 ],
22
23 content:[
24 {
25 style:'标准洗车-五座轿车',
26 price:' 17',
27 place:'合肥青龙潭路店',
28 total:'4.0',
29 date:'2018-06-27',
30 describe:'服务态度好，洗车干净，洗车速度快',
31 specific:'很不错的一次洗车体验，下次还会光顾的',
32 src:[
33 '/pages/home/evaluation/img/Bask.png',
34 '/pages/home/evaluation/img/Bask.png',
35
36 ],
37 },
38 {
39 // url1: '/pages/home/evaluation/img/store.png',
40 style: '自助小保养',
41 price: '442',
42 place: '合肥青龙潭路店',
43 total: '4.0',
44 date: '2018-06-27',
45 describe: '服务态度好，洗车干净，洗车速度快',
46 specific: '很不错的一次洗车体验，下次还会光顾的很不错的一次洗车体验，下次还会光顾的很不错的一次洗车体验，下次还会光顾的很不错的一次洗车体验，下次还会光顾的很不错的一次洗车体验，下次还会光顾的',
47
48 },
49
50 ],
51
52 },
53
54 //图片放大
55 previewImg: function (e) {
56 console.log(e)
57 console.log(e.currentTarget.dataset.index);
58 var index = e.currentTarget.dataset.index;
59 var imgArr = this.data.content[index].src;
60 wx.previewImage({
61 current: imgArr[index], //当前图片地址
62 urls: imgArr, //所有要预览的图片的地址集合 数组形式
63 })
64 }
65
66
67 })
