index.tsx 3.03 KB
Newer Older
hank committed
1 2 3 4
import api from '@/api/index'
import { ComponentClass } from 'react'
import { showMyToast } from '@/common/utils'
import Taro, { Component, Config } from '@tarojs/taro'
hank committed
5
import { View, Text, Input, RichText, Image, ScrollView, Button } from '@tarojs/components'
hank committed
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

import './index.scss'

type PageStateProps = {}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  filmId?: any
  filmName?: any
  clientId: string
  equipmentId: string
  clientSecret: string
  equipmentUrl: string
  equipmentName: string
  equipmentDetails: string
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface DeviceDetail {
  props: IProps
  state: PageState
}

class DeviceDetail extends Component {
  config: Config = {
    navigationBarTitleText: '设备详情'
  }

  private equipmentId: string

  constructor(props: any) {
    super(props)
    this.equipmentId = this.$router.params.equipmentShopId
    this.state = {
      clientId: '',
      equipmentId: '',
      equipmentInfo: {},
      equipmentDetails: ''
    }
    this.buyDevice = this.buyDevice.bind(this)
  }

  componentWillMount() {
    this.getData()
  }

  async getData() {
    try {
      const res = await api.common.getShopDeviceDetail(this.equipmentId)
      const {
        clientId,
        equipmentId,
        clientSecret,
        equipmentUrl,
        equipmentName,
        equipmentDetails
      } = res
      this.setState({
        clientId,
        equipmentId,
        clientSecret,
        equipmentUrl,
        equipmentName,
        equipmentDetails
      })
      console.log({ res })
    } catch (error) {
      console.error(error)
    }
  }

  setDeviceName({ target }) {
    const { value } = target
    this.setState({ equipmentName: value })
  }

  setResolution({ target }) {
    const { value } = target
    this.setState({ equipmentResolution: value })
  }

  chengDirection({ currentTarget }: any) {
    const { value } = currentTarget
    if (value === 'horizontal') {
      this.setState({ equipmentStyle: 'CROSSWISE' })
    } else if (value === 'vertical') {
      this.setState({ equipmentStyle: 'LENGTHWAYS' })
    }
  }

  buyDevice() {
    console.log('设备购买功能暂未开通,敬请期待!')
    showMyToast('设备购买功能暂未开通,敬请期待!')
  }

  render() {
    const { equipmentName, equipmentUrl, equipmentDetails } = this.state
    return (
      <ScrollView className="device-detail" scrollY>
        <View className="device-detail-item">
          <View className="item-img-box">
            <Image className="item-img" src={equipmentUrl} />
          </View>
          <View className="item-detail">
hank committed
114 115
            <RichText nodes={equipmentDetails}>equipmentDetails</RichText>
            {/* {equipmentDetails} */}
hank committed
116 117 118
          </View>
        </View>

hank committed
119 120 121 122 123 124 125
        <Button
          type="primary"
          className="bottom-btn"
          onClick={() => {
            this.buyDevice()
          }}
        >
hank committed
126 127 128 129 130 131 132
          购买
        </Button>
      </ScrollView>
    )
  }
}
export default DeviceDetail as ComponentClass<PageOwnProps, PageState>