code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2025-12-17 16:05:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增部分注释优化一些代码

Browse Source
This commit is contained in:
lemon橪
2021-05-24 15:49:22 +08:00
parent dd0c7259e6
commit 3d74e3d907
28 changed files with 209 additions and 752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
pages/tabbar/home/advertise.vue
View File

@@ -1,185 +0,0 @@
<template>
<view class="content">
<view class="con" :style="{width: windowWidth + 'px',height: windowHeight + 'px' }"><image :src="imgSrc" mode="scaleToFill" > </image></view>
<view class="btn" id="timer">
<view id="info"> </view>
<view class="circleProgress_wrapper btn">
<view class="wrapper right"><view class="circleProgress rightcircle"></view></view>
<view class="wrapper left"><view class="circleProgress leftcircle"></view></view>
</view>
</view>
</view>
</template>
<script>
import { getAdvertisement } from '@/api/home.js';
function getRandom(start, end, fixed = 0) {
let differ = end - start;
let random = Math.random();
return (start + differ * random).toFixed(fixed);
}
export default {
data() {
return {
imgSrc: '',
windowWidth: 0,
windowHeight: 0
};
},
onLoad() {
const res = uni.getSystemInfoSync();
this.windowWidth = res.windowWidth;
this.windowHeight = res.windowHeight;
this.init();
},
methods: {
init() {
getAdvertisement().then(res => {
if (res.statusCode === 200) {
const ads = res.data[getRandom(0, res.data.length - 1)];
this.imgSrc = ads.pic_url;
console.warn(this.imgSrc);
}
});
}
}
};
</script>
<style lang="less" scoped>
.content {
width: 100%;
height: 100%;
.con {
display: flex;
align-items: center;
image {
width: 100%;
height: 100%;
}
}
}
#timer {
display: inline-block;
position: fixed;
top: 40px;
right: 10px;
}
#info {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
color: #ffffff;
font-size: 12px;
}
.circleProgress_wrapper {
width: 36px;
height: 36px;
position: relative;
}
.wrapper {
width: 18px;
height: 36px;
position: absolute;
top: 0;
overflow: hidden;
}
.right {
right: 0;
}
.left {
left: 0;
}
.circleProgress {
width: 32px;
height: 32px;
border: 2px solid #ffffff;
border-radius: 50%;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
}
.rightcircle {
border-top: 2px solid #03a9f4;
border-right: 2px solid #03a9f4;
right: 0;
-webkit-animation: circleProgressLoad_right 4s linear;
/*动画停留在最后一帧*/
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
.leftcircle {
border-bottom: 2px solid #03a9f4;
border-left: 2px solid #03a9f4;
left: 0;
-webkit-animation: circleProgressLoad_left 4s linear;
/*动画停留在最后一帧*/
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
@-webkit-keyframes circleProgressLoad_right {
0% {
border-top: 2px solid #03a9f4;
border-right: 2px solid #03a9f4;
-webkit-transform: rotate(45deg);
}
50% {
border-top: 2px solid #03a9f4;
border-right: 2px solid #03a9f4;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
-webkit-transform: rotate(225deg);
}
100% {
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left {
0% {
border-bottom: 2px solid #03a9f4;
border-left: 2px solid #03a9f4;
-webkit-transform: rotate(45deg);
}
50% {
border-bottom: 2px solid #03a9f4;
border-left: 2px solid #03a9f4;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
-webkit-transform: rotate(45deg);
}
100% {
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
-webkit-transform: rotate(225deg);
}
}
</style>

118
pages/tabbar/home/agreement.vue
View File

@@ -1,118 +0,0 @@
<template>
<view class="container">
<view class="status_bar"><!-- 这里是状态栏 --></view>
<view class="header">{{ agreement.article_name }}</view>
<view class="u-update-content">
<view class="about-us"><view v-html="agreement.content"></view></view>
</view>
<view class="bottom-btn">
<view class="disagree-btn">不同意</view>
<view class="agree-btn" @click="closeModal">同意</view>
</view>
<u-loading mode="flower" size="100" :show="loading"></u-loading>
</view>
</template>
<script>
0;
import { getArticleDetail } from '@/api/article.js';
export default {
data() {
return {
show: true,
loading: true,
agreement: {}
};
},
onReady() {
this.show = true;
},
onLoad(options) {
this.init();
},
methods: {
init() {
getArticleDetail(111).then(res => {
if (res.statusCode === 200) {
this.agreement = res.data;
this.loading = false;
}
});
},
cancel() {
this.closeModal();
},
confirm() {
this.closeModal();
},
closeModal() {
uni.setStorage({
key: 'launchFlag',
data: true
});
uni.switchTab({
url: '/pages/tabbar/home/index'
});
}
}
};
</script>
<style scoped lang="scss">
.container {
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
}
.status_bar {
position: fixed;
top: 0px;
height: var(--status-bar-height);
width: 100%;
background: #1abc9c;
}
.header {
width: 100%;
margin-top: var(--status-bar-height);
display: flex;
justify-content: center;
align-items: center;
font-size: 34rpx;
font-weight: 400;
height: 100rpx;
}
.u-full-content {
background-color: #00c777;
}
.bottom-btn {
position: fixed;
z-index: 999;
bottom: 0px;
left: 0px;
width: 100%;
height: 100rpx;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
view {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.agree-btn {
background-color: #1abc9c;
color: #ffffff;
}
}
.u-update-content {
padding: 10rpx;
font-size: 26rpx;
}
</style>

1
pages/tabbar/home/index.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="wrapper">
<!-- 楼层装修组件 -->
<tpl />
</div>
</template>

3
pages/tabbar/home/template/tpl_flex_five.vue
View File

@@ -17,8 +17,7 @@ export default {
modelNavigateTo,
};
},
mounted() {
},
mounted() {},
};
</script>
<style lang="scss" scoped>

20
pages/tabbar/home/template/tpl_flex_four.vue
View File

@@ -1,27 +1,23 @@
<template>
<div class="layout">
<u-image height="175rpx" width="175rpx" @click="modelNavigateTo(item)" class="image-mode" :src="item.img" v-for="(item,index) in res.list" :key="index" >
<u-loading slot="loading"></u-loading>
</u-image>
<u-image height="175rpx" width="175rpx" @click="modelNavigateTo(item)" class="image-mode" :src="item.img" v-for="(item,index) in res.list" :key="index">
<u-loading slot="loading"></u-loading>
</u-image>
</div>
</template>
<script>
import {modelNavigateTo} from './tpl'
import { modelNavigateTo } from "./tpl";
export default {
title: "四列单行图片模块",
props: ["res"],
data () {
data() {
return {
modelNavigateTo,
}
};
},
mounted() {
}
mounted() {},
};
</script>
<style lang="scss" scoped>
@@ -33,7 +29,7 @@ export default {
justify-content: center;
background-size: cover;
}
img{
img {
width: 84px;
}
</style>

1
pages/tabbar/home/template/tpl_flex_one.vue
View File

@@ -9,6 +9,7 @@
import { modelNavigateTo } from "./tpl";
export default {
title:"单行图片模块",
data() {
return {
modelNavigateTo,

30
pages/tabbar/home/template/tpl_goods.vue
View File

@@ -1,31 +1,18 @@
<template>
<div class="layout">
<div class="goods-cell-title">
<div
class="goods-item-title"
:class="{ 'selected-title': selected.index == index }"
@click="handleClickTitle(title, index)"
v-for="(title, index) in res.list[0].titleWay"
:key="index"
>
<div class="goods-item-title" :class="{ 'selected-title': selected.index == index }" @click="handleClickTitle(title, index)" v-for="(title, index) in res.list[0].titleWay" :key="index">
<h4 class="h4">{{ title.title }}</h4>
<div>{{ title.desc }}</div>
</div>
</div>
<div class="goods-list">
<div
v-if="selected.val == item.type"
@click="handleClick(item)"
class="goods-item"
v-for="(item, item_index) in res.list[0].listWay"
:key="item_index"
>
<div v-if="selected.val == item.type" @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in res.list[0].listWay" :key="item_index">
<div class="goods-img">
<u-image :src="item.img" height="350rpx" mode="aspectFit" width="100%">
<u-loading slot="loading"></u-loading
></u-image>
<u-image :src="item.img" height="350rpx" mode="aspectFit" width="100%">
<u-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="goods-desc">
<div class="goods-title">
@@ -42,6 +29,7 @@
<script>
import uImage from "@/uview-ui/components/u-image/u-image.vue";
export default {
title: "商品分类以及商品",
components: { uImage },
data() {
return {
@@ -55,7 +43,6 @@ export default {
mounted() {},
methods: {
handleClick(item) {
uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
});
@@ -102,7 +89,6 @@ $w_94: 94%;
> h4 {
font-size: 32rpx;
}
> div {
@@ -130,7 +116,7 @@ $w_94: 94%;
margin: 0 auto;
// width: 158px;
width: $w_94;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;

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

@@ -3,18 +3,12 @@
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
</div>
<div class="join-box">
<div class="join-item" @click="modelNavigateTo(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
/>
<img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
</div>
<div class="item-price">
<span>￥120.00</span>
@@ -28,19 +22,19 @@
</div>
</template>
<script>
import {modelNavigateTo} from './tpl'
// TODO 后续版本开发此功能 尽情期待
import { modelNavigateTo } from "./tpl";
export default {
props: ["res"],
data () {
title: "拼团",
data() {
return {
modelNavigateTo,
}
};
},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
@import './advertising.scss';
@import "./advertising.scss";
</style>

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

@@ -3,18 +3,12 @@
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</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
/>
<img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
</div>
<div class="item-price">
<span>20积分</span>
@@ -28,7 +22,9 @@
</div>
</template>
<script>
// TODO 后续版本开发此功能 尽情期待
export default {
title:"积分商品",
props: ["res"],
};
</script>

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

@@ -3,7 +3,6 @@
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
</div>
<div class="join-box">
@@ -28,8 +27,10 @@
</div>
</template>
<script>
// TODO 后续版本开发此功能 尽情期待
export default {
props: ["res"],
title:"团购"
};
</script>
<style lang="scss" scoped>

1
pages/tabbar/home/template/tpl_left_one_right_two.vue
View File

@@ -20,7 +20,6 @@
</div>
</div>
</template>
<script>
import {modelNavigateTo} from './tpl'
export default {

1
pages/tabbar/home/template/tpl_menu.vue
View File

@@ -20,6 +20,7 @@
<script>
import {modelNavigateTo} from './tpl'
export default {
title:"五列菜单",
props: ["res"],
data () {
return {

1
pages/tabbar/home/template/tpl_search.vue
View File

@@ -8,6 +8,7 @@
</template>
<script>
export default {
title:"搜索栏",
props: ["res"],
methods: {
handleSearch() {

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

@@ -3,13 +3,11 @@
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</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"
@@ -28,6 +26,7 @@
</div>
</template>
<script>
// TODO 后续版本开发此功能 尽情期待
export default {
props: ["res"],
};

78
pages/tabbar/home/template/tpl_title.vue
View File

@@ -1,51 +1,47 @@
<template>
<div class="layout">
<div class="background">
<div class="title" :style="{ color: res.list[0].color }">
{{ res.list[0].title }}
</div>
</div>
</div>
<div class="layout">
<div class="background">
<div class="title" :style="{ color: res.list[0].color }">
{{ res.list[0].title }}
</div>
</div>
</div>
</template>
<script>
export default {
title: "标题栏",
props: ["res"],
mounted() {
},
};
export default {
title: "标题栏",
props: ["res"],
mounted() {},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
@import "./tpl.scss";
.background {
background: url("/static/title.png") no-repeat;
position: absolute;
z-index: 2;
width: 100%;
height: 84rpx;
background-position-x: center;
background-position-y: center;
background-size: cover;
}
.background {
background: url("/static/title.png") no-repeat;
position: absolute;
z-index: 2;
width: 100%;
height: 84rpx;
background-position-x: center;
background-position-y: center;
background-size: cover;
}
.layout {
text-align: center;
position: relative;
height: 84rpx;
display: flex;
align-items: center;
justify-content: center;
.layout {
text-align: center;
position: relative;
height: 84rpx;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
}
background: #ffffff;
}
.title {
line-height: 84rpx;
font-size: 30rpx;
font-weight: bold;
}
.title {
line-height: 84rpx;
font-size: 30rpx;
font-weight: bold;
}
</style>

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

@@ -2,7 +2,8 @@
<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'" :is-back="false">
<!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
<u-navbar class="navbar" v-if="item.type == 'search'" :is-back="false" :is-fixed="index ===1 ? false : true">
<search style="width:100%" :res="item.options" />
<!-- #ifndef H5 -->
<!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
@@ -23,12 +24,13 @@
<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" />
<joinGroup v-if="item.type == 'joinGroup'" :res="item.options" />
<flexOne v-if="item.type == 'flexOne'" :res="item.options" />
<goods v-if="item.type == 'goods'" :res="item.options" />
<integral v-if="item.type == 'integral'" :res="item.options" />
<spike v-if="item.type == 'spike'" :res="item.options" />
<group v-if="item.type == 'group'" :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>
<u-no-network></u-no-network>
</div>
@@ -36,34 +38,35 @@
<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_join_group from "@/pages/tabbar/home/template/tpl_join_group";
import tpl_integral from "@/pages/tabbar/home/template/tpl_integral";
import tpl_spike from "@/pages/tabbar/home/template/tpl_spike";
import tpl_group from "@/pages/tabbar/home/template/tpl_group";
import tpl_goods from "@/pages/tabbar/home/template/tpl_goods";
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 { getFloorData } from "@/api/home"; //获取楼层装修接口
import permision from "@/js_sdk/wa-permission/permission.js"; //权限工具类
// TODO 后续开发
// import tpl_join_group from "@/pages/tabbar/home/template/tpl_join_group";
// import tpl_integral from "@/pages/tabbar/home/template/tpl_integral";
// import tpl_spike from "@/pages/tabbar/home/template/tpl_spike";
import { modelNavigateTo } from "./template/tpl.js"; //跳转路径
import permision from "@/js_sdk/wa-permission/permission.js"; //权限
export default {
data() {
return {
pageData: "",
pageData: "", //楼层页面数据
};
},
components: {
@@ -80,17 +83,15 @@ export default {
textPicture: tpl_text_picture,
menuLayout: tpl_menu,
search: tpl_search,
joinGroup: tpl_join_group,
flexOne: tpl_flex_one,
goods: tpl_goods,
integral: tpl_integral,
spike: tpl_spike,
group: tpl_group,
// spike: tpl_spike,
// joinGroup: tpl_join_group,
// integral: tpl_integral,
},
mounted() {
this.init();
},
methods: {
@@ -110,11 +111,12 @@ export default {
* 没权限去申请权限，有权限获取扫码功能
*/
scan() {
if (permision.judgeIosPermission("camera")) {
uni.scanCode({
success: function (res) {
let path = encodeURIComponent(res.result);
// TODO 扫码功能后续还会后续增加
// 扫码成功后跳转到webview页面
setTimeout(() => {
uni.navigateTo({
url: "/pages/tabbar/home/web-view?src=" + path,
@@ -123,6 +125,7 @@ export default {
},
});
} else {
// 没有权限提醒是否去申请权限
uni.showModal({
title: "提示",
content: "您已经关闭相机权限,去设置",