kailin_mp/pages/coupon/active.vue

<template>
  <view>
    <view class="banner_box">
      <image class="banner_img" :src="activeInfo.banner_img"></image>
    </view>
    <view class="active_info">
      <view class="active_name">{{ activeInfo.name }}</view>
      <view class="active_time">活动时间：{{ activeInfo.start_date }} ~ {{ activeInfo.end_date }}</view>
      <view class="active_citys" v-if="activeInfo.city_ids">活动范围：{{ activeInfo.city_ids }}</view>
    </view>
    <view class="active_coupon">
      <view class="active_subtitle">优惠券</view>
      <view class="coupon_list">
        <view class="coupon_item" v-for="(item, index) in activeInfo.coupon_list" :key="index">
          <view class="left_box">
            <view class="rebate" v-if="item.rebate_type == 1"> ￥{{ item.rebate }}</view>
            <view class="rebate" v-if="item.rebate_type == 2"> 打 {{ item.rebate }} 折</view>
            <view class="rebate" v-if="item.rebate_type == 3">
              赠 <text v-if="item.rebate_scope.length">{{ item.rebate_scope[0].product_name }}</text>
            </view>
            <view class="std_pay">满 ￥{{ item.std_pay }} 可用</view>
            <view class="coupon_exp">有效期：{{ item.exp_time }}</view>
          </view>
          <view class="right_box">
            <button class="get_btn" v-if="item.is_have == 0" @click="getCoupon(index)">立即领取</button>
            <button class="get_btn" v-if="item.is_have == 1" @click="toUse(item)">去使用</button>
          </view>
        </view>
      </view>
    </view>
    <view class="active_product" v-if="activeInfo.product_list.length">
      <view class="active_subtitle">活动商品</view>
      <view class="product_list" :class="show_more_product ? 'more' : ''">
        <view class="product_item" v-for="(item, index) in activeInfo.product_list" :key="index">
          <image class="product_image" :src="item.thumb" mode=""></image>
          <view class="product_name"
            ><text>{{ item.product_name }}</text></view
          >
          <view class="stock_price">
            <view class="product_price">
              <text>￥ {{ item.price }} </text>
            </view>
            <view class="product_stock">剩{{ item.stock }}个</view>
          </view>
        </view>
      </view>
      <view class="more_product" v-if="!show_more_product" @click.stop="show_more_product = true">
        <uni-icons type="down" size="20"></uni-icons>
      </view>
    </view>
    <view class="active_rule" v-if="activeInfo.active_rule">
      <view class="active_subtitle">活动规则</view>
      <view class="active_rule_info">
        <rich-text class="rich_text" :nodes="activeInfo.active_rule"></rich-text>
      </view>
    </view>
    <view class="" style="height: 10rpx"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 是否显示更多的产品
      show_more_product: false,
      // 活动信息
      activeInfo: {
        id: 0,
        name: "",
        banner_img: "",
        active_rule: "",
        status: 0,
        start_time: 0,
        end_time: 0,
        city_ids: "",
        allow_join: 0,
        start_date: "",
        end_date: "",
        coupon_list: [],
        product_list: [],
      },
      // 请求参数
      requestParam: {
        id: 0,
      },
    };
  },
  onLoad(param) {
    this.requestParam.id = param.id;
    // 如果有scene参数的话，获取其中的ID
    if (param.scene) {
      // 转键值对参数
      let scene = this.$http.strToParam(param.scene);
      // 如果没有传入ID，但是传入了场景ID，获取场景ID
      if (!param.id && scene.id) this.requestParam.id = scene.id;
    }
    // #ifdef MP-WEIXIN
    //分享按钮
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    // #endif
  },
  onShareAppMessage(obj) {
    return {
      title: `999智控终端平台\n${this.activeInfo.name}`,
      path: "/pages/coupon/active?id=" + this.requestParam.id,
      promise: new Promise((resolve, reject) => {
        this.$http.request("api/share_message/get_item", { item_id: this.requestParam.id, pages: "/pages/coupon/active" }).then((callback) => {
          console.log(callback, "api/share_message/get_item");
          let obj = {
            title: callback.data?.title == "" ? `999智控终端平台\n${this.activeInfo.name}` : callback.data.title,
            path: "/pages/coupon/active?id=" + this.requestParam.id,
          };
          if (callback.data?.image_url !== "") {
            obj.imageUrl = callback.data.image_url;
          }
          resolve(obj);
        });
      }),
    };
  },
  onShow() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 如果存在产品ID的话
    if (this.requestParam.id > 0) {
      // 请求详情
      this.$http.request("api/coupon_active/get_detail", this.requestParam).then((re) => {
        // 成功渲染数据
        if (re.code == "success") {
          // 刷新数据
          this.activeInfo = re.data;
          // 列表大于2.显示
          if (re.data.product_list.length <= 2) this.show_more_product = true;
        } else {
          if (re.code != "no_login") {
            uni.showModal({
              content: re.msg,
              showCancel: false,
            });
          }
        }
      });
    } else {
      uni.showModal({
        content: "未知的活动ID",
        showCancel: false,
      });
    }
  },
  methods: {
    toUse(item) {
      // 没有范围
      if (item.type_id == 2) {
        uni.switchTab({ url: "/pages/index/index" });
        return;
      }
      // 只有一个商品，直接跳转到对应商品
      if (item.product_scope.length == 1) {
        uni.navigateTo({
          url: "/pages/product/index?product_id=" + item.product_scope[0],
        });
        return;
      }
      // 没有范围
      if (item.product_scope.length > 1) {
        uni.navigateTo({
          url: "/pages/coupon/product?coupon_id=" + item.coupon_id,
        });
        return;
      }
    },
    getCoupon(index) {
      // 获取对应的数据
      let couponId = this.activeInfo.coupon_list[index].coupon_id;
      // 如果不能参与
      if (!this.activeInfo.allow_join) {
        uni.showModal({
          content: "暂不可参与活动",
          showCancel: false,
        });
        return;
      }
      // 如果存在优惠券
      if (couponId > 0) {
        // 请求详情
        this.$http.request("api/custom_coupon/get_coupon", { coupon_id: couponId }).then((re) => {
          // 成功渲染数据
          if (re.code == "success") {
            this.activeInfo.coupon_list[index].is_have = 1;
          } else {
            uni.showModal({
              content: re.msg,
              showCancel: false,
            });
          }
        });
      } else {
        uni.showModal({
          content: "请选择要领取的优惠券",
          showCancel: false,
        });
      }
    },
  },
};
</script>

