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 {
return (
<View className="device-item">
<View className="device-item-img-box">
<Image className="device-item-img" src={url} />
<Image className="device-item-img" mode="aspectFit" src={url} />
</View>
<View className="device-item-info">
<Text className="device-item-info-name">{equipmentName}</Text>
......
src/pages/home/device/device_detail/index.scss
@import '@styles/var.scss';
@import '@styles/common.scss';
.device-detail {
padding: 10px 40px 0;
background: $bgColor;
min-height: 100%;
@include eject(box-sizing, border-box);
......@@ -12,24 +15,46 @@
&-item {
display: flex;
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 {
padding: 20px 0 10px;
color: $primary-text-color;
padding: 15px 0 24px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
.item-input {
box-sizing: border-box;
padding: 10px 20px;
border-radius: 6px;
border: 1px solid $border-color;
width: 696px;
height: 88px;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
color: #000;
font-size: 30px;
}
.item-img-box {
width: 400px;
height: 220px;
width: 250px;
height: 250px;
border-radius: 6px;
padding: 4px 2.25px;
border: 1px solid $border-color;
background: white;
.item-img {
width: 100%;
......@@ -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 {
margin-top: 60px;
}
......
src/pages/home/device/device_detail/index.tsx
......@@ -120,8 +120,8 @@ class DeviceDetail extends Component {
this.setState({ equipmentResolution: value })
}
chengDirection({ currentTarget }: any) {
const { value } = currentTarget
chengDirection({ target }: any) {
const { value } = target
this.setState({ equipmentStyle: value })
// if (value === 'horizontal') {
// } else if (value === 'vertical') {
......@@ -159,6 +159,25 @@ class DeviceDetail extends Component {
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() {
const {
......@@ -168,7 +187,32 @@ class DeviceDetail extends Component {
equipmentStyle,
equipmentDescribe
} = 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 (
<ScrollView className="device-detail" scrollY>
<View className="device-detail-item">
......@@ -181,45 +225,54 @@ class DeviceDetail extends Component {
/>
</View>
<View className="device-detail-item">
<Text className="item-text">设备描述:</Text>
<Text className="item-text">设备备注:</Text>
<Textarea
className="item-input"
style="height: 60px"
maxlength={50}
value={equipmentDescribe}
placeholder="请输入设备描述"
placeholder="请输入设备备注"
onInput={this.setDeviceDescribe}
/>
</View>
<View className="device-detail-item">
<Text className="item-text">设备图片:</Text>
<View className="item-img-box">
<Image className="item-img" src={equipmentUrl} />
<Image className="item-img" mode="aspectFit" src={equipmentUrl} />
</View>
<Button
className="chooseimage"
onClick={() => {
this.chooseIamge()
}}
>
更换图片
</Button>
</View>
<View className="device-detail-item">
<Text className="item-text">屏幕板式</Text>
<RadioGroup onChange={this.chengDirection}>
<Label for="CROSSWISE">
<Radio value="CROSSWISE" checked={equipmentStyle === 'CROSSWISE'}>
0°
</Radio>
</Label>
<Label for="LENGTHWAYS">
<Radio value="LENGTHWAYS" checked={equipmentStyle === 'LENGTHWAYS'}>
90°
</Radio>
</Label>
<Label for="DOUBLECROSSWISE">
<Radio value="DOUBLECROSSWISE" checked={equipmentStyle === 'DOUBLECROSSWISE'}>
180°
</Radio>
</Label>
<Label for="DOUBLELENGTHWAYS">
<Radio value="DOUBLELENGTHWAYS" checked={equipmentStyle === 'DOUBLELENGTHWAYS'}>
270°
</Radio>
</Label>
</RadioGroup>
<View className="equment-style">
{equipmentStyleList.map(item => (
<View
className={
item.value === equipmentStyle
? 'equment-style-item equment-style-item-active'
: 'equment-style-item'
}
onClick={() => {
this.chengDirection({ target: item })
}}
key={item.value}
>
<Image
className="equment-style-icon"
src={item.value === equipmentStyle ? item.sicon : item.icon}
mode="aspectFit"
/>
<Text>{item.name}</Text>
</View>
))}
</View>
</View>
<View className="device-detail-item">
<Text className="item-text">屏幕分辨率</Text>
......@@ -230,9 +283,9 @@ class DeviceDetail extends Component {
onInput={this.setResolution}
/>
</View>
<Button type="primary" className="bottom-btn" onClick={this.updateDeviceDetail}>
<View className="bottom-btn" onClick={this.updateDeviceDetail}>
确定
</Button>
</View>
</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