|
|
@@ -11,15 +11,29 @@
|
|
|
<div class="update_photo">
|
|
|
<div class="title">选择图片:</div>
|
|
|
<div class="update_container card upload-parent-box">
|
|
|
- <div class="update_button display-flex" >
|
|
|
+ <div class="update_button display-flex">
|
|
|
<div class="display-flex upload-box" @click="getImage('album')">
|
|
|
<img src="/static/appeal/photo.png" />
|
|
|
- <div class="txt">上传</div>
|
|
|
+ <div class="txt">上传</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="display-flex upload-box-photo"
|
|
|
+ v-for="(item, index) in uploadList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ :src="item"
|
|
|
+ mode="aspectFit"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ @click="showLarge(item)"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ src="../../static/del.png"
|
|
|
+ class="del-icon"
|
|
|
+ mode="aspectFit"
|
|
|
+ @click="delPhoto(index)"
|
|
|
+ ></image>
|
|
|
</div>
|
|
|
- <div class="display-flex upload-box-photo" v-for="(item,index) in uploadList" :key="index">
|
|
|
- <image :src="item" mode="aspectFit" style="width: 100%;height: 100%;" @click="showLarge(item)"/>
|
|
|
- <image src="../../static/del.png" class="del-icon" mode="aspectFit" @click="delPhoto(index)"></image>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -30,7 +44,12 @@
|
|
|
</div>
|
|
|
<div class="tel info_msg">
|
|
|
<label>联系方式:</label>
|
|
|
- <input type="text" class="card ipt" v-model="question.contact_phone" disabled="true" />
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="card ipt"
|
|
|
+ v-model="question.contact_phone"
|
|
|
+ disabled="true"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
|
|
@@ -46,103 +65,103 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
msg: "提出诉求",
|
|
|
- uploadList:[],
|
|
|
- imgIdList:[],
|
|
|
+ uploadList: [],
|
|
|
+ imgIdList: [],
|
|
|
question: {
|
|
|
- content: "",
|
|
|
- contact_name: "",
|
|
|
- contact_phone:getApp().globalData.user_phone,
|
|
|
+ content: "",
|
|
|
+ contact_name: "",
|
|
|
+ contact_phone: getApp().globalData.user_phone,
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- getImage(type){
|
|
|
- let that = this;
|
|
|
- if(that.uploadList.length >= 3){
|
|
|
- uni.showToast({
|
|
|
- title:'最多上传3张图片',
|
|
|
- icon:'none',
|
|
|
- duration:2500
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- uni.chooseImage({
|
|
|
- sourceType:[type],
|
|
|
- count:3 - that.uploadList.length,
|
|
|
- sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
|
|
|
- success: (res)=>{
|
|
|
- for(let i=0;i<res.tempFilePaths.length;i++){
|
|
|
- that.uploadList.push(res.tempFilePaths[i])
|
|
|
- that.uploadFileRequest(res.tempFilePaths[i])
|
|
|
- // uni.getImageInfo({
|
|
|
- // src: res.tempFilePaths[i],
|
|
|
- // success: (image)=>{
|
|
|
- // let msg = {textValue:res.tempFilePaths[i]};
|
|
|
- // console.log(msg)
|
|
|
- // //that.uploadFileRequest(msg,4)
|
|
|
- // }
|
|
|
- // });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- uploadFileRequest(fileVal){
|
|
|
- uni.showLoading({
|
|
|
- title:'上传中',
|
|
|
- mask:true
|
|
|
- })
|
|
|
- let that = this;
|
|
|
- let md5Sign = md5(
|
|
|
- "method=" +
|
|
|
- "upload" +
|
|
|
- "×tamp=" +
|
|
|
- getApp().globalData.globalTimestamp +
|
|
|
- "&secret=" +
|
|
|
- getApp().globalData.secret
|
|
|
- );
|
|
|
- let url = getApp().globalData.shareUrl +
|
|
|
- "api/api.php" +
|
|
|
- "?method=upload&source=consult×tamp=" +
|
|
|
- getApp().globalData.globalTimestamp +
|
|
|
- "&sign=" +
|
|
|
- md5Sign;
|
|
|
- uni.uploadFile({
|
|
|
- url:url, //需要设置为全局
|
|
|
- filePath:fileVal,
|
|
|
- name:'file',
|
|
|
- formData: {
|
|
|
- file:fileVal,
|
|
|
- },
|
|
|
- success: res => {
|
|
|
- let tmpres=JSON.parse(res.data);
|
|
|
- console.log(tmpres)
|
|
|
- uni.hideLoading()
|
|
|
- that.imgIdList.push(tmpres.data.id)
|
|
|
- },
|
|
|
- fail:res=>{
|
|
|
- console.log("上传请求失败");
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- delPhoto(idx){
|
|
|
- this.uploadList.splice(idx,1);
|
|
|
- this.imgIdList.splice(idx,1)
|
|
|
- },
|
|
|
- showLarge(src){
|
|
|
- uni.previewImage({
|
|
|
- urls: [src],
|
|
|
- longPressActions: {
|
|
|
- itemList: ['发送给朋友', '保存图片'],
|
|
|
- success: function(data) {
|
|
|
- },
|
|
|
- fail: function(err) {
|
|
|
- console.log(err.errMsg);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- submit(){
|
|
|
+ getImage(type) {
|
|
|
+ let that = this;
|
|
|
+ if (that.uploadList.length >= 3) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "最多上传3张图片",
|
|
|
+ icon: "none",
|
|
|
+ duration: 2500,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.chooseImage({
|
|
|
+ sourceType: [type],
|
|
|
+ count: 3 - that.uploadList.length,
|
|
|
+ sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
|
|
|
+ success: (res) => {
|
|
|
+ for (let i = 0; i < res.tempFilePaths.length; i++) {
|
|
|
+ that.uploadList.push(res.tempFilePaths[i]);
|
|
|
+ that.uploadFileRequest(res.tempFilePaths[i]);
|
|
|
+ // uni.getImageInfo({
|
|
|
+ // src: res.tempFilePaths[i],
|
|
|
+ // success: (image)=>{
|
|
|
+ // let msg = {textValue:res.tempFilePaths[i]};
|
|
|
+ // console.log(msg)
|
|
|
+ // //that.uploadFileRequest(msg,4)
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadFileRequest(fileVal) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "上传中",
|
|
|
+ mask: true,
|
|
|
+ });
|
|
|
+ let that = this;
|
|
|
+ let md5Sign = md5(
|
|
|
+ "method=" +
|
|
|
+ "upload" +
|
|
|
+ "×tamp=" +
|
|
|
+ getApp().globalData.globalTimestamp +
|
|
|
+ "&secret=" +
|
|
|
+ getApp().globalData.secret
|
|
|
+ );
|
|
|
+ let url =
|
|
|
+ getApp().globalData.shareUrl +
|
|
|
+ "api/api.php" +
|
|
|
+ "?method=upload&source=consult×tamp=" +
|
|
|
+ getApp().globalData.globalTimestamp +
|
|
|
+ "&sign=" +
|
|
|
+ md5Sign;
|
|
|
+ uni.uploadFile({
|
|
|
+ url: url, //需要设置为全局
|
|
|
+ filePath: fileVal,
|
|
|
+ name: "file",
|
|
|
+ formData: {
|
|
|
+ file: fileVal,
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ let tmpres = JSON.parse(res.data);
|
|
|
+ console.log(tmpres);
|
|
|
+ uni.hideLoading();
|
|
|
+ that.imgIdList.push(tmpres.data.id);
|
|
|
+ },
|
|
|
+ fail: (res) => {
|
|
|
+ console.log("上传请求失败");
|
|
|
+ console.log(res);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delPhoto(idx) {
|
|
|
+ this.uploadList.splice(idx, 1);
|
|
|
+ this.imgIdList.splice(idx, 1);
|
|
|
+ },
|
|
|
+ showLarge(src) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [src],
|
|
|
+ longPressActions: {
|
|
|
+ itemList: ["发送给朋友", "保存图片"],
|
|
|
+ success: function (data) {},
|
|
|
+ fail: function (err) {
|
|
|
+ console.log(err.errMsg);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
let md5Sign = md5(
|
|
|
"method=" +
|
|
|
"consult" +
|
|
|
@@ -165,33 +184,35 @@ export default {
|
|
|
"content-type": "application/x-www-form-urlencoded",
|
|
|
},
|
|
|
data: {
|
|
|
- content:this.question.content,
|
|
|
- contact_name:this.question.contact_name,
|
|
|
- contact_phone:this.question.contact_phone,
|
|
|
- attach_ids:(this.imgIdList).join(),
|
|
|
- openId:getApp().globalData.open_id
|
|
|
+ content: this.question.content,
|
|
|
+ contact_name: this.question.contact_name,
|
|
|
+ contact_phone: this.question.contact_phone,
|
|
|
+ attach_ids: this.imgIdList.join(),
|
|
|
+ openId: getApp().globalData.open_id,
|
|
|
},
|
|
|
success: (res) => {
|
|
|
if (res.data.code === 200) {
|
|
|
- uni.showToast({
|
|
|
- title:'诉求提交成功',
|
|
|
- icon:'none',
|
|
|
- duration:2500,
|
|
|
- })
|
|
|
- setTimeout(()=>{uni.navigateBack({})},2500)
|
|
|
- }else {
|
|
|
- uni.showToast({
|
|
|
- title:res.data.msg,
|
|
|
- icon:'none',
|
|
|
- duration:2500,
|
|
|
- })
|
|
|
- }
|
|
|
+ uni.showToast({
|
|
|
+ title: "诉求提交成功",
|
|
|
+ icon: "none",
|
|
|
+ duration: 2500,
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateBack({});
|
|
|
+ }, 2500);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.msg,
|
|
|
+ icon: "none",
|
|
|
+ duration: 2500,
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
fail: () => {
|
|
|
console.log("连接失败");
|
|
|
},
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -214,49 +235,49 @@ export default {
|
|
|
padding: 2%;
|
|
|
}
|
|
|
}
|
|
|
- .info{
|
|
|
+ .info {
|
|
|
margin-top: 5%;
|
|
|
.info_msg {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- label {
|
|
|
- display: inline-block;
|
|
|
- width: 20%;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .ipt {
|
|
|
- padding: 0 2%;
|
|
|
- margin: 2% 0;
|
|
|
- display: inline-block;
|
|
|
- width: 70%;
|
|
|
- height: 70rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ label {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20%;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .ipt {
|
|
|
+ padding: 0 2%;
|
|
|
+ margin: 2% 0;
|
|
|
+ display: inline-block;
|
|
|
+ width: 70%;
|
|
|
+ height: 70rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
.upload-parent-box {
|
|
|
- height: 150rpx;
|
|
|
- padding-top: 25rpx;
|
|
|
- padding-left: 20rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ padding-top: 25rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
}
|
|
|
.upload-box {
|
|
|
- width: 25%;
|
|
|
- background-color: #E0E0E0;
|
|
|
- height: 110rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- padding-top: 15rpx;
|
|
|
+ width: 25%;
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ height: 110rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding-top: 15rpx;
|
|
|
}
|
|
|
.upload-box-photo {
|
|
|
- width: 25%;
|
|
|
- height: 110rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- padding-top: 15rpx;
|
|
|
- position: relative;
|
|
|
+ width: 25%;
|
|
|
+ height: 110rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding-top: 15rpx;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.del-icon {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
}
|
|
|
img {
|
|
|
width: 60rpx;
|
|
|
@@ -264,9 +285,10 @@ export default {
|
|
|
}
|
|
|
.update_button {
|
|
|
text-align: center;
|
|
|
- display: flex;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
.submit {
|
|
|
+ font-size: 30rpx;
|
|
|
color: white;
|
|
|
width: 75%;
|
|
|
border-radius: 20rpx;
|