Skip to content

M
mayi-mp-shop
Commit 67f4b43d by 李嘉林
Options

文章卡片组件

parent d57f2c91
Showing with 1141 additions and 4 deletions
src/api/classification.js 0 → 100644
import { requestPOST, requestGET } from "@/utils/request.js"
export default {
getArticleList(data) {
return requestPOST(
`${process.env.OLSHOP_URL}/article/getArticleList`,
data
);
},
addLike(data) {
return requestPOST(`${process.env.OLSHOP_URL}/article/fabulous`, data);
}
};
\ No newline at end of file
src/components/content/information/articleItem.vue 0 → 100644
<template>
<!-- 文章item -->
<div
class="articleItem"
:class="[
'articleItem'+listStyle,
cartStyle == 2 && listStyle != 5 ? 'articleItemBorder' : '',
imgRight ? 'imgRight' : '',
]"
:style="{
'box-shadow': cartStyle == 1 && listStyle != 5 ? '0px 0px 5px 0px #ccc' : '',
'--border_color': '#D8D8D8',
'border-radius': cartRadius == 1 && listStyle != 5 ? '8px' : '',
'--border_radius': cartRadius == 1 && listStyle != 5 ? '8px' : '',
'background': listStyle != 5 ? bgColor : ''
}"
@click="toInfoPage"
>
<div class="img" v-if="!imgRight" :style="{'background': listStyle != 5 ? bgColor : ''}">
<div
class="tagList flex"
v-if="info.tagList && info.tagList.length > 0 && tagShow"
>
<div
class="tag"
v-for="(item, index) in info.tagShowList"
:key="index"
>
<i class="tag-i">#</i>
<span class="tagName">{{ item.tagName }}</span>
</div>
</div>
<image :src="info.coverUrl" mode="widthFix"></image>
</div>
<div class="infoText">
<p
class="content"
:style="{ 'font-weight': fontWeight, color: textColor }"
>
{{ info.title }}
</p>
<div class="bottom flex" v-if="viewNumShow || starNumShow">
<div class="view" v-if="viewNumShow">
<span>阅读</span>
<span>{{ info.userBrowsingNum }}</span>
</div>
<div
class="star"
v-if="starNumShow"
@click.stop="toLike(info)"
:class="{ isLike: info.isLike == 'true' }"
>
<i class="ant-shoucang-line"></i>
<span>{{ info.fabulousNum }}</span>
</div>
</div>
</div>
<!-- 针对图片在右边 -->
<div class="img" v-if="imgRight">
<div
class="tagList flex"
v-if="info.tagList && info.tagList.length > 0 && tagShow"
>
<div
class="tag"
v-for="(item, index) in info.tagShowList"
:key="index"
>
<i class="tag-i">#</i>
<span class="tagName">{{ item.tagName }}</span>
</div>
</div>
<image :src="info.coverUrl" mode="widthFix"></image>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import informationComputed from "./mixin/information-computed.js";
const app=getApp();
export default {
mixins: [informationComputed],
name: "articleItem",
props: {
render: {
type: Boolean,
default: false,
},
info: {
type: Object,
default: {},
},
num: {
type: Number,
default: 0,
},
loading: {
type: Boolean,
default: false,
},
datas: {
type: Object,
default: function () {
return {
componentData: {},
};
},
},
},
data() {
return {
imgWidth: 0,
};
},
components: {},
computed: {
imgRight() {
if ((this.listStyle == 5 && this.num > 0) || this.listStyle == 6) {
return true;
} else {
return false;
}
},
},
created() {},
mounted() {},
methods: {
toInfoPage() {
this.$emit("toInfoPage", this.info);
},
// 点赞
toLike(item) {
if (!this.render) return;
app.$themeArticleLike(item, (res) => {
item.isLike = res;
if (res == "true") {
item.fabulousNum = Number(item.fabulousNum) + 1;
} else {
item.fabulousNum -= 1;
}
});
},
},
};
</script>
<style lang="scss" scoped>
img {
display: block;
}
.articleItem {
padding-bottom: 0.84em;
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
.img {
width: 100%;
position: relative;
background: #fdfdfd;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
.tagList {
position: absolute;
bottom: 4px;
left: 4px;
max-width: 92%;
flex-wrap: wrap;
overflow: hidden;
.tag {
padding: 0 8px;
height: 22px;
line-height: 22px;
background: #fff;
border-radius: 4px;
margin-left: 4px;
margin-bottom: 4px;
display:flex;
.tag-i {
font-weight: 400;
color: var(--main-color);
font-size: 12px;
}
.tagName {
color: #424242;
font-size: 12px;
font-weight: 400;
}
}
}
}
.content {
padding: 0 8px;
font-size: 14px;
min-height: 42px;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
position: relative;
line-height: 22px;
}
.bottom {
margin-top: 8px;
padding: 0 8px;
justify-content: space-between;
align-items: center;
& > div {
display: flex;
align-items: center;
font-size: 13px;
color: #999;
i {
font-size: 16px;
}
span:nth-child(2) {
margin-left: 4px;
}
}
.isLike {
color: var(--main-color);
}
}
}
.articleItemBorder{
border: 1px solid #D8D8D8;
}
// 大图模式
.articleItem1 {
margin-top: 10px;
.img {
height: 140px;
}
.infoText {
margin-top: 10px;
}
}
// 瀑布流
.articleItem2 {
margin-bottom: 10px;
.img {
image {
width: 100%;
height: auto;
}
}
.infoText {
margin-top: 0.84em;
}
}
// 一行两个
.articleItem3 {
display: inline-block;
margin-top: 0;
width: 49%;
vertical-align: top;
white-space: normal;
.img {
height: 140px;
}
.infoText {
margin-top: 10px;
.content {
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
position: relative;
line-height: 22px;
}
}
}
.articleItem3:nth-child(2n) {
margin-left: 2%;
}
.articleItem3:not(:nth-child(-1n + 2)) {
margin-top: 10px;
}
// 横向滚动
.articleItem4 {
display: inline-block;
margin-top: 0;
width: 42%;
vertical-align: top;
white-space: normal;
.img {
height: 140px;
}
.infoText {
margin-top: 10px;
.content {
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
position: relative;
line-height: 22px;
}
}
}
.articleItem4:not(:first-of-type) {
margin-left: 2%;
}
// 一大多小
.articleItem5 {
.img {
height: 140px;
}
.infoText {
margin-top: 10px;
}
}
.articleItem5:not(:first-of-type) {
border-top: 1px solid #d8d8d8;
.img {
height: 140px;
}
.infoText {
margin-top: 10px;
}
}
// 详细列表
.articleItem6 {
margin-top: 10px;
}
.imgRight {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 8px 12px 0;
.infoText {
flex: 1;
height: 90px;
margin-top: 0 !important;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.img {
width: 100px;
height: 100px !important;
border-radius: 6px;
overflow: hidden;
margin-left: 12px;
}
}
</style>
src/components/content/information/index.vue 0 → 100644
<!-- 资讯-->
<template>
<div class="information" ref="v-waterfall" v-if="itemShow">
<skeletonInformation v-if="!loading" :skeletonNum="skeletonNum" :listStyle="listStyle"></skeletonInformation>
<div class="domain" v-else>
<div class="tops">
<div class="tit clearfix">
<h3 class="line-clamp1">{{title}}</h3>
<div
class="more"
v-if="datas.componentData['moreShow']&&datas.componentData.status==1"
@click="viewMore"
>
<div class="moreTop">
查看更多
<span class="jt"></span>
</div>
</div>
</div>
</div>
<div
class="articleList clearfix"
:class="[cartStyle==2&&listStyle==5?'my-hairline--all':'',listStyle==4?'articleList-wibkit':'',listStyle==4?'articleListNowrap':'']"
:style="
{'box-shadow':cartStyle==1&&listStyle==5?'0px 0px 5px 0px #ccc':'',
'--border_color':'#D8D8D8',
'border-radius':cartRadius==1&&listStyle==5?'8px':'',
'--border_radius':cartRadius==1&&listStyle==5?'8px':'',
'background':listStyle==5?bgColor:'',
'overflow':listStyle==5?'hidden':'',
'position':listStyle==2?'relative':''}
"
>
<div v-if="listStyle==4">
<div class="prev-btn" v-if="loading">
<i class="ant-fanhui-line"></i>
</div>
<div class="next-btn" v-if="loading">
<i class="ant-fanhui-line"></i>
</div>
</div>
<div v-if="listStyle!=2">
<articleItem
v-for="(item,index) in articityList"
:key="index"
:num="index"
:datas="datas"
:info="item"
:loading="loading"
:render="$props.render"
@toInfoPage="toInfoPage"
></articleItem>
</div>
<div v-else>
<!-- 瀑布流 -->
<div class="waterfallFlow">
<div class="left">
<div v-for="(item,index) in articityList" :key="index">
<articleItem
v-if="index%2==0"
:key="index"
:num="index"
:datas="datas"
:info="item"
:loading="loading"
:render="$props.render"
@toInfoPage="toInfoPage"
></articleItem>
</div>
</div>
<div class="right">
<div v-for="(item,index) in articityList" :key="index">
<articleItem
v-if="index%2==1"
:key="index"
:num="index"
:datas="datas"
:info="item"
:loading="loading"
:render="$props.render"
@toInfoPage="toInfoPage"
></articleItem>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
try {
dfags;
} catch (error) {}
import articleItem from "./articleItem";
import informationComputed from "./mixin/information-computed.js";
import skeletonInformation from "./skeleton-information";
const app = getApp()
function getMaxList(arr) {
if (arr.length == 0) return [];
let num = arr[0].length;
let maxI = 0;
for (let i in arr) {
let naxarr = [];
if (num < arr[i].length) {
num = arr[i].length;
maxI = i;
}
}
return arr[maxI];
}
function run(needChangeList) {
let parentArr = [];
for (let i = 0; i < needChangeList.length; i++) {
let newArr = [],
tempI = i;
newArr.push(needChangeList[i]);
parentArr.push(newArr);
goOn(needChangeList, ++tempI, parentArr, newArr);
}
return parentArr;
}
function goOn(needChangeList, start, parentArr, newArr) {
for (let i = start; i < needChangeList.length; i++) {
let chileArr = [],
tempI = i;
chileArr = chileArr.concat(newArr);
chileArr.push(needChangeList[i]);
parentArr.push(chileArr);
goOn(needChangeList, ++tempI, parentArr, chileArr);
}
}
function aa(list, maxNum) {
let returnList = [];
let newList = JSON.parse(JSON.stringify(list));
let oldSum = 0;
list.forEach((item, index) => {
oldSum += item.val;
});
if (oldSum > maxNum) {
list.pop();
if (list.length > 0) {
aa(list, maxNum);
}
} else {
returnList.push(list);
}
return {
oldSum,
returnList: getMaxList(returnList),
};
}
function finalFun(needChangeList, maxNum) {
let b = run(needChangeList);
let finalNum = 0;
let finalList = [];
b.forEach((item, index) => {
let list = JSON.parse(JSON.stringify(item));
let finalObj = aa(list, maxNum);
if (finalObj.returnList.length > 0 && finalNum < finalObj.oldSum) {
finalNum = finalObj.oldSum;
finalList = finalObj.returnList;
}
});
return finalList;
}
export default {
mixins: [informationComputed],
name: "information",
props: {
render: {
type: Boolean,
default: true,
},
datas: {
type: Object,
default: function () {
return {
componentData: {
content: "这是标题",
info: "这是文章内容",
},
};
},
},
},
data() {
return {
itemShow: true,
getArticleList: null,
getArticleInfo: null,
DFSImg: null,
loading: false,
thsDatas: this.datas,
articleInfo: "",
// 瀑布流使用参数开始
//列数
waterfallImgCol: 2,
// 间距
waterfallImgGap: 10,
//列高度数组
waterfallDeviationHeight: [0, 0],
// 边距
getPaddingList: [
{
value: 10,
},
{
value: 10,
},
{
value: 10,
},
{
value: 10,
},
],
//窗口总宽度
domWidth: 0,
waterfallHeight: 0,
waterfallList: [],
preloadList: [],
//图片方块宽度
waterfallImgWidth: null,
// 瀑布流使用参数结束
};
},
components: {
articleItem,
skeletonInformation,
},
computed: {
//标题
title() {
if (!this.render && this.datas.componentData.title == "") {
return "请输入板块标题";
} else {
return this.datas.componentData.title;
}
},
//文章列表id
articityId() {
let { articityId } = this.datas.componentData;
if (articityId != null && articityId != "" && articityId != "null") {
return articityId.constructor != Array ? [articityId] : articityId;
} else {
return [];
}
},
//分类或文章
articleStatus() {
return this.datas.componentData.status || 1;
},
// 文章添加方式
addArticleType() {
return this.datas.componentData.addArticleType || 1;
},
// 文章自动添加数量
autoAddNum() {
return this.datas.componentData.autoAddNum || 10;
},
// 分类id
classifId() {
return this.datas.componentData.classifId || "";
},
// 分类名
classifName() {
if (
this.datas.componentData.classificationTitle &&
this.datas.componentData.classificationTitle != ""
) {
return this.datas.componentData.classificationTitle || "";
} else {
return this.datas.componentData.classifName || "";
}
},
// 列表
articityList: {
get() {
return this.datas.componentData.articityList || [];
},
set(newValue) {
this.datas.componentData.articityList = newValue;
},
},
// 展示骨架屏数量
skeletonNum() {
if (this.addArticleType == 1 && this.articleStatus == 2) {
return 2;
} else if (this.addArticleType == 2 && this.articleStatus == 2) {
return this.autoAddNum;
} else if (this.listStyle == 4) {
return 2;
} else {
return 4;
}
},
},
mounted() {
this.DFSImg = app.DFSImg;
this.init();
},
methods: {
init() {
if (this.datas.componentData.status == 1) {
// 根据分类
this.getArticle(1);
} else if (this.datas.componentData.status == 2) {
// 根据文章
this.getArticle(2);
} else if (this.datas.componentData.status == 3) {
if (this.render && this.articityList.length == 0) {
this.itemShow = false;
}
this.loading = true;
}
},
initNoListShow() {
for (let i = 0; i < 4; i++) {
this.articityList.push({
coverUrl:
"https://cdn.mayi888.com/public/png/348afd85-1b55-4e58-a256-d7ead98e2ce2.png",
tagName: "文章标签",
title: "文章标题",
userBrowsingNum: 999,
fabulousNum: 999,
id: -1,
});
}
},
initQuery() {
this.waterfallList = [];
this.articityList = [];
this.waterfallHeight = 0;
this.loading = true;
},
getArticle(val) {
let query = {};
if (val == 1) {
// 分类
query = {
categoryName: this.classifName,
pageNum : 1,
pageSize: 10,
articleStatus: 1,
};
if (
query.categoryName == "" ||
query.categoryName == null ||
query.categoryName == "null"
) {
this.initQuery();
if (!this.render) {
this.initNoListShow();
} else {
this.itemShow = false;
}
return;
}
} else if (val == 2) {
// 文章
if (this.addArticleType == 1) {
// 手动添加
if (this.articityId.length == 0) {
this.initQuery();
if (!this.render) {
this.initNoListShow();
} else {
this.itemShow = false;
}
return;
}
query = {
articleIds: this.articityId,
pageNum : 1,
pageSize: this.articityId.length,
articleStatus: 1,
};
} else {
// 自动添加
query = {
pageNum : 1,
pageSize: this.autoAddNum,
articleStatus: 1,
};
}
}
console.log(query, "-----------------314");
app.classificationApi.getArticleList(query).then((res) => {
if (res.data.code == 200) {
this.articityList = res.data.data;
if (this.articityList.length > 0) {
this.articityList.forEach((item, index) => {
item.coverUrl = app.DFSImg(item.coverUrl,400,400,1);
item.tagShowList=[];
console.log(item.tagList,'-------tagList')
item.tagShowList=item.tagList?this.initTagList(item.tagList):[];
});
} else {
this.itemShow = false;
}
this.loading = true;
}
});
},
// 查看更多
viewMore() {
let link = `/article/articleList?classifyId=${this.classifId}&categoryName=${this.classifName}`
app.$themeToLink({
type :1,
link : link
});
},
// 资讯详情
toInfoPage(item) {
console.log(item, "--------------------494");
if (
this.datas.componentData.status == 1 ||
this.datas.componentData.status == 2
) {
let query = {
articityId: item.id,
};
let link = `/article/${query.articityId}`
app.$themeToLink({
type :1,
link : link
});
} else if (this.datas.componentData.status == 3 && item.articleLink) {
this.$themeToLink({
name : '',
type : 1,
link : item.articleLink
});
}
},
initTagList(list) {
let i = 0;
let newTagList = [];
list.forEach((item, index) => {
item.val = item.tagName.length + 2;
});
if (this.listStyle == 1) {
i = 25;
} else if (this.listStyle == 2 || this.listStyle == 3) {
i = 10;
} else if (this.listStyle == 4) {
i = 8;
} else if (this.listStyle == 6) {
i = 6;
} else if (this.listStyle == 5 && this.num == 0) {
i = 25;
} else if (this.listStyle == 5 && this.num > 0) {
i = 6;
}
newTagList = finalFun(list, i);
console.log(newTagList,'---------------------------457')
return newTagList;
},
},
};
</script>
<style lang="scss" scoped>
.information {
padding: 10px;
font-size: 12px;
}
.line-clamp2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/*清除浮动*/
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
width: 0;
height: 0;
visibility: hidden;
}
.domain {
position: relative;
.tops {
padding: 0px 0px 0px 5px;
h3 {
font-size: 17px;
color: #424242;
width: 60%;
float: left;
}
.more {
width: 27%;
float: right;
.moreTop {
font-size: 14px;
color: #707070;
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 8px;
}
.jt {
display: inline-block;
border-top: 1px solid;
border-right: 1px solid;
width: 10px;
height: 10px;
-webkit-transform: rotate(-135deg);
transform: rotate(405deg);
margin-left: 0px;
}
}
}
.articleList {
width: 100%;
margin-top: 10px;
.prev-btn,
.next-btn {
position: absolute;
top: 50%;
z-index: 99;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
i{
font-size: 30px;
}
}
.prev-btn{
left: 10px;
}
.next-btn {
i{
transform: rotateY(180deg);
}
}
}
.articleListNowrap {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
.next-btn {
right: 10px;
}
}
.articleList-wibkit::-webkit-scrollbar {
display: none;
}
// 瀑布流
.waterfallFlow{
display: flex;
justify-content: space-between;
.left,.right{
width: 49%;
}
}
}
</style>
src/components/content/information/mixin/information-computed.js 0 → 100644
// information-computed 计算属性混入
export default {
computed: {
// 列表样式
listStyle() {
return this.datas.componentData.listStyle || 1;
},
// 展示文章标签
tagShow() {
return this.datas.componentData.tagShow || false;
},
// 展示阅读数
viewNumShow() {
return this.datas.componentData.viewNumShow || false;
},
// 展示点赞数
starNumShow() {
return this.datas.componentData.starNumShow || false;
},
//字体粗细
fontWeight() {
return this.datas.componentData.fontWeight || "bold";
},
//文字颜色
textColor() {
return this.datas.componentData.textColor || "rgba(51,51,51,1)";
},
//卡片样式
cartStyle() {
return this.datas.componentData.cartStyle || 1;
},
//卡片倒角
cartRadius() {
return this.datas.componentData.cartRadius || 1;
},
//背景颜色
bgColor() {
return this.datas.componentData.bgColor || "rgba(255,255,255,1)";
}
}
};
src/components/content/information/skeleton-information.vue 0 → 100644
<template>
<div
class="skeleton-information skeleton-animate skeleton-block-w100"
:class="[listStyle==2||listStyle==3||listStyle==4?'skeleton-flex-sb':'']"
>
<div class="skeleton-bg skeleton-title-h20 skeleton-title-w100"></div>
<div
v-for="(item,index) in skeletonNum"
:key="index"
:class="[listStyle==2||listStyle==3||listStyle==4?'skeleton-block-w48':'skeleton-block-w100']"
>
<div v-if="listStyle==1">
<div class="skeleton-bg skeleton-block-h40 skeleton-block-w100"></div>
<div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
<div class="skeleton-flex-sb">
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
</div>
</div>
<div v-if="listStyle==2||listStyle==3||listStyle==4">
<div class="skeleton-bg skeleton-block-h100 skeleton-block-w100"></div>
<div class="skeleton-bg skeleton-title-h20 skeleton-title-w100"></div>
<div class="skeleton-flex-sb">
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
</div>
</div>
<div v-if="listStyle==5">
<div v-if="index==0">
<div class="skeleton-bg skeleton-block-h40 skeleton-block-w100"></div>
<div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
<div class="skeleton-flex-sb">
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
</div>
</div>
<div v-else>
<div class="skeleton-flex-sb">
<div class="skeleton-block-w60">
<div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
<div class="skeleton-block-h12 skeleton-block-w30"></div>
<div class="skeleton-flex-sb">
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
</div>
</div>
<div class="skeleton-bg skeleton-block-h30 skeleton-block-w30"></div>
</div>
</div>
</div>
<div v-if="listStyle==6">
<div class="skeleton-flex-sb">
<div class="skeleton-block-w60">
<div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
<div class="skeleton-block-h12 skeleton-block-w30"></div>
<div class="skeleton-flex-sb">
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
<div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
</div>
</div>
<div class="skeleton-bg skeleton-block-h30 skeleton-block-w30"></div>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "skeleton-information",
props:['listStyle','skeletonNum'],
data() {
return {};
},
components: {},
computed: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
$skeletonColor: #f2f3f5;
// $skeletonColor: #ccc;
// 骨架屏样式
.skeleton-bg {
background: $skeletonColor;
}
.skeleton-flex-sb {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.skeleton-flex-sa {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
@for $h from 1 through 200 {
.skeleton-block-h#{$h} {
padding-top: (1% * $h);
margin-top: 10px;
}
}
@for $w from 1 through 200 {
.skeleton-block-w#{$w} {
width: (1% * $w);
}
}
@for $h from 1 through 200 {
.skeleton-title-h#{$h} {
height: (1px * $h);
margin-top: 10px;
}
}
@for $h from 1 through 200 {
.skeleton-title-w#{$h} {
width: (1% * $h);
}
}
.skeleton-animate {
animation: skeleton-blink 1.2s ease-in-out infinite;
}
@keyframes skeleton-blink {
50% {
opacity: 0.6;
}
}
</style>
src/main.js
......@@ -7,8 +7,9 @@ import orderApi from "./api/order"
import promoteApi from "./api/promote";
import indexApi from './api/index'
import cartApi from './api/cart'
import classificationApi from "./api/classification";
import { DFSImg } from "@/utils/index";
import { $themeToLink, $themeAddToCard } from "@/utils/mayi";
import { $themeToLink, $themeAddToCard, $themeArticleLike } from "@/utils/mayi";
import shop from "./api/shop";
Vue.config.productionTip = false
......@@ -54,12 +55,15 @@ console.log('3555555', wx)
mpApp.$themeToLink = $themeToLink
// 全局加入购物车
mpApp.$themeAddToCard = $themeAddToCard
// 文章点赞
mpApp.$themeArticleLike = $themeArticleLike
// api
mpApp.goodsApi = goodsApi;
mpApp.orderApi = orderApi;
mpApp.promoteApi = promoteApi;
mpApp.indexApi = indexApi;
mpApp.cartApi = cartApi;
mpApp.classificationApi = classificationApi;
mpApp.DFSImg = DFSImg;
mpApp.getThemePage = getThemePage
......
src/pages/home/index.vue
......@@ -76,7 +76,7 @@
<live-broadcast :datas="item"></live-broadcast>
</div>
<div v-if="item.componentCode == 'information' && item.componentInfo.visible == 1">
<!-- <information :datas="item"></information> -->
<information :datas="item"></information>
</div>
<div v-if="item.componentCode == 'share-picture' && item.componentInfo.visible == 1">
<share-picture :datas="item"></share-picture>
......@@ -97,7 +97,7 @@ import interval from '@/components/basicTool/interval/index.vue'
import partition from '@/components/basicTool/partition/index.vue'
import shopPopup from '@/components/basicTool/shop-popup/index.vue'
import transverseLabel from '@/components/basicTool/transverse-label/index.vue'
// import information from '@/components/content/information/index.vue'
import information from '@/components/content/information/index.vue'
import text from '@/components/content/text'
import imgText from '@/components/content/imgText'
import coupon from '@/components/activity/coupon'
......@@ -130,7 +130,7 @@ export default {
coupon,
integralTurntable,
transverseLabel,
// information
information
},
onShareAppMessage(res) {
let shareVal={};
......
src/utils/mayi.js
import cart from "@/api/cart"
import classificationApi from "@/api/classification";
// 登录白名单 name
export const noLoginList = ["index", "media-video", "goods-goodsInfo", "goods-commodityMenu", "goodsSearch-goodsSearch", "chooseStores", "activty-receivingGift", "activty", "login-register", "login-phoneLogin", "login-authInformation", "login-forgetPassWord", "login-accountLogin", "login-wxRegister", "pay-payList", "comment-evaluateList", "goods-commonProblemList", "article-articlePage", "article-articleList", "goods-posters", "liveBroadcast", "liveBroadcast-list", "personalCenter-coupon-getCoupon", "buyerShow-showDetail", "goods-addGoodsList", "personalCenter-CDkey-exchange", "giftCards-linkReceive", "giftCoupon-preview", "smartForm", "shopCart-shareShopCart", "groupBuying-beInvite", "brandTopics", 'personalCenter-spokesmanCenter', 'personalCenter-spokesmanCenter-mine-spokesmanHomePage','liveBroadcast-lived', 'personalCenter-spokesmanCenter-mine-getBusinessCard','changeAdr'];
......@@ -206,4 +207,18 @@ export function checkShowConditionIds(list) {
allCondition:[...new Set(allCondition)],
isAreaNavigation
}
}
export function $themeArticleLike(item, callback){
let query = { articleId: item.id };
classificationApi.addLike(query).then(res => {
if (res.data.code == "200") {
if (res.data.data == 'true') {
callback("true");
} else {
callback("false");
}
} else {
Toast(res.data.msg);
}
});
}
\ 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