<style lang="less">
.banner_box {
  width: 750rpx;
  height: 240rpx;
  display: block;
  overflow: hidden;
  margin: 0rpx auto;
  .banner_img {
    width: 750rpx;
    height: 240rpx;
  }
}
.active_info {
  width: 750rpx;
  display: block;
  overflow: hidden;
  margin: 0rpx auto;
  padding: 10rpx 35rpx;
  background-color: #ffffff;
  .active_name {
    display: block;
    height: 60rpx;
    font-size: 36rpx;
    font-weight: bold;
    line-height: 60rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .active_time {
    display: block;
    height: 40rpx;
    font-size: 26rpx;
    line-height: 40rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .active_citys {
    display: block;
    max-height: 80rpx;
    font-size: 26rpx;
    line-height: 40rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.active_coupon {
  display: block;
  overflow: hidden;
  margin-top: 20rpx;
  padding: 0rpx 35rpx;
  .active_subtitle {
    display: block;
    height: 80rpx;
    overflow: hidden;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 80rpx;
  }
  .coupon_list {
    display: block;
    overflow: hidden;
    .coupon_item {
      display: block;
      height: 140rpx;
      overflow: hidden;
      padding: 10rpx 25rpx;
      border-radius: 15rpx;
      margin-bottom: 10rpx;
      background-color: #ffffff;
      .left_box {
        float: left;
        width: 400rpx;
        height: 140rpx;
        display: block;
        .rebate {
          color: #e03519;
          height: 60rpx;
          overflow: hidden;
          font-size: 36rpx;
          line-height: 60rpx;
          font-weight: bold;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .std_pay {
          color: #666666;
          height: 40rpx;
          font-size: 24rpx;
          line-height: 40rpx;
        }
        .coupon_exp {
          color: #666666;
          height: 40rpx;
          font-size: 24rpx;
          line-height: 40rpx;
        }
      }
      .right_box {
        float: right;
        width: 160rpx;
        height: 60rpx;
        display: block;
        margin-top: 40rpx;
        .get_btn {
          display: block;
          width: 160rpx;
          height: 60rpx;
          color: #ffffff;
          font-size: 26rpx;
          line-height: 60rpx;
          text-align: center;
          padding: 0rpx 0rpx;
          border-radius: 10rpx;
          background-color: #e03519;
        }
      }
    }
  }
}
.active_product {
  display: block;
  overflow: hidden;
  margin-top: 10rpx;
  padding: 0rpx 35rpx;
  .active_subtitle {
    display: block;
    height: 80rpx;
    overflow: hidden;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 80rpx;
  }
  .product_list {
    display: block;
    height: 520rpx;
    overflow: hidden;
    .product_item {
      float: left;
      width: 320rpx;
      height: 480rpx;
      display: block;
      overflow: hidden;
      margin-top: 20rpx;
      margin-right: 40rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      .product_image {
        width: 320rpx;
        height: 320rpx;
      }
      .product_name {
        height: 80rpx;
        font-size: 30rpx;
        line-height: 40rpx;
        overflow: hidden;
        margin: 0rpx 0rpx;
        padding: 0rpx 10rpx;
        text-overflow: ellipsis;
      }
      .stock_price {
        color: #dddddd;
        font-size: 20rpx;
        overflow: hidden;
        line-height: 30rpx;
        padding: 0rpx 10rpx;
        .product_price {
          float: left;
          color: red;
          font-size: 30rpx;
          line-height: 60rpx;
          .product_market {
            font-size: 24rpx;
            color: #999999;
            line-height: 30rpx;
            vertical-align: top;
            text-decoration: line-through;
          }
        }
        .product_stock {
          float: right;
          font-size: 20rpx;
          line-height: 60rpx;
        }
      }
    }
    .product_item:nth-child(even) {
      margin-right: 0rpx;
    }
  }
  .product_list.more {
    height: auto !important;
  }
  .more_product {
    z-index: 8;
    left: 0rpx;
    top: -10rpx;
    height: 40rpx;
    display: block;
    font-size: 20rpx;
    line-height: 40rpx;
    text-align: center;
    position: relative;
    border-radius: 5rpx;
    background-color: rgba(0, 0, 0, 0.1);
  }
}
.active_rule {
  display: block;
  overflow: hidden;
  margin-top: 10rpx;
  padding: 0rpx 35rpx;
  margin-bottom: 160rpx;
  .active_subtitle {
    display: block;
    height: 80rpx;
    overflow: hidden;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 80rpx;
  }
  .active_rule_info {
    display: block;
    overflow: hidden;
    font-size: 24rpx;
    min-height: 500rpx;
    line-height: 40rpx;
    border-radius: 10rpx;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    .rich_text {
      white-space: break-spaces;
    }
  }
}
</style>