选择社区弹窗

hejianhao

2025-03-13 33d911fd053a02ca5491bdbbaa3c6e23bda95af8

选择社区弹窗

 H5/pages/authentication/authentication.vue

@@ -36,7 +36,7 @@
                <view class="label">
                    服务社区
                </view>
                <view class="value flex j-between a-center flex1">
                <view @tap.stop="showSelectCommunity" class="value flex j-between a-center flex1">
                    <text class="placeholderStyle">请选择服务社区</text>
                    <image src="/static/Appeal/left.png" mode="aspectFill" class="h-19 w-19"></image>
                </view>
@@ -105,6 +105,40 @@
                </view>
            </view>
        </view> -->

        <!-- 选择服务社区 -->
        <u-popup :show="selectPopup" round="16rpx" :close-on-click-overlay="false" @open="openSelectPopup">
            <view class="relative">
                <image @tap.stop="selectPopup = false" src="@/static/closeImg.png" class="w-35 h-35 absolute"
                    style="right: 31rpx;top: 46rpx;" />
                <view class="txt-center pt-38 pb-40 fs-35 lh-48 font-bold">请选择服务社区</view>
                <view class="flex a-center j-between txt-center py-10 fs-27 font-bold bgColor1">
                    <view class="flex1">区县</view>
                    <view class="flex1">街道</view>
                    <view class="flex1">社区</view>
                </view>
                <view class="mb-20">
                    <picker-view :value="value" @change="bindChange" class="picker-view">
                        <picker-view-column>
                            <view class="item" v-for="(item, index) in county" :key="index">
                                {{ item }}
                            </view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item, index) in street" :key="index">
                                {{ item }}
                            </view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item, index) in community" :key="index">
                                {{ item }}
                            </view>
                        </picker-view-column>
                    </picker-view>
                </view>
                <view class="submitBtn">确认</view>
            </view>
        </u-popup>
    </view>
</template>

@@ -114,10 +148,21 @@
        data() {
            return {
                imgUrls: [],
                localImageUrls: []
                localImageUrls: [],
                selectPopup: false,
                value: [0, 0, 0],
                county: [], //区县
                street: [], //街道
                community: [], //社区
            }
        },
        methods: {
            bindChange(e) {
                this.value = e.detail.value
            },
            showSelectCommunity() {
                this.selectPopup = true
            },
            delImg(item) {
                this.localImageUrls = this.localImageUrls.filter(i => i != item)
                this.imgUrls = this.imgUrls.filter(i => i != item)
@@ -176,11 +221,20 @@
                    fail: () => {}
                })
            },
            openSelectPopup() {
                this.county = ['仁和区']
                this.street = ['仁和镇']
                this.community = ['仁和街社区']
            }
        }
    }
</script>

<style scoped lang="scss">
    .bgColor1 {
        background: rgba(216, 216, 216, 0.2);
    }

    .content {
        background-image: url('/static/home/bg@2x.png');
        background-size: 750rpx 648rpx;
@@ -209,6 +263,7 @@
            }
        }
    }

    .footerButton {
        position: fixed;
        bottom: 50rpx;
@@ -223,6 +278,7 @@
        color: #fff;
        border-radius: 48rpx;
    }

    .footer {
        position: fixed;
        bottom: 0;
@@ -285,4 +341,34 @@
    .placeholderStyle {
        color: #B2B2B2;
    }

    .picker-view {
        height: 460rpx;
        font-size: 35rpx;
    }

    /deep/.picker-view {
        margin: 0 auto;

        .item {
            text-align: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 36rpx;
            color: #333333;
            line-height: 50rpx;
        }
    }

    .submitBtn {
        width: calc(100% - 62rpx);
        margin: 0 31rpx;
        line-height: 96rpx;
        text-align: center;
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
        border-radius: 48rpx;
        font-weight: 600;
        font-size: 35rpx;
        color: #fff;
    }
</style>

 H5/pages/result-entry/index.vue