applet/pages/seckill/seckillGoods.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>
    <view id="page-top">
      <view class="product">
        <view class="u-bg-fff pb40">
          <view class="pic">
            <swiper
              class="swiper"
              indicator-dots="true"
              :autoplay="true"
              interval="2000"
              duration="1500"
              circular="true"
            >
              <swiper-item v-if="dataForm.video_url">
                <j-video
                  class="jvideo"
                  :url="dataForm.video_url"
                  width="750rpx"
                  height="620rpx"
                ></j-video>
              </swiper-item>
              <swiper-item v-for="(item, index) in imglist" :key="index">
                <image :src="item" mode="aspectFill"></image>
              </swiper-item>
            </swiper>

            <view class="p-price">
              <view class="pd24 u-flex-center" style="align-items: baseline">
                <view class="u-FFF u-font36">
                  <rich-text
                    :nodes="$mUtil.priceBigSmallTwo(dataForm.min_price)"
                  ></rich-text>
                </view>
                <text class="discount u-font24 u-ml20 u-del"
                  >￥{{ dataForm.max_sale_price }}</text
                >
              </view>
              <view class="p-ab u-flex-center">
                <view class="triangle-bottomright"></view>
                <view class="seckill u-text-center u-font28">
                  <!-- active_state 0：未开始 * 1：进行中 * 2：已结束 -->

                  <view class="u-bold" v-if="dataForm.active_state == 1"
                    >距结束</view
                  >

                  <view
                    class="u-bold"
                    v-if="
                      dataForm.active_state == 0 || dataForm.active_state == 2
                    "
                    >已结束</view
                  >
                  <view v-if="dataForm.active_state != 2">
                    <uni-countdown
                      :backgroundColor="'none'"
                      @timeup="overDown1"
                      :color="'#3775F6'"
                      :splitorColor="'#3775F6'"
                      :show-day="time1[0] > 0"
                      :day="time1[0]"
                      :hour="time1[1]"
                      :minute="time1[2]"
                      :second="time1[3]"
                    ></uni-countdown>
                  </view>
                </view>
              </view>
            </view>

            <view class="mt10 u-plr30">
              <view>
                <view
                  v-if="shop.platform_shop"
                  class="tipsStatus"
                  style="vertical-align: middle"
                  >自营</view
                >
                <text class="u-font34 u-bold u-1A1A1A">{{
                  dataForm.title
                }}</text>
              </view>
              <view class="u-font24 u-mt15 u-999">
                <text
                  >已售
                  <text class="u-FF0000">{{ dataForm.result_sale_num }}</text
                  >件，仅剩<text class="u-FF0000">{{
                    dataForm.residue_stock_total
                  }}</text
                  >件</text
                >
              </view>
              <!--优惠-->
            </view>
          </view>
        </view>

        <view class="u-bg-fff u-mt10">
          <view class="u-plr30 u-flex-center-sb pt-pb35">
            <view class="u-flex-center" @click="goShop">
              <view>
                <image class="u-avatar104" :src="shop.logo"></image>
              </view>
              <view class="u-ml25">
                <view class="u-font28 u-1A1A1A u-bold"
                  >{{ shop.shop_name }}
                </view>
                <view class="u-999 u-font24 u-mt5 u-text2">
                  <text
                    class="iconfont"
                    style="color: #00bf5a"
                    @click.stop="goLocal"
                    >&#xe6db;</text
                  >
                  {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
                  }}{{ shop.address }}
                </view>
              </view>
            </view>
            <view class="iconfont" @click="goShop">&#xe6c7;</view>
          </view>
        </view>
      </view>

      <view class="u-bg-fff u-mt10">
        <view
          class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
          :style="[{ top: `calc(${statusBarHeight}px + 44px)` }]"
        >
          <view
            @tap="change(0)"
            class="pb30"
            :class="{ active: isChecked == 0 }"
            >商品详情</view
          >
          <view
            @tap="change(1)"
            class="pb30"
            :class="{ active: isChecked == 1 }"
            >用户评论({{ commentListLength }})</view
          >
        </view>
        <view class="u-mt10">
          <!--商品详情-->
          <view v-if="isChecked == 0">
            <view class="richText ql-editor-box">
              <u-parse
                class="custom-parse"
                :html="goodsInfo.mobile_detail"
              ></u-parse>
            </view>
          </view>

          <!--评论-->
          <view class="u-plr30" v-else>
            <comment :value="commentList"></comment>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 170rpx; background-color: white"></view>
    <view class="bottom-btn u-bg-fff">
      <view class="pt-pb30 u-plr30 u-flex-center-sb">
        <button
          open-type="share"
          class="u-text-center"
          style="line-height: normal; margin-left: 25rpx"
        >
          <view class="iconfont2 u-font44 u-999">&#xe684;</view>
          <view class="u-font28 u-1A1A1A">分享</view>
        </button>

        <!--秒杀按钮-->
        <view class="seckill-btn" v-if="dataForm.active_state == 0">
          <button v-if="ispay" class="u-btn-two u-DCCDA4" @click="notStarted()">
            立即购买
          </button>
        </view>
        <view class="seckill-btn" v-if="dataForm.active_state == 1">
          <button
            v-if="ispay"
            class="u-btn-two u-DCCDA4"
            @click="buy(1, dataForm.id)"
          >
            立即购买
          </button>
        </view>
        <view class="seckill-btn" v-if="dataForm.active_state == 2">
          <button
            v-if="ispay"
            class="u-btn-two u-DCCDA4"
            @click="itSover(1, dataForm.id)"
          >
            立即购买
          </button>
        </view>
      </view>
    </view>

    <!--规格-->
    <uv-popup type="bottom" ref="specOpenRef">
      <view class="u-bg-fff spec">
        <view class="u-plr30 flex-sb u-border-one-one pb30">
          <view class="u-flex-center">
            <image
              class="u-goods200"
              :src="choseConfig.cover ? choseConfig.cover : cover"
            ></image>
            <view class="u-ml20">
              <view class="u-999 u-font24 u-flex-center">
                <view class="u-00BF5A u-font36">
                  <rich-text
                    :nodes="
                      $mUtil.priceBigSmall(
                        choseConfig.activity_price
                          ? choseConfig.activity_price
                          : moPrice
                      )
                    "
                  ></rich-text>
                </view>

                <text class="u-del u-ml15"
                  >￥{{
                    choseConfig.market_price
                      ? choseConfig.market_price
                      : moDelPrice
                  }}
                </text>
              </view>
              <view class="u-font22 u-999 u-mt5"
                >活动库存 {{ stock }} 件
                <text
                  >商品库存{{
                    choseConfig.able_stock
                      ? choseConfig.able_stock
                      : goods_total_stock
                  }}</text
                >
              </view>
              <view class="u-1A1A1A u-mt25"
                >{{
                  choseConfig.sku_set_name ? choseConfig.sku_set_name : "请选择"
                }}
              </view>
            </view>
          </view>
          <view class="iconfont u-999 closeIcon" @click="specOpenRef.close()"
            >&#xe612;</view
          >
        </view>

        <view>
          <view class="">
            <view
              class="u-mt30"
              v-for="(item, index) in skuTab"
              :key="item.head.id"
            >
              <view class="u-plr30">{{ item.head.name }}</view>
              <view class="u-mt20 u-border-one-one pb30">
                <view class="u-plr30 u-flex u-flex-warp">
                  <view
                    class="spec-item"
                    :class="childrenItem.flag ? 'activeColor' : ''"
                    @click="chonseSku(index, childrenItem.id)"
                    v-for="childrenItem in item.values"
                    :key="childrenItem.id"
                    >{{ childrenItem.name }}</view
                  >
                </view>
              </view>
            </view>
          </view>

          <view class="u-plr30 u-mt30">
            <view class="u-flex-center-sb">
              <view>购买数量</view>
              <view class="u-flex-center">
                <view class="iconfont minus" @click="resNum">&#xe60b;</view>
                <view class="num">{{ add_num }}</view>
                <view class="iconfont plus-sign" @click="addNum">&#xe686;</view>
              </view>
            </view>
            <view class="specOpen-btn">
              <view v-if="btnType == 0">
                <button class="u-btn-two" @click="btnBuy(btnType)">
                  {{ btnName }}
                </button>
              </view>
              <view v-else>
                <button class="u-btn-two" @click="btnBuy(btnType)">
                  {{ btnName }}
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uv-popup>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShareAppMessage, onShow, onLoad } from "@dcloudio/uni-app";
import comment from "@/components/ld-comment/ld-comment.vue";

