Commit 2743b8e8 authored by zhangzhaohui's avatar zhangzhaohui

移动端修改

parent 3644fbe5
Pipeline #387 failed with stages
This diff is collapsed.
...@@ -7,8 +7,14 @@ ...@@ -7,8 +7,14 @@
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"axios": "^1.4.0",
"core-js": "^3.6.5", "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": "^2.6.11",
"vue-baberrage": "^3.2.4",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"
}, },
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title>案例评价</title>
</head> </head>
<body> <body>
<noscript> <noscript>
......
<template> <template>
<div id="app"> <div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/> <router-view/>
</div> </div>
</template> </template>
<style lang="scss"> <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>
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
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import 'vant/lib/index.css';
import { Button } from 'vant';
Vue.use(Button);
import store from './store' import store from './store'
import VConsole from 'vconsole'
import '../src/utils/rem'
import './static/reset.css'
Vue.config.productionTip = false Vue.config.productionTip = false
const vConsole = new VConsole()
new Vue({ new Vue({
router, router,
store, store,
......
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from '../views/Home.vue' import Form from '../views/Form.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'Home', name: 'Form',
component: Home component: Form
},
{
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')
} }
] ]
......
/*这些元素都建议重新初始化*/
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
(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);
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
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<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
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <textarea v-model="content" contenteditable></textarea>
<HelloWorld msg="Welcome to Your Vue.js App"/> <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> </div>
</template> </template>
<script> <script>
// @ is an alias to /src import { Picker } from "emoji-mart-vue";
import HelloWorld from '@/components/HelloWorld.vue' import * as dd from 'dingtalk-jsapi';
export default { export default {
name: 'Home', name: 'Home',
data() {
return {
content: '',
emojiList: ['😀', '😁', '👍']
}
},
components: { 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> </script>
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