activeDetail.vue 17.7 KB
Newer Older
1 2
<template>
  <div id="active-detail">
3
    <img class="bg" src="../../../public/img/activeDetail_bg.jpg" alt="bg" />
4
    <template v-if="active_type === 'coupon'">
5
      <div class="coupon">
leiqingsong's avatar
leiqingsong committed
6 7 8
        <div class="user-icon">
          <img :src="userIcon" alt="icon">
        </div>
9 10
        <p class="slogan">送你限量优惠券,手慢无~</p>
        <div class="coupon-content">
11
          <img src="../../../public/img/coupon.png" alt="coupon_bg" />
12
          <div class="content">
leiqingsong's avatar
leiqingsong committed
13
            <div class="money">{{ couponDetail.unit }}</div>
14
            <div class="split">
15
              <img src="../../../public/img/split.png" alt="split" />
16 17
            </div>
            <div class="other">
leiqingsong's avatar
leiqingsong committed
18
              <p>{{couponDetail.salesUnit}}元可用</p>
19
              <p>
leiqingsong's avatar
leiqingsong committed
20
                有效期至:
21 22
                <span style="font-size: 12px;">{{ couponDetail.end_date }}</span>
              </p>
leiqingsong's avatar
leiqingsong committed
23
              <p>{{ couponDetail.deptId }}号店通用</p>
24 25 26
            </div>
          </div>
        </div>
leiqingsong's avatar
leiqingsong committed
27
        <div class="btn" @click="handleGet">立即领取</div>
28 29
      </div>
    </template>
30
    <template v-if="active_type === 'wheel'">
31
      <div class="wheel-container">
leiqingsong's avatar
leiqingsong committed
32
        <p class="title">{{ activityName }}</p>
33
        <div class="wheel">
leiqingsong's avatar
leiqingsong committed
34
          <div class="wheel-point" @click="Start_Game"></div>
35
          <img src="../../../public/img/wheel.png" alt="wheel" />
36
          <!-- <div class="circle"></div> -->
37 38 39 40 41 42 43 44 45 46 47 48 49
          <div
            class="wheel-bg"
            :class="{freeze: freeze}"
            :style="`transform: rotate(${wheelDeg}deg)`"
          >
            <div class="prize-list">
              <div class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
                <div
                  class="prize-item"
                  :style="`transform: rotate(${(360/ prizeList.length) * index }deg)`"
                >
                  <div class="prize-name">{{ item.name }}</div>
                  <div class="prize-icon">
50
                    <img src="/img/counter.png" />
51 52 53 54 55
                  </div>
                </div>
              </div>
            </div>
          </div>
56 57
        </div>
        <div class="awards">
58 59 60 61 62 63 64 65 66
          <van-field
            class="area"
            v-model="prizeDesc"
            rows="2"
            autosize
            type="textarea"
            show-word-limit
            :disabled="false"
          />
67
        </div>
68 69
        <div class="time-line">
          距离结束仅剩
70
          <span id="timer"></span>
71
        </div>
72 73
        <div class="description">
          <div class="t">活动介绍</div>
leiqingsong's avatar
leiqingsong committed
74
          <div class="content">{{ des }}</div>
75 76 77
        </div>
      </div>
    </template>
78 79 80 81 82
    <div
      class="btn-share"
      :style="active_type === 'coupon'? 'bottom: 0': ''"
      @click="handleShare"
    >立即分享</div>
leiqingsong's avatar
leiqingsong committed
83
    <van-overlay :show="showAward && !res_error" @click="showAward = false">
leiqingsong's avatar
leiqingsong committed
84 85
      <div class="wrapper" @click.stop>
        <div v-if="isAward" class="block">
86 87 88 89 90 91 92 93 94 95
          <div class="award-coupon">
            <img class="bg_img" src="/img/coupon.png" alt="coupon" />
            <div class="other">
              <p>{{ awardGood.coupon.type }}</p>
              <div class="split">
                <img src="../../../public/img/split.png" alt="split" />
              </div>
              <p>{{ awardGood.coupon.unit }}元</p>
            </div>
          </div>
leiqingsong's avatar
leiqingsong committed
96
          <p style="font-size: 20px;font-weight: bold;">OLAY全场通用抵扣券</p>
