code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-08-06 02:47:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加视频模块并优化多个组件

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-07-07 09:39:32 +08:00
parent 4e2fcbc1fe
commit 686aed848d
8 changed files with 714 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
pages/tabbar/home/template/tpl_group.vue
View File

@@ -1,20 +1,30 @@
<template> <template>
<div class="layout"> <div class="layout" v-if="goodsList.length">
<div class="join-list"> <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-name">{{ res.list[0].title }}</div>
<div class="join-title-more">更多</div> <div class="join-title-more">更多</div>
</div> </div>
<div class="join-box"> <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"> <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>
<div class="item-price"> <div class="item-price">
<span class="price-text">￥120.00</span> <span class="price-text">￥{{ item.price }}</span>
</div> </div>
<div class="item-line-through"> <div class="item-line-through">
<span class="price-text">￥190.00</span> <span class="price-text">￥{{ item.originalPrice }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -22,19 +32,84 @@
</div> </div>
</template> </template>
<script> <script>
// TODO 后续版本开发此功能 尽情期待 import * as API_Promotions from "@/api/promotions";
import { modelNavigateTo } from "./tpl";
export default { export default {
props: ["res"], props: ["res"],
title: "拼团", title: "拼团",
data() { data() {
return { 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./tpl.scss"; @import "./tpl.scss";
@import "./advertising.scss"; .join-box {
</style> 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>

61
pages/tabbar/home/template/tpl_integral.vue
View File

@@ -1,20 +1,30 @@
<template> <template>
<div class="layout"> <div class="layout" v-if="goodsList.length">
<div class="join-list"> <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-name">{{ res.list[0].title }}</div>
<div class="join-title-more">更多</div> <div class="join-title-more">更多</div>
</div> </div>
<div class="join-box"> <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"> <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>
<div class="item-price"> <div class="item-price">
<span class="price-text">20积分</span> <span class="price-text">{{ item.points != null ? item.points : 0 }}积分</span>
</div> </div>
<div class="item-line-through"> <div class="item-line-through" v-if="item.originalPrice">
<span class="price-text">30积分</span> <span class="price-text">￥{{ item.originalPrice }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -22,10 +32,33 @@
</div> </div>
</template> </template>
<script> <script>
// TODO 后续版本开发此功能 尽情期待 import * as API_Promotions from "@/api/promotions";
export default { export default {
title:"积分商品",
props: ["res"], 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -42,6 +75,7 @@ export default {
} }
.join-item { .join-item {
flex: 1; flex: 1;
text-align: center;
} }
.item-img { .item-img {
width: 75px; width: 75px;
@@ -60,13 +94,6 @@ export default {
color: #999; color: #999;
} }
} }
.item-position-tips {
position: absolute;
right: 0;
color: #fff;
font-size: 12px;
bottom: 0;
}
.join-title { .join-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -82,4 +109,4 @@ export default {
color: #999; color: #999;
} }
} }
</style> </style>

90
pages/tabbar/home/template/tpl_join_group.vue
View File

@@ -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>

105
pages/tabbar/home/template/tpl_spike.vue
View File

@@ -1,24 +1,30 @@
<template> <template>
<div class="layout"> <div class="layout" v-if="goodsList.length">
<div class="join-list"> <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-name">{{ res.list[0].title }}</div>
<div class="join-title-more">更多</div> <div class="join-title-more">更多</div>
</div> </div>
<div class="join-box"> <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"> <div class="item-img-box">
<img <u-image
class="item-img" class="item-img"
src="https://picsum.photos/id/268/200/200" width="150rpx"
alt height="150rpx"
:src="item.goodsImage || item.thumbnail"
/> />
</div> </div>
<div class="item-price"> <div class="item-price">
<span class="price-text">￥120.00</span> <span class="price-text">￥{{ item.price }}</span>
</div> </div>
<div class="item-line-through"> <div class="item-line-through">
<span class="price-text">￥190.00</span> <span class="price-text">￥{{ item.originalPrice }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -26,13 +32,88 @@
</div> </div>
</template> </template>
<script> <script>
// TODO 后续版本开发此功能 尽情期待 import * as API_Promotions from "@/api/promotions";
export default { export default {
props: ["res"], 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./tpl.scss"; @import "./tpl.scss";
@import './advertising.scss'; @import "./advertising.scss";
.join-box {
</style> 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
View 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>

644
pages/tabbar/home/views.vue
View File

@@ -1,332 +1,312 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<!-- uni 中不能使用 vue component 所以用if判断每个组件 --> <!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
<div v-for="(item, index) in pageData.list" :key="index"> <div v-for="(item, index) in pageData.list" :key="index">
<!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 --> <!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
<u-navbar <u-navbar
class="navbar" class="navbar"
v-if="item.type == 'search'" v-if="item.type == 'search'"
:auto-back="false" :auto-back="false"
:fixed="index === 1 ? false : true" :fixed="index === 1 ? false : true"
:placeholder="index === 1 ? false : true" :placeholder="index === 1 ? false : true"
left-icon="" left-icon=""
title="" title=""
bg-color="#ffffff" bg-color="#ffffff"
> >
<template #left> <template #left>
<view class="navbar-search-wrap" :style="searchBarStyle" @click.stop> <view class="navbar-search-wrap" :style="searchBarStyle" @click.stop>
<search :res="item.options" /> <search :res="item.options" />
</view> </view>
</template> </template>
<template #right> </u-navbar>
<view class="navbar-message" :style="messageIconStyle" @click="linkMsgDetail"> <carousel v-if="item.type == 'carousel'" :res="item.options" />
<image class="message-icon" src="/static/img/title.png" mode="aspectFit"></image> <titleLayout v-if="item.type == 'title'" :res="item.options" />
</view> <leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" />
</template> <leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
</u-navbar> <topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
<carousel v-if="item.type == 'carousel'" :res="item.options" /> <topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" />
<titleLayout v-if="item.type == 'title'" :res="item.options" /> <flexThree v-if="item.type == 'flexThree'" :res="item.options" />
<leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" /> <flexFive v-if="item.type == 'flexFive'" :res="item.options" />
<leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" /> <flexFour v-if="item.type == 'flexFour'" :res="item.options" />
<topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" /> <flexTwo v-if="item.type == 'flexTwo'" :res="item.options" />
<topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" /> <textPicture v-if="item.type == 'textPicture'" :res="item.options" />
<flexThree v-if="item.type == 'flexThree'" :res="item.options" /> <menuLayout v-if="item.type == 'menu'" :res="item.options" />
<flexFive v-if="item.type == 'flexFive'" :res="item.options" /> <flexOne v-if="item.type == 'flexOne'" :res="item.options" />
<flexFour v-if="item.type == 'flexFour'" :res="item.options" /> <goods :enableBottomLoad="enableLoad" v-if="item.type == 'goods'" :res="item.options" />
<flexTwo v-if="item.type == 'flexTwo'" :res="item.options" /> <group v-if="item.type == 'group'" :res="item.options" />
<textPicture v-if="item.type == 'textPicture'" :res="item.options" /> <notice v-if="item.type == 'notice'" :res="item.options" />
<menuLayout v-if="item.type == 'menu'" :res="item.options" /> <promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
<flexOne v-if="item.type == 'flexOne'" :res="item.options" /> <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
<goods :enableBottomLoad="enableLoad" v-if="item.type == 'goods'" :res="item.options" /> <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
<group v-if="item.type == 'group'" :res="item.options" /> <videoLayout v-if="item.type == 'video'" :res="item.options" />
<notice v-if="item.type == 'notice'" :res="item.options" /> </div>
<promotions v-if="item.type == 'promotionDetail'" :res="item.options" /> <fetchCoupon ref='coupon' />
<!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> --> <u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> --> </div>
<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> --> </template>
</div> <script>
<fetchCoupon ref='coupon' /> // 引用组件
<u-no-network @retry="init" @isConnected="isConnected"></u-no-network> import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
</div> import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
</template> 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"; //左二右一模块
<script> 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_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块 import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块 import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块 import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块 import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块 import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块 import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块 import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块 import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块 import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块 import tpl_video from "@/pages/tabbar/home/template/tpl_video"; //视频模块
import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块 import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板 // 结束引用组件
import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块 import { getFloorData } from "@/api/home"; //获取楼层装修接口
import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏 import permission from "@/js_sdk/wa-permission/permission.js"; //权限工具类
import tpl_group from "@/pages/tabbar/home/template/tpl_group"; // import config from "@/config/config";
import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
// 结束引用组件 import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
import { getFloorData } from "@/api/home"; //获取楼层装修接口 import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
import permission from "@/js_sdk/wa-permission/permission.js"; //权限工具类 import storage from "@/utils/storage.js";
import config from "@/config/config"; import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon'
// 与 tpl.scss $home-layout-padding 保持一致
import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块 const HOME_LAYOUT_PADDING_RPX = 16;
import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块 // import {receiveCoupons} from "@/api/members"
import storage from "@/utils/storage.js";
import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon' export default {
// 与 tpl.scss $home-layout-padding 保持一致 data () {
const HOME_LAYOUT_PADDING_RPX = 16; return {
// import {receiveCoupons} from "@/api/members" config,
storage,
export default { showCp:true,
data () { pageData: "", //楼层页面数据
return { isIos: "",
config, enableLoad: false, //触底加载 针对于商品模块
storage, capsuleInsetRight: 0,
showCp:true, searchBarWidth: 0,
pageData: "", //楼层页面数据 };
isIos: "", },
enableLoad: false, //触底加载 针对于商品模块 computed: {
capsuleInsetRight: 0, searchBarStyle() {
searchBarWidth: 0, if (this.searchBarWidth) {
}; return {
}, width: `${this.searchBarWidth}px`,
computed: { };
messageIconStyle() { }
if (!this.capsuleInsetRight) { return {
return {}; width: "100%",
} };
return { },
marginRight: `${this.capsuleInsetRight}px`, },
}; components: {
}, carousel: tpl_banner,
searchBarStyle() { titleLayout: tpl_title,
if (this.searchBarWidth) { leftOneRightTwo: tpl_left_one_right_two,
return { leftTwoRightOne: tpl_left_two_right_one,
width: `${this.searchBarWidth}px`, topOneBottomTwo: tpl_top_one_bottom_two,
}; topTwoBottomOne: tpl_top_two_bottom_one,
} flexThree: tpl_flex_three,
return { flexFive: tpl_flex_five,
width: '560rpx', flexFour: tpl_flex_four,
}; flexTwo: tpl_flex_two,
}, textPicture: tpl_text_picture,
}, menuLayout: tpl_menu,
components: { search: tpl_search,
carousel: tpl_banner, flexOne: tpl_flex_one,
titleLayout: tpl_title, goods: tpl_goods,
leftOneRightTwo: tpl_left_one_right_two, group: tpl_group,
leftTwoRightOne: tpl_left_two_right_one, notice: tpl_notice,
topOneBottomTwo: tpl_top_one_bottom_two, promotions: tpl_promotions,
topTwoBottomOne: tpl_top_two_bottom_one, videoLayout: tpl_video,
flexThree: tpl_flex_three, fetchCoupon
flexFive: tpl_flex_five, },
flexFour: tpl_flex_four,
flexTwo: tpl_flex_two, mounted () {
textPicture: tpl_text_picture, this.setCapsuleInset();
menuLayout: tpl_menu, this.init();
search: tpl_search, // #ifdef MP-WEIXIN
flexOne: tpl_flex_one, // 小程序默认分享
goods: tpl_goods, uni.showShareMenu({ withShareTicket: true });
group: tpl_group, // #endif
notice: tpl_notice,
promotions: tpl_promotions, },
fetchCoupon methods: {
}, setCapsuleInset() {
try {
mounted () { const { windowWidth } = uni.getWindowInfo();
this.setCapsuleInset(); const leftPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
this.init(); const rightPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 小程序默认分享 const menuButton = uni.getMenuButtonBoundingClientRect();
uni.showShareMenu({ withShareTicket: true }); this.capsuleInsetRight = windowWidth - menuButton.left;
// #endif this.searchBarWidth =
windowWidth - this.capsuleInsetRight - leftPadding;
}, // #endif
methods: { // #ifndef MP-WEIXIN
setCapsuleInset() { this.searchBarWidth = windowWidth - leftPadding - rightPadding;
// #ifdef MP-WEIXIN // #endif
try { } catch (e) {
const menuButton = uni.getMenuButtonBoundingClientRect(); this.capsuleInsetRight = 0;
const { windowWidth } = uni.getWindowInfo(); this.searchBarWidth = 0;
this.capsuleInsetRight = windowWidth - menuButton.left; }
const messageWidth = uni.upx2px(20); },
const leftPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX); fetchCoupon(){
const gap = uni.upx2px(0); this.$refs.coupon.firstGetAuto();
this.searchBarWidth = },
windowWidth - this.capsuleInsetRight - messageWidth - leftPadding - gap; /**
} catch (e) { * 实例化首页数据楼层
this.capsuleInsetRight = 90; */
this.searchBarWidth = 260; init () {
} this.pageData = "";
// #endif getFloorData().then((res) => {
}, if (res.data.success) {
linkMsgDetail() { const result = JSON.parse(res.data.result.pageData)
uni.navigateTo({ this.pageData = result;
url: "/pages/tabbar/home/title", if (result.list.length) {
}); // 如果最后一个装修模块是商品模块的话 默认启用自动加载
}, result.list[result.list.length - 1] ? result.list[result.list.length - 1].model == 'goods' ? this.enableLoad = true : '' : ''
fetchCoupon(){ }
this.$refs.coupon.firstGetAuto(); }
}, });
/** },
* 实例化首页数据楼层 // 是否有网络链接
*/ isConnected (val) {
init () { val ? this.init() : ''
this.pageData = ""; },
getFloorData().then((res) => {
if (res.data.success) { /**
const result = JSON.parse(res.data.result.pageData) * TODO 扫码功能后续还会后续增加
this.pageData = result; * 应该实现的功能目前计划有：
if (result.list.length) { * 扫描商品跳转商品页面
// 如果最后一个装修模块是商品模块的话 默认启用自动加载 * 扫描活动跳转活动页面
result.list[result.list.length - 1] ? result.list[result.list.length - 1].model == 'goods' ? this.enableLoad = true : '' : '' * 扫描二维码登录
} * 扫描其他站信息 弹出提示，返回首页。
} */
}); scanCode () {
}, uni.scanCode({
// 是否有网络链接 success: function (res) {
isConnected (val) { let path = encodeURIComponent(res.result);
val ? this.init() : ''
},
/** if (path != undefined && path.indexOf("QR_CODE_LOGIN_SESSION") == 0) {
* TODO 扫码功能后续还会后续增加 console.log(path)
* 应该实现的功能目前计划有： //app扫码登录
* 扫描商品跳转商品页面 uni.navigateTo({
* 扫描活动跳转活动页面 url: "/pages/passport/scannerCodeLoginConfirm?token=" + path
* 扫描二维码登录 });
* 扫描其他站信息 弹出提示，返回首页。 return;
*/ }
scanCode () {
uni.scanCode({
success: function (res) { // WX_CODE 为小程序码
let path = encodeURIComponent(res.result); if (res.scanType == "WX_CODE") {
console.log(res);
uni.navigateTo({
url: `/${res.path}`,
if (path != undefined && path.indexOf("QR_CODE_LOGIN_SESSION") == 0) { });
console.log(path) } else {
//app扫码登录 config.scanAuthNavigation.forEach((src) => {
uni.navigateTo({ if (res.result.indexOf(src) != -1) {
url: "/pages/passport/scannerCodeLoginConfirm?token=" + path uni.navigateTo({
}); url: `/${res.result.substring(src.length)}`,
return; });
} } else {
setTimeout(() => {
uni.navigateTo({
// WX_CODE 为小程序码 url: "/pages/tabbar/home/web-view?src=" + path,
if (res.scanType == "WX_CODE") { });
console.log(res); }, 100);
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(() => { tipsGetSettings () {
uni.navigateTo({ uni.showModal({
url: "/pages/tabbar/home/web-view?src=" + path, title: "提示",
}); content: "您已经关闭相机权限,去设置",
}, 100); success: function (res) {
} if (res.confirm) {
}); if (this.isIos) {
} plus.runtime.openURL("app-settings:");
}, } else {
}); permission.gotoAppPermissionSetting();
}, }
}
/** },
* 提示获取权限 });
*/ },
tipsGetSettings () {
uni.showModal({ /**
title: "提示", * 唤醒客户端扫码
content: "您已经关闭相机权限,去设置", * 没权限去申请权限，有权限获取扫码功能
success: function (res) { */
if (res.confirm) { async scan () {
if (this.isIos) { // #ifdef APP-PLUS
plus.runtime.openURL("app-settings:"); this.isIos = plus.os.name == "iOS";
} else { // 判断是否是Ios
permission.gotoAppPermissionSetting(); 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();
async scan () { }
// #ifdef APP-PLUS }
this.isIos = plus.os.name == "iOS"; } else {
// 判断是否是Ios /**
if (this.isIos) { * TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机 * TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
if (iosFirstCamera !== "false") { */
uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机 this.scanCode();
this.scanCode(); }
} else {
if (permission.judgeIosPermission("camera")) { // #endif
this.scanCode();
} else { // #ifdef MP-WEIXIN
// 没有权限提醒是否去申请权限 this.scanCode();
this.tipsGetSettings(); // #endif
} },
} },
} else { };
/** </script>
* TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
* TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢 <style scoped lang="scss">
*/ @import "@/pages/tabbar/home/template/tpl.scss";
this.scanCode();
} .navbar {
width: 100%;
// #endif
:deep(.u-navbar__content) {
// #ifdef MP-WEIXIN width: 100%;
this.scanCode(); }
// #endif
}, :deep(.u-navbar__content__left) {
}, flex: 1;
}; width: auto !important;
</script> max-width: 100%;
padding: 0 0 0 $home-layout-padding !important;
<style scoped lang="scss"> }
@import "@/pages/tabbar/home/template/tpl.scss"; }
.navbar { .navbar-search-wrap {
width: 100%; box-sizing: border-box;
flex: 1;
:deep(.u-navbar__content__left) { min-width: 0;
width: auto !important; }
padding: 0 0 0 $home-layout-padding !important; </style>
}
}
.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>

6
pages/tabbar/special/special.vue
View File

@@ -41,9 +41,9 @@
<group v-if="item.type == 'group'" :res="item.options" /> <group v-if="item.type == 'group'" :res="item.options" />
<notice v-if="item.type == 'notice'" :res="item.options" /> <notice v-if="item.type == 'notice'" :res="item.options" />
<promotions v-if="item.type == 'promotionDetail'" :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" /> --> <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> --> <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
<videoLayout v-if="item.type == 'video'" :res="item.options" />
</div> </div>
<u-no-network></u-no-network> <u-no-network></u-no-network>
</div> </div>
@@ -66,6 +66,7 @@ import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //
import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块 import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏 import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
import tpl_group from "@/pages/tabbar/home/template/tpl_group"; // 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 tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
// 结束引用组件 // 结束引用组件
import { toSpecial, getSpecial } from "@/api/home"; //获取楼层装修接口 import { toSpecial, getSpecial } from "@/api/home"; //获取楼层装修接口
@@ -102,7 +103,8 @@ export default {
goods: tpl_goods, goods: tpl_goods,
group: tpl_group, group: tpl_group,
notice: tpl_notice, notice: tpl_notice,
promotions: tpl_promotions promotions: tpl_promotions,
videoLayout: tpl_video
}, },
mounted() { mounted() {

12
pages/tabbar/user/utils/tool.vue
View File

@@ -19,10 +19,10 @@
<image class="interact-item-icon" src="/static/mine/feedback.png" mode=""></image> <image class="interact-item-icon" src="/static/mine/feedback.png" mode=""></image>
<view>我的评价</view> <view>我的评价</view>
</view> </view>
<!-- <view class="interact-item" @click="linkMsgDetail()"> <view class="interact-item" @click="linkMsgDetail()">
<image class="interact-item-icon" src="/static/mine/mycommit.png" mode=""></image> <image class="interact-item-icon" src="/static/mine/mycommit.png" mode=""></image>
<view>我的消息</view> <view>我的消息</view>
</view> --> </view>
<view class="interact-item" @click="navigateTo('/pages/mine/myCollect')"> <view class="interact-item" @click="navigateTo('/pages/mine/myCollect')">
@@ -181,9 +181,11 @@ export default {
}, },
linkMsgDetail(){ linkMsgDetail(){
uni.navigateTo({ if (this.tipsToLogin('normal')) {
url: `/pages/mine/im/list`, uni.navigateTo({
}); url: '/pages/tabbar/home/title',
});
}
}, },
distribution() { distribution() {