Commit c872bdb30e2a4aaac90baf99c5534105cfa68661
1 parent
f20fa7ae
树木详情
Showing
8 changed files
with
134 additions
and
137 deletions
pages.json
| ... | ... | @@ -300,7 +300,12 @@ |
| 300 | 300 | { |
| 301 | 301 | "path": "treePage/treeInfo", |
| 302 | 302 | "style": { |
| 303 | - "navigationBarTitleText": "树木详情" | |
| 303 | + "navigationBarTitleText": "树木详情", | |
| 304 | + "mp-weixin": { | |
| 305 | + "navigationBarTitleText": "树木详情", | |
| 306 | + "enablePullDownRefresh": false, | |
| 307 | + "reLaunchTime": 0 | |
| 308 | + } | |
| 304 | 309 | } |
| 305 | 310 | }, |
| 306 | 311 | { | ... | ... |
stores/counter.js
| ... | ... | @@ -13,9 +13,14 @@ export const useCounterStore = defineStore('useCounter', { |
| 13 | 13 | // 系统配置 |
| 14 | 14 | config: Cache.get(CONFIG) || {}, |
| 15 | 15 | // 系统消息数量 |
| 16 | - noticeNum: 0 | |
| 16 | + noticeNum: 0, | |
| 17 | + treeData:{} | |
| 17 | 18 | }), |
| 18 | 19 | actions: { |
| 20 | +// 设置用户信息 | |
| 21 | + setTreeInfo(info) { | |
| 22 | + this.treeData = info | |
| 23 | + }, | |
| 19 | 24 | // 登录 |
| 20 | 25 | login(data) { |
| 21 | 26 | // 用户登录状态 |
| ... | ... | @@ -33,6 +38,7 @@ export const useCounterStore = defineStore('useCounter', { |
| 33 | 38 | Cache.remove(TOKEN) |
| 34 | 39 | // 设置用户信息 |
| 35 | 40 | this.userInfo = {} |
| 41 | + this.treeData = {} | |
| 36 | 42 | Cache.remove(USER_INFO) |
| 37 | 43 | }, |
| 38 | 44 | // 设置用户信息 | ... | ... |
subPackages/treePage/addTree.vue
| ... | ... | @@ -12,7 +12,7 @@ |
| 12 | 12 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" |
| 13 | 13 | v-model="formData.treeheight"></tui-input> |
| 14 | 14 | <template v-slot:right> |
| 15 | - <text style="padding-left: 12rpx;color:#aaa;font-size:14px;">米</text> | |
| 15 | + <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text> | |
| 16 | 16 | </template> |
| 17 | 17 | </tui-form-item> |
| 18 | 18 | </tui-col> |
| ... | ... | @@ -21,7 +21,7 @@ |
| 21 | 21 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" |
| 22 | 22 | v-model="formData.dbh"></tui-input> |
| 23 | 23 | <template v-slot:right> |
| 24 | - <text style="padding-left: 12rpx;color:#aaa;font-size:14px">厘米</text> | |
| 24 | + <text style="padding-left: 12rpx;color:#ccc;font-size:14px">厘米</text> | |
| 25 | 25 | </template> |
| 26 | 26 | </tui-form-item> |
| 27 | 27 | </tui-col> |
| ... | ... | @@ -47,16 +47,16 @@ |
| 47 | 47 | label="经度" |
| 48 | 48 | class="location-form-item" |
| 49 | 49 | prop="latitude" |
| 50 | + :bottomBorder="false" | |
| 50 | 51 | > |
| 51 | 52 | {{ formData.longitude }} |
| 52 | 53 | </tui-form-item> |
| 53 | 54 | </tui-col> |
| 54 | 55 | <tui-col :span="12"> |
| 55 | 56 | <tui-form-item |
| 56 | - | |
| 57 | + :bottomBorder="false" | |
| 57 | 58 | label="纬度" |
| 58 | 59 | class="location-form-item" |
| 59 | - | |
| 60 | 60 | prop="latitude" |
| 61 | 61 | > |
| 62 | 62 | {{ formData.latitude }} |
| ... | ... | @@ -134,7 +134,7 @@ |
| 134 | 134 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" |
| 135 | 135 | v-model="formData.estimationtreeage"></tui-input> |
| 136 | 136 | <template v-slot:right> |
| 137 | - <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">年</text> | |
| 137 | + <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">年</text> | |
| 138 | 138 | </template> |
| 139 | 139 | </tui-form-item> |
| 140 | 140 | </tui-col> |
| ... | ... | @@ -143,7 +143,7 @@ |
| 143 | 143 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" |
| 144 | 144 | v-model="formData.weekday"></tui-input> |
| 145 | 145 | <template v-slot:right> |
| 146 | - <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">厘米</text> | |
| 146 | + <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">厘米</text> | |
| 147 | 147 | </template> |
| 148 | 148 | </tui-form-item> |
| 149 | 149 | </tui-col> |
| ... | ... | @@ -156,7 +156,7 @@ |
| 156 | 156 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" |
| 157 | 157 | v-model="formData.canopyeastwest"></tui-input> |
| 158 | 158 | <template v-slot:right> |
| 159 | - <text style="padding-left: 12rpx;color:#aaa">米</text> | |
| 159 | + <text style="padding-left: 12rpx;color:#ccc">米</text> | |
| 160 | 160 | </template> |
| 161 | 161 | </tui-form-item> |
| 162 | 162 | </tui-col> |
| ... | ... | @@ -165,7 +165,7 @@ |
| 165 | 165 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" |
| 166 | 166 | v-model="formData.canopysouthnorth"></tui-input> |
| 167 | 167 | <template v-slot:right> |
| 168 | - <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">米</text> | |
| 168 | + <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">米</text> | |
| 169 | 169 | </template> |
| 170 | 170 | </tui-form-item> |
| 171 | 171 | </tui-col> |
| ... | ... | @@ -211,7 +211,7 @@ const rules = [{ |
| 211 | 211 | }, { |
| 212 | 212 | name: "treeheight", |
| 213 | 213 | rule: ["required", "maxLength:10", "isAmount"], |
| 214 | - msg: ["请输入数高", "数高不能超过10个字符", "请输入正确"] | |
| 214 | + msg: ["请输入树高", "数高不能超过10个字符", "请输入正确"] | |
| 215 | 215 | }, { |
| 216 | 216 | name: "dbh", |
| 217 | 217 | rule: ["required", "maxLength:10", "isAmount"], |
| ... | ... | @@ -242,7 +242,7 @@ const rules = [{ |
| 242 | 242 | }, { |
| 243 | 243 | name: "managedutyunit", |
| 244 | 244 | rule: ["required"], |
| 245 | - msg: ["请选择权属单位"] | |
| 245 | + msg: ["请输入管护单位"] | |
| 246 | 246 | }, { |
| 247 | 247 | name: "oldtreeownershipText", |
| 248 | 248 | rule: ["required"], |
| ... | ... | @@ -442,13 +442,8 @@ export default { |
| 442 | 442 | </script> |
| 443 | 443 | |
| 444 | 444 | <style> |
| 445 | -.tui-title { | |
| 446 | - width: 100%; | |
| 447 | - font-size: 28rpx; | |
| 448 | - color: #888; | |
| 449 | - padding: 30rpx; | |
| 450 | - box-sizing: border-box; | |
| 451 | -} | |
| 445 | + | |
| 446 | + | |
| 452 | 447 | |
| 453 | 448 | .tui-btn__box { |
| 454 | 449 | width: 100%; |
| ... | ... | @@ -456,10 +451,6 @@ export default { |
| 456 | 451 | bottom: 0; |
| 457 | 452 | } |
| 458 | 453 | |
| 459 | -.location-content { | |
| 460 | - font-size: 14px; | |
| 461 | -} | |
| 462 | - | |
| 463 | 454 | /* 动画区域样式 */ |
| 464 | 455 | .animated-area { |
| 465 | 456 | height: 200rpx; | ... | ... |
subPackages/treePage/editTree.vue
subPackages/treePage/treeFiles.vue
| ... | ... | @@ -18,8 +18,9 @@ |
| 18 | 18 | <!-- </template>--> |
| 19 | 19 | </tui-input> |
| 20 | 20 | <template v-slot:right> |
| 21 | - <tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24" | |
| 22 | - bold radius="12rpx">获取验证码</tui-form-button> | |
| 21 | + <tui-icon name="search" :size="20" @click="searchChange"></tui-icon> | |
| 22 | +<!-- <tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24"--> | |
| 23 | +<!-- bold radius="12rpx">获取验证码</tui-form-button>--> | |
| 23 | 24 | </template> |
| 24 | 25 | |
| 25 | 26 | </tui-form-item> |
| ... | ... | @@ -39,7 +40,7 @@ |
| 39 | 40 | <view class="full-height-row"> |
| 40 | 41 | <view class="full-height-col left-con"> |
| 41 | 42 | <view v-for="(i,index) in depts" class="teamsItem" :key="index" |
| 42 | - @click="teamsChange(i)" | |
| 43 | + @click="teamsChange(index)" | |
| 43 | 44 | :class="{teamsActive:index==currentIndex}" |
| 44 | 45 | > |
| 45 | 46 | <view class="fs-ellipsis fs-pt16 fs-pb16 fs-pl8 fs-pr8">{{ i.deptName }}</view> |
| ... | ... | @@ -85,8 +86,7 @@ export default { |
| 85 | 86 | name: "treeFiles", |
| 86 | 87 | data() { |
| 87 | 88 | return { |
| 88 | - cardList: [], | |
| 89 | - belongCompanyData: [], | |
| 89 | + belongCompanyData: [], // 归属公司 | |
| 90 | 90 | show: false, |
| 91 | 91 | currentIndex: 0, |
| 92 | 92 | formData: { |
| ... | ... | @@ -98,18 +98,7 @@ export default { |
| 98 | 98 | companyId: '',// 归属公司 |
| 99 | 99 | depts: [],// 归属班组 |
| 100 | 100 | roads: [], // 道路树 |
| 101 | - card: { | |
| 102 | - title: { | |
| 103 | - text: '白菜湾四街' | |
| 104 | - }, | |
| 105 | - tag: { | |
| 106 | - text: '153颗' | |
| 107 | - }, | |
| 108 | - header: { | |
| 109 | - bgcolor: '#F7F7F7', | |
| 110 | - line: true | |
| 111 | - } | |
| 112 | - } | |
| 101 | + | |
| 113 | 102 | } |
| 114 | 103 | }, |
| 115 | 104 | onLoad() { |
| ... | ... | @@ -117,17 +106,18 @@ export default { |
| 117 | 106 | belongCompanyreq().then(res => { |
| 118 | 107 | this.belongCompanyData = res.data |
| 119 | 108 | if (this.belongCompanyData.length > 0) { |
| 120 | - this.formData.area = this.belongCompanyData[0].dictLabel | |
| 109 | + this.formData.companyId = this.belongCompanyData[0].dictLabel | |
| 121 | 110 | this.companyId = (this.belongCompanyData[0].dictValue).toString() |
| 122 | 111 | this.deptListQuery() |
| 123 | 112 | } |
| 124 | 113 | }) |
| 125 | 114 | }, |
| 126 | 115 | methods: { |
| 116 | + // 前往历史页面 | |
| 127 | 117 | toNewPage(params) { |
| 128 | - console.log('123312') | |
| 129 | 118 | uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${params}`) |
| 130 | 119 | }, |
| 120 | + // 搜索 | |
| 131 | 121 | searchChange() { |
| 132 | 122 | this.deptListQuery() |
| 133 | 123 | }, |
| ... | ... | @@ -139,21 +129,17 @@ export default { |
| 139 | 129 | this.roads = [] |
| 140 | 130 | } else { |
| 141 | 131 | this.depts = res.data[0].depts |
| 142 | - this.roads = this.depts[0].roads | |
| 132 | + this.roads = this.depts[this.currentIndex].roads | |
| 143 | 133 | } |
| 144 | 134 | // this.treeRoadQuery() |
| 145 | 135 | }) |
| 146 | 136 | }, |
| 147 | - // 树列表 | |
| 148 | - treeRoadQuery() { | |
| 149 | - treeRoadReq({data: {road: ''}}).then(res => { | |
| 150 | - console.log(res) | |
| 151 | - }) | |
| 152 | - }, | |
| 153 | - // 归属公司 | |
| 137 | + | |
| 138 | + // 班组切换 | |
| 154 | 139 | teamsChange(i) { |
| 155 | 140 | console.log(i) |
| 156 | 141 | this.currentIndex = i |
| 142 | + this.roads = this.depts[this.currentIndex].roads | |
| 157 | 143 | }, |
| 158 | 144 | pickerShow() { |
| 159 | 145 | this.show = true |
| ... | ... | @@ -163,7 +149,7 @@ export default { |
| 163 | 149 | }, |
| 164 | 150 | pickerChange(e) { |
| 165 | 151 | console.log(e) |
| 166 | - this.formData.area = e.text | |
| 152 | + this.formData.companyId = e.text | |
| 167 | 153 | }, |
| 168 | 154 | } |
| 169 | 155 | } |
| ... | ... | @@ -171,6 +157,13 @@ export default { |
| 171 | 157 | |
| 172 | 158 | |
| 173 | 159 | <style scoped lang="scss"> |
| 160 | +::v-deep .tui-form__item-wrap { | |
| 161 | + padding-top: 8px !important; /* 原可能是 12px/16px，按需减小 */ | |
| 162 | + padding-bottom: 8px !important; | |
| 163 | + min-height: auto !important; /* 清除默认最小高度限制 */ | |
| 164 | +} | |
| 165 | + | |
| 166 | + | |
| 174 | 167 | .container { |
| 175 | 168 | height: 100%; |
| 176 | 169 | display: flex; |
| ... | ... | @@ -201,7 +194,6 @@ export default { |
| 201 | 194 | flex: 1; |
| 202 | 195 | height: 100%; |
| 203 | 196 | background: #fff; |
| 204 | - padding-top: 20rpx; | |
| 205 | 197 | overflow: hidden; |
| 206 | 198 | } |
| 207 | 199 | |
| ... | ... | @@ -213,11 +205,9 @@ export default { |
| 213 | 205 | } |
| 214 | 206 | |
| 215 | 207 | .card-wrap { |
| 216 | - //height: 200rpx; | |
| 217 | - margin: 0 20rpx 20rpx 20rpx; | |
| 208 | + margin: 20px 10px 0; | |
| 218 | 209 | padding: 20rpx; |
| 219 | - | |
| 220 | - border-radius: 10rpx; | |
| 210 | + border-radius: 14rpx; | |
| 221 | 211 | } |
| 222 | 212 | |
| 223 | 213 | .nodata-wrap { | ... | ... |
subPackages/treePage/treeInfo.vue
| ... | ... | @@ -12,7 +12,7 @@ |
| 12 | 12 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" |
| 13 | 13 | v-model="formData.treeheight"></tui-input> |
| 14 | 14 | <template v-slot:right> |
| 15 | - <text style="padding-left: 12rpx;color:#aaa;font-size:14px;">米</text> | |
| 15 | + <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text> | |
| 16 | 16 | </template> |
| 17 | 17 | </tui-form-item> |
| 18 | 18 | </tui-col> |
| ... | ... | @@ -21,7 +21,7 @@ |
| 21 | 21 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" |
| 22 | 22 | v-model="formData.dbh"></tui-input> |
| 23 | 23 | <template v-slot:right> |
| 24 | - <text style="padding-left: 12rpx;color:#aaa;font-size:14px">厘米</text> | |
| 24 | + <text style="padding-left: 12rpx;color:#ccc;font-size:14px">厘米</text> | |
| 25 | 25 | </template> |
| 26 | 26 | </tui-form-item> |
| 27 | 27 | </tui-col> |
| ... | ... | @@ -64,7 +64,6 @@ |
| 64 | 64 | </tui-col> |
| 65 | 65 | |
| 66 | 66 | |
| 67 | - | |
| 68 | 67 | <tui-form-item asterisk label="管护单位" prop="managedutyunit"> |
| 69 | 68 | |
| 70 | 69 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30" :disabled="true" |
| ... | ... | @@ -86,7 +85,7 @@ |
| 86 | 85 | <tui-image-group |
| 87 | 86 | :imageList="formData.treeImgList" |
| 88 | 87 | radius="0" |
| 89 | - @click="handleImageClick" | |
| 88 | + @click="previewImage" | |
| 90 | 89 | > |
| 91 | 90 | </tui-image-group> |
| 92 | 91 | |
| ... | ... | @@ -148,7 +147,7 @@ |
| 148 | 147 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" |
| 149 | 148 | v-model="formData.estimationtreeage"></tui-input> |
| 150 | 149 | <template v-slot:right> |
| 151 | - <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">年</text> | |
| 150 | + <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">年</text> | |
| 152 | 151 | </template> |
| 153 | 152 | </tui-form-item> |
| 154 | 153 | </tui-col> |
| ... | ... | @@ -157,7 +156,7 @@ |
| 157 | 156 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" |
| 158 | 157 | v-model="formData.weekday"></tui-input> |
| 159 | 158 | <template v-slot:right> |
| 160 | - <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">厘米</text> | |
| 159 | + <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">厘米</text> | |
| 161 | 160 | </template> |
| 162 | 161 | </tui-form-item> |
| 163 | 162 | </tui-col> |
| ... | ... | @@ -170,7 +169,7 @@ |
| 170 | 169 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" |
| 171 | 170 | v-model="formData.canopyeastwest"></tui-input> |
| 172 | 171 | <template v-slot:right> |
| 173 | - <text style="padding-left: 12rpx;color:#aaa">米</text> | |
| 172 | + <text style="padding-left: 12rpx;color:#ccc">米</text> | |
| 174 | 173 | </template> |
| 175 | 174 | </tui-form-item> |
| 176 | 175 | </tui-col> |
| ... | ... | @@ -179,20 +178,20 @@ |
| 179 | 178 | <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" |
| 180 | 179 | v-model="formData.canopysouthnorth"></tui-input> |
| 181 | 180 | <template v-slot:right> |
| 182 | - <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">米</text> | |
| 181 | + <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">米</text> | |
| 183 | 182 | </template> |
| 184 | 183 | </tui-form-item> |
| 185 | 184 | </tui-col> |
| 186 | 185 | </tui-row> |
| 187 | 186 | |
| 188 | 187 | </tui-form> |
| 189 | - <tui-gallery :urls="urls" :show="show" @hide="hide"></tui-gallery> | |
| 190 | 188 | </view> |
| 191 | 189 | </template> |
| 192 | 190 | |
| 193 | 191 | <script> |
| 194 | 192 | import { uploadURL, OSSURL } from '@/config/app' |
| 195 | 193 | import { treeOwnership, treeLevelReq } from "@/api/tree"; |
| 194 | +import { useCounterStore } from '@/stores/counter' | |
| 196 | 195 | const rules = [{ |
| 197 | 196 | name: "treetype", |
| 198 | 197 | rule: ["required"], |
| ... | ... | @@ -248,7 +247,7 @@ const rules = [{ |
| 248 | 247 | export default { |
| 249 | 248 | data() { |
| 250 | 249 | return { |
| 251 | -// 当前预览索引 | |
| 250 | + // 当前预览索引 | |
| 252 | 251 | currentIndex: 0, |
| 253 | 252 | // 是否显示预览弹窗 |
| 254 | 253 | show: false, |
| ... | ... | @@ -287,19 +286,39 @@ export default { |
| 287 | 286 | }, |
| 288 | 287 | } |
| 289 | 288 | }, |
| 289 | + computed: { | |
| 290 | + // 获取共享store实例 | |
| 291 | + useCounterStore() { | |
| 292 | + return useCounterStore() | |
| 293 | + } | |
| 294 | + }, | |
| 290 | 295 | onReady() { |
| 291 | 296 | //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则 |
| 292 | 297 | // 开启即时校验，参数：是否开启、校验规则 |
| 293 | - this.$refs.form && this.$refs.form.immediateValidate(true, rules); | |
| 298 | + // this.$refs.form && this.$refs.form.immediateValidate(true, rules); | |
| 299 | + }, | |
| 300 | + onUnload() { | |
| 301 | + | |
| 294 | 302 | }, |
| 295 | 303 | onLoad(options) { |
| 296 | - const eventChannel = this.getOpenerEventChannel(); | |
| 297 | - // eventChannel.on监听，获取上一页面通过eventChannel事件传送的数据 | |
| 298 | - eventChannel.on('pageDataTreeInfo', data=> { | |
| 299 | - console.log(data) // {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"} | |
| 300 | - console.log('4123') | |
| 301 | - this.formData =data | |
| 302 | - }) | |
| 304 | + // this.formData = this.useCounterStore.treeData | |
| 305 | + const treeData = this.useCounterStore.treeData; | |
| 306 | + | |
| 307 | + this.formData = { | |
| 308 | + ...treeData, | |
| 309 | + // 仅在当前组件中临时转换为对象数组，不修改Pinia源数据 | |
| 310 | + treeImgList: treeData.treeImgList.map((item, index) => { | |
| 311 | + return { id: index*Math.random()*10, src: item }; | |
| 312 | + }) | |
| 313 | + }; | |
| 314 | + | |
| 315 | + this.urls = treeData.treeImgList | |
| 316 | + // this.formData.treeImgList = this.formData.treeImgList.map((item, index) => { | |
| 317 | + // return { | |
| 318 | + // id: index*Math.random()*10, | |
| 319 | + // src: item | |
| 320 | + // } | |
| 321 | + // }); | |
| 303 | 322 | |
| 304 | 323 | treeLevelReq().then(res => { |
| 305 | 324 | this.treeLevelData = res.data |
| ... | ... | @@ -317,55 +336,33 @@ export default { |
| 317 | 336 | this.formData.oldtreeownershipText = option.dictLabel; |
| 318 | 337 | } |
| 319 | 338 | }) |
| 320 | - this.urls = this.formData.treeImgList.map((item, index) => { | |
| 321 | - return { | |
| 322 | - src: item | |
| 323 | - } | |
| 324 | - }); | |
| 325 | - this.formData.treeImgList = this.formData.treeImgList.map((item, index) => { | |
| 326 | - return { | |
| 327 | - id: index, | |
| 328 | - src: item | |
| 329 | - } | |
| 330 | - }); | |
| 331 | 339 | }, |
| 332 | 340 | methods: { |
| 333 | -// 图片点击事件 | |
| 334 | - handleImageClick(e) { | |
| 335 | - console.log(e.id) | |
| 336 | - // 如果组件自带预览功能，可能不需要手动控制显示 | |
| 337 | - // 否则手动显示预览弹窗 | |
| 338 | - this.show = true; | |
| 341 | + // 图片预览 | |
| 342 | + previewImage(e) { | |
| 343 | + // 获取当前点击的图片索引（不同版本组件可能参数不同） | |
| 344 | + const index = e.index || 0; | |
| 345 | + // 使用uni-app自带的图片预览API | |
| 346 | + uni.previewImage({ | |
| 347 | + // 预览的图片地址列表 | |
| 348 | + urls: this.urls, | |
| 349 | + // 初始显示的图片索引 | |
| 350 | + current: index, | |
| 351 | + // 预览窗口关闭时的回调 | |
| 352 | + success: function(res) { | |
| 353 | + console.log('预览图片成功'); | |
| 354 | + }, | |
| 355 | + // 预览失败的回调 | |
| 356 | + fail: function(err) { | |
| 357 | + console.error('预览图片失败：', err); | |
| 358 | + } | |
| 359 | + }); | |
| 339 | 360 | }, |
| 340 | - hide(){ | |
| 341 | - this.show = false | |
| 342 | - } | |
| 361 | + | |
| 343 | 362 | } |
| 344 | 363 | } |
| 345 | 364 | </script> |
| 346 | 365 | |
| 347 | 366 | <style> |
| 348 | -.tui-title { | |
| 349 | - width: 100%; | |
| 350 | - font-size: 28rpx; | |
| 351 | - color: #888; | |
| 352 | - padding: 30rpx; | |
| 353 | - box-sizing: border-box; | |
| 354 | -} | |
| 355 | - | |
| 356 | -.tui-btn__box { | |
| 357 | - width: 100%; | |
| 358 | - position: fixed; | |
| 359 | - bottom: 0; | |
| 360 | -} | |
| 361 | - | |
| 362 | -.location-content { | |
| 363 | - font-size: 14px; | |
| 364 | -} | |
| 365 | 367 | |
| 366 | -/* 动画区域样式 */ | |
| 367 | -.animated-area { | |
| 368 | - height: 200rpx; | |
| 369 | - transition: all 0.3s ease-out; /* 动画过渡效果 */ | |
| 370 | -} | |
| 371 | 368 | </style> |
| 372 | 369 | \ No newline at end of file | ... | ... |
subPackages/treePage/treeLog.vue
| ... | ... | @@ -8,15 +8,15 @@ |
| 8 | 8 | <view class="record-list-left" :style="`background-image: url(${i.treephotoone});`"></view> |
| 9 | 9 | <view class="record-list-right"> |
| 10 | 10 | <view class="record-list-right-title"> |
| 11 | - <view class="fs-ellipsis">{{ i.treetype }}</view> | |
| 12 | - <view style="min-width: 100px">{{ i.updatetime.substring(0, 10) }}</view> | |
| 11 | + <view class="fs-ellipsis treetypeName">{{ i.treetype }}</view> | |
| 12 | + <view style="text-align: right">{{ i.updatetime.substring(0, 10) }}</view> | |
| 13 | 13 | </view> |
| 14 | 14 | <view class="fs-mt8 fs-align__center"> |
| 15 | - <img src="/static/images/tree/tree-high.png" style="width: 16px;height: 16px;margin-right: 6px;" | |
| 15 | + <img src="/static/images/tree/tree-high.png" style="width: 14px;height: 14px;margin-right: 6px;" | |
| 16 | 16 | alt=""> 高度：{{ i.treeheight }} 米 |
| 17 | 17 | </view> |
| 18 | 18 | <view class="fs-mt8 fs-align__center"> |
| 19 | - <img src="/static/images/tree/treearound.png" style="width: 16px;height: 16px;margin-right: 6px;" | |
| 19 | + <img src="/static/images/tree/treearound.png" style="width: 14px;height: 14px;margin-right: 6px;" | |
| 20 | 20 | alt="">胸径：{{ i.dbh }} 厘米 |
| 21 | 21 | </view> |
| 22 | 22 | </view> |
| ... | ... | @@ -32,6 +32,7 @@ |
| 32 | 32 | </template> |
| 33 | 33 | |
| 34 | 34 | <script> |
| 35 | +import { useCounterStore } from '@/stores/counter' | |
| 35 | 36 | import { treeLogReq } from "@/api/tree"; |
| 36 | 37 | export default { |
| 37 | 38 | name: "treeLog", |
| ... | ... | @@ -70,13 +71,10 @@ export default { |
| 70 | 71 | }) |
| 71 | 72 | }, |
| 72 | 73 | todetailPage(i) { |
| 73 | - console.log(i) | |
| 74 | - console.log(i) | |
| 74 | + const shareStore = useCounterStore() | |
| 75 | + shareStore.setTreeInfo(i) | |
| 75 | 76 | uni.navigateTo({ |
| 76 | 77 | url: `/subPackages/treePage/treeInfo`, |
| 77 | - success: function(res) { | |
| 78 | - res.eventChannel.emit('pageDataTreeInfo',i) | |
| 79 | - } | |
| 80 | 78 | }) |
| 81 | 79 | } |
| 82 | 80 | } |
| ... | ... | @@ -86,11 +84,16 @@ export default { |
| 86 | 84 | |
| 87 | 85 | <style scoped> |
| 88 | 86 | .record-list-wrap { |
| 89 | - margin: 20rpx 20rpx 0 20rpx; | |
| 90 | - padding: 20rpx; | |
| 91 | - border-radius: 10rpx; | |
| 87 | + margin: 20px 10px 0 ; | |
| 88 | + padding:10px; | |
| 89 | + border-radius: 6px; | |
| 90 | + font-size: 14px; | |
| 91 | +} | |
| 92 | +.treetypeName{ | |
| 93 | + flex:1; | |
| 94 | + font-size: 16px; | |
| 95 | + font-weight: bold; | |
| 92 | 96 | } |
| 93 | - | |
| 94 | 97 | .record-list-left { |
| 95 | 98 | height: 70px; |
| 96 | 99 | width: 70px; | ... | ... |
subPackages/treePage/treeRecord.vue
| ... | ... | @@ -8,14 +8,14 @@ |
| 8 | 8 | <view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view> |
| 9 | 9 | <view class="record-list-right"> |
| 10 | 10 | <view class="record-list-right-title"> |
| 11 | - <view class="fs-ellipsis">{{ i.treetype }}</view> | |
| 12 | - <view style="min-width: 100px">{{ i.updatetime.substring(0, 10) }}</view> | |
| 11 | + <view class="fs-ellipsis treetypeName">{{ i.treetype }}</view> | |
| 12 | + <view style="text-align: right">{{ i.updatetime.substring(0, 10) }}</view> | |
| 13 | 13 | </view> |
| 14 | 14 | <view class="fs-mt8 fs-align__center"> |
| 15 | - <img src="../../static/images/tree/tree-high.png" style="width: 16px;height: 16px;margin-right: 6px;" alt=""> 高度：{{ i.treeheight }} 米 | |
| 15 | + <img src="../../static/images/tree/tree-high.png" style="width: 14px;height: 14px;margin-right: 6px;" alt=""> 高度：{{ i.treeheight }} 米 | |
| 16 | 16 | </view> |
| 17 | 17 | <view class="fs-mt8 fs-align__center"> |
| 18 | - <img src="../../static/images/tree/treearound.png" style="width: 16px;height: 16px;margin-right: 6px;" alt="">胸径：{{ i.dbh }} 厘米 | |
| 18 | + <img src="../../static/images/tree/treearound.png" style="width: 14px;height: 14px;margin-right: 6px;" alt="">胸径：{{ i.dbh }} 厘米 | |
| 19 | 19 | </view> |
| 20 | 20 | </view> |
| 21 | 21 | </view> |
| ... | ... | @@ -65,9 +65,15 @@ export default { |
| 65 | 65 | |
| 66 | 66 | <style scoped> |
| 67 | 67 | .record-list-wrap { |
| 68 | - margin: 20rpx 20rpx 0 20rpx; | |
| 69 | - padding: 20rpx; | |
| 70 | - border-radius: 10rpx; | |
| 68 | + margin: 20px 10px 0 ; | |
| 69 | + padding:10px; | |
| 70 | + border-radius: 6px; | |
| 71 | + font-size: 14px; | |
| 72 | +} | |
| 73 | +.treetypeName{ | |
| 74 | + flex:1; | |
| 75 | + font-size: 16px; | |
| 76 | + font-weight: bold; | |
| 71 | 77 | } |
| 72 | 78 | |
| 73 | 79 | .record-list-left { | ... | ... |