Skip to content

C
cjxy-szjr-app
Commit 2743b8e8 authored by zhangzhaohui's avatar zhangzhaohui
Browse files
Options

移动端修改

parent 3644fbe5
Pipeline #387 failed with stages
      Expand all Show whitespace changes
      Inline Side-by-side
      Showing with 721 additions and 223 deletions
      package-lock.json
      View file @ 2743b8e8
      This diff is collapsed.
      package.json
      View file @ 2743b8e8
      ......@@ -7,8 +7,14 @@
      "build": "vue-cli-service build"
      },
      "dependencies": {
      "axios": "^1.4.0",
      "core-js": "^3.6.5",
      "dingtalk-jsapi": "^3.0.20",
      "emoji-mart-vue": "^2.6.6",
      "vant": "^2.12.54",
      "vconsole": "^3.15.1",
      "vue": "^2.6.11",
      "vue-baberrage": "^3.2.4",
      "vue-router": "^3.2.0",
      "vuex": "^3.4.0"
      },
      ......
      public/index.html
      View file @ 2743b8e8
      ......@@ -3,9 +3,9 @@
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title><%= htmlWebpackPlugin.options.title %></title>
      <title>案例评价</title>
      </head>
      <body>
      <noscript>
      ......
      src/App.vue
      View file @ 2743b8e8
      <template>
      <div id="app">
      <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      </div>
      <router-view/>
      </div>
      </template>
      <style lang="scss">
      #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      }
      #nav {
      padding: 30px;
      a {
      font-weight: bold;
      color: #2c3e50;
      &.router-link-exact-active {
      color: #42b983;
      }
      }
      }
      </style>
      src/api/index.js 0 → 100644
      View file @ 2743b8e8
      import request from "../utils/request"
      export function getUserInfo(authCode) {
      return request({
      url: '/demo/message/getUserInfoByCode/' + authCode,
      method: 'get'
      })
      }
      export function getCaseTitle(id) {
      return request({
      url: '/demo/case/anonGetCaseTitle/' + id,
      method: 'get'
      })
      }
      export function submitMessage(data) {
      return request({
      url: '/demo/message',
      method: 'post',
      data
      })
      }
      \ No newline at end of file
      src/main.js
      View file @ 2743b8e8
      import Vue from 'vue'
      import App from './App.vue'
      import router from './router'
      import 'vant/lib/index.css';
      import { Button } from 'vant';
      Vue.use(Button);
      import store from './store'
      import VConsole from 'vconsole'
      import '../src/utils/rem'
      import './static/reset.css'
      Vue.config.productionTip = false
      const vConsole = new VConsole()
      new Vue({
      router,
      store,
      ......
      src/router/index.js
      View file @ 2743b8e8
      import Vue from 'vue'
      import VueRouter from 'vue-router'
      import Home from '../views/Home.vue'
      import Form from '../views/Form.vue'
      Vue.use(VueRouter)
      const routes = [
      {
      path: '/',
      name: 'Home',
      component: Home
      },
      {
      path: '/about',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      name: 'Form',
      component: Form
      }
      ]
      ......
      src/static/reset.css 0 → 100644
      View file @ 2743b8e8
      /*这些元素都建议重新初始化*/
      body,div,dl,dt,dd,ul,ol,li,tr,td,th,
      h1,h2,h3,h4,h5,h6,hr,br,img,table,
      input,form,a,p,textarea{
      padding:0;
      margin:0;
      font-family: Source Han Sans CN;
      }
      /*去掉列表默认排列*/
      ul,ol,li{
      list-style:none;
      }
      /*去掉底部横线*/
      /*把a元素更改设置成块级元素，这个根据实际情况决定要不要*/
      a{
      text-decoration:none;
      display:block;
      }
      /*img标签要清除border。*/
      /*display设为block设置为块级元素，默认为display:inline;
      存在下边线多出4px状况,所以一般设为block*/
      img{
      border:0;
      display:block;
      }
      /*清除浮动破坏带来的塌陷问题*/
      /*清除浮动的兼容IE*/
      .clearfloat {
      zoom: 1;
      }
      .clearfloat:after {
      display:block;
      clear:both;
      content:"";
      visibility:hidden;
      height:0;
      }
      \ No newline at end of file
      src/utils/rem.js 0 → 100644
      View file @ 2743b8e8
      (function (doc, win) {
      var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
      docEl.style.fontSize = '100px';
      } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      }
      var html = document.getElementsByTagName('html')[0]
      var settingFs = parseInt(100 * (clientWidth / 750))
      var settedFs = settingFs
      var whileCount = 0
      while (true) {
      var realFs = parseInt(window.getComputedStyle(html).fontSize)
      var delta = realFs - settedFs
      // 不相等
      if (Math.abs(delta) >= 1) {
      if (delta > 0) {
      settingFs--
      } else {
      settingFs++
      }
      html.setAttribute('style', 'font-size:' + settingFs + 'px!important')
      } else {
      break
      }
      if (whileCount++ > 100) {
      break
      }
      }
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
      src/utils/request.js 0 → 100644
      View file @ 2743b8e8
      import axios from 'axios'
      import router from '@/router'
      import { Toast } from 'vant'
      const baseURL = process.env.NODE_ENV === "production" ? "http://10.21.11.207:8003/hmit-admin" : "/proxyApi"
      const request = axios.create({
      baseURL,
      timeout: 10000,
      withCredentials: true
      });
      request.interceptors.request.use(
      config => {
      return config
      },
      error => {
      return Promise.reject(error)
      }
      )
      request.interceptors.response.use((response) => {
      const res = response.data;
      console.log(res)
      if (res.code === 0) {
      return res
      } else if (res.code === 401) {
      Toast.fail(res.msg)
      router.replace('/')
      } else {
      Toast.fail(res.msg)
      }
      }, (err) => {
      Toast('网络请求异常，请稍后重试!');
      return err
      });
      export default request;
      \ No newline at end of file
      src/views/About.vue deleted 100644 → 0
      View file @ 3644fbe5
      <template>
      <div class="about">
      <h1>This is an about page</h1>
      </div>
      </template>
      src/views/Form.vue 0 → 100644
      View file @ 2743b8e8
      <template>
      <div class="form">
      <div class="title">{{ title }}</div>
      <div class="input-box">
      <textarea maxlength="100" ref="input" v-model="content" placeholder="请展开说说对案例的体验与心得吧..." contenteditable></textarea>
      <div class="emoji-box">
      <span style="font-size: .4rem;" v-for="item in emojiList" @click="clickHandle(item)">{{ item }}</span>
      </div>
      </div>
      <div class="like-box" :class="{'active': like}" @click="like = !like">
      <img :src="require(`../assets/imgs/zan_${like ? 'select' : 'nor'}_icon.png`)"/>
      <div class="text">{{ like ? '已点赞' : '点赞' }}</div>
      </div>
      <div style="padding: 0 .3rem;">
      <van-button color="#B0251E" type="primary" round :loading="submitIng" @click="submit" size="large">提交</van-button>
      </div>
      </div>
      </template>
      <script>
      import { getUserInfo, submitMessage, getCaseTitle } from '@/api'
      import * as dd from 'dingtalk-jsapi';
      import { Toast } from 'vant'
      export default {
      data() {
      return {
      id: '',
      title: '',
      like: false,
      content: '',
      emojiList: ['😀', '😁', '👍'],
      userInfo: null,
      hasSubmit: false,
      submitIng: false,
      }
      },
      methods: {
      clickHandle(item) {
      this.content += item
      this.$refs.input.focus()
      },
      utf16toEntities(str) {
      const patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则，检测是否超过U+FFFF
      str = str.replace(patt, (char) => {
      let H;
      let L;
      let code;
      let s;
      if (char.length === 2) {
      H = char.charCodeAt(0); // 取出高位
      L = char.charCodeAt(1); // 取出低位
      code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法
      s = `&#${code};`;
      } else {
      s = char;
      }
      return s;
      });
      return str;
      },
      getUserInfoFun(code) {
      getUserInfo(code).then(res => {
      if (res.code === 0) {
      this.userInfo = res.data
      }
      })
      },
      submit() {
      if (this.hasSubmit) {
      return Toast.fail('请勿重复提交')
      }
      if (this.content.trim() === '') {
      return Toast.fail('请填写留言')
      }
      this.submitIng = true
      let data = {
      caseName: this.title,
      caseId: this.id,
      content: this.utf16toEntities(this.content),
      likeit: Number(this.like),
      ...this.userInfo,
      }
      submitMessage(data).then(res => {
      if (res.code === 0){
      Toast.success('提交成功')
      this.hasSubmit = true
      } else {
      Toast.fail(res.message)
      }
      }).finally(() => {
      this.submitIng = false
      })
      }
      },
      mounted() {
      let _this = this
      this.id = this.$route.query.id
      getCaseTitle(this.id).then(res => {
      if (res.code === 0) {
      this.title = res.data
      document.title = res.data
      }
      })
      if (dd.android || dd.ios || dd.pc) {
      dd.ready(function() {
      dd.runtime.permission.requestAuthCode({
      corpId: "ding51009b2fa8338126", // 企业id
      onSuccess: (info) => {
      _this.getUserInfoFun(info.code)
      },
      });
      });
      } else {
      Toast.fail('请通过钉钉扫码进入本页面')
      }
      }
      }
      </script>
      <style lang="scss" scoped>
      .form{
      height: 100vh;
      background-color: #F1F1F1;
      .title{
      height: 1.03rem;
      padding-left: .38rem;
      line-height: 1.03rem;
      color: #111;
      font-size: .33rem;
      }
      .input-box{
      position: relative;
      border-radius: 0.32rem;
      textarea{
      width: 7.5rem;
      height: 6.72rem;
      box-sizing: border-box;
      padding: .44rem .38rem;
      background: #FFFFFF;
      border-radius: 0.32rem;
      border: none;
      font-size: .3rem;
      resize: none;
      }
      .emoji-box{
      position: absolute;
      bottom: .3rem;
      left: .3rem;
      }
      }
      .like-box{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: .66rem auto 1.14rem;
      width: 1.54rem;
      height: 1.54rem;
      background: #FFFFFF;
      border-radius: 50%;
      img{
      width: .78rem;
      height: .74rem;
      }
      .text{
      margin-top: .16rem;
      font-size: .23rem;
      }
      }
      .active{
      background-color: #B0251E;
      color: #fff;
      }
      .submit-btn{
      margin: 0 auto;
      width: 6.86rem;
      height: 0.83rem;
      background: #B0251E;
      border-radius: 0.42rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: .3rem;
      }
      }
      </style>
      \ No newline at end of file
      src/views/Home.vue
      View file @ 2743b8e8
      <template>
      <div class="home">
      <img alt="Vue logo" src="../assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
      <textarea v-model="content" contenteditable></textarea>
      <span v-for="item in emojiList" @click="clickHandle(item)">{{ item }}</span>
      <button @click="submit">提交</button>
      <picker :include="['people','Smileys']" :showSearch="false" :showPreview="false" :showCategories="false" @select="addEmoji" />
      </div>
      </template>
      <script>
      // @ is an alias to /src
      import HelloWorld from '@/components/HelloWorld.vue'
      import { Picker } from "emoji-mart-vue";
      import * as dd from 'dingtalk-jsapi';
      export default {
      name: 'Home',
      data() {
      return {
      content: '',
      emojiList: ['😀', '😁', '👍']
      }
      },
      components: {
      HelloWorld
      Picker
      },
      mounted() {
      dd.ready(function() {
      console.log(window.location)
      dd.runtime.permission.requestAuthCode({
      corpId: "ding218f92e5daaa5e8a", // 企业id
      onSuccess: function (info) {
      console.log(info)
      code = info.code // 通过该免登授权码可以获取用户身份
      }});
      });
      },
      methods: {
      addEmoji(e){
      console.log(e.native)
      this.content += e.native;
      },
      submit() {
      console.log(this.utf16toEntities(this.content))
      },
      utf16toEntities(str) {
      const patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则，检测是否超过U+FFFF
      str = str.replace(patt, (char) => {
      let H;
      let L;
      let code;
      let s;
      if (char.length === 2) {
      H = char.charCodeAt(0); // 取出高位
      L = char.charCodeAt(1); // 取出低位
      code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法
      s = `&#${code};`;
      } else {
      s = char;
      }
      return s;
      });
      return str;
      },
      // 表情解码
      entitiestoUtf16(strObj) {
      const patt = /&#\d+;/g;
      const arr = strObj.match(patt) || [];
      let H;
      let L;
      let code;
      for (let i = 0; i < arr.length; i += 1) {
      code = arr[i];
      code = code.replace('&#', '').replace(';', '');
      // 高位 0x400=2^10=1024
      H = Math.floor((code - 0x10000) / 0x400) + 0xD800;
      // 低位
      L = ((code - 0x10000) % 0x400) + 0xDC00;
      code = `&#${code};`;
      const s = String.fromCharCode(H, L);
      strObj = strObj.replace(code, s);
      }
      return strObj;
      },
      addEmoji(e) {
      console.log(e.native)
      },
      clickHandle(item) {
      this.content += item
      }
      }
      }
      </script>
      vue.config.js 0 → 100644
      View file @ 2743b8e8
      module.exports = {
      lintOnSave: false,
      publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
      chainWebpack: (config) => {
      const svgRule = config.module.rule("svg");
      svgRule.uses.clear();
      svgRule
      .test(/\.svg$/)
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader");
      },
      productionSourceMap: false,
      devServer: {
      proxy: {
      "/proxyApi": {
      target: "http://192.168.20.59:18000/hmit-admin", //http://192.168.10.61:8080/beansprouts
      changeOrigin: true,
      pathRewrite: {
      "^/proxyApi": "/",
      },
      }
      },
      port: 8080
      },
      };
      \ No newline at end of file
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment