|
|
|
1
|
+
|
|
|
|
2
|
+<!DOCTYPE html>
|
|
|
|
3
|
+<html lang="en">
|
|
|
|
4
|
+<head>
|
|
|
|
5
|
+ <meta charset="UTF-8">
|
|
|
|
6
|
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
|
7
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/font_834805_0ml90wdq5hzm.css">
|
|
|
|
8
|
+ <link rel="stylesheet" href="__INDEX__/css/base.css">
|
|
|
|
9
|
+ <link rel="stylesheet" href="__INDEX__/css/swiper.min.css">
|
|
|
|
10
|
+ <script type="text/javascript" src="__INDEX__/js/base.js"></script>
|
|
|
|
11
|
+ <title>写评价</title>
|
|
|
|
12
|
+ <style>
|
|
|
|
13
|
+ body,html{
|
|
|
|
14
|
+ width:100%;
|
|
|
|
15
|
+ height:100%;
|
|
|
|
16
|
+ background: #fff;
|
|
|
|
17
|
+ }
|
|
|
|
18
|
+ .evalute_rank{
|
|
|
|
19
|
+
|
|
|
|
20
|
+ height:1.6rem;
|
|
|
|
21
|
+ display:flex;
|
|
|
|
22
|
+ justify-content: space-between;
|
|
|
|
23
|
+ align-items: center;
|
|
|
|
24
|
+ padding: 0.38rem 1.63rem;
|
|
|
|
25
|
+ }
|
|
|
|
26
|
+ .rank_type_img{
|
|
|
|
27
|
+ font-size: 0;
|
|
|
|
28
|
+ width:0.6rem;
|
|
|
|
29
|
+ height:0.72rem;
|
|
|
|
30
|
+ }
|
|
|
|
31
|
+ .rank_type_img img{
|
|
|
|
32
|
+ width:100%;
|
|
|
|
33
|
+ }
|
|
|
|
34
|
+ .evalute_text{
|
|
|
|
35
|
+ width:0.6rem;
|
|
|
|
36
|
+ text-align: center;
|
|
|
|
37
|
+ font-size: 0.24rem;
|
|
|
|
38
|
+ color:#CCCCCC;
|
|
|
|
39
|
+ }
|
|
|
|
40
|
+ .active{
|
|
|
|
41
|
+ width:0.6rem;
|
|
|
|
42
|
+ text-align: center;
|
|
|
|
43
|
+ font-size: 0.24rem;
|
|
|
|
44
|
+ color:#FE0A01;
|
|
|
|
45
|
+ }
|
|
|
|
46
|
+ .writevalute{
|
|
|
|
47
|
+ width:6.86rem;
|
|
|
|
48
|
+ height:3.6rem;
|
|
|
|
49
|
+ background:#EBEBEB;
|
|
|
|
50
|
+ border-radius: 0.1rem;
|
|
|
|
51
|
+ margin: 0 auto;
|
|
|
|
52
|
+ padding: 0.31rem 0.3rem;
|
|
|
|
53
|
+ }
|
|
|
|
54
|
+ #write_evalute{
|
|
|
|
55
|
+ width:6.25rem;
|
|
|
|
56
|
+ height:3rem;
|
|
|
|
57
|
+ border:none;
|
|
|
|
58
|
+ outline:none;
|
|
|
|
59
|
+ background: #EBEBEB;
|
|
|
|
60
|
+ color:#999999;
|
|
|
|
61
|
+ font-size: 0.28rem;
|
|
|
|
62
|
+ }
|
|
|
|
63
|
+ .photo{
|
|
|
|
64
|
+ display:flex;
|
|
|
|
65
|
+ padding: 0.24rem 0.32rem;
|
|
|
|
66
|
+ }
|
|
|
|
67
|
+ .enter_photo{
|
|
|
|
68
|
+ width:1.8rem;
|
|
|
|
69
|
+ height:1.8rem;
|
|
|
|
70
|
+ }
|
|
|
|
71
|
+ .addphoto{
|
|
|
|
72
|
+ width:1.6rem;
|
|
|
|
73
|
+ height:1.6rem;
|
|
|
|
74
|
+ margin-top:0.1rem;
|
|
|
|
75
|
+ margin-left: 0.24rem;
|
|
|
|
76
|
+ }
|
|
|
|
77
|
+ .enter_photo img,.addphoto img{
|
|
|
|
78
|
+ width:100%;
|
|
|
|
79
|
+ }
|
|
|
|
80
|
+ .publish{
|
|
|
|
81
|
+ width:6.86rem;
|
|
|
|
82
|
+ height:0.88rem;
|
|
|
|
83
|
+ text-align: center;
|
|
|
|
84
|
+ line-height: 0.88rem;
|
|
|
|
85
|
+ background:#FE0A01;
|
|
|
|
86
|
+ color:#fff;
|
|
|
|
87
|
+ font-size:0.32rem;
|
|
|
|
88
|
+ position:fixed;
|
|
|
|
89
|
+ bottom:0.55rem;
|
|
|
|
90
|
+ left:0;
|
|
|
|
91
|
+ right:0;
|
|
|
|
92
|
+ margin:0 auto;
|
|
|
|
93
|
+ box-shadow:0px 15px 30px 0px rgba(254,10,1,0.24);
|
|
|
|
94
|
+ border-radius: 0.44rem;
|
|
|
|
95
|
+ }
|
|
|
|
96
|
+ </style>
|
|
|
|
97
|
+</head>
|
|
|
|
98
|
+<body>
|
|
|
|
99
|
+<div class="container">
|
|
|
|
100
|
+ <div class="evalute_rank">
|
|
|
|
101
|
+ <div class="rank_type">
|
|
|
|
102
|
+ <p class="rank_type_img">
|
|
|
|
103
|
+ <img src="__INDEX__/img/rank1red.png" alt="">
|
|
|
|
104
|
+ </p>
|
|
|
|
105
|
+ <p class="evalute_text active">好评</p>
|
|
|
|
106
|
+
|
|
|
|
107
|
+ </div>
|
|
|
|
108
|
+ <div class="rank_type">
|
|
|
|
109
|
+ <p class="rank_type_img">
|
|
|
|
110
|
+ <img src="__INDEX__/img/rank2gray.png" alt="">
|
|
|
|
111
|
+ </p>
|
|
|
|
112
|
+ <p class="evalute_text">中评</p>
|
|
|
|
113
|
+
|
|
|
|
114
|
+ </div>
|
|
|
|
115
|
+ <div class="rank_type">
|
|
|
|
116
|
+ <p class="rank_type_img">
|
|
|
|
117
|
+ <img src="__INDEX__/img/rank3gray.png" alt="">
|
|
|
|
118
|
+ </p>
|
|
|
|
119
|
+ <p class="evalute_text">差评</p>
|
|
|
|
120
|
+
|
|
|
|
121
|
+ </div>
|
|
|
|
122
|
+ </div>
|
|
|
|
123
|
+ <div class="writevalute">
|
|
|
|
124
|
+ <textarea name="" id="write_evalute" cols="30" rows="10" placeholder="请写下您的评价"></textarea>
|
|
|
|
125
|
+ </div>
|
|
|
|
126
|
+ <div class="photo">
|
|
|
|
127
|
+ <div style="display:flex">
|
|
|
|
128
|
+ <p class="enter_photo">
|
|
|
|
129
|
+ <img src="__INDEX__/img/apic01.png" alt="">
|
|
|
|
130
|
+ </p>
|
|
|
|
131
|
+
|
|
|
|
132
|
+ </div>
|
|
|
|
133
|
+ <div class="addphoto">
|
|
|
|
134
|
+ <!--__INDEX__/img/addimg.png-->
|
|
|
|
135
|
+ <div id="preview">
|
|
|
|
136
|
+ <img id="imghead" border="0" src="__INDEX__/img/tianjia@2x.png" style="width:100%;height:100%" onclick="$('#previewImg').click();">
|
|
|
|
137
|
+ </div>
|
|
|
|
138
|
+ <!--<img src="__INDEX__/img/delet.png" alt="" style="position:absolute;bottom:92px;left:46px" class="deleteimg"/>-->
|
|
|
|
139
|
+ <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg">
|
|
|
|
140
|
+ </div>
|
|
|
|
141
|
+ <!--<p class="addphoto">-->
|
|
|
|
142
|
+ <!--<img src="__INDEX__/img/tianjia@2x.png" alt="">-->
|
|
|
|
143
|
+ <!--</p>-->
|
|
|
|
144
|
+ </div>
|
|
|
|
145
|
+ <div class="publish">
|
|
|
|
146
|
+ 发表
|
|
|
|
147
|
+ </div>
|
|
|
|
148
|
+</div>
|
|
|
|
149
|
+</body>
|
|
|
|
150
|
+<script src="__INDEX__/js/jquery.min.js"></script>
|
|
|
|
151
|
+<script>
|
|
|
|
152
|
+ function clacImgZoomParam(maxWidth, maxHeight, width, height) {
|
|
|
|
153
|
+ var param = {
|
|
|
|
154
|
+ top: 0,
|
|
|
|
155
|
+ left: 0,
|
|
|
|
156
|
+ width: width,
|
|
|
|
157
|
+ height: height
|
|
|
|
158
|
+ };
|
|
|
|
159
|
+ if(width > maxWidth || height > maxHeight) {
|
|
|
|
160
|
+ rateWidth = width / maxWidth;
|
|
|
|
161
|
+ rateHeight = height / maxHeight;
|
|
|
|
162
|
+
|
|
|
|
163
|
+ if(rateWidth > rateHeight) {
|
|
|
|
164
|
+ param.width = maxWidth;
|
|
|
|
165
|
+ param.height = Math.round(height / rateWidth);
|
|
|
|
166
|
+ } else {
|
|
|
|
167
|
+ param.width = Math.round(width / rateHeight);
|
|
|
|
168
|
+ param.height = maxHeight;
|
|
|
|
169
|
+ }
|
|
|
|
170
|
+ }
|
|
|
|
171
|
+ param.left = Math.round((maxWidth - param.width) / 2);
|
|
|
|
172
|
+ param.top = Math.round((maxHeight - param.height) / 2);
|
|
|
|
173
|
+ return param;
|
|
|
|
174
|
+ }
|
|
|
|
175
|
+
|
|
|
|
176
|
+
|
|
|
|
177
|
+ function previewImage(file) {
|
|
|
|
178
|
+ var MAXWIDTH =60;
|
|
|
|
179
|
+ var MAXHEIGHT =77;
|
|
|
|
180
|
+ var div = document.getElementById('preview');
|
|
|
|
181
|
+ if(file.files && file.files[0]) {
|
|
|
|
182
|
+ div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
|
|
|
|
183
|
+ var img = document.getElementById('imghead');
|
|
|
|
184
|
+ img.onload = function() {
|
|
|
|
185
|
+ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
|
|
|
|
186
|
+ img.width = rect.width;
|
|
|
|
187
|
+ img.height = rect.height;
|
|
|
|
188
|
+ // img.style.marginLeft = rect.left+'px';
|
|
|
|
189
|
+ img.style.marginTop = rect.top + 'px';
|
|
|
|
190
|
+ }
|
|
|
|
191
|
+ var reader = new FileReader();
|
|
|
|
192
|
+ reader.onload = function(evt) {
|
|
|
|
193
|
+ img.src = evt.target.result;
|
|
|
|
194
|
+ }
|
|
|
|
195
|
+ reader.readAsDataURL(file.files[0]);
|
|
|
|
196
|
+ } else //兼容IE
|
|
|
|
197
|
+ {
|
|
|
|
198
|
+ var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
|
|
|
|
199
|
+ file.select();
|
|
|
|
200
|
+ var src = document.selection.createRange().text;
|
|
|
|
201
|
+ div.innerHTML = '<img id=imghead>';
|
|
|
|
202
|
+ var img = document.getElementById('imghead');
|
|
|
|
203
|
+ img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
|
|
|
|
204
|
+ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
|
|
|
|
205
|
+ status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
|
|
|
|
206
|
+ div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
|
|
|
|
207
|
+ }
|
|
|
|
208
|
+ // var formData = new FormData();
|
|
|
|
209
|
+ // var fileM = document.querySelector("#previewImg");
|
|
|
|
210
|
+ // var fileObj = fileM.files[0];
|
|
|
|
211
|
+ // formData.append("files", fileObj);
|
|
|
|
212
|
+ // $.ajax({
|
|
|
|
213
|
+ // url: 'http://hula.wx.bronet.cn/index.php/MyComment/upload',
|
|
|
|
214
|
+ // type: 'POST',
|
|
|
|
215
|
+ // data: formData,
|
|
|
|
216
|
+ // async: false,
|
|
|
|
217
|
+ // cache: false,
|
|
|
|
218
|
+ // contentType: false,
|
|
|
|
219
|
+ // processData: false,
|
|
|
|
220
|
+ // success: function(res) {
|
|
|
|
221
|
+ // console.log(res);
|
|
|
|
222
|
+ // pic = res.data;
|
|
|
|
223
|
+ // console.log(pic);
|
|
|
|
224
|
+ // imgurl.push(pic);
|
|
|
|
225
|
+ // console.log(imgurl)
|
|
|
|
226
|
+ // var text = '';
|
|
|
|
227
|
+ // text += '<div class="evaluate_pic_item" style="float:left">' +
|
|
|
|
228
|
+ // '<img src="' + pic + '" class="delimg"/>' +
|
|
|
|
229
|
+ // '<div class="icon">' +
|
|
|
|
230
|
+ // '<img src="__INDEX__/img/10拷贝2@2x_59.png" />' +
|
|
|
|
231
|
+ // '</div>' +
|
|
|
|
232
|
+ // '</div>'
|
|
|
|
233
|
+ // $(".addimg").append(text);
|
|
|
|
234
|
+ // if(imgurl.length == 3) {
|
|
|
|
235
|
+ // $(".imgone").css("display", "none");
|
|
|
|
236
|
+ // }
|
|
|
|
237
|
+ // $("#imghead").attr("src","__INDEX__/img/3@2x.png");
|
|
|
|
238
|
+ // },
|
|
|
|
239
|
+ // error: function() {
|
|
|
|
240
|
+ //
|
|
|
|
241
|
+ // }
|
|
|
|
242
|
+ // });
|
|
|
|
243
|
+ }
|
|
|
|
244
|
+</script>
|
|
|
|
245
|
+</html> |
