abu/wzj-boot
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页调教完毕

Browse Source
This commit is contained in:
mactj 2021-01-15 23:31:44 +08:00
parent 62aaf33a37
commit da9422382a
5 changed files with 79 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
mini-app/src/components/mall/tab/mall-home.wpy
View File

@ -23,22 +23,32 @@
}
.menu-desc {
border: #cccccc 1px solid;
border: #fff 1px solid;
border-radius: 20px;
width: 250rpx;
width: 270rpx;
height: 60px;
box-shadow: 4px 4px 10px #cccccc;
background-image: url("https://img.yzcdn.cn/vant/cat.jpeg");
padding: 15px;
background-color: #ffffff;
padding: 10px;
display: flex;
flex-direction: column;
font-weight: bold;
}
.grid-body {
border: #fff 1px solid;
border-radius: 20px;
width: 700rpx;
margin-top: 20px;
background-color: white;
box-shadow: 4px 4px 10px #eeeeee;
}
.menu-desc-text {
margin-top: 5px;
font-size: 14px;
color: coral;
font-size: 12px;
color: #999;
display: flex;
}
@ -68,7 +78,7 @@
</style>
<template>
<div>
<div class="container">
<image class="header-image" :src="imageDefine.HOME_TITLE_IMAGE" />
<div class="user-banner" />
@ -80,43 +90,61 @@
<van-col offset="1" span="10">
<div class="fxc" style="display: flex;flex-direction: column;">
<span>{{user.userInfo.nickName}}</span>
<span>{{user.company}}</span>
<span>{{user.mobile}}</span>
</div>
</van-col>
<van-col offset="1" span="6">
<van-button round type="info">查看会籍</van-button>
<van-col offset="1" span="7">
<van-button round style="height: 25px;" size="small" plain color="#AC1630">
<van-icon name="shopping-cart-o" color="#AC1630" />
<span style="margin-left: 5px;color: #333333;">购物车</span>
</van-button>
</van-col>
</van-row>
<van-row style="margin-top: 20px;">
<van-col offset="1" span="11">
<div class="menu-desc fxc">
<span>润德庄园</span>
<span class="menu-desc-text">万亩有机生态园</span>
<div class="menu-desc" @tap="onNavItem(navDefine.HOME_MENU1)">
<div class="fxc">
<span style="font-size: 18px;">酒庄介绍</span>
<span class="menu-desc-text">完美酿造工艺</span>
</div>
<van-image style="margin-left: 10px;" width="40px" height="40px" :src="navDefine.HOME_MENU1.image" />
</div>
</van-col>
<van-col offset="1" span="11">
<div class="menu-desc fxc">
<span>了解产品</span>
<span class="menu-desc-text">新年有机新品</span>
<div class="menu-desc" @tap="onNavItem(navDefine.HOME_MENU2)">
<div class="fxc">
<span>购买庄酒</span>
<span class="menu-desc-text">限量年份套装</span>
</div>
<van-image style="margin-left: 10px;" width="40px" height="40px" :src="navDefine.HOME_MENU2.image" />
</div>
</van-col>
</van-row>
<van-grid column-num="4" border="{{ false }}" style="margin-top: 15px;">
<van-grid-item use-slot v-for=" (item, index) in navDefine.HOME_MENU_LIST">
<div class="grid-body">
<van-grid column-num="3" border="{{ false }}" style="margin-top: 15px;">
<van-grid-item use-slot v-for=" (item, index) in navDefine.HOME_MENU_LIST" @tap="onNavItem(item)">
<van-image round width="120rpx" height="120rpx" :src="item.icon" />
<span>{{item.name}} </span>
</van-grid-item>
</van-grid>
</div>
<van-image width="100%" height="60px" :src="navDefine.HOME_BANNER.image" style="margin-top: 15px;" />
<span v-if="columnRecord.length > 0" style="margin:15px 0;font-weight: bold;">热门活动</span>
<span v-if="columnRecord.length > 0" style="margin:15px 0;font-weight: bold;">热门专题</span>
<van-image width="100%" height="60px" :src="navDefine.HOME_BANNER.image" />
<span v-if="columnRecord.length > 0" style="margin:15px 0;font-weight: bold;">每日精选</span>
<div class="column-record-item" v-for="(item, index) in columnRecord">
<van-image width="100%" height="60px" :src="item.image" />
@ -136,10 +164,12 @@
import wepy from '@wepy/core'
import store from '@/store'
import { mapActions, mapState } from '@wepy/x'
import defaultMix from '../../../mixins/defaultMix'
wepy.component({
store,
hooks: {},
mixins: [defaultMix],
data: {
columnRecord: [
{

5
mini-app/src/mixins/defaultMix.js
View File

@ -6,8 +6,9 @@ export default {
},
methods: {
navNext (url) {
appManager.navigateTo(url)
onNavItem (item) {
console.log(item)
// appManager.navigateTo(item.path)
},
navBack() {
wx.navigateBack()

8
mini-app/src/pages/mall/index.wpy
View File

@ -41,7 +41,7 @@ module.exports.getTime = getTime;
mode="aspectFit"
class="tab-bar-icon"
/>
自定义
首页
</van-tabbar-item>
<van-tabbar-item info="3">
<image
@ -56,7 +56,7 @@ module.exports.getTime = getTime;
mode="aspectFit"
class="tab-bar-icon"
/>
自定义
福利购
</van-tabbar-item>
<van-tabbar-item info="3">
<image
@ -71,7 +71,7 @@ module.exports.getTime = getTime;
mode="aspectFit"
class="tab-bar-icon"
/>
自定义
紫环会
</van-tabbar-item>
<van-tabbar-item info="3">
<image
@ -86,7 +86,7 @@ module.exports.getTime = getTime;
mode="aspectFit"
class="tab-bar-icon"
/>
自定义
我的
</van-tabbar-item>
</van-tabbar>
<mall-home v-if="pageIndex === 0" />

21
mini-app/src/store/constant/nav/home.js
View File

@ -1,26 +1,31 @@
import { imgbaseUrl } from '../imageDefine'
export const homeMenuList = [
{
name: '新品速递',
name: '产品追溯',
icon: imgbaseUrl + 'doctor.png',
path: ''
}, {
name: '产品追溯',
},
{
name: '新品推荐',
icon: imgbaseUrl + 'doctor.png',
path: ''
}, {
name: '视频直播',
icon: imgbaseUrl + 'doctor.png',
path: ''
}, {
name: '润德杞友',
icon: imgbaseUrl + 'doctor.png',
path: ''
}
]
export const homeBanner = {
image: imgbaseUrl + 'doctor.png',
path: ''
}
export const menu1 = {
image: imgbaseUrl + 'doctor.png',
path: ''
}
export const menu2 = {
image: imgbaseUrl + 'doctor.png',
path: ''
}

6
mini-app/src/store/constant/navDefine.js
View File

@ -1,8 +1,10 @@
import { homeBanner, homeMenuList } from './nav/home'
import { homeBanner, homeMenuList, menu1, menu2 } from './nav/home'
export const navDefine = {
HOME_MENU_LIST: homeMenuList,
HOME_BANNER: homeBanner
HOME_BANNER: homeBanner,
HOME_MENU1: menu1,
HOME_MENU2: menu2
}