Skip to content

X
xiaoya-agent-program
Commit ea14b273 authored by 18868195926's avatar 18868195926
Browse files
Options

feat: 新增首页和首页门店列表搜索结果页

parent 1715b0af
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 694 additions and 127 deletions
src/app.jsx
View file @ ea14b273
import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/redux'
import Index from './pages/home'
import Index from './pages/index'
import save from './actions/nav'
import configStore from './store'
......@@ -24,6 +24,7 @@ class App extends Component {
let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
Taro.getSystemInfo({
success: res => {
console.log('getSystemInfo...', res)
let globalData = {}
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
......@@ -31,6 +32,7 @@ class App extends Component {
globalData.navHeight = navHeight;
globalData.navTop = navTop;
globalData.windowHeight = res.windowHeight;
globalData.screenHeight = res.screenHeight
globalData.navRight = res.windowWidth - menuButtonObject.right;
store.dispatch(save(globalData))
},
......@@ -41,11 +43,12 @@ class App extends Component {
}
config = {
pages: [
'pages/home/index',
'pages/index/index',
'pages/home/index',
'pages/citySelect/index',
'pages/storeDetail/index',
'pages/mine/index'
'pages/mine/index',
'pages/storeList/index'
],
permission: {
"scope.userLocation": {
......@@ -59,21 +62,25 @@ class App extends Component {
navigationBarTextStyle: 'black',
navigationStyle: 'custom',
},
// tabBar: {
// "color": "#a9b7b7",
// "selectedColor": "#11cd6e",
// "borderStyle": "black" ,
// "list": [
// {
// "pagePath": "pages/index/index",
// "text": "首页"
// },
// {
// "pagePath": "pages/mine/index",
// "text": "我的"
// }
// ]
// }
tabBar: {
"color":"#404040",
"selectedColor": "#096DD9",
"borderStyle": "black" ,
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "assets/img/home.png",
"selectedIconPath": "assets/img/home-active.png",
"text": "首页"
},
{
"pagePath": "pages/mine/index",
"iconPath": "assets/img/user.png",
"selectedIconPath": "assets/img/user-active.png",
"text": "我的"
}
]
}
}
......
src/components/LoginAuth/index.jsx 0 → 100644
View file @ ea14b273
import Taro, {Component} from '@tarojs/taro';
import {Button, View} from '@tarojs/components';
import {connect} from '@tarojs/redux';
import {setUserInfo} from '@/actions/user'
import './index.scss';
@connect(({ user }) => ({
user
}), (dispatch) => ({
onSetUserInfo (data) {
dispatch(setUserInfo(data || {}))
},
}))
class Index extends Component {
//微信授权处理
handleGetPhoneNumber = (evt) => {
this.getCode((code) => {
if (evt.detail.errMsg === 'getPhoneNumber:ok') {
this.handleSuccess({
authCode: code,
encryptedData: evt.detail.encryptedData,
iv: evt.detail.iv
})
} else {
this.handleSuccess({authCode: code})
}
});
}
//获取code
getCode = (callback) => {
Taro.login({})
.then(res => {
console.log('获取登录凭证', res)
callback &&
typeof callback === 'function' && callback(res.code);
})
}
//无论手机授权是否成功
handleSuccess(data) {
console.log('拿到传给后端获取手机号参数', data)
let {user, onSuccess, onSetUserInfo} = this.props;
if (user.hasPhone == 1) {
onSuccess && onSuccess();
return;
}
onSetUserInfo({
hasPhone: 1,
})
// userAPI.login(data)
// .then(res => {
// let user = res.data || {};
// // user.hasPhone = 1;
// store.dispatch(setUserInfo(user));
// if (user.hasPhone != 1) return;
// onSuccess && onSuccess();
// })
}
//无需手机号处理
handleClick = () => {
let {user, onSuccess} = this.props;
if (user && user.hasPhone == 1) {
onSuccess && onSuccess();
return;
}
this.getCode((code) => {
this.handleSuccess({authCode: code});
})
}
render() {
let hasPhone = this.props.user && (this.props.user.hasPhone == 1);
let clsName = `${this.props.className}`
let hoverCls = 'hover-cls';
if (!!hasPhone) {
return <Button onClick={this.handleClick} className={clsName} hoverClass={hoverCls}>
{this.props.children}
</Button>
}
return (
<Button
className={clsName}
openType='getPhoneNumber'
onGetPhoneNumber={this.handleGetPhoneNumber}
>
{this.props.children}
</Button>
)
}
}
export default Index;
\ No newline at end of file
src/components/LoginAuth/index.scss 0 → 100644
View file @ ea14b273
.coupon-btn {
position: absolute;
right: 0;
top: 0;
width: 112px;
height: 140px;
line-height: 140px;
text-align: center;
background-color: rgba(217, 216, 212, .1);
border-left: 2px dashed #C4C4C4;
}
\ No newline at end of file
src/components/NavBar/index.jsx
View file @ ea14b273
......@@ -11,7 +11,7 @@ import './index.scss'
class Index extends Component {
componentWillReceiveProps (nextProps) {
console.log(this.props, nextProps)
// console.log(this.props, nextProps)
}
componentWillUnmount () { }
......@@ -35,8 +35,7 @@ class Index extends Component {
render () {
const {showBack, bgColor, pageName, nav, showIndex} = this.props
console.log(this.props)
const titleTop = (nav.globalData.navHeight - nav.globalData.navTop - 20) / 2 + nav.globalData.navTop
const titleTop = (nav.globalData.navHeight - nav.globalData.navTop - 24) / 2 + nav.globalData.navTop
return (
<View className='navbar custom-class' style={`height:${nav.globalData.navHeight}px;background-color:${bgColor}`}>
{showBack && <View
......
src/components/NavBar/index.scss
View file @ ea14b273
......@@ -13,15 +13,13 @@
.navbar-title {
width: 100%;
box-sizing: border-box;
padding-left: 115px;
padding-right: 115px;
text-align: center;
position: absolute;
left: 0;
z-index: 10;
color: #333;
color: #404040;
font-size: 36px;
font-weight: bold;
font-weight: 600;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
......
src/pages/index/index.jsx
View file @ ea14b273
This diff is collapsed.
src/pages/index/index.scss
View file @ ea14b273
.index {
flex-direction: column;
width: 100%;
background-color: #F0F2F5;
}
swiper {
height: 280px;
}
.swpier-view {
width: 100%;
.img {
width: 100%;
height: 100%;
height: 280px;
}
}
.city {
......@@ -18,16 +21,16 @@
z-index: 11;
color: #333;
.loc-icon {
width: 36px;
height: 36px;
margin-right: 12px;
width: 48px;
height: 48px;
}
}
.sub-nav {
width: 100%;
padding: 20px 0;
height: 140px;
display: flex;
flex-direction: row;
background-color: #fff;
.content {
width: 50%;
display: flex;
......@@ -35,37 +38,199 @@
justify-content: center;
align-items: center;
.img {
width: 80px;
height: 80px;
width: 48px;
height: 48px;
margin-bottom: 10px;
}
.text {
font-size: 24px;
color: #000;
font-weight: 400;
}
}
}
.sub-title {
width: 100%;
display: flex;
height: 24px;
line-height: 24px;
flex-direction: row;
justify-content: space-between;
margin: 30px 0;
border-left: 4px solid #1890FF;
.text {
font-size: 24px;
font-weight: 400;
margin-left: 30px;
}
}
.store-list-title {
width: 100%;
margin: 20px 0;
}
.list-view {
position: relative;
display: flex;
flex-direction: row;
padding: 20px;
background-color: #ccc;
width: 690px;
height: 128px;
margin: 0 auto;
align-items: center;
border-radius: 4px;
border: 2px solid rgab(230, 230, 230, 1);
margin-bottom: 20px;
background-color: #fff;
.img {
width: 200px;
height: 200px;
width: 80px;
height: 80px;
margin: 0 24px;
}
.text-cont {
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 28px;
color: #000;
font-weight: 400;
margin-bottom: 20px;
}
.time {
color: #ccc;
font-size: 24px;
}
}
.distance {
position: absolute;
right: 32px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
.img {
width: 26px;
height: 26px;
margin-bottom: 8px;
}
.text {
color: #000;
font-size: 24px;
font-weight: 400;
}
}
}
.scrollx-view {
display: flex;
flex-direction: row;
width: 720px;
height: 140px;
margin-left: 30px;
overflow:hidden;
white-space:nowrap;
.coupon-view {
position: relative;
display: inline-block;
flex-direction: row;
width: 552px;
height: 140px;
margin-right: 20px;
.coupon-info {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 440px;
height: 140px;
background-color: #fff;
.coupon-type-all {
position: absolute;
left: 0;
top: 0;
font-size: 20px;
text-align: center;
width: 56px;
height: 24px;
line-height: 24px;
background-color: rgba(56, 158, 13, .2);
color: #389E0D;
}
.coupon-type-single {
position: absolute;
left: 0;
top: 0;
font-size: 20px;
text-align: center;
width: 56px;
height: 24px;
line-height: 24px;
background-color: rgba(250, 140, 22, .2);
color: #FA8C16;
}
.coupon-info-img {
.img {
width: 80px;
height: 80px;
}
}
.coupon-info-text {
margin-left: 18px;
display: flex;
flex-direction: column;
.name {
color: #000;
font-size: 28px;
font-weight: 400;
margin-bottom: 16px;
}
.time {
color: #ccc;
font-size: 24px;
}
}
}
}
.more {
position: absolute;
display: inline-block;
width: 140px;
height: 140px;
line-height: 140px;
text-align: center;
background-color: rgba(225, 227, 230, 1);
.text {
font-size: 26px;
font-weight: 400;
color: #ccc;
}
}
}
.text {
color: #1890FF;
font-size: 26px;
font-weight: 600;
}
// 搜索框样式
.search {
position: fixed;
z-index: 19;
left: 0;
width: 750px;
height: 120px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
.icon {
position: absolute;
left: 260px;
}
.input {
width: 690px;
height: 72px;
line-height: 72px;
background-color: rgb(242, 242, 242);
border-radius: 50px;
text-align: center;
}
.placeholder {
// margin-left: 50px;
}
}
\ No newline at end of file
src/pages/storeList/index.jsx 0 → 100644
View file @ ea14b273
import Taro, {Component} from '@tarojs/taro'
import { View, Image, Text, Swiper, SwiperItem, ScrollView, Input, Icon } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import NavBar from '@/components/NavBar'
import './index.scss'
@connect(({ user, nav }) => ({
user, nav
}), (dispatch) => ({
}))
class Index extends Component {
state = {
showSearch: true,
pageName: '搜索结果',
// 门店数据
storeList: [
// {
// img: 'http://hh-oss-picture.miyapay.com/box/e43fc1fd3ec446d985fef922388b4e00.png',
// name: '米雅便利店（北京1店）',
// time: '2019.05.09-2019.09.09',
// distance: '200m',
// },
// {
// img: 'http://hh-oss-picture.miyapay.com/box/e43fc1fd3ec446d985fef922388b4e00.png',
// name: '米雅便利店（北京1店）',
// time: '2019.05.09-2019.09.09',
// distance: '200m',
// }
]
}
componentWillUnmount () {
}
componentDidMount() {
console.log('获取参数', this.$router.params)
}
componentDidShow () { }
componentDidHide () { }
// 跳转到门店详情
jumpDetail = () => {
Taro.navigateTo({
url: '/pages/storeDetail/index'
})
}
render () {
const {nav} = this.props
const user = this.props.user;
console.log('user', user)
return (
<View className='index'>
<NavBar pageName={this.state.pageName} bgColor='#fff' showBack></NavBar>
<ScrollView
style={`height: ${nav.globalData.screenHeight - 300}px`}
className='scrollview'
scrollY
>
{
this.state.showSearch && <View className='search' style={`top:${nav.globalData.navHeight}px`}>
<Icon className='icon' size='20' type='search' />
<Input onConfirm={this.onConfirm} placeholderClass='placeholder' className='input' confirmType='search' type='text' placeholder='搜索门店' />
</View>
}
<View className='scroll-content'>
{
this.state.storeList.length !== 0 && this.state.storeList.map((item, index) => {
return <View key={index} className='list-view' onClick={this.jumpDetail}>
<Image className='img' src={item.img} />
<View className='text-cont'>
<Text className='name'>{item.name}</Text>
<Text className='time'>{item.time}</Text>
</View>
<View className='distance'>
<Image className='img' src='http://hh-oss-picture.miyapay.com/box/e43fc1fd3ec446d985fef922388b4e00.png'></Image>
<Text className='text'>{item.distance}</Text>
</View>
</View>
})
}
{
this.state.storeList.length === 0 && <View className='no-data'>
<Image className='img' src='http://hh-oss-picture.miyapay.com/box/9aa182ac15e148c00d21fa565771eb95.png'></Image>
<Text className='no-data-text'>未搜索到相关结果</Text>
</View>
}
</View>
</ScrollView>
</View>
)
}
}
export default Index
src/pages/storeList/index.scss 0 → 100644
View file @ ea14b273
.index {
width: 100%;
background-color: #F0F2F5;
}
.list-view {
position: relative;
display: flex;
flex-direction: row;
width: 690px;
height: 128px;
margin: 0 auto;
align-items: center;
border-radius: 4px;
border: 2px solid rgab(230, 230, 230, 1);
margin-bottom: 20px;
background-color: #fff;
.img {
width: 80px;
height: 80px;
margin: 0 24px;
}
.text-cont {
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 28px;
color: #000;
font-weight: 400;
margin-bottom: 20px;
}
.time {
color: #ccc;
font-size: 24px;
}
}
.distance {
position: absolute;
right: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
.img {
width: 26px;
height: 26px;
margin-bottom: 8px;
}
.text {
color: #000;
font-size: 24px;
font-weight: 400;
}
}
}
.text {
color: #1890FF;
font-size: 26px;
font-weight: 600;
}
.scroll-content {
margin-top: 140px;
}
// 搜索框样式
.search {
position: fixed;
z-index: 19;
left: 0;
width: 750px;
height: 120px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
.icon {
position: absolute;
left: 260px;
}
.input {
width: 690px;
height: 72px;
line-height: 72px;
background-color: rgb(242, 242, 242);
border-radius: 50px;
text-align: center;
}
.placeholder {
// margin-left: 50px;
}
}
.no-data {
position: absolute;
left: 50%;
top: 50%;
width: 252px;
height: 300px;
margin-left: -126px;
margin-top: -150px;
text-align: center;
.img {
width: 252px;
height: 240px;
margin-bottom: 30px;
}
.no-data-text {
font-size: 24px;
color: #ccc;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment