createActive.vue 13 KB
Newer Older
xd's avatar
xd committed
1
<template>
xd's avatar
xd committed
2
  <div class="container">
leiqingsong's avatar
leiqingsong committed
3
    <div class="title">活动设置</div>
xd's avatar
xd committed
4
    <van-cell-group class="all">
leiqingsong's avatar
leiqingsong committed
5
      <van-cell :required="true" title="活动标题" style="font-size:14px;">
6
        <template slot="default">
leiqingsong's avatar
leiqingsong committed
7
          <van-field v-model="title" placeholder="请输入活动标题" class="right" style="font-size:14px;" />
xd's avatar
xd committed
8 9
        </template>
      </van-cell>
leiqingsong's avatar
leiqingsong committed
10
      <van-cell :required="true" title="活动开始时间" style="font-size:14px;">
xd's avatar
xd committed
11
        <template slot="default">
leiqingsong's avatar
leiqingsong committed
12
          <div class="nobr">
xd's avatar
xd committed
13 14 15
            <van-field
              class="right"
              v-model="startTime1"
leiqingsong's avatar
leiqingsong committed
16
              placeholder="请选择开始时间"
xd's avatar
xd committed
17 18
              readonly="readonly"
              @click="startShow = true"
xd's avatar
xd committed
19
            />
xd's avatar
xd committed
20 21 22
            <van-popup v-model="startShow" position="bottom" :overlay="true">
              <van-datetime-picker
                v-model="startTime"
leiqingsong's avatar
leiqingsong committed
23
                type="datetime"
24
                :min-date="minStartDate"
xd's avatar
xd committed
25
                @cancel="startShow = false"
xd's avatar
xd committed
26
                @confirm="handleStartTime"
xd's avatar
xd committed
27 28 29 30
                @change="startTimeChange"
              />
            </van-popup>
          </div>
xd's avatar
xd committed
31 32
        </template>
      </van-cell>
leiqingsong's avatar
leiqingsong committed
33
      <van-cell :required="true" title="活动结束时间" style="font-size:14px;">
xd's avatar
xd committed
34
        <template slot="default">
leiqingsong's avatar
leiqingsong committed
35
          <div class="jpsl">
xd's avatar
xd committed
36 37 38
            <van-field
              class="right"
              v-model="endTime1"
leiqingsong's avatar
leiqingsong committed
39
              placeholder="请选择结束时间"
xd's avatar
xd committed
40 41
              readonly="readonly"
              @click="endShow = true"
xd's avatar
xd committed
42
            />
xd's avatar
xd committed
43 44 45
            <van-popup v-model="endShow" position="bottom" :overlay="true">
              <van-datetime-picker
                v-model="endTime"
leiqingsong's avatar
leiqingsong committed
46
                type="datetime"
47
                :min-date="minEndDate"
xd's avatar
xd committed
48
                @cancel="endShow = false"
xd's avatar
xd committed
49
                @confirm="handleEndTime"
xd's avatar
xd committed
50 51 52 53
                @change="endTimeChange"
              />
            </van-popup>
          </div>
xd's avatar
xd committed
54 55
        </template>
      </van-cell>
leiqingsong's avatar
leiqingsong committed
56 57 58
      <van-cell title="背景图片" style="font-size: 14px">
        <van-uploader v-model="bg_imgs" :max-count="1" :after-read="afterBGRead" />
      </van-cell>
leiqingsong's avatar
leiqingsong committed
59
      <van-cell :required="true" title="活动Logo" style="font-size: 14px">
leiqingsong's avatar
leiqingsong committed
60 61
        <van-uploader :max-count="1" v-model="logo_imgs" :after-read="afterLogoRead"></van-uploader>
      </van-cell>
leiqingsong's avatar
leiqingsong committed
62
      <van-cell :required="true" title="单日最大发放数量">
leiqingsong's avatar
leiqingsong committed
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="maxNumber"
              placeholder="请输入限制次数"
              @touchstart.native.stop="maxNumber_show = true"
            />
            <van-number-keyboard
              v-model="maxNumber"
              :show="maxNumber_show"
              :maxlength="6"
              @blur="maxNumber_show = false"
            />
          </div>
        </template>
      </van-cell>
leiqingsong's avatar
leiqingsong committed
82
      <van-cell :required="true" title="总发放数量">
leiqingsong's avatar
leiqingsong committed
83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="totalLimit"
              placeholder="请输入限制次数"
              @touchstart.native.stop="totalLimit_show = true"
            />
            <van-number-keyboard
              v-model="totalLimit"
              :show="totalLimit_show"
              :maxlength="6"
              @blur="totalLimit_show = false"
            />
          </div>
        </template>
      </van-cell>
