Skip to content

M
mayi-mp-shop
Commit a70d415a by 程智春
Options

Merge branch 'nativehome_tst' of http://code.mayi888.com/chengmo/mayi-mp-shop into nativehome_tst

parents 6f633a59 d154bc1d
Showing with 1189 additions and 300 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/pages/index/index.vue
......@@ -11,7 +11,7 @@
import spokesman from "@/api/spokesman.js";
import shop from "@/api/shop.js";
import indexApi from "@/api/index.js";
import { serialize, getQueryVariable, DFSImg } from "@/utils/index";
import { serialize, getQueryVariable, DFSImg,delUrlParam } from "@/utils/index";
import login from "@/api/login";
export default {
data() {
......@@ -23,7 +23,7 @@ export default {
baseUrl: process.env.BASE_URL,
link: this.baseUrl,
page: "/",
location_obj:wx.getStorageSync("location"),
location_obj:encodeURIComponent(wx.getStorageSync("location")),
params: "?mixid=" + this.shopId+`&location_obj=${this.location_obj}`,
userInfo: {
......@@ -100,7 +100,12 @@ export default {
})
},
})
// 移除重复参数
if (options.params) {
let params=decodeURIComponent(options.params)
let location_obj=getQueryVariable(params, "location_obj")
location_obj && (options.params=params.split('&location_obj='+location_obj).join(''))
}
//检测登录态
this.checkLogin();
this.options = options;
......@@ -158,6 +163,9 @@ export default {
//来自小程序登录页面
this.page = decodeURIComponent(options.backpath);
this.params += "&" + decodeURIComponent(options.params);
console.log(this.pageUrl,'1644444444444',this.params,'-----',options)
} else if (options.from && options.from == "logout") {
//来自用户登出
wx.removeStorage({
......
src/pages/login/index.vue
......@@ -97,7 +97,6 @@ export default {
})
},
onLoad(options) {
console.log(options,'login')
Object.assign(this.$data, this.$options.data()); //mpvue 的混合周期 使用小程序生命周期数据未初始化
if (options.back) {
this.backPath = options.back;
......@@ -319,14 +318,13 @@ export default {
}else{
let parseLink=decodeURIComponent(this.backPath);
let isTabbarIndex =checkTabbarPage(parseLink)
console.log('32111',isTabbarIndex,parseLink)
wx.navigateBack()
return
console.log('32111',isTabbarIndex,parseLink,this.backParams)
// wx.navigateBack()
// return
if(isTabbarIndex>-1){
wx.navigateBack()
// wx.switchTab({
// url: parseLink == '/' ? '/pages/home/main' : `/pages/tabBar${isTabbarIndex}/main`,
// })
wx.switchTab({
url: parseLink == '/' ? '/pages/home/main' : `/pages/tabBar${isTabbarIndex}/main`,
})
}else{
wx.redirectTo({
url: `../index/main?from=login&backpath=${
......
src/pages/tabBar1/index.vue
......@@ -50,6 +50,8 @@ export default {
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
}else{
this.params+=`&timestamp=${new Date().getTime()}`
}
setTabBarActive.bind(this)(this.index);
......
src/pages/tabBar2/index.vue
......@@ -49,6 +49,8 @@ export default {
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
}else{
this.params+=`&timestamp=${new Date().getTime()}`
}
setTabBarActive.bind(this)(this.index);
......
src/pages/tabBar3/index.vue
......@@ -55,6 +55,8 @@ export default {
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
}else{
this.params+=`&timestamp=${new Date().getTime()}`
}
setTabBarActive.bind(this)(this.index);
......
src/pages/tabBar4/index.vue
......@@ -55,6 +55,8 @@ export default {
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
}else{
this.params+=`&timestamp=${new Date().getTime()}`
}
setTabBarActive.bind(this)(this.index);
......
src/utils/index.js
......@@ -44,6 +44,29 @@ export function getQueryVariable(query,variable) {
}
return (false);
}
// 删除
export function delUrlParam(url, key) {
let baseUrl = url.split('?')[0] + '?';
let query = url.split('?')[1];
if (query.indexOf(key) > -1) {
let obj = {};
let arr = query.split('&');
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].split('=');
obj[arr[i][0]] = arr[i][1];
}
delete obj[key];
let url =
baseUrl +
JSON.stringify(obj)
.replace(/[\"\{\}]/g, '')
.replace(/\:/g, '=')
.replace(/\,/g, '&');
return url;
} else {
return url;
}
}
//补全图片路径
export function DFSImg(path, w, h,type=0) { //
......
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
static/font/demo_index.html deleted 100644 → 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1686837" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">左</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">右</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe641;</span>
<div class="name">评论</div>
<div class="code-name">&amp;#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe857;</span>
<div class="name">眼睛</div>
<div class="code-name">&amp;#xe857;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">心</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconzuo"></span>
<div class="name">
左
</div>
<div class="code-name">.iconzuo
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyou"></span>
<div class="name">
右
</div>
<div class="code-name">.iconyou
</div>
</li>
<li class="dib">
<span class="icon iconfont iconpinglun"></span>
<div class="name">
评论
</div>
<div class="code-name">.iconpinglun
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyanjing"></span>
<div class="name">
眼睛
</div>
<div class="code-name">.iconyanjing
</div>
</li>
<li class="dib">
<span class="icon iconfont iconicon_huabanfuben"></span>
<div class="name">
心
</div>
<div class="code-name">.iconicon_huabanfuben
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzuo"></use>
</svg>
<div class="name">左</div>
<div class="code-name">#iconzuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyou"></use>
</svg>
<div class="name">右</div>
<div class="code-name">#iconyou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconpinglun"></use>
</svg>
<div class="name">评论</div>
<div class="code-name">#iconpinglun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyanjing"></use>
</svg>
<div class="name">眼睛</div>
<div class="code-name">#iconyanjing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconicon_huabanfuben"></use>
</svg>
<div class="name">心</div>
<div class="code-name">#iconicon_huabanfuben</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
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