Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit 4241bbb7 by hank
Options

修改模板详情页面

parent 8fc6df75
Showing with 469 additions and 76 deletions
package.json
......@@ -21,7 +21,6 @@
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"precommit": "npm run lint",
"lint": "tslint --project ./tsconfig.json && stylelint \"./src/**/*.scss\"",
"run:shell": "cd ../taro-native-shell/ && yarn android"
},
......
src/app.tsx
......@@ -62,7 +62,7 @@ class App extends Component {
'pages/home/film/schedule_add/index',
'pages/home/film/schedule_add/components/films/index',
'pages/home/film/schedule_add/components/device/index',
'pages/home/tempaltes/detail',
// 'pages/home/tempaltes/detail',
'pages/home/tempaltes/collection',
'pages/home/tempaltes/template_type',
'pages/home/tempaltes/template_type_detail',
......
src/common/events.ts 0 → 100644
const EventBus = (function() {
function EventBusClass() {
this.msgQueues = {}
}
EventBusClass.prototype = {
// 将消息保存到当前的消息队列中
on: function(msgName, func) {
if (this.msgQueues.hasOwnProperty(msgName)) {
if (typeof this.msgQueues === 'function') {
this.msgQueues[msgName] = [this.msgQueues[msgName], func]
} else {
this.msgQueues[msgName] = [...this.msgQueues[msgName], func]
}
} else {
this.msgQueues[msgName] = func
}
},
// 消息队列中仅保存一个消息
one: function(msgName, func) {
// 无需检查msgName是否存在
this.msgQueues[msgName] = func
},
// 发送消息
emit: function(msgName, msg) {
if (!this.msgQueues.hasOwnProperty(msgName)) {
return
}
if (typeof this.msgQueues[msgName] === 'function') {
this.msgQueues[msgName](msg)
} else {
this.msgQueues[msgName].map(fn => {
console.log(fn, 'fn')
fn(msg)
})
}
},
// 移除消息
off: function(msgName) {
if (!this.msgQueues.hasOwnProperty(msgName)) {
return
}
delete this.msgQueues[msgName]
}
}
var EventBus = new EventBusClass()
return EventBus
})()
export default EventBus
src/conpoments/modal/index.scss
......@@ -44,7 +44,7 @@
justify-content: space-between;
padding: 0 56px;
border: 0 solid $border-color;
border-top-width: 1px;
border-top-width: 0;
}
&-confirm-text {
......
src/pages/home/film/schedule_add/components/device/index.scss
......@@ -265,3 +265,21 @@
}
}
}
.model-container {
.no-device-img-tip {
display: block;
width: 437px;
height: 319px;
margin: 0 auto;
margin-bottom: 15px;
}
.word-tips {
font-size: 34px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
padding-bottom: 100px;
}
}
src/pages/home/film/schedule_add/components/device/index.tsx
......@@ -23,6 +23,7 @@ type PageState = {
searchName: string
checked: Set<string>
showModal: boolean
showShopModal: boolean
groupList: any[]
list: any[]
allList: any[]
......@@ -53,6 +54,7 @@ class DeviceSelect extends Component {
page: 1,
checked: new Set(),
showModal: false,
showShopModal: false,
groupList: [{ equipmentGroupName: '全部', equipmentGroupId: '', equipmentCount: 0 }],
activeIndex: 0,
searchName: '',
......@@ -123,6 +125,13 @@ class DeviceSelect extends Component {
console.log(res.calendarId, 'filmData')
})
}
handleShowShopModal() {
this.setState({
showShopModal: !this.state.showShopModal
})
}
getCDetail() {
/**
* 获取日程详情
......@@ -283,6 +292,7 @@ class DeviceSelect extends Component {
allList,
activeIndex,
allCount,
showShopModal,
TabIndex,
searchName
} = this.state
......@@ -322,7 +332,6 @@ class DeviceSelect extends Component {
<View className="device-tab-item-word">
<Text
onClick={() => {
console.log(123132132132)
this.setState({ TabIndex: 0 })
}}
>
......@@ -408,7 +417,7 @@ class DeviceSelect extends Component {
<View
className="go-shop"
onClick={() => {
Taro.navigateTo({ url: '/pages/home/device/shop_list/index' })
this.handleShowShopModal()
}}
>
去商城
......@@ -449,9 +458,28 @@ class DeviceSelect extends Component {
完成
</Button>
</View>
{/* <Modal>
<View>该作品已被保存，是否添加设备</View>
</Modal> */}
{showShopModal && (
<Modal
title=""
onCancel={() => {
this.handleShowShopModal()
}}
onConfirm={() => {
this.handleShowShopModal()
Taro.navigateTo({ url: '/pages/home/device/shop_list/index' })
}}
>
<View className="model-container">
<View>
<Image
className="no-device-img-tip"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/no-device2.png"
/>
</View>
<View className="word-tips">该作品已被保存，是否添加设备</View>
</View>
</Modal>
)}
</View>
)
}
......
src/pages/home/tempaltes/conpoments/detail_top/index.scss
@import '@styles/var.scss';
.derail-top {
position: relative;
padding-top: 90px;
.page-count {
position: absolute;
top: 28px;
min-width: 108px;
height: 38px;
text-align: center;
line-height: 38px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
background: rgba(216, 216, 216, 1);
border-radius: 19px;
left: calc(50% - 54px);
}
}
.temp-top-img {
width: 100%;
// height: auto;
min-height: 56.25vw;
width: 682px;
height: 384px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
display: block;
margin: 0 auto;
border-radius: 14px;
}
.temp-top-img2 {
width: 100%;
height: 1200px;
width: 339px;
height: 602px;
display: block;
margin: 0 auto;
border-radius: 14px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
}
.temp-top-info-bar {
height: 20px;
background-color: $bgColor;
height: 18px;
background: rgba(250, 250, 250, 1);
}
.temp-top-text-wrapper {
padding-left: 20px;
padding-bottom: 20px;
padding-top: 20px;
position: relative;
padding: 0 34px;
padding-bottom: 30px;
padding-top: 30px;
// position: relative;
}
.temp-top-title {
font-size: 28px;
color: $text-color;
font-size: 36px;
color: rgb(34, 14, 14);
font-weight: bold;
}
.temp-top-describe {
padding-top: 10px;
color: #ccc;
font-size: 26px;
font-size: 28px;
}
.temp-top-collection {
width: 50px;
height: 50px;
width: 40px;
height: 34px;
position: absolute;
right: 30px;
top: 10px;
right: 34px;
top: 28px;
}
src/pages/home/tempaltes/conpoments/detail_top/index.tsx
......@@ -19,6 +19,7 @@ type PageOwnProps = {
type PageState = {
collectionState: boolean
collectionId: string
current: 0
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
......@@ -41,6 +42,14 @@ class DerailTop extends Component {
})
}
}
swiperChange(e) {
console.log(e, 'swiperChange')
this.setState({
current: e.detail.current
})
}
toggleCollection() {
const { collectionState, collectionId } = this.state
const { templateId } = this.props
......@@ -88,12 +97,16 @@ class DerailTop extends Component {
render() {
let { templateUrl, templateName, templateDescribe, templateShow, templateId } = this.props
templateUrl = templateUrl || ''
const { collectionState } = this.state
const { collectionState, current } = this.state
let collectionUrl = collectionState
? 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/collectionSelect.png'
? 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/collection-select.png'
: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/collection.png'
return (
<View className="derail-top">
<View className="page-count">
{' '}
{current ? current + 1 : 1}/ {templateUrl.split(',').length}{' '}
</View>
<View className="temp-top-info">
<Swiper
className={
......@@ -102,8 +115,8 @@ class DerailTop extends Component {
indicatorColor="#999"
indicatorActiveColor="#333"
circular
indicatorDots
autoplay
onChange={this.swiperChange}
>
{templateUrl.split(',').map(item => {
return (
......@@ -120,9 +133,9 @@ class DerailTop extends Component {
</Swiper>
<View className="temp-top-text-wrapper">
<Text className="temp-top-title">{templateName}</Text>
<View>
<Text className="temp-top-describe">{templateDescribe}</Text>
<View className="temp-top-title">{templateName}</View>
<View className="temp-top-describe">
<Text>{templateDescribe}</Text>
</View>
{templateId ? (
<Image
......
src/pages/home/tempaltes/conpoments/temp_detail_content/index.scss
@import '@styles/var.scss';
.temp-detail {
padding-bottom: 200px;
&-list {
padding: 20px 20px 0 20px;
padding: 20px 34px;
// padding: 0 0 0;
padding-top: 32px;
&-title {
margin-bottom: 20px;
margin-bottom: 27px;
font-size: 32px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333;
@include eject(display, block);
}
......
src/pages/home/tempaltes/conpoments/temp_detail_content/index.tsx
import TempItem from '../temp_item'
import TempItem from '../temp_item2'
import DetailTop from '../detail_top'
import { View, Text } from '@tarojs/components'
......@@ -21,7 +21,7 @@ export default function TempDetailContent(props: IProps) {
<DetailTop {...Object.assign(detailData, { templateId })} templateId2={templateId} />
<View className="temp-detail-list">
<Text className="temp-detail-list-title">我的作品({filmDataList.length})</Text>
<Text className="temp-detail-list-title">创建过的作品({filmDataList.length})</Text>
<View className="temp-detail-list-content">
{filmDataList && filmDataList.map(item => <TempItem {...item} key={item.templateId} />)}
</View>
......
src/pages/home/tempaltes/conpoments/temp_item/index.tsx
......@@ -6,6 +6,7 @@ import { View, Text, Image } from '@tarojs/components'
import { formatTime } from '@/common/utils'
import './index.scss'
import api from '@/api/index'
import events from '@/common/events'
type IProps = ITempItem
......@@ -38,7 +39,8 @@ class TempItem extends Component {
if (res.data === 0) {
Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?templateId=${templateId}` })
} else {
Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
// Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
events.emit('detailShow', templateId)
}
this.isload = false
Taro.hideLoading()
......@@ -78,10 +80,8 @@ class TempItem extends Component {
src={url.split(',')[0]}
/>
<View className="temp-name-container">
<Text className="temp-name">
{templateName || filmName + (' 创建于' + formatTime(updateTime))}
</Text>
{templateName !== undefined ? <Text className="temp-film-count">{filmCount}</Text> : null}
<Text className="temp-name">{templateName || filmName}</Text>
{updateTime && <View className="temp-time">{formatTime(updateTime)}</View>}
</View>
{/* {equipmentCount !== undefined ? (
<Text className="equipment-count">播放设备：{equipmentCount}台</Text>
......
src/pages/home/tempaltes/conpoments/temp_item2/index.scss 0 → 100644
@import '@styles/var.scss';
.collections {
.temp-item {
width: 100%;
margin-bottom: 20px;
position: relative;
}
}
.temp-item {
// 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: 328px;
height: 184px;
background-color: #ccc;
border-radius: 10px;
}
.temp-img2 {
width: 214px;
height: 379px;
border-radius: 10px;
}
.temp-name-container {
// display: flex;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
justify-content: space-between;
}
.temp-name {
width: 200px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
@include eject(display, block);
@include eject(box-sizing, border-box);
}
.temp-time {
width: 200px;
font-size: 22px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
@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_item2/index.tsx 0 → 100644
// import { ITempItem } from '../..'
import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { ITempItem } from '@/reducers/counter'
import { View, Text, Image } from '@tarojs/components'
import { formatTime } from '@/common/utils'
import './index.scss'
import api from '@/api/index'
type IProps = ITempItem
interface PageState {}
interface PageOwnProps {}
interface TempItem {
props: IProps
state: PageState
}
class TempItem extends Component {
protected isload = false
goDetail() {
const { templateId, filmId } = this.props
if (!this.isload) {
this.isload = true
if (filmId) {
Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
this.isload = false
// Taro.navigateTo({ url: `/pages/home/device/my_film/index` })
} else {
Taro.showLoading({
title: '加载中',
mask: true
})
api.tempalte
.getTempalteFilmCount(templateId)
.then(res => {
if (res.data === 0) {
Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?templateId=${templateId}` })
} else {
Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
}
this.isload = false
Taro.hideLoading()
})
.catch(() => {
this.isload = false
Taro.hideLoading()
})
}
} else {
setTimeout(() => {
this.isload = false
}, 200)
}
// Taro.navigateTo({ url: '/pages/home/device/my_film/index' })
}
render() {
let {
templateName,
templateUrl: url,
filmName,
equipmentCount,
updateTime,
templateShow,
filmCount,
templateEnvironment
} = this.props
url = url || ''
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]}
/>
<View className="temp-name-container">
<Text className="temp-name">{templateName || filmName}</Text>
{updateTime && <View className="temp-time">{formatTime(updateTime)}</View>}
</View>
{/* {equipmentCount !== undefined ? (
<Text className="equipment-count">播放设备：{equipmentCount}台</Text>
) : null} */}
</View>
)
}
}
export default TempItem as ComponentClass<PageOwnProps, PageState>
src/pages/home/tempaltes/detail.tsx
......@@ -5,12 +5,15 @@ import { ITempItem } from '@/reducers/counter'
import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { getWindiwHeight, showMyToast } from '@/common/utils'
import { View, Text, ScrollView, Button, Input } from '@tarojs/components'
import { View, Text, ScrollView, Image, Input } from '@tarojs/components'
import ListView from '@/conpoments/list_view'
import TempDetailContent from './conpoments/temp_detail_content'
import './scss/detail.scss'
import events from '../../../common/events'
type PageOwnProps = {}
type PageOwnProps = {
templateId: string
}
export interface IDetailData {
frameId: string
frameUrl: string
......@@ -34,19 +37,20 @@ type PageState = {
createFilmDescribe: string
}
type IProps = ITempItem & PageOwnProps
interface TempDetail {
props: ITempItem
props: IProps
state: PageState
}
class TempDetail extends Component {
config: Config = {
navigationBarTitleText: '模板详情'
}
// config: Config = {
// navigationBarTitleText: '模板详情'
// }
protected page = 1
constructor(props: any) {
super(props)
const templateId = this.$router.params.templateId
const templateId = this.$router.params.templateId || props.templateId
this.state = {
count: 0,
templateId,
......@@ -67,6 +71,7 @@ class TempDetail extends Component {
async getData() {
const { templateId } = this.state
console.log(this.props)
if (!templateId) return
try {
const [detailData, filmData] = await Promise.all([
......@@ -136,15 +141,15 @@ class TempDetail extends Component {
done()
}
shouldComponentUpdate(_nextProps: ITempItem, _nextState: PageState) {
const { detailData, filmDataList, showModal } = this.state
const { detailData: DD, filmDataList: FD, showModal: SM } = _nextState
return FD !== filmDataList || DD !== detailData || SM !== showModal
}
// shouldComponentUpdate(_nextProps: ITempItem, _nextState: PageState) {
// const { detailData, filmDataList, showModal } = this.state
// const { detailData: DD, filmDataList: FD, showModal: SM } = _nextState
// return FD !== filmDataList || DD !== detailData || SM !== showModal
// }
render() {
const { detailData, filmDataList, showModal, windowHeight, count, templateId } = this.state
console.log(detailData, filmDataList, 'render')
const { onClose } = this.props
return (
<View
className="temp-detail"
......@@ -166,22 +171,36 @@ class TempDetail extends Component {
pullingUp={done => this.pullingUp(done)}
pullingDown={done => this.pullingDown(done)}
>
<TempDetailContent
detailData={detailData}
filmDataList={filmDataList}
templateId={templateId}
/>
<View style={{ height: '20px' }} />
<View className="temp-detail-scroll-view">
<TempDetailContent
detailData={detailData}
filmDataList={filmDataList}
templateId={templateId}
/>
<View style={{ height: '20px' }} />
</View>
</ListView>
)}
</View>
<Button
type="primary"
className="temp-detail-bottom-btn bottom-btn"
onClick={this.createFilm}
<View
className="top-bar-container"
onClick={() => {
events.emit('detailClose')
onClose && onClose()
}}
>
创建作品
</Button>
<Image
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/down-icon2.png"
className="close"
/>
{/* <View className="page-count">1/10</View> */}
{/* <View className="cllection-icon"></View> */}
</View>
<View className="bottom-btn-container">
<View className="bottom-btn" onClick={this.createFilm}>
创建新的作品
</View>
</View>
{showModal ? (
<Modal title="作品信息" onConfirm={this.inputConfirm} onCancel={this.cancelModal}>
<View className="film-modal">
......
src/pages/home/tempaltes/index.tsx
......@@ -2,13 +2,12 @@ import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'
import { getTempList } from '@/actions/asyncCounter'
import Taro, { Component, Config } from '@tarojs/taro'
// import TempItem from './conpoments/temp_item'
import TempDetail from './detail'
import HomeItem from './conpoments/home_item'
import { View, Image, ScrollView, Text } from '@tarojs/components'
import Api from '@/api/index'
import './scss/index.scss'
import token from '@/common/token'
import events from '@/common/events'
type PageStateProps = {
list: any[]
count: number
......@@ -24,6 +23,7 @@ type PageState = {
page: number
list: []
showTempalte: string
templateId: string
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
......@@ -55,6 +55,7 @@ class Tempaltes extends Component {
this.state = {
page: 1,
list: [],
templateId: '',
showTempalte: 'HORIZONTAL'
}
}
......@@ -65,6 +66,20 @@ class Tempaltes extends Component {
async componentWillMount() {
console.log('componentWillMount')
this.getData()
events.on('detailShow', e => {
console.log('detailShow', e)
Taro.hideTabBar()
this.setState({
templateId: e
})
})
events.on('detailClose', e => {
console.log('detailClose')
Taro.showTabBar()
this.setState({
templateId: ''
})
})
}
componentDidShow() {
......@@ -110,7 +125,7 @@ class Tempaltes extends Component {
}
render() {
// const { list } = this.props
const { list, showTempalte } = this.state
const { list, showTempalte, templateId } = this.state
return (
<View className="temp">
<View className="temp-search-bar">
......@@ -157,6 +172,7 @@ class Tempaltes extends Component {
</View>
</ScrollView>
</View>
{templateId && <TempDetail templateId={templateId} />}
</View>
)
}
......
src/pages/home/tempaltes/scss/detail.scss
......@@ -2,19 +2,44 @@
@import '@styles/common.scss';
.temp-detail {
width: 100%;
width: 100vw;
display: flex;
position: relative;
padding-top: 116px;
box-sizing: border-box;
flex-direction: column;
background-color: white;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
height: 100vh;
z-index: 1000;
&-scroll {
height: calc(100vh - 116px);
flex: 1;
overflow: hidden;
padding-bottom: 90px;
// padding-top: 90px;
padding-bottom: 130px;
box-sizing: border-box;
background: white;
&-view {
height: 100%;
overflow: scroll;
}
}
.top-bar-container {
position: absolute;
left: 26px;
top: 116px;
height: 50px;
.close {
position: absolute;
top: 31px;
width: 37px;
height: 19px;
display: block;
}
}
......@@ -62,3 +87,8 @@
border: 1px solid $border-color;
}
}
.bottom-btn-container {
background: white !important;
font-weight: bold;
}
src/pages/home/tempaltes/template_type_detail.tsx
......@@ -87,7 +87,8 @@ class TemplateTypeDetail extends Component {
typeId,
templateShow,
tempList: [],
tagId
tagId,
filmDataList
} = this.state
this.setState({
page: 1
......@@ -102,7 +103,7 @@ class TemplateTypeDetail extends Component {
.then(res => {
this.setState({
tempList: res.list,
filmDataList: res.list,
filmDataList: this.page === 1 ? res.list : filmDataList.concat(res.list),
count: res.list.count
})
})
......
src/reducers/counter.ts
......@@ -12,6 +12,7 @@ export interface ITempItem {
updateTime?: string
templateEnvironment?: string
clickItem?: () => void
onClose?: () => void
}
export interface IInitialState {
tempData: {
......
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