H5/components/mapAd/mapAd.vue

<template>
  <uni-popup
    class="picker-popup"
    ref="mapAdPopupRef"
    type="bottom"
    border-radius="10px 10px 0 0"
  >
    <div class="picker-content">
      <div class="city-picker-btn">
        <text @click.stop="cancel()">取消</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 mapAdList" :key="index">{{
            item.adName
          }}</view>
        </picker-view-column>
      </picker-view>
    </div>
  </uni-popup>
</template>

<script>
import { getMapAdList_Api } from "@/api/map.js";
export default {
  name: "mapAd",
  props: {
    mapAdId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      value: [],
      mapAdList: [],
    };
  },
  watch: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      const parms = { typeStatus: "ENABLE" };
      getMapAdList_Api(parms).then((res) => {
        this.mapAdList = res || [];
      });
    },
    open() {
      this.$refs.mapAdPopupRef.open();
    },
    bindChange(val) {
      const { value } = val.detail;
      this.value = value || [0];
    },
    confirm() {
      const in_ = this.value[0] || 0;
      const item = this.mapAdList[in_];
      this.$emit("update:mapAdId", item.mapAdId);
      this.$emit("mapAdSelect", item);
      this.cancel();
    },
    cancel() {
      this.$refs.mapAdPopupRef.close();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>