const $http = uni.$http;
const $mUtil = uni.$mUtil;
const specOpenRef = ref(null);
// 手机状态栏高度
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);

const imglist = ref([]); // 详情图片数组
const isChecked = ref(0);
const btnName = ref("");
const btnType = ref(""); // 0 购物车，1 立即购买
const dataForm = ref({}); // 商品详情
const shop = ref({}); // 店铺信息
const shopDiscounts = ref({}); // 店铺首单优惠
const stock = ref(0);
const goods_total_stock = ref(0);
const cover = ref("");
const loading = ref(true);
const moDelPrice = ref("");
const moPrice = ref("");
const goodsSkuList = ref([]); // sku 组合值
const skuTab = ref([]); // sku 二位数组
const goods_id = ref(null);
const limit_buy_num = ref(0);
const choseConfig = ref({});
const hasId = ref("");
const add_num = ref(1);
const goStatus = ref(0); // 0: 购物车，1 下单
const shop_id = ref(0);
const commentList = ref([]);
const commentListLength = ref(0);
const goodsInfo = ref({});
const time1 = ref([0, 0, 0, 0]);
const ispay = ref(getApp().globalData.openPay);
const able_stock = ref(0);

// 生命周期
onShow(() => {});

onLoad((options) => {
  // 当用户进来有缓存店铺

  // 店铺推荐（商品）
  if (options.id) {
    getDetailInfo(options.id);
  }
  if (options.shareId) {
    recordSave(options.shareId, options.id);
  }
});

onShareAppMessage(() => {
  let user = uni.getStorageSync("personal");
  if (res.from === "button") {
    // 来自页面内分享按钮
    console.log(res.target);
  }

  return {
    title: dataForm.value.title,
    imageUrl: dataForm.value.cover,
    path: `/pages/product/goods/seckillGoods?id=${
      dataForm.value.id
    }&share=1&shareId=${user.id || ""}`,
  };
});

// 方法
const notStarted = () => {
  uni.$uv.toast("活动尚未开始");
};

const itSover = () => {
  uni.$uv.toast("活动已结束");
};

const goLocal = () => {
  uni.openLocation({
    latitude: Number(shop.value.tx_latitude),
    longitude: Number(shop.value.tx_longitude),
    name: shop.value.name,
    address: shop.value.address,
    success: function () {
      console.log("success");
    },
  });
};

const goShop = () => {
  uni.navigateTo({
    url: "/pages/convenienceService/shopDetails?shopId=" + shop_id.value,
  });
};

const recordSave = (share_user_id, goods_id) => {
  $http
    .post("/share/record/save", {
      share_user_id: share_user_id,
      goods_id: goods_id,
    })
    .then((res) => {});
};

const getDetailInfo = (id) => {
  $http.get("/marketing/seckillActivityGoods/info/" + id).then((res) => {
    loading.value = false;
    if (res && res.code == 200) {
      dataForm.value = res.data;
      shop_id.value = res.data.shop_id;
      $http
        .get("/marketing/firstOrder/getByShop/" + shop_id.value)
        .then((res) => {
          if (res && res.code == 200) {
            shopDiscounts.value = res.data;
          }
        });
      $http.get("/yxt/shop/info/" + shop_id.value).then((res) => {
        if (res.data && res.code == 200) {
          shop.value = res.data;
        }
      });
      imglist.value = res.data.cover.split(",");

      if (res.data.active_state == 0 || res.data.active_state == 2) {
        time1.value = $mUtil
          .countDown(res.data.will_start_time)
          .split(":")
          .map((val) => Number(val));
      } else {
        time1.value = $mUtil
          .countDown(res.data.finish_time)
          .split(":")
          .map((val) => Number(val));
      }
      $http.get(`/goods/content/${dataForm.value.goods_id}`).then((res) => {
        if (res && res.code == 200) {
          goodsInfo.value = res.data;
        }
      });
      $http
        .get(`/comment/orderGoods/getgoodscomments/${dataForm.value.goods_id}`)
        .then((res) => {
          if (res && res.code == 200) {
            commentList.value = res.list;
            commentListLength.value =
              res.list && res.list.length ? res.list.length : 0;
          }
        });
    }
  });
};

const change = (i) => {
  isChecked.value = i;
};

const buy = (i, id) => {
  btnType.value = i;
  checkSku(id);
  if (i == 0) {
    btnName.value = "加入购物车";
  } else {
    btnName.value = "立即购买";
  }
};

const resNum = () => {
  if (add_num.value > 1) {
    add_num.value--;
  }
};

const addNum = () => {
  add_num.value++;
};

const chonseSku = (index, id) => {
  skuTab.value[index].values.forEach((res) => {
    res.flag = false;
    if (res.id == id) {
      res.flag = true;
    }
  });
  let choseId = [];
  skuTab.value.forEach((res) => {
    res.values.forEach((Key) => {
      if (Key.flag) {
        choseId.push(Key.id);
      }
    });
  });
  let totalId = choseId.sort((a, b) => a - b).join("|");
  hasId.value = totalId;
  goodsSkuList.value.forEach((res) => {
    let temp = res.sku_hash_code;
    let sku_hash_code_val = temp
      .split("|")
      .sort((a, b) => a - b)
      .join("|");
    if (sku_hash_code_val == totalId) {
      choseConfig.value = res;
      stock.value = dataForm.value.real_stock_total;
      able_stock.value = res.able_stock;
    }
  });
};

const checkSku = (id) => {
  $http
    .get(`/marketing/seckillActivityGoods/skus/${dataForm.value.id}`)
    .then((res) => {
      loading.value = false;
      goods_total_stock.value = res.data.goods_total_stock;
      if (res && res.code == 200) {
        choseConfig.value = {};
        hasId.value = "";
        res.data.goods.sku_table.forEach((keys) => {
          keys.values.forEach((val) => {
            val.flag = false;
          });
        });
        limit_buy_num.value = dataForm.value.limit_buy_num;
        goods_id.value = dataForm.value.goods_id;
        goodsSkuList.value = res.data.goods_sku_list;
        moPrice.value = dataForm.value.min_price;
        moDelPrice.value = dataForm.value.min_sale_price;
        cover.value = imglist.value[0];
        stock.value = dataForm.value.real_stock_total;
        if (res.data.goods_auth) {
          if (res.data.goods_auth.added) {
            specOpenRef.value.open();
          } else {
            uni.$uv.toast("该商品已经下架");
          }
        } else {
          uni.$uv.toast("没有经营权限");
        }
        if (skuTab.value.length == 0) {
          skuTab.value = res.data.goods.sku_table;
          for (let i in skuTab.value) {
            skuTab.value[i].values[0].flag = true;
          }
        }
        chonseSku(0, skuTab.value[0].values[0].id);
      }
    });
};

const btnBuys = () => {
  if (skuTab.value.length > 0 && hasId.value == "") {
    uni.$uv.toast("请选中 sku");
    return false;
  }

  if (add_num.value > limit_buy_num.value && limit_buy_num.value != 0) {
    uni.$uv.toast("商品限购" + limit_buy_num.value + "件");
    return false;
  }
  if (goodsSkuList.value.length > 0 && able_stock.value < add_num.value) {
    uni.$uv.toast("商品库存只有" + able_stock.value + "件");
    $http
      .post(`/singlegoods/understockrecord/save`, {
        shop_id: shop_id.value,
        goods_id: goods_id.value,
        single_goods_id: choseConfig.value.single_goods_id,
        sku_set_name: choseConfig.value.sku_set_name,
        buy_num: add_num.value,
      })
      .then((res) => {});
    return false;
  }
  if (goStatus.value == 0) {
    let data = {
      goods_id: goods_id.value,
      sku_hash_code: hasId.value,
      add_num: add_num.value,
      source_shop_id: shop_id.value.toString(),
    };
    $http.post(`/cart/add`, data).then((res) => {
      if (res && res.code == 200) {
        uni.$uv.toast("添加成功");
        // specOpen.value.close();
        choseConfig.value = {};
        add_num.value = 1;
        cartList();
      }
    });
  } else {
    psotJson();
  }
};

const psotJson = () => {
  let dataJson = {};
  let childArr = [];
  let parendArr = [];
  choseConfig.value;

  childArr.push({
    user_cart_id: 0,
    activity_goods_id: choseConfig.value.activity_goods_id,
    goods_id: goods_id.value,
    num: add_num.value,
    sku_hash_code: choseConfig.value.sku_hash_code,
  });
  parendArr.push({
    shop_id: shop.value.id,
    source_shop_id: shop.value.id,
    activity_id: dataForm.value.seckill_id,
    sponsor_activity_id: 0,
    user_remark: "",
    items: childArr,
  });
  dataJson = {
    is_cart: false,
    receipt_id: null,
    shipment_mode: 0,
    shop_orders: parendArr,
    marketing_type: 1,
  };
  uni.setStorageSync("dataJson", dataJson);
  uni.navigateTo({
    url: "../surePay/surePaySechill",
  });
};

const btnBuy = (i) => {
  goStatus.value = i;
  let token = uni.getStorageSync("apiToken");
  if (!token) {
    uni.navigateTo({
      url: "/pages/login/index",
    });
  } else {
    btnBuys();
  }
};

const cartList = () => {
  // 实现购物车逻辑
};
</script>

<style lang="scss" scoped>
.pd24 {
  padding: 24rpx;
}

.pd20 {
  padding: 20rpx;
}

.pt20-pb14 {
  padding-top: 20rpx;
  padding-bottom: 14rpx;
}

.pt28-pb18 {
  padding-top: 28rpx;
  padding-bottom: 18rpx;
}

.pb30 {
  padding-bottom: 30rpx;
}

.pb40 {
  padding-bottom: 40rpx;
}

.pb50 {
  padding-bottom: 50rpx;
}

.pt-pb30 {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}

.pt-pb35 {
  padding-top: 35rpx;
  padding-bottom: 35rpx;
}

.ml54 {
  margin-left: 54rpx;
}

.ml138 {
  margin-left: 138rpx;
}

.br-rd10 {
  border-radius: 10rpx;
}

.br-rd20 {
  border-radius: 20rpx;
}

.stb-btn {
  padding: 8rpx 18rpx;
  border-radius: 10rpx;
}

.br-FF0000 {
  border: 1rpx solid #00bf5a;
  border-radius: 24rpx;
  padding: 6rpx 12rpx;
}

.bg-FFF6EE {
  background-color: #fff6ee;
}

.mt80 {
  margin-top: 80rpx;
}

.mt10 {
  margin-top: 10rpx;
}

.product {
  // padding-bottom: 150rpx;
}

.pic {
  width: 100%;
  position: relative;

  .swiper {
    // height: 620rpx;
    height: 100vw;

    video {
      width: 100%;
      // height: 620rpx;
      height: 100vw;
    }

    image {
      width: 100%;
      // height: 620rpx;
      height: 100vw;
    }
  }

  .p-price {
    width: 100%;
    // position: absolute;
    top: 460rpx;
    // background: linear-gradient(90deg,#20a733, #0a824b);
    background: #00bf5a;
    border-radius: 20rpx 20rpx 0px 0px;
    position: relative;
    top: -16rpx;

    .discount {
      color: #ffffff;
    }
  }
}

.richText {
  padding: 30rpx;

  ::v-deep img {
    margin-top: 0 !important;
  }
}

//秒杀，拼团样式
.p-ab {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.stb-list {
  padding-bottom: 10rpx;
}

.triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 105rpx solid #dccda4;
  border-left: 60rpx solid transparent;
}

.seckill {
  background-color: #dccda4;
  color: #00bf5a;
  padding: 12rpx 15rpx;
  box-sizing: border-box;
  border-radius: 5rpx 20rpx 0px 0px;
  text-align: center;
  // width: 150rpx;
}

.seckill-btn {
  width: 76%;
}

.br-284534 {
  border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
}

.gb-te {
  padding-top: 20rpx;
  padding-bottom: 15rpx;
}

.gb-btn {
  padding: 18rpx 80rpx 8rpx;
  line-height: 30rpx;
}

.btn-bg-dccda4 {
  background: #dccda4;
  border-radius: 48rpx 0rpx 0rpx 48rpx;
}

.btn-bg-00321E {
  background: #0b844a;
  border-radius: 0px 48px 48px 0px;
}

.tab {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding-top: 38rpx;
  z-index: 9;

  .pb30 {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: #00bf5a;
      transition: all 0.3s;
    }

    &.active {
      font-size: 30rpx;
      color: #00bf5a;
      font-weight: 700;

      &::before {
        width: 100%;
      }
    }
  }
}

.bottom-btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 9;
  border-top: 1rpx solid #e6e6e6;

  .cart {
    position: relative;

    .number {
      position: absolute;
      top: -10rpx;
      left: 45rpx;
      padding: 4rpx 8rpx;
      background-color: #ff0000;
      border: 4rpx solid #ffffff;
      border-radius: 40rpx;
    }
  }

  .cart-btn {
    width: 230rpx;
    height: 85rpx;
    background: #dccda4;
    border-radius: 43rpx 0rpx 0rpx 43rpx;
  }

  .buy-btn {
    width: 230rpx;
    height: 85rpx;
    line-height: 85rpx;
    background: #0b844a;
    border-radius: 0rpx 43rpx 43rpx 0rpx;
  }
}

.flex-sb {
  display: flex;
  justify-content: space-between;
}

//弹窗
.spec {
  border-radius: 18rpx 18rpx 0rpx 0rpx;
  padding-top: 30rpx;
  max-height: 900rpx;
  overflow-y: auto;

  .spec-item {
    background-color: #f6f6f6;
    border: 1px solid #f6f6f6;
    padding: 12rpx 30rpx;
    margin-bottom: 24rpx;
    font-size: 24rpx;
    color: #1a1a1a;
    border-radius: 4px;
  }

  .activeColor {
    background-color: #e1e6e3;
    border: 1px solid #3775f6;
    color: #00bf5a;
    border-radius: 4px;
  }

  .spec-item:not(:last-child) {
    margin-right: 24rpx;
  }

  //减号
  .minus {
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    background: #dedede;
    border-radius: 8rpx 0rpx 0rpx 8rpx;
  }

  .num {
    width: 74rpx;
    height: 46rpx;
    line-height: 46rpx;
    text-align: center;
    border: 1px solid #dedede;
  }

  //加号
  .plus-sign {
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    background: #dedede;
    border-radius: 0rpx 8rpx 8rpx 0rpx;
  }

  .specOpen-btn {
    margin-top: 68rpx;
    padding-bottom: 34rpx;

    button {
      background-color: #00bf5a;
      color: #ffffff;
    }
  }
}
</style>