uni-popup手写菜鸟上门取件时间选择器

Uni-popup是一个强大的弹出层组件，可以用于实现各种弹出窗口，包括选择器。本攻略将详细讲解如何使用uni-popup手写菜鸟上门取件时间选择器。

第一步：引入uni-popup组件

在页面中引入uni-popup组件，需要在<script>标签中添加如下代码：

import uniPopup from '@/components/uni-popup/uni-popup.vue';

export default {
  components: {
    uniPopup
  },
  // 其他代码
}

第二步：编写HTML结构

在页面中编写HTML结构，用于显示弹出选择器的按钮和弹出层。示例代码如下：

<template>
  <view>
    <view class="button" @click="showPopup">点击选择上门取件时间</view>
    <uni-popup :show="show" @close="onClose">
      <!-- 弹出层内容的HTML结构可以自行设计 -->
      <picker>
        <view class="picker-item">2019年9月10日</view>
        <view class="picker-item">2019年9月11日</view>
        <view class="picker-item">2019年9月12日</view>
      </picker>
    </uni-popup>
  </view>
</template>

在上面的示例代码中，<view>标签表示一个视图容器，@click="showPopup"表示点击该标签时会触发showPopup方法，<uni-popup>标签表示一个弹出层，v-show="show"表示该弹出层是否显示，@close="onClose"表示关闭弹出层时会触发onClose方法，<picker>标签表示一个选择器，<view class="picker-item">表示选择器中每个选项的HTML结构。

第三步：编写JS代码

在页面中编写JS代码，用于处理按钮点击事件和弹出层关闭事件。示例代码如下：

export default {
  // 其他代码
  data() {
    return {
      show: false
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClose() {
      this.show = false;
    }
  }
};

在上面的示例代码中，data()方法返回一个对象，该对象中的show属性表示弹出层是否显示，初始值为false，showPopup()方法用于处理按钮点击事件，将show属性的值设为true，从而显示弹出层，onClose()方法用于处理弹出层关闭事件，将show属性的值设为false，从而隐藏弹出层。

示例说明一：

编写一个手写时间选择器，在用户选择“小时”和“分钟”后，将选择的时间拼接起来并显示在页面中。

HTML代码：

<template>
  <view>
    <view class="button" @click="showPopup">选择时间</view>
    <uni-popup :show="show" @close="onClose">
      <picker>
        <view class="picker-item" v-for="hour in hours">{{hour}}</view>
      </picker>
      <picker>
        <view class="picker-item" v-for="minute in minutes">{{minute}}</view>
      </picker>
      <view class="button" @click="confirm">确定</view>
    </uni-popup>
    <view class="result">{{result}}</view>
  </view>
</template>

JS代码：

export default {
  data() {
    return {
      show: false,
      hours: [],
      minutes: [],
      selectedHour: '',
      selectedMinute: '',
      result: ''
    };
  },
  mounted() {
    // 生成小时选项
    for (let i = 0; i < 24; i++) {
      this.hours.push(i < 10 ? '0' + i : '' + i);
    }

    // 生成分钟选项
    for (let i = 0; i < 60; i++) {
      this.minutes.push(i < 10 ? '0' + i : '' + i);
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClose() {
      this.show = false;
    },
    confirm() {
      this.result = this.selectedHour + ':' + this.selectedMinute;
      this.show = false;
    }
  }
};

在这个示例中，我们使用了一个v-for指令来动态生成小时和分钟的选项，使用了selectedHour和selectedMinute属性来存储用户选择的小时和分钟，使用了confirm方法来处理用户点击“确定”按钮时的逻辑，将选择的时间拼接起来并显示在页面中。

示例说明二：

编写一个手写地址选择器，在用户选择完省、市、区之后，将选择的地址拼接起来并显示在页面中。

HTML代码：

<template>
  <view>
    <view class="button" @click="showPopup">选择地址</view>
    <uni-popup :show="show" @close="onClose">
      <picker>
        <view class="picker-item" v-for="province in provinces">{{province}}</view>
      </picker>
      <picker>
        <view class="picker-item" v-for="city in cities">{{city}}</view>
      </picker>
      <picker>
        <view class="picker-item" v-for="area in areas">{{area}}</view>
      </picker>
      <view class="button" @click="confirm">确定</view>
    </uni-popup>
    <view class="result">{{result}}</view>
  </view>
</template>

JS代码：

export default {
  data() {
    return {
      show: false,
      provinces: ['北京市', '上海市', '天津市', '重庆市'],
      cities: ['北京市', '上海市', '天津市', '重庆市'],
      areas: ['东城区', '西城区', '朝阳区', '海淀区'],
      selectedProvince: '',
      selectedCity: '',
      selectedArea: '',
      result: ''
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClose() {
      this.show = false;
    },
    confirm() {
      this.result = this.selectedProvince + this.selectedCity + this.selectedArea;
      this.show = false;
    }
  }
};

在这个示例中，我们使用了一些静态数组来表示省、市、区的选项，使用了selectedProvince、selectedCity和selectedArea属性来存储用户选择的省、市、区，使用了confirm方法来处理用户点击“确定”按钮时的逻辑，将选择的地址拼接起来并显示在页面中。