createBigWheelActive.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="basicInfo.title"
            placeholder="请输入活动标题"
            class="right"
            style="font-size:14px;"
          />
        </template>
      </van-cell>
      <van-cell title="活动开始时间" style="font-size:14px;">
        <template slot="default">
          <div class="nobr">
            <van-field
              class="right"
              v-model="basicInfo.startTime1"
              placeholder="请选择开始时间"
              readonly="readonly"
              @click="basicInfo.startShow = true"
            />
            <van-popup
              v-model="basicInfo.startShow"
              position="bottom"
              :overlay="true"
            >
              <van-datetime-picker
                v-model="basicInfo.startTime"
                type="date"
                @cancel="basicInfo.startShow = false"
                @confirm="handleBasicSTime"
                @change="startTimeChange"
              />
            </van-popup>
          </div>
        </template>
      </van-cell>
      <van-cell title="活动结束时间" style="font-size:14px;">
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right"
              v-model="basicInfo.endTime1"
              placeholder="请选择结束时间"
              readonly="readonly"
              @click="basicInfo.endShow = true"
            />
            <van-popup
              v-model="basicInfo.endShow"
              position="bottom"
              :overlay="true"
            >
              <van-datetime-picker
                v-model="basicInfo.endTime"
                type="date"
                @cancel="basicInfo.endShow = false"
                @confirm="handleBasicETime"
                @change="endTimeChange"
              />
            </van-popup>
          </div>
        </template>
      </van-cell>
      <van-cell title="领券条件" style="font-size:14px;">
        <template slot="default">
          <div class="condition">
            <span class="phone">手机号必填</span>
            <van-switch v-model="condition" size="20px" />
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <div class="title">抽奖设置</div>
    <van-cell-group class="all">
      <van-cell style="font-size:14px;" center class="cs">
        <template slot="title">
          <span class="custom-title">每天抽奖</span>
          <span class="small">（单人最多可抽奖次数）</span>
        </template>
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="LuckyDraw.number"
              placeholder="请输入次数"
              @touchstart.native.stop="LuckyDraw.show = true"
            />
            <van-number-keyboard
              v-model="LuckyDraw.number"
              :show="LuckyDraw.show"
              @blur="LuckyDraw.show = false"
            />
          </div>
        </template>
      </van-cell>
      <van-cell style="font-size:14px;" class="cs">
        <template slot="title">
          <span class="custom-title">最多中奖</span>
          <span class="small">（单人最多可中奖次数）</span>
        </template>
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="LuckyDraw.winningNumber"
              placeholder="请输入次数"
              @touchstart.native.stop="LuckyDraw.show2 = true"
            />
            <van-number-keyboard
              v-model="LuckyDraw.winningNumber"
              :show="LuckyDraw.show2"
              @blur="LuckyDraw.show2 = false"
            />
          </div>
        </template>
      </van-cell>
      <van-cell style="font-size:14px;" class="cs gl">
        <template slot="title">
          <span class="custom-title">中奖概率</span>
        </template>
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="LuckyDraw.probability"
              @touchstart.native.stop="LuckyDraw.show3 = true"
            />
            <span class="bfb">%</span>
            <van-number-keyboard
              v-model="LuckyDraw.probability"
              :show="LuckyDraw.show3"
              @blur="LuckyDraw.show3 = false"
            />
          </div>
        </template>
      </van-cell>
      <van-cell style="font-size:14px;" class="task">
        <template slot="title">
          <span class="custom-title">做任务奖次数</span>
          <div style="font-size:10px;">
            （开启后提醒顾客领取任务，如发朋友圈、加好友等，增加抽奖次数）
          </div>
        </template>
        <template slot="default">
          <van-switch v-model="LuckyDraw.quantity" size="20px" class="right" />
        </template>
      </van-cell>
      <van-cell style="font-size:14px;" class="cs">
        <template slot="title">
          <span class="custom-title">增加次数</span>
          <span class="small">（点击“增加次数”按钮增加几次次数）</span>
        </template>
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="LuckyDraw.addNumber"
              placeholder="请输入次数"
              @touchstart.native.stop="LuckyDraw.show3 = true"
            />
            <van-number-keyboard
              v-model="LuckyDraw.addNumber"
              :show="LuckyDraw.show3"
              @blur="LuckyDraw.show3 = false"
            />
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <div class="title">奖品设置</div>
    <van-cell-group
      class="all sz"
      v-for="(list, index) in prizeList"
      :key="index"
    >
      <van-icon
        v-if="prizeList.length > 1"
        name="close"
        size="20"
        class="close"
        @click="removePrice(index)"
      />
      <van-cell center>
        <template slot="title">
          <span class="custom-title">奖项名称</span>
        </template>
        <template slot="default">
          <van-field
            class="right"
            v-model="prizeList[index].name"
            placeholder="请输入奖项名称"
          />
        </template>
      </van-cell>
      <div class="yhType">
        <div class="yhbr">
          <div class="top">
            <span style="color:#2d476a;">优惠券类型</span>
            <van-radio-group v-model="prizeList[index].type" class="right">
              <van-radio name="1" style="float:left;margin-right:10px;"
                >代金券</van-radio
              >
              <van-radio name="2" style="float:right;">折扣券</van-radio>
            </van-radio-group>
          </div>
          <div class="mj">
            <div class="l-yh"> 
              <div class="je">
                <van-field
                  class="tm"
                  readonly
                  clickable
                  :value="prizeList[index].discountsMoney"
                  @touchstart.native.stop="
                    prizeList[index].discountsShow = true
                  "
                  placeholder="输入金额"
                />
                <van-number-keyboard
                  v-model="prizeList[index].discountsMoney"
                  :show="prizeList[index].discountsShow"
                  @blur="prizeList[index].discountsShow = false"
                />
              </div>
              <span class="word">元优惠</span>
            </div>
            <div class="r-yh">
              <van-checkbox v-model="prizeList[index].full"></van-checkbox>

              <span class="word">满</span>
              <div class="je">
                <van-field
                  class="tm"
                  readonly
                  clickable
                  :value="prizeList[index].fullMoney"
                  @touchstart.native.stop="prizeList[index].fullShow = true"
                  placeholder="输入金额"
                />
                <van-number-keyboard
                  v-model="prizeList[index].fullMoney"
                  :show="prizeList[index].fullShow"
                  @blur="prizeList[index].fullShow = false"
                />
              </div>
              <span class="word end">元可用</span>
            </div>
          </div>
        </div>
      </div>

      <van-cell title="开始时间" style="font-size:14px;">
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right"
              v-model="prizeList[index].startTime1"
              placeholder="选择活动开始时间"
              readonly="readonly"
              @click="prizeList[index].startShow = true"
            />
            <van-popup
              v-model="prizeList[index].startShow"
              position="bottom"
              :overlay="true"
            >
              <van-datetime-picker
                v-model="prizeList[index].startTime"
                type="date"
                @cancel="prizeList[index].startShow = false"
                @confirm="handleStartTime(prizeList[index].startTime,index)"
                @change="startTimeChange2(prizeList[index].startTime, index)"
              />
            </van-popup>
          </div>
        </template>
      </van-cell>
      <van-cell title="结束时间" style="font-size:14px;">
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right"
              v-model="prizeList[index].endTime1"
              placeholder="选择活动结束时间"
              readonly="readonly"
              @click="prizeList[index].endShow = true"
            />
            <van-popup
              v-model="prizeList[index].endShow"
              position="bottom"
              :overlay="true"
            >
              <van-datetime-picker
                v-model="prizeList[index].endTime"
                type="date"
                @cancel="prizeList[index].endShow = false"
                @confirm="handleEndTime(prizeList[index].endTime,index)"
                @change="endTimeChange2(prizeList[index].endTime, index)"
              />
            </van-popup>
          </div>
        </template>
      </van-cell>
      <van-cell title="奖品数量" style="font-size:14px;">
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="prizeList[index].prize"
              placeholder="请输入数量"
              @touchstart.native.stop="prizeList[index].prizeShow = true"
            />
            <van-number-keyboard
              v-model="prizeList[index].prize"
              :show="prizeList[index].prizeShow"
              :maxlength="6"
              @blur="prizeList[index].prizeShow = false"
            />
          </div>
        </template>
      </van-cell>
      <van-cell style="font-size:14px;" center class="cs">
        <template slot="title">
          <span class="custom-title">每日上限</span>
          <span class="small">（此奖项每天最多可抽中的数量）</span>
        </template>
        <div class="jpsl">
          <template slot="default">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="prizeList[index].limit"
              placeholder="请输入次数"
              @touchstart.native.stop="prizeList[index].limitShow = true"
            />
            <van-number-keyboard
              v-model="prizeList[index].limit"
              :show="prizeList[index].limitShow"
              @blur="prizeList[index].limitShow = false"
            />
          </template>
        </div>
      </van-cell>
      <div class="add" @click="addPrice">添加奖项</div>
    </van-cell-group>
    <div class="detail">
      <div class="border">
        <div class="des">活动描述</div>
        <van-field
          class="area"
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入描述"
          show-word-limit
        />
      </div>
    </div>
    <div class="detail" style="margin-top:0;">
      <div class="des">活动图片</div>
      <van-uploader v-model="fileList" multiple :max-count="9" />
    </div>
    <div class="creat">创建活动</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      basicInfo: {
        title: "",
        startTime: new Date(),
        startTime1: "",
        endTime: new Date(),
        endTime1: "",
        startShow: false,
        endShow: false
      },
      LuckyDraw: {
        name: "",
        number: "",
        winningNumber: "",
        probability: "",
        quantity: "",
        addNumber: "",
        show: false,
        show2: false,
        show3: false
      },
      prizeList: [
        {
          name: "",
          type: "",
          discountsMoney: "",
          discountsShow: false,
          full: "",
          fullMoney: "",
          fullShow: false,
          validity: "",
          startTime: new Date(),
          startTime1: "",
          startShow: false,
          endTime: new Date(),
          endTime1: "",
          endShow: false,
          prize: "",
          prizeShow: false,
          limit: "",
          limitShow: false
        }
      ],
      title: "",
      title2: "",
      coupon: "",
      newCustomer: "",
      condition: "",
      type: "",
      startShow: false,
      endShow: false,
      message: "",
      fileList: [],
      pTime: new Date(),
      confirmTime: new Date()
    };
  },
  methods: {
    startTimeChange(e) {
      let startTimeArr = e.getValues();
      this.basicInfo.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`;
    },
    startTimeChange2(e, index) {
      console.log(111);
      
      this.prizeList[index].startTime1 = this.timeFormat(e);
      console.log(this.prizeList[index].startTime1,"2222");
      
    },
    ////////
    handlePSTime(index) {
      this.prizeList[index].startTime1 = this.timeFormat(this.confirmTime);
      this.prizeList[index].startShow = false;
    },
    timeFormat(time) {
      let year = 1900 + time.getYear();
      let month = "0" + (time.getMonth() + 1);
      let date = "0" + time.getDate();
      return (
        year +
        "-" +
        month.substring(month.length - 2, month.length) +
        "-" +
        date.substring(date.length - 2, date.length) +
        " "
      );
    },
    endTimeChange(e) {
      let endTimeArr = e.getValues();
      this.basicInfo.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`;
    },
    handleBasicETime(value) {
      this.basicInfo.endShow = false;
      this.basicInfo.endTime1 = this.timeFormat(value);
    },
    endTimeChange2(e, index) {
      this.prizeList[index].endTime1 = this.timeFormat(e);
    },
    ///点击确定不修改处理
    handleStartTime(e,index) {
      console.log(e,"e");
      
      this.prizeList[index].startTime1 = this.timeFormat(e)
      this.prizeList[index].startShow = false
    },
    handleEndTime(e,index) {
      console.log(e,"e");
      
      this.prizeList[index].endTime1 = this.timeFormat(e)
      this.prizeList[index].endShow = false
    },
    //////
    handlePETime(index) {
      this.prizeList[index].endTime1 = this.timeFormat(this.confirmTime);
      this.prizeList[index].endShow = false;
    },
    // 数字大写转小写
    numberToUpperCase(textIndex) {
      let newString = "";
      let newTextIndex = textIndex + "";

      function sum(value, index) {
        var newValue = "";
        if (textIndex === 9) {
          return !index ? "十" : "";
        }
        let isSeat = ~~textIndex > 9 && ~~textIndex < 19;
        switch (~~value) {
          case 1:
            newValue = !index ? (isSeat ? "" : "一") : "十一";
            break;
          case 2:
            newValue = !index ? (isSeat ? "" : "二") : "十二";
            break;
          case 3:
            newValue = !index ? (isSeat ? "" : "三") : "十三";
            break;
          case 4:
            newValue = !index ? (isSeat ? "" : "四") : "十四";
            break;
          case 5:
            newValue = !index ? (isSeat ? "" : "五") : "十五";
            break;
          case 6:
            newValue = !index ? (isSeat ? "" : "六") : "十六";
            break;
          case 7:
            newValue = !index ? (isSeat ? "" : "七") : "十七";
            break;
          case 8:
            newValue = !index ? (isSeat ? "" : "八") : "十八";
            break;
          case 9:
            newValue = !index ? (isSeat ? "" : "九") : "九十";
            break;
          case 0:
            newValue = "十";
            break;
          default:
            break;
        }
        return newValue;
      }

      for (let i = 0; i < newTextIndex.length; i++) {
        newString += sum(newTextIndex.substring(i, i + 1), i);
      }
      return newString;
    },
    addPrice() {
      this.prizeList.push({
        name: "",
        type: "",
        discountsMoney: "",
        discountsShow: false,
        full: "",
        fullMoney: "",
        fullShow: false,
        validity: "",
        startTime: new Date(),
        startTime1: "",
        startShow: false,
        endTime: new Date(),
        endTime1: "",
        endShow: false,
        prize: "",
        prizeShow: false,
        limit: "",
        limitShow: false
      });
    },
    removePrice(index) {
      this.prizeList.splice(index, 1);
    },
    handleBasicSTime(value) {
      this.basicInfo.startShow = false;
      this.basicInfo.startTime1 = this.timeFormat(value);
    }
  },
  mounted() {
    this.pTime = this.timeFormat(this.pTime);
    console.log(this.pTime, "time");
  }
};
</script>
<style></style>

