applet/pages/groupBuying/details.vue

<template>
  <view class="container">
    <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.videoUrl">
                <j-video
                  class="jvideo"
                  :url="dataForm.videoUrl"
                  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.minPrice)"
                  ></rich-text
                ></view>
                <text class="discount u-font24 u-ml20 u-del"
                  >￥{{ dataForm.maxSalePrice }}</text
                >
                <!-- <text class="discount u-font24 u-ml15">{{ dataForm.discount }}折</text> -->
                <!-- #DCCDA4 -->
                <view v-if="dataForm.groupPeopleNum > 0">
                  <text
                    style="
                      font-size: 22rpx;
                      font-weight: 500;
                      color: #fa6138;
                      padding: 3rpx 14rpx;
                      margin-left: 18rpx;
                      background-color: #dccda4;
                      border-radius: 20rpx;
                    "
                  >
                    {{ dataForm.groupPeopleNum }}人拼
                  </text>
                </view>
              </view>
              <view class="p-ab u-flex-center">
                <view class="triangle-bottomright"></view>
                <view class="seckill u-text-center u-font28">
                  <!-- activeState 0：未开始 * 1：进行中 * 2：已结束 -->
                  <view
                    class="u-bold"
                    style="padding: 20rpx"
                    v-if="dataForm.activeState == 2"
                    >已结束</view
                  >
                  <view class="u-bold" v-if="dataForm.activeState == 1"
                    >距结束</view
                  >

                  <view class="u-bold" v-if="dataForm.activeState == 0"
                    >离开抢</view
                  >
                  <view v-show="dataForm.activeState != 2 && !selectGroup">
                    <uni-countdown
                      :backgroundColor="'none'"
                      @timeup="overDown2"
                      :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 v-show="dataForm.activeState != 2 && selectGroup">
                    <uni-countdown
                      :backgroundColor="'none'"
                      :color="'#3775F6'"
                      :splitorColor="'#3775F6'"
                      :show-day="time2[0] > 0"
                      :day="time2[0]"
                      :hour="time2[1]"
                      :minute="time2[2]"
                      :second="time2[3]"
                    ></uni-countdown>
                  </view>
                </view>
              </view>
            </view>

            <view class="mt10 u-plr30">
              <view>
                <view class="tipsStatus" v-if="shop.platformShop">自营</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.resultSaleNum }}</text>
                  件，仅剩
                  <text class="u-FF0000">{{ dataForm.residueStockTotal }}</text>
                  件
                </text>
              </view>
            </view>
          </view>
        </view>
        <!--拼团-->
        <view
          class="u-bg-fff u-mt10"
          v-if="teamlist && teamlist.length > 0 && !selectGroup"
        >
          <view class="u-border-one">
            <view class="u-plr30 pt-pb30 border u-flex-center-sb">
              <view class="u-font28 u-1A1A1A"
                >{{ teamlist.length }}人的拼单，可直接参与</view
              >
              <view class="u-999 u-font24" @click="goGb">
                更多拼团
                <text class="iconfont u-ml15">&#xe6c7;</text>
              </view>
            </view>
          </view>
          <view class="stb-list">
            <view
              class="stb-item u-plr30"
              style="display: flex; justify-content: space-between"
              v-for="(item, index) in teamlist"
              :key="item.id"
            >
              <view class="pt20-pb14" style="width: 100%" v-if="index < 4">
                <view class="u-flex-center">
                  <image
                    v-if="item.leaderUserInfo.headPhoto"
                    class="u-avatar65"
                    :src="item.leaderUserInfo.headPhoto"
                  ></image>
                  <image
                    v-else
                    class="u-avatar65"
                    src="/static/default-avatar.png"
                    mode=""
                  ></image>
                  <view
                    class="u-flex u-ml25"
                    style="
                      display: flex;
                      justify-content: space-around;
                      width: 100%;
                    "
                  >
                    <view
                      style="display: flex; flex-direction: column; flex: 1"
                    >
                      <view class="u-font24 u-1A1A1A u-text-width">{{
                        item.leaderUserInfo.nickname
                      }}</view>
                      <view
                        class="u-font24 u-flex-start"
                        style="display: flex; align-items: center"
                      >
                        <text class="u-707070">剩余</text>
                        <view class="u-FF0000">
                          <uni-countdown
                            :backgroundColor="'none'"
                            :color="'#FF0000'"
                            :splitorColor="'#FF0000'"
                            :show-day="item.time[0] > 0"
                            :day="item.time[0]"
                            :hour="item.time[1]"
                            :minute="item.time[2]"
                            :second="item.time[3]"
                            @timeup="overDown2"
                          ></uni-countdown>
                        </view>
                      </view>
                    </view>
                    <view style="display: flex; align-items: flex-start">
                      <view
                        class="u-font24 u-1A1A1A"
                        style="margin-right: 30rpx"
                      >
                        还差
                        <text class="u-FF0000">{{
                          item.groupPeopleNum - item.memberUserInfos.length
                        }}</text>
                        人拼成
                      </view>

                      <view
                        class="u-FFF stb-btn u-font24"
                        style="flex: 1; margin-top: 12rpx"
                        @click="gogroup(item)"
                      >
                        去拼单</view
                      >
                    </view>
                  </view>
                </view>
              </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.image"></image>
              </view>
              <view class="u-ml25">
                <view class="u-font28 u-1A1A1A u-bold">{{
                  shop.businessName
                }}</view>
                <view class="u-999 u-font24 u-mt5 u-text2">
                  <text
                    class="iconfont"
                    style="color: #fa6138"
                    @click.stop="goLocal"
                    >&#xe990;</text
                  >
                  {{ shop.provinceName }}{{ shop.cityName }}{{ shop.areaName
                  }}{{ 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">
              <uv-parse
                class="custom-parse"
                :content="goodsInfo.content"
              ></uv-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"
        >
          <view class="iconfont2 u-font44 u-999">&#xe684;</view>
          <view class="u-font28 u-1A1A1A">分享</view>
        </button>

        <!-- 两个按钮 -->
        <view class="u-flex-center" v-if="!selectGroup">
          <button
            class="gb-btn btn-bg-dccda4 u-00321E btn-bg-dccda4-48"
            @click="goProduct(dataForm.productId)"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.minSalePrice)"
                ></rich-text
              ></view>
            </view>
            <view class="u-font22">单独购买</view>
          </button>

          <button
            v-if="dataForm.activeState == 1"
            class="gb-btn btn-bg-00320E u-DCCDA4 btn-bg-dccda4-482"
            @click="buy(1, dataForm.id)"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.minPrice)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
          <button
            v-if="dataForm.activeState == 0"
            class="gb-btn btn-bg-00320E u-DCCDA4 btn-bg-dccda4-482"
            @click="notStarted()"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.minPrice)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
          <button
            v-if="dataForm.activeState == 2"
            class="gb-btn btn-bg-00320E u-DCCDA4 btn-bg-dccda4-482"
            @click="itSover()"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.minPrice)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
        </view>

        <!-- 三个按钮 -->
        <view class="u-flex-center" v-if="selectGroup">
          <button
            class="gb-btn btn-bg-dccda4 u-00321E"
            @click="goProduct(dataForm.productId)"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.minSalePrice)"
                ></rich-text
              ></view>
            </view>
            <view class="u-font22 font11">单独购买</view>
          </button>

          <button class="gb-btn btn-bg-00320E u-DCCDA4" @click="groupGoBuy">
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.minPrice)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
          <button
            class="gb-btn btn-bg-dccda4 u-00321E"
            @click="goGdProduct(dataForm.productId)"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.minPrice)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">去拼团</view>
          </button>
        </view>
      </view>
    </view>

    <!--规格-->
    <uv-popup mode="bottom" ref="specOpenRef" :touchmove="true" round="30rpx">
      <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="skuObj.cover"></image>
            <view class="u-ml20">
              <view class="u-999 u-font24 price-zhe">
                <view class="u-FF0000 u-font36"
                  ><rich-text
                    :nodes="$mUtil.priceBigSmall(skuObj.salePrice)"
                  ></rich-text>
                </view>
                <text class="u-del u-ml15"
                  >￥{{ skuObj.originalSalePrice }}</text
                >
                <!-- <text class="u-ml10">{{ dataForm.discount }}折</text> -->
              </view>
              <view class="u-font22 u-999 u-mt5">
                活动库存 {{ skuObj.stock }} 件
              </view>

              <view class="u-font22 u-999 u-mt5"></view>
              <view class="u-1A1A1A u-mt25">{{
                skuObj.skuSetName ? skuObj.skuSetName : "请选择"
              }}</view>
            </view>
          </view>
          <!-- <view class="iconfont u-999 closeIcon" @click="specOpenClose"
            >&#xe612;</view
          > -->
          <view class="closeIcon" @click.stop="specOpenClose">
            <uv-icon name="close-circle" color="#999999" size="36rpx"></uv-icon>
          </view>
        </view>

        <view>
          <view class="content">
            <scroll-view scroll-y style="max-height: 30vh">
              <view class="">
                <view
                  class="u-mt30 bottom-bor"
                  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>
            </scroll-view>
          </view>
          <view class="u-plr30 u-mt30">
            <view class="u-flex-center-sb">
              <view>购买数量</view>
              <view class="u-flex-center">
                <uv-number-box
                  v-model="addNumber"
                  disabledInput
                ></uv-number-box>
              </view>
            </view>
            <view class="specOpen-btn">
              <view
                ><button class="u-btn-two" @click="btnBuy(1)">
                  立即购买
                </button></view
              >
            </view>
          </view>
        </view>
      </view>
    </uv-popup>
    <!--更多拼团-->
    <uv-popup
      mode="center"
      backgroundColor="transparent"
      ref="gbOpenRef"
      round="30rpx"
    >
      <view class="iconfont u-text-right u-font40 u-FFF" @click="gbClose"
        >&#xe603;</view
      >
      <view class="u-bg-D5C49B u-mt30 br-rd20">
        <view class="br-284534">
          <view class="u-text-center gb-te">正在拼团</view>
        </view>
        <view class="gb-list pb50">
          <view class="gb-item u-plr30" v-for="item in teamlist" :key="item.id">
            <view class="u-flex-center-sb br-284534 pt28-pb18">
              <view class="u-flex-center u-00321E">
                <image
                  class="u-avatar65"
                  v-if="item.leaderUserInfo.headPhoto"
                  :src="item.leaderUserInfo.headPhoto"
                ></image>
                <!-- <image class="u-avatar65" v-else :src="imgUrl + '/head-on.png'" mode=""></image> -->
                <image
                  class="u-avatar65"
                  v-else
                  src="/static/default-avatar.png"
                  mode=""
                ></image>
                <view class="u-ml25">
                  <view class="u-font28 u-text-width">{{
                    item.leaderUserInfo.nickname
                  }}</view>
                  <view class="u-font20 per-num">
                    <div class="u-font24 u-flex-center">
                      <text>还差</text>
                      <text class="u-FF0000">{{
                        item.groupPeopleNumber - item.memberUserInfos.length
                      }}</text>
                      <text>人拼成</text>
                    </div>
                    <view
                      class="u-flex-start u-font24 u-flex-center"
                      style="display: flex"
                    >
                      <view class="u-00321E u-ml20 u-font24">剩余</view>
                      <view class="u-FF0000">
                        <uni-countdown
                          :backgroundColor="'none'"
                          :color="'#FF0000'"
                          :splitorColor="'#FF0000'"
                          :show-day="item.time[0] > 0"
                          :day="item.time[0]"
                          :hour="item.time[1]"
                          :minute="item.time[2]"
                          :second="item.time[3]"
                          @timeup="overDown2"
                        ></uni-countdown>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="u-FFF stb-btn u-font24 ml54" @click="gogroup(item)"
                >我要参团</view
              >
            </view>
          </view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad, onShow, onShareAppMessage } from "@dcloudio/uni-app";
