Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit eabfa361 by hank
Options

首页ui 调整

parent e442ec08
Showing with 255 additions and 57 deletions
.stylelintrc.js
......@@ -10,6 +10,7 @@ module.exports = {
'scss/at-rule-no-unknown': true,
'no-descending-specificity': null,
'selector-type-no-unknown': null,
'property-no-unknown': null
'property-no-unknown': null,
'font-family-no-missing-generic-family-keyword': null
}
}
\ No newline at end of file
}
src/api/template.ts
......@@ -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({
method: 'post',
url: `/template/get/type/template/list?p=${page}&c=${limit}`,
data: {
templateCount: 4,
templateShow: 'HORIZONTAL'
templateShow: templateShow
}
})
}
......
src/assets/styles/reset.scss
......@@ -45,4 +45,11 @@ div {
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 */
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 @@
.home-item {
width: 100%;
margin-bottom: 20px;
margin-bottom: 90px;
&-title {
display: flex;
justify-content: space-between;
padding: 10px 20px;
padding: 0 20px;
padding-bottom: 20px;
font-size: 20px;
}
.title-name {
font-size: 30px;
color: #000;
font-weight: bold;
}
.btn-all {
font-size: 28px;
color: #ff9110;
}
&-list {
......
src/pages/home/tempaltes/conpoments/home_item/index.tsx
......@@ -41,7 +41,7 @@ class HomeItem extends Component {
<View className="home-item-title">
<Text className="title-name">{typeName ? typeName : ''}</Text>
<Text className="btn-all" onClick={this.goAll}>
查看全部
更多>
</Text>
</View>
<View className="home-item-list">
......
src/pages/home/tempaltes/conpoments/temp_item/index.scss
@import '@styles/var.scss';
.temp-item {
width: 345px;
width: 339px;
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 {
@include eject(display, block);
width: 100%;
height: 195px;
height: 187px;
background-color: #ccc;
}
......@@ -18,16 +33,37 @@
height: 613px;
}
.temp-name-container {
display: flex;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
justify-content: space-between;
}
.temp-name {
width: 100%;
font-size: 28px;
padding-top: 10px;
width: 500px;
font-size: 26px;
color: #333;
font-weight: bold;
background-color: white;
@include eject(display, block);
@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 {
color: #bbb;
font-size: 26px;
......
src/pages/home/tempaltes/conpoments/temp_item/index.tsx
......@@ -29,15 +29,29 @@ class TempItem extends Component {
}
render() {
const { templateName, templateUrl: url, filmName, equipmentCount, templateShow } = this.props
const {
templateName,
templateUrl: url,
filmName,
equipmentCount,
templateShow,
filmCount,
templateEnvironment
} = this.props
return (
<View className="temp-item" onClick={this.goDetail}>
{templateEnvironment === '自有设备' ? <View className="tips">建议内部设备</View> : null}
<Image
lazyLoad
className={templateShow === 'HORIZONTAL' ? 'temp-img' : 'temp-img temp-img2'}
src={url.split(',')[0]}
/>
<Text className="temp-name">{templateName || filmName}</Text>
<View className="temp-name-container">
<Text className="temp-name">{templateName || filmName}</Text>
{templateName !== undefined ? <Text className="temp-film-count">{filmCount}</Text> : null}
</View>
{equipmentCount !== undefined ? (
<Text className="equipment-count">播放设备：{equipmentCount}台</Text>
) : null}
......
src/pages/home/tempaltes/index.tsx
......@@ -4,7 +4,7 @@ import { getTempList } from '@/actions/asyncCounter'
import Taro, { Component, Config } from '@tarojs/taro'
// import TempItem from './conpoments/temp_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 './scss/index.scss'
import token from '@/common/token'
......@@ -23,6 +23,7 @@ type PageOwnProps = {}
type PageState = {
page: number
list: []
showTempalte: string
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
......@@ -45,7 +46,7 @@ interface Tempaltes {
)
class Tempaltes extends Component {
config: Config = {
navigationBarTitleText: '',
navigationBarTitleText: '模板市场',
navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
}
// protected page = 1
......@@ -53,7 +54,8 @@ class Tempaltes extends Component {
super(props)
this.state = {
page: 1,
list: []
list: [],
showTempalte: 'HORIZONTAL'
}
}
......@@ -62,12 +64,6 @@ class Tempaltes extends Component {
}
async componentWillMount() {
console.log('componentWillMount')
Api.tempalte.getHomeList().then(res => {
this.setState({
list: res.list
})
console.log(res, 'getHomeList')
})
this.getData()
}
......@@ -77,9 +73,15 @@ class Tempaltes extends Component {
})
this.getData()
}
getData() {
const { page } = this.state
this.props.getTempListData(page)
getData(showTempalte2?) {
const { page, showTempalte } = this.state
// this.props.getTempListData(page)
Api.tempalte.getHomeList(showTempalte2 ? showTempalte2 : showTempalte).then(res => {
this.setState({
list: res.list
})
console.log(res, 'getHomeList')
})
}
goTypeList() {
......@@ -88,19 +90,52 @@ class Tempaltes extends Component {
})
}
shouldComponentUpdate(nextProps: IProps) {
const { list } = this.props
const { list: _list } = nextProps
return _list !== list
// shouldComponentUpdate(nextProps: IProps) {
// const { list } = this.props
// const { list: _list } = nextProps
// return _list !== list
// }
typeChange(type) {
this.setState({
showTempalte: type
})
this.getData(type)
}
render() {
// const { list } = this.props
const { list } = this.state
const { list, showTempalte } = this.state
return (
<View className="temp">
<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 className="temp-search-bar">
<Input className="temp-search-bar-search" placeholder="请输入搜索关键词" />
......
src/pages/home/tempaltes/scss/index.scss
......@@ -8,9 +8,34 @@
background-color: #f7f7f7;
&-search-bar {
height: 120px;
// height: 120px;
padding: 20px 24px;
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);
......
src/pages/home/tempaltes/scss/temp-type.scss
......@@ -6,6 +6,7 @@
position: relative;
flex-direction: column;
background-color: white;
padding-top: 34px;
&-scroll {
flex: 1;
......@@ -21,17 +22,29 @@
padding: 20px;
&-title {
font-size: 35px;
font-size: 38px;
color: #000;
}
.type-item-btn {
margin-right: 20px;
margin-bottom: 20px;
font-size: 20px;
margin-right: 34px;
margin-bottom: 34px;
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 {
padding: 20px 0;
padding-top: 34px;
padding-left: 20px;
// text-align: left;
// display: flex;
// flex-wrap: wrap;
......
src/pages/home/tempaltes/scss/type_detail.scss
......@@ -10,10 +10,28 @@
.radio-group {
display: flex;
flex-wrap: wrap;
padding: 20px;
padding: 44px;
padding-left: 44px;
padding-bottom: 0;
.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 {
background: #ff9110;
......@@ -28,16 +46,24 @@
padding: 20px;
position: relative;
justify-content: space-evenly;
align-items: center;
height: 80px;
&-item {
display: inline-block;
margin-right: 20px;
font-size: 30px !important;
background: transparent;
color: #999;
padding: 0 44px 0 20px;
height: 80px;
line-height: 80px;
font-weight: bold;
}
&-item-active {
color: white;
background: blue;
color: #333;
font-size: 38px !important;
}
}
......
src/pages/home/tempaltes/template_type_detail.tsx
......@@ -213,7 +213,7 @@ class TemplateTypeDetail extends Component {
/>
<Button
size="mini"
className={tagId === item.tagId ? 'activeTagBtn' : ''}
className={tagId === item.tagId ? 'btn activeTagBtn' : 'btn'}
onClick={() => {
console.log('change')
this.tagIdChange(item.tagId)
......
src/pages/home/user/index.scss
......@@ -10,17 +10,36 @@
flex-direction: row;
align-items: center;
margin-bottom: 40px;
padding: 80px 0 40px 40px;
background-color: white;
height: 373px;
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 {
width: 200px;
height: 200px;
border-radius: 100px;
width: 140px;
height: 140px;
border-radius: 50%;
}
&-name {
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 Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Image, ScrollView, Button } from '@tarojs/components'
import api from '@/api'
import api from '@/api/index'
import './index.scss'
import token from '@/common/token'
......@@ -14,6 +14,9 @@ type PageOwnProps = {}
type PageState = {
nickName: string
avatarUrl: string
vipState?: string
userPhone?: string
vipTime?: string
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
......@@ -39,6 +42,10 @@ class User extends Component {
this.getUserInfo()
}
componentDidShow() {
this.getUserInfo()
}
async getUserInfo() {
if (process.env.TARO_ENV !== 'rn') {
try {
......@@ -46,8 +53,8 @@ class User extends Component {
// userInfo: { avatarUrl, nickName }
// } = await Taro.getUserInfo()
// this.setState({ avatarUrl, nickName })
const { userName, userUrl } = await api.user.getInfo()
this.setState({ avatarUrl: userUrl, nickName: userName })
const { userName, userUrl, userPhone, vipState, vipTime } = await api.user.getInfo()
this.setState({ avatarUrl: userUrl, nickName: userName, userPhone, vipState, vipTime })
} catch (error) {
console.error(error)
}
......@@ -70,12 +77,18 @@ class User extends Component {
}
render() {
const { avatarUrl, nickName } = this.state
let { avatarUrl, nickName, userPhone, vipState, vipTime } = this.state
return (
<ScrollView scrollY className="user">
<View className="user-top-info">
<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 className="user-item">
<View
......@@ -96,14 +109,14 @@ class User extends Component {
<Text>帮助</Text>
</View>
</View>
<View className="user-item">
{/* <View className="user-item">
<View className="user-item-view">
<Text>我的视片</Text>
</View>
<View className="user-item-view">
<Text>我的设备</Text>
</View>
</View>
</View> */}
<View className="user-logout-bar">
<Button onClick={this.logOut} className="user-logout-bar-btn" type="primary">
退出登录
......
src/reducers/counter.ts
......@@ -7,7 +7,9 @@ export interface ITempItem {
templateUrl: string
templateName: string
equipmentCount?: number
filmCount?: number
templateShow?: string
templateEnvironment?: string
clickItem?: () => void
}
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