yshop-pro-uniapp/pages/goodsDetail/goodsDetail.vue

<template>
  <layout class="goodsDetail">
    <view :style="computedHeightStyle"></view>
    <Header :scroll-top="scrollTop" ref="headerRef" :propUp="false"> </Header>
    <view v-if="!showEmpty">
      <view v-if="detailData">
        <swiper class="swiper detail" circular indicator-dots autoplay>
          <swiper-item v-for="(item, index) in sliderImageData" :key="index">
            <view class="swiper-item">
              <image class="image" :src="item" mode="aspectFill" />
            </view>
          </swiper-item>
        </swiper>
        <view class="goodsDetail-info">
          <view class="goodsDetail-price-row">
            <view
              class="goodsDetail-price goodsDetail-price-primary"
              v-if="storeAttr || storeInfo"
            >
              ¥{{
                (storeAttr && storeAttr.price) ||
                (storeInfo && storeInfo.price) ||
                "0.00"
              }}
            </view>
            <view
              class="goodsDetail-price goodsDetail-price-original"
              v-if="storeAttr && storeInfo"
            >
              ¥{{
                (storeAttr && storeAttr.otPrice) ||
                (storeInfo && storeInfo.otPrice)
              }}
            </view>
          </view>
          <view class="goodsDetail-storeName">{{ storeInfo.storeName }}</view>
          <view class="goodsDetail-info-action">
            <view class="goodsDetail-info-action-tag">
              <!-- <space>
              <uv-tags
                plain
                type="primary"
                text="满100减10"
              ></uv-tags>
              <uv-tags
                plain
                type="primary"
                text="满100减10"
              ></uv-tags>
            </space> -->
            </view>
            <view class="goodsDetail-info-action-desc" v-if="storeInfo.stock">
              仅剩{{ storeInfo.stock }}件
            </view>
          </view>
        </view>

        <view class="row-context">
          <view class="label-row">
            <view class="left">
              <view class="label">运费：</view>
            </view>
            <view class="value">
              {{
                detailData.tempName !== "规定运费"
                  ? detailData.tempName
                  : storeInfo.postage + "元"
              }}
            </view>
          </view>
          <view class="label-row" @click="discountCouponSelect('select')">
            <view class="label">
              <view class="text"> 促销：{{ detailData.couponSplicing }} </view>
            </view>
            <view class="value">
              领券
              <uv-icon name="arrow-right" />
            </view>
          </view>

          <view class="label-row" @click="handleOpenSelect('select')">
            <view class="label">
              <view class="text">
                选择： {{ !storeAttr ? "请选择商品规格" : storeAttr.sku }}
              </view>
            </view>
            <view class="value">
              <uv-icon name="arrow-right" />
            </view>
          </view>
        </view>

        <view class="card full">
          <view
            class="card-head"
            :style="{
              borderBottom:
                detailData.replyCount <= 0 ? 'none' : '1rpx solid #e6e6e6',
            }"
          >
            <view class="card-title"
              >商品评价({{ detailData.replyCount }})</view
            >
            <view
              class="card-more"
              @click="
                push(
                  { url: '/pages/goodsReply/goodsReply' },
                  { data: { id: detailData.storeInfo.id } }
                )
              "
              ><span> 查看更多 </span>
              <uv-icon
                name="arrow-right"
                color="rgb(187, 187, 187)"
                size="10"
              />
            </view>
          </view>
          <view class="card-content" v-if="detailData.reply">
            <detail-reply :data="detailData.reply"></detail-reply>
          </view>
        </view>
        <blank size="15"></blank>
        <view class="card full">
          <view class="card-head">
            <view class="card-title"> 商品详情 </view>
          </view>
          <view class="goods-detail-content">
            <rich-text :nodes="storeInfo.description" bindtap="onOpenLink" />
          </view>
        </view>
        <blank size="15"></blank>

        <container min>
          <view class="center-title">
            <view class="center-title-line"></view>
            <view class="title">热门推荐</view>
            <view class="center-title-line"></view>
          </view>
        </container>
        <good-attr-select
          ref="selectAttrPanel"
          :id="storeInfo.id"
          :storeInfo="storeInfo"
          :productAttr="detailData.productAttr"
          :productValue="detailData.productValue"
          @select="handleSelectAttr"
        />
        <view class="coupon-select">
          <good-coupon-select
            ref="selectCouponPanel"
            :id="storeInfo.id"
            @select="handleSelectCoupon"
          />
        </view>
      </view>

      <view
        class="action-bar"
        :class="detailData.storeInfo.isShow === 0 && 'off'"
        v-if="detailData"
      >
        <view class="off-tip">商品已经下架了啦～要不要瞧瞧别的～</view>
        <view class="action-cont">
          <view class="action-icons">
            <view class="action-icons-item">
              <view class="action-icon" @click="goToService">
                <img class="action-icon-img" :src="productCustomerIcon" />
                <text class="action-icon-label">客服</text>
              </view>
            </view>
            <view class="action-icons-item">
              <view class="action-icon" @click="goToShopCart">
                <view class="action-icon-badge">
                  <uv-badge type="error" max="99" :value="cardCount"></uv-badge>
                </view>

                <image class="action-icon-img" :src="productCartIcon" />
                <text class="action-icon-label">购物车</text>
              </view>
            </view>
            <view class="action-icons-item">
              <view class="action-icon" @click="handleCollect">
                <image
                  v-if="!storeInfo?.userCollect"
                  class="action-icon-img"
                  :src="productCollectIcon"
                />
                <image
                  v-if="storeInfo?.userCollect"
                  class="action-icon-img"
                  :src="productAffirmCollectIcon"
                />
                <text class="action-icon-label">收藏</text>
              </view>
            </view>
          </view>
          <view class="action-btns">
            <uv-button
              type="info"
              text="加入购物车"
              :disabled="detailData.storeInfo.isShow === 0"
              plain
              @click="handleOpenSelect('cart')"
            ></uv-button>
            <uv-button
              type="primary"
              text="立即购买"
              :disabled="detailData.storeInfo.isShow === 0"
              @click="handleOpenSelect('buy')"
            ></uv-button>
          </view>
        </view>
      </view>
      <ReturnTop :scroll-top="scrollTop" />
    </view>
    <GoodEmpty v-else></GoodEmpty>
  </layout>
</template>

<script setup>
import {productCustomerIcon, productCollectIcon, productCartIcon, productAffirmCollectIcon} from "@/utils/images";
import { computed, onMounted, ref, unref } from 'vue'
import { collectSingle, getProductDetail, unCollectSingle } from '@/api/product'
import { getCartAdd, getCartCount } from '@/api/cart'
import { onLoad, onPageScroll, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { useRouter } from "@/hooks/useRouter";
import { useInterface } from "@/hooks/useInterface";
import Header from "@/components/Header/index.vue";
import GoodCouponSelect from "@/components/good-coupon-select/good-coupon-select.vue";
import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
import { useScroll } from "@/hooks/useScroll";
import ReturnTop from "@/components/ReturnTop/index.vue"
import GoodEmpty from "@/pages/goodsDetail/components/GoodEmpty.vue";
import { SharePathMap, useShare } from "@/hooks/useShare";

const { push, getParams, pushToTab, goBack } = useRouter();
const { toast } = useInterface();
const detailData = ref(null);
const sliderImageData = ref([]);
const storeInfo = ref(null);
const actionType = ref(null);
const storeAttr = ref(null);
const storeNum = ref(null);
const cardCount = ref(null);

const selectAttrPanel = ref(false);
const selectCouponPanel = ref(false);
const selectCoupon = ref(false);
const headerRef = ref();
const showEmpty = ref(false)

const computedHeightStyle = computed(() => {
  const style = {width: '100 %', height: 0,background:'#f5f5f5'}
  if (!headerRef.value || !headerRef.value.heightInfo) return style
  return {...style, height: `${ headerRef.value.heightInfo.statusBarHeight }px`}
})

onMounted(() => {
})


const {shareAppMessage,shareTimeline,goodsDetailShare} = useShare(SharePathMap.GOODS_DETAIL)

onShareAppMessage(shareAppMessage)
onShareTimeline(shareTimeline)

const handleGetDetail = async (id) => {
  try {
    const detail = await getProductDetail(id);
    if (detail) {
      detailData.value = detail;
      sliderImageData.value = detail.storeInfo.sliderImage.split(",");
      storeInfo.value = detail.storeInfo;
      const description = storeInfo.value.description;
      storeInfo.value.description = description.replace(
        /<img /g,
        "<img style='width:100%;' "
      );
      let attr = [];
      detail.productAttr.forEach((item, i) => {
        attr[i] = item.attrValueArr[0]
      })
      let selectedAttrStr = attr.join(',')
      storeAttr.value = detail.productValue[selectedAttrStr]
      goodsDetailShare(detail.storeInfo)
    } else {
      showEmpty.value = true
    }
  } catch (error) {
  }
};

onLoad((options) => {
  const params = getParams(options)
  handleGetDetail(params.id)
  handleGetCartCount(params.id)
})
const {scrollTop} = useScroll()
const goToService = () => {
  toast({ title: "敬请期待" });
};

const goToShopCart = () => {
  push({
    url: "/pages/shoppingCartJump/shoppingCart",
  });
};

const handleOpenSelect = (action) => {
  if (detailData.value.storeInfo.isShow === 1) {
    actionType.value = action;
    selectAttrPanel.value.open();
  }
};

const discountCouponSelect = () => {
  selectCouponPanel.value.open();
};

const handleSelectAttr = (attr) => {
  selectAttrPanel.value.close();
  storeAttr.value = attr.store;
  storeNum.value = attr.num;
  switch (actionType.value) {
    case "select":
      break;
    case "cart":
      handleCardAdd();
      break;
    case "buy":
      handleBuy();
      break;
  }
  actionType.value = "";
};

const handleSelectCoupon = (coupon) => {
  selectCoupon.value = coupon;
};

const handleCardAdd = async () => {
  let res = await getCartAdd({
    cartNum: storeNum.value,
    productId: storeAttr.value.productId,
    uniqueId: storeAttr.value.unique,
    new: 0,
  });
  handleGetCartCount();
  uni.showToast({
    title: "已加入购物车",
    duration: 2000,
  });
};

const handleBuy = async () => {
  uni.showLoading({
    title: "加载中",
  });

  let res = await getCartAdd({
    cartNum: storeNum.value,
    productId: storeAttr.value.productId,
    uniqueId: storeAttr.value.unique,
    new: 1,
  });
  uni.hideLoading();
  push(
    { url: "/pages/submitOrder/submitOrder" },
    { data: { cartId: res.cartId } }
  );
};

const handleCollect = async () => {
  const goodInfo = unref(storeInfo);
  const isCollect = goodInfo.userCollect;
  const data = {
    productId: goodInfo.id,
    type: "collect",
    category: "common",
  };
  if (isCollect) {
    // 取消
    await unCollectSingle(data);
  } else {
    // 收藏
    await collectSingle(data);
  }
  goodInfo.userCollect = !goodInfo.userCollect;
  isCollect ? toast({ title: "已取消收藏" }) : toast({ title: "已收藏" });
};

const handleGetCartCount = async () => {
  const count = await getCartCount();
  cardCount.value = count.count;
};
</script>

<style lang="scss">
.search {
  padding: 0 17px;
}

.logo {
  width: 63px;
  height: 25px;

  .image {
    width: 63px;
    height: 25px;
    display: block;
  }
}

.swiper {
  width: 100%;

  .image {
    width: 100%;
    display: block;
  }
}

.goodsDetail {
  width: 100%;

  &-storeName {
    line-height: 40rpx;
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }

  &-price {
    &-row {
      margin-bottom: 17rpx;
      display: flex;
      align-items: center;
    }

    &-primary {
      line-height: 50rpx;
      font-size: 50rpx;
      color: #ee6d46;
    }

    &-default {
      line-height: 40rpx;
      font-size: 28rpx;
      color: #333333;
    }

    &-original {
      margin-left: 20rpx;
      line-height: 28rpx;
      font-size: 28rpx;
      color: #999999;
      text-decoration: line-through;
    }
  }

  &-info {
    background-color: #fff;
    padding: 30rpx 35rpx;
    // display: flex;
    // align-items: flex-end;
    // justify-content: space-between;

    &-action {
      display: flex;
      justify-content: space-between;

      &-tags {
        .uv-tags {
          margin-right: 10rpx;
        }
      }

      &-desc {
        line-height: 28rpx;
        font-size: 20rpx;
        color: #999999;
      }
    }
  }

  &-image {
    &-img {
    }
  }

  &-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 14rpx;

    .goods {
      &-thumb {
        margin-bottom: 0;
        width: 220rpx;
        height: 220rpx;

        &-img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      &-content {
        padding-right: 40rpx;
        margin-left: 30rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}

.buy-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &-info {
    flex: 1;

    &-desc {
      color: #999999;
      font-size: 24rpx;
      line-height: 32rpx;
    }
  }

  &-action {
    margin-left: 17rpx;
  }
}

.buy-num {
  &-info-desc {
    color: #999999;
    font-size: 24rpx;
    line-height: 32rpx;
  }
}

.goods-detail-content {
  padding: 34rpx;

  img {
    max-width: 100%;
  }
}

:deep(.coupon-select) .uni-popup__wrapper {
  height: auto;
  max-height: 1000rpx;
  overflow-y: auto;
}

:deep(.uv-icon) {
  flex-shrink: 0 !important;
}

// ======================= 👇 kahu ===
.row-context {
  margin: 30rpx 0;

  .label-row {
    @include useFlex(space-between, center);
    @include usePadding(30, 20);
    width: 100%;
    background: $white-color;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .label {
      max-width: 85%;
      @include useFlex(flex-start, center);
      color: $tips-color;
      white-space: nowrap;
      font-size: 24rpx;
      flex-grow: 0;

      .text {
        max-width: 100%;
        overflow: hidden;
        flex-grow: 0;
        text-overflow: ellipsis;
      }
    }

    .value {
      @include useFlex(flex-end, center);
      flex-shrink: 0;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.swiper {
  .swiper-item {
    width: 100%;
    height: 100%;

    .image {
      width: inherit;
      height: inherit;
    }
  }
}
</style>