297 lines
6.3 KiB
Vue
297 lines
6.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar :is-back="true" :title="$t('photo.listTitle')" title-color="#000" :border-bottom="false" :background="bgc"
|
||
id="navbar">
|
||
</u-navbar>
|
||
|
||
<view class="top_page">
|
||
<view class="title">{{list.plantName == null ? '--' : list.plantName}}</view>
|
||
<view class="other_name">
|
||
{{ $t('photo.detailAlias') }}：{{list.alias == null ? '--' : list.alias}}
|
||
</view>
|
||
<view class="cont">
|
||
<view class="cont_left">
|
||
<view class="cont_left_tit">
|
||
{{ $t('photo.detailDifficulty') }}
|
||
</view>
|
||
<view class="cont_left_txt">
|
||
{{text == null ? '--' : text}}
|
||
</view>
|
||
<view class="cont_left_tit" style="margin-top: 40rpx;">
|
||
{{ $t('photo.detailFunction') }}
|
||
</view>
|
||
<view class="cont_left_txt">
|
||
{{list.funcStr == null ? '--' : list.funcStr}}
|
||
</view>
|
||
<view class="cont_left_tit" style="margin-top: 40rpx;">
|
||
{{ $t('photo.detailFitSpace') }}
|
||
</view>
|
||
<view class="cont_left_txt">
|
||
{{list.fitSpaceStr == null ? '--' : list.fitSpaceStr}}
|
||
</view>
|
||
</view>
|
||
<view class="cont_right">
|
||
<image :src="list.picture" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot_page">
|
||
<view class="tit" style="margin-top: 0rpx;">
|
||
{{ $t('photo.detailCare') }}
|
||
</view>
|
||
<view class="txt">
|
||
{{list.maintenanceFocus == undefined ? '' : list.maintenanceFocus}}
|
||
<!-- <view class="" v-for="(item,index) in formattedList" :key="index">
|
||
{{item}}
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="about">
|
||
<view class="tit">
|
||
{{ $t('photo.detailAbout') }}
|
||
</view>
|
||
<view class="cont">
|
||
{{list.introduce == null ? '--' : list.introduce}}
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
plantId:'',
|
||
text:'',
|
||
list:[]
|
||
}
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: this.$t('app.name'),
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: this.$t('app.name'),
|
||
query: '',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.plantId = option.plantId
|
||
this.getxq()
|
||
},
|
||
methods: {
|
||
getxq(){
|
||
this.$u.get(`/plant/plant/${this.plantId}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.list = res.data
|
||
if (this.list.complexity == 1) {
|
||
this.text = this.$t('photo.difficulty1')
|
||
} else if (this.list.complexity == 2) {
|
||
this.text = this.$t('photo.difficulty2')
|
||
} else if (this.list.complexity == 3) {
|
||
this.text = this.$t('photo.difficulty3')
|
||
} else if (this.list.complexity == 4) {
|
||
this.text = this.$t('photo.difficulty4')
|
||
} else if (this.list.complexity == 5) {
|
||
this.text = this.$t('photo.difficulty5')
|
||
} else if(this.list.complexity == 6){
|
||
this.text = this.$t('photo.difficulty6')
|
||
}
|
||
// if(res.data.maintenanceFocus != null || res.data.maintenanceFocus.length > 0){
|
||
// this.parseData(res.data.maintenanceFocus)
|
||
// }
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// parseData(text) {
|
||
// // 根据换行符分割文本为数组
|
||
// const items = text.split('\n')
|
||
// // 遍历每个条目，并添加序号
|
||
// items.forEach((item, index) => {
|
||
// // 去除条目前后的空白字符
|
||
// const trimmedItem = item.trim()
|
||
// // 如果条目不为空，则添加到格式化列表中，并添加序号
|
||
// if (trimmedItem) {
|
||
// this.formattedList.push(`${trimmedItem}`)
|
||
// }
|
||
// })
|
||
// },
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
::v-deep .u-title{
|
||
margin-bottom: 22rpx;
|
||
}
|
||
::v-deep .uicon-nav-back{
|
||
margin-bottom: 22rpx;
|
||
}
|
||
.about{
|
||
margin-top: 56rpx;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
.tit{
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 600;
|
||
}
|
||
.cont{
|
||
margin-top: 24rpx;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
.activesc{
|
||
background-color: #999 !important;
|
||
}
|
||
.shouc {
|
||
width: 100%;
|
||
padding: 0rpx 100rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 80rpx;
|
||
text-align: center;
|
||
text {
|
||
display: inline-block;
|
||
width: 200rpx;
|
||
background-color: #3dada9;
|
||
color: #fff;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
border-radius:50rpx;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
padding-top: 50rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
page {
|
||
padding-bottom: 200rpx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
}
|
||
|
||
.top_page {
|
||
background: #fff;
|
||
padding: 0 32rpx;
|
||
padding-bottom: 28rpx;
|
||
|
||
.title {
|
||
margin-top: 23rpx;
|
||
font-size: 80rpx;
|
||
letter-spacing: 0rpx;
|
||
line-height: 88rpx;
|
||
color: rgba(80, 86, 90, 1);
|
||
}
|
||
|
||
.other_name {
|
||
margin-top: 8rpx;
|
||
font-size: 40rpx;
|
||
letter-spacing: 0rpx;
|
||
line-height: 48rpx;
|
||
color: rgba(119, 128, 141, 1);
|
||
}
|
||
|
||
.cont {
|
||
margin-top: 82rpx;
|
||
margin-bottom: 28rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
|
||
.cont_left {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 50%;
|
||
|
||
.cont_left_tit {
|
||
font-size: 28rpx;
|
||
letter-spacing: 0.56rpx;
|
||
line-height: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.cont_left_txt {
|
||
margin-top: 10rpx;
|
||
width: 294rpx;
|
||
font-size: 32rpx;
|
||
letter-spacing: 0.64rpx;
|
||
line-height: 40rpx;
|
||
color: #50565A;
|
||
|
||
}
|
||
}
|
||
|
||
.cont_right {
|
||
width: 320rpx;
|
||
height: 320rpx;
|
||
margin-right: 20rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
border-radius: 50%;
|
||
image {
|
||
background-size: cover;
|
||
border-radius: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.bot_page {
|
||
padding: 23rpx 32rpx 0rpx 32rpx;
|
||
|
||
.tit {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0rpx;
|
||
line-height: 40rpx;
|
||
color:#48893B;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.txt {
|
||
width: 100%;
|
||
margin-top: 12rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
letter-spacing: 0.64rpx;
|
||
line-height: 40rpx;
|
||
color:#48893B;
|
||
|
||
}
|
||
}
|
||
</style> |