createActive.vue

<template>
  <div class="container">
    <div class="title">基础设置</div>
    <van-cell-group class="all">
      <van-cell title="活动标题" style="font-size:14px;">
        <template slot="default" >
          <van-field v-model="title" placeholder="请输入活动标题" class="right" style="font-size:14px;" />
        </template>
      </van-cell>
      <van-cell title="消费后领券" style="font-size:14px;">
        <template slot="default">
          <van-switch v-model="coupon" size="20px"  class="right"  />
        </template>
      </van-cell>
      <van-cell title="新客专享" style="font-size:14px;">
        <template slot="default">
          <van-switch v-model="newCustomer" size="20px"  class="right"  />
        </template>
      </van-cell>
      <van-cell title="领券条件" style="font-size:14px;">
        <template slot="default">
          <span class="phone">手机号必填</span>
          <van-switch v-model="condition" size="20px" />
        </template>
      </van-cell>
    </van-cell-group>
    <div class="title">券设置</div>
    <van-cell-group class="all">
      <van-cell title="活动标题" style="font-size:14px;">
        <template slot="default">
          <van-field v-model="title2" placeholder="请输入活动标题"  class="right" style="font-size:14px;" />
        </template>
      </van-cell>
      <van-cell title="券类型" style="font-size:14px;">
        <template slot="default">
          <van-radio-group v-model="type"  class="right" >
            <van-radio name="1" style="float:left;">代金券</van-radio>
            <van-radio name="2" style="float:right;">折扣券</van-radio>
          </van-radio-group>
        </template>
      </van-cell>
      <van-cell title="代金券金额" style="font-size:14px;">
        <template slot="default">
          <van-field
            class="right noborder"
            readonly
            clickable
            :value="cashCoupon"
            placeholder="输入代金券金额"
            @touchstart.native.stop="show = true"
          />
          <van-number-keyboard
            v-model="cashCoupon"
            :show="show"
            :maxlength="6"
            @blur="show = false"
          />
        </template>
      </van-cell>
      <van-cell title="使用门槛" style="font-size:14px;">
        <template slot="default">
          <van-field
            class="right noborder"
            readonly
            clickable
            :value="limit"
             placeholder="输入使用门槛"
            @touchstart.native.stop="show2 = true"
          />
          <van-number-keyboard
            v-model="limit"
            :show="show2"
            :maxlength="6"
            @blur="show2 = false"
          />
        </template>
      </van-cell>
      <van-cell title="活动开始时间" style="font-size:14px;">
        <template slot="default">
          <van-field
            class="right"
            v-model="startTime1"
            placeholder="选择活动开始时间" readonly="readonly"
            @click="startShow = true"
          />
          <van-popup v-model="startShow"  position="bottom" :overlay="true">
            <van-datetime-picker
              v-model="startTime"
              type="datetime"
              @cancel="startShow = false"
              @confirm="startShow = false"
              @change="startTimeChange"
            />
          </van-popup>
        </template>
      </van-cell>
      <van-cell title="活动结束时间" style="font-size:14px;">
        <template slot="default">
          <van-field
            class="right"
            v-model="endTime1"
            placeholder="选择活动结束时间" readonly="readonly"
            @click="endShow = true"
          />
          <van-popup v-model="endShow"  position="bottom" :overlay="true">
            <van-datetime-picker
              v-model="endTime"
              type="datetime"
              @cancel="endShow = false"
              @confirm="endShow = false"
              @change="endTimeChange"
            />
          </van-popup>
        </template>
      </van-cell>
      <div class="des">描述</div>   
      <van-field
        class="area"
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        placeholder="请输入描述"
        show-word-limit
      />
    </van-cell-group>
    <div class="creat">创建活动</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      title2: "",
      coupon: "",
      newCustomer: "",
      condition: "",
      type: "",
      show: false,
      show2: false,
      cashCoupon: "",
      limit: "",
      startTime: new Date(),
      startTime1: "",
      endTime: "",
      endTime1: "",
      startShow: false,
      endShow: false,
      message: "",
      
    };
  },
  methods: {
    startTimeChange(e) {
      let startTimeArr = e.getValues()
      this.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}  ${startTimeArr[3]}:${startTimeArr[4]}:00`
    },
    endTimeChange(e) {
      let endTimeArr = e.getValues()
      this.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}  ${endTimeArr[3]}:${endTimeArr[4]}:00`
    }
  },
  mounted() {
  }
};
</script>
<style>

</style>

<style  scoped>
.all >>> input {
  text-align: right;
}
.noborder >>> .van-cell:not(:last-child)::after {
  display: none !important;
}
.noborder .van-cell:not(:last-child)::after{
  border: 0px solid red !important;
}
.creat {
  margin-top: 80px;
  width:96%;
  height:40px;
  background:rgba(117,178,253,1);
  border-radius:10px;
  text-align: center;
  line-height: 40px;
  font-size:16px;
  font-weight:bold;
  color: #fff;
  margin-left: 2%;
  margin-bottom: 16px;
}
.container {
  background:rgba(248,248,248,1);
}
.van-field__body textarea {
  background:rgba(248,248,248,1);
}
.des {
  padding: 6px 16px;
  font-size: 14px;
}

.phone {
  float: left;

}
.title {
  background-color: #f8f8f8;
  height: 36px;
  line-height: 36px;
  font-size: 12px;
  padding-left: 16px;
  color: #2d476a;
}
[data-v-08d4afe1] .van-cell {
  height: 100%;
  font-size: 14px;
}
.right {
  padding: 0;
  
}
</style>