7 changed files with 280 additions and 8 deletions
-
11src/pages.json
-
37src/pages/index/index.vue
-
6src/subpackage/complaint/js/api.js
-
10src/subpackage/complaint/js/server.js
-
224src/subpackage/complaint/pages/operate.vue
-
BINsrc/subpackage/complaint/static/images/camera.png
-
BINsrc/subpackage/complaint/static/images/close.png
@ -0,0 +1,6 @@ |
|||
import { ORIGIN } from "@/js/api"; |
|||
|
|||
export const COMPLAINT_API = { |
|||
uploadComplaintImgs:`${ORIGIN}/upload/file/complaint_imgs`, // 反馈图片上传
|
|||
complaintSubmit:`${ORIGIN}/admin/assistant/complaint/submit`, // 商家助手 - 商家投诉建议
|
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
import { Server } from '@/js/server'; |
|||
|
|||
class C_Server extends Server { |
|||
constructor(props){ |
|||
super(props) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default new C_Server(); |
|||
@ -0,0 +1,224 @@ |
|||
<template> |
|||
<view class="complaint-operate"> |
|||
<view class="co-box"> |
|||
<view class="co-tit"><text class="ct-star">*</text>反馈内容</view> |
|||
<view class="co-space"></view> |
|||
<textarea class="co-textarea" placeholder="请输入" v-model="iptTxt"></textarea> |
|||
</view> |
|||
<view class="co-space"></view> |
|||
<view class="co-box co-upload"> |
|||
<view class="co-tit">上传图片</view> |
|||
<view class="co-space"></view> |
|||
<view class="co-ls"> |
|||
<view class="cl-item" v-for="(e, i) in imgTempLs" :key="i"> |
|||
<image class="ci-close" @click="delImg(i)" src="/subpackage/complaint/static/images/close.png"></image> |
|||
<image class="ci-img" mode="aspectFill" :src="e"></image> |
|||
</view> |
|||
<view class="cl-item cl-add" @click="chooseImg"> |
|||
<image class="ca-icon" mode="aspectFit" src="/subpackage/complaint/static/images/camera.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="co-fixed"> |
|||
<view class="cf-btn">取消</view> |
|||
<view class="cf-btn" @click="submitBtn">提交</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { routeTo, showModal, jsonPar, showLoad, hideLoad, showNone } from "@/utils/util.js"; |
|||
import server from '../js/server'; |
|||
import { COMPLAINT_API } from '../js/api'; |
|||
export default { |
|||
data(){ |
|||
return { |
|||
iptTxt: '', |
|||
imgTempLs: [], |
|||
brand_id: '' |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.brand_id = options?.brand_id ?? ''; |
|||
}, |
|||
methods: { |
|||
chooseImg(){ |
|||
uni.chooseImage({ |
|||
success: imgRes =>{ |
|||
console.log(imgRes); |
|||
this.imgTempLs = imgRes?.tempFilePaths || [] |
|||
}, |
|||
failMsg: imgErr => { |
|||
console.warn('complaint operate chooseImage err --->' , imgErr); |
|||
} |
|||
}) |
|||
}, |
|||
delImg(idx){ |
|||
this.imgTempLs.splice(idx, 1); |
|||
}, |
|||
async submitBtn(){ |
|||
let { iptTxt, imgTempLs, brand_id } = this; |
|||
if(!iptTxt)return showModal({ title: '提示', content: '请输入反馈内容' }); |
|||
try{ |
|||
showLoad(); |
|||
let _imgLs = await Promise.all(imgTempLs.map((e, i) => { |
|||
return this.uploadImg(e) |
|||
})); |
|||
hideLoad(); |
|||
|
|||
this.submitComplaintInfo({ |
|||
brand_id: brand_id, |
|||
mc_text: iptTxt ?? '', |
|||
mc_imgs: _imgLs?.map(e => e?.url ?? '') || [] |
|||
}) |
|||
}catch(err){ |
|||
hideLoad(); |
|||
console.warn('complaint operate submitBtn err --->', err); |
|||
} |
|||
}, |
|||
uploadImg(imgPath){ |
|||
return server.uploadFile({ |
|||
url: COMPLAINT_API.uploadComplaintImgs, |
|||
filePath: imgPath, |
|||
}) |
|||
.then(res => { |
|||
let _res = jsonPar(res.data); |
|||
if(_res.code == 0){ |
|||
return _res.data; |
|||
}else{ |
|||
return Promise.reject(_res); |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
console.warn('complaint operate uploadImg err --->', err); |
|||
return ({ |
|||
type: 'error', |
|||
tempPath: imgPath |
|||
}) |
|||
}) |
|||
}, |
|||
//获取核销信息 预兑换 |
|||
submitComplaintInfo({ brand_id, mc_text, mc_imgs }){ |
|||
showLoad(); |
|||
return server.post({ |
|||
url: COMPLAINT_API.complaintSubmit, |
|||
data: { brand_id, mc_text, mc_imgs }, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res=>{ |
|||
hideLoad(); |
|||
let _data = res?.data || {}; |
|||
if(_data?.code === 0){ |
|||
showNone('操作成功！'); |
|||
setTimeout(routeTo, 1000); |
|||
}else{ |
|||
return Promise.reject(_data); |
|||
} |
|||
|
|||
}) |
|||
.catch(err=>{ |
|||
hideLoad(); |
|||
showModal({ |
|||
title: '提示', |
|||
content: err.message || '操作失败！' |
|||
}) |
|||
console.warn('complaint operate submitComplaintInfo err --->', err); |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
page { |
|||
background-color: #F2F2F7; |
|||
} |
|||
.complaint-operate{ |
|||
padding: 24upx; |
|||
@include isPd(122upx); |
|||
.co-space{ |
|||
height: 24upx |
|||
} |
|||
.co-tit{ |
|||
@include flcw(32upx, 44upx, #1a1a1a, 500); |
|||
.ct-star{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.co-box{ |
|||
padding: 30upx; |
|||
border-radius: 20upx; |
|||
background: #fff; |
|||
|
|||
} |
|||
.co-textarea{ |
|||
padding: 20upx; |
|||
width: auto; |
|||
height: 306upx; |
|||
border-radius: 16upx; |
|||
background: #F6F8F9; |
|||
@include flcw(32upx, 44upx, #1a1a1a); |
|||
} |
|||
.co-upload{ |
|||
padding: 30upx 20upx; |
|||
.co-ls{ |
|||
font-size: 0; |
|||
.cl-item{ |
|||
position: relative; |
|||
margin: 24upx 10upx 0upx; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: 200upx; |
|||
height: 200upx; |
|||
border-radius: 10upx; |
|||
overflow: hidden; |
|||
&.cl-add{ |
|||
padding-top: 36upx; |
|||
border: 2upx dashed #D8D8D8; |
|||
.ca-icon{ |
|||
display: block; |
|||
margin: 0 auto; |
|||
width: 120upx; |
|||
height: 120upx; |
|||
} |
|||
} |
|||
.ci-close{ |
|||
position: absolute; |
|||
top: 6upx; |
|||
right: 6upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
.ci-img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.co-fixed{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
padding: 10upx 30upx; |
|||
width: 100%; |
|||
background: #F2F2F7; |
|||
@include ctf(center); |
|||
.cf-btn{ |
|||
margin: 0 20upx; |
|||
width: 240upx; |
|||
text-align: center; |
|||
border: 1px solid $mColor; |
|||
border-radius: 50upx; |
|||
@include flcw(32upx, 92upx, $mColor); |
|||
background: #fff; |
|||
&+.cf-btn{ |
|||
background: $mColor; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
|
After Width: 60 | Height: 60 | Size: 862 B |
|
After Width: 20 | Height: 20 | Size: 215 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue