Skip to content

html / zhaocaih5-wanda

Go to a project
Commit 56c0298e by mamingqun
Options

cb

parent 98b40e69
Showing with 274 additions and 49 deletions
package.json
......@@ -17,7 +17,8 @@
"vue": "^2.6.10",
"vue-navigation": "^1.1.4",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
"vuex": "^3.0.1",
"weixin-js-sdk": "^1.4.0-test"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
......
src/App.vue
......@@ -9,9 +9,102 @@
</template>
<script>
import wx from 'weixin-js-sdk';
export default {
data() {
return {
}
},
mounted() {
this.$store.dispatch('getList')
this.getWeixinPower1()
},
methods: {
getWeixinPower1() {
var _this = this;
$axios
.get('/wechat/info', {
params: {
url: encodeURIComponent(location.href.split('#')[0])
}
})
.then(res => {
console.log('分享的res');
console.log( res );
var res = res.data.data;
var listArr = [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
];
wx.config({
debug: false, // 开启调试模式,
appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
jsApiList: res.jsApiList
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: listArr,
success: function (res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
// _this.jinzhidianzan = false;
}
});
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
wx.onMenuShareAppMessage(
{
title: '万达招采', // 分享标题
// desc: '@'+ this.pictureInfo.nickname +', ' + _this.pictureInfo.desc, // 分享描述
// desc: _this.pictureInfo.desc, // 分享描述
desc: '万达招采h5', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: location.origin + '/zhaocaih5/dist/extra/share.jpg' // 分享图标
},
function (res) {
//这里是回调函数
_this.jinzhidianzan = false;
}
);
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.onMenuShareTimeline(
{
title: '万达招采', // 分享标题
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: location.origin + '/zhaocaih5/dist/extra/share.jpg' // 分享图标
},
function (res) {
//这里是回调函数
}
);
});
wx.error(function (res) {
console.log('微信错误');
console.log(res);
});
})
.catch(err => {
console.log('请求的错误');
console.log(err);
});
},
}
}
</script>
......@@ -51,11 +144,10 @@ body {
* {
box-sizing: border-box;
-webkit-overflow-scrolling:touch;
-webkit-overflow-scrolling: touch;
}
p {
margin: 0;
}
</style>
src/assets/images/02/qianbi.png
src/assets/images/02/qianbi.png

226 KB | W: | H:

src/assets/images/02/qianbi.png

228 KB | W: | H:

src/assets/images/02/qianbi.png
src/assets/images/02/qianbi.png
src/assets/images/02/qianbi.png
src/assets/images/02/qianbi.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/02/title.png
src/assets/images/02/title.png

15.6 KB | W: | H:

src/assets/images/02/title.png

20.2 KB | W: | H:

src/assets/images/02/title.png
src/assets/images/02/title.png
src/assets/images/02/title.png
src/assets/images/02/title.png
  • 2-up
  • Swipe
  • Onion skin
src/main.js
......@@ -10,6 +10,8 @@ window.jquery = window.$ = $;
import axios from 'axios';
window.$axios = axios
axios.defaults.baseURL = 'http://wanda-h5.canskj.cn/api';
// import VConsole from 'vconsole';
// var vConsole = new VConsole();
......@@ -23,6 +25,16 @@ window.$eventbus = eventbus
Vue.config.productionTip = false
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?541f6da5ab45c17e8def7e618d41e8cf";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
Vue.directive('shotclick', function (el, binding) {
el.onmousedown = function () {
var timeNow = new Date().getTime()
......
src/store.js
......@@ -13,7 +13,7 @@ export default new Vuex.Store({
},
actions: {
getList({state}) {
$axios.get('http://wanda-h5.canskj.cn/api/category/list').then((res) => {
$axios.get('/category/list').then((res) => {
console.log('列表')
console.log(res.data.data.data)
state.list = res.data.data.data
......@@ -21,7 +21,7 @@ export default new Vuex.Store({
})
},
getDetail(state, playload) {
return $axios.get('http://wanda-h5.canskj.cn/api/news/detail', {
return $axios.get('/news/detail', {
params: {
news_id: playload
}
......
src/views/erjiye.vue
......@@ -24,6 +24,9 @@
</div>
</div>
</ul>
<div class="magin-box">
</div>
</div>
</div>
<div class="bottom11">
......@@ -86,6 +89,7 @@ export default {
if (item.module === 2) {
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id })
this.searchButton = false;
setTimeout(() => {
$eventbus.$emit('detailData', { id, title })
});
......@@ -163,10 +167,11 @@ export default {
<style lang="less" scoped>
@r: 75rem;
p:nth-child(1) {
margin-bottom: 26px;
.magin-box{
height: 50 / @r;
}
.none {
display: none;
}
......@@ -196,8 +201,8 @@ p:nth-child(1) {
overflow: auto;
li {
height: 50 / @r;
line-height: 50 / @r;
height: 80 / @r;
line-height: 80 / @r;
color: white;
font-size: 35 / @r;
white-space: nowrap;
......@@ -254,6 +259,8 @@ p:nth-child(1) {
// padding-bottom: 250 / @r;
.title {
box-sizing: content-box;
margin-bottom: 20 / @r;
height: 116 / @r;
background: url("../assets/images/erjiye/title.png") no-repeat center
center;
......@@ -278,7 +285,7 @@ p:nth-child(1) {
.main-title {
color: #f7f5f1;
margin-bottom: 40 / @r;
// margin-bottom: 40 / @r;
padding-left: 40 / @r;
}
......
src/views/xiangqing.vue
<template>
<!-- <div> -->
<div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}" @click="handleJump">
<div class="book-page page-front">
<div class="xiangqing">
<div class="top-info"></div>
<div>
<div class="laozhao" @click="showMulu"></div>
<!-- 目录 -->
<div class="mulu-wrap" v-show="mulu">
<div class="mulu">
<div class="title">万达招采</div>
......@@ -37,14 +32,72 @@
<div class="close" @click="closeMulu"></div>
</div>
</div>
<div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}" @click="handleJump">
<div class="book-page page-front">
<div class="xiangqing">
<div class="top-info"></div>
<!-- 内容区 -->
<!-- <button class="btn" data-clipboard-copy="copy123" data-clipboard-target="button">Copy123</button> -->
<!-- <div class="mainTitle">{{mianTitle}}</div> -->
<div class="box" v-if="htmlData" v-html="htmlData"></div>
<div class="table-wrap" v-if="$route.params.id === 18">
<ul class="table">
<li class="b-b">
<div class="b-r left-box">服务内容</div>
<div class="right-box">联系方式</div>
</li>
<li class="b-b">
<div class="b-r left-box">业务反馈</div>
<div class="right-box">
<div>登录</div>
<div class="target1">http://zcpt.wanda.cn/MainPage.aspx</div>
<div>点击帮忙文档/联系方式 ，查看反馈渠道</div>
<button class="btn" data-clipboard-copy="copy123" data-clipboard-target=".target1">点击复制链接</button>
</div>
</li>
<li class="b-b">
<div class="b-r left-box">操作指南</div>
<div class="right-box">
<div>登录</div>
<div class="target2">http://zcpt.wanda.cn/MainPage.aspx</div>
<div>点击帮忙文档/文件下载，查看操作指南</div>
<button class="btn" data-clipboard-copy="copy123" data-clipboard-target=".target2">点击复制链接</button>
</div>
</li>
<li class="b-b">
<div class="b-r left-box">在线投诉/建议</div>
<div class="right-box">
<div>登录万达官网招采平台</div>
<div class="target3">vendor.wanda.cn</div>
<div>在线投诉/建议内填写投诉/建议内容</div>
<button class="btn" data-clipboard-copy="copy123" data-clipboard-target=".target3">点击复制链接</button>
</div>
</li>
<li class="b-b">
<div class="b-r left-box">
<div>成本中心</div>
<div>投诉方式</div>
</div>
<div class="right-box">电话，010-85583315、邮箱，cbzxtousu@wanda.com.cn</div>
</li>
<li class="b-b">
<div class="b-r left-box">
<div>审计中心</div>
<div>举报方式</div>
</div>
<div class="right-box">电话，010-85853844、邮箱，sjzx@wanda.cn</div>
</li>
<li>
<div class="b-r left-box">
<div>人力资源中心</div>
<div>举报方式</div>
</div>
<div class="right-box">电话，010-85588469、邮箱，kaohe@wanda.com.cn</div>
</li>
</ul>
</div>
<div class="box" v-if="htmlData&&$route.params.id !== 18" v-html="htmlData"></div>
</div>
</div>
</div>
</div>
<!-- </div> -->
</template>
<script>
......@@ -72,18 +125,11 @@ export default {
var clipboard = new Clipboard('.btn');
clipboard.on('success', function (e) {
console.log(e);
});
clipboard.on('error', function (e) {
console.log(e);
});
},
methods: {
showMulu() {
this.mulu = !this.mulu
$('body').css('overflow','hidden')
$('body').css('overflow', 'hidden')
},
handleClick() {
......@@ -93,8 +139,8 @@ export default {
},
watchDetail() {
$eventbus.$on('detailData', (params) => {
console.log('详情1 变96');
this.zIndex = 96
// console.log('详情1 变96');
// this.zIndex = 96
})
},
getDetail(id) {
......@@ -105,12 +151,13 @@ export default {
handleDetail(id, title, item) {
if (item.module === 2) {
$eventbus.$emit('jumpPage', { pageName: 'xiangqing1', id: id })
this.getDetail(id)
// $eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id })
setTimeout(() => {
this.zIndex = 95
$eventbus.$emit('detailData', { id, title })
// this.zIndex = 95
this.closeMulu()
$eventbus.$emit('detailData', { id, title });
});
} else {
var num = $('#' + item.catname).data('category')
......@@ -131,7 +178,7 @@ export default {
},
closeMulu() {
this.mulu = false;
$('body').css('overflow','auto')
$('body').css('overflow', 'auto')
},
goFengMian() {
$eventbus.$emit('jumpPage', { pageName: 'shouye' })
......@@ -146,6 +193,59 @@ export default {
<style lang="less">
@r: 75rem;
.b-r {
border-right: 1px solid #3e57ab;
}
.b-b {
border-bottom: 1px solid #3e57ab;
}
.table-wrap {
padding: 40 / @r;
.table {
width: 100%;
border: 1px solid #3e57ab;
.h80 {
height: 80 / @r;
}
li {
display: flex;
flex-direction: row;
height: 200 / @r;
font-size: 25 / @r;
text-align: center;
.left-box {
width: 190 / @r;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button{
color: blue;
}
.right-box {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
padding-left: 20 / @r;
div{
margin-bottom: 5 / @r;
}
}
}
}
}
.mulu-wrap {
width: 100%;
height: 100%;
......@@ -154,7 +254,7 @@ export default {
left: 50%;
z-index: 502;
background: rgba(0, 0, 0, 0.7);
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
.mulu {
width: 600 / @r;
......
src/views/xiangqing1.vue
<template>
<!-- <div> -->
<div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}" @click="handleJump">
<div class="book-page page-front">
<div class="xiangqing">
<div class="top-info"></div>
<div>
<div class="laozhao" @click="showMulu"></div>
<!-- 目录 -->
<div class="mulu-wrap" v-show="mulu">
<div class="mulu">
<div class="title">万达招采</div>
......@@ -38,6 +32,11 @@
<div class="close" @click="closeMulu"></div>
</div>
</div>
<div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}" @click="handleJump">
<div class="book-page page-front">
<div class="xiangqing">
<div class="top-info"></div>
<!-- 内容区 -->
<!-- <button class="btn" data-clipboard-copy="copy123" data-clipboard-target="button">Copy123</button> -->
<!-- <div class="mainTitle">{{mianTitle}}</div> -->
......@@ -45,7 +44,7 @@
</div>
</div>
</div>
<!-- </div> -->
</div>
</template>
<script>
......@@ -85,7 +84,7 @@ export default {
showMulu() {
this.mulu = !this.mulu
if (this.mulu) {
$('body').css('overflow','hidden')
$('body').css('overflow', 'hidden')
}
},
handleClick() {
......@@ -134,7 +133,7 @@ export default {
},
closeMulu() {
this.mulu = false;
$('body').css('overflow','auto')
$('body').css('overflow', 'auto')
},
goFengMian() {
$eventbus.$emit('jumpPage', { pageName: 'shouye' })
......@@ -157,7 +156,7 @@ export default {
left: 50%;
z-index: 502;
background: rgba(0, 0, 0, 0.7);
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
.mulu {
width: 600 / @r;
......
src/views/yjml.vue
......@@ -34,7 +34,7 @@
</div>
<div class="kuang kuang3" v-if="tancengIndex === 3">
<div class="close" @click="handleCloseTanCeng"></div>
<div class="buttons" @click="handleJump"></div>
<div class="buttons" @click="handleJump(3)"></div>
<div class="laozhaos"></div>
</div>
</div>
......@@ -67,11 +67,20 @@ export default {
this.tancengIndex = index
},
handleJump() {
handleJump(id) {
if (id === 3) {
var arr = this.$store.state.list.find((ele) => {
return ele.catname === "线上线下招采服务指南"
})
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: arr.child[0].news_id })
} else {
$eventbus.$emit('jumpPage', { pageName: 'erjiye' })
setTimeout(() => {
$eventbus.$emit('maodian', this.tancengIndex)
});
}
},
handleCloseTanCeng() {
this.tanceng = !this.tanceng
......
yarn.lock
......@@ -8159,6 +8159,11 @@ websocket-extensions@>=0.1.1:
resolved "https://registry.npm.taobao.org/websocket-extensions/download/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
integrity sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=
weixin-js-sdk@^1.4.0-test:
version "1.4.0-test"
resolved "https://registry.npm.taobao.org/weixin-js-sdk/download/weixin-js-sdk-1.4.0-test.tgz#612bbafcc97ad84f5afe6dc84701534cc59fc3ca"
integrity sha1-YSu6/Ml62E9a/m3IRwFTTMWfw8o=
which-module@^2.0.0:
version "2.0.0"
resolved "https://registry.npm.taobao.org/which-module/download/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
......
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 sign in to comment