icon 更换 设备模块

src/api/common.ts

@@ -64,7 +64,7 @@ class UsersApi extends ApiClient {
     return this.request({ url: `/myfilm/get/list`, data: { p: page, c: 10 } })
   }
 
-  /** 获取我的设备列表 */
+  /** 获取我商城设备列表 */
   getShopDeviceList(page: number) {
     return this.request({ url: '/equipmentShop/get/list', data: { p: page, c: 10 } })
   }
@@ -74,6 +74,14 @@ class UsersApi extends ApiClient {
     return this.request({ url: '/myequipment/get/list', data: { p: page, c: 10 } })
   }
 
+  /** 获取商城设备详情 */
+  getShopDeviceDetail(equipmentId: string) {
+    return this.request({
+      method: 'GET',
+      url: `/equipmentShop/get/info/${equipmentId}`
+    })
+  }
+
   /** 获取设备详情 */
   getDeviceDetail(equipmentId: string) {
     return this.request({

src/app.tsx

@@ -41,6 +41,7 @@ class App extends Component {
       'pages/home/film/index',
       'pages/login/index',
       'pages/home/device/device_detail/index',
+      'pages/home/device/shop_device_detail/index',
       'pages/system/wifi_list/index',
       'pages/home/device/device_bind/index',
       'pages/home/user/index',
@@ -64,6 +65,7 @@ class App extends Component {
       navigationBarTextStyle: 'black'
     },
     tabBar: {
+      selectedColor: '#FF9110',
       list: [
         {
           pagePath: 'pages/home/device/index',
@@ -80,8 +82,8 @@ class App extends Component {
         {
           pagePath: 'pages/home/film/index',
           text: '视片',
-          iconPath: './assets/images/device.png',
-          selectedIconPath: './assets/images/device_ac.png'
+          iconPath: './assets/images/film.png',
+          selectedIconPath: './assets/images/film_ac.png'
         },
         {
           pagePath: 'pages/home/user/index',

src/conpoments/shop_device_item/index.scss

+@import '@styles/var.scss';
+
+.device-item {
+  // height: 100%;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 20px;
+
+  &-img-box {
+    width: 320px;
+    height: 180px;
+    padding: 4.5px 8px;
+    border-radius: 8px;
+    border: 1px solid $border-color;
+
+    @include eject(box-sizing, border-box);
+
+    .device-item-img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-info {
+    // flex: ;
+    width: 190px;
+    display: flex;
+    padding-left: 40px;
+    flex-direction: column;
+  }
+
+  &-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+  }
+
+  &-btn-1 {
+    font-size: 30px;
+    height: 60px;
+    width: 150px;
+    line-height: 60px;
+    text-align: center;
+    border-radius: 6px;
+    background: rgba(235, 181, 65, 1);
+    color: white;
+  }
+}

src/conpoments/shop_device_item/index.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Image } from '@tarojs/components'
+import { IDeviceItem } from '@/pages/home/device/device_list'
+
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+interface PageOwnProps {
+  equipmentName: string
+  equipmentIntro: string
+  equipmentPrice: any
+  equipmentUrl: string
+  equipmentShopId: string
+}
+
+type PageState = {}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface DeviceItem {
+  props: IProps
+  state: PageState
+}
+
+class DeviceItem extends Component {
+  buyDevice() {
+    Taro.showToast({
+      title: '该功能暂未开放，敬请期待！'
+    })
+  }
+  goDetail(equipmentId) {
+    Taro.navigateTo({
+      url: `/pages/home/device/shop_device_detail/index?equipmentShopId=${equipmentId}`
+    })
+  }
+  render() {
+    const {
+      equipmentName,
+      equipmentIntro,
+      equipmentPrice,
+      equipmentUrl: url,
+      equipmentShopId
+    } = this.props
+    return (
+      <View className="device-item">
+        <View className="device-item-img-box" onClick={() => this.goDetail(equipmentShopId)}>
+          <Image className="device-item-img" src={url} />
+        </View>
+        <View className="device-item-info">
+          <Text className="device-item-info-name">{equipmentName}</Text>
+          <Text className="device-item-info-state">{equipmentIntro}</Text>
+          <Text className="device-item-info-state">{equipmentPrice}元</Text>
+        </View>
+        <View className="device-item-btn">
+          <Text className="device-item-btn-1" onClick={this.buyDevice}>
+            购买
+          </Text>
+        </View>
+      </View>
+    )
+  }
+}
+export default DeviceItem as ComponentClass<PageOwnProps, PageState>

src/pages/home/device/shop_device_detail/index.scss

+@import '@styles/var.scss';
+
+.device-detail {
+  padding: 10px 0 0;
+
+  @include eject(box-sizing, border-box);
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+
+    .item-img-box {
+      width: 100%;
+      min-height: 220px;
+
+      .item-img {
+        width: 100%;
+        height: 400px;
+      }
+    }
+  }
+
+  .bottom-btn {
+    margin-top: 60px;
+  }
+}

src/pages/home/device/shop_device_detail/index.tsx

+import api from '@/api/index'
+import { ComponentClass } from 'react'
+import { showMyToast } from '@/common/utils'
+import Taro, { Component, Config } from '@tarojs/taro'
+import {
+  View,
+  Text,
+  Input,
+  Image,
+  ScrollView,
+  Button,
+} from '@tarojs/components'
+
+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">
+          {
+            equipmentDetails
+          }
+          </View>
+        </View>
+
+        <Button type="primary" className="bottom-btn" onClick={() => {this.buyDevice()}}>
+          购买
+        </Button>
+      </ScrollView>
+    )
+  }
+}
+export default DeviceDetail as ComponentClass<PageOwnProps, PageState>

src/pages/home/device/shop_list/index.tsx

@@ -5,7 +5,7 @@ import { connect } from '@tarojs/redux'
 import ListView from '@/conpoments/list_view'
 import Taro, { Component } from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
-import DeviceItem from '@/conpoments/device_item'
+import DeviceItem from '@/conpoments/shop_device_item'
 import { getShopDeviceList } from '@/actions/asyncCounter'
 import { showMyToast } from '@/common/utils'
 
@@ -130,7 +130,9 @@ class MyDevice extends Component {
   }
 
   goDetail(equipmentId) {
-    Taro.navigateTo({ url: `/pages/home/device/device_detail/index?equipmentId=${equipmentId}` })
+    Taro.navigateTo({
+      url: `/pages/home/device/shop_device_detail/index?equipmentShopId=${equipmentId}`
+    })
   }
 
   shouldComponentUpdate(nextProps: IProps, _nextState) {
@@ -154,29 +156,9 @@ class MyDevice extends Component {
           pullingDown={done => this.pullingDown(done)}
         >
           {list.map(item => (
-            <AtSwipeAction
-              autoClose
-              key={item.equipmentId}
-              onClick={info => this.handleItem(item, info)}
-              options={[
-                {
-                  text: '编辑',
-                  style: {
-                    backgroundColor: '#6190E8'
-                  }
-                },
-                {
-                  text: '删除',
-                  style: {
-                    backgroundColor: '#FF4949'
-                  }
-                }
-              ]}
-            >
-              <View onClick={() => this.goDetail(item.equipmentId)}>
-                <DeviceItem {...item} />
-              </View>
-            </AtSwipeAction>
+            <View key={item.equipmentShopId}>
+              <DeviceItem {...item} />
+            </View>
           ))}
         </ListView>
       </View>

src/pages/home/tempaltes/scss/type_detail.scss

@@ -16,7 +16,7 @@
       margin-right: 20px;
 
       .activeTagBtn {
-        background: yellow;
+        background: #ff9110;
         color: white;
       }
     }