Commit c7744156ac152b5988c4778f3d987e6b1bd6c336
1 parent
46b6767c
录入树木
Showing
6 changed files
with
626 additions
and
9 deletions
components/thorui/tui-upload/tui-upload.vue
config/app.js
| ... | ... | @@ -26,6 +26,6 @@ export const baseURL = SWITCH_DEVELOPMENT ? baseURLMap['development'] : baseURLM |
| 26 | 26 | export const version = '1.0.6' |
| 27 | 27 | |
| 28 | 28 | // export const uploadURL = baseURL + '/ylapi/yuanl/common/upload' |
| 29 | -export const uploadURL = baseURL + '/yuanl/yuanl/common/upload' | |
| 29 | +export const uploadURL = baseURL + '/ylapi/yuanl/common/upload' | |
| 30 | 30 | // export const OSSURL = baseURL + '/yuanlin/' |
| 31 | -export const OSSURL = 'https://dev-rnt.oss-cn-zhangjiakou.aliyuncs.com/' | |
| 32 | 31 | \ No newline at end of file |
| 32 | +export const OSSURL = 'https://test.jichengshanshui.com.cn:28310/yuanlin/' | |
| 33 | 33 | \ No newline at end of file | ... | ... |
pages.json
| ... | ... | @@ -284,6 +284,18 @@ |
| 284 | 284 | "style": { |
| 285 | 285 | "navigationBarTitleText": "一树一档案" |
| 286 | 286 | } |
| 287 | + }, | |
| 288 | + { | |
| 289 | + "path": "treePage/treeRecord", | |
| 290 | + "style": { | |
| 291 | + "navigationBarTitleText": "记录" | |
| 292 | + } | |
| 293 | + }, | |
| 294 | + { | |
| 295 | + "path": "treePage/addTree", | |
| 296 | + "style": { | |
| 297 | + "navigationBarTitleText": "录入树木" | |
| 298 | + } | |
| 287 | 299 | } |
| 288 | 300 | ] |
| 289 | 301 | } | ... | ... |
subPackages/treePage/addTree.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="container"> | |
| 3 | + <tui-form ref="form" :show-message="false" :model="formData"> | |
| 4 | + <tui-form-item asterisk label="名称" prop="name"> | |
| 5 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30" | |
| 6 | + v-model="formData.name"></tui-input> | |
| 7 | + </tui-form-item> | |
| 8 | + | |
| 9 | + <tui-row> | |
| 10 | + <tui-col span="12"> | |
| 11 | + <tui-form-item label="高度" asterisk prop="height" :position="3"> | |
| 12 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | |
| 13 | + v-model="formData.height"></tui-input> | |
| 14 | + <template v-slot:right> | |
| 15 | + <text style="padding-left: 12rpx;color:#aaa">米</text> | |
| 16 | + </template> | |
| 17 | + </tui-form-item> | |
| 18 | + </tui-col> | |
| 19 | + <tui-col span="12"> | |
| 20 | + <tui-form-item label="胸径" asterisk prop="height" :position="3"> | |
| 21 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | |
| 22 | + v-model="formData.height"></tui-input> | |
| 23 | + <template v-slot:right> | |
| 24 | + <text style="padding-left: 12rpx;color:#aaa">厘米</text> | |
| 25 | + </template> | |
| 26 | + </tui-form-item> | |
| 27 | + </tui-col> | |
| 28 | + </tui-row> | |
| 29 | + | |
| 30 | + | |
| 31 | + <tui-form-item | |
| 32 | + asterisk | |
| 33 | + label="位置" | |
| 34 | + class="location-form-item" | |
| 35 | + @click="openMap" | |
| 36 | + > | |
| 37 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | |
| 38 | + v-model="formData.address"></tui-input> | |
| 39 | + <template v-slot:right> | |
| 40 | + <tui-icon name="gps" :size="20"></tui-icon> | |
| 41 | + </template> | |
| 42 | + <!-- <!– 位置显示区域 –>--> | |
| 43 | + <!-- <view class="location-content">--> | |
| 44 | + <!-- <text v-if="formData.address">{{ formData.address }}</text>--> | |
| 45 | + <!-- <text v-else class="placeholder">请选择位置</text>--> | |
| 46 | + <!-- <!– 定位图标 –>--> | |
| 47 | + <!-- <tui-icon--> | |
| 48 | + <!-- name="map"--> | |
| 49 | + <!-- size="24"--> | |
| 50 | + <!-- color="#666"--> | |
| 51 | + <!-- class="location-icon"--> | |
| 52 | + <!-- ></tui-icon>--> | |
| 53 | + <!-- </view>--> | |
| 54 | + </tui-form-item> | |
| 55 | + | |
| 56 | + <tui-form-item asterisk label="管护单位" arrow highlight prop="area" @click="pickerShow"> | |
| 57 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | |
| 58 | + backgroundColor="transparent" v-model="formData.area"></tui-input> | |
| 59 | + </tui-form-item> | |
| 60 | + <tui-form-item asterisk label="权属分类" arrow highlight prop="area" @click="pickerShow"> | |
| 61 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | |
| 62 | + backgroundColor="transparent" v-model="formData.area"></tui-input> | |
| 63 | + </tui-form-item> | |
| 64 | + <!-- <tui-form-item asterisk label="验证码" prop="code">--> | |
| 65 | + <!-- <tui-input padding="0" :borderBottom="false" placeholder="请输入验证码"--> | |
| 66 | + <!-- v-model="formData.code"></tui-input>--> | |
| 67 | + <!-- <template v-slot:right>--> | |
| 68 | + <!-- <tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24"--> | |
| 69 | + <!-- bold radius="12rpx">获取验证码</tui-form-button>--> | |
| 70 | + <!-- </template>--> | |
| 71 | + <!-- </tui-form-item>--> | |
| 72 | + | |
| 73 | + <tui-form-item label="图片信息" asterisk> | |
| 74 | + <!-- 使用ThorUI的tui-upload组件 --> | |
| 75 | + <tui-upload | |
| 76 | + :height="140" | |
| 77 | + :width="140" | |
| 78 | + :value="value" | |
| 79 | + :serverUrl="serverURL" :header="{'Authorization': userToken}" | |
| 80 | + @complete="handleComplete" | |
| 81 | + @remove="handleRemove" | |
| 82 | + :limit="3" | |
| 83 | + :multiple="true" | |
| 84 | + accept="image/*" | |
| 85 | + :maxSize="5242880" | |
| 86 | + name="file" | |
| 87 | + :autoUpload="true" | |
| 88 | + > | |
| 89 | + <!-- 自定义上传按钮 --> | |
| 90 | + <view class="upload-btn"> | |
| 91 | + <tui-icon name="plus" size="32" color="#999"></tui-icon> | |
| 92 | + | |
| 93 | + </view> | |
| 94 | + </tui-upload> | |
| 95 | + | |
| 96 | + <!-- 提示信息 --> | |
| 97 | + <!-- <view class="upload-tips">--> | |
| 98 | + <!-- 最多上传3张图片，单张不超过5MB--> | |
| 99 | + <!-- </view>--> | |
| 100 | + </tui-form-item> | |
| 101 | + | |
| 102 | + | |
| 103 | + <!-- 动画区域（初始隐藏） --> | |
| 104 | + <view | |
| 105 | + class="animated-area" | |
| 106 | + :style="{ | |
| 107 | + height: isShow ? contentHeight + 'px' : '0', | |
| 108 | + opacity: isShow ? 1 : 0, | |
| 109 | + overflow: 'hidden' | |
| 110 | + }" | |
| 111 | + > | |
| 112 | + | |
| 113 | + <tui-row> | |
| 114 | + <tui-col span="12"> | |
| 115 | + <tui-form-item label="拉丁文" prop="name"> | |
| 116 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30" | |
| 117 | + v-model="formData.name"></tui-input> | |
| 118 | + </tui-form-item> | |
| 119 | + </tui-col> | |
| 120 | + <tui-col span="12"> | |
| 121 | + <tui-form-item label="级别" arrow highlight prop="area" @click="pickerShow"> | |
| 122 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | |
| 123 | + backgroundColor="transparent" v-model="formData.area"></tui-input> | |
| 124 | + </tui-form-item> | |
| 125 | + </tui-col> | |
| 126 | + </tui-row> | |
| 127 | + | |
| 128 | + <tui-form-item label="生长环境" prop="name"> | |
| 129 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50" | |
| 130 | + v-model="formData.name"></tui-input> | |
| 131 | + </tui-form-item> | |
| 132 | + | |
| 133 | + | |
| 134 | + <tui-row> | |
| 135 | + <tui-col span="12"> | |
| 136 | + <tui-form-item label="预估树龄" prop="height" :position="3"> | |
| 137 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | |
| 138 | + v-model="formData.height"></tui-input> | |
| 139 | + <template v-slot:right> | |
| 140 | + <text style="padding-left: 12rpx;color:#aaa">年</text> | |
| 141 | + </template> | |
| 142 | + </tui-form-item> | |
| 143 | + </tui-col> | |
| 144 | + <tui-col span="12"> | |
| 145 | + <tui-form-item label="干周" prop="height" :position="3"> | |
| 146 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | |
| 147 | + v-model="formData.height"></tui-input> | |
| 148 | + <template v-slot:right> | |
| 149 | + <text style="padding-left: 12rpx;color:#aaa">厘米</text> | |
| 150 | + </template> | |
| 151 | + </tui-form-item> | |
| 152 | + </tui-col> | |
| 153 | + </tui-row> | |
| 154 | + | |
| 155 | + | |
| 156 | + <tui-row> | |
| 157 | + <tui-col span="12"> | |
| 158 | + <tui-form-item label="东西冠幅" prop="height" :position="3"> | |
| 159 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | |
| 160 | + v-model="formData.height"></tui-input> | |
| 161 | + <template v-slot:right> | |
| 162 | + <text style="padding-left: 12rpx;color:#aaa">米</text> | |
| 163 | + </template> | |
| 164 | + </tui-form-item> | |
| 165 | + </tui-col> | |
| 166 | + <tui-col span="12"> | |
| 167 | + <tui-form-item label="南北冠幅" prop="height" :position="3"> | |
| 168 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | |
| 169 | + v-model="formData.height"></tui-input> | |
| 170 | + <template v-slot:right> | |
| 171 | + <text style="padding-left: 12rpx;color:#aaa">米</text> | |
| 172 | + </template> | |
| 173 | + </tui-form-item> | |
| 174 | + </tui-col> | |
| 175 | + </tui-row> | |
| 176 | + | |
| 177 | + | |
| 178 | + | |
| 179 | + | |
| 180 | + </view> | |
| 181 | + | |
| 182 | + <!-- 触发按钮 --> | |
| 183 | + <tui-button | |
| 184 | + @click="toggleArea" | |
| 185 | + type="primary" | |
| 186 | + :loading="false" | |
| 187 | + height="80rpx" | |
| 188 | + plain | |
| 189 | + > | |
| 190 | + {{ isShow ? '- 隐藏区域' : '+ 显示区域' }} | |
| 191 | + </tui-button> | |
| 192 | + | |
| 193 | + | |
| 194 | + <view class="tui-btn__box"> | |
| 195 | + <tui-button bold @click="submit">提交</tui-button> | |
| 196 | + </view> | |
| 197 | + </tui-form> | |
| 198 | + <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange"> | |
| 199 | + </tui-picker> | |
| 200 | + </view> | |
| 201 | +</template> | |
| 202 | + | |
| 203 | +<script> | |
| 204 | +import { uploadURL } from '@/config/app' | |
| 205 | +const rules = [{ | |
| 206 | + name: "score", | |
| 207 | + rule: ["range:[0.5,5]"], | |
| 208 | + msg: ["请选择评分"] | |
| 209 | +}, { | |
| 210 | + name: "name", | |
| 211 | + rule: ["required", "isChinese", "minLength:2", "maxLength:6"], | |
| 212 | + msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"] | |
| 213 | +}, { | |
| 214 | + name: "area", | |
| 215 | + rule: ["required"], | |
| 216 | + msg: ["请选择地区"] | |
| 217 | +}, { | |
| 218 | + name: "code", | |
| 219 | + rule: ["required", "minLength:4"], | |
| 220 | + msg: ["请输入验证码", "验证码不少于4位"] | |
| 221 | +}, { | |
| 222 | + name: "height", | |
| 223 | + rule: ["required", "isNum"], | |
| 224 | + msg: ["请输入身高", "身高只能填数字"] | |
| 225 | +}, { | |
| 226 | + name: "remark", | |
| 227 | + rule: ["required"], | |
| 228 | + msg: ["请输入备注"] | |
| 229 | +}, { | |
| 230 | + name: "content", | |
| 231 | + rule: ["required"], | |
| 232 | + msg: ["请输入详细内容"] | |
| 233 | +}]; | |
| 234 | +export default { | |
| 235 | + props: { | |
| 236 | + // 外部传入的已上传图片列表 | |
| 237 | + value: { | |
| 238 | + type: Array, | |
| 239 | + default: () => [] | |
| 240 | + } | |
| 241 | + }, | |
| 242 | + data() { | |
| 243 | + return { | |
| 244 | + isShow: false, // 控制区域显示/隐藏 | |
| 245 | + contentHeight: 200, // 内容区域高度 | |
| 246 | + serverURL: uploadURL, | |
| 247 | + areaData: [{ | |
| 248 | + text: "中国", | |
| 249 | + value: "1001" | |
| 250 | + }, { | |
| 251 | + text: "美国", | |
| 252 | + value: "1002" | |
| 253 | + }, { | |
| 254 | + text: "俄罗斯", | |
| 255 | + value: "1003" | |
| 256 | + }], | |
| 257 | + show: false, | |
| 258 | + //仅对部分数据进行收集演示 | |
| 259 | + formData: { | |
| 260 | + //评分 | |
| 261 | + score: 0, | |
| 262 | + //姓名 | |
| 263 | + name: '', | |
| 264 | + //地区 | |
| 265 | + area: '', | |
| 266 | + //验证码 | |
| 267 | + code: '', | |
| 268 | + //身高 | |
| 269 | + height: '', | |
| 270 | + address: '', // 位置名称 | |
| 271 | + latitude: '', // 纬度 | |
| 272 | + longitude: '' // 经度 | |
| 273 | + }, | |
| 274 | + currentFiles: [...this.value], // 当前已上传文件列表 | |
| 275 | + value: [] | |
| 276 | + } | |
| 277 | + }, | |
| 278 | + watch: { | |
| 279 | + // 监听外部传入的value变化 | |
| 280 | + value(newVal) { | |
| 281 | + this.currentFiles = [...newVal]; | |
| 282 | + } | |
| 283 | + }, | |
| 284 | + onReady() { | |
| 285 | + //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则 | |
| 286 | + // this.$refs.form && this.$refs.form.immediateValidate(true, rules) | |
| 287 | + }, | |
| 288 | + methods: { | |
| 289 | + // 切换显示/隐藏状态 | |
| 290 | + toggleArea() { | |
| 291 | + this.isShow = !this.isShow; | |
| 292 | + }, | |
| 293 | + // 上传完成回调 | |
| 294 | + handleComplete(e) { | |
| 295 | + console.log(e) | |
| 296 | + this.value = e.imgArr; | |
| 297 | + // 根据实际接口返回格式调整 | |
| 298 | + // this.currentFiles.push(e.data); | |
| 299 | + }, | |
| 300 | + // 删除图片回调 | |
| 301 | + handleRemove(index) { | |
| 302 | + // 从列表中移除 | |
| 303 | + this.currentFiles.splice(index, 1); | |
| 304 | + // // 通知父组件更新 | |
| 305 | + // this.$emit('input', this.currentFiles); | |
| 306 | + // this.$emit('remove', index); | |
| 307 | + }, | |
| 308 | + change(e) { | |
| 309 | + console.log(e) | |
| 310 | + this.formData.score = e.score | |
| 311 | + }, | |
| 312 | + pickerShow() { | |
| 313 | + this.show = true | |
| 314 | + }, | |
| 315 | + pickerHide() { | |
| 316 | + this.show = false | |
| 317 | + }, | |
| 318 | + pickerChange(e) { | |
| 319 | + console.log(e) | |
| 320 | + this.formData.area = e.text | |
| 321 | + }, | |
| 322 | + submit() { | |
| 323 | + //注：结合FormItem校验，validate方法第三个参数必须传true | |
| 324 | + this.$refs.form.validate(this.formData, rules, true).then(res => { | |
| 325 | + if (res.isPass) { | |
| 326 | + console.log(this.formData) | |
| 327 | + console.log('校验通过！') | |
| 328 | + } else { | |
| 329 | + console.log(res) | |
| 330 | + } | |
| 331 | + }).catch(errors => { | |
| 332 | + console.log(errors) | |
| 333 | + }) | |
| 334 | + }, | |
| 335 | + // 打开地图选择 | |
| 336 | + openMap() { | |
| 337 | + // 如果已有位置信息，默认显示该位置，否则使用当前位置 | |
| 338 | + const options = { | |
| 339 | + latitude: this.formData.latitude ? Number(this.formData.latitude) : '', | |
| 340 | + longitude: this.formData.longitude ? Number(this.formData.longitude) : '', | |
| 341 | + scale: 16, // 地图缩放级别 | |
| 342 | + name: this.formData.address || '', // 位置名称 | |
| 343 | + address: this.formData.address || '' // 详细地址 | |
| 344 | + }; | |
| 345 | + // 调用微信小程序地图选择API | |
| 346 | + uni.chooseLocation({ | |
| 347 | + ...options, | |
| 348 | + success: (res) => { | |
| 349 | + // 选择成功后更新位置信息 | |
| 350 | + this.formData = { | |
| 351 | + address: res.name || res.address, | |
| 352 | + latitude: res.latitude, | |
| 353 | + longitude: res.longitude | |
| 354 | + }; | |
| 355 | + }, | |
| 356 | + fail: (err) => { | |
| 357 | + console.error('地图选择失败', err); | |
| 358 | + if (err.errMsg.includes('auth deny')) { | |
| 359 | + uni.showToast({ | |
| 360 | + title: '请授权位置权限', | |
| 361 | + icon: 'none' | |
| 362 | + }); | |
| 363 | + } | |
| 364 | + } | |
| 365 | + }); | |
| 366 | + } | |
| 367 | + } | |
| 368 | +} | |
| 369 | +</script> | |
| 370 | + | |
| 371 | +<style> | |
| 372 | +.tui-title { | |
| 373 | + width: 100%; | |
| 374 | + font-size: 28rpx; | |
| 375 | + color: #888; | |
| 376 | + padding: 30rpx; | |
| 377 | + box-sizing: border-box; | |
| 378 | +} | |
| 379 | + | |
| 380 | +.tui-btn__box { | |
| 381 | + width: 100%; | |
| 382 | + position: fixed; | |
| 383 | + bottom: 0; | |
| 384 | +} | |
| 385 | + | |
| 386 | +.location-content { | |
| 387 | + font-size: 14px; | |
| 388 | +} | |
| 389 | + | |
| 390 | +/* 动画区域样式 */ | |
| 391 | +.animated-area { | |
| 392 | + height: 200rpx; | |
| 393 | + transition: all 0.3s ease-out; /* 动画过渡效果 */ | |
| 394 | +} | |
| 395 | +</style> | |
| 0 | 396 | \ No newline at end of file | ... | ... |
subPackages/treePage/treeFiles.vue
| 1 | -<script> | |
| 1 | +<template> | |
| 2 | + <view class="container"> | |
| 3 | + <tui-form ref="form" :show-message="false" :model="formData" style="border-bottom: 1px solid #f5f4f4"> | |
| 4 | + <tui-form-item arrow highlight prop="area" @click="pickerShow"> | |
| 5 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择归属单位" disabled | |
| 6 | + backgroundColor="transparent" v-model="formData.area"></tui-input> | |
| 7 | + </tui-form-item> | |
| 8 | + <tui-form-item prop="name" :bottom-border="false"> | |
| 9 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入道路" maxlength="20" | |
| 10 | + v-model="formData.name"></tui-input> | |
| 11 | + </tui-form-item> | |
| 12 | + </tui-form> | |
| 13 | + | |
| 14 | + <!-- <tui-row marginTop="10px" :gutter="5" class="full-height-row">--> | |
| 15 | + <!-- <tui-col :span="8" class="left-con full-height-col" >--> | |
| 16 | + <!-- <view class="full-height-col left-con">1</view>--> | |
| 17 | + <!-- </tui-col>--> | |
| 18 | + <!-- <tui-col :span="16" class="right-con full-height-col" >--> | |
| 19 | + <!-- <view class="full-height-col">2</view>--> | |
| 20 | + <!-- </tui-col>--> | |
| 21 | + <!-- </tui-row>--> | |
| 22 | + | |
| 23 | + <view class="full-height-row"> | |
| 24 | + <view class="full-height-col left-con"> | |
| 25 | + <view v-for="(i,index) in 7" class="teamsItem" :key="index" | |
| 26 | + @click="teamsChange(i)" | |
| 27 | + :class="{teamsActive:index==currentIndex}" | |
| 28 | + >{{ i }} | |
| 29 | + </view> | |
| 30 | + </view> | |
| 31 | + <view class="full-height-col right-con"> | |
| 32 | + <view class="nodata-wrap"> | |
| 33 | + <img src="/static/images/nodata.png" alt=""> | |
| 34 | + <view style="color: #aaa">暂无数据</view> | |
| 35 | + | |
| 36 | +<!-- <tui-no-data imgUrl="/static/images/nodata.png">暂无数据</tui-no-data>--> | |
| 37 | + </view> | |
| 38 | + <view v-for="i in 6" class="card-wrap"> | |
| 39 | + | |
| 40 | + <p class="fs-flex__between"> | |
| 41 | + <span>白菜湾四街</span> | |
| 42 | + <span>154颗</span> | |
| 43 | + </p> | |
| 44 | + | |
| 45 | + <p>已录入行道树：3颗</p> | |
| 46 | + | |
| 47 | + <p>起点。。。。。</p> | |
| 48 | + </view> | |
| 49 | + | |
| 50 | + </view> | |
| 51 | + </view> | |
| 2 | 52 | |
| 53 | + <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange"> | |
| 54 | + </tui-picker> | |
| 55 | + | |
| 56 | + </view> | |
| 57 | +</template> | |
| 58 | + | |
| 59 | + | |
| 60 | +<script> | |
| 3 | 61 | export default { |
| 4 | - name: "treeFiles" | |
| 62 | + name: "treeFiles", | |
| 63 | + data() { | |
| 64 | + return { | |
| 65 | + cardList:[], | |
| 66 | + areaData: [{ | |
| 67 | + text: "中国", | |
| 68 | + value: "1001" | |
| 69 | + }, { | |
| 70 | + text: "美国", | |
| 71 | + value: "1002" | |
| 72 | + }, { | |
| 73 | + text: "俄罗斯", | |
| 74 | + value: "1003" | |
| 75 | + }], | |
| 76 | + show: false, | |
| 77 | + currentIndex: 0, | |
| 78 | + formData: { | |
| 79 | + //道路 | |
| 80 | + name: '', | |
| 81 | + //归属单位 | |
| 82 | + area: '', | |
| 83 | + }, | |
| 84 | + card: { | |
| 85 | + title: { | |
| 86 | + text: '白菜湾四街' | |
| 87 | + }, | |
| 88 | + tag: { | |
| 89 | + text: '153颗' | |
| 90 | + }, | |
| 91 | + header: { | |
| 92 | + bgcolor: '#F7F7F7', | |
| 93 | + line: true | |
| 94 | + } | |
| 95 | + } | |
| 96 | + } | |
| 97 | + }, | |
| 98 | + methods: { | |
| 99 | + teamsChange(i) { | |
| 100 | + console.log(i) | |
| 101 | + this.currentIndex = i | |
| 102 | + }, | |
| 103 | + pickerShow() { | |
| 104 | + this.show = true | |
| 105 | + }, | |
| 106 | + pickerHide() { | |
| 107 | + this.show = false | |
| 108 | + }, | |
| 109 | + pickerChange(e) { | |
| 110 | + console.log(e) | |
| 111 | + this.formData.area = e.text | |
| 112 | + }, | |
| 113 | + } | |
| 5 | 114 | } |
| 6 | 115 | </script> |
| 7 | 116 | |
| 8 | -<template> | |
| 9 | -<view>treeFiles</view> | |
| 10 | -</template> | |
| 11 | 117 | |
| 12 | -<style scoped> | |
| 118 | +<style scoped lang="scss"> | |
| 119 | +.container { | |
| 120 | + height: 100%; | |
| 121 | + display: flex; | |
| 122 | + flex-direction: column; | |
| 123 | +} | |
| 124 | + | |
| 125 | +/* tui-row 设置100%高度 */ | |
| 126 | +.full-height-row { | |
| 127 | + /* 确保row使用flex布局 */ | |
| 128 | + display: flex; | |
| 129 | + flex: 1 | |
| 130 | +} | |
| 131 | + | |
| 132 | +/* tui-col 设置100%高度 */ | |
| 133 | +.full-height-col { | |
| 134 | + height: 100%; | |
| 135 | + background-color: #f0f0f0; | |
| 136 | +} | |
| 137 | + | |
| 138 | + | |
| 139 | +.left-con { | |
| 140 | + width: 220rpx; | |
| 141 | + height: 100%; | |
| 142 | + background: #f3f3f3; | |
| 143 | +} | |
| 144 | + | |
| 145 | +.right-con { | |
| 146 | + flex: 1; | |
| 147 | + height: 100%; | |
| 148 | + background: #fff; | |
| 149 | + padding-top: 20rpx; | |
| 150 | +} | |
| 151 | + | |
| 152 | +.teamsItem { | |
| 153 | + padding: 10rpx 10rpx 0; | |
| 154 | +} | |
| 155 | + | |
| 156 | +.teamsActive { | |
| 157 | + background: #fff; | |
| 158 | +} | |
| 159 | + | |
| 160 | +.card-wrap { | |
| 161 | + height: 200rpx; | |
| 162 | + margin: 0 20rpx 20rpx 20rpx; | |
| 163 | + padding: 20rpx; | |
| 164 | + box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3); | |
| 165 | + border-radius: 10rpx; | |
| 166 | +} | |
| 13 | 167 | |
| 168 | +.nodata-wrap{ | |
| 169 | + margin: 20px auto; | |
| 170 | + text-align: center; | |
| 171 | + image{ | |
| 172 | + width: 160rpx ; | |
| 173 | + height: 160rpx; | |
| 174 | + margin-bottom: 20rpx; | |
| 175 | + } | |
| 176 | +} | |
| 177 | + | |
| 178 | +</style> | |
| 179 | + | |
| 180 | +<style> | |
| 181 | +/* 单独写一个不带 scoped 的 style 来设置 page */ | |
| 182 | +page { | |
| 183 | + height: 100%; | |
| 184 | + background: #fff; | |
| 185 | +} | |
| 14 | 186 | </style> |
| 15 | 187 | \ No newline at end of file | ... | ... |
subPackages/treePage/treeRecord.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="container"> | |
| 3 | + <view class="record-wrap"> | |
| 4 | + <view class="record-list-wrap" v-for="i in 10">1</view> | |
| 5 | + </view> | |
| 6 | + | |
| 7 | + | |
| 8 | + <tui-button class="addTree">新增树木录入</tui-button> | |
| 9 | + </view> | |
| 10 | + | |
| 11 | +</template> | |
| 12 | + | |
| 13 | +<script> | |
| 14 | + | |
| 15 | +export default { | |
| 16 | + name: "treeRecord" | |
| 17 | +} | |
| 18 | +</script> | |
| 19 | + | |
| 20 | +<style scoped> | |
| 21 | +.record-wrap{ | |
| 22 | + padding-bottom: 120rpx; | |
| 23 | +} | |
| 24 | +.record-list-wrap{ | |
| 25 | + height: 200rpx; | |
| 26 | + margin: 20rpx 20rpx 0 20rpx; | |
| 27 | + padding: 20rpx; | |
| 28 | + box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3); | |
| 29 | + border-radius: 10rpx; | |
| 30 | +} | |
| 31 | + | |
| 32 | +.addTree{ | |
| 33 | + width: 100%; | |
| 34 | + position: fixed; | |
| 35 | + bottom: 0; | |
| 36 | +} | |
| 37 | + | |
| 38 | +</style> | |
| 0 | 39 | \ No newline at end of file | ... | ... |