feat: H5 - 客户意见反馈

qwh5/components.d.ts

@@ -17,6 +17,8 @@ declare module '@vue/runtime-core' {
     Tag: typeof import('./src/components/tag.vue')['default']
     TestCom: typeof import('./src/components/TestCom.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
+    VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCollapse: typeof import('vant/es')['Collapse']
     VanCollapseItem: typeof import('vant/es')['CollapseItem']
@@ -30,6 +32,7 @@ declare module '@vue/runtime-core' {
     VanSearch: typeof import('vant/es')['Search']
     VanTab: typeof import('vant/es')['Tab']
     VanTabs: typeof import('vant/es')['Tabs']
+    VanUploader: typeof import('vant/es')['Uploader']
   }
   export interface ComponentCustomProperties {
     vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']

qwh5/src/router/index.ts

@@ -74,6 +74,22 @@ const routes: Array<RouteRecordRaw> = [
       title: '短剧推荐'
     },
   },
+  {
+    path: '/feedback',
+    name: 'feedback',
+    component: () => import(/*webpackChunkName:"feedback" */ '@/views/feedback.vue'),
+    meta: {
+      title: '意见反馈'
+    },
+  },
+  {
+    path: '/feedback/success',
+    name: 'feedbackSuccess',
+    component: () => import(/*webpackChunkName:"feedbackSuccess" */ '@/views/feedbackSuccess.vue'),
+    meta: {
+      title: '意见反馈'
+    },
+  },
 ]
 
 const router = createRouter({

qwh5/src/utils/axios.ts

@@ -140,6 +140,31 @@ export default {
     })
   },
 
+  upload(url: string, data?: object, errToast?: any) {
+    return new Promise((resolve, reject) => {
+      service({
+        method: 'post',
+        url,
+        data: data,
+        headers: {
+          'Content-Type': 'multipart/form-data;'
+        }
+      }).then(res => {
+        if (res.data.errno == 0) {
+          resolve(res.data)
+        } else {
+          resolve(res.data)
+          if (errToast) {
+            Toast(res.data.err)
+          }
+        }
+      }).catch(err => {
+        console.log(err.message, 'err');
+        reject(err)
+      });
+    })
+  },
+
   get(url: string, data?: object, errToast?: any) {
     let ksort_data: any = ksort(data);
     let str = '';

qwh5/src/views/feedback.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="feedback-wrap">
+    <div v-if="isShowForm" class="form-wrap">
+      <div class="imgs-wrap">
+        <div class="label">
+          <span>图片证据(选填)</span>
+          <span class="count">{{ fileList.length }}张/9</span>
+        </div>
+        <div class="uploader-wrap">
+          <van-uploader class="img-item" v-model="fileList" multiple :max-count="9" accept="image/*" :before-read="beforeRead" :after-read="afterRead" />
+        </div>
+      </div>
+      <van-field
+        v-model="params.content"
+        rows="3"
+        autosize
+        :label="''"
+        type="textarea"
+        maxlength="200"
+        placeholder="投诉内容(必填)"
+        show-word-limit
+      />
+      <div class="footer">
+        <van-button type="success" size="small" @click="onClickSubmit">提交</van-button>
+      </div>
+    </div>
+
+    <div v-else class="typeList-wrap">
+      <p class="notice">{{ typeList.notice }}</p>
+      <van-cell v-for="item in typeList.data" :key="item.type" :title="item.title" is-link size="large" @click="onClickTypeItem(item)" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getQueryString } from '@/utils/common'
+import { onBeforeMount, onMounted, reactive, ref } from "vue";
+import { Toast, Cell, Uploader, Button } from 'vant';
+import $axios from '@/utils/axios'
+import { useRouter } from 'vue-router'
+const $router = useRouter()
+
+interface IRes<T = any> {
+  errno: string | number
+  rst: T
+  [index: string]: any
+}
+
+const params = reactive({
+  corpid: getQueryString('corpid'),
+  user_id: getQueryString('user_id'),
+  external_userid: '',
+  type: '', // 反馈类型
+  content: '', // 反馈内容
+  attachments: [], // 反馈图片
+})
+
+
+const typeList = ref({})
+const isShowForm = ref(false)
+
+const goUrl = (url) => {
+  let link = document.createElement("a");
+  link.href = url;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+const getUserInfo = () => {
+  Toast.loading({
+    duration: 0,
+    message: '加载中...',
+    forbidClick: true,
+  });
+  $axios.get('/api/oauth2/userInfo', {
+    corpid: getQueryString('corpid'),
+    code: getQueryString('code'),
+    state: getQueryString('state')
+  }, true).then((res) => {
+    Toast.clear()
+    params.external_userid = res.rst.external_userid
+  }).catch((err) => {
+    Toast.clear()
+    Toast(err.message)
+  })
+}
+
+// 动态修改微信网页标题
+const setTitle = function (t) {
+  document.title = t;
+  var i = document.createElement("iframe");
+  i.src = "./favicon.ico";
+  i.style.display = "none";
+  i.onload = function () {
+    setTimeout(function () {
+      i.remove();
+    }, 9);
+  };
+  document.body.appendChild(i);
+};
+const changeTitleClick = () => {
+  setTimeout(function () {
+    setTitle("意见反馈");
+  }, 1);
+}
+
+const handleGetList = async () => {
+  try {
+    Toast.loading({
+      message: '加载中...',
+      duration: 0,
+      forbidClick: true,
+    })
+    const { errno, rst, err } = await $axios.get('/api/opinionFeedbackTypeList', {}) as IRes
+    if (errno == 0 && rst) {
+      typeList.value = {...rst}
+    } else {
+      Toast({ message: err || '加载失败' })
+    }
+  } catch (error) {
+    console.log('error =>', error)
+  } finally {
+    Toast.clear();
+  }
+}
+
+const onClickTypeItem = (typeItem) => {
+  if (typeItem && typeItem.child) {
+    typeList.value = {...typeItem.child}
+  } else {
+    params.type = typeItem.type
+    isShowForm.value = true
+  }
+}
+
+
+const fileList = ref([])
+const afterRead = (file) => {
+  // 此时可以自行将文件上传至服务器
+  if (file.length) { //判断是否选择了多个文件，如果是的话，循环遍历单个文件上传
+    file.forEach((f) => {
+      handleUploadFile(f);
+    });
+  } else {
+    handleUploadFile(file);
+  }
+};
+const beforeRead = (file) => {
+  const maxSize = 1000 * 1024 * 10;
+  if (file.size >= maxSize) {
+    Toast('图片大小不能超过10M');
+    return false
+  } else {
+    return true
+  }
+}
+const handleUploadFile = (file) => {
+    const formData = new FormData();
+    formData.append("file", file.file);
+    formData.append("corpid", params.corpid);
+    formData.append("type", '1');
+
+    Toast.loading({
+      duration: 0, // 持续展示 toast
+      forbidClick: true,
+      message: '上传中',
+    });
+
+    $axios.upload('/api/uploadFileToOss', formData).then((res) => {
+      Toast.clear()
+      const { url } = res.rst
+      file.url = url
+    }).catch((err) => {
+      Toast.clear()
+      Toast(err.message)
+    })
+}
+
+
+// 判断当前环境
+const isWechat = () => {
+  var ua = window.navigator.userAgent.toLowerCase();
+  if (ua.match(/micromessenger/i) == 'micromessenger') { // 判断是否在微信浏览器内
+    return true;
+  } else {
+    return false;
+  }
+}
+function closePage() {
+  // isWechat是我写的一个判断当前环境是否是微信内置浏览器 的方法
+  if (!isWechat()) return // 非微信环境下，不做处理
+  setTimeout(function() {
+    //安卓手机
+    document.addEventListener("WeixinJSBridgeReady", function() {
+      WeixinJSBridge.call("closeWindow");
+    }, false);
+    //ios手机
+    WeixinJSBridge.call("closeWindow");
+  }, 100);
+}
+
+const onClickSubmit = () => {
+  if (!params.content) {
+    Toast('请输入投诉内容')
+    return false
+  }
+
+  Toast.loading({
+    duration: 0,
+    message: '加载中...',
+    forbidClick: true,
+  });
+  $axios.post('/api/userOpinionFeedbackAction', {
+    corpid: params.corpid,
+    user_id: params.user_id,
+    external_userid: params.external_userid,
+    type: params.type,
+    content: params.content,
+    attachments: fileList.value && fileList.value.length ? fileList.value.map(f => f.url) : [],
+  }).then(res => {
+    Toast(JSON.stringify(res))
+    if (res && res.errno == 0) {
+      isShowForm.value = false
+      $router.replace('/feedback/success')
+    } else {
+      Toast(res.err || '提交失败')
+    }
+  }).catch((err) => {
+    Toast.clear()
+    Toast(err.message)
+  })
+}
+
+onBeforeMount(() => {
+  if (getQueryString('againJump')) {
+    getUserInfo()
+  } else {
+    let redirect_uri = encodeURIComponent(window.location.href + '&againJump=true')
+    let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${getQueryString('corpid')}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=1&agentid=1000012#wechat_redirect`;
+    goUrl(url)
+  }
+});
+
+onMounted(() => {
+  changeTitleClick()
+  handleGetList()
+})
+</script>
+
+<style lang="scss" scoped>
+.feedback-wrap {
+  background-color: #f8f8f8;
+  min-height: 100vh;
+  .form-wrap {
+    .imgs-wrap {
+      background-color: #fff;
+      margin-bottom: 2px;
+      .label {
+        padding: 20px 14px;
+        font-size: 16px;
+        color: rgb(50, 50, 51);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .count {
+          color: #999;
+        }
+      }
+      .uploader-wrap {
+        .img-item {
+          padding: 0 0 0 16px;
+          :deep(.van-uploader__preview) {
+            width: 29vw;
+            height: 29vw;
+          }
+          :deep(.van-uploader__upload) {
+            width: 29vw;
+            height: 29vw;
+          }
+          :deep(.van-uploader__preview-image) {
+            width: 29vw;
+            height: 29vw;
+          }
+        }
+      }
+    }
+
+    .footer {
+      padding: 40px;
+      display: flex;
+      justify-content: center;
+      .van-button {
+        width: 40vw;
+        font-size: 16px;
+      }
+    }
+
+  }
+  .typeList-wrap {
+    .notice {
+      padding: 20px 14px 6px;
+      font-size: 16px;
+      color: #666;
+    }
+  }
+}
+
+</style>

qwh5/src/views/feedbackSuccess.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="feedbackSuccess-wrap">
+    <van-icon class="icon-cls" name="checked" />
+    <div class="title">投诉已提交</div>
+    <div class="tips">微信团队会尽快核实，并通过“微信团队”通知你审核结果。感谢你的支持。</div>
+    <van-button class="footer-btn" type="success" size="small" @click="onClickClose">关闭</van-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getQueryString } from '@/utils/common'
+import { onBeforeMount, onMounted, reactive, ref } from "vue";
+import { Toast, Icon, Button } from 'vant';
+import $axios from '@/utils/axios'
+import { useRouter } from 'vue-router'
+const $router = useRouter()
+
+const onClickClose = () => {
+  closePage()
+}
+
+
+
+
+
+
+// 动态修改微信网页标题
+const setTitle = function (t) {
+  document.title = t;
+  var i = document.createElement("iframe");
+  i.src = "./favicon.ico";
+  i.style.display = "none";
+  i.onload = function () {
+    setTimeout(function () {
+      i.remove();
+    }, 9);
+  };
+  document.body.appendChild(i);
+};
+const changeTitleClick = () => {
+  setTimeout(function () {
+    setTitle("意见反馈");
+  }, 1);
+}
+
+// 判断当前环境
+const isWechat = () => {
+  var ua = window.navigator.userAgent.toLowerCase();
+  if (ua.match(/micromessenger/i) == 'micromessenger') { // 判断是否在微信浏览器内
+    return true;
+  } else {
+    return false;
+  }
+}
+function closePage() {
+  // isWechat是我写的一个判断当前环境是否是微信内置浏览器 的方法
+  if (!isWechat()) return // 非微信环境下，不做处理
+  setTimeout(function() {
+    //安卓手机
+    document.addEventListener("WeixinJSBridgeReady", function() {
+      WeixinJSBridge.call("closeWindow");
+    }, false);
+    //ios手机
+    WeixinJSBridge.call("closeWindow");
+  }, 100);
+}
+
+onMounted(() => {
+  changeTitleClick()
+})
+</script>
+
+<style lang="scss" scoped>
+.feedbackSuccess-wrap {
+  background-color: #f8f8f8;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 40px;
+  .icon-cls {
+    margin-top: 40px;
+    color: #07c160;
+    font-size: 50px;
+  }
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin-top: 30px;
+  }
+  .tips {
+    font-size: 16px;
+    color: #666;
+    text-align: center;
+    margin-top: 30px;
+    line-height: 20px;
+  }
+  .footer-btn {
+    position: fixed;
+    bottom: 20vh;
+    width: 40vw;
+    font-size: 16px;
+  }
+}
+
+</style>