leiqingsong's avatar
leiqingsong committed
102 103 104 105 106 107 108 109
      <van-cell
        :required="true"
        title="选择优惠券"
        :value="checked_coupon.name"
        is-link
        @click="showCoupon = true"
        center
      />
xd's avatar
xd committed
110
    </van-cell-group>
leiqingsong's avatar
leiqingsong committed
111
    <!-- 活动描述 -->
112
    <van-cell :required="true" class="detail">
leiqingsong's avatar
leiqingsong committed
113 114 115 116 117 118 119 120 121 122 123 124
      <div class="border">
        <div class="des">活动描述</div>
        <van-field
          class="area"
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入描述"
          show-word-limit
        />
      </div>
125
    </van-cell>
leiqingsong's avatar
leiqingsong committed
126 127 128
    <!-- 活动图片 -->
    <div class="detail" style="margin-top:0;">
      <div class="des">活动图片</div>
leiqingsong's avatar
leiqingsong committed
129
      <van-uploader v-model="fileList_show" multiple :max-count="9" :after-read="afterImgRead" />
leiqingsong's avatar
leiqingsong committed
130 131
    </div>
    <div class="creat" @click="handleCreate">创建活动</div>
leiqingsong's avatar
leiqingsong committed
132
    <van-action-sheet v-model="showCoupon" :actions="coupons" cancel-text="取消" @select="onSelect" />
xd's avatar
xd committed
133 134 135 136
  </div>
</template>