import {
  activitygoodsGoodsInfo_Api,
  groupbuyingList_Api,
  groupbuyTeamInfo_Api,
  activitygoodsGroupbuying_Api,
} from "@/api/groupbuy";
import {
  getBusinessInfoId_Api,
  productInfo,
  shopOrderCommentPage,
} from "@/api/shop.js";
import comment from "@/components/ld-comment/ld-comment.vue";
import jVideo from "@/components/j-video/j-video.vue";
import utils from "@/util/index.js";
const gbOpenRef = ref();
const specOpenRef = ref();
// 响应式数据
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);

const imglist = ref([]);
const isChecked = ref(0);
const btnName = ref("");

const dataForm = ref({});
const shop = ref({});
const loading = ref(true);
const skuTab = ref([]);
const hasId = ref("");
const addNumber = ref(1);
const commentList = ref([]);
const commentListLength = ref(0);
const goodsInfo = ref({});
const time1 = ref([0, 0, 0, 0]);
const time2 = ref([0, 0, 0, 0]);
const teamlist = ref([]);
const selectGroup = ref(null);
const teamId = ref(null);

const skuObj = ref({});

// 页面生命周期
onLoad((options) => {
  if (options.id) {
    getDetailInfo(options.id);
  }
  if (options.teamId) {
    teamId.value = options.teamId;
  }
  if (options.shareId) {
    recordSave(options.shareId, options.id);
  }
});

onShow(() => {});

onShareAppMessage((res) => {
  let user = uni.getStorageSync("personal");
  if (res.from === "button") {
    console.log(res.target);
  }
  return {
    title: dataForm.value.shareTitle,
    imageUrl: dataForm.value.shareImg,
    path: `/pages/product/goods/puzzleGoods?id=${
      dataForm.value.id
    }&SbusinessId=${dataForm.value.businessId}&teamId=${
      teamId.value || ""
    }&share=1&shareId=${user.id || ""}`,
  };
});

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

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

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

const goShop = () => {
  uni.navigateTo({
    url: "/pages/shop/index?businessId=" + dataForm.value.businessId,
  });
};

const recordSave = (shareUserId, goodsId) => {
  return;
  globalThis.$http
    .post("/share/record/save", {
      shareUserId: shareUserId,
      goodsId: goodsId,
    })
    .then((res) => {});
};

const groupGoBuy = () => {
  selectGroup.value = null;
  getTeam();
};

const gogroup = (item) => {
  gbOpenRef.value.close();
  groupbuyTeamInfo_Api(item.id).then((res) => {
    if (res && res.code == 200) {
      time2.value = utils
        .countDown(Math.floor(res.data.countDownEndTime))
        .split(":")
        .map((val) => Number(val));
      console.log(time2.value, 123);
    }
  });

  selectGroup.value = item;
};