97
          <p style="font-size: 20px;font-weight: bold;">{{ awardGood.prizeName }}!</p>
leiqingsong's avatar
leiqingsong committed
98 99 100 101
          <p style="font-size: 20px;font-weight: bold;">恭喜您中奖!</p>
          <van-button style="background: #f00;color: #fff;" @click="handleGet">领取奖品</van-button>
          <van-button style="border-color: #7f7777;" @click="showAward = false">继续抽奖</van-button>
        </div>
leiqingsong's avatar
leiqingsong committed
102
        <div v-if="!isAward" class="block" style="background: #413d3de0;color: #fff;">
leiqingsong's avatar
leiqingsong committed
103 104 105 106 107
          <p style="font-size: 22px;">谢谢惠顾!</p>
          <p style="font-size: 14px;">很遗憾,此次未能中奖,再接再厉!</p>
        </div>
      </div>
    </van-overlay>
leiqingsong's avatar
leiqingsong committed
108
    <wx-auth :show-auth="showAuthDialog" @confirm="handleCheckAuth"></wx-auth>
109 110 111 112
  </div>
</template>

<script>
leiqingsong's avatar
leiqingsong committed
113
import axios from "axios";
leiqingsong's avatar
leiqingsong committed
114
import wxAuth from "@/components/wxAuth";
leiqingsong's avatar
leiqingsong committed
115
import * as APi_Active from "@/api/active";
116
import { CoutDown } from "@/utils/Foundation";
117
export default {
118
  name: "active-detail",
leiqingsong's avatar
leiqingsong committed
119
  components: { wxAuth },
120 121
  data() {
    return {
leiqingsong's avatar
leiqingsong committed
122
      userIcon: '/img/photo.png',
leiqingsong's avatar
leiqingsong committed
123
      couponDetail: {},
leiqingsong's avatar
leiqingsong committed
124 125 126
      game_end: false,
      res_error: false,
      error_message: "",
127
      timer: null,
leiqingsong's avatar
leiqingsong committed
128
      timeLine: "",
leiqingsong's avatar
leiqingsong committed
129 130
      isAward: false,
      showAward: false,
leiqingsong's avatar
leiqingsong committed
131
      userBaseInfo: {},
leiqingsong's avatar
leiqingsong committed
132 133 134 135 136
      isMember: false,
      openid: "",
      unionid: "",
      userIds: [],
      currentUrl: "",
leiqingsong's avatar
leiqingsong committed
137 138 139 140 141
      showAuthDialog: false,
      nowUrl: "",
      userId: "",
      code: "",
      active_id: "",
142
      active_type: "coupon",
143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
      freeze: false,
      rolling: false,
      wheelDeg: 0,
      prizeNumber: 6,
      prizeListOrigin: [
        {
          name: "奖0",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖1",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖2",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖3",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖4",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖5",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        }
leiqingsong's avatar
leiqingsong committed
178 179 180
      ],
      activityName: "",
      prizeDesc: "",
181 182 183 184
      des: "",
      awardGood: {
        prizeName: ""
      }
185
    };
186
  },
leiqingsong's avatar
leiqingsong committed
187 188
  async created() {
    this.currentUrl = location.href;
leiqingsong's avatar
leiqingsong committed
189
    this.active_id = this.$route.query.id;
190
    this.active_type = this.$route.query.active_type;
leiqingsong's avatar
leiqingsong committed
191
    this.userIcon = this.$route.query.headurl ? decodeURIComponent(this.$route.query.headurl) : '';
leiqingsong's avatar
leiqingsong committed
192 193 194
    // 验证用户是否登录
    if (!sessionStorage.getItem("userId")) {
      // 1.获取code
195
      if (this.$route.query.unionid === undefined) {
leiqingsong's avatar
leiqingsong committed
196 197
        console.log('query', this.$route.query);
        this.getUnionid();
leiqingsong's avatar
leiqingsong committed
198
      } else {
leiqingsong's avatar
leiqingsong committed
199 200
        this.userBaseInfo.unionid = JSON.stringify(this.$route.query.unionid);
        this.userBaseInfo.openid = JSON.stringify(this.$route.query.openid);
201 202 203 204
        let params = {
          number: 7,
          unionId: this.$route.query.unionid
        };
leiqingsong's avatar
leiqingsong committed
205
        console.log("params", params);
206 207
        APi_Active.isMember(params).then(res => {
          this.isMember = res.data.vipId !== "";
leiqingsong's avatar
leiqingsong committed
208
          this.userBaseInfo.vipId = res.data.vipId;
209 210 211
          this.userBaseInfo.mobile = res.data.mobile;
          this.userBaseInfo.name = res.data.name;
        });
leiqingsong's avatar
leiqingsong committed
212 213
      }
    }
214
  },
leiqingsong's avatar
leiqingsong committed
215 216 217 218
  mounted() {
    this.getAgentAuth();
    this.GET_DetailById(this.active_id);
  },
219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234
  watch: {
    prizeNumber() {
      this.freeze = true;
      this.wheelDeg = 0;

      setTimeout(() => {
        this.freeze = false;
      }, 0);
    }
  },
  computed: {
    prizeList() {
      return this.prizeListOrigin.slice(0, this.prizeNumber);
    }
  },
  methods: {
235
    // 领取(
leiqingsong's avatar
leiqingsong committed
236
    handleGet() {
237
      if (this.$route.query.unionid === undefined) {
238 239 240
        this.$toast("企业微信端不能领取");
        return;
      }
leiqingsong's avatar
leiqingsong committed
241
      let params = {
242 243 244
        couponId: this.awardGood.activityPrize
          ? this.awardGood.coupon.id
          : this.couponDetail.id,
leiqingsong's avatar
leiqingsong committed
245 246 247
        unionId: this.userBaseInfo.unionid,
        vipId: this.userBaseInfo.vipId
      };
248
      console.log("领取", params);
leiqingsong's avatar
leiqingsong committed
249 250 251 252 253 254
      APi_Active.collectMyCoupon(params).then(res => {
        this.showAward = false;
        this.$toast(
          "领取成功!奖品已经发送到您的会员账户,请进入欧亚小程序查看。"
        );
      });
leiqingsong's avatar
leiqingsong committed
255 256 257
    },
    GET_DetailById(id) {
      APi_Active.getActiveDetailById(id).then(res => {
leiqingsong's avatar
leiqingsong committed
258 259 260 261 262 263 264 265 266 267
        this.activityName = res.data.activityInfo.activityName;
        this.des = res.data.activityInfo.des;
        this.prizeDesc = res.data.activityInfo.prizeDesc;
        let time = res.data.activityInfo.endTime;
        this.timeLine =
          `${time.substring(0, 4)}-${time.substring(4, 6)}-${time.substring(
            6,
            8
          )}` + time.substring(8);
        this.prizeListOrigin = res.data.list;
268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289
        this.prizeNumber = res.data.list.length;
        if (this.active_type === "coupon") {
          let time2 = res.data.coupon.end_date;
          res.data.coupon.end_date =
            `${time2.substring(0, 4)}-${time2.substring(
              4,
              6
            )}-${time2.substring(6, 8)}` + time2.substring(8);
          this.couponDetail = res.data.coupon;
        }
        if (this.active_type === "wheel") {
          let cur_date = new Date();
          let end_time = new Date(this.timeLine);
          if (end_time - cur_date > 0) {
            this.timer = setInterval(() => {
              CoutDown(this.timeLine);
            }, 1000);
          } else {
            document.getElementById("timer").innerHTML = "已结束";
            this.game_end = true;
          }
        }
leiqingsong's avatar
leiqingsong committed
290
      });
leiqingsong's avatar
leiqingsong committed
291 292 293
    },
    handleCheckAuth() {
      this.showAuthDialog = false;
294
    },
leiqingsong's avatar
leiqingsong committed
295
    getUnionid() {
296 297 298 299
      let redirect_uri = encodeURIComponent(
        `oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&active_type=${this.active_type}`
      );
      window.location.href = `http://wxsyls.oysd.cn/getwxuserinfo.aspx?jump=${redirect_uri}`;
leiqingsong's avatar
leiqingsong committed
300
    },
leiqingsong's avatar
leiqingsong committed
301
    Start_Game() {
leiqingsong's avatar
leiqingsong committed
302 303
      // 在微信端打开 会有身份验证 路径中会带上 unionid
      if (this.$route.query.unionid === undefined) {
304 305 306
        this.$toast("企业微信端不能参与抽奖活动");
        return;
      }
leiqingsong's avatar
leiqingsong committed
307
      if (this.game_end) {
308
        this.$toast("活动已结束");
leiqingsong's avatar
leiqingsong committed
309 310 311
        return;
      }
      if (!this.userBaseInfo.vipId) {
leiqingsong's avatar
leiqingsong committed
312 313 314 315
        this.$toast("非会员,");
        let url = "http://oysales.oywanhao.com/register";
        window.location.href = url;
        return;
leiqingsong's avatar
leiqingsong committed
316
      }
leiqingsong's avatar
leiqingsong committed
317 318
      let params = {
        activityId: this.active_id,
leiqingsong's avatar
leiqingsong committed
319
        openId: this.userBaseInfo.openid,
leiqingsong's avatar
leiqingsong committed
320
        phone: this.userBaseInfo.phone,
leiqingsong's avatar
leiqingsong committed
321
        unionId: this.userBaseInfo.unionid,
322
        userName: this.userBaseInfo.name
leiqingsong's avatar
leiqingsong committed
323
      };
324 325 326 327
      if (this.rolling) {
        this.$toast("抽奖中,请勿多次点击!");
        return;
      }
leiqingsong's avatar
leiqingsong committed
328
      APi_Active.play(params)
leiqingsong's avatar
leiqingsong committed
329
        .then(res => {
leiqingsong's avatar
leiqingsong committed
330 331 332 333 334 335 336
          if (!res.data.prizedId) {
            this.res_error = true;
            this.$toast(res.data.message);
            return;
          }
          const { wheelDeg, prizeList } = this;
          this.rolling = true;
337
          const random = prizeList.map(item => item.id).indexOf(res.data.prizedId);
leiqingsong's avatar
leiqingsong committed
338 339 340 341 342 343
          this.wheelDeg =
            wheelDeg -
            (wheelDeg % 360) +
            6 * 360 -
            (360 / prizeList.length) * random;
          setTimeout(() => {
344 345
            this.awardGood = prizeList[random];
            this.awardGood.coupon = JSON.parse(this.awardGood.coupon);
leiqingsong's avatar
leiqingsong committed
346 347 348 349
            this.rolling = false;
            this.showAward = true;
            this.isAward = res.data.prizeName !== "谢谢惠顾";
          }, 4500);
leiqingsong's avatar
leiqingsong committed
350 351
        })
        .catch(err => {
leiqingsong's avatar
leiqingsong committed
352
          console.log("err", err);
leiqingsong's avatar
leiqingsong committed
353 354
        });
    },
leiqingsong's avatar
leiqingsong committed
355
    // 分享
356
    handleShare() {
357
      let url = `http://oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&active_type=${this.active_type}`;
leiqingsong's avatar
leiqingsong committed
358 359 360
      wx.invoke(
        "shareToExternalContact",
        {
361 362
          title: `${this.activityName}`, // 分享标题
          desc: `${this.des}`, // 分享描述
leiqingsong's avatar
leiqingsong committed
363 364 365 366 367 368 369 370 371 372 373
          link: url, // 分享链接
          imgUrl: "" // 分享封面
        },
        function(res) {
          if (res.err_msg == "shareToExternalContact:ok") {
            console.log("分享成功");
          } else {
            console.log(res.err_msg, "错误信息");
          }
        }
      );
374
    }
375 376
  },
  destroyed() {
leiqingsong's avatar
leiqingsong committed
377
    clearInterval(this.timer);
378
  }
379
};
380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415
</script>

<style lang="scss">
#active-detail {
  height: 100%;
  .bg {
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -10;
  }
  .coupon {
    position: relative;
    top: 15%;
    width: 90%;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #000;

    .user-icon {
      position: absolute;
      top: -54px;
      left: 0;
      right: 0;
      display: block;
      width: 100px;
      height: 100px;
      margin: 0 auto;
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      border: 1px solid;
      border-radius: 50%;
      background: #fff;
      // filter: blur(2px);
leiqingsong's avatar
leiqingsong committed
416 417 418 419 420
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
421 422 423 424 425 426 427 428 429
    }

    .slogan {
      height: 80px;
      padding-top: 25px;
      line-height: 80px;
      font-size: 16px;
      text-align: center;
    }
430

431 432 433 434 435 436 437 438 439 440 441 442 443
    .coupon-content {
      position: relative;
      width: 90%;
      margin: 10px auto;
      img {
        width: 100%;
      }
      .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
leiqingsong's avatar
leiqingsong committed
444
        width: 85%;
445 446 447 448 449 450
        height: 92%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .money {
leiqingsong's avatar
leiqingsong committed
451
          text-align: center;
452 453 454 455 456 457 458
          font-size: 32px;
          font-weight: bold;
        }
        .split > img {
          height: 70px;
        }
        .other {
leiqingsong's avatar
leiqingsong committed
459
          padding-left: 15px;
460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489
          font-size: 14px;
          font-weight: 400;
          p {
            margin-bottom: 5%;
          }
        }
      }
    }

    .btn {
      width: 85%;
      height: 50px;
      margin: 10px auto 30px;
      line-height: 50px;
      text-align: center;
      font-size: 0.5625rem;
      background-color: #fc0;
      border-radius: 4px;
    }
  }

  .wheel-container {
    .title {
      padding-top: 15%;
      font-size: 40px;
      text-align: center;
      color: #fff;
    }

    .wheel {
490
      position: relative;
491 492 493 494
      width: 100%;
      img {
        width: 100%;
      }
495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565

      .wheel-point {
        width: 20%;
        height: 32px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        font-size: 32px;
        text-align: center;
        line-height: 32px;
        z-index: 10;
      }

      .wheel-bg {
        width: 74%;
        height: 74%;
        border-radius: 1000px;
        overflow: hidden;
        // background: #fff;
        transition: transform 4s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        &.freeze {
          transition: none;
          background: red;
        }
      }

      .prize-list {
        width: 90%;
        height: 90%;
        margin: auto;
        position: relative;
        text-align: center;
      }

      .prize-item-wrapper {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 62%;
      }

      .prize-item {
        width: 90%;
        height: 90%;
        margin: 0 auto;
        transform-origin: bottom;

        .prize-name {
          padding: 16px 0 0;
          font-size: 14px;
        }

        .prize-icon {
          width: 100%;
          img {
            min-width: 32px;
            min-height: 32px;
            width: 50%;
          }
        }
      }
566 567 568 569 570
    }

    .awards {
      width: 80%;
      margin: 0 auto 10px;
571 572 573
      .van-cell {
        background: #ff9;
        border-radius: 10px;
574 575 576
        font-weight: bold;
      }
    }
577

578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595
    .time-line {
      width: 80%;
      text-align: center;
      font-size: 16px;
      margin: 0 auto 20px;
      border-radius: 4px;
      background: #fff;
      span {
        color: #f00;
        font-size: 18px;
      }
    }

    .description {
      width: 100%;
      padding: 5px 1px;
      background: #fff;
      .t {
596 597 598 599
        position: relative;
        font-size: 16px;
        font-weight: bold;
        padding-left: 20px;
600
        &::before {
601
          content: "";
602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 8px;
          height: 21px;
          background: #fc0;
        }
      }
      .content {
        padding: 10px;
        font-size: 14px;
      }
    }
  }

  .btn-share {
    position: absolute;
    display: block;
    width: 100%;
    height: 45px;
    margin: 0.3125rem auto;
    text-align: center;
    font-size: 18px;
    line-height: 45px;
    background-color: #169bd5;
  }
leiqingsong's avatar
leiqingsong committed
629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645

  .van-overlay {
    z-index: 100;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 70%;
646
    padding: 10px 0;
leiqingsong's avatar
leiqingsong committed
647
    background-color: #fff;
648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671
    .award-coupon {
      position: relative;
      width: 80%;
      .bg_img {
        width: 100%;
        height: 100%;
      }
      .other {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 90%;
        height: 60%;
        margin: auto;
        color: #f00;
        p {
          margin: 0;
        }
      }
    }
leiqingsong's avatar
leiqingsong committed
672 673 674 675 676 677 678 679 680
    p {
      margin-bottom: 8px;
    }
    .van-button {
      width: 80%;
      border-radius: 5px;
      margin: 5px 0;
    }
  }
681 682
}
</style>