新增应用

src/api/common.ts

@@ -324,6 +324,13 @@ class UsersApi extends ApiClient {
       }
     })
   }
+  /** 获取应用列表 */
+  getApplicationList(page: number = 1, limit: number = 10) {
+    return this.request({
+      method: 'post',
+      url: `/application/get/list?p=${page}&c=${limit}`
+    })
+  }
 }
 
 export default new UsersApi()

src/app.tsx

@@ -66,6 +66,8 @@ class App extends Component {
       'pages/home/tempaltes/collection',
       'pages/home/tempaltes/template_type',
       'pages/home/tempaltes/template_type_detail',
+      'pages/home/application/index',
+      'pages/home/application/app_detail/index',
       'pages/home/index',
       'pages/index/index'
       // 'pages/home/tempaltes/detail'
@@ -98,12 +100,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/application/index',
+          text: '应用',
+          iconPath: './assets/images/schedule.png',
+          selectedIconPath: './assets/images/schedule-selcet.png'
+        },
         {
           pagePath: 'pages/home/user/index',
           text: '个人中心',

src/common/index.ts

@@ -4,7 +4,8 @@ export const FETCH_TIME_OUT = 5000
 export const BASE_URL = 'https://dev-server.bdideal.com'
 export const WEBVIEW_URL = 'https://dev-visual.bdideal.com'
 // export const WEBVIEW_URL = 'http://127.0.0.1:8080'
-
+// 第三方应用储存用户信息和认证应用ID
+export const AUTH_WEBVIEW_URL = 'https://visual-clouds.bdideal.com/miniprogram/auth.html'
 /** 蓝牙的服务 uuid */
 export const BLE_SERVICE_ID = '000088A0-0000-1000-8000-00805F9B34FB'
 

src/pages/home/application/app_detail/index.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { View, WebView } from '@tarojs/components'
+import { showMyToast } from '@/common/utils'
+import token from '@/common/token'
+import { AUTH_WEBVIEW_URL, defaultShareMessage } from '@/common/index'
+import api from '@/api/index'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {
+  page: number
+  AppInfo: any
+  AppId: string
+  url: string
+  strangerApplyId: string
+  showModal: boolean
+  deviceList: any[]
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface AppDetail {
+  props: IProps
+  state: PageState
+}
+
+class AppDetail extends Component {
+  config: Config = {
+    navigationBarTitleText: ''
+    // navigationStyle: undefined
+  }
+
+  constructor() {
+    super()
+    const AppId = this.$router.params.appId
+    const url = this.$router.params.url
+    const strangerApplyId = this.$router.params.strangerApplyId
+    console.log(AppId, url, strangerApplyId)
+    this.state = {
+      AppId,
+      page: 1,
+      url: url,
+      AppInfo: {},
+      strangerApplyId,
+      showModal: false,
+      deviceList: []
+    }
+    this.chengDevice = this.chengDevice.bind(this)
+    this.goEdit = this.goEdit.bind(this)
+  }
+
+  componentWillMount() {
+    // this.getData()
+    // setTimeout(() => {
+    //   Taro.navigateBack({
+    //     delta: -1
+    //   })
+    // }, 10000)
+    // Taro.showLoading({
+    //   title: '资源加载中',
+    //   mask: true
+    // })
+  }
+  componentDidShow() {
+    // this.getData()
+  }
+  async getData() {
+
+  }
+
+  chengDevice() {
+    console.log('chengDevice')
+    const { AppId } = this.state
+    const url = `/pages/home/device/device_bind/index?AppId=${AppId}`
+    Taro.navigateTo({ url })
+  }
+  getAppDeviceList() {
+
+  }
+  goEdit() {
+    console.log('chengDevice')
+    const { AppId } = this.state
+    const url = `/pages/home/tempaltes/App_edit?AppId=${AppId}`
+    Taro.navigateTo({ url })
+  }
+
+  cancelModal = () => {
+    this.setState({ showModal: false })
+  }
+
+  inputConfirm = async () => {
+    const {
+      AppInfo: { templateName, templateDescribe, AppId }
+    } = this.state
+    if (!templateName) {
+      showMyToast({ title: '作品名称不能为空~' })
+      return
+    }
+    try {
+      await api.common.updateAppName(templateName, templateDescribe, AppId)
+      this.getData()
+      this.cancelModal()
+      showMyToast({ title: '更新成功' })
+    } catch (error) {
+      showMyToast({ title: '更新失败' })
+    }
+  }
+
+  showMyModal() {
+    this.setState({ showModal: true })
+  }
+
+  changeAppName = ({ target }) => {
+    const { value } = target
+    const { AppInfo } = this.state
+    this.setState({
+      AppInfo: {
+        ...AppInfo,
+        AppName: value
+      }
+    })
+  }
+
+  changeDescribeName = ({ target }) => {
+    const { value } = target
+    const { AppInfo } = this.state
+    this.setState({
+      AppInfo: {
+        ...AppInfo,
+        AppDescribe: value
+      }
+    })
+  }
+  webviewLoad() {
+    Taro.hideLoading()
+  }
+  onShareAppMessage(e) {
+    return defaultShareMessage
+  }
+  render() {
+    const { AppInfo, AppId, url, strangerApplyId } = this.state
+    return (
+      <View className="App-detail">
+        <WebView
+          src={`${AUTH_WEBVIEW_URL}?url=${url}&aid=${strangerApplyId
+            }&token=${token.getToken()}`}
+          onLoad={() => {
+            this.webviewLoad()
+          }}
+        />
+      </View>
+    )
+  }
+}
+export default AppDetail as ComponentClass<PageOwnProps, PageState>

src/pages/home/application/app_list/index.scss

+@import '@styles/var.scss';
+
+.device-list {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: $bgColor;
+  // display: flex;
+  // flex-direction: column;
+
+  &-add-btn {
+    right: 0;
+    left: 0;
+    bottom: 100px;
+    width: 108px;
+    height: 108px;
+    margin: 0 auto;
+    line-height: 108px;
+    display: flex;
+    color: white;
+    font-size: 50px;
+    position: absolute;
+    border-radius: 60px;
+    align-items: center;
+    justify-content: center;
+    background-color: $bgColor;
+    background-image: linear-gradient(176deg, #ffab20 0%, #ff720e 97%);
+    box-shadow: 0 8px 10px 0 rgba(226, 124, 64, 0.2);
+
+    .icon {
+      width: 38px;
+      height: 38px;
+    }
+  }
+
+  .group-item-container {
+    margin: 15px 24px;
+  }
+
+  .group-item {
+    position: relative;
+    height: 100px;
+    line-height: 100px;
+    padding-left: 26px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 5px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #333;
+    font-size: 30px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      -webkit-transform-origin: center;
+      -ms-transform-origin: center;
+      transform-origin: center;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      pointer-events: none;
+      top: auto;
+      left: 24px;
+      right: 0;
+      bottom: 0;
+      -webkit-transform: scaleY(0.5);
+      -ms-transform: scaleY(0.5);
+      transform: scaleY(0.5);
+      border-bottom: 1px solid #d6e4ef;
+    }
+  }
+
+  &-select {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: absolute;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    background-color: rgba($color: #000, $alpha: 0.7);
+    z-index: 2;
+
+    &-modal {
+      width: 400px;
+      padding: 0 20px;
+      border-radius: 6px;
+      background-color: white;
+
+      &-item {
+        padding: 20px 0;
+      }
+    }
+  }
+}
+
+.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/application/app_list/index.tsx

+import api from '@/api/index'
+import { ComponentClass } from 'react'
+import { AtSwipeAction } from 'taro-ui'
+import ListView from '@/conpoments/list_view'
+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'
+import { defaultShareMessage } from '@/common/index'
+
+import './index.scss'
+export interface IDeviceItem {
+  filmId: any
+  filmName: any
+  mqttTopic: string
+  equipmentType: any
+  equipmentId: string
+  equipmentUrl: string
+  equipmentName: string
+  equipmentState: string
+  calendarId?: string
+}
+
+type PageStateProps = {
+  list: any[]
+  count: number
+}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {
+  height: number
+}
+
+type PageState = {
+  showModal: boolean
+  temp: any
+  deviceList: IDeviceItem[]
+  list: any[]
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface AppLication {
+  props: IProps
+  state: PageState
+}
+
+class AppLication extends Component {
+  config: Config = {
+    navigationBarTitleText: '应用'
+  }
+  protected page = 1
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      deviceList: [],
+      list: [],
+      showModal: false,
+      temp: {
+        equipmentGroupName: ''
+      }
+    }
+    this.cancelModal = this.cancelModal.bind(this)
+    this.AddGroup = this.AddGroup.bind(this)
+    this.inputConfirm = this.inputConfirm.bind(this)
+  }
+
+  async componentWillMount() {
+    this.getDate()
+  }
+  onShareAppMessage(e) {
+    return defaultShareMessage
+  }
+  componentDidShow() {
+    this.page = 1
+    this.getDate()
+  }
+  async getDate() {
+    this.cancelModal()
+    // this.props.getFilmListData(this.page)
+    api.common.getGroupList().then(res => {
+      const list = res.list
+      this.setState({
+        list: list
+      })
+    })
+  }
+
+  AddGroup() {
+    // this.setState({
+    //   showModal: !this.state.showModal,
+    //   temp: {
+    //     equipmentGroupName: ''
+    //   }
+    // })
+  }
+
+  cancelModal() {
+    this.setState({ showModal: false })
+  }
+
+  selectItem(url: string) {
+    this.cancelModal()
+    Taro.navigateTo({ url })
+  }
+
+  async handleItem(item, info) {
+    const { text } = info
+    const { equipmentGroupId } = item
+    if (text === '编辑') {
+      // console.log('')
+      this.setState({
+        showModal: true,
+        temp: Object.assign({ equipmentGroupName: '测试组名' }, item)
+      })
+    } else if (text === '删除') {
+      Taro.showModal({ content: '确定要删除？' }).then(async ({ confirm }) => {
+        if (confirm) {
+          try {
+            await api.common.deleteGroup(equipmentGroupId)
+            this.getDate()
+            showMyToast({ title: '删除成功~' })
+          } catch (error) {
+            console.error(error)
+            showMyToast({ result: error, title: '删除失败~' })
+          }
+        }
+      })
+    }
+  }
+
+  async pullingUp(done: any) {
+    this.page++
+    await this.getDate()
+    done()
+  }
+
+  async pullingDown(done: any) {
+    this.page = 1
+    await this.getDate()
+    setTimeout(() => {
+      done()
+    }, 500)
+  }
+
+  goDetail(id, url = 'https://visual-clouds.bdideal.com/html/81462d155bac4302b05ddc2436bf295c/index.html', applayId = 1) {
+    let url2 = 'https://visual-clouds.bdideal.com/html/81462d155bac4302b05ddc2436bf295c/index.html'
+    Taro.navigateTo({
+      url: `/pages/home/application/app_detail/index?appId=${'lunpanid'}&strangerApplyId=${applayId}&url=${encodeURI(url2)}`
+    })
+  }
+
+  inputConfirm() {
+    console.log()
+    const { temp } = this.state
+    if (!temp.equipmentGroupName) {
+      showMyToast({ title: '请输入设备组名称' })
+      return
+    }
+    if (temp.equipmentGroupId) {
+      console.log('更新')
+      api.common
+        .editGroup(temp.equipmentGroupId, temp.equipmentGroupName)
+        .then(() => {
+          showMyToast({ title: '更新成功' })
+          this.cancelModal()
+          this.getDate()
+        })
+        .catch(() => {
+          showMyToast({ title: '更新失败' })
+        })
+    } else {
+      console.log('创建')
+      api.common
+        .addGroup(temp.equipmentGroupName)
+        .then(() => {
+          showMyToast({ title: '创建成功' })
+          this.getDate()
+        })
+        .catch(() => {
+          showMyToast({ title: '创建失败' })
+        })
+      this.cancelModal()
+    }
+  }
+
+  changeName({ target }) {
+    let value = target.value
+    this.setState({
+      temp: Object.assign(this.state.temp, {
+        equipmentGroupName: value
+      })
+    })
+  }
+
+  render() {
+    const { count, height } = this.props
+    const { showModal, temp, list } = this.state
+    let name = temp && temp.equipmentGroupId ? '编辑名称' : '新建设备组'
+    return (
+      <View className="device-list">
+        <ListView
+          count={count}
+          height={height}
+          dataListLength={list.length}
+          pullingUp={done => this.pullingUp(done)}
+          pullingDown={done => this.pullingDown(done)}
+        >
+          {list.map(item => (
+            <View key={item.equipmentId} className="group-item-container">
+              <AtSwipeAction
+                autoClose
+                key={item.equipmentId}
+                onClick={info => this.handleItem(item, info)}
+                options={[
+                  {
+                    text: '编辑',
+                    style: {
+                      backgroundColor: '#999'
+                    }
+                  },
+                  {
+                    text: '删除',
+                    style: {
+                      backgroundColor: '#F32B2B'
+                    }
+                  }
+                ]}
+              >
+                <View
+                  className="group-item"
+                  onClick={() => this.goDetail(item.equipmentGroupId, item.equipmentGroupName)}
+                >
+                  <View className="group-item-content">
+                    {item.equipmentGroupName}({item.equipmentCount})
+                  </View>
+                </View>
+              </AtSwipeAction>
+            </View>
+          ))}
+        </ListView>
+        <View className="device-list-add-btn" onClick={this.AddGroup}>
+          <Image
+            className="icon"
+            src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/create.png"
+          />
+        </View>
+        {showModal ? (
+          <Modal title={name} onConfirm={this.inputConfirm} onCancel={this.cancelModal}>
+            <View className="film-modal">
+              <Input
+                placeholder="请输入设备组名称不超过20字"
+                className="film-modal-input"
+                maxLength={20}
+                value={temp.equipmentGroupName}
+                onInput={this.changeName}
+              />
+            </View>
+          </Modal>
+        ) : null}
+      </View>
+    )
+  }
+}
+export default AppLication as ComponentClass<PageOwnProps, PageState>

src/pages/home/application/index.scss

+@import '@styles/var.scss';
+// @import '~taro-ui/dist/style/components/modal.scss';
+
+.at-modal__content {
+  padding: 52px 24px !important;
+  min-height: 0 !important;
+  max-height: 840px;
+  color: #666;
+}
+
+.device-container {
+  .modal {
+    .modal-bottom-btn {
+      justify-content: center !important;
+    }
+  }
+
+  .go-template-container {
+    padding-bottom: 83px;
+    padding-top: 100px;
+    font-size: 34px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(102, 102, 102, 1);
+  }
+
+  .go-tempalte {
+    width: 320px;
+    height: 245px;
+  }
+}
+
+.modal {
+  .modal-bottom-btn {
+    justify-content: center !important;
+  }
+}
+// @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--active {
+//   color: #000 !important;
+//   font-size: 38px !important;
+// }

src/pages/home/application/index.tsx

+import AppList from './app_list'
+import { ComponentClass } from 'react'
+import Taro, { Component, Config } from '@tarojs/taro'
+import './index.scss'
+import { View } from '@tarojs/components'
+import { defaultShareMessage } from '@/common/index'
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {
+  current: number
+  windowHeight: number
+  id: string
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface Device {
+  props: IProps
+  state: PageState
+}
+
+const tabList = [{ title: '我的设备' }, { title: '设备组' }, { title: '设备商城' }]
+class Device extends Component {
+  config: Config = {
+    navigationBarTitleText: '设备',
+    navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
+  }
+  constructor(props) {
+    super(props)
+
+    const { windowHeight } = Taro.getSystemInfoSync()
+    const id = Taro.getStorageSync('isAdd')
+    this.state = {
+      current: 0,
+      id: '1',
+      windowHeight: windowHeight
+    }
+  }
+
+  onShareAppMessage(e) {
+    return defaultShareMessage
+  }
+  componentDidMount() {
+    Taro.setNavigationBarTitle({
+      title: '设备'
+    })
+  }
+
+  componentDidShow() {
+    Taro.setNavigationBarTitle({
+      title: '设备'
+    })
+    const id = Taro.getStorageSync('isAdd')
+    this.setState({
+      id: this.$router.params.id || id
+    })
+  }
+  changePage = value => {
+    this.setState({ current: value })
+  }
+
+  render() {
+    const { current, windowHeight, id } = this.state
+    return (
+      <View className="device-container" style={`height: ${windowHeight}px;`}>
+        <AppList height={windowHeight} />
+      </View>
+
+    )
+  }
+}
+export default Device as ComponentClass<PageOwnProps, PageState>