const goGdProduct = () => {
  // checkSku(selectGroup.value.groupBuyGoodsId);
  specOpenRef.value.open();
};

const overDown2 = () => {
  getTeam();
};

// 获取店铺信息
const getIndexList = (businessId) => {
  getBusinessInfoId_Api(businessId).then((ret) => {
    if (ret.data && ret.code == 200) {
      shop.value = ret.data;
    }
  });
};

const getTeam = () => {
  // console.log(dataForm.value.businessId, dataForm.value.id);
  if (!dataForm.value.businessId || !dataForm.value.id) return;
  groupbuyingList_Api(dataForm.value.businessId, dataForm.value.id).then(
    (res) => {
      if (res && res.code == 200) {
        res.data = res.data.map((val) => {
          val.time = utils
            .countDown(val.endTime)
            .split(":")
            .map((val) => Number(val));
          return val;
        });
        teamlist.value = res.data;
        if (teamId.value) {
          selectGroup.value = res.data.find((val) => val.id == teamId.value);
          console.log("团队信息2" + JSON.stringify(selectGroup.value));
          time2.value = utils
            .countDown(selectGroup.value.endTime)
            .split(":")
            .map((val) => Number(val));
        }
      }
    }
  );
};

const getDetailInfo = (id) => {
  activitygoodsGoodsInfo_Api(id).then((res) => {
    loading.value = false;
    if (res && res.code == 200) {
      dataForm.value = res.data;
      dataForm.value.businessId = res.data.businessId;
      getIndexList(dataForm.value.businessId);
      if (res.data.activeState == 0) {
        time1.value = utils
          .countDown(res.data.startTime)
          .split(":")
          .map((val) => Number(val));
      } else {
        time1.value = utils
          .countDown(res.data.finishTime)
          .split(":")
          .map((val) => Number(val));
      }

      productInfo(dataForm.value.productId).then((ret) => {
        if (ret && ret.code == 200) {
          goodsInfo.value = ret.data;
          imglist.value = ret.data.images;
          skuTab.value = ret.data.skuTable.map((item) => {
            if (item.values) {
              item.values[0].flag = true;
            }
            return item;
          });
        }
      });

      shopOrderCommentPage({
        productId: dataForm.value.productId,
        pageNum: 1,
        pageSize: 10,
      }).then((ret) => {
        if (ret && ret.code == 200) {
          commentList.value = ret.rows;
          commentListLength.value = ret.total;
          // console.log(commentListLength.value);
        }
      });

      getTeam();
    }
  });
};

const goProduct = (id) => {
  uni.navigateTo({
    url: "/pages/shop/goodsDetails?id=" + id,
  });
};

const goGb = () => {
  gbOpenRef.value.open();
};

const gbClose = () => {
  gbOpenRef.value.close();
};

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

const buy = (i, id) => {
  selectGroup.value = null;
  chonseSku();
  btnName.value = "立即购买";
  specOpenRef.value.open();
};

