From ed5d47ad987f2a20f33fbd5cc64dbcdb208f5e15 Mon Sep 17 00:00:00 2001 From: xuxueyang <xuxy@fengyuntec.com> Date: 星期一, 26 八月 2024 11:31:53 +0800 Subject: [PATCH] add 意见反馈 --- environments/index.js | 1 common/global.scss | 46 ++++ sub_pages/partner/delivery/delivery-detail.vue | 2 pages.json | 21 + sub_pages/customer/self/feedback-detail.vue | 251 +++++++++++++++++++++++++ sub_pages/customer/self/feedback.vue | 214 +++++++++++++++++---- pages/user/supplier-user.vue | 26 ++ 7 files changed, 506 insertions(+), 55 deletions(-) diff --git a/common/global.scss b/common/global.scss index 13ee8b7..2409439 100644 --- a/common/global.scss +++ b/common/global.scss @@ -153,6 +153,52 @@ padding-right: 0rpx; line-height: 40rpx; } +.component-buttons{ + display: flex; + margin-left: auto; + width: fit-content; + + .button { + // width: 216rpx; + padding: 10rpx 20rpx; + line-height: 34rpx; + font-size: 24rpx; + height: 34rpx; + background: #20613D; + text-align: center; + border-radius: 30rpx; + min-width: 80rpx; + + } + + .button-1 { + padding: 10rpx 20rpx; + line-height: 34rpx; + font-size: 24rpx; + height: 34rpx; + background: #20613D; + text-align: center; + border-radius: 30rpx; + min-width: 80rpx; + background: #fff; + color: #333; + border: 2rpx solid #333; + + } + + .button-0 { + padding: 10rpx 20rpx; + line-height: 34rpx; + font-size: 24rpx; + height: 34rpx; + background: #20613D; + text-align: center; + border-radius: 30rpx; + min-width: 80rpx; + color: #fff; + border: 2rpx solid #20613D; + } +} .component-button-contact::after{ display: none !important; } diff --git a/environments/index.js b/environments/index.js index 7a40f75..a6f20e1 100644 --- a/environments/index.js +++ b/environments/index.js @@ -8,4 +8,3 @@ tenantId: '', type: 'dev' } - diff --git a/pages.json b/pages.json index 296e138..9757ba3 100644 --- a/pages.json +++ b/pages.json @@ -410,14 +410,19 @@ "navigationBarTitleText": "我的收藏", "enablePullDownRefresh": true } - }, - , - { - "path": "self/feedback", - "style": { - "navigationBarTitleText": "投诉反馈", - "enablePullDownRefresh": true - } + }, + { + "path": "self/feedback", + "style": { + "navigationBarTitleText": "投诉反馈", + "enablePullDownRefresh": true + } + }, + { + "path": "self/feedback-detail", + "style": { + "navigationBarTitleText": "投诉反馈" + } } // #endif ] diff --git a/pages/user/supplier-user.vue b/pages/user/supplier-user.vue index aab37ab..56b3ddb 100644 --- a/pages/user/supplier-user.vue +++ b/pages/user/supplier-user.vue @@ -100,14 +100,16 @@ <view>待付款</view> </view> <view class="order-icons" @click="goto('/pages/order/order?status=SEND',true)"> - <image src="../../static/images/customer/order/order-type-2.png" class="order-icon dfh" style="position: relative;"> + <image src="../../static/images/customer/order/order-type-2.png" class="order-icon dfh" + style="position: relative;"> <view class="image-shop-number" v-if="tj_order.sendCount">{{tj_order.sendCount||''}}</view> </image> <view>待发货</view> </view> <view class="order-icons" @click="goto('/pages/order/order?status=RECEIVE',true)"> - <image src="../../static/images/customer/order/order-type-3.png" class="order-icon dsh" style="position: relative;"> + <image src="../../static/images/customer/order/order-type-3.png" class="order-icon dsh" + style="position: relative;"> <view class="image-shop-number" v-if="tj_order.receiveCount">{{tj_order.receiveCount||''}} </view> @@ -115,7 +117,8 @@ <view>待收货</view> </view> <view class="order-icons" @click="goto('/pages/order/order?status=EVALUATE',true)"> - <image src="../../static/images/customer/order/order-type-4.png" class="order-icon dpj" style="position: relative;"> + <image src="../../static/images/customer/order/order-type-4.png" class="order-icon dpj" + style="position: relative;"> <view class="image-shop-number" v-if="tj_order.evaluateCount">{{tj_order.evaluateCount||''}} </view> @@ -123,9 +126,11 @@ <view>待评价</view> </view> <view class="order-icons" @click="goto('/pages/order/order-sale/order-sale',true)"> - <image src="../../static/images/customer/order/order-type-5.png" class="order-icon sh" style="position: relative;"> + <image src="../../static/images/customer/order/order-type-5.png" class="order-icon sh" + style="position: relative;"> <view class="image-shop-number" v-if="tj_order.salesPendingCount"> - {{tj_order.salesPendingCount||''}}</view> + {{tj_order.salesPendingCount||''}} + </view> </image> <view>售后</view> @@ -251,6 +256,13 @@ <uni-icons type="right"></uni-icons> </view> </view> + <view class="user-util m-t-12 flex" @click="goto('/sub_pages/customer/self/feedback',true)"> + <view class="title">投诉反馈</view> + <view class="right-icon"> + <uni-icons type="right"></uni-icons> + </view> + </view> + <!-- v-if="selftype==='customer'" --> <view class="user-util m-t-12 flex" @click="clearlogout"> <view class="title">退出登录</view> @@ -259,6 +271,10 @@ </view> </view> + + + + <view class="user-util m-t-12 " v-if="selftype==='supplier'||selftype==='customer' || !selftype"> <view class="title">我的客服</view> <view class="flex flex-wrap-normal"> diff --git a/sub_pages/customer/self/feedback-detail.vue b/sub_pages/customer/self/feedback-detail.vue new file mode 100644 index 0000000..0c75326 --- /dev/null +++ b/sub_pages/customer/self/feedback-detail.vue @@ -0,0 +1,251 @@ +<script> + export default { + data() { + return { + dto: { + id: '', + feedBack: '', + createTime: '', + reply: '', + replyTime: '', + type: '', + pictures: [], + }, + id: '', + + }; + }, + async onLoad(options) { + this.id = options.id || '' + + + await this.init() + + }, + + methods: { + async init() { + this.$message.showLoading() + const { + data + } = await this.$http.request('get', '/api/feedback/page/view?id=' + this.id, {}) + + this.$message.hideLoading() + if (data) { + var t = data || {} + if (!t.pictures) { + t.pictures = [] + } else { + try { + t.pictures = JSON.parse(t.pictures) || [] + } catch (e) { + console.log('parse arriveImages', e) + } + } + this.dto = { + ...this.dto, + ...t + } + } + }, + + + + } + } +</script> +<template> + <view class="delivery-detail-page bg-white p20"> + <view v-if="dto.id"> + <view class="delivery-info flex"> + <view class="flex1 desc"> + <view class="name">投诉反馈类型:{{ dto.typeStr || dto.type || '-'}}</view> + + <view class="name">投诉反馈内容:{{ dto.feedBack || '-'}}</view> + <view class="name">提交时间:{{ dto.createTime || '-' }}</view> + <view class="line-gray"></view> + <view class="name">回复内容:{{ dto.reply || '-'}}</view> + <view class="name">回复时间:{{ dto.replyTime || '-' }}</view> + </view> + </view> + + + </view> + <view class="m-t-12 flex" v-if="dto.pictures&&dto.pictures.length>0"> + <view class="m-l-15 m-r-0 station"> + <view>投诉反馈图片</view> + </view> + <view class="m-t-12 m-r-10 " v-for="(timg,index) of dto.pictures" :key="index"> + <image class="arrive-img" :src="timg" @click.stop="previewImg(timg)"> + </image> + </view> + </view> + </view> + + </view> +</template> + +<style lang="scss" scoped> + .delivery-detail-page { + .arrive-img { + width: 96rpx; + height: 96rpx; + border-radius: 4rpx; + border: 2rpx dashed #CECECE; + } + + .delivery-order-item { + .title { + font-weight: 600; + font-size: 28rpx; + color: #000000; + line-height: 40rpx; + + .level { + font-weight: 400; + font-size: 28rpx; + color: #20613D; + line-height: 40rpx; + margin-left: 20rpx; + } + } + + .buttons { + display: flex; + + .button { + margin: 0 auto; + width: 98rpx; + line-height: 48rpx; + border-radius: 24rpx; + border: 2rpx solid #CECECE; + text-align: center; + font-size: 24rpx; + color: #666666; + line-height: 34rpx; + } + + .button-0 { + color: #fff; + border: 2rpx solid #20613D; + background: #20613D; + } + } + + .flower-img { + width: 128rpx; + height: 118rpx; + min-width: 128rpx; + min-height: 118rpx; + } + + .each-list { + display: flex; + flex-wrap: wrap; + margin-top: 6rpx; + + .each-item { + min-width: 30%; + max-width: 40%; + text-align: center; + margin-left: 0rpx; + margin-right: auto; + display: flex; + + .label { + font-weight: 400; + font-size: 24rpx; + color: #666666; + text-align: left; + padding-right: 10rpx; + } + + .label::after { + content: ": " + } + + .value { + font-weight: 400; + font-size: 24rpx; + color: #666666; + } + } + } + } + + .popup-check-form { + background: #FFFFFF; + border-radius: 16rpx; + // width: 690rpx; + height: 882rpx; + margin-top: 120rpx; + margin-left: 30rpx; + margin-right: 30rpx; + padding: 24rpx 36rpx; + + .check-img { + width: 96rpx; + height: 96rpx; + border-radius: 4rpx; + border: 2rpx dashed #CECECE; + } + + .submit { + margin-top: 30rpx; + + .form-input { + height: 36rpx; + line-height: 36rpx; + } + + .value-item { + min-width: 152rpx; + width: fit-content; + text-align: center; + height: 58rpx; + background: #F1F5F2; + border-radius: 36rpx; + margin-bottom: 18rpx; + font-weight: 400; + font-size: 28rpx; + line-height: 58rpx; + padding: 8rpx 24rpx; + color: #33a868; + margin-left: 16rpx; + margin-right: 16rpx; + border: 2rpx solid #F1F5F2; + } + + .value-item.cur { + background: #E1F0E7; + border-radius: 36rpx; + border: 2rpx solid #20613D; + color: #20613D; + + } + } + } + + .delivery-info { + padding: 20rpx; + + .desc { + font-weight: 400; + font-size: 28rpx; + color: #666666; + line-height: 40rpx; + } + + .station { + height: 50rpx; + background: #C6E8D4; + border-radius: 4rpx; + padding-left: 20rpx; + padding-right: 20rpx; + min-width: 110rpx; + + line-height: 50rpx; + } + } + } +</style> \ No newline at end of file diff --git a/sub_pages/customer/self/feedback.vue b/sub_pages/customer/self/feedback.vue index 87060aa..ee79494 100644 --- a/sub_pages/customer/self/feedback.vue +++ b/sub_pages/customer/self/feedback.vue @@ -13,6 +13,10 @@ <view class="name">回复内容:{{ item.reply || '-'}}</view> <view class="name">回复时间:{{ item.replyTime || '-' }}</view> </view> + <view class="line-gray"></view> + <view class="component-buttons"> + <view class="button-1" @click="toDetail(item)">查看详情</view> + </view> </view> </view> <footer-msg :more="page.total>0&&page.total>page.current*page.size&&list.length>0"></footer-msg> @@ -25,30 +29,65 @@ </view> - <!-- <uni-popup ref="popup" type="bottom"> + <uni-popup ref="popup" type="bottom"> <view class="component-popup_input_all"> - <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">填写投诉/反馈内容</view> - <view v-for="(item,i) in level_columns" :key="i" class="m-t-20"> - <view class="m-t-12 flex value-items"> - <view class="value-item" @click="()=>{ - if(each.value!==query.value){ - query.level = each.value - query.levelStr = each.label - refreshList() - $refs.popup.close() - } - }" :class="[query.level==each.value?'cur':'']" v-for="(each, j) in item" :key="j"> - {{ each.label || '-' }} + + + <view class="close-parent"> + 填写投诉/反馈内容 + <uni-icons class="close" type="closeempty" @click="$refs.popup.close()"></uni-icons> + </view> + + <view class="submit form"> + <view class="form-item" style="height: unset;"> + <view class="form-item-label require" style="min-width: 120rpx;margin-right: 10rpx;"> + 类型 + </view> + <view class="form-item-value flex value-items"> + <view class="value-item" @click="()=>{ + if(submitForm.type!==each.value){ + submitForm.type = each.value + } + }" :class="[submitForm.type==each.value?'cur':'']" v-for="(each, j) in type_columns" :key="j"> + {{ each.label || '-' }} + </view> + </view> + </view> + + <view class="form-item"> + <view class="form-item-label require"> + 内容 + </view> + <view class="form-item-value"> + <input v-model="submitForm.feedBack" placeholder="填写投诉/反馈内容" class="form-input"></input> + </view> + </view> + <view class="form-item"> + <view class="form-item-label require"> + 图片 + </view> + <view class="form-item-value m-l-a m-r-0"> + <view class="t-red" @click="uploadCheckImage()">上传</view> + </view> + </view> + <view class="flex p20" v-if="submitForm.pictures&&submitForm.pictures.length>0"> + <view class="m-t-12 m-r-10 " v-for="(timg,index) of submitForm.pictures" :key="index"> + <image class="check-img" :src="timg" @click.stop="previewImg(timg)"> + </image> + <view class="t-red text-center" @click.stop="deleteCheckImage(index)">删除</view> </view> </view> </view> - <view class="button-space"></view> - <view> - <view class="button-green" @click="$refs.popup.close()">关闭 - </view> + + <!-- <view class="line-gray"></view> --> + + <view class="component-buttons m-t-20" style="width: unset;"> + <view class="button-1 m-auto" @click="$refs.popup.close()">关闭</view> + <view class="button-0 m-auto" @click="submit">提交</view> </view> </view> - </uni-popup> --> + + </uni-popup> </view> </template> @@ -56,7 +95,10 @@ <script> export default { data() { - return {} + return { + submitForm: {}, + type_columns: [], + } }, async onPullDownRefresh() { await this.refreshList() @@ -68,36 +110,120 @@ async onLoad() { this.listApi = '/api/feedback/my/feedback/list' this.getList() + this.$http.request('get', '/api/code/value', { + params: { + type: 'feedback_type' + } + }).then(res => { + var data = res.data + this.type_columns = data || [] + + }) }, methods: { - async addFeedback() { - const res = await this.$message.confirm('', { - editable: true, - title: '请填写投诉/反馈内容' + toDetail(item) { + uni.navigateTo({ + url: `/sub_pages/customer/self/feedback-detail?id=${item.id}` }) - if (res.content && res.confirm) { - // 发送请求 - if (!res.content) { - this.$message.showToast('未填写内容') - } else { - this.$message.showLoading() - const { - code - } = await this.$http.request('post', '', { - data: { - feedBack: res.content + }, + async deleteCheckImage(index) { + await this.$message.confirm('确定删除吗') + this.submitForm.pictures.splice(index, 1) + }, + uploadCheckImage() { + let that = this + uni.chooseImage({ + count: 1, // 最多可以选择的图片张数,默认9 + sizeType: ['compressed'], //original 原图,compressed 压缩图,默认二者都有 + sourceType: ['camera', 'album'], //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 + success: function(res) { + let errMsg = res.errMsg + let tempFiles = res.tempFiles + if (errMsg === 'chooseImage:ok') { + if (tempFiles[0].size > 1024 * 1024 * 5) { + that.$message.confirm('图片最多支持5M大小,超出大小限制') + return } - }) - this.$message.hideLoading() - if (code == 0) { - await this.refreshList() - this.$message.showToast('提交成功') + that.$message.showLoading() + that.$http.upload(tempFiles[0].path).then(async res => { + console.log('res1', res) + var pic = res.data && res.data.length > 0 && res.data[ + 0] + .url || '' + that.$message.hideLoading() + that.submitForm.pictures.push(pic) + that.$forceUpdate() + }).catch(res => { + that.$message.hideLoading() + console.error(res) + }) } } + }) + }, + async addFeedback() { + this.submitForm = { + feedBack: '', + type: '', + pictures: [], + } + this.$refs.popup.open() + + // const res = await this.$message.confirm('', { + // editable: true, + // title: '请填写投诉/反馈内容' + // }) + // if (res.content && res.confirm) { + // // 发送请求 + // if (!res.content) { + // this.$message.showToast('未填写内容') + // } else { + // this.$message.showLoading() + // const { + // code + // } = await this.$http.request('post', '', { + // data: { + // feedBack: res.content + // } + // }) + // this.$message.hideLoading() + // if (code == 0) { + // await this.refreshList() + // this.$message.showToast('提交成功') + // } + // } - } else { + // } else { + // } + }, + + async submit() { + console.log('submitForm',this.submitForm) + if (!this.submitForm.type) { + this.$message.showToast('未选择类型') + return + } + if (!this.submitForm.feedBack) { + this.$message.showToast('未填写内容') + return + } + this.$message.showLoading() + const { + code + } = await this.$http.request('post', '/api/feedback/page/new', { + data: { + feedBack: this.submitForm.feedBack, + type: this.submitForm.type, + pictures: JSON.stringify(this.submitForm.pictures) + } + }) + this.$message.hideLoading() + if (code == 0) { + this.$refs.popup.close() + await this.refreshList() + this.$message.showToast('提交成功') } } @@ -163,4 +289,12 @@ } } } + .component-popup_input_all{ + .check-img { + width: 96rpx; + height: 96rpx; + border-radius: 4rpx; + border: 2rpx dashed #CECECE; + } + } </style> \ No newline at end of file diff --git a/sub_pages/partner/delivery/delivery-detail.vue b/sub_pages/partner/delivery/delivery-detail.vue index e148c37..df13f1b 100644 --- a/sub_pages/partner/delivery/delivery-detail.vue +++ b/sub_pages/partner/delivery/delivery-detail.vue @@ -337,7 +337,7 @@ <view class="form-item-label require" style="min-width: 120rpx;margin-right: 10rpx;"> 降级等级 </view> - <view class="form-item-value flex"> + <view class="form-item-value flex "> <view class="value-item" @click="()=>{ if(form.targetLevel!==query.value){ form.targetLevel = each.value -- Gitblit v1.9.3