<script>
leiqingsong's avatar
leiqingsong committed
137
import axios from "axios";
leiqingsong's avatar
leiqingsong committed
138
import * as API_Active from "@/api/active";
xd's avatar
xd committed
139 140 141
export default {
  data() {
    return {
142 143
      minStartDate: null,
      minEndDate: null,
leiqingsong's avatar
leiqingsong committed
144
      checked_coupon: {},
leiqingsong's avatar
leiqingsong committed
145 146
      logo_imgs: [],
      bg_imgs: [],
147
      title: "",
xd's avatar
xd committed
148
      title2: "",
xd's avatar
xd committed
149 150 151 152 153 154 155 156
      coupon: "",
      newCustomer: "",
      condition: "",
      type: "",
      show: false,
      show2: false,
      cashCoupon: "",
      limit: "",
xd's avatar
xd committed
157
      startTime: new Date(),
158
      startTime1: "",
xd's avatar
xd committed
159
      endTime: new Date(),
160
      endTime1: "",
xd's avatar
xd committed
161 162
      startShow: false,
      endShow: false,
163
      message: "",
leiqingsong's avatar
leiqingsong committed
164
      fileList: [],
leiqingsong's avatar
leiqingsong committed
165
      fileList_show: [],
leiqingsong's avatar
leiqingsong committed
166
      showCoupon: false,
167 168
      coupons: [],
      maxNumber: "",
leiqingsong's avatar
leiqingsong committed
169
      maxNumber_show: false,
170
      totalLimit: "",
leiqingsong's avatar
leiqingsong committed
171
      totalLimit_show: false
xd's avatar
xd committed
172 173
    };
  },
174
  created() {
leiqingsong's avatar
leiqingsong committed
175
    this.minStartDate = new Date((new Date()/1000+3600)*1000)
176 177
    this.minEndDate = new Date((new Date()/1000+86400)*1000);
  },
xd's avatar
xd committed
178
  methods: {
leiqingsong's avatar
leiqingsong committed
179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197
    getTemplateDate(id) {
      API_Active.getTemplateData(id).then(res => {
        this.title = res.data.activityInfo.activityName;
        let time1 = res.data.activityInfo.startTime;
        this.startTime1 =
          `${time1.substring(0, 4)}-${time1.substring(4, 6)}-${time1.substring(
            6,
            8
          )}` + time1.substring(8);
        let time2 = res.data.activityInfo.endTime;
        this.endTime1 =
          `${time2.substring(0, 4)}-${time2.substring(4, 6)}-${time2.substring(
            6,
            8
          )}` + time2.substring(8);
        this.bg_imgs[0] = { url: res.data.activityInfo.backImage };
        this.logo_imgs[0] = { url: res.data.activityInfo.logo };
        this.maxNumber = res.data.activityInfo.joinLimit?.toString();
        this.totalLimit = res.data.activityInfo.totalLimit?.toString();
198 199
        this.checked_coupon = JSON.parse(res.data.activityInfo.coupon);
        this.checked_coupon.couponId = res.data.activityInfo.couponId;
leiqingsong's avatar
leiqingsong committed
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234
        this.message = res.activityInfo.des;
        let imgs = JSON.parse(res.data.activityInfo.image);
        let img_list = [];
        imgs.forEach(i => {
          let item = {};
          item.url = i;
          img_list.push(item);
        });
        this.fileList = img_list;
      });
    },
    onSelect(val) {
      this.checked_coupon = val;
      this.showCoupon = false;
    },
    afterImgRead(file) {
      if (file.length) {
        file.forEach(e => {
          let params = new FormData();
          params.append("file", e.file);
          let url = "http://139.155.48.151:8084/admin/auth/util/saveImg";
          axios.post(url, params).then(res => {
            let img_url = JSON.parse(JSON.stringify(res.data.data.imgPath));
            this.fileList.push(img_url);
          });
        });
      } else {
        let params = new FormData();
        params.append("file", file.file);
        let url = "http://139.155.48.151:8084/admin/auth/util/saveImg";
        axios.post(url, params).then(res => {
          this.fileList.push(JSON.parse(JSON.stringify(res.data.data.imgPath)));
        });
      }
    },
leiqingsong's avatar
leiqingsong committed
235
    getCoupons() {
236
      console.log('获取优惠券');
leiqingsong's avatar
leiqingsong committed
237 238
      let id = sessionStorage.getItem("oyStallCode") || 1;
      API_Active.getAllCouponsByOyStallCode(id).then(res => {
239 240 241 242 243 244 245 246
        if (res.data.length === 0 || !res.data.length) {
          this.$toast('您所在店铺没有优惠券,请先去创建');
          setTimeout(()=>{
            this.$router.push('/');
          }, 500);
        } else {
          this.coupons = res.data;
        }
leiqingsong's avatar
leiqingsong committed
247 248 249 250
      });
    },
    async afterLogoRead(file) {
      let logo_img = await this.getImgUrl(file.file);
leiqingsong's avatar
leiqingsong committed
251 252 253 254 255 256
      let item = {
        url: logo_img,
        status: "done",
        message: "上传成功"
      };
      this.logo_imgs[0] = item;
leiqingsong's avatar
leiqingsong committed
257 258 259
    },
    async afterBGRead(file) {
      let bg_img = await this.getImgUrl(file.file);
leiqingsong's avatar
leiqingsong committed
260 261 262 263 264 265
      let item = {
        url: bg_img,
        status: "done",
        message: "上传成功"
      };
      this.bg_imgs[0] = item;
leiqingsong's avatar
leiqingsong committed
266 267 268 269 270 271
    },
    // 上传图片
    async getImgUrl(file) {
      let params = new FormData();
      params.append("file", file);
      let url = "http://139.155.48.151:8084/admin/auth/util/saveImg";
leiqingsong's avatar
leiqingsong committed
272 273 274
      const img = await axios.post(url, params);
      let urls = img.data.data.imgPath;
      return urls;
leiqingsong's avatar
leiqingsong committed
275 276
    },
    handleCreate() {
277 278 279 280 281 282 283 284 285 286 287 288 289
      if (
        this.title === '' ||
        this.startTime1 == '' ||
        this.endTime1 == '' ||
        this.logo_imgs.length == 0 ||
        this.maxNumber == '' ||
        this.totalLimit == '' || 
        this.checked_coupon == {} ||
        this.message == ''
      ) {
        this.$toast('请完整填写活动表单!');
        return;
      }
leiqingsong's avatar
leiqingsong committed
290 291 292 293 294
      if (new Date(this.startTime1) >= new Date(this.endTime1)) {
        this.$toast("活动开始时间应小于活动开始时间");
        return;
      }

leiqingsong's avatar
leiqingsong committed
295 296
      let params = {
        activityInfo: {
leiqingsong's avatar
leiqingsong committed
297
          id: 0,
leiqingsong's avatar
leiqingsong committed
298
          activityName: this.title,
leiqingsong's avatar
leiqingsong committed
299
          activityType: "coupon",
leiqingsong's avatar
leiqingsong committed
300 301 302 303
          startTime: this.startTime1,
          endTime: this.endTime1,
          backImage: this.bg_imgs[0] ? this.bg_imgs[0].url : "",
          logo: this.logo_imgs[0] ? this.logo_imgs[0].url : "",
leiqingsong's avatar
leiqingsong committed
304 305 306 307
          // 单日最大发放数量
          joinLimit: Number(this.maxNumber),
          // 总发放数量
          totalLimit: Number(this.totalLimit),
308
          coupon: JSON.stringify(this.checked_coupon),
309
          couponId: this.checked_coupon.id,
leiqingsong's avatar
leiqingsong committed
310 311 312 313 314

          des: this.message,
          image: JSON.stringify(this.fileList)
        }
      };
leiqingsong's avatar
leiqingsong committed
315
      console.log("params", params);
leiqingsong's avatar
leiqingsong committed
316 317 318 319 320
      API_Active.createActive(params).then(res => {
        if (res.result === "fail") {
          this.$toast(res.errorMsg);
          return;
        }
leiqingsong's avatar
leiqingsong committed
321
        this.$toast.success("创建成功");
leiqingsong's avatar
leiqingsong committed
322
        setTimeout(() => {
leiqingsong's avatar
leiqingsong committed
323 324 325 326 327 328 329 330 331 332
          this.$router.push({
            name: "createSuccess",
            params: {
              id: 0,
              activityId: res.data.activityInfo.id,
              activityType: "coupon",
              logo: this.logo_imgs[0].url,
              des: this.message
            }
          });
leiqingsong's avatar
leiqingsong committed
333 334 335
        }, 200);
      });
    },
xd's avatar
xd committed
336 337 338 339
    timeFormat(time) {
      let year = 1900 + time.getYear();
      let month = "0" + (time.getMonth() + 1);
      let date = "0" + time.getDate();
leiqingsong's avatar
leiqingsong committed
340 341 342 343 344 345 346 347 348 349 350 351 352 353
      let hour = "0" + time.getHours();
      let minute = "0" + time.getMinutes();
      return (
        year +
        "-" +
        month.substring(month.length - 2, month.length) +
        "-" +
        date.substring(date.length - 2, date.length) +
        " " +
        hour.substring(hour.length - 2, hour.length) +
        ":" +
        minute.substring(minute.length - 2, minute.length) +
        ":00"
      );
xd's avatar
xd committed
354
    },
xd's avatar
xd committed
355
    startTimeChange(e) {
356
      let startTimeArr = e.getValues();
xd's avatar
xd committed
357 358 359
      this.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`;
    },
    handleStartTime(value) {
leiqingsong's avatar
leiqingsong committed
360 361
      this.startTime1 = this.timeFormat(value);
      this.startShow = false;
xd's avatar
xd committed
362 363
    },
    handleEndTime(value) {
leiqingsong's avatar
leiqingsong committed
364 365
      this.endTime1 = this.timeFormat(value);
      this.endShow = false;
xd's avatar
xd committed
366
    },
xd's avatar
xd committed
367
    endTimeChange(e) {
368
      let endTimeArr = e.getValues();
xd's avatar
xd committed
369
      this.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`;
xd's avatar
xd committed
370
    }
xd's avatar
xd committed
371
  },
leiqingsong's avatar
leiqingsong committed
372 373 374 375 376 377 378 379
  mounted() {
    if (this.$route.query.activityId) {
      console.log("有模板数据");
      let template_id = this.$route.query.templateId;
      this.getTemplateDate(template_id);
    }
    this.getCoupons();
  }
xd's avatar
xd committed
380 381
};
</script>
382
<style></style>
xd's avatar
xd committed
383