<style scoped>
.l-yh,.r-yh {
  width: 55%;
  display: flex;
  align-items: center;
}
.l-yh {
  width: 45%;
}
.bfb {
  position: absolute;
  right: 3px;
  top: 0;
}
.all >>> input {
  text-align: right;
}
.small {
  font-size: 10px;
}
.creat,
.add {
  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: 0 auto;
  margin-top: 80px;
  margin-bottom: 16px;
}
.add {
  margin: 12px auto;
}
.area {
  background-color: #f8f8f8;
  width: 100%;
}
.des {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
  margin-bottom: 12px;
}

.phone {
  margin-right: 10px;
}
.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;
}
.nobr >>> .van-cell:not(:last-child)::after {
  display: none !important;
}
.right >>> .van-cell:not(:last-child)::after {
  display: none !important;
}
.noborder >>> .van-cell:not(:last-child)::after {
  border: none;
}
.gl >>> .van-field__control {
  margin-right: 18px;
}
.name >>> .van-cell__value {
  font-size: 14px;
  font-weight: 400;
  color: rgba(45, 71, 106, 1);
}
.cs >>> .van-cell__title {
  flex: 3;
}
.task >>> .van-cell__title {
  flex: 7;
}
.validity >>> .van-cell__value {
  flex: 2;
}
.container {
  background: rgba(248, 248, 248, 1);
  height: auto;
  display: flex;
  flex-direction: column;
  background: rgba(248, 248, 248, 1);
  min-height: 100%;
}

.van-cell__title {
  color: #2d476a !important;
}
.type {
  height: 84px;
}
.mj {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.sz {
  position: relative;
  padding-top: 10px;
}
.je {
  width: 88px;
  height: 36px;
  display: flex;
  align-items: center;
  background: rgba(248, 248, 248, 1);
  border-radius: 10px;
}
.word {
  margin: 0 7px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(45, 71, 106, 1);
}
.end {
  margin-right: 0;
}
.tm {
  background-color: transparent;
}
.je >>> .van-cell:not(:last-child)::after {
  display: none;
}
.jpsl >>> .van-cell:not(:last-child)::after {
  display: none;
}
.all {
  box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
  padding-bottom: 1px;
}
.detail {
  margin-top: 12px;
  background-color: #fff;
  /* height: 135px; */
  padding: 12px 16px 0 16px;
}
.border {
  border-bottom: 1px solid #ebedf0;
  padding-bottom: 9px;
}
.close {
  position: absolute;
  z-index: 999;
  top: 0;
}
.condition {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.van-cell:not(:last-child)::after {
  right: 14px;
}
.yhType {
  padding: 14px;
}
.yhbr {
  border-bottom: 1px solid #f8f8f8;
  font-size: 14px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>