123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371 |
- <template>
- <view>
- <view class="hint">
- 尊敬的市民朋友,您好!【武汉公安政务服务地图】正在试运行中,欢迎提出宝贵的意见和建议。
- </view>
- <view class="from">
- <view class="from-item">
- <view class="item-label sign">
- 评价
- </view>
- <view class="item-value" style="padding-left: 20rpx;">
- <u-rate :size="40" v-model="from.score"></u-rate>
- </view>
- </view>
- <view class="from-item">
- <view class="item-label sign">
- 问题分类
- </view>
- <view class="item-value select-item" @click.stop="$refs.SelectClassifyRefs.open()">
- <view :class="['select-value' , isPlaceholder(from.feedbackType) ? 'input-placeholder' : '']">
- {{ isPlaceholder(from.feedbackType) ? '请选择' : getLable(from.feedbackType) }}
- </view>
- <u-icon class="select-icon" size="40" name="arrow-down" />
- </view>
- </view>
- <view class="from-item">
- <view class="item-label sign">
- 联系方式
- </view>
- <view class="item-value">
- <u--input placeholder="请输入内容" border="surround" v-model="from.phone" />
- </view>
- </view>
- <view class="from-item from-item-textarea ">
- <view class="item-label sign">
- 建议内容
- </view>
- <view class="item-value">
- <u--textarea v-model="from.feedbackContent" placeholder="请输入内容" autoHeight count :maxlength="400" />
- </view>
- </view>
- <view class="from-item" v-if="CaptchaImg">
- <view class="item-label">
- 验证码
- </view>
- <view class="item-value from-item-code">
- <u--input class="code-input" placeholder="请输入内容" border="surround" v-model="from.validCode" />
- <image class="code-img" :src="CaptchaImg" mode="scaleToFill" @click.stop="getPicCaptcha()" />
- </view>
- </view>
- <view class="from-item file-box">
- <view class="file-item" v-for="item in (from.attachmentList||[])">
- <image class="file-value" :src="item.annexUrl" mode="scaleToFill" />
- </view>
- <view class="file-item updata-img-box" @click.stop="handlerUploadImage"
- v-if="!from.attachmentList || from.attachmentList.length < fileNum">
- <image class="camera" src="/static/images/camera.png" mode="aspectFit" />
- <text class="text">上传照片</text>
- </view>
- </view>
- <view class="sign file-hint"> 上传类型:照片jpg、png;</view>
- <view class="from-item submit">
- <view class="submit-btn" @click.stop="SubmitFeedback">
- 提 交
- </view>
- </view>
- </view>
- <SelectClassify ref="SelectClassifyRefs" :list="FeedbackType" @chang="r => from.feedbackType = r" />
- </view>
- </template>
- <script>
- import SelectClassify from "./SelectClassify.vue";
- import { uploadImage } from "@/utils/tool.js"
- import { getDictTree_Api, getPicCaptcha_Api, addMapuserfeedback_Api } from "@/api/feedback.js";
- export default {
- components: { SelectClassify },
- data() {
- return {
- singleSize: uni.upx2px(210),
- FeedbackType: [],
- CaptchaImg: undefined,
- SubmitLoading: false,
- // isShow
- from: {},
- fileNum: 6
- };
- },
- onLoad() {
- this.init()
- this.getDictTree()
- },
- methods: {
- init() {
- this.getPicCaptcha()
- this.from = {
- score: 0,
- feedbackType: undefined,
- phone: undefined,
- feedbackContent: undefined,
- validCode: undefined,
- attachmentList: undefined,
- validCodeReqNo:undefined
- }
- },
- async getPicCaptcha() {
- try {
- const data = await getPicCaptcha_Api();
- console.log("data == ", data)
- if (data) {
- this.CaptchaImg = data.validCodeBase64;
- this.from.validCodeReqNo = data.validCodeReqNo;
- };
- } catch (error) {
-
- //TODO handle the exception
- }
- },
- getLable(val) {
- const item = this.FeedbackType.find(el => el.value === val)
- return item ? item.label : item
- },
- isPlaceholder(val) {
- return val ? false : true
- },
- getDictTree() {
- getDictTree_Api("FEEDBACK_TYPE").then(res => {
- const arr = [];
- if (res && Object.keys(res).length) {
- for (var key in res) {
- console.log("key === ", res, key)
- arr.push({
- label: res[key],
- value: key
- })
- }
- }
- this.FeedbackType = arr || [];
- })
- },
- handlerUploadImage() {
- const L_ = this.from.attachmentList ? this.from.attachmentList.length : 0;
- const N_ = this.fileNum - L_;
- if (N_ && N_ > 0) {
- uploadImage(N_).then(res => {
- console.log("uploadImage = ", res)
- this.from.attachmentList = [...(this.from.attachmentList || []), ...(res || [])]
- })
- } else {
- uni.showToast({
- title: `只能上传${this.fileNum}张`,
- icon: 'none'
- })
- }
- },
- async SubmitFeedback() {
- try {
- if (this.SubmitLoading) return
- this.SubmitLoading = true;
- uni.showLoading()
- if (!this.from.score) {
- throw new Error("请先选择评分")
- }
- if (!this.from.feedbackType) {
- throw new Error("请先选问题分类")
- }
- if (this.from.phone) {
- const phone = this.from.phone + ''
- const regex = /^(0|[1-9]\d*)$/;
- if (!regex.test(phone) || phone.length !== 11) {
- throw new Error("请输入正确的手机号码")
- }
- } else {
- throw new Error("请输入手机号码")
- };
- if (!this.from.feedbackContent) {
- throw new Error("请输入建议内容")
- }
- if (this.CaptchaImg && !this.from.validCode) {
- throw new Error("请输入验证码")
- }
- await addMapuserfeedback_Api(this.from)
- uni.showToast({
- title: '提交成功'
- });
- this.init()
- } catch (error) {
- console.log("error.message = ", error.message)
- if (error.message) {
- uni.showToast({
- title: error.message,
- icon: 'none'
- });
- }
- //TODO handle the exception
- } finally {
- uni.hideLoading()
- this.SubmitLoading = false;
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .hint {
- font-size: 28rpx;
- padding: 20rpx;
- background-color: #E5F3FE;
- color: #68A1E4;
- }
- .from {
- width: 100%;
- padding: 20rpx 30rpx;
- .from-item {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- min-height: 100rpx;
- padding: 10rpx 0;
- border-bottom: 0.5px solid #dadbde;
- .item-label {
- width: 180rpx;
- }
- .item-value {
- width: calc(100% - 180rpx);
- }
- }
- .from-item-textarea {
- .item-label {
- height: 100rpx;
- line-height: 100rpx;
- }
- align-items: flex-start;
- ::v-deep .u-textarea__field {
- min-height: 200rpx;
- }
- }
- .select-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-left: 20rpx;
- }
- .from-item-code {
- display: flex;
- justify-content: space-between;
- height: 80rpx;
- .code-input {
- width: calc(100% - 180rpx);
- }
- .code-img {
- width: 180rpx;
- height: 100%;
- }
- }
- .submit-btn {
- width: 620rpx;
- height: 80rpx;
- margin: 50rpx auto;
- text-align: center;
- line-height: 80rpx;
- background-color: #1D72E6;
- color: #fff;
- border-radius: 10rpx;
- }
- }
- .file-box {
- flex-wrap: wrap;
- justify-content: flex-start !important;
- padding: 50rpx 0 0 0 !important;
- .file-item {
- width: 210rpx;
- height: 210rpx;
- flex-shrink: 0;
- margin: 0 30rpx 30rpx 0;
- border-radius: 10rpx;
- overflow: hidden;
- &:nth-child(3n) {
- margin-right: 0;
- }
- .file-value {
- width: 100%;
- height: 100%;
- }
- }
- .u-album {
- uni-image {
- width: 210rpx !important;
- height: 210rpx !important;
- }
- }
- .updata-img-box {
- background-color: #EFEFEF;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- border: 1rpx solid #BBBBBB;
- .camera {
- width: 80rpx;
- height: 80rpx;
- }
- .text {
- color: #9A9A9A;
- }
- }
- }
- .u-input,
- .file-box,
- .submit {
- border: none !important;
- }
- .sign {
- position: relative;
- padding-left: 20rpx;
- &::before {
- position: absolute;
- left: 0;
- top: 0;
- content: "*";
- color: red;
- font-size: 40rpx;
- }
- }
- .file-hint {
- color: red;
- }
- .input-placeholder {
- color: rgb(192, 196, 204);
- padding: 0 9rpx;
- }
- </style>
|