384
<style scoped>
xd's avatar
xd committed
385 386 387 388 389 390
.condition {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.phone {
xd's avatar
xd committed
391
  margin-right: 10px;
xd's avatar
xd committed
392
}
xd's avatar
xd committed
393 394 395 396 397 398
.all >>> input {
  text-align: right;
}
.noborder >>> .van-cell:not(:last-child)::after {
  display: none !important;
}
399 400
.npbr .van-cell:not(:last-child)::after {
  display: none !important;
xd's avatar
xd committed
401 402 403
}
.creat {
  margin-top: 80px;
404 405 406 407
  width: 96%;
  height: 40px;
  background: rgba(117, 178, 253, 1);
  border-radius: 10px;
xd's avatar
xd committed
408 409
  text-align: center;
  line-height: 40px;
410 411
  font-size: 16px;
  font-weight: bold;
xd's avatar
xd committed
412 413
  color: #fff;
  margin-left: 2%;
xd's avatar
xd committed
414
  margin-bottom: 16px;
xd's avatar
xd committed
415 416
}
.container {
xd's avatar
xd committed
417 418 419
  height: auto;
  display: flex;
  flex-direction: column;
420
  background: rgba(248, 248, 248, 1);
xd's avatar
xd committed
421
  min-height: 100%;
xd's avatar
xd committed
422
}
xd's avatar
xd committed
423 424 425
.area >>> .van-field__control {
  background: #f8f8f8;
  padding: 12px;
xd's avatar
xd committed
426 427
}
.des {
xd's avatar
xd committed
428
  padding: 5px 18px 0px;
xd's avatar
xd committed
429
  font-size: 14px;
430
  color: #2d476a;
xd's avatar
xd committed
431
}
xd's avatar
xd committed
432

xd's avatar
xd committed
433 434 435 436 437 438 439 440
.title {
  background-color: #f8f8f8;
  height: 36px;
  line-height: 36px;
  font-size: 12px;
  padding-left: 16px;
  color: #2d476a;
}
xd's avatar
xd committed
441 442 443 444 445 446
[data-v-08d4afe1] .van-cell {
  height: 100%;
  font-size: 14px;
}
.right {
  padding: 0;
447 448 449
}
.van-cell__title {
  color: #2d476a !important;
xd's avatar
xd committed
450
}
xd's avatar
xd committed
451
</style>