applet/pages/shop/goodsDetails.vue

<template>
  <view class="container">
    <uv-navbar title="商品详情" placeholder @leftClick="goBack"></uv-navbar>
    <view class="swiperBox">
      <uv-swiper :list="details.images" height="100vw" indicator indicatorMode="dot"></uv-swiper>
    </view>
    <view class="priceBox">
      <view class="priceBox_l" v-if="details.productPaymentMode == 1">
        <!-- <text class="iconfont2">&#xe669;</text> -->
        <text>{{ details.minPoints }}积分</text>
        <template v-if="details.minSalePrice && details.minSalePrice * 1">
          +
          <view>
            <rich-text :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"></rich-text>
          </view>
        </template>

      </view>
      <view class="priceBox_l" v-if="details.productPaymentMode == 0">
        <view>
          <rich-text :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"></rich-text>
          <!-- <rich-text :nodes="$mUtil.priceBigSmall('100')"></rich-text> -->
        </view>
      </view>
      <text class="discount">￥{{ details.maxMarketPrice }}</text>
      <!-- <text v-if="details.canGivePoint" class="u-font24 u-ml15" style="flex: 1;text-align: right;">
        赠送：10 积分
      </text> -->
    </view>
    <view class="titleBox">
      <view class="titleBox_t">
        <text>{{ details.title }}</text>
      </view>
      <view class="titleBox_b">
        <view class="titleBox_b_l">
          已售
          <text>{{ details.showSales }}</text>
          件，仅剩
          <text>{{ details.stock }}</text>
          件
        </view>
        <view class="titleBox_b_r">
          <view @click="collect" v-if="!collectStatus" class="iconfont">&#xe757;</view>
          <view @click="collect" v-else class="iconfont collectionActive">&#xe613;</view>
        </view>
      </view>
    </view>

    <view class="shopBox" @click.stop="goShop">
      <view class="shopBox_l">
        <view class="shopBox_l_img">
          <image :src="shopDetails.image"></image>
        </view>
        <view class="shopBox_l_content">
          <view class="shopBox_l_content_name uv-line-1">{{
            shopDetails.businessName
          }}</view>
          <view class="shopBox_l_content_address uv-line-2">
            <text class="iconfont" style="color: #fa6138" @click.stop="goLocal">&#xe990;</text>
            {{ shopDetails.address }}
          </view>
        </view>
      </view>
      <view>
        <uv-icon name="arrow-right" size="24rpx" color="#000"></uv-icon>
      </view>
    </view>
    <uv-sticky :offsetTop="tabTop" z-index="100">
      <view class="tab">
        <view @tap="change(0)" :class="{ active: isChecked == 0 }">商品详情</view>
        <view @tap="change(1)" :class="{ active: isChecked == 1 }">用户评论<span v-if="commentTotal > 0">({{ commentTotal
        }})</span></view>
      </view>
    </uv-sticky>
    <view v-if="isChecked == 0">
      <view class="richText ql-editor-box">
        <uv-parse class="custom-parse" :content="details.content"></uv-parse>
      </view>
    </view>
    <view class="commentBox u-plr30" v-else>
      <comment :value="commentList"></comment>
      <uv-load-more v-if="commentList.length > 0" :status="status" />
    </view>

    <view class="btnBox">
      <view class="btnBox_l" v-if="details.productPaymentMode == 0">
        <view class="btnBox_l_chat" @click="goChat">
          <image :src="$handleImageUrl('/kefu.png')" mode="aspectFill"></image>
          <view class="btnBox_l_text">客服</view>
        </view>
        <view class="btnBox_l_cart" @click="goTocart">
          <view class="">
            <view class="iconfont">&#xe752;</view>
            <view class="btnBox_l_text">购物车</view>
          </view>
        </view>
      </view>
      <!--普通商品-->
      <view class="btnBox_r" :class="{btnBox_r_margin: details.productPaymentMode == 1}">
        <button class="btnBox_r_car" v-if="details.productPaymentMode != 1" @click="buy(0)">
          加入购物车
        </button>
        <button v-if="details.productPaymentMode != 1" class="btnBox_r_buy"
          :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }" @click="buy(1)">
          立即购买
        </button>
        <button v-if="details.productPaymentMode == 1" class="btnBox_r_buy"
          :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }" @click="buy(2)">
          立即兑换
        </button>
      </view>
    </view>

    <!-- 规格选择组件 -->
    <skuSelect ref="shoppingCartRef" :details="details" />
  </view>
</template>

<script setup>
import {
  productInfo,
  getBusinessInfo,
  getUserCollect,
  userCollectAdd,
  userCollectDel,
  shopOrderCommentPage,
} from "@/api/shop.js";
import { ref, getCurrentInstance } from "vue";
import comment from "@/components/ld-comment/ld-comment.vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const { proxy } = getCurrentInstance();
const mUtil = proxy.$mUtil;
const list = ref([]);
const isChecked = ref(0);
const commentList = ref([]);
const commentTotal = ref(0);
const shoppingCartRef = ref(null);
const details = ref({});
const shopDetails = ref({});
const tabTop = ref(0);
const collectObj = ref({});
const collectStatus = ref(false);
const timer = ref(null);
const status = ref("nomore"); //loadmore - 加载前，loading - 加载中，nomore - 没有数据
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});

const goBack = () => {
  uni.navigateBack();
};
const goShop = () => {
  uni.navigateTo({
    url: "/pages/shop/index?businessId=" + shopDetails.value.businessId,
  });
};
const goTocart = () => {
  uni.switchTab({
    url: "/pages/tabtar/shoppingCart",
  });
};
onLoad((options) => {
  if (options.id) {
    queryParams.value.productId = options.id;
    getDetails(options.id);
    getCommentList();
  }
  uni.getSystemInfo({
    success: (res) => {
      tabTop.value = res.statusBarHeight + 44;
    },
  });
});
// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNum = 1;
  getDetails(queryParams.value.productId);
  getCommentList();
});
// 上拉加载更多
onReachBottom(() => {
  if (status.value == "loadmore" && isChecked.value == 1) {
    queryParams.value.pageNum++;
    getCommentList();
  }
});
// 获取收藏状态
const getCollectStatus = () => {
  let params = {
    entityId: details.value.productId,
    entityType: 1,
  };
  getUserCollect(params).then((res) => {
    collectObj.value = res.data || {};
    collectStatus.value = res.data ? true : false;
  });
};
// 收藏
const collect = () => {
  console.log(timer.value);
  if (timer.value) {
    uni.$uv.toast("操作过于频繁，请稍后再试");
    return;
  }
  if (collectStatus.value) {
    userCollectDel(collectObj.value.id).then((res) => {
      collectStatus.value = false;
      uni.showToast({
        title: "取消收藏成功！",
        duration: 1500,
      });
      timer.value = setTimeout(() => {
        clearTimeout(timer.value);
        timer.value = null;
      }, 2000);
    });
  } else {
    let param = {
      entityType: 1,
      entityId: details.value.productId,
    };
    userCollectAdd(param).then((res) => {
      collectStatus.value = true;
      uni.showToast({
        title: "收藏成功！",
        duration: 1500,
      });
      timer.value = setTimeout(() => {
        clearTimeout(timer.value);
        timer.value = null;
      }, 2000);
      getCollectStatus();
    });
  }
};
// 获取评论列表
const getCommentList = () => {
  status.value = "loading";
  shopOrderCommentPage(queryParams.value)
    .then((res) => {
      // commentList.value = res.rows;
      commentTotal.value = res.total;
      if (queryParams.value.pageNum == 1) {
        commentList.value = res.rows;
      } else {
        commentList.value = [...list.value, ...res.rows];
      }
      if (commentList.value.length < res.total) {
        status.value = "loadmore";
      } else {
        status.value = "noMore";
      }
      uni.stopPullDownRefresh();
    })
    .catch(() => {
      status.value = "loadmore";
      uni.stopPullDownRefresh();
    });
};
const getDetails = (id) => {
  productInfo(id)
    .then((res) => {
      if (res.data.videoUrl) {
        res.data.images = [...res.data.images, res.data.videoUrl];
      }
      details.value = res.data;
      getCollectStatus();
      getShopDetails(res.data.businessId);
    })
    .catch((err) => {
      // console.log(err);
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    });
};
const getShopDetails = (businessId) => {
  // let id = uni.getStorageSync("businessId");
  getBusinessInfo({ businessId: businessId }).then((res) => {
    shopDetails.value = res.data || {};
  });
};
const goLocal = () => {
  uni.openLocation({
    latitude: Number(shopDetails.value.latitude),
    longitude: Number(shopDetails.value.longitude),
    name: shopDetails.value.businessName,
    address: shopDetails.value.address,
    success: function () {
      console.log("success");
    },
  });
};
const change = (index) => {
  isChecked.value = index;
};
//点购物车/立即购买
const buy = (i, id) => {
  let name = "";
  if (i == 0) {
    name = "加入购物车";
  } else if (i == 1) {
    name = "立即购买";
  } else {
    name = "立即兑换";
  }
  shoppingCartRef.value.open(name);
};
// 跳转到客服页面
const goChat = () => {
  if (!shopDetails.value.customerServicePhone) {
    uni.showToast({
      title: "暂无客服热线",
      duration: 2000,
      icon: "none",
    });
    return;
  }
  mUtil.callup(shopDetails.value.customerServicePhone);
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 150rpx;
}

