Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit f183c5c2 by hank
Options

流程优化修改

parent 3e1452a9
Showing with 365 additions and 144 deletions
src/app.tsx
......@@ -51,6 +51,8 @@ class App extends Component {
'pages/home/device/my_film/index',
'pages/home/device/group_detail/index',
'pages/home/device/group_device_bind/index',
'pages/home/device/shop_list/index',
'pages/home/device/group_list/index',
'pages/home/tempaltes/film_detail',
'pages/home/tempaltes/film_page',
'pages/home/tempaltes/film_preview',
......@@ -96,12 +98,12 @@ class App extends Component {
iconPath: './assets/images/film.png',
selectedIconPath: './assets/images/film_ac.png'
},
{
pagePath: 'pages/home/film/schedule_list/index',
text: '日程',
iconPath: './assets/images/schedule.png',
selectedIconPath: './assets/images/schedule-selcet.png'
},
// {
// pagePath: 'pages/home/film/schedule_list/index',
// text: '日程',
// iconPath: './assets/images/schedule.png',
// selectedIconPath: './assets/images/schedule-selcet.png'
// },
{
pagePath: 'pages/home/user/index',
text: '个人中心',
......
src/assets/images/film.png
src/assets/images/film.png

2.97 KB | W: | H:

src/assets/images/film.png

3.25 KB | W: | H:

src/assets/images/film.png
src/assets/images/film.png
src/assets/images/film.png
src/assets/images/film.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/film_ac.png
src/assets/images/film_ac.png

3.18 KB | W: | H:

src/assets/images/film_ac.png

3.34 KB | W: | H:

src/assets/images/film_ac.png
src/assets/images/film_ac.png
src/assets/images/film_ac.png
src/assets/images/film_ac.png
  • 2-up
  • Swipe
  • Onion skin
src/conpoments/device_item/index.scss
......@@ -69,11 +69,11 @@
padding-left: 20px;
margin-left: 37px;
position: relative;
color: #5ff054;
color: rgba(75, 149, 224, 1);
.hong {
background: #5ff054;
box-shadow: 0 4px 4px 0 rgba(34, 251, 31, 0.3);
background: rgba(75, 149, 224, 1);
// box-shadow: 0 4px 4px 0 rgba(34, 251, 31, 0.3);
}
}
......@@ -81,12 +81,12 @@
padding-left: 20px;
margin-left: 37px;
position: relative;
color: #f32b2b;
// color: #f32b2b;
.hong {
background: #f32b2b;
background: rgba(254, 130, 27, 1);
color: #666;
box-shadow: 0 4px 4px 0 rgba(243, 43, 43, 0.33);
// box-shadow: 0 4px 4px 0 rgba(243, 43, 43, 0.33);
}
}
}
......
src/pages/home/device/device_list/index.scss
......@@ -3,13 +3,59 @@
.device-list {
width: 100%;
height: 100%;
// height: 100%;
position: relative;
// display: flex;
// flex-direction: column;
background: $bgColor;
background: #fff;
padding-bottom: 0;
min-height: 100vh;
box-sizing: border-box;
height: 100vh;
.search-bar-container {
padding: 18px 24px;
display: flex;
.search-bar-left {
display: flex;
align-items: center;
width: 450px;
height: 64px;
box-sizing: border-box;
padding-left: 24px;
padding-right: 24px;
background: rgba(247, 248, 250, 1);
border-radius: 49px;
margin-right: 40px;
.search-img {
width: 30px;
height: 30px;
margin-right: 18px;
}
.bottom-btn-input {
display: inline-block;
}
}
.add-device {
height: 64px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 145, 16, 1);
line-height: 28px;
display: flex;
align-items: center;
&-img {
width: 32px;
height: 32px;
margin-right: 12px;
}
}
}
.device-item-container {
margin: 25px;
......@@ -23,9 +69,41 @@
border-radius: 5px;
}
.no-deviece-container {
padding-top: 134px;
.no-device-img {
display: block;
width: 351px;
height: 302px;
margin: 0 auto;
margin-bottom: 62px;
}
.tips {
text-align: center;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
}
.go-shop {
text-align: center;
width: 310px;
height: 88px;
line-height: 88px;
margin: 0 auto;
margin-top: 134px;
color: rgba(255, 255, 255, 1);
background: linear-gradient(266deg, rgba(255, 171, 32, 1) 0%, rgba(255, 114, 14, 1) 100%);
border-radius: 60px;
}
}
&-add-btn {
position: absolute;
bottom: 130px;
bottom: 0;
left: 0;
right: 0;
......
src/pages/home/device/device_list/index.tsx
......@@ -5,10 +5,9 @@ import { connect } from '@tarojs/redux'
import { bluetooth } from '@/common/adapter'
import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { View, Text, Image, Input } from '@tarojs/components'
import DeviceItem from '@/conpoments/device_item'
import { getFilmList } from '@/actions/asyncCounter'
import { WIFI_CHARACTERISTIC_ID, BLE_SERVICE_ID } from '@/common'
import { showMyToast, getBLEState, getBLEData } from '@/common/utils'
import Ble from '@/common/bluetooth'
......@@ -54,6 +53,8 @@ type PageState = {
deviceCode: string
showModal: boolean
deviceList: IDeviceItem[]
list: any[]
name: string
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
......@@ -76,12 +77,15 @@ interface MyDevice {
)
class MyDevice extends Component {
protected page = 1
protected name = ''
constructor(props: any) {
super(props)
this.state = {
deviceCode: '',
deviceList: [],
showModal: false
showModal: false,
list: [],
name: ''
}
this.scanCode = this.scanCode.bind(this)
this.cancelModal = this.cancelModal.bind(this)
......@@ -98,6 +102,15 @@ class MyDevice extends Component {
}
async getDate() {
this.cancelModal()
api.common.getGroupDevice('', this.name).then(res => {
this.setState({
list: res || []
})
})
}
async getData() {
// this.cancelModal()
this.props.getFilmListData(this.page)
}
......@@ -195,64 +208,105 @@ class MyDevice extends Component {
Taro.navigateTo({ url: `/pages/home/device/device_detail/index?equipmentId=${equipmentId}` })
}
shouldComponentUpdate(nextProps: IProps, _nextState) {
const { list } = this.props
const { list: _list } = nextProps
const { showModal } = this.state
const { showModal: _showModal } = _nextState
return list !== _list || showModal !== _showModal
searchValueChange({ target }) {
this.name = target.value
this.getDate()
}
render() {
const { list, count, height } = this.props
const { showModal } = this.state
const { count, height } = this.props
const { list, showModal, name } = this.state
return (
<View className="device-list">
<ListView
count={count}
height={height - 108}
dataListLength={list.length}
pullingUp={done => this.pullingUp(done)}
pullingDown={done => this.pullingDown(done)}
>
{list.map(item => (
<View className="device-item-container" key={item.equipmentId}>
<AtSwipeAction
autoClose
key={item.equipmentId}
onClick={info => this.handleItem(item, info)}
options={[
{
text: '编辑',
style: {
backgroundColor: '#6190E8'
}
},
{
text: '删除',
style: {
backgroundColor: '#F32B2B'
}
}
]}
>
<View onClick={() => this.goDetail(item.equipmentId)}>
<DeviceItem {...item} />
</View>
</AtSwipeAction>
</View>
))}
</ListView>
<View className="device-list-add-btn bottom-btn-container" onClick={this.scanCode}>
<View className="bottom-btn">
{' '}
<View className="search-bar-container">
<View className="search-bar-left">
<Image
className="bottom-btn-img"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/scancode.png"
/>{' '}
扫码添加设备
className="search-img"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/search-icon.png"
/>
<Input
placeholder="搜索"
value={name}
onInput={this.searchValueChange}
className="bottom-btn-input"
/>
</View>
<View className="add-device" onClick={this.scanCode}>
<Image
className="add-device-img"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/scancode2.png"
/>
<Text>扫码添加设备</Text>
</View>
</View>
{list && list.length && (
<View>
<ListView
count={count}
height={height - 68}
dataListLength={list.length}
pullingUp={done => this.pullingUp(done)}
pullingDown={done => this.pullingDown(done)}
>
{list.map(item => (
<View className="device-item-container" key={item.equipmentId}>
<AtSwipeAction
autoClose
key={item.equipmentId}
onClick={info => this.handleItem(item, info)}
options={[
{
text: '编辑',
style: {
backgroundColor: '#6190E8'
}
},
{
text: '删除',
style: {
backgroundColor: '#F32B2B'
}
}
]}
>
<View onClick={() => this.goDetail(item.equipmentId)}>
<DeviceItem {...item} />
</View>
</AtSwipeAction>
</View>
))}
</ListView>
{/* <View className="device-list-add-btn bottom-btn-container" onClick={this.scanCode}>
<View className="bottom-btn">
{' '}
<Image
className="bottom-btn-img"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/scancode.png"
/>{' '}
扫码添加设备
</View>
</View> */}
</View>
)}
{list && !list.length && (
<View className="no-deviece-container">
<View>
<Image
className="no-device-img"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/no-device.png"
/>
</View>
<View className="tips">您未添加设备，去商城挑选心仪的设备吧！</View>
<View
className="go-shop"
onClick={() => {
Taro.navigateTo({ url: '/pages/home/device/shop_list/index' })
}}
>
去商城
</View>
</View>
)}
{/* <AtModal isOpened>
<AtModalContent>
<View className="select-item" onClick={() => this.selectItem('')}>
......
src/pages/home/device/group_list/index.tsx
......@@ -2,7 +2,7 @@ import api from '@/api/index'
import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui'
import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Input, Image } from '@tarojs/components'
import Modal from '@/conpoments/modal'
import { showMyToast } from '@/common/utils'
......@@ -46,6 +46,9 @@ interface DeviceGroup {
}
class DeviceGroup extends Component {
config: Config = {
navigationBarTitleText: '设备组'
}
protected page = 1
constructor(props: any) {
super(props)
......
src/pages/home/device/index.scss
@import '@styles/var.scss';
@import '~taro-ui/dist/style/components/tabs.scss';
// @import '~taro-ui/dist/style/components/tabs.scss';
.at-tabs__item-underline {
background: #ff9110 !important;
width: 38px;
left: calc(50% - 19px);
height: 6px;
border-radius: 3px;
}
// .at-tabs__item-underline {
// background: #ff9110 !important;
// width: 38px;
// left: calc(50% - 19px);
// height: 6px;
// border-radius: 3px;
// }
.at-tabs__item--active {
color: #000 !important;
font-size: 38px !important;
}
// .at-tabs__item--active {
// color: #000 !important;
// font-size: 38px !important;
// }
src/pages/home/device/index.tsx
......@@ -38,7 +38,7 @@ class Device extends Component {
const { windowHeight } = Taro.getSystemInfoSync()
this.state = {
current: 0,
windowHeight: windowHeight - 45
windowHeight: windowHeight
}
}
......@@ -49,26 +49,29 @@ class Device extends Component {
render() {
const { current, windowHeight } = this.state
return (
<AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
<AtTabsPane current={current} index={0}>
<View style={{ height: `${windowHeight}px` }}>
<View className="hui" />
<DeviceList height={windowHeight} />
</View>
</AtTabsPane>
<AtTabsPane className="at-tabs-page" current={current} index={1}>
<View style={{ height: `${windowHeight}px`, background: '#f7f7f7' }}>
<View className="hui" />
<DeviceGroup height={windowHeight - 10} />
</View>
</AtTabsPane>
<AtTabsPane className="at-tabs-page" current={current} index={2}>
<View style={{ height: `${windowHeight}px`, background: '#f7f7f7' }}>
<View className="hui" />
<ShopList height={windowHeight - 10} />
</View>
</AtTabsPane>
</AtTabs>
<View style={`height: ${windowHeight}px;`}>
<DeviceList height={windowHeight} />
</View>
// <AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
// <AtTabsPane current={current} index={0}>
// <View style={{ height: `${windowHeight}px` }}>
// <View className="hui" />
// <DeviceList height={windowHeight} />
// </View>
// </AtTabsPane>
// <AtTabsPane className="at-tabs-page" current={current} index={1}>
// <View style={{ height: `${windowHeight}px`, background: '#f7f7f7' }}>
// <View className="hui" />
// <DeviceGroup height={windowHeight - 10} />
// </View>
// </AtTabsPane>
// <AtTabsPane className="at-tabs-page" current={current} index={2}>
// <View style={{ height: `${windowHeight}px`, background: '#f7f7f7' }}>
// <View className="hui" />
// <ShopList height={windowHeight - 10} />
// </View>
// </AtTabsPane>
// </AtTabs>
)
}
}
......
src/pages/home/device/shop_list/index.tsx
......@@ -3,7 +3,7 @@ import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui'
import { connect } from '@tarojs/redux'
import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import DeviceItem from '@/conpoments/shop_device_item'
import { getShopDeviceList } from '@/actions/asyncCounter'
......@@ -71,6 +71,9 @@ interface MyDevice {
})
)
class MyDevice extends Component {
config: Config = {
navigationBarTitleText: '设备商城'
}
protected page = 1
constructor(props: any) {
super(props)
......
src/pages/home/film/film_list/index.tsx
......@@ -233,21 +233,21 @@ class Films extends Component {
pullingDown={done => this.onDownRefresh(done)}
>
{list.map(item => (
<AtSwipeAction
autoClose
key={item.filmId}
onClick={() => this.handleItem(item)}
options={[
// {
// text: '删除',
// style: {
// backgroundColor: '#F32B2B'
// }
// }
]}
>
<FilmListItem onClick={() => this.goDetail(item)} {...item} onSetting={() => {this.onSetting(item)}}/>
</AtSwipeAction>
<FilmListItem key={item.filmId} onClick={() => this.goDetail(item)} {...item} onSetting={() => {this.onSetting(item)}}/>
// <AtSwipeAction
// autoClose
// key={item.filmId}
// onClick={() => this.handleItem(item)}
// options={[
// // {
// // text: '删除',
// // style: {
// // backgroundColor: '#F32B2B'
// // }
// // }
// ]}
// >
// </AtSwipeAction>
))}
</ListView>
</View>
......
src/pages/home/tempaltes/conpoments/home_item/index.scss
......@@ -2,7 +2,12 @@
.home-item {
width: 100%;
margin-bottom: 90px;
background-color: white;
padding-bottom: 20px;
margin-bottom: 20px;
padding-left: 20px;
padding-top: 36px;
box-sizing: border-box;
&-title {
display: flex;
......@@ -13,7 +18,7 @@
}
.title-name {
font-size: 30px;
font-size: 36px;
color: #000;
font-weight: bold;
}
......
src/pages/home/tempaltes/conpoments/temp_item/index.scss
......@@ -34,13 +34,13 @@
width: 100%;
height: 187px;
background-color: #ccc;
border-radius: 6px;
border-radius: 10px;
}
.temp-img2 {
width: 100%;
height: 613px;
border-radius: 6px;
border-radius: 10px;
}
.temp-name-container {
......
src/pages/home/tempaltes/scss/index.scss
......@@ -30,7 +30,7 @@
margin-bottom: 10px;
.type-tab-item {
padding: 0 20px;
padding: 0 40px;
position: relative;
}
......@@ -70,12 +70,13 @@
&-content {
flex: 1;
overflow: hidden;
background: #fff;
// background: #fff;
&-scroll {
width: 100%;
height: 100%;
padding: 20px 20px 0;
padding-left: 0;
@include eject(box-sizing, border-box);
......
src/pages/home/user/index.scss
......@@ -13,7 +13,7 @@
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: url('https://visual-clouds.oss-cn-beijing.aliyuncs.com/js/card.png') no-repeat center;
background-size: 100%;
&-avatar {
......@@ -30,27 +30,58 @@
}
&-phone {
font-size: 28px;
font-size: 36px;
color: #fff;
letter-spacing: 0.43px;
vertical-align: middle;
}
.vip-icon {
margin-left: 18px;
height: 44px;
line-height: 44px;
width: 100px;
vertical-align: middle;
}
&-vip {
// padding-left: 20px;
padding-top: 20px;
font-size: 28px;
color: #fff;
background: rgba(254, 74, 26, 1);
border-radius: 22px;
display: inline-block;
// padding-top: 20px;
padding: 0 18px;
font-size: 24px;
height: 40px;
line-height: 40px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
letter-spacing: 0.43px;
}
}
&-item {
margin-bottom: 40px;
padding: 20px 20px 0 20px;
margin-bottom: 20px;
padding: 0 20px 0 40px;
background-color: white;
&-view {
padding-bottom: 20px;
&-icon {
width: 38px;
height: 38px;
margin-right: 29px;
}
height: 108px;
display: flex;
align-items: center;
font-size: 32px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
// padding-bottom: 20px;
border-bottom: 1px solid rgba(245, 245, 245, 1);
}
}
......
src/pages/home/user/index.tsx
......@@ -84,10 +84,18 @@ class User extends Component {
<View className="user-top-info">
<Image className="user-top-info-avatar" src={avatarUrl} />
<View className="user-top-info-name">
<Text>{nickName}</Text>
<View className="user-top-info-phone">{userPhone}</View>
<View className="user-top-info-phone">
{userPhone}
{vipState === 'DISABLE' ? (
<Image
mode="aspectFit"
className="vip-icon"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/vip-icon.png"
/>
) : null}
</View>
<View className="user-top-info-vip">
{vipState === 'DISABLE' ? 'VIP已到期' : 'VIP' + String(vipTime).slice(0, 10)}
{vipState === 'DISABLE' ? '会员已到期' : `会员 ${String(vipTime).slice(0, 10)} 到期`}
</View>
</View>
{/* <View className="user-top-info-vip">
......@@ -97,26 +105,59 @@ class User extends Component {
<View className="user-item">
<View
className="user-item-view"
onClick={() => this.goPage('/pages/home/device/my_film/index')}
onClick={() => this.goPage('/pages/home/device/shop_list/index')}
>
<Text>我的作品</Text>
<Image
mode="aspectFit"
className="user-item-view-icon"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/shop-icon.png"
/>
<Text>商城</Text>
</View>
</View>
<View className="user-item">
<View
className="user-item-view"
onClick={() => this.goPage('/pages/home/device/my_device/index')}
onClick={() => this.goPage('/pages/home/device/group_list/index')}
>
<Text>我的设备</Text>
<Image
mode="aspectFit"
className="user-item-view-icon"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/group-icon.png"
/>
<Text>设备组</Text>
</View>
<View
className="user-item-view"
onClick={() => this.goPage('/pages/home/film/schedule_list/index')}
>
<Image
mode="aspectFit"
className="user-item-view-icon"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/schedule-icon.png"
/>
<Text>日程</Text>
</View>
</View>
<View className="user-item">
<View className="user-item-view">
<Text>帮助</Text>
</View>
<View
className="user-item-view"
onClick={() => this.goPage('/pages/home/tempaltes/collection')}
>
<Text>我的收藏</Text>
<Image
mode="aspectFit"
className="user-item-view-icon"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/cart-icon.png"
/>
<Text>收藏</Text>
</View>
<View className="user-item-view">
<Image
mode="aspectFit"
className="user-item-view-icon"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/help-icon.png"
/>
<Text>帮助</Text>
</View>
</View>
{/* <View className="user-item">
......
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