123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <template>
- <!-- <uni-popup ref="SelectMap" :isMaskClick='true' type="bottom" border-radius="10px 10px 0 0"
- maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
- <view class="map-list">
- <view class="title">请选择问题分类</view>
- <view class="map-item" @click.stop="handlerFeedbackType(item.value)" v-for="item in list">
- {{item.label }}
- </view>
- <view class="map-item cancel" @click.stop="close()">
- 取消
- </view>
- </view>
- </uni-popup> -->
- <uni-popup class="picker-popup" ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
- <div class="picker-content">
- <div class="city-picker-btn">
- <text @click.stop="close()">取消</text>
- <text @click.stop="confirm()">确定</text>
- </div>
- <picker-view indicator-class="indicator-class" :value="value||[]" class="picker-view" @change="bindChange">
- <picker-view-column>
- <view class="item" v-for="(item,index) in list" :key="index">{{item.label}}</view>
- </picker-view-column>
- </picker-view>
- </div>
- </uni-popup>
- </template>
- <script>
- export default {
- props: {
- list: {
- type: Array,
- default: () => []
- }
- },
- data() {
- return {
- value: undefined
- };
- },
- created() {
- },
- mounted() {
- // setTimeout(() => {
- // this.open()
- // }, 200)
- },
- methods: {
- open() {
- if (!this.value || this.value.length === 0) {
- this.value = [0]
- }
- this.$refs.popupRef.open()
- },
- close() {
- this.$refs.popupRef.close()
- },
- confirm() {
- if (this.value && this.value.length > 0) {
- const index = this.value[0];
- const value = this.list[index].value;
- this.$emit("chang", value)
- this.close()
- } else {
- uni.showToast({
- title: '请选择问题分类',
- icon: 'none'
- })
- }
- },
- bindChange(val) {
- const { value } = val.detail;
- this.value = value;
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .map-list {
- width: 100%;
- // height: 30vh;
- background-color: #fff;
- border-radius: 20rpx 20rpx 0 0;
- text-align: center;
- .title {
- width: 100%;
- text-align: center;
- padding: 30rpx 20rpx 50rpx 20rpx;
- font-size: 28rpx;
- }
- .map-item {
- width: 100%;
- padding: 30rpx 20rpx;
- }
- .cancel {
- padding: 50rpx 30rpx;
- color: #9f9f9f;
- }
- }
- </style>
|