.swiperBox {
  width: 100%;
  height: 100vw;
}

.priceBox {
  padding: 24rpx;
  display: flex;
  align-items: baseline;
  background: #fa6138;
  color: #fff;
  font-size: 36rpx;

  .iconfont2 {
    font-size: 50rpx;
    vertical-align: bottom;
  }

  .discount {
    margin-left: 20rpx;
    font-size: 24rpx;
    text-decoration: line-through;
  }

  .priceBox_l {
    display: flex;
    align-items: center;
  }
}

.titleBox {
  padding: 8rpx 30rpx 40rpx;

  .titleBox_t {
    .tipsStatus {
      display: inline-block;
      padding: 6rpx 10rpx;
      background: #ff0000;
      border-radius: 10rpx 0px 10rpx 0px;
      line-height: 28rpx;
      text-align: center;
      margin-right: 10rpx;
      color: #fff;
      font-size: 20rpx;
    }

    >text {
      font-size: 34rpx;
      font-weight: bold;
      color: #1a1a1a;
    }
  }

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

    .titleBox_b_l {
      font-size: 24rpx;
      margin-top: 15rpx;
      color: #999999;

      text {
        color: #ff6600;
      }
    }

    .titleBox_b_r {
      .iconfont {
        font-size: 40rpx;
        color: #999;
      }

      .collectionActive {
        color: #ff0000;
        // -webkit-transform: scale(1.2);
        // transform: scale(1.2);
      }
    }
  }
}

.shopBox {
  border-top: 10rpx solid #f5f5f5;
  border-bottom: 10rpx solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 35rpx 30rpx;

  .shopBox_l {
    display: flex;
    align-items: center;

    image {
      width: 104rpx;
      height: 104rpx;
      border-radius: 50%;
      margin-right: 25rpx;
    }

    .shopBox_l_content {
      .shopBox_l_content_name {
        font-size: 28rpx;
        color: #1a1a1a;
        font-weight: bold;
      }

      .shopBox_l_content_address {
        font-size: 24rpx;
        color: #999;
        margin-top: 5rpx;
      }
    }
  }
}

.tab {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding-top: 38rpx;
  z-index: 9;
  font-size: 30rpx;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-around;

  >view {
    padding-bottom: 30rpx;
    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%;
      }
    }
  }
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 999;
  border-top: 1rpx solid #e6e6e6;
  background: #fff;
  box-sizing: border-box;

  .btnBox_l {
    display: flex;
    align-items: center;
    height: 84rpx;

    >view,
    >button {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: 84rpx;
      line-height: 42rpx;
      margin-right: 20rpx;

      .iconfont {
        color: #999;
        font-size: 40rpx;
      }

      .btnBox_l_text {
        color: #1a1a1a;
        font-size: 28rpx;
      }

      image {
        width: 40rpx;
        height: 40rpx;
        margin: 0 auto;
      }
    }

    // .btnBox_l_chat {
    // }
    .btnBox_l_cart {
      text-align: center;
      margin-right: 0;
    }
  }
  .btnBox_r_margin {
    margin: auto;
  }
  .btnBox_r {
    display: flex;

    >button {
      width: 200rpx;
      height: 85rpx;
      line-height: 85rpx;
      background: #fa6138;
      color: white;
      border-radius: 40rpx;
      font-size: 30rpx;
    }

    .btnBox_r_car {
      background: #ff9651;
      margin-right: 20rpx;
    }

    .btnBox_r_buy {
      background: #fa6138;
    }

    .btnBox_r_buy.btnBox_r_buy_active {
      width: 400rpx !important;
    }
  }
}

button {
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  background: transparent;
}

button::after {
  border: none;
}

.richText {
  padding: 20rpx;
  min-height: 50vh;
}

.commentBox {
  min-height: 50vh;
}
</style>