Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit eabfa361 by hank
Options

首页ui 调整

parent e442ec08
Showing with 253 additions and 54 deletions
.stylelintrc.js
...@@ -10,6 +10,7 @@ module.exports = { ...@@ -10,6 +10,7 @@ module.exports = {
'scss/at-rule-no-unknown': true, 'scss/at-rule-no-unknown': true,
'no-descending-specificity': null, 'no-descending-specificity': null,
'selector-type-no-unknown': null, 'selector-type-no-unknown': null,
'property-no-unknown': null 'property-no-unknown': null,
'font-family-no-missing-generic-family-keyword': null
} }
} }
src/api/template.ts
...@@ -19,13 +19,13 @@ class TeplateApi extends ApiClient { ...@@ -19,13 +19,13 @@ class TeplateApi extends ApiClient {
}) })
} }
getHomeList(page: number = 1, limit: number = 20) { getHomeList(templateShow: string = 'HORIZONTAL', page: number = 1, limit: number = 50) {
return this.request({ return this.request({
method: 'post', method: 'post',
url: `/template/get/type/template/list?p=${page}&c=${limit}`, url: `/template/get/type/template/list?p=${page}&c=${limit}`,
data: { data: {
templateCount: 4, templateCount: 4,
templateShow: 'HORIZONTAL' templateShow: templateShow
} }
}) })
} }
......
src/assets/styles/reset.scss
...@@ -45,4 +45,11 @@ div { ...@@ -45,4 +45,11 @@ div {
flex: 1; flex: 1;
} }
@font-face {
font-family: DINCondensed-Bold;
src:
url('../font/DINCondensed-Bold.ttf'),
url('https://visual-clouds.bdideal.com/html/156394962402878b178ab4088494e9df36c49ec944add.ttf');
}
/* postcss-pxtransform rn eject disable */ /* postcss-pxtransform rn eject disable */
src/assets/styles/var.scss
This source diff could not be displayed because it is too large. You can view the blob instead.
src/pages/home/tempaltes/conpoments/home_item/index.scss
...@@ -2,17 +2,25 @@ ...@@ -2,17 +2,25 @@
.home-item { .home-item {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 90px;
&-title { &-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 10px 20px; padding: 0 20px;
padding-bottom: 20px;
font-size: 20px; font-size: 20px;
} }
.title-name { .title-name {
font-size: 30px;
color: #000;
font-weight: bold;
}
.btn-all {
font-size: 28px; font-size: 28px;
color: #ff9110;
} }
&-list { &-list {
......
src/pages/home/tempaltes/conpoments/home_item/index.tsx
...@@ -41,7 +41,7 @@ class HomeItem extends Component { ...@@ -41,7 +41,7 @@ class HomeItem extends Component {
<View className="home-item-title"> <View className="home-item-title">
<Text className="title-name">{typeName ? typeName : ''}</Text> <Text className="title-name">{typeName ? typeName : ''}</Text>
<Text className="btn-all" onClick={this.goAll}> <Text className="btn-all" onClick={this.goAll}>
查看全部 更多>
</Text> </Text>
</View> </View>
<View className="home-item-list"> <View className="home-item-list">
......
src/pages/home/tempaltes/conpoments/temp_item/index.scss
@import '@styles/var.scss'; @import '@styles/var.scss';
.temp-item { .temp-item {
width: 345px; width: 339px;
margin-bottom: 20px; margin-bottom: 20px;
position: relative;
}
.tips {
background-image: linear-gradient(266deg, #ffab20 0%, #ff720e 100%);
border-radius: 0 6px 0 22px;
width: 124px;
height: 36px;
font-size: 18px;
line-height: 36px;
color: white;
text-align: center;
position: absolute;
right: 0;
top: 0;
} }
.temp-img { .temp-img {
@include eject(display, block); @include eject(display, block);
width: 100%; width: 100%;
height: 195px; height: 187px;
background-color: #ccc; background-color: #ccc;
} }
...@@ -18,16 +33,37 @@ ...@@ -18,16 +33,37 @@
height: 613px; height: 613px;
} }
.temp-name-container {
display: flex;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
justify-content: space-between;
}
.temp-name { .temp-name {
width: 100%; width: 500px;
font-size: 28px; font-size: 26px;
padding-top: 10px; color: #333;
font-weight: bold;
background-color: white; background-color: white;
@include eject(display, block); @include eject(display, block);
@include eject(box-sizing, border-box); @include eject(box-sizing, border-box);
} }
.temp-film-count {
color: white;
font-size: 15px;
background: url(../../../../../assets/images/flame.png) no-repeat center;
font-family: 'DIN-Condensed, sans-serif';
background-size: 100%;
height: 30px;
min-width: 26px;
text-align: center;
line-height: 35px;
}
.equipment-count { .equipment-count {
color: #bbb; color: #bbb;
font-size: 26px; font-size: 26px;
......
src/pages/home/tempaltes/conpoments/temp_item/index.tsx
...@@ -29,15 +29,29 @@ class TempItem extends Component { ...@@ -29,15 +29,29 @@ class TempItem extends Component {
} }
render() { render() {
const { templateName, templateUrl: url, filmName, equipmentCount, templateShow } = this.props const {
templateName,
templateUrl: url,
filmName,
equipmentCount,
templateShow,
filmCount,
templateEnvironment
} = this.props
return ( return (
<View className="temp-item" onClick={this.goDetail}> <View className="temp-item" onClick={this.goDetail}>
{templateEnvironment === '自有设备' ? <View className="tips">建议内部设备</View> : null}
<Image <Image
lazyLoad lazyLoad
className={templateShow === 'HORIZONTAL' ? 'temp-img' : 'temp-img temp-img2'} className={templateShow === 'HORIZONTAL' ? 'temp-img' : 'temp-img temp-img2'}
src={url.split(',')[0]} src={url.split(',')[0]}
/> />
<View className="temp-name-container">
<Text className="temp-name">{templateName || filmName}</Text> <Text className="temp-name">{templateName || filmName}</Text>
{templateName !== undefined ? <Text className="temp-film-count">{filmCount}</Text> : null}
</View>
{equipmentCount !== undefined ? ( {equipmentCount !== undefined ? (
<Text className="equipment-count">播放设备：{equipmentCount}台</Text> <Text className="equipment-count">播放设备：{equipmentCount}台</Text>
) : null} ) : null}
......
src/pages/home/tempaltes/index.tsx
...@@ -4,7 +4,7 @@ import { getTempList } from '@/actions/asyncCounter' ...@@ -4,7 +4,7 @@ import { getTempList } from '@/actions/asyncCounter'
import Taro, { Component, Config } from '@tarojs/taro' import Taro, { Component, Config } from '@tarojs/taro'
// import TempItem from './conpoments/temp_item' // import TempItem from './conpoments/temp_item'
import HomeItem from './conpoments/home_item' import HomeItem from './conpoments/home_item'
import { View, Input, ScrollView, Text } from '@tarojs/components' import { View, Image, ScrollView, Text } from '@tarojs/components'
import Api from '@/api/index' import Api from '@/api/index'
import './scss/index.scss' import './scss/index.scss'
import token from '@/common/token' import token from '@/common/token'
...@@ -23,6 +23,7 @@ type PageOwnProps = {} ...@@ -23,6 +23,7 @@ type PageOwnProps = {}
type PageState = { type PageState = {
page: number page: number
list: [] list: []
showTempalte: string
} }
type IProps = PageStateProps & PageDispatchProps & PageOwnProps type IProps = PageStateProps & PageDispatchProps & PageOwnProps
...@@ -45,7 +46,7 @@ interface Tempaltes { ...@@ -45,7 +46,7 @@ interface Tempaltes {
) )
class Tempaltes extends Component { class Tempaltes extends Component {
config: Config = { config: Config = {
navigationBarTitleText: '', navigationBarTitleText: '模板市场',
navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default' navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
} }
// protected page = 1 // protected page = 1
...@@ -53,7 +54,8 @@ class Tempaltes extends Component { ...@@ -53,7 +54,8 @@ class Tempaltes extends Component {
super(props) super(props)
this.state = { this.state = {
page: 1, page: 1,
list: [] list: [],
showTempalte: 'HORIZONTAL'
} }
} }
...@@ -62,12 +64,6 @@ class Tempaltes extends Component { ...@@ -62,12 +64,6 @@ class Tempaltes extends Component {
} }
async componentWillMount() { async componentWillMount() {
console.log('componentWillMount') console.log('componentWillMount')
Api.tempalte.getHomeList().then(res => {
this.setState({
list: res.list
})
console.log(res, 'getHomeList')
})
this.getData() this.getData()
} }
...@@ -77,9 +73,15 @@ class Tempaltes extends Component { ...@@ -77,9 +73,15 @@ class Tempaltes extends Component {
}) })
this.getData() this.getData()
} }
getData() { getData(showTempalte2?) {
const { page } = this.state const { page, showTempalte } = this.state
this.props.getTempListData(page) // this.props.getTempListData(page)
Api.tempalte.getHomeList(showTempalte2 ? showTempalte2 : showTempalte).then(res => {
this.setState({
list: res.list
})
console.log(res, 'getHomeList')
})
} }
goTypeList() { goTypeList() {
...@@ -88,19 +90,52 @@ class Tempaltes extends Component { ...@@ -88,19 +90,52 @@ class Tempaltes extends Component {
}) })
} }
shouldComponentUpdate(nextProps: IProps) { // shouldComponentUpdate(nextProps: IProps) {
const { list } = this.props // const { list } = this.props
const { list: _list } = nextProps // const { list: _list } = nextProps
return _list !== list // return _list !== list
// }
typeChange(type) {
this.setState({
showTempalte: type
})
this.getData(type)
} }
render() { render() {
// const { list } = this.props // const { list } = this.props
const { list } = this.state const { list, showTempalte } = this.state
return ( return (
<View className="temp"> <View className="temp">
<View className="temp-search-bar"> <View className="temp-search-bar">
<Text onClick={this.goTypeList}>|||</Text> <Image
className="menu-all"
src={require('../../../assets/images/menu.png')}
onClick={this.goTypeList}
/>
<View className="type-tab">
<Text
onClick={() => {
this.typeChange('HORIZONTAL')
}}
className={
showTempalte === 'HORIZONTAL'
? 'type-tab-item type-tab-item-active'
: 'type-tab-item'
}
>
横版
</Text>
<Text
onClick={() => {
this.typeChange('VERTICAL')
}}
className={
showTempalte === 'VERTICAL' ? 'type-tab-item type-tab-item-active' : 'type-tab-item'
}
>
竖版
</Text>
</View>
</View> </View>
{/* <View className="temp-search-bar"> {/* <View className="temp-search-bar">
<Input className="temp-search-bar-search" placeholder="请输入搜索关键词" /> <Input className="temp-search-bar-search" placeholder="请输入搜索关键词" />
......
src/pages/home/tempaltes/scss/index.scss
...@@ -8,9 +8,34 @@ ...@@ -8,9 +8,34 @@
background-color: #f7f7f7; background-color: #f7f7f7;
&-search-bar { &-search-bar {
height: 120px; // height: 120px;
padding: 20px 24px; padding: 20px 24px;
background-color: white; background-color: white;
position: relative;
text-align: center;
.menu-all {
height: 37px;
width: 38px;
position: absolute;
left: 30px;
}
.type-tab {
width: 100%;
text-align: center;
font-size: 28px;
color: #969799;
.type-tab-item {
padding: 0 20px;
}
.type-tab-item-active {
font-size: 38px;
color: #000;
}
}
@include eject(box-sizing, border-box); @include eject(box-sizing, border-box);
......
src/pages/home/tempaltes/scss/temp-type.scss
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
position: relative; position: relative;
flex-direction: column; flex-direction: column;
background-color: white; background-color: white;
padding-top: 34px;
&-scroll { &-scroll {
flex: 1; flex: 1;
...@@ -21,17 +22,29 @@ ...@@ -21,17 +22,29 @@
padding: 20px; padding: 20px;
&-title { &-title {
font-size: 35px; font-size: 38px;
color: #000;
} }
.type-item-btn { .type-item-btn {
margin-right: 20px; margin-right: 34px;
margin-bottom: 20px; margin-bottom: 34px;
font-size: 20px; font-size: 26px;
width: 140px;
height: 56px;
outline: none;
padding: 0;
background: #f3f3f5;
// box-shadow: 0 7px 12px 0 rgba(159, 87, 2, 0.17);
border-radius: 3px;
color: #666;
border: none;
line-height: 56px;
} }
&-list { &-list {
padding: 20px 0; padding-top: 34px;
padding-left: 20px;
// text-align: left; // text-align: left;
// display: flex; // display: flex;
// flex-wrap: wrap; // flex-wrap: wrap;
......
src/pages/home/tempaltes/scss/type_detail.scss
...@@ -10,10 +10,28 @@ ...@@ -10,10 +10,28 @@
.radio-group { .radio-group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 20px; padding: 44px;
padding-left: 44px;
padding-bottom: 0;
.radio-list__label { .radio-list__label {
margin-right: 20px; // margin-right: 20px;
.btn {
margin-right: 34px;
margin-bottom: 34px;
font-size: 26px;
width: 140px;
height: 56px;
background: #f3f3f5;
outline: none;
padding: 0;
box-shadow: none;
// box-shadow: 0 7px 12px 0 rgba(159, 87, 2, 0.17);
border-radius: 3px;
color: #666;
border: none;
line-height: 56px;
}
.activeTagBtn { .activeTagBtn {
background: #ff9110; background: #ff9110;
...@@ -28,16 +46,24 @@ ...@@ -28,16 +46,24 @@
padding: 20px; padding: 20px;
position: relative; position: relative;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center;
height: 80px;
&-item { &-item {
display: inline-block; display: inline-block;
margin-right: 20px; margin-right: 20px;
font-size: 30px !important; font-size: 30px !important;
background: transparent;
color: #999;
padding: 0 44px 0 20px;
height: 80px;
line-height: 80px;
font-weight: bold;
} }
&-item-active { &-item-active {
color: white; color: #333;
background: blue; font-size: 38px !important;
} }
} }
......
src/pages/home/tempaltes/template_type_detail.tsx
...@@ -213,7 +213,7 @@ class TemplateTypeDetail extends Component { ...@@ -213,7 +213,7 @@ class TemplateTypeDetail extends Component {
/> />
<Button <Button
size="mini" size="mini"
className={tagId === item.tagId ? 'activeTagBtn' : ''} className={tagId === item.tagId ? 'btn activeTagBtn' : 'btn'}
onClick={() => { onClick={() => {
console.log('change') console.log('change')
this.tagIdChange(item.tagId) this.tagIdChange(item.tagId)
......
src/pages/home/user/index.scss
...@@ -10,17 +10,36 @@ ...@@ -10,17 +10,36 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-bottom: 40px; margin-bottom: 40px;
padding: 80px 0 40px 40px; height: 373px;
background-color: white; box-sizing: border-box;
padding: 100px 0 70px 40px;
background: url('http://visual-clouds.oss-cn-beijing.aliyuncs.com/js/card.png') no-repeat center;
background-size: 100%;
&-avatar { &-avatar {
width: 200px; width: 140px;
height: 200px; height: 140px;
border-radius: 100px; border-radius: 50%;
} }
&-name { &-name {
margin-left: 40px; margin-left: 40px;
font-size: 36px;
color: #fff;
letter-spacing: 0.43px;
}
&-phone {
font-size: 28px;
color: #fff;
letter-spacing: 0.43px;
}
&-vip {
padding-left: 20px;
font-size: 28px;
color: #fff;
letter-spacing: 0.43px;
} }
} }
......
src/pages/home/user/index.tsx
import { ComponentClass } from 'react' import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro' import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Image, ScrollView, Button } from '@tarojs/components' import { View, Text, Image, ScrollView, Button } from '@tarojs/components'
import api from '@/api' import api from '@/api/index'
import './index.scss' import './index.scss'
import token from '@/common/token' import token from '@/common/token'
...@@ -14,6 +14,9 @@ type PageOwnProps = {} ...@@ -14,6 +14,9 @@ type PageOwnProps = {}
type PageState = { type PageState = {
nickName: string nickName: string
avatarUrl: string avatarUrl: string
vipState?: string
userPhone?: string
vipTime?: string
} }
type IProps = PageStateProps & PageDispatchProps & PageOwnProps type IProps = PageStateProps & PageDispatchProps & PageOwnProps
...@@ -39,6 +42,10 @@ class User extends Component { ...@@ -39,6 +42,10 @@ class User extends Component {
this.getUserInfo() this.getUserInfo()
} }
componentDidShow() {
this.getUserInfo()
}
async getUserInfo() { async getUserInfo() {
if (process.env.TARO_ENV !== 'rn') { if (process.env.TARO_ENV !== 'rn') {
try { try {
...@@ -46,8 +53,8 @@ class User extends Component { ...@@ -46,8 +53,8 @@ class User extends Component {
// userInfo: { avatarUrl, nickName } // userInfo: { avatarUrl, nickName }
// } = await Taro.getUserInfo() // } = await Taro.getUserInfo()
// this.setState({ avatarUrl, nickName }) // this.setState({ avatarUrl, nickName })
const { userName, userUrl } = await api.user.getInfo() const { userName, userUrl, userPhone, vipState, vipTime } = await api.user.getInfo()
this.setState({ avatarUrl: userUrl, nickName: userName }) this.setState({ avatarUrl: userUrl, nickName: userName, userPhone, vipState, vipTime })
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
...@@ -70,12 +77,18 @@ class User extends Component { ...@@ -70,12 +77,18 @@ class User extends Component {
} }
render() { render() {
const { avatarUrl, nickName } = this.state let { avatarUrl, nickName, userPhone, vipState, vipTime } = this.state
return ( return (
<ScrollView scrollY className="user"> <ScrollView scrollY className="user">
<View className="user-top-info"> <View className="user-top-info">
<Image className="user-top-info-avatar" src={avatarUrl} /> <Image className="user-top-info-avatar" src={avatarUrl} />
<Text className="user-top-info-name">{nickName}</Text> <View className="user-top-info-name">
<Text>{nickName}</Text>
<View className="user-top-info-phone">{userPhone}</View>
</View>
<View className="user-top-info-vip">
{vipState === 'DISABLE' ? 'VIP已到期' : 'VIP' + String(vipTime).slice(0, 10)}
</View>
</View> </View>
<View className="user-item"> <View className="user-item">
<View <View
...@@ -96,14 +109,14 @@ class User extends Component { ...@@ -96,14 +109,14 @@ class User extends Component {
<Text>帮助</Text> <Text>帮助</Text>
</View> </View>
</View> </View>
<View className="user-item"> {/* <View className="user-item">
<View className="user-item-view"> <View className="user-item-view">
<Text>我的视片</Text> <Text>我的视片</Text>
</View> </View>
<View className="user-item-view"> <View className="user-item-view">
<Text>我的设备</Text> <Text>我的设备</Text>
</View> </View>
</View> </View> */}
<View className="user-logout-bar"> <View className="user-logout-bar">
<Button onClick={this.logOut} className="user-logout-bar-btn" type="primary"> <Button onClick={this.logOut} className="user-logout-bar-btn" type="primary">
退出登录 退出登录
......
src/reducers/counter.ts
...@@ -7,7 +7,9 @@ export interface ITempItem { ...@@ -7,7 +7,9 @@ export interface ITempItem {
templateUrl: string templateUrl: string
templateName: string templateName: string
equipmentCount?: number equipmentCount?: number
filmCount?: number
templateShow?: string templateShow?: string
templateEnvironment?: string
clickItem?: () => void clickItem?: () => void
} }
export interface IInitialState { export interface IInitialState {
......
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 sign in to comment