Skip to content

B
beyond-clouds-frontM
Commit 1034337f by yanju
Options

动态、轮播图完成

parent 77e52dbe
Showing with 963 additions and 56 deletions
assets/common.scss
...@@ -6,7 +6,7 @@ $font-size:1rem; ...@@ -6,7 +6,7 @@ $font-size:1rem;
$bgImage:linear-gradient(#EDF5F8,#FAFAFA); $bgImage:linear-gradient(#EDF5F8,#FAFAFA);
$pageWidth:750*$length; $pageWidth:750*$length;
$cardPaddingLeft:23*$length; $cardPaddingLeft:23*$length;
$primaryColor:#00AAE6;
$messageZIndex:9000; $messageZIndex:9000;
$FullScreenZIndex:8000; $FullScreenZIndex:8000;
$headerZIndex:7000; $headerZIndex:7000;
......
assets/font/iconfont.css
...@@ -59,6 +59,8 @@ ...@@ -59,6 +59,8 @@
content: "\e6a0"; content: "\e6a0";
} }
.yun-icon--edit:before { .yun-icon--edit:before {
content: "\e6e5"; content: "\e6e5";
} }
......
components/common/activityIndicator/index.js 0 → 100644
import ActivityIndicator from './src/main'
ActivityIndicator.install = function (Vue) {
Vue.component('yun-indicator',ActivityIndicator)
}
export default ActivityIndicator
components/common/activityIndicator/src/default-svg-list.js 0 → 100644
export default {
spinner:
'<svg class="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(30 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(60 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.75s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(90 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(120 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(150 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(180 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(210 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(240 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.25s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(270 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(300 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(330 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite"/></rect></svg>',
'warn-color':
'<svg class="alert" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><g fill="none" fill-rule="evenodd"><path d="M50.001 100C22.385 100 0 77.615 0 50.001 0 22.385 22.385 0 50.001 0 77.615 0 100 22.385 100 50.001 100 77.615 77.615 100 50.001 100z" fill="#F3F4F5"/><path d="M45.44 22h10.118l-1.821 34.217h-6.78L45.44 22zm9.646 45.366C56.36 68.575 57 70.036 57 71.758c0 1.943-.645 3.47-1.936 4.577-1.293 1.11-2.8 1.665-4.52 1.665-1.75 0-3.278-.547-4.584-1.644C44.654 75.26 44 73.728 44 71.758c0-1.721.626-3.183 1.873-4.392 1.248-1.205 2.776-1.809 4.585-1.809 1.806 0 3.35.604 4.628 1.809z" fill="#666F83"/></g></svg>',
'success-color':
'<svg class="alert" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><g fill="#2F86F6" fill-rule="evenodd"><circle opacity=".08" cx="50" cy="50" r="50"/><path d="M76.992 35.422L46.865 65.524l.136.136-4.343 4.348-.14-.14-.12.12-4.413-4.41.125-.124L24.015 51.34l4.343-4.348L42.457 61.11l30.122-30.098z"/></g></svg>',
}
components/common/activityIndicator/src/load-spirte.js 0 → 100644
const svgSprite = contents => `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="__MAND_MOBILE_SVG_SPRITE_NODE__"
style="position:absolute;width:0;height:0"
>
<defs>
${contents}
</defs>
</svg>
`
const spinner=(color)=>{
return '<svg class="spinner" ' +
'viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"' +
' style="background:0 0">' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(30 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(60 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.75s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(90 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(120 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(150 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(180 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(210 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(240 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.25s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(270 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(300 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/></rect>' +
'<rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="'+color+'" transform="rotate(330 50 50)">' +
'<animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite"/></rect></svg>'
};
const renderSvgSprite = (color) => {
const svgContent = spinner(color||'#000').split('svg')[1]
const symbols = `<symbol id="spinner" ${svgContent} symbol>`
return svgSprite(symbols)
}
const loadSprite = (color) => {
/* istanbul ignore if */
if (!document) {
return
}
const existing = document.getElementById('__MAND_MOBILE_SVG_SPRITE_NODE__')
const mountNode = document.body
if (!existing) {
mountNode.insertAdjacentHTML('afterbegin', renderSvgSprite(color))
}
}
export default loadSprite
components/common/activityIndicator/src/main.vue 0 → 100644
<template>
<svg
:style="{fill: color,width:heightRate*heightV+'px',height:heightRate*heightV+'px'}"
>
<use xlink:href="#spinner"/>
</svg>
</template>
<script>
import defaultSvg from './default-svg-list'
import loadSprite from './load-spirte'
import commonMixin from "../../../moblie/commonMixin";
export default {
mixins:[commonMixin],
props:{
size:Number,
color:String,
widthV:Number,
heightV:Number
},
mounted() {
loadSprite(this.color)
},
}
</script>
<style >
.loading{
animation: LoadingTurn 1.2s infinite;
}
@keyframes LoadingTurn {
/*from {*/
/* transform: rotate(0deg);*/
/*}*/
/*to{*/
/* transform: rotate(360deg);*/
/*}*/
}
</style>
components/common/image/src/main.vue
...@@ -170,9 +170,9 @@ ...@@ -170,9 +170,9 @@
<style scoped> <style scoped>
img{ img{
width:auto; /*width:auto;*/
height:auto; /*height:auto;*/
max-width: 100%; /*max-width: 100%;*/
max-height: 100%; /*max-height: 100%;*/
} }
</style> </style>
components/common/touch/index.js
...@@ -39,10 +39,21 @@ TouchEvent.prototype = { ...@@ -39,10 +39,21 @@ TouchEvent.prototype = {
this.touchType=="swipe"&&this.vueCallBack(this.binding.value,e);//若为滑动事件则返回 this.touchType=="swipe"&&this.vueCallBack(this.binding.value,e);//若为滑动事件则返回
if(Math.abs(disX)>Math.abs(disY)){//判断是横向滑动还是纵向滑动 if(Math.abs(disX)>Math.abs(disY)){//判断是横向滑动还是纵向滑动
if(disX>10){ if(disX>10){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
this.touchType=="swiperight"&&this.vueCallBack(this.binding.value,e);//右滑 this.touchType=="swiperight"&&this.vueCallBack(this.binding.value,e);//右滑
return false
}; };
if(disX<-10){ if(disX<-10){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
e.preventDefault();
this.touchType=="swipeleft"&&this.vueCallBack(this.binding.value,e);//左滑 this.touchType=="swipeleft"&&this.vueCallBack(this.binding.value,e);//左滑
return false
}; };
}else{ }else{
if(disY>10){ if(disY>10){
......
components/moblie/activityIndicator.vue 0 → 100644
<template>
<yun-div
:extend-style="{
display:'inline-flex'
}"
cl
>
</yun-div>
</template>
<script>
</script>
<style scoped>
.loading{
display:inline-flex;
animation: LoadingTurn 1.2s infinite;
}
@keyframes LoadingTurn {
from {
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
components/moblie/banner.vue
...@@ -12,7 +12,8 @@ ...@@ -12,7 +12,8 @@
v-if="bannerType===1" v-if="bannerType===1"
> >
<a :href="linkArr[currentImg]" target="_blank" style="width:100%;height:100%"> <a :href="linkArr[currentImg]" target="_blank" style="width:100%;height:100%">
<yun-img :ske-h="300" :ske-w="750" :src="imgArr[currentImg]" :style="{opacity:imgOpacity}" alt="" > <yun-img :width-v="750"
height-v="auto" :ske-h="300" :ske-w="750" :src="imgArr[currentImg]" :style="{opacity:imgOpacity}" alt="" >
</yun-img> </yun-img>
</a> </a>
...@@ -40,65 +41,177 @@ ...@@ -40,65 +41,177 @@
</yun-div> </yun-div>
</yun-div> </yun-div>
<!-- banner-card2--> <!-- banner-card2-->
<transition name="fade">
<yun-div
v-if="bannerType===2"
:extend-style="{
position: 'fixed',
zIndex:fullScreenZIndex,
touchAction:'none',
touchAction:'pan-y',
<yun-div }"
v-if="bannerType===2" :position-v="[0,0,0,0]"
:width-v="704" bg-color-v="#000"
:margin-v="[0,'auto']" :flex-v="['column','center','center']"
v-tap="tapToHide"
>
<!-- index-->
<yun-div
:extend-style="{
position: 'fixed',
zIndex:fullScreenZIndex+1,
}"
:position-v="[23,undefined,undefined,23]"
:font-style="[36,48,400,'#fff','left']"
:show-ske="false"
>
{{currentImg+1}}/{{imgArr.length}}
</yun-div>
<!-- user-->
<yun-div
:extend-style="{
position: 'fixed',
zIndex:fullScreenZIndex+1,
}"
:position-v="[23,0,undefined,0]"
:width-v="420"
:margin-v="[0,'auto']"
:font-style="[36,48,400,'#fff','left']"
:show-ske="false"
:flex-v="['row','center','center']"
>
<yun-img
:height-v="48"
:width-v="48"
:ske-h="48"
:ske-w="48"
:border-r="[24]"
:style="{
overflow:'hidden'
}"
>
</yun-img>
<yun-div
:font-style="[36,48,400,'#fff','left']"
:show-ske="false"
:margin-v="[0,0,0,12]"
:extend-style="{
maxWidth:360*heightRate+'px',
overflow:'hidden'
}"
:no-wrap="true"
>
userNameuserNameuserName
</yun-div>
> </yun-div>
<yun-div <!-- option-->
:width-v="704" <yun-div
bg-color-v="#BDBCD1" :extend-style="{
:border-r="[4]" position: 'fixed',
:flex-v="['row','center','center']" zIndex:fullScreenZIndex+1,
v-swipeleft="clickToGetNextPic"
v-swiperight="clickToGetPrePic" }"
> :position-v="[23,23,undefined,undefined]"
<yun-img :show-ske="false"
:width-v="704" :flex-v="['row','center','center']"
height-v="auto"
:ske-w="704"
:ske-h="300"
:src="imgArr[currentImg]"
> >
</yun-img> <yun-div
</yun-div> :flex-v="['row','center','center']"
<yun-div :padding-v="[0,10]"
:extend-style="{ :border-r="[24]"
overflowX:'scroll', bg-color-v="#75D098"
>
<yun-div
:font-style="[28,48,400,'#fff','left']"
:show-ske="false"
>
+
</yun-div>
<yun-indicator :height-v="28" color="#fff" :size="28" v-if="false"></yun-indicator>
<yun-div
:font-style="[28,48,400,'#fff','left']"
:show-ske="false"
>
关注
</yun-div>
</yun-div>
<yun-div
:margin-v="[0,0,0,23]"
:show-ske="false"
:font-style="[28,48,400,'#fff','left']"
>
<yun-icon name="down_arrow" color="#fff" :size="14"></yun-icon>
</yun-div>
</yun-div>
<!-- bottom option-->
<yun-div
:extend-style="{
position: 'fixed',
zIndex:fullScreenZIndex+1,
}" }"
:flex-v="['row','flex-start','center']" :position-v="[undefined,23,23,undefined]"
> :font-style="[36,48,400,'#fff','left']"
:show-ske="false"
:flex-v="['row','center','center']"
>
<yun-div
:margin-v="[0,0,0,33]"
:show-ske="false"
:font-style="[28,37,400,'#fff','left']"
>
<yun-icon name="share" color="#fff" :size="28"></yun-icon>
</yun-div>
<yun-div
:margin-v="[0,0,0,33]"
:show-ske="false"
:font-style="[28,37,400,'#fff','left']"
>
<yun-icon name="comment" color="#fff" :size="28"></yun-icon>
1000
</yun-div>
<yun-div
:margin-v="[0,0,0,33]"
:show-ske="false"
:font-style="[28,37,400,'#fff','left']"
>
<yun-icon name="like2" color="#fff" :size="28"></yun-icon>
1000
</yun-div>
</yun-div>
<yun-div <yun-div
:width-v="80" :width-v="750"
:height-v="80" bg-color-v="#BDBCD1"
:border-r="[4]" :border-r="[4]"
:border-v="[1,'solid',index===currentImg?'#00AAE6':'transparent']" :flex-v="['row','center','center']"
:extend-style="{ v-swipeleft="clickToGetNextPic"
opacity: index===currentImg?1:0.6 v-swiperight="clickToGetPrePic"
}"
:no-flex-shrink="true"
:flex-v="['column','center','center']"
:margin-v="[16,6,0,0]"
v-for=" (val,index) in imgArr"
:key="val+index"
v-tap="()=>clickToPointPic(index)"
> >
<yun-img <yun-img
:style="{ :width-v="750"
maxWidth:'100%', height-v="auto"
maxHeight:'100%', :ske-w="750"
:ske-h="300"
}" :src="imgArr[currentImg]"
:src="val" >
:ske-h="80" </yun-img>
:ske-w="80"
></yun-img>
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-div> </transition>
</yun-div> </yun-div>
</div> </div>
...@@ -108,7 +221,10 @@ ...@@ -108,7 +221,10 @@
<script> <script>
import commonMixin from "./commonMixin";
export default { export default {
mixins:[commonMixin],
name:'banner', name:'banner',
props:{ props:{
imgArr:{ imgArr:{
...@@ -156,6 +272,7 @@ ...@@ -156,6 +272,7 @@
opacityTime:500, opacityTime:500,
bannerTimer:null, bannerTimer:null,
currentImg:0, currentImg:0,
showBanner:true,
} }
}, },
...@@ -220,6 +337,13 @@ ...@@ -220,6 +337,13 @@
this.initBanner() this.initBanner()
}, },
tapToHide(){
clearTimeout(this.tapHideTimer)
this.tapHideTimer = setTimeout(()=>{
this.$emit('tap-hide',true)
},100)
}
} }
......
components/moblie/commonMixin.js
...@@ -23,5 +23,21 @@ export default { ...@@ -23,5 +23,21 @@ export default {
commonReturnFlexedLength(length){ commonReturnFlexedLength(length){
return length*this.heightRate + 'px' return length*this.heightRate + 'px'
}, },
//单页面跳转
changeRoute1(r){
this.$router.push(r)
},
//站内路由打开新的页面
changeRoute2(r){
let routeUrl = this.$router.resolve({
path: r
});
window.open(routeUrl.href,'_blank')
},
//站外地址打开新的页面
changeRoute3(r){
window.open(r,'_blank')
},
} }
} }
components/moblie/dynamicCard.vue 0 → 100644
<template>
<yun-div
:width-v="704"
:margin-v="[0,'auto',24]"
:padding-v="[39,paddingL,0]"
bg-color-v="#fff"
>
<!-- 头部-->
<yun-div
:flex-v="['row','space-between','center']"
:height-v="80"
>
<yun-img
:height-v="80"
:width-v="80"
:ske-h="80"
:ske-w="80"
:border-r="[40]"
:src="src"
></yun-img>
<yun-div
:width-v="608"
:height-v="80"
:flex-v="['column','space-between','flex-start']"
>
<yun-div
:width-v="608"
:flex-v="['row','space-between','center']"
>
<!-- 用户名-->
<yun-div
:no-wrap="true"
:width-v="410"
:ske-w="120"
:font-style="[30,40,400,'#333','left']"
>
{{name}}
</yun-div>
<yun-div
:font-style="[28,37,400,'#333','left']"
:show-ske="false"
>
<!-- 下拉菜单-->
<yun-icon name="down_arrow" color="#AAA" :size="14" v-if="false"></yun-icon>
<!-- 已关注状态-->
<yun-div
:font-style="[28,37,400,'#AAA','left']"
:show-ske="false"
v-if="false"
>
<yun-icon name="right" color="#AAA" :size="28"></yun-icon>
已关注
</yun-div>
<!-- 未关注状态-->
<yun-div
:flex-v="['row','center','center']"
>
<yun-div
:font-style="[28,37,400,'#75D098','left']"
:show-ske="false"
>
+
</yun-div>
<yun-indicator :height-v="28" color="#75D098" :size="28" v-if="false"></yun-indicator>
<yun-div
:font-style="[28,37,400,'#75D098','left']"
:show-ske="false"
>
关注
</yun-div>
</yun-div>
</yun-div>
</yun-div>
<yun-div
:width-v="608"
:flex-v="['row','space-between','center']"
>
<!-- 时期-->
<yun-div
:no-wrap="true"
:width-v="410"
:font-style="[22,30,400,'#999','left']"
>
{{createTime}}
</yun-div>
</yun-div>
</yun-div>
</yun-div>
<!-- 内容部分-->
<yun-div>
<!-- 内容文本部分-->
<yun-div
:font-style="[30,48,400,'#333','left']"
:padding-v="[28,0,0]"
class="content-word"
>
内容文本部分内容文本部分内容文本部分内容文本部分内容文本部分内容文本部分内容文本部分
</yun-div>
<!-- 内容图片部分-->
<!-- 一张小图-->
<yun-div
:width-v="404"
:border-r="[4]"
:padding-v="[28,0,0]"
v-for="(value,index) in imgArr2"
v-if="false"
@click="clickToOpenBanner(index)"
>
<yun-img
:width-v="404"
height-v="auto"
:src="value"
>
</yun-img>
</yun-div>
<!-- 一张长图-->
<yun-div
:width-v="404"
:border-r="[4]"
:padding-v="[28,0,0]"
v-for="(value,index) in imgArr2"
v-if="false"
@click="clickToOpenBanner(index)"
>
<yun-img
:width-v="404"
height-v="auto"
:src="value"
>
</yun-img>
</yun-div>
<!-- 两到四张-->
<yun-div
:border-r="[4]"
:padding-v="[28,0,0]"
:flex-v="['row','flex-start','center']"
:flex-wrap="true"
v-if="false"
>
<yun-div
@click="clickToOpenBanner(index)"
:width-v="164"
:height-v="164"
:ske-h="164"
:ske-w="164"
v-for="(value,index) in imgArr2"
:margin-v="[0,(index+1)===4?0:16,16,0]"
:flex-v="['row','center','center']"
>
<yun-img
width-v="auto"
:height-v="164"
:ske-h="164"
:ske-w="164"
height-v="auto"
:src="value"
>
</yun-img>
</yun-div>
</yun-div>
<!-- 四张以上-->
<yun-div
:border-r="[4]"
:padding-v="[28,0,0]"
:flex-v="['row','flex-start','center']"
:flex-wrap="true"
>
<yun-div
:width-v="224"
:height-v="224"
:ske-h="224"
:ske-w="224"
v-for="(value,index) in imgArr2"
:margin-v="[0,(index+1)%3===0?0:16,16,0]"
:flex-v="['row','center','center']"
@click.native="clickToOpenBanner(index)"
>
<yun-img
width-v="auto"
:height-v="224"
:ske-h="224"
:ske-w="224"
:src="value"
>
</yun-img>
<yun-div
v-if="index===8&&pictures.length>9"
:extend-style="{
position:'absolute'
}"
:position-v="[0,0,0,0]"
bg-color-v="rgba(34,31,40,.3)"
:font-style="[36,224,700,'#fff','center']"
:show-ske="false"
>
+{{pictures.length-imgArr2.length}}
</yun-div>
</yun-div>
</yun-div>
<banner :banner-type="2" @tap-hide="showBanner=false" v-if="showBanner" :currentImg2="currentImg" :autoPlay=false ></banner>
<!-- 视频-->
<yun-div
:width-v="704"
:height-v="464"
:padding-v="[28,0,0]"
v-if="false"
>
<video :width="heightRate*704+'px'" :height="heightRate*464+'px'" :style="{height:heightRate*464+'px',width:heightRate*704+'px'}" :src="video" controls></video>
</yun-div>
<!-- 尾部-->
<yun-div
:flex-v="['row','space-between','center']"
:margin-v="[24,0,0]"
:padding-v="[20,0]"
:height-v="35"
:border-v="[1,'solid','#EFEFEF','top']"
>
<yun-div
:width-v="235"
:height-v="35"
:font-style="[26,35,400,'#666','center']"
:show-ske="false"
:border-v="[1,'solid','rgba(0,0,0,.16)','right']"
>
<yun-icon :margin-v="[0,20,0,0]" name="share" color="#ccc" :size="20"></yun-icon>
转发
</yun-div>
<yun-div
:width-v="235"
:height-v="35"
:font-style="[26,35,400,'#666','center']"
:show-ske="false"
:border-v="[1,'solid','rgba(0,0,0,.16)','right']"
>
<yun-icon :margin-v="[0,20,0,0]" name="comment" color="#ccc" :size="20"></yun-icon>
评论
</yun-div>
<yun-div
:width-v="235"
:height-v="35"
:font-style="[26,35,400,'#666','center']"
:show-ske="false"
>
<yun-icon :margin-v="[0,20,0,0]" name="like1" color="#ccc" :size="20"></yun-icon>
点赞
</yun-div>
</yun-div>
</yun-div>
</yun-div>
</template>
<script>
import Banner from './banner';
import {dateConvert} from "../../action/utils/dateConvert";
import config from '../../action/config';
import {globalBus} from '../common/globalBus'
import commonMixin from "./commonMixin";
export default {
mixins:[commonMixin],
name:'socialContactCard',
components:{
Banner,
},
props:{
info:{
type:Object,
default: () => ({})
},
pageType:{
type:String,
default:''
},
isMy:{
type:Boolean,
default:false
}
},
data(){
//return
return {
showCard:true, //展示卡片
src:'http://39.108.124.75:3003/upload/logo.blob',
showDrop:false,
name:'pigbigbig',
postId:'',
content:'',
createTime:'',
pictures:[
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/alpha.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/alpha.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
],
video:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
userId:'',
showBanner:false,
currentImg:0,
userNick:'',
userAvatar:'',
followedAuthor:false,
followLoading:false,
showCommentCon:false,
status:0,
praiseNum:0,
praised:false,
praiseList:[],
praiseTotal:0,
showAllPraise:true,
showPraiseCon:true,
}
},
computed:{
imgArr2(){
let imgArr = this.pictures;
let imgArrL = imgArr.length;
if(imgArrL<=9){
return imgArr
}else{
return imgArr.slice(0,9)
}
},
longImg(){
if(this.pictures.length===1){
if(process.browser){
let src = this.pictures[0];
let img = new Image();
img.src = src;
return img.height / img.width > 1.33;
}
else{
return false
}
}
},
handledContent(){
return this.content;
},
returnItem4Class(){
return this.praised ?'footer-item4-active':'footer-item4'
},
returnItem4IconClass(){
return this.showPraiseCon?'icon__active':'icon'
}
},
created(){
// this.dateGet2Info();
// this.dataGetPraiseList();
if(process.browser){
document.addEventListener('click',(e)=>{
if(this.$refs.deleteButton){
if(!this.$refs.deleteButton.contains(e.target)){
this.showDrop = false;
}
}
})
}
globalBus.$on(config.event.listenSocialCardState,(userId)=>{
if(userId===this.userId){
this.followedAuthor = true;
}
})
},
methods:{
changeRoute2(r){
let routeUrl = this.$router.resolve({
path: r
});
window.open(routeUrl.href,'_blank')
},
dataGet2ComNum(n){
this.commentNumber = this.commentNumber +n
},
MessageAlert(){
this.$message({
type:'info',
message:'该功能尚未启用'
})
},
clickToOpenBanner(index){
this.showBanner = true;
this.currentImg = index
},
clickToShowDrop(){
this.showDrop=!this.showDrop
},
dateGet2Info(){
let info = this.info;
if(this.info.postId){
this.content = info.content;
this.postId = info.postId;
this.pictures = info.pictures===null?[]:info.pictures;
this.video = info.video;
this.createTime = dateConvert(info.createTime);
this.userId = info.userId;
this.userNick = info.userNick;
this.userAvatar = info.userAvatar;
this.followedAuthor = info.followedAuthor;
this.commentNumber = info.commentNumber;
this.status = info.status;
this.praiseNum = info.praiseNum;
this.praised = info.praised;
}
},
showAlert(id){
this.$alert('确认删除？', '', {
confirmButtonText: '确定',
callback: action => {
this.dateDeleteCard(id)
}
});
},
dateDeleteCard(id){
this.$axios.$delete(config.api.delete.Post.delete+id).then((response)=>{
if(response.code===0){
// this.$emit(config.event.listenSocialCardState,1);
this.showCard = false;
this.$message({
type:'success',
message:'删除成功！'
})
}else{
this.$message({
type:'warning',
message:'删除失败！'
})
}
})
},
dataPostFollowUser(){
this.followLoading = true;
this.$axios.$post(config.api.post.User.follow+this.userId+'/follower').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'关注成功！'
})
this.followLoading = false;
this.followedAuthor = true;
globalBus.$emit(config.event.listenSocialCardState,this.userId)
}else{
this.followLoading = false;
this.$message({
type:'warning',
message:response.msg
})
}
})
},
clickToPraise(){
if(this.praised){
this.dataDeletePraise();
}else{
this.dataPostPraise()
}
},
dataGetPraiseList(){
this.$axios.$get(config.api.post.PostPraise.praise+this.postId+'/praises',{
params:{
page:1,
size:9,
}
}).then((response)=>{
if(response.code===0){
this.showAllPraise = response.data.totalRecords <= 9;
this.praiseList = response.data.dataList;
this.praiseTotal = response.data.totalRecords;
}
})
},
dataGetAllPraiseList(){
this.$axios.$get(config.api.post.PostPraise.praise+this.postId+'/praises',{
params:{
page:1,
size:this.praiseTotal,
}
}).then((response)=>{
if(response.code===0){
this.showAllPraise = true;
this.praiseList = response.data.dataList;
this.praiseTotal = response.data.totalRecords;
}
})
},
dataPostPraise(){
this.$axios.$post(config.api.post.PostPraise.praise+this.postId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'点赞成功'
})
this.praised = true;
this.praiseNum = this.praiseNum +1;
this.dataGetPraiseList();
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
},
dataDeletePraise(){
this.$axios.$delete(config.api.delete.PostPraise.praise+this.postId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'取消点赞'
})
this.praised = false;
this.praiseNum = this.praiseNum -1;
this.dataGetPraiseList();
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
}
},
}
</script>
<style lang="scss">
.content-word{
a{
color:$primaryColor;
}
}
</style>
layouts/default.vue
<template> <template>
<div> <div class="default-layout__wrap">
<client-only> <client-only>
<page-header></page-header> <page-header></page-header>
<nuxt /> <nuxt />
...@@ -46,3 +46,10 @@ ...@@ -46,3 +46,10 @@
} }
</script> </script>
<style lang="scss">
.default-layout__wrap{
background:$bgImage ;
}
</style>
plugins/nossr.js
...@@ -2,6 +2,7 @@ import VueTouch from 'vue-touch'; ...@@ -2,6 +2,7 @@ import VueTouch from 'vue-touch';
import TouchEvent from '../components/common/touch' import TouchEvent from '../components/common/touch'
import YunButton from '../components/common/button'; import YunButton from '../components/common/button';
import YunPopup from '../components/common/popup'; import YunPopup from '../components/common/popup';
import Indicator from '../components/common/activityIndicator';
import Toast from '../components/common/toast'; import Toast from '../components/common/toast';
import YunDialog from '../components/common/dialog'; import YunDialog from '../components/common/dialog';
import YunInput from '../components/common/input'; import YunInput from '../components/common/input';
...@@ -17,6 +18,7 @@ Vue.prototype.$message = Toast ...@@ -17,6 +18,7 @@ Vue.prototype.$message = Toast
Vue.prototype.$messageBox = YunDialog Vue.prototype.$messageBox = YunDialog
Vue.use(YunAdaptableCon) Vue.use(YunAdaptableCon)
Vue.use(Indicator)
Vue.use(YunDialog) Vue.use(YunDialog)
Vue.use(YunInput) Vue.use(YunInput)
Vue.use(YunPopup) Vue.use(YunPopup)
......
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