详情倒计时

src/pages/assistingAgriculture/detail/detail.vue

@@ -22,6 +22,46 @@
         height="512rpx"
       ></wd-swiper>
     </view>
+
+    <view class="countDown">
+      <img
+        src="/static/assistingAgriculture/detail/img5.png"
+        style="width: 750rpx; height: 122rpx; position: absolute"
+      />
+      <img
+        src="/static/assistingAgriculture/detail/img1.png"
+        style="width: 368rpx; height: 122rpx; position: absolute; z-index: 99; margin-left: 380rpx"
+      />
+
+      <view class="count-info">
+        <view class="flex-center">
+          <view style="color: #fa5151">￥{{ dataDetails.prod.price }}</view>
+          <text style="margin-left: -30rpx">/只</text>
+          <view style="z-index: 9999; color: #ffffff; margin-left: 320rpx; font-size: 28rpx">
+            距离结束仅剩
+          </view>
+        </view>
+        <view class="flex-center">
+          <view style="font-size: 28rpx">
+            已销售{{ dataDetails.prod.soldNum || 0 }}件 | 仅剩{{
+              dataDetails.skus[0].stocks || 0
+            }}件
+          </view>
+          <wd-count-down
+            :time="timeLeft"
+            style="position: absolute; z-index: 999; margin-left: 460rpx; margin-top: 10rpx"
+          >
+            <template #default="{ current }">
+              <span class="custom-count-down">{{ current.days }}</span>
+              <span class="custom-count-down-colon">:</span>
+              <span class="custom-count-down">{{ current.hours }}</span>
+              <span class="custom-count-down-colon">:</span>
+              <span class="custom-count-down">{{ current.minutes }}</span>
+            </template>
+          </wd-count-down>
+        </view>
+      </view>
+    </view>
     <!--详情-->
     <view class="detail">
       <view class="detail-title">{{ dataDetails.prod.prodName }}</view>
@@ -127,6 +167,8 @@ const storeList = ref([
   { img: '/static/assistingAgriculture/detail/img8.png', text: '客服' },
   { img: '/static/assistingAgriculture/detail/img6.png', text: '购物车' },
 ]);
+const format = ref('DD:HH:mm');
+const time = ref('');
 let prodId;
 const dataDetails = ref({});
 const commentData = ref({});
@@ -143,12 +185,29 @@ function handleClick(e) {
 }
 function jumpPjPgae() {
   xma.navigateTo({
-    url: `/pages/assistingAgriculture/detail/comment?shopId=${dataDetails.value.prod.shopId}`,
+    url: `/pages/assistingAgriculture/detail/comment?shopId=${dataDetails.value.prod.shopId}&prodId=${dataDetails.value.prodPresale.prodId}`,
   });
 }
 function onChange(e) {
   console.log(e);
 }
+const currentTime = ref(Date.now()); // 当前时间
+
+// 每隔一秒更新当前时间
+setInterval(() => {
+  currentTime.value = Date.now();
+}, 1000);
+
+// 计算属性：剩余时间
+const timeLeft = computed(() => {
+  if (dataDetails.value.prodPresale && dataDetails.value.prodPresale.presaleEndTime) {
+    const endTime = new Date(dataDetails.value.prodPresale.presaleEndTime).getTime();
+    const timeDiff = endTime - currentTime.value;
+    return timeDiff > 0 ? timeDiff : 0;
+  }
+  return 0;
+});
+
 // 获取商品详情
 const getProdDetailFn = () => {
   getProdDetail(prodId).then((res) => {
@@ -189,6 +248,7 @@ const addOrderFn = () => {
       duration: 1500,
       icon: 'none',
     });
+    getshoppingCartListFn();
   });
 };
 // 获取购物车列表
@@ -284,7 +344,6 @@ page {
   border-radius: 16rpx;
   background: #ffffff;
   position: relative;
-  top: 10px;
 }
 .detail-title {
   width: 277 * 2rpx;
@@ -311,8 +370,8 @@ page {
   font-variation-settings: 'opsz' auto;
   font-feature-settings: 'kern' on;
   color: #abaaaa;
-  padding-top: 10rpx;
   padding-left: 20rpx;
+  padding-bottom: 20rpx;
 }
 .share-img {
   float: right;
@@ -340,7 +399,7 @@ page {
   height: 88rpx;
   border-radius: 16rpx;
   background: #ffffff;
-  margin-top: 30rpx;
+  margin-top: 10rpx;
 }
 .evaluate {
   display: flex;
@@ -393,7 +452,9 @@ page {
   padding-bottom: 120rpx;
   .content {
     margin-top: 30rpx;
+    padding: 20rpx;
     .desc {
+      padding-bottom: 20rpx;
       img {
         width: 100%;
       }
@@ -456,4 +517,36 @@ page {
   margin-top: -90rpx;
   margin-left: 400rpx;
 }
+.countDown {
+  height: 122rpx;
+}
+.count-info {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20rpx 30rpx;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 20px;
+}
+.custom-count-down {
+  display: inline-block;
+  width: 44rpx;
+  color: #fa5151;
+  font-size: 24rpx;
+  text-align: center;
+  background-color: #ffffff;
+  border-radius: 4rpx;
+}
+
+.custom-count-down-colon {
+  display: inline-block;
+  margin: 0 8rpx;
+  color: #ffffff;
+}
 </style>