mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 02:47:25 +08:00
feat: 添加视频模块并优化多个组件
This commit is contained in:
pikachu1995@126.com
@@ -1,20 +1,30 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="layout" v-if="goodsList.length">
|
||||
<div class="join-list">
|
||||
<div class="join-title">
|
||||
<div class="join-title" @click="goMore">
|
||||
<div class="join-title-name">{{ res.list[0].title }}</div>
|
||||
<div class="join-title-more">更多</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div class="join-item" @click="modelNavigateTo(item)" v-for="item in 4" :key="item">
|
||||
<div
|
||||
class="join-item"
|
||||
@click="goDetail(item)"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="item-img-box">
|
||||
<img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
|
||||
<u-image
|
||||
class="item-img"
|
||||
width="150rpx"
|
||||
height="150rpx"
|
||||
:src="item.goodsImage || item.thumbnail"
|
||||
/>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span class="price-text">￥120.00</span>
|
||||
<span class="price-text">￥{{ item.price }}</span>
|
||||
</div>
|
||||
<div class="item-line-through">
|
||||
<span class="price-text">￥190.00</span>
|
||||
<span class="price-text">￥{{ item.originalPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -22,19 +32,84 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// TODO 后续版本开发此功能 尽情期待
|
||||
import { modelNavigateTo } from "./tpl";
|
||||
import * as API_Promotions from "@/api/promotions";
|
||||
export default {
|
||||
props: ["res"],
|
||||
title: "拼团",
|
||||
data() {
|
||||
return {
|
||||
modelNavigateTo,
|
||||
goodsList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
API_Promotions.getAssembleList({
|
||||
pageNumber: 1,
|
||||
pageSize: this.res.list[0].count || 3,
|
||||
promotionStatus: "START",
|
||||
}).then((res) => {
|
||||
if (res.data.success && res.data.result && res.data.result.records) {
|
||||
this.goodsList = res.data.result.records.slice(0, this.res.list[0].count || 3);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goMore() {
|
||||
uni.navigateTo({ url: "/pages/promotion/joinGroup" });
|
||||
},
|
||||
goDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
@import "./advertising.scss";
|
||||
</style>
|
||||
.join-box {
|
||||
display: flex;
|
||||
}
|
||||
.item-price {
|
||||
.price-text {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.item-img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.item-img-box {
|
||||
position: relative;
|
||||
}
|
||||
.item-line-through {
|
||||
.price-text {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 50px;
|
||||
.join-title-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.join-title-more {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,30 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="layout" v-if="goodsList.length">
|
||||
<div class="join-list">
|
||||
<div class="join-title">
|
||||
<div class="join-title" @click="goMore">
|
||||
<div class="join-title-name">{{ res.list[0].title }}</div>
|
||||
<div class="join-title-more">更多</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div class="join-item" v-for="item in 4" :key="item">
|
||||
<div
|
||||
class="join-item"
|
||||
@click="goDetail(item)"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="item-img-box">
|
||||
<img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
|
||||
<u-image
|
||||
class="item-img"
|
||||
width="150rpx"
|
||||
height="150rpx"
|
||||
:src="item.goodsImage || item.thumbnail"
|
||||
/>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span class="price-text">20积分</span>
|
||||
<span class="price-text">{{ item.points != null ? item.points : 0 }}积分</span>
|
||||
</div>
|
||||
<div class="item-line-through">
|
||||
<span class="price-text">30积分</span>
|
||||
<div class="item-line-through" v-if="item.originalPrice">
|
||||
<span class="price-text">￥{{ item.originalPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -22,10 +32,33 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// TODO 后续版本开发此功能 尽情期待
|
||||
import * as API_Promotions from "@/api/promotions";
|
||||
export default {
|
||||
title:"积分商品",
|
||||
props: ["res"],
|
||||
title: "积分商品",
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
API_Promotions.getPointsGoods({
|
||||
pageNumber: 1,
|
||||
pageSize: this.res.list[0].count || 3,
|
||||
}).then((res) => {
|
||||
if (res.data.success && res.data.result && res.data.result.records) {
|
||||
this.goodsList = res.data.result.records.slice(0, this.res.list[0].count || 3);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goMore() {
|
||||
uni.navigateTo({ url: "/pages/promotion/point/pointList" });
|
||||
},
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: `/pages/promotion/point/detail?id=${item.id}` });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@@ -42,6 +75,7 @@ export default {
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.item-img {
|
||||
width: 75px;
|
||||
@@ -60,13 +94,6 @@ export default {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item-position-tips {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
bottom: 0;
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -82,4 +109,4 @@ export default {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="join-list">
|
||||
<div class="join-title">
|
||||
<div class="join-title-name">{{ res.list[0].title }}</div>
|
||||
<div class="join-title-more">更多</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div class="join-item" v-for="item in 4" :key="item">
|
||||
<div class="item-img-box">
|
||||
<img
|
||||
class="item-img"
|
||||
src="https://picsum.photos/id/268/200/200"
|
||||
alt
|
||||
/>
|
||||
<div class="item-position-tips">2人团</div>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span class="price-text">￥120.00</span>
|
||||
</div>
|
||||
<div class="item-line-through">
|
||||
<span class="price-text">￥120.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// TODO 后续版本开发此功能 尽情期待
|
||||
export default {
|
||||
props: ["res"],
|
||||
title:"团购"
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.join-box {
|
||||
display: flex;
|
||||
}
|
||||
.item-price {
|
||||
.price-text {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
}
|
||||
.item-img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.item-img-box {
|
||||
position: relative;
|
||||
}
|
||||
.item-line-through {
|
||||
.price-text {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item-position-tips {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
bottom: 0;
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 50px;
|
||||
.join-title-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.join-title-more {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,30 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="layout" v-if="goodsList.length">
|
||||
<div class="join-list">
|
||||
<div class="join-title">
|
||||
<div class="join-title" @click="goMore">
|
||||
<div class="join-title-name">{{ res.list[0].title }}</div>
|
||||
<div class="join-title-more">更多</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div class="join-item" v-for="item in 4" :key="item">
|
||||
<div
|
||||
class="join-item"
|
||||
@click="goDetail(item)"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="item-img-box">
|
||||
<img
|
||||
<u-image
|
||||
class="item-img"
|
||||
src="https://picsum.photos/id/268/200/200"
|
||||
alt
|
||||
width="150rpx"
|
||||
height="150rpx"
|
||||
:src="item.goodsImage || item.thumbnail"
|
||||
/>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span class="price-text">￥120.00</span>
|
||||
<span class="price-text">￥{{ item.price }}</span>
|
||||
</div>
|
||||
<div class="item-line-through">
|
||||
<span class="price-text">￥190.00</span>
|
||||
<span class="price-text">￥{{ item.originalPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,13 +32,88 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// TODO 后续版本开发此功能 尽情期待
|
||||
import * as API_Promotions from "@/api/promotions";
|
||||
export default {
|
||||
props: ["res"],
|
||||
title: "秒杀",
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
API_Promotions.getSeckillTimeLine().then((res) => {
|
||||
if (res.data.success && res.data.result && res.data.result.length) {
|
||||
const sorted = res.data.result.sort(
|
||||
(x, y) => Number(x.timeLine) - Number(y.timeLine)
|
||||
);
|
||||
const first = sorted[0] || {};
|
||||
this.goodsList = (first.seckillGoodsList || []).slice(
|
||||
0,
|
||||
this.res.list[0].count || 3
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goMore() {
|
||||
uni.navigateTo({ url: "/pages/promotion/seckill" });
|
||||
},
|
||||
goDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
@import './advertising.scss';
|
||||
|
||||
</style>
|
||||
@import "./advertising.scss";
|
||||
.join-box {
|
||||
display: flex;
|
||||
}
|
||||
.item-price {
|
||||
.price-text {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.item-img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.item-img-box {
|
||||
position: relative;
|
||||
}
|
||||
.item-line-through {
|
||||
.price-text {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 50px;
|
||||
.join-title-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.join-title-more {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
168
pages/tabbar/home/template/tpl_video.vue
Normal file
168
pages/tabbar/home/template/tpl_video.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="layout" :style="wrapperStyle">
|
||||
<div class="video-shell" :style="boxStyle">
|
||||
<div
|
||||
class="video-ratio"
|
||||
:style="{ paddingBottom: aspectPadding + '%' }"
|
||||
>
|
||||
<div class="video-ratio-inner">
|
||||
<video
|
||||
v-if="item.videoUrl"
|
||||
class="video-media"
|
||||
:src="item.videoUrl"
|
||||
:poster="item.poster"
|
||||
:autoplay="!!item.autoplay"
|
||||
:controls="true"
|
||||
object-fit="cover"
|
||||
/>
|
||||
<image
|
||||
v-else-if="item.poster"
|
||||
class="video-media"
|
||||
:src="item.poster"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const DEFAULT_VIDEO_STYLE = {
|
||||
bgType: "color",
|
||||
bgColorStart: "#F5F5F5",
|
||||
bgColorEnd: "#F5F5F5",
|
||||
bgGradientDir: "horizontal",
|
||||
bgRadius: 0,
|
||||
bottomBgColor: "#F5F5F5",
|
||||
bgImage: "",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
borderShow: false,
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
borderColor: "#e5e5e5",
|
||||
shadowShow: false,
|
||||
shadowColor: "rgba(0,0,0,0.1)",
|
||||
shadowX: 0,
|
||||
shadowY: 0,
|
||||
shadowBlur: 10,
|
||||
shadowSpread: 0,
|
||||
};
|
||||
|
||||
const ASPECT_RATIO_MAP = {
|
||||
"16:9": 56.25,
|
||||
"4:3": 75,
|
||||
"1:1": 100,
|
||||
};
|
||||
|
||||
function ensureVideoItem(item) {
|
||||
if (!item.aspectRatio) item.aspectRatio = "16:9";
|
||||
if (!item.style) {
|
||||
item.style = { ...DEFAULT_VIDEO_STYLE };
|
||||
return;
|
||||
}
|
||||
Object.keys(DEFAULT_VIDEO_STYLE).forEach((key) => {
|
||||
if (item.style[key] === undefined) {
|
||||
item.style[key] = DEFAULT_VIDEO_STYLE[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getVideoGradient(style) {
|
||||
const start = style.bgColorStart || "#F5F5F5";
|
||||
const end = style.bgColorEnd || start;
|
||||
const colors = `${start}, ${end}`;
|
||||
const dirMap = {
|
||||
horizontal: `linear-gradient(to right, ${colors})`,
|
||||
vertical: `linear-gradient(to bottom, ${colors})`,
|
||||
skewLeft: `linear-gradient(135deg, ${colors})`,
|
||||
skewRight: `linear-gradient(45deg, ${colors})`,
|
||||
};
|
||||
return dirMap[style.bgGradientDir] || dirMap.horizontal;
|
||||
}
|
||||
|
||||
export default {
|
||||
props: ["res"],
|
||||
title: "视频",
|
||||
computed: {
|
||||
item() {
|
||||
const data = this.res.list[0] || {};
|
||||
ensureVideoItem(data);
|
||||
return data;
|
||||
},
|
||||
wrapperStyle() {
|
||||
const style = this.item.style;
|
||||
return {
|
||||
margin: `${style.margin || 0}px`,
|
||||
padding: `${style.padding || 0}px`,
|
||||
background: style.bottomBgColor || "#F5F5F5",
|
||||
boxSizing: "border-box",
|
||||
};
|
||||
},
|
||||
boxStyle() {
|
||||
const style = this.item.style;
|
||||
const box = {
|
||||
borderRadius: `${style.bgRadius || 0}px`,
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
};
|
||||
|
||||
if (style.bgType === "image" && style.bgImage) {
|
||||
box.backgroundImage = `url(${style.bgImage})`;
|
||||
box.backgroundSize = "cover";
|
||||
box.backgroundPosition = "center";
|
||||
} else {
|
||||
box.background = getVideoGradient(style);
|
||||
}
|
||||
|
||||
if (style.borderShow) {
|
||||
box.border = `${style.borderWidth || 1}px ${style.borderStyle || "solid"} ${
|
||||
style.borderColor || "#e5e5e5"
|
||||
}`;
|
||||
}
|
||||
|
||||
if (style.shadowShow) {
|
||||
box.boxShadow = `${style.shadowX || 0}px ${style.shadowY || 0}px ${
|
||||
style.shadowBlur || 10
|
||||
}px ${style.shadowSpread || 0}px ${style.shadowColor || "rgba(0,0,0,0.1)"}`;
|
||||
}
|
||||
|
||||
return box;
|
||||
},
|
||||
aspectPadding() {
|
||||
return ASPECT_RATIO_MAP[this.item.aspectRatio] || ASPECT_RATIO_MAP["16:9"];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
|
||||
.layout {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.video-shell {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-ratio {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-ratio-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.video-media {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -1,332 +1,312 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
|
||||
<div v-for="(item, index) in pageData.list" :key="index">
|
||||
<!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
|
||||
<u-navbar
|
||||
class="navbar"
|
||||
v-if="item.type == 'search'"
|
||||
:auto-back="false"
|
||||
:fixed="index === 1 ? false : true"
|
||||
:placeholder="index === 1 ? false : true"
|
||||
left-icon=""
|
||||
title=""
|
||||
bg-color="#ffffff"
|
||||
>
|
||||
<template #left>
|
||||
<view class="navbar-search-wrap" :style="searchBarStyle" @click.stop>
|
||||
<search :res="item.options" />
|
||||
</view>
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="navbar-message" :style="messageIconStyle" @click="linkMsgDetail">
|
||||
<image class="message-icon" src="/static/img/title.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<carousel v-if="item.type == 'carousel'" :res="item.options" />
|
||||
<titleLayout v-if="item.type == 'title'" :res="item.options" />
|
||||
<leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" />
|
||||
<leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
|
||||
<topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
|
||||
<topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" />
|
||||
<flexThree v-if="item.type == 'flexThree'" :res="item.options" />
|
||||
<flexFive v-if="item.type == 'flexFive'" :res="item.options" />
|
||||
<flexFour v-if="item.type == 'flexFour'" :res="item.options" />
|
||||
<flexTwo v-if="item.type == 'flexTwo'" :res="item.options" />
|
||||
<textPicture v-if="item.type == 'textPicture'" :res="item.options" />
|
||||
<menuLayout v-if="item.type == 'menu'" :res="item.options" />
|
||||
<flexOne v-if="item.type == 'flexOne'" :res="item.options" />
|
||||
<goods :enableBottomLoad="enableLoad" v-if="item.type == 'goods'" :res="item.options" />
|
||||
<group v-if="item.type == 'group'" :res="item.options" />
|
||||
<notice v-if="item.type == 'notice'" :res="item.options" />
|
||||
<promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
|
||||
<!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
|
||||
<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
|
||||
<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
|
||||
|
||||
</div>
|
||||
<fetchCoupon ref='coupon' />
|
||||
<u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引用组件
|
||||
import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
|
||||
import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
|
||||
import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
|
||||
import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
|
||||
import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
|
||||
import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
|
||||
import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
|
||||
import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
|
||||
import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
|
||||
import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
|
||||
import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
|
||||
import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
|
||||
import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
|
||||
import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
|
||||
import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
|
||||
import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
|
||||
// 结束引用组件
|
||||
import { getFloorData } from "@/api/home"; //获取楼层装修接口
|
||||
import permission from "@/js_sdk/wa-permission/permission.js"; //权限工具类
|
||||
import config from "@/config/config";
|
||||
|
||||
import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
|
||||
import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
|
||||
import storage from "@/utils/storage.js";
|
||||
import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon'
|
||||
// 与 tpl.scss $home-layout-padding 保持一致
|
||||
const HOME_LAYOUT_PADDING_RPX = 16;
|
||||
// import {receiveCoupons} from "@/api/members"
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
config,
|
||||
storage,
|
||||
showCp:true,
|
||||
pageData: "", //楼层页面数据
|
||||
isIos: "",
|
||||
enableLoad: false, //触底加载 针对于商品模块
|
||||
capsuleInsetRight: 0,
|
||||
searchBarWidth: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
messageIconStyle() {
|
||||
if (!this.capsuleInsetRight) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
marginRight: `${this.capsuleInsetRight}px`,
|
||||
};
|
||||
},
|
||||
searchBarStyle() {
|
||||
if (this.searchBarWidth) {
|
||||
return {
|
||||
width: `${this.searchBarWidth}px`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
width: '560rpx',
|
||||
};
|
||||
},
|
||||
},
|
||||
components: {
|
||||
carousel: tpl_banner,
|
||||
titleLayout: tpl_title,
|
||||
leftOneRightTwo: tpl_left_one_right_two,
|
||||
leftTwoRightOne: tpl_left_two_right_one,
|
||||
topOneBottomTwo: tpl_top_one_bottom_two,
|
||||
topTwoBottomOne: tpl_top_two_bottom_one,
|
||||
flexThree: tpl_flex_three,
|
||||
flexFive: tpl_flex_five,
|
||||
flexFour: tpl_flex_four,
|
||||
flexTwo: tpl_flex_two,
|
||||
textPicture: tpl_text_picture,
|
||||
menuLayout: tpl_menu,
|
||||
search: tpl_search,
|
||||
flexOne: tpl_flex_one,
|
||||
goods: tpl_goods,
|
||||
group: tpl_group,
|
||||
notice: tpl_notice,
|
||||
promotions: tpl_promotions,
|
||||
fetchCoupon
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.setCapsuleInset();
|
||||
this.init();
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序默认分享
|
||||
uni.showShareMenu({ withShareTicket: true });
|
||||
// #endif
|
||||
|
||||
},
|
||||
methods: {
|
||||
setCapsuleInset() {
|
||||
// #ifdef MP-WEIXIN
|
||||
try {
|
||||
const menuButton = uni.getMenuButtonBoundingClientRect();
|
||||
const { windowWidth } = uni.getWindowInfo();
|
||||
this.capsuleInsetRight = windowWidth - menuButton.left;
|
||||
const messageWidth = uni.upx2px(20);
|
||||
const leftPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
|
||||
const gap = uni.upx2px(0);
|
||||
this.searchBarWidth =
|
||||
windowWidth - this.capsuleInsetRight - messageWidth - leftPadding - gap;
|
||||
} catch (e) {
|
||||
this.capsuleInsetRight = 90;
|
||||
this.searchBarWidth = 260;
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
linkMsgDetail() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/tabbar/home/title",
|
||||
});
|
||||
},
|
||||
fetchCoupon(){
|
||||
this.$refs.coupon.firstGetAuto();
|
||||
},
|
||||
/**
|
||||
* 实例化首页数据楼层
|
||||
*/
|
||||
init () {
|
||||
this.pageData = "";
|
||||
getFloorData().then((res) => {
|
||||
if (res.data.success) {
|
||||
const result = JSON.parse(res.data.result.pageData)
|
||||
this.pageData = result;
|
||||
if (result.list.length) {
|
||||
// 如果最后一个装修模块是商品模块的话 默认启用自动加载
|
||||
result.list[result.list.length - 1] ? result.list[result.list.length - 1].model == 'goods' ? this.enableLoad = true : '' : ''
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 是否有网络链接
|
||||
isConnected (val) {
|
||||
val ? this.init() : ''
|
||||
},
|
||||
|
||||
/**
|
||||
* TODO 扫码功能后续还会后续增加
|
||||
* 应该实现的功能目前计划有：
|
||||
* 扫描商品跳转商品页面
|
||||
* 扫描活动跳转活动页面
|
||||
* 扫描二维码登录
|
||||
* 扫描其他站信息 弹出提示，返回首页。
|
||||
*/
|
||||
scanCode () {
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
let path = encodeURIComponent(res.result);
|
||||
|
||||
|
||||
|
||||
if (path != undefined && path.indexOf("QR_CODE_LOGIN_SESSION") == 0) {
|
||||
console.log(path)
|
||||
//app扫码登录
|
||||
uni.navigateTo({
|
||||
url: "/pages/passport/scannerCodeLoginConfirm?token=" + path
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// WX_CODE 为小程序码
|
||||
if (res.scanType == "WX_CODE") {
|
||||
console.log(res);
|
||||
uni.navigateTo({
|
||||
url: `/${res.path}`,
|
||||
});
|
||||
} else {
|
||||
config.scanAuthNavigation.forEach((src) => {
|
||||
if (res.result.indexOf(src) != -1) {
|
||||
uni.navigateTo({
|
||||
url: `/${res.result.substring(src.length)}`,
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/tabbar/home/web-view?src=" + path,
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 提示获取权限
|
||||
*/
|
||||
tipsGetSettings () {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "您已经关闭相机权限,去设置",
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
if (this.isIos) {
|
||||
plus.runtime.openURL("app-settings:");
|
||||
} else {
|
||||
permission.gotoAppPermissionSetting();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 唤醒客户端扫码
|
||||
* 没权限去申请权限，有权限获取扫码功能
|
||||
*/
|
||||
async scan () {
|
||||
// #ifdef APP-PLUS
|
||||
this.isIos = plus.os.name == "iOS";
|
||||
// 判断是否是Ios
|
||||
if (this.isIos) {
|
||||
const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
|
||||
if (iosFirstCamera !== "false") {
|
||||
uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
|
||||
this.scanCode();
|
||||
} else {
|
||||
if (permission.judgeIosPermission("camera")) {
|
||||
this.scanCode();
|
||||
} else {
|
||||
// 没有权限提醒是否去申请权限
|
||||
this.tipsGetSettings();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
/**
|
||||
* TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
|
||||
* TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
|
||||
*/
|
||||
this.scanCode();
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.scanCode();
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/pages/tabbar/home/template/tpl.scss";
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
|
||||
:deep(.u-navbar__content__left) {
|
||||
width: auto !important;
|
||||
padding: 0 0 0 $home-layout-padding !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-search-wrap {
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navbar-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
width: 53rpx;
|
||||
height: 53rpx;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
|
||||
<div v-for="(item, index) in pageData.list" :key="index">
|
||||
<!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
|
||||
<u-navbar
|
||||
class="navbar"
|
||||
v-if="item.type == 'search'"
|
||||
:auto-back="false"
|
||||
:fixed="index === 1 ? false : true"
|
||||
:placeholder="index === 1 ? false : true"
|
||||
left-icon=""
|
||||
title=""
|
||||
bg-color="#ffffff"
|
||||
>
|
||||
<template #left>
|
||||
<view class="navbar-search-wrap" :style="searchBarStyle" @click.stop>
|
||||
<search :res="item.options" />
|
||||
</view>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<carousel v-if="item.type == 'carousel'" :res="item.options" />
|
||||
<titleLayout v-if="item.type == 'title'" :res="item.options" />
|
||||
<leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" />
|
||||
<leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
|
||||
<topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
|
||||
<topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" />
|
||||
<flexThree v-if="item.type == 'flexThree'" :res="item.options" />
|
||||
<flexFive v-if="item.type == 'flexFive'" :res="item.options" />
|
||||
<flexFour v-if="item.type == 'flexFour'" :res="item.options" />
|
||||
<flexTwo v-if="item.type == 'flexTwo'" :res="item.options" />
|
||||
<textPicture v-if="item.type == 'textPicture'" :res="item.options" />
|
||||
<menuLayout v-if="item.type == 'menu'" :res="item.options" />
|
||||
<flexOne v-if="item.type == 'flexOne'" :res="item.options" />
|
||||
<goods :enableBottomLoad="enableLoad" v-if="item.type == 'goods'" :res="item.options" />
|
||||
<group v-if="item.type == 'group'" :res="item.options" />
|
||||
<notice v-if="item.type == 'notice'" :res="item.options" />
|
||||
<promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
|
||||
<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
|
||||
<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
|
||||
<videoLayout v-if="item.type == 'video'" :res="item.options" />
|
||||
</div>
|
||||
<fetchCoupon ref='coupon' />
|
||||
<u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引用组件
|
||||
import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
|
||||
import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
|
||||
import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
|
||||
import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
|
||||
import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
|
||||
import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
|
||||
import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
|
||||
import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
|
||||
import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
|
||||
import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
|
||||
import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
|
||||
import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
|
||||
import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
|
||||
import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
|
||||
import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
|
||||
import tpl_video from "@/pages/tabbar/home/template/tpl_video"; //视频模块
|
||||
import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
|
||||
// 结束引用组件
|
||||
import { getFloorData } from "@/api/home"; //获取楼层装修接口
|
||||
import permission from "@/js_sdk/wa-permission/permission.js"; //权限工具类
|
||||
import config from "@/config/config";
|
||||
|
||||
import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
|
||||
import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
|
||||
import storage from "@/utils/storage.js";
|
||||
import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon'
|
||||
// 与 tpl.scss $home-layout-padding 保持一致
|
||||
const HOME_LAYOUT_PADDING_RPX = 16;
|
||||
// import {receiveCoupons} from "@/api/members"
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
config,
|
||||
storage,
|
||||
showCp:true,
|
||||
pageData: "", //楼层页面数据
|
||||
isIos: "",
|
||||
enableLoad: false, //触底加载 针对于商品模块
|
||||
capsuleInsetRight: 0,
|
||||
searchBarWidth: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
searchBarStyle() {
|
||||
if (this.searchBarWidth) {
|
||||
return {
|
||||
width: `${this.searchBarWidth}px`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
width: "100%",
|
||||
};
|
||||
},
|
||||
},
|
||||
components: {
|
||||
carousel: tpl_banner,
|
||||
titleLayout: tpl_title,
|
||||
leftOneRightTwo: tpl_left_one_right_two,
|
||||
leftTwoRightOne: tpl_left_two_right_one,
|
||||
topOneBottomTwo: tpl_top_one_bottom_two,
|
||||
topTwoBottomOne: tpl_top_two_bottom_one,
|
||||
flexThree: tpl_flex_three,
|
||||
flexFive: tpl_flex_five,
|
||||
flexFour: tpl_flex_four,
|
||||
flexTwo: tpl_flex_two,
|
||||
textPicture: tpl_text_picture,
|
||||
menuLayout: tpl_menu,
|
||||
search: tpl_search,
|
||||
flexOne: tpl_flex_one,
|
||||
goods: tpl_goods,
|
||||
group: tpl_group,
|
||||
notice: tpl_notice,
|
||||
promotions: tpl_promotions,
|
||||
videoLayout: tpl_video,
|
||||
fetchCoupon
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.setCapsuleInset();
|
||||
this.init();
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序默认分享
|
||||
uni.showShareMenu({ withShareTicket: true });
|
||||
// #endif
|
||||
|
||||
},
|
||||
methods: {
|
||||
setCapsuleInset() {
|
||||
try {
|
||||
const { windowWidth } = uni.getWindowInfo();
|
||||
const leftPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
|
||||
const rightPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButton = uni.getMenuButtonBoundingClientRect();
|
||||
this.capsuleInsetRight = windowWidth - menuButton.left;
|
||||
this.searchBarWidth =
|
||||
windowWidth - this.capsuleInsetRight - leftPadding;
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.searchBarWidth = windowWidth - leftPadding - rightPadding;
|
||||
// #endif
|
||||
} catch (e) {
|
||||
this.capsuleInsetRight = 0;
|
||||
this.searchBarWidth = 0;
|
||||
}
|
||||
},
|
||||
fetchCoupon(){
|
||||
this.$refs.coupon.firstGetAuto();
|
||||
},
|
||||
/**
|
||||
* 实例化首页数据楼层
|
||||
*/
|
||||
init () {
|
||||
this.pageData = "";
|
||||
getFloorData().then((res) => {
|
||||
if (res.data.success) {
|
||||
const result = JSON.parse(res.data.result.pageData)
|
||||
this.pageData = result;
|
||||
if (result.list.length) {
|
||||
// 如果最后一个装修模块是商品模块的话 默认启用自动加载
|
||||
result.list[result.list.length - 1] ? result.list[result.list.length - 1].model == 'goods' ? this.enableLoad = true : '' : ''
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 是否有网络链接
|
||||
isConnected (val) {
|
||||
val ? this.init() : ''
|
||||
},
|
||||
|
||||
/**
|
||||
* TODO 扫码功能后续还会后续增加
|
||||
* 应该实现的功能目前计划有：
|
||||
* 扫描商品跳转商品页面
|
||||
* 扫描活动跳转活动页面
|
||||
* 扫描二维码登录
|
||||
* 扫描其他站信息 弹出提示，返回首页。
|
||||
*/
|
||||
scanCode () {
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
let path = encodeURIComponent(res.result);
|
||||
|
||||
|
||||
|
||||
if (path != undefined && path.indexOf("QR_CODE_LOGIN_SESSION") == 0) {
|
||||
console.log(path)
|
||||
//app扫码登录
|
||||
uni.navigateTo({
|
||||
url: "/pages/passport/scannerCodeLoginConfirm?token=" + path
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// WX_CODE 为小程序码
|
||||
if (res.scanType == "WX_CODE") {
|
||||
console.log(res);
|
||||
uni.navigateTo({
|
||||
url: `/${res.path}`,
|
||||
});
|
||||
} else {
|
||||
config.scanAuthNavigation.forEach((src) => {
|
||||
if (res.result.indexOf(src) != -1) {
|
||||
uni.navigateTo({
|
||||
url: `/${res.result.substring(src.length)}`,
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/tabbar/home/web-view?src=" + path,
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 提示获取权限
|
||||
*/
|
||||
tipsGetSettings () {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "您已经关闭相机权限,去设置",
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
if (this.isIos) {
|
||||
plus.runtime.openURL("app-settings:");
|
||||
} else {
|
||||
permission.gotoAppPermissionSetting();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 唤醒客户端扫码
|
||||
* 没权限去申请权限，有权限获取扫码功能
|
||||
*/
|
||||
async scan () {
|
||||
// #ifdef APP-PLUS
|
||||
this.isIos = plus.os.name == "iOS";
|
||||
// 判断是否是Ios
|
||||
if (this.isIos) {
|
||||
const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
|
||||
if (iosFirstCamera !== "false") {
|
||||
uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
|
||||
this.scanCode();
|
||||
} else {
|
||||
if (permission.judgeIosPermission("camera")) {
|
||||
this.scanCode();
|
||||
} else {
|
||||
// 没有权限提醒是否去申请权限
|
||||
this.tipsGetSettings();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
/**
|
||||
* TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
|
||||
* TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
|
||||
*/
|
||||
this.scanCode();
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.scanCode();
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/pages/tabbar/home/template/tpl.scss";
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
|
||||
:deep(.u-navbar__content) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.u-navbar__content__left) {
|
||||
flex: 1;
|
||||
width: auto !important;
|
||||
max-width: 100%;
|
||||
padding: 0 0 0 $home-layout-padding !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-search-wrap {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user