用uniapp写小程序遇到的坑
本帖为经验记录
1.小程序里想生成海报的话可以直接使用下边这个插件
生成海报:
https://ext.dcloud.net.cn/plugin?id=471
2.地区选择组件
由于该项目能展示到社区的地址,字数较多大多数现成的组件无法展示全,antd mobile中有一款可以展示全的如下图
由于当时没有看到这个组件所以自己封装了一个
regionalComponents/regionalComponents.vue
<template>
<view class="content">
<view class="region-box-layer" />
<view
class="region-box"
:style="'height:' + heightCot + '%'"
>
<view class="title-box">
<text
class="title-txt"
@tap="cancel"
>
取消
</text>
<text
class="title-txt"
@tap="sure"
>
确定
</text>
</view>
<view class="map-txt">
<text
:class="showIndex == 0 ? 'select' : ''"
@tap="anewSelect(0)"
>
{{ district }}
</text>
<text v-if="district != ''">
-
</text>
<text
v-if="district != ''"
:class="showIndex == 1 ? 'select' : ''"
@tap="anewSelect(1)"
>
{{ street }}
</text>
<text v-if="street != ''">
-
</text>
<text
v-if="street != ''"
:class="showIndex == 2 ? 'select' : ''"
@tap="anewSelect(2)"
>
{{ community }}
</text>
</view>
<view class="main-box">
<view v-if="showIndex === 0">
<view
v-for="(item, index) in districtData"
:key="index"
class="list-box"
@tap="selectDistrict(index, item)"
>
<text>{{ item.name }}</text>
</view>
</view>
<view v-if="showIndex === 1">
<view
v-for="(item, index) in streetData"
:key="index"
class="list-box"
@tap="selectStreet(index, item)"
>
<text>{{ item.name }}</text>
</view>
</view>
<view
v-if="showIndex === 2"
>
<view
v-for="(item, index) in communityData"
:key="index"
class="list-box"
@tap="selectCommunity(index, item)"
>
<text>{{ item.name }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { getCommunityByCode } from "@/api";
export default {
props:{
level: {
type: String,
default: '110100',
},
},
data() {
return {
showIndex: 0, //地区显示0为区1为街道2为社区
district: "",
community: "",
communityCode: "",
street: "",
heightCot: 40, //设置屏幕高度 0 ~ 100
districtData: "", // 当前展示的行政区数据
streetData: "", // 当前展示的街道数据
communityData: "", //当前展示的社区数据
streetsData: "",
};
},
mounted() {
this.handleAllDistrict(this.level); //获取区级数据
},
methods: {
//组件高度自适应
getScreen() {
let that = this;
uni.getSystemInfo({
success: (res) => {
that.heightCot = (res.safeArea.height * 2) / 2;
},
});
},
//取消
cancel() {
this.$emit("cancel");
},
//确定
sure() {
const district = this.district; //区
const street = this.street; //街道
const community = this.community; //社区
const communityCode = this.communityCode; //社区id
const data = [district, street, community].filter((item) => {
return item && item.trim();
});
this.$emit("sure", data, communityCode);
},
//下拉选择
anewSelect(num) {
switch (num) {
case 0:
this.showIndex = 0;
this.communityData = [];
this.streetsData = [];
this.street = "";
this.community = "";
this.street = "";
break;
case 1:
this.showIndex = 1;
this.communityData = [];
this.streetsData = [];
this.community = "";
this.street = "";
break;
case 2:
break;
}
},
//获取地区信息
getMap(code, type) {
//name选择名称 type类型
let that = this;
if (type === "AREA") {
getCommunityByCode(code).then((res) => {
if (res.code === 200) {
that.streetData = res.data;
}
});
} else if (type === "STR") {
getCommunityByCode(code).then((res) => {
if (res.code === 200) {
that.communityData = res.data;
}
});
}
},
//选择当前区级
selectDistrict(index, item) {
this.getMap(item.code, "AREA");
this.district = item.name;
this.showIndex = 1;
},
//选择当前街道
selectStreet(index, item) {
this.getMap(item.code, "STR");
this.street = item.name;
this.showIndex = 2;
},
// 选择当前社区
selectCommunity(index, item) {
this.community = item.name;
this.communityCode = item.code;
this.showIndex = 3;
},
//获取区级数据的回调
handleAllDistrict(code) {
getCommunityByCode(code).then((res) => {
if (res.code === 200) {
this.districtData = res.data;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.region-box-layer {
position: fixed;
z-index: 1001;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.region-box {
position: fixed;
z-index: 1002;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
padding: 20rpx;
border-top: 1rpx solid rgba(0, 0, 0, 0.2);
max-height: 50%;
padding-bottom: 100rpx;
border-radius: 15rpx;
.title-box {
padding: 0 10rpx 30rpx 10rpx;
display: flex;
justify-content: space-between;
.title-txt {
color: #343434;
font-size: 30rpx;
&:nth-child(2) {
color: #3c9cff;
}
}
}
.map-txt {
display: flex;
justify-content: center;
color: #4293f4;
font-size: 30rpx;
height: 100rpx;
align-items: center;
background: #f9fbff;
text {
margin: 0 2rpx;
&:nth-child(even) {
border: none;
}
}
.select {
color: #3c9cff;
position: relative;
}
}
.main-box {
font-size: 30rpx;
height: 100%;
overflow: auto;
padding-bottom: 200rpx;
.list-box {
display: flex;
flex-direction: column;
padding: 30rpx 0;
border-bottom: 1rpx solid #e1e2e3;
}
}
}
</style>
页面使用
//第一步引入及注册
import regionalComponents from "../../components/regionalComponents/regionalComponents.vue";
export default {
components: {
regionalComponents,
},
data() {
return {
regionaStatus: false,
}
}
}
第二步展示
<!-- 地址选择弹窗 -->
<regionalComponents
v-if="regionaStatus"
ref="region"
@cancel="cancels"
@sure="sures"
/>
//js中的点击确认的回调
// 点击确认的回调
sures(data, communityCode) {
if (data.length < 3) {
return;
}
this.address = data[0] + data[1] + data[2];
this.form.organizeAreaName = this.address;
this.form.organizeAreaId = communityCode; //街道的code
},