front-end/hdApp/src/components/app-timer.vue

<template>
  <view>
    <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="timeVisible = true">
        <div class="tui-title">{{ timeLabel }}</div>
        <div v-if="sendTime" class="tui-placeholder" style="color:#333;">{{value}}</div>
				<div class="tui-placeholder" v-else>{{ placeholder }}</div>
        <w-picker
          :visible.sync="timeVisible"
          mode="time" 
          :current="true"
			    :second="false"
          @confirm="onConfirm"
          @cancel="onCancel"
          :themeColor="'#3385ff'">

        </w-picker>
      </tui-list-cell>
  </view>
</template>

<script>
import Wpicker from '@/components/w-picker/w-picker.vue'
import TuiListCell from "@/components/plugin/list-cell";
export default{
  components: {
    Wpicker,
    TuiListCell
  },
  props: {
    timeLabel: {
			type: String,
			default: "配送时间"
		},
    placeholder: {
			type: String,
			default: "请选择具体时间"
		},
    sendTime: {
			type: String,
			default: ""
		},
  },
  data() {
    return {
      timeVisible: false,
      value: ''
    }
  },
  watch: {
		sendTime(val) {
			if (val) {
				this.value = val
			}
		}
	},
  methods: {
    onConfirm(val) {
      this.$emit('confirm', val.result)
    },
    onCancel() {
      this.timeVisible = false
      this.$emit('cancel')
    }
  }
}
</script>