const chonseSku = (index, id) => {
  if (index != null) {
    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("_");
  totalId = "_" + totalId + "_";
  hasId.value = totalId;
  if (goodsInfo.value.singleSku) {
    if(dataForm.value.productSkuSetList.length>0) skuObj.value = dataForm.value.productSkuSetList[0];
  } else {
    dataForm.value.productSkuSetList.forEach((res) => {
      if (res.skuHashCode == totalId) {
        skuObj.value = res;
      }
    });
  }
};


const specOpenClose = () => {
  specOpenRef.value.close();
};

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

  if (
    Number(addNumber.value) > dataForm.value.limitBuyNum &&
    dataForm.value.limitBuyNum != 0
  ) {
    uni.$uv.toast("商品限购" + dataForm.value.limitBuyNum + "件");
    return false;
  }

  //判断库存
  if (
    dataForm.value.productSkuSetList.length > 0 &&
    Number(skuObj.value.stock) < Number(addNumber.value)
  ) {
    uni.$uv.toast("商品库存只有" + skuObj.value.stock + "件");
    return false;
  }

  // psotJson();
};

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

  childArr.push({
    userCartId: 0,
    activityGoodsId: skuObj.value.activityGoodsId,
    productId: dataForm.value.productId,
    num: addNumber.value,
    skuHashCode: skuObj.value.skuHashCode,
  });

  parendArr.push({
    businessId: dataForm.value.businessId,
    sourceShopId: shop.value.id,
    activityId: dataForm.value.groupBuyId,
    sponsorActivityId: selectGroup.value ? selectGroup.value.id : 0,
    userRemark: "",
    items: childArr,
  });

  dataJson = {
    isCart: false,
    receiptId: null,
    shipmentMode: 0,
    shopOrders: parendArr,
    marketingType: 2,
  };

  uni.setStorageSync("dataJson", dataJson);
  uni.navigateTo({
    url: "/pages/product/surePay/surePaySechill?type=group",
  });
};

const btnBuy = (i) => {
  if (!utils.isLoginTo(true)) {
    btnBuys();
  }
};
</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.price-zhe {
  display: flex;
  align-items: baseline;
}

.per-num {
  display: flex;
}

.bottom-bor {
  border-bottom: 3rpx solid #e7e7e7;
}

.slotBox {
  .back {
    padding: 0 13rpx;
  }
}

.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;
  background: #ff0000;
}

.br-FF0000 {
  border: 1rpx solid #ff0000;
  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: #fa6138;
    border-radius: 20rpx 20rpx 0px 0px;
    position: relative;
    top: -18rpx;

    .discount {
      color: #ffffff;
    }
  }
}

.richText {
  padding: 30rpx;

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

//秒杀，拼团样式
.p-ab {
  position: absolute;
  z-index: 2;
  top: -8rpx;
  right: 0;
}

.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: #fa6138;
  padding: 12rpx 15rpx;
  padding-right: 28rpx;
  border-radius: 5rpx 20rpx 0px 0px;
  box-sizing: border-box;
}

.seckill-btn {
  width: 86%;
}

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

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

.gb-btn {
  padding: 20rpx 40rpx;
  line-height: 30rpx;
}

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

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

.btn-bg-00320E {
  background: #fa6138;
  border-radius: 48px;
}

.btn-bg-dccda4-48 {
  padding: 20rpx 85rpx;
  border-radius: 48px;
  background: #f8a764;
  color: white;
  margin-right: 10rpx;
}

.btn-bg-dccda4-482 {
  padding: 20rpx 85rpx;
  border-radius: 48px;
  background: #fa6138;
  color: white;
  margin-left: 10rpx;
}

.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: #fa6138;
      transition: all 0.3s;
    }

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

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

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

  .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: #fa6138;
    border-radius: 0rpx 43rpx 43rpx 0rpx;
  }
}

.flex-sb {
  display: flex;
  justify-content: space-between;
  border-bottom: 3rpx solid #e7e7e7;
}

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

  // position: fixed;
  //     bottom: 0;
  //     z-index: 999;
  //     width: 100%;
  .spec-item {
    background-color: #f6f6f6;
    border: 1px solid #f6f6f6;
    padding: 12rpx 30rpx;
    font-size: 24rpx;
    color: #1a1a1a;
    border-radius: 4px;
  }

  .activeColor {
    background-color: #e1e6e3;
    border: 1px solid #3775f6;
    color: #fa6138;
    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: #fa6138;
      color: #ffffff;
    }
  }
}
</style>