Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit e50854c6 by hank
Options

设备详情

parent f2601559
Showing with 147 additions and 38 deletions
src/conpoments/device_item/index.tsx
...@@ -32,7 +32,7 @@ class DeviceItem extends Component { ...@@ -32,7 +32,7 @@ class DeviceItem extends Component {
return ( return (
<View className="device-item"> <View className="device-item">
<View className="device-item-img-box"> <View className="device-item-img-box">
<Image className="device-item-img" src={url} /> <Image className="device-item-img" mode="aspectFit" src={url} />
</View> </View>
<View className="device-item-info"> <View className="device-item-info">
<Text className="device-item-info-name">{equipmentName}</Text> <Text className="device-item-info-name">{equipmentName}</Text>
......
src/pages/home/device/device_detail/index.scss
@import '@styles/var.scss'; @import '@styles/var.scss';
@import '@styles/common.scss';
.device-detail { .device-detail {
padding: 10px 40px 0; padding: 10px 40px 0;
background: $bgColor;
min-height: 100%;
@include eject(box-sizing, border-box); @include eject(box-sizing, border-box);
...@@ -12,24 +15,46 @@ ...@@ -12,24 +15,46 @@
&-item { &-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
.chooseimage {
position: absolute;
left: 300px;
top: 250px;
width: 194px;
height: 64px;
background: linear-gradient(180deg, rgba(255, 145, 16, 1) 0%, rgba(255, 114, 14, 1) 100%);
border-radius: 11px;
font-size: 28px;
color: white;
line-height: 64px;
}
.item-text { .item-text {
padding: 20px 0 10px; padding: 15px 0 24px;
color: $primary-text-color; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
} }
.item-input { .item-input {
box-sizing: border-box;
padding: 10px 20px; padding: 10px 20px;
border-radius: 6px; width: 696px;
border: 1px solid $border-color; height: 88px;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
color: #000;
font-size: 30px;
} }
.item-img-box { .item-img-box {
width: 400px; width: 250px;
height: 220px; height: 250px;
border-radius: 6px; border-radius: 6px;
padding: 4px 2.25px; padding: 4px 2.25px;
border: 1px solid $border-color; background: white;
.item-img { .item-img {
width: 100%; width: 100%;
...@@ -38,6 +63,37 @@ ...@@ -38,6 +63,37 @@
} }
} }
.equment-style {
display: flex;
justify-content: space-between;
&-icon {
width: 42px;
height: 42px;
vertical-align: middle;
margin-right: 10px;
}
&-item {
width: 160px;
height: 60px;
line-height: 60px;
background: rgba(255, 255, 255, 1);
border-radius: 44px;
color: #999;
font-size: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
&-item-active {
color: white;
background: linear-gradient(180deg, rgba(255, 145, 16, 1) 0%, rgba(255, 114, 14, 1) 100%);
}
}
.bottom-btn { .bottom-btn {
margin-top: 60px; margin-top: 60px;
} }
......
src/pages/home/device/device_detail/index.tsx
...@@ -120,8 +120,8 @@ class DeviceDetail extends Component { ...@@ -120,8 +120,8 @@ class DeviceDetail extends Component {
this.setState({ equipmentResolution: value }) this.setState({ equipmentResolution: value })
} }
chengDirection({ currentTarget }: any) { chengDirection({ target }: any) {
const { value } = currentTarget const { value } = target
this.setState({ equipmentStyle: value }) this.setState({ equipmentStyle: value })
// if (value === 'horizontal') { // if (value === 'horizontal') {
// } else if (value === 'vertical') { // } else if (value === 'vertical') {
...@@ -159,6 +159,25 @@ class DeviceDetail extends Component { ...@@ -159,6 +159,25 @@ class DeviceDetail extends Component {
showMyToast({ result: error, title: '修改失败~' }) showMyToast({ result: error, title: '修改失败~' })
} }
} }
chooseIamge() {
Taro.chooseImage({ count: 1 }).then(res => {
console.log(res)
Taro.showLoading({ title: '上传中' })
api.files
.uploadFile(res.tempFilePaths[0])
.then(fileres => {
Taro.hideLoading()
showMyToast({ title: '上传成功~' })
this.setState({
equipmentUrl: JSON.parse(fileres.data).data
})
})
.catch(() => {
Taro.hideLoading()
showMyToast({ title: '上传失败~' })
})
})
}
render() { render() {
const { const {
...@@ -168,7 +187,32 @@ class DeviceDetail extends Component { ...@@ -168,7 +187,32 @@ class DeviceDetail extends Component {
equipmentStyle, equipmentStyle,
equipmentDescribe equipmentDescribe
} = this.state } = this.state
console.log({ equipmentStyle }) const equipmentStyleList = [
{
name: '0°',
value: 'CROSSWISE',
icon: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/0deg@2x.png',
sicon: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/0deg-select@2x.png'
},
{
name: '90°',
value: 'LENGTHWAYS',
icon: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/90deg@2x.png',
sicon: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/90deg-select@2x.png'
},
{
name: '180°',
value: 'DOUBLECROSSWISE',
icon: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/180deg@2x.png',
sicon: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/180deg-select@2x.png'
},
{
name: '270°',
value: 'DOUBLELENGTHWAYS',
icon: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/270deg@2x.png',
sicon: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/270deg-select@2x.png'
}
]
return ( return (
<ScrollView className="device-detail" scrollY> <ScrollView className="device-detail" scrollY>
<View className="device-detail-item"> <View className="device-detail-item">
...@@ -181,45 +225,54 @@ class DeviceDetail extends Component { ...@@ -181,45 +225,54 @@ class DeviceDetail extends Component {
/> />
</View> </View>
<View className="device-detail-item"> <View className="device-detail-item">
<Text className="item-text">设备描述:</Text> <Text className="item-text">设备备注:</Text>
<Textarea <Textarea
className="item-input" className="item-input"
style="height: 60px"
maxlength={50} maxlength={50}
value={equipmentDescribe} value={equipmentDescribe}
placeholder="请输入设备描述" placeholder="请输入设备备注"
onInput={this.setDeviceDescribe} onInput={this.setDeviceDescribe}
/> />
</View> </View>
<View className="device-detail-item"> <View className="device-detail-item">
<Text className="item-text">设备图片:</Text> <Text className="item-text">设备图片:</Text>
<View className="item-img-box"> <View className="item-img-box">
<Image className="item-img" src={equipmentUrl} /> <Image className="item-img" mode="aspectFit" src={equipmentUrl} />
</View> </View>
<Button
className="chooseimage"
onClick={() => {
this.chooseIamge()
}}
>
更换图片
</Button>
</View> </View>
<View className="device-detail-item"> <View className="device-detail-item">
<Text className="item-text">屏幕板式</Text> <Text className="item-text">屏幕板式</Text>
<RadioGroup onChange={this.chengDirection}> <View className="equment-style">
<Label for="CROSSWISE"> {equipmentStyleList.map(item => (
<Radio value="CROSSWISE" checked={equipmentStyle === 'CROSSWISE'}> <View
0° className={
</Radio> item.value === equipmentStyle
</Label> ? 'equment-style-item equment-style-item-active'
<Label for="LENGTHWAYS"> : 'equment-style-item'
<Radio value="LENGTHWAYS" checked={equipmentStyle === 'LENGTHWAYS'}> }
90° onClick={() => {
</Radio> this.chengDirection({ target: item })
</Label> }}
<Label for="DOUBLECROSSWISE"> key={item.value}
<Radio value="DOUBLECROSSWISE" checked={equipmentStyle === 'DOUBLECROSSWISE'}> >
180° <Image
</Radio> className="equment-style-icon"
</Label> src={item.value === equipmentStyle ? item.sicon : item.icon}
<Label for="DOUBLELENGTHWAYS"> mode="aspectFit"
<Radio value="DOUBLELENGTHWAYS" checked={equipmentStyle === 'DOUBLELENGTHWAYS'}> />
270° <Text>{item.name}</Text>
</Radio> </View>
</Label> ))}
</RadioGroup> </View>
</View> </View>
<View className="device-detail-item"> <View className="device-detail-item">
<Text className="item-text">屏幕分辨率</Text> <Text className="item-text">屏幕分辨率</Text>
...@@ -230,9 +283,9 @@ class DeviceDetail extends Component { ...@@ -230,9 +283,9 @@ class DeviceDetail extends Component {
onInput={this.setResolution} onInput={this.setResolution}
/> />
</View> </View>
<Button type="primary" className="bottom-btn" onClick={this.updateDeviceDetail}> <View className="bottom-btn" onClick={this.updateDeviceDetail}>
确定 确定
</Button> </View>
</ScrollView> </ScrollView>
) )
} }
......
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