Authored by 肖亚东

1、最新活动和单张banner图组件开发 2、首页品类、品牌修改以及tabbar修改 — review by 黄敬囿

Showing 45 changed files with 196 additions and 37 deletions
... ... @@ -29,7 +29,15 @@ App({
},
},
onLaunch: function () {
let res = tt.getSystemInfoSync();
if (!res.screenHeight) {
res.screenHeight = res.windowHeight;
}
if (!res.screenWidth) {
res.screenWidth = res.windowWidth;
}
this.globalData.systemInfo = res;
},
getUid: function() {
let uid = 0;//this.globalData.userInfo.uid;
... ...
... ... @@ -19,23 +19,23 @@
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "images/nav_home_n@3x.png",
"selectedIconPath": "images/nav_home_h@3x.png",
"iconPath": "images/tabbar_home_n@2x.png",
"selectedIconPath": "images/tabbar_home_h@2x.png",
"text": "首页"
}, {
"pagePath": "pages/category/category",
"iconPath": "images/nav_fl_n@3x.png",
"selectedIconPath": "images/nav_fl_h@3x.png",
"iconPath": "images/tabbar_bl_n@3x.png",
"selectedIconPath": "images/tabbar_bl_h@3x.png",
"text": "品类"
}, {
"pagePath": "pages/shopCart/shopCart",
"iconPath": "images/nav_gwc_n@3x.png",
"selectedIconPath": "images/nav_gwc_h@3x.png",
"iconPath": "images/tabbar_gwc_n@2x.png",
"selectedIconPath": "images/tabbar_gwc_h@2x.png",
"text": "购物车"
}, {
"pagePath": "pages/userCenter/userCenter",
"iconPath": "images/nav_mine_h@3x.png",
"selectedIconPath": "images/nav_mine_h@3x.png",
"iconPath": "images/tabbar_mine_n@2x.png",
"selectedIconPath": "images/tabbar_mine_h@2x.png",
"text": "我的"
}]
}
... ...
Component({
properties: {
categoryList: {
type: Array,
value: []
},
},
data: {
itemWidth: 93,
imageHeight: 103,
},
attached: function () {
try {
let systemInfo = tt.getSystemInfoSync();
let windowWidth = systemInfo.windowWidth;
let itemWidth = (windowWidth - 3)/4;
let imageHeight = (windowWidth - 3)/4 + 10;
this.setData({
itemWidth,
imageHeight,
})
} catch(e) {
console.log("home-hot-category error: " + e.message)
}
},
methods: {
}
})
\ No newline at end of file
... ...
<view class="catgoryContainer">
<block wx:for="{{categoryList}}" wx:key="{{index}}">
<view class="category" bindtap="jumpByRule" style="width: {{(750 - 3)/4}}rpx;border-right:{{index % 4 == 3 ? '0rpx' : '1rpx #dddddd solid;'}}"
<view class="category" bindtap="jumpByRule"
style="width: {{itemWidth}}px;border-right:{{index % 4 == 3 ? '0px' : '1px #dddddd solid;'}}"
data-jump_rule="{{item.url}}" data-url="{{item.url}}"
data-index="{{index}}"data-f_id="{{f_id}}"
data-f_index='{{f_index}}' data-f_inindex='{{index}}'
data-f_name='{{f_name}}'>
<image class="categoryImage" src="{{item.src}}"
style="height: {{(windowWidth-3)/4 + 10}}rpx;" mode="aspectFill"/>
style="height: {{imageHeight}}px;"
mode="aspectFill"/>
</view>
</block>
</view>
\ No newline at end of file
... ...
Component({
properties: {
categoryList: {
activityList: {
type: Array,
value: []
}
},
data: {
windowWidth: 750
},
methods: {
... ...
{
"component": true
}
\ No newline at end of file
... ...
<view class="activityContainer">
<block wx:for="{{activityList}}" wx:key="{{index}}">
<view class="activity" bindtap="jumpByRule"
data-jump_rule="{{item.url}}" data-url="{{item.url}}"
data-index="{{index}}"data-f_id="{{f_id}}"
data-f_index='{{f_index}}' data-f_inindex='{{index}}'
data-f_name='{{f_name}}'>
<image class="activityImage" src="{{item.src}}"
mode="aspectFill"/>
</view>
</block>
</view>
\ No newline at end of file
... ...
.activityContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: white;
padding: 30rpx 30rpx 0 0;
}
.activity {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 30rpx;
margin-bottom: 30rpx;
width: 330rpx;
height: 192rpx;
}
.activityImage {
width: 100%;
}
\ No newline at end of file
... ...
Component({
properties: {
data: {
type: null,
}
},
data: {
},
methods: {
}
})
\ No newline at end of file
... ...
{
"component": true
}
\ No newline at end of file
... ...
<view class="singleImgContainer">
<image src="{{data.src}}" class='singleImg' mode="aspectFill"
data-url="{{data.url}}" data-src="{{data.src}}" data-title="{{data.title}}"
data-jump_rule="{{data.url}}" data-type="go.list"
bindtap="jumpByRule" data-f_id="{{f_id}}" data-f_index='{{f_index}}'
data-f_inindex='{{0}}' data-f_name='{{f_name}}'
data-f_name='{{f_name}}'></image>
</view>
\ No newline at end of file
... ...
.singleImgContainer {
display: flex;
flex-direction: row;
align-items: center;
width: 750rpx;
height: 234rpx;
}
.singleImg {
width: 100%;
height: 100%;
}
\ No newline at end of file
... ...
{
"systemParams": "darwin-x64-64",
"modulesFolders": [],
"flags": [],
"linkedModules": [],
"topLevelPatterns": [],
"lockfileEntries": {},
"files": [],
"artifacts": {}
}
\ No newline at end of file
... ...
const app = getApp()
//获取应用实例
let app = getApp()
const windowWidth = app.globalData.systemInfo.windowWidth;
const windowHeight = app.globalData.systemInfo.windowHeight;
const pixelRatio = app.globalData.systemInfo.pixelRatio;
Page({
data: {
'bannerList': [
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/21/13/01028381b6f5db69fdbebba95f3aade7bc.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'}
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/14/17/01e5af09eaec1c1d1e1c920586e8127489.jpg'}
],
'categoryList': [
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
... ... @@ -22,14 +27,21 @@ Page({
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'}
],
'brandList':[
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'}
]
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'}
],
'activityList': [
{'src': 'http://img13.static.yhbimg.com/article/2018/11/21/18/02a7e5be8e9c6e85492fa61d1cb57f913c.jpg'},
{'src': 'http://img13.static.yhbimg.com/article/2018/11/21/18/02a7e5be8e9c6e85492fa61d1cb57f913c.jpg'},
{'src': 'http://img13.static.yhbimg.com/article/2018/11/21/18/02a7e5be8e9c6e85492fa61d1cb57f913c.jpg'},
{'src': 'http://img13.static.yhbimg.com/article/2018/11/21/18/02a7e5be8e9c6e85492fa61d1cb57f913c.jpg'}
],
'singleImage': 'http://img10.static.yhbimg.com/yhb-img01/2018/06/20/13/01b8a424ad754cf867b0bbe8d66e833300.jpg'
},
onLoad: function () {
... ...
{
"usingComponents": {
"home-banner": "../../components/home-banner/home-banner",
"home-hot-category": "../../components/home-hot-category/home-hot-category",
"home-brand": "../../components/home-brand/home-brand"
"home-banner": "../../components/home/home-banner/home-banner",
"home-hot-category": "../../components/home/home-hot-category/home-hot-category",
"home-brand": "../../components/home/home-brand/home-brand",
"home-new-activity": "../../components/home/home-new-activity/home-new-activity",
"home-single-image": "../../components/home/home-single-image/home-single-image"
}
}
... ...
<template name='tipTitle'>
<view class='titleContainer'
style="border-bottom:{{no_line?'0.5rpx solid #ffffff':'0.5rpx solid #e0e0e0'}}">
<view class='titleLine'></view>
<view class='titleDesc'>{{desc}}</view>
<view class='titleMore' wx:if='{{more_url?true:false}}'
data-jump_rule="{{more_url}}" bindtap="jumpByRule">
<view class='graySpace'></view>
<view class='titleView'>
<view class='titleLine'></view>
<view class='titleDesc'>{{desc}}</view>
<view class='titleMore' wx:if='{{more_url?true:false}}'
data-jump_rule="{{more_url}}" bindtap="jumpByRule">
<image class="titleMoreIm" src="../../images/more_ic@2x.png"></image>
</view>
</view>
</view>
</template>
<scroll-view scroll-y="true" class="mainContainer">
<home-banner banner-list="{{bannerList}}"></home-banner>
<template is='tipTitle' data="{{desc:'热门品类'}}"/>
<template is='tipTitle' data="{{desc:'热门品类', no_line: 'true'}}"/>
<home-hot-category category-list="{{categoryList}}"></home-hot-category>
<template is='tipTitle' data="{{desc:'潮流品牌'}}"/>
<home-brand brand-list="{{brandList}}"></home-brand>
<home-brand brand-list="{{brandList}}"></home-brand>
<template is='tipTitle' data="{{desc:'最新活动'}}"/>
<home-new-activity activity-list="{{activityList}}"></home-new-activity>
<template is='tipTitle' data="{{desc:'精彩活动'}}"/>
<home-single-image data="{{src:singleImage}}"></home-single-image>
</scroll-view>
... ...
.mainContainer {
background-color: '#F0F0F0';
}
.titleContainer{
.titleContainer {
display: flex;
flex-direction: column;
height: 100rpx;
}
.graySpace {
height: 20rpx;
background-color: rgba(240,240,240,1);
}
.titleView{
background-color: white;
display: flex;
flex-direction: row;
... ... @@ -13,7 +19,7 @@
width: 4rpx;
height: 30rpx;
background-color: #444444;
margin-left: 20rpx;
margin-left: 30rpx;
}
.titleDesc{
flex: 1;
... ... @@ -21,7 +27,7 @@
color: #444444;
font-family: PingFang SC;
font-size:30rpx;
margin-left: 16rpx;
margin-left: 20rpx;
font-weight: 600;
/* line-height: 2.75; */
}
... ...
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
... ...