Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit 8f0255ad by hank
Options

影片信息编辑 影片新增页面删除页面 设备绑定优化

parent f336e851
Showing with 229 additions and 39 deletions
src/api/common.ts
......@@ -44,6 +44,13 @@ class UsersApi extends ApiClient {
createFilm(filmName: string, filmDescribe: string, templateId: string) {
return this.request({ url: '/template/add/film', data: { filmDescribe, filmName, templateId } })
}
/** 修改视片信息 */
updateFilmName(filmName: string, filmDescribe: string, filmId: string) {
return this.request({
url: '/template/update/film/base/info',
data: { filmDescribe, filmName, filmId }
})
}
/** 获取视片详情列表 */
getFilmDetailList(id: string, page: number) {
......@@ -61,17 +68,17 @@ class UsersApi extends ApiClient {
/** 获取我的视片列表 */
getMyFilmsList(page: number) {
return this.request({ url: `/myfilm/get/list`, data: { p: page, c: 10 } })
return this.request({ url: `/myfilm/get/list?p=${page}&c=10`, data: { p: page, c: 10 } })
}
/** 获取我商城设备列表 */
getShopDeviceList(page: number) {
return this.request({ url: '/equipmentShop/get/list', data: { p: page, c: 10 } })
return this.request({ url: `/equipmentShop/get/list?p=${page}&c=10`, data: { p: page, c: 10 } })
}
/** 获取我的设备列表 */
getMyDeviceList(page: number) {
return this.request({ url: '/myequipment/get/list', data: { p: page, c: 10 } })
return this.request({ url: `/myequipment/get/list?p=${page}&c=10`, data: { p: page, c: 10 } })
}
/** 获取商城设备详情 */
......
src/pages/home/device/device_bind/index.scss
......@@ -30,8 +30,15 @@
}
&-bottom-bar {
button {
width: 200px;
.all {
// width: 200px;
display: inline-block;
flex: 1;
}
.enter {
display: inline-block;
width: 150px;
}
padding: 0 20px;
......
src/pages/home/device/device_bind/index.tsx
......@@ -5,7 +5,7 @@ import { showMyToast } from '@/common/utils'
import DeviceItem from '@/conpoments/device_item'
import { getFilmList } from '@/actions/asyncCounter'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, ScrollView, Button, Checkbox } from '@tarojs/components'
import { View, Text, ScrollView, Button, Checkbox, Label } from '@tarojs/components'
import './index.scss'
type PageStateProps = {
......@@ -135,23 +135,28 @@ class DeviceSelect extends Component {
<View className="device-bind-scroll">
<ScrollView className="device-bind-scroll-view">
{list.map(item => (
<View key={item.equipmentId} className="device-bind-item">
<Checkbox
value=""
className="device-bind-item-checkbox"
onClick={() => this.changeItem(item)}
checked={checked.has(item.equipmentId)}
/>
<View className="device-bind-item-info">
<DeviceItem {...item} />
</View>
<View key={item.equipmentId}>
<Label className="device-bind-item" onClick={() => this.changeItem(item)}>
<Checkbox
value=""
className="device-bind-item-checkbox"
checked={checked.has(item.equipmentId)}
/>
<View className="device-bind-item-info">
<DeviceItem {...item} />
</View>
</Label>
</View>
))}
</ScrollView>
</View>
<View className="device-bind-bottom-bar">
<Text onClick={this.changeAllCheck}>全选，共选择{size}台</Text>
<Button onClick={this.updateBind}>确定</Button>
<Text className="all" onClick={this.changeAllCheck}>
全选，共选择{size}台
</Text>
<Button className="enter" onClick={this.updateBind}>
确定
</Button>
</View>
</View>
)
......
src/pages/home/tempaltes/detail.tsx
......@@ -101,7 +101,7 @@ class TempDetail extends Component {
return
}
try {
await api.common.createFilm(createFilmDescribe, createFilmName, templateId)
await api.common.createFilm(createFilmName, createFilmDescribe, templateId)
this.getData()
this.cancelModal()
showMyToast({ title: '创建成功' })
......
src/pages/home/tempaltes/film_detail.tsx
import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, ScrollView, Button } from '@tarojs/components'
import { View, Text, ScrollView, Button, Input } from '@tarojs/components'
import DetailTop from './conpoments/detail_top'
import DeviceItem from '@/conpoments/device_item'
import { showMyToast } from '@/common/utils'
import Modal from '@/conpoments/modal'
import './scss/film_detail.scss'
import api from '@/api/index'
......@@ -19,6 +21,7 @@ type PageState = {
filmInfo: any
filmId: string
filmList: any[]
showModal: boolean
deviceList: any[]
}
......@@ -42,6 +45,7 @@ class FilmDetail extends Component {
page: 1,
count: 0,
filmInfo: {},
showModal: false,
filmList: [],
deviceList: []
}
......@@ -93,21 +97,74 @@ class FilmDetail extends Component {
Taro.navigateTo({ url })
}
shouldComponentUpdate(_nextProps: IProps, _nextState: PageState) {
const { filmInfo, filmList } = this.state
const { filmInfo: _filmInfo, filmList: _filmList } = _nextState
return filmInfo !== _filmInfo || filmList !== _filmList
// shouldComponentUpdate(_nextProps: IProps, _nextState: PageState) {
// const { filmInfo, filmList } = this.state
// const { filmInfo: _filmInfo, filmList: _filmList } = _nextState
// return filmInfo !== _filmInfo || filmList !== _filmList
// }
cancelModal = () => {
this.setState({ showModal: false })
}
inputConfirm = async () => {
const {
filmInfo: { templateName, templateDescribe, filmId }
} = this.state
if (!templateName) {
showMyToast({ title: '视片名称不能为空~' })
return
}
try {
await api.common.updateFilmName(templateName, templateDescribe, filmId)
this.getData()
this.cancelModal()
showMyToast({ title: '更新成功' })
} catch (error) {
showMyToast({ title: '更新失败' })
}
}
showMyModal() {
this.setState({ showModal: true })
}
changeFilmName = ({ target }) => {
const { value } = target
const { filmInfo } = this.state
this.setState({
filmInfo: {
...filmInfo,
filmName: value
}
})
}
changeDescribeName = ({ target }) => {
const { value } = target
const { filmInfo } = this.state
this.setState({
filmInfo: {
...filmInfo,
filmDescribe: value
}
})
}
render() {
const { filmInfo, filmList } = this.state
const { filmInfo, filmList, showModal } = this.state
filmInfo.templateName = filmInfo.filmName
filmInfo.templateDescribe = filmInfo.filmDescribe
return (
<View className="film-detail">
<View className="film-detail-scroll">
<ScrollView className="film-detail-scroll-view" scrollY>
<DetailTop {...filmInfo} />
<View className="film-detail-scroll-top">
<DetailTop {...filmInfo} />
<View className="edit-btn" onClick={this.showMyModal}>
编辑
</View>
</View>
<View className="film-detail-list">
<Text>投放设备({filmList.length})</Text>
{filmList.map(item => {
......@@ -128,6 +185,26 @@ class FilmDetail extends Component {
更改绑定设备
</Button>
</View>
{showModal ? (
<Modal title="视片信息" onConfirm={this.inputConfirm} onCancel={this.cancelModal}>
<View className="film-modal">
<Text className="film-modal-text">视片名称</Text>
<Input
placeholder="请输入视片名称"
className="film-modal-input"
value={filmInfo.templateName}
onInput={this.changeFilmName}
/>
<Text className="film-modal-text">视片描述</Text>
<Input
placeholder="请输入视片描述"
className="film-modal-input"
value={filmInfo.templateDescribe}
onInput={this.changeDescribeName}
/>
</View>
</Modal>
) : null}
</View>
)
}
......
src/pages/home/tempaltes/film_edit.tsx
......@@ -53,14 +53,62 @@ class FilmDetail extends Component {
this.setValue = this.setValue.bind(this)
this.updateFilm = this.updateFilm.bind(this)
}
addPage(index?) {
const { filmData, pageIndex } = this.state
let newPageList = JSON.parse(JSON.stringify(filmData.pageList))
newPageList.splice(pageIndex, 0, filmData.pageList[pageIndex])
console.log(newPageList, 'newPageList', 'pageIndex')
this.setState({
filmData: {
...filmData,
pageList: newPageList
}
})
}
delPage(index?) {
const { filmData, pageIndex } = this.state
let pageList = filmData.pageList
pageList.splice(pageIndex, 1)
this.setState({
filmData: {
...filmData,
pageList: pageList
},
pageIndex: 0
})
}
editPage() {
const { resourceUrl, filmData } = this.state
const url = `/pages/home/tempaltes/film_page`
Taro.setStorage({ key: 'filmData', data: JSON.stringify(filmData) }).then(() => {
Taro.setStorage({ key: 'resourceUrl', data: resourceUrl }).then(() => {
Taro.navigateTo({ url })
// const { resourceUrl, filmData } = this.state
// const url = `/pages/home/tempaltes/film_page`
// Taro.setStorage({ key: 'filmData', data: JSON.stringify(filmData) }).then(() => {
// Taro.setStorage({ key: 'resourceUrl', data: resourceUrl }).then(() => {
// Taro.navigateTo({ url })
// })
// })
const { filmData } = this.state
let pageList = filmData.pageList || []
if (pageList.length) {
Taro.showActionSheet({
itemList: ['新增本页', '删除本页']
})
})
.then(res => {
if (res.tapIndex === 0) {
this.addPage()
}
if (res.tapIndex === 1) {
this.delPage()
}
console.log(res.errMsg, res.tapIndex)
})
.catch(err => console.log(err.errMsg))
} else {
Taro.showToast({
title: '当页面数量为1时不可删除',
icon: 'none',
duration: 1000
})
}
}
componentWillMount() {
this.getData()
......@@ -188,11 +236,11 @@ class FilmDetail extends Component {
filmInfo.templateName = filmInfo.filmName
filmInfo.templateDescribe = filmInfo.filmDescribe
const pageList = filmData.pageList || []
console.log('film-edit render', pageList)
console.log('film-edit render', filmInfo)
return (
<View className="film-detail">
<View className="film-detail-scroll">
<View className="film-info">
{/* <View className="film-info">
<Text className="film-info-text">视片名称</Text>
<Input
placeholder="请输入视片名称"
......@@ -207,9 +255,9 @@ class FilmDetail extends Component {
value={filmInfo.filmDescribe}
onInput={this.changeDescribeName}
/>
</View>
<ScrollView className="film-detail-scroll-view" scrollX>
<View className="page-container">
</View> */}
<ScrollView className="film-detail-scroll-view" className={filmInfo.templateShow === 'VERTICAL' ? 'film-detail-scroll-view2' : 'film-detail-scroll-view'} scrollX>
<View className="page-container" className={filmInfo.templateShow === 'VERTICAL' ? 'page-container page-container2' : 'page-container'}>
{pageList.map((item, index) => {
// const name = item.name
return (
......@@ -220,7 +268,7 @@ class FilmDetail extends Component {
this.changePage(index)
}}
>
<Image src={item.thumb} className="page-thumb" />
<Image src={item.thumb} className={filmInfo.templateShow === 'VERTICAL' ? 'page-thumb2' : 'page-thumb'} />
<View>{item.name}</View>
</View>
)
......
src/pages/home/tempaltes/scss/film_detail.scss
@import "@styles/var.scss";
@import '@styles/var.scss';
.film-detail {
width: 100%;
......@@ -10,10 +10,26 @@
&-scroll {
flex: 1;
overflow: auto;
// position: relative;
&-top {
// height: 100%;
position: relative;
}
&-view {
height: 100%;
}
.edit-btn {
position: absolute;
width: 80px;
height: 30px;
line-height: 30px;
right: 30px;
bottom: 44px;
color: #ff9110;
}
}
&-list {
......@@ -30,3 +46,20 @@
}
}
}
.film-modal {
padding: 20px 50px;
&-text {
font-size: 28px;
}
&-input {
padding: 10px;
font-size: 28px;
border-radius: 6px;
margin: 15px 0 20px;
color: $input-color;
border: 1px solid $border-color;
}
}
src/pages/home/tempaltes/scss/film_edit.scss
......@@ -37,6 +37,15 @@
width: 260px;
height: 180px;
}
.page-thumb2 {
width: 260px;
height: 462px;
}
}
.page-container2 {
height: 500px !important;
}
&-scroll {
......@@ -46,6 +55,10 @@
&-view {
height: 280px;
}
&-view2 {
height: 580px;
}
}
&-list {
......
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