1 <template>
2 <div class="about-copyright">
3 <div class="about-title">{{ title }}</div>
4 <div class="about-content">
5 <p>请详细说明您的问题和意见（必填)</p>
6 <div class="textContent">
7 <textarea
8 rows="5"
9 cols="100"
10 class="textarea"
11 placeholder="请输入您的问题和意见，不超过200个字"
12 maxlength="200"
13 v-model="textarea"
14 ></textarea>
15 <i>{{textarea.length}}/200</i>
16 </div>
17 <p class="question">上传相关问题截图或图片(最多6张)</p>
18 <!-- 上传图片 -->
19 <el-upload
20 ref='upload'
21 :action="uploadFile.action"
22 list-type="picture-card"
23 :limit="6"
24 :on-preview="handlePictureCardPreview"
25 :before-upload="beforeAvatarUpload"
26 :on-success="handleAvatarSuccess"
27 :data="uploadFile.data"
28 >
29 <i class="el-icon-plus" style="margin-top:10px;">
30 <br/>
31 <i style="font-size:12px;">支持jpg、jpeg、png、bmp格式，不要超过5M</i>
32 </i>
33 </el-upload>
34 <el-dialog :visible.sync="dialogVisible" size="tiny">
35 <img width="100%" :src="dialogImageUrl" alt>
36 </el-dialog>
37 <div class="content-footer">
38 <button class="button" @click="onSelectImage">提交</button>
39 </div>
40 </div>
41 </div>
42 </template>
43
44
45 <script>
46 export default {
47 name: "about-copyright",
48 components: {},
49 data() {
50 return {
51 title: "意见反馈",
52 textarea: "",
53 dialogImageUrl: "",
54 dialogVisible: false,
55 activeNames: 0,
56 noteList: [],
57 uploadFile: {
58 action: "", //上传的路径
59 options: {}, //签名的返回值
60 url: "" //上传之后生成的url
61 },
62 editImageUrl: "",
63 fileList: [],
64 imagesString:[],
65 SSOTOKEN:this.$factory.getcookiesInClient('token'),
66 };
67 },
68 methods: {
69 onSelectImage() {
70 const options = {
71 token:this.SSOTOKEN,
72 clientType: 'pc',
73 context: this.textarea,
74 images: this.imagesString,
75 distinguishability: '1024*768',
76 equipmentVersion: navigator.userAgent
77 };
78 this.$dialogBox({
79 title:"提示",
80 msg:"提交成功，感谢您对行家的支持",
81 left_butnName:"确定",
82 right_butnName:"取消",
83 checkBtn:false,
84 callback: () => {
85 this.$fetch("getAboutAgreenBack", options).then(res => {
86 console.log(res, '输出回到数据');
87 this.$Message.success("提交成功!");
88 this.textarea = "";
89 this.$refs.upload.clearFiles();
90 });
91 },
92 })
93
94 },
95 handleAvatarSuccess(response, file, fileList) {
96 console.log("成功的回调", fileList);
97 this.fileList = fileList;
98 this.imagesString = this.fileList.map(item => {
99 return item.url
100 })
101 this.imagesString = this.imagesString.join();
102 console.log(this.imagesString, '获取图片的数组')
103 this.editImageUrl = this.uploadFile.url;
104 },
105 async beforeAvatarUpload(file) {
106 console.log("执行回调");
107 const typeList = ["image/jpeg","image/png", "image/bmp" , "image/jpg"]
108 const isJPG =typeList.includes(file.type)
109 const isLt2M = file.size / 1024 / 1024 < 5;
110
111 if (!isJPG) {
112 this.$Message.error("上传头像图片只能是 JPG/JPEG/PNG/BMP 格式!");
113 }
114 if (!isLt2M) {
115 this.$Message.error("上传头像图片大小不能超过 5MB!");
116 }
117 if (isJPG && isLt2M) {
118 // console.log('s',file)
119 const res = await this.fsSignature(file);
120 let data = res.data;
121 this.uploadFile.options = { ...data };
122 this.uploadFile.action = data.host;
123 this.uploadFile.data = {
124 name: this.uploadFile.options.url.split("/").slice(-1),
125 key:
126 this.uploadFile.options.dir +
127 this.uploadFile.options.url.split("/").slice(-1),
128 policy: this.uploadFile.options.policy,
129 OSSAccessKeyId: this.uploadFile.options.accessid,
130 success_action_status: "200",
131 callback: this.uploadFile.options.callback,
132 signature: this.uploadFile.options.signature
133 };
134 this.uploadFile.url = this.uploadFile.options.url;
135 this.uploadFile = Object.assign({}, this.uploadFile);
136 console.log("1", this.uploadFile);
137 return true;
138 } else {
139 return false;
140 }
141 },
142 fsSignature(file) {
143 let userInfo = JSON.parse(localStorage.getItem("userInfo"));
144 let test = file.name.split(".");
145 let key =
146 userInfo.uid + "-" + test[0] + "-" + file.lastModified + "." + test[1];
147 return this.$axios({
148 url: "https://hq-storage.hqjy.com/api/signMapLog/expert",
149 method: "post",
150 header: {
151 Accept: "application/json, text/plain, */*",
152 "Content-Type": "application/json;charset=UTF-8",
153 userToken: this.$factory.getcookiesInClient("token")
154 },
155 data: {
156 dir: "hangjiaPC-notice/image",
157 key
158 }
159 });
160 },
161 handlePictureCardPreview(file) {
162 this.dialogImageUrl = file.url;
163 this.dialogVisible = true;
164 },
165 }
166 };
167 </script>
168
169 <style lang="scss" scoped>
170 @import "../../assets/css/varibale";
171 .about-copyright {
172 width: 100%;
173 .about-content /deep/ {
174 width: 100%;
175 .question {
176 margin-bottom: 10px;
177 }
178 .textContent {
179 position: relative;
180 .textarea {
181 border: 1px solid #ccc;
182 padding: 10px;
183 margin: 10px 0;
184 }
185 .textarea:hover {
186 border: 1px solid #FC3F4C;
187 }
188 i {
189 position: absolute;
190 right: 88px;
191 bottom: 20px;
192 }
193 }
194
195 img {
196 max-width: 100%;
197 }
198 button {
199 display: inline-block;
200 line-height: 1;
201 white-space: nowrap;
202 cursor: pointer;
203 background: #409eff;
204 border: 1px solid #dcdfe6;
205 color: #fff;
206 -webkit-appearance: none;
207 text-align: center;
208 -webkit-box-sizing: border-box;
209 box-sizing: border-box;
210 outline: 0;
211 margin: 0;
212 -webkit-transition: 0.1s;
213 -o-transition: 0.1s;
214 transition: 0.1s;
215 font-weight: 500;
216 padding: 12px 20px;
217 font-size: 14px;
218 border-radius: 4px;
219 }
220 .content-footer {
221 display: flex;
222 justify-content: center;
223 }
224 .avatar-uploader-icon {
225 font-size: 28px;
226 color: #8c939d;
227 width: 108px;
228 height: 108px;
229 // line-height: 108px;
230 line-height: 1.42;
231 font-size: 12px;
232 color: #6b7580;
233 display: inline-block;
234 text-align: center;
235 background-color: #f5f7fa;
236 .uploader-icon {
237 margin-top: 10px;
238 font-size: 22px;
239 }
240 }
241 }
242 }
243 </style>
