团购券详情

src/pages/common/groupbuy/detail.vue

@@ -1,11 +1,515 @@
 <template>
+  <view class='content'>
+    <view class='swiper-container'>
+      <swiper class='swiper' :interval='1500' :duration='1000' @change='swiperChange'>
+        <swiper-item v-for='(item,index) in bannerList' :key='index'>
+          <image :src='assetsUrl("test_bg.png")' />
+        </swiper-item>
+      </swiper>
+      <view class='indicator'>
+        <text>{{ swiperIndex + 1 }}</text>
+        <text>/{{ bannerList.length }}</text>
+      </view>
+    </view>
+    <view class='countdown c-flex-row'>
+      <view class='super-second-kill'>
+        超级\n秒杀
+      </view>
+      <view class='price c-flex-column' style='flex: 1'>
+        <text>52</text>
+        <text>￥65</text>
+      </view>
+      <view class='countdown-time c-flex-column'>
+        <view class='c-flex-row'>180天
+          <text class='time'>23</text>
+          :
+          <text class='time'>23</text>
+          :
+          <text class='time'>23</text>
+        </view>
+        <text>距离活动结束仅剩</text>
+      </view>
+    </view>
 
+    <view class='goods-info-view c-flex-column'>
+      <view class='c-flex-row'>
+        <text class='goods-price accent-text-color'>39.89</text>
+        <text>销量2653</text>
+      </view>
+
+      <view class='c-flex-row'>
+        <text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装</text>
+        <view class='share-button c-flex-column'>
+          <image :src='assetsUrl("ic_share.png")'></image>
+          <button class='btn' plain open-type='share'>分享</button>
+        </view>
+      </view>
+    </view>
+
+    <view class='goods-sku-view c-flex-column'>
+      <view class='c-flex-row' @click.stop='showSkuDialog'>
+        <text>选择</text>
+        <text>规格 颜色/尺码</text>
+        <image :src='assetsUrl("ic_arrow_right_gray.png")' />
+        <text>共1种颜色可选</text>
+      </view>
+      <view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx' />
+      <view class='c-flex-row' @click.stop='showSkuDialog'>
+        <text>参数</text>
+        <text>品牌 风格 季节 款号</text>
+        <image :src='assetsUrl("ic_arrow_right_gray.png")' />
+      </view>
+    </view>
+
+    <view class='recommend-view c-flex-column'>
+      <text>浏览此商品的客户还浏览了</text>
+      <scroll-view scroll-x>
+        <view style='display: inline-block' v-for='(item, index) in [1, 2, 3, 4]'
+              :key='index'>
+          <view class='recommend-item c-flex-column'>
+            <image :src='assetsUrl("test_bg.png")' />
+            <text>女童夏装套装…</text>
+            <text class='goods-price'>22</text>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <view class='goods-detail c-flex-column'>
+      <text>商品详情</text>
+      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
+      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
+      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
+    </view>
+
+    <view class='bottom-view c-flex-row'>
+      <view class='small-button-view' @click.stop='goBack'>
+        <view class='small-button-item'>
+          <image :src='assetsUrl("ic_goods_store.png")' />
+          <text>商家</text>
+        </view>
+
+        <view class='small-button-item' @click.stop='goPath("/pages/mine/subs/order/order-list")'>
+          <image :src='assetsUrl("ic_goods_order.png")' />
+          <text>订单</text>
+        </view>
+
+        <view class='small-button-item'>
+          <view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
+            <image :src='assetsUrl("ic_goods_shoppingcart.png")' />
+            <text>12</text>
+          </view>
+          <text>购物车</text>
+        </view>
+      </view>
+
+      <view class='primary-button-view c-flex-row'>
+        <view class='add-shoppingcart-button' @click.stop='addShoppingCart'>加入购物车</view>
+        <view class='place-order-button' @click.stop='placeOrder'>立即下单</view>
+      </view>
+    </view>
+  </view>
+  <sku-dialog ref='skuDialogRef' />
 </template>
 
 <script lang='ts' setup>
+import { assetsUrl } from '@/utils/assets';
+import { goPath } from '@/utils';
+import SkuDialog from '@/components/sku-dialog.vue';
 
+const skuDialogRef = ref();
+
+const bannerList = ref([1, 2, 3, 4]);
+const swiperIndex = ref(0);
+
+const swiperChange = (e: any) => {
+  swiperIndex.value = e.detail.current;
+};
+
+const goBack = () => {
+  uni.navigateBack();
+};
+
+const showSkuDialog = () => {
+  skuDialogRef.value.show();
+};
+
+const addShoppingCart = () => {
+  uni.showToast({
+    title: '加入购物车成功',
+    icon: 'none'
+  });
+};
+
+const placeOrder = () => {
+  goPath('/pages/mall/subs/order/order-confirm');
+};
 </script>
 
 <style lang='scss' scoped>
+.content {
+  padding-bottom: 200rpx;
+}
 
+.swiper-container {
+  position: relative;
+
+  .swiper {
+    display: flex;
+    width: 100%;
+    height: 750rpx;
+
+    image {
+      width: 100%;
+      height: 750rpx;
+    }
+  }
+
+  .indicator {
+    background: rgba(1, 1, 1, 0.5);
+    border-radius: 45rpx;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #FFFFFF;
+    position: absolute;
+    right: 20rpx;
+    bottom: 20rpx;
+    padding: 5rpx 25rpx;
+
+    text:nth-of-type(1) {
+      font-size: 30rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 24rpx;
+    }
+  }
+}
+
+.countdown {
+  display: flex;
+  height: 130rpx;
+  position: relative;
+  padding: 15rpx 30rpx;
+  background: #F32B2B;
+  background-image: url("../../../static/images/bg_groupbuy_countdown.png");
+  background-size: 100% 100%;
+
+  .super-second-kill {
+    display: flex;
+    width: 100rpx;
+    height: 100rpx;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 20rpx;
+    border: 1rpx solid #FFFFFF;
+    font-weight: 400;
+    font-size: 36rpx;
+    text-align: center;
+    color: #FFFFFF;
+    margin-right: 23rpx;
+  }
+
+  .price {
+    color: #FFFFFF;
+
+    text:nth-of-type(1) {
+      font-weight: bold;
+      font-size: 55rpx;
+    }
+
+    text:nth-of-type(1):before {
+      content: '¥  ';
+      font-size: 30rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-weight: 400;
+      font-size: 30rpx;
+      text-decoration-line: line-through;
+    }
+  }
+
+  .countdown-time {
+    color: #FFFFFF;
+    align-items: center;
+
+    view:nth-of-type(1) {
+      margin-bottom: 20rpx;
+      align-self: flex-end;
+    }
+
+    .time {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40rpx;
+      height: 40rpx;
+      margin-left: 12rpx;
+      margin-right: 12rpx;
+      background: #FFFFFF;
+      border-radius: 7rpx 7rpx 7rpx 7rpx;
+      color: #F32B2B;
+    }
+
+    .time:nth-of-type(1){
+      margin-left: 18rpx;
+    }
+    .time:nth-of-type(3){
+      margin-right: 0;
+    }
+
+    text:not(.time):nth-of-type(1) {
+      align-self: flex-end;
+    }
+  }
+}
+
+.goods-info-view {
+  background: #FFFFFF;
+  padding: 20rpx 30rpx;
+
+  view:nth-of-type(1) {
+    text:nth-of-type(1) {
+      display: flex;
+      font-size: 40rpx;
+      text-align: center;
+      align-items: flex-end;
+      flex: 1;
+    }
+
+    .goods-price:before {
+      content: "¥";
+      font-size: 30rpx;
+      margin-bottom: 5rpx;
+      margin-right: 5rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+
+  view:nth-of-type(2) {
+    text {
+      font-weight: bold;
+      font-size: 32rpx;
+      color: #333333;
+      margin-right: 10rpx;
+    }
+
+    .share-button {
+      align-items: center;
+
+      image {
+        width: 36rpx;
+        height: 32rpx;
+      }
+
+      .btn {
+        background: #00000000;
+        font-size: 24rpx;
+        color: #636566;
+        white-space: nowrap;
+        padding: 0;
+        border: none !important;
+      }
+    }
+  }
+}
+
+.goods-sku-view {
+  background: #FFFFFF;
+  padding: 0 30rpx;
+  margin-top: 20rpx;
+
+  view:nth-of-type(n+1) {
+    position: relative;
+    align-items: center;
+    height: 105rpx;
+
+    text:nth-of-type(1) {
+      width: 100rpx;
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #999999;
+    }
+
+    text:nth-of-type(2) {
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #333333;
+      flex: 1;
+    }
+
+    image {
+      width: 13rpx;
+      height: 24rpx;
+    }
+
+    text:nth-of-type(3) {
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #999999;
+      position: absolute;
+      top: 80rpx;
+      left: 100rpx;
+    }
+  }
+
+  view:nth-of-type(1) {
+    align-items: flex-start;
+    padding-top: 40rpx;
+  }
+}
+
+.recommend-view {
+  background: #FFFFFF;
+  padding: 20rpx 30rpx;
+  margin-top: 20rpx;
+
+  text {
+    font-weight: bold;
+    font-size: 28rpx;
+    color: #333333;
+  }
+
+  scroll-view {
+    width: 100%;
+    margin-top: 20rpx;
+    white-space: nowrap;
+    height: 300rpx;
+  }
+
+  .recommend-item {
+    margin-right: 20rpx;
+
+    image {
+      width: 200rpx;
+      height: 200rpx;
+      border-radius: 10rpx;
+    }
+
+    text:nth-of-type(1) {
+      font-weight: bold;
+      font-size: 28rpx;
+      color: #333333;
+      margin-top: 20rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-weight: bold;
+      font-size: 28rpx;
+      color: #F32B2B;
+    }
+
+    .goods-price:before {
+      content: "¥";
+      font-size: 28rpx;
+    }
+  }
+}
+
+.bottom-view {
+  background: #FFFFFF;
+  padding: 20rpx 30rpx 78rpx 33rpx;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  .small-button-view {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    justify-content: space-between;
+    margin-right: 35rpx;
+
+    .small-button-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      image {
+        width: 34rpx;
+        height: 34rpx;
+        margin-bottom: 10rpx;
+      }
+
+      text {
+        font-weight: 400;
+        font-size: 20rpx;
+        color: #333333;
+      }
+
+      .shoppingcart-count {
+        display: flex;
+        position: relative;
+
+        text {
+          display: flex;
+          box-sizing: border-box;
+          align-items: center;
+          justify-content: center;
+          position: absolute;
+          top: -15rpx;
+          right: -20rpx;
+          min-width: 35rpx;
+          min-height: 30rpx;
+          background: #F32B2B;
+          color: #FFFFFF;
+          padding: 2rpx;
+          border-radius: 50%;
+          border: 2rpx solid #FFFFFF;
+        }
+      }
+    }
+  }
+
+  .primary-button-view {
+    font-weight: bold;
+    font-size: 30rpx;
+
+    .add-shoppingcart-button {
+      display: flex;
+      width: 224rpx;
+      height: 80rpx;
+      align-items: center;
+      justify-content: center;
+      background: #FFE2E2;
+      color: #F32B2B;
+      border-radius: 40rpx 0 0 40rpx;
+    }
+
+    .place-order-button {
+      display: flex;
+      width: 198rpx;
+      height: 80rpx;
+      align-items: center;
+      justify-content: center;
+      background: #F32B2B;
+      color: #FFFFFF;
+      border-radius: 0 40rpx 40rpx 0;
+    }
+  }
+}
+
+.goods-detail {
+  background: #FFFFFF;
+  margin-top: 20rpx;
+
+  text {
+    margin: 20rpx 30rpx;
+    font-weight: bold;
+    font-size: 30rpx;
+    color: #333333;
+  }
+
+  image {
+    width: 100%;
+  }
+}
 </style>

src/pages/common/groupbuy/index.vue

@@ -7,7 +7,7 @@
 
     <scroll-view class='scroll-view'>
       <view class='c-flex-column' v-for='(item, index) in 10' :key='index'>
-        <view class='item c-flex-row'>
+        <view class='item c-flex-row' @click.stop='goPath("/pages/common/groupbuy/detail")'>
           <image class='goods-image' :src='assetsUrl("test_bg.png")' />
           <view class='c-flex-column' style='flex: 1'>
             <view class='goods-name'>女童夏装套装洋气装短袖阔腿裤短…</view>
@@ -35,6 +35,7 @@
 
 import { assetsUrl } from '@/utils/assets';
 import { getGroupBuyList } from '@/api/groupbuy';
+import { goPath } from '@/utils';
 
 const tabIndex = ref(0);
 
@@ -83,7 +84,7 @@ onLoad((e) => {
   background: #FFFFFF;
 
   .item {
-    padding: 40rpx 30rpx;
+    padding: 20rpx 30rpx 40rpx 30rpx;
     background: #FFFFFF;
     position: relative;
 

src/pages/common/register/index.vue

@@ -53,12 +53,12 @@ const register = () => {
 .content {
   position: relative;
   height: 100vh;
-  background: #F32B2B;
 }
 
 .bg-image {
   position: fixed;
   height: 100vh;
+  width: 100%;
   top: 0;
   left: 0;
   right: 0;
@@ -68,8 +68,9 @@ const register = () => {
 .card-view {
   background: #FFFFFF;
   border-radius: 10rpx;
-  margin: 230px 50rpx 0 50rpx;
+  margin: 0 50rpx;
   padding: 40rpx;
+  top: 600rpx;
   position: relative;
 
   .mobile-view {

src/pages/mall/subs/goods/goods-detail.vue

@@ -56,6 +56,13 @@
       </scroll-view>
     </view>
 
+    <view class='goods-detail c-flex-column'>
+      <text>商品详情</text>
+      <image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
+      <image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
+      <image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
+    </view>
+
     <view class='bottom-view c-flex-row'>
       <view class='small-button-view' @click.stop='goBack'>
         <view class='small-button-item'>
@@ -89,7 +96,7 @@
 <script lang='ts' setup>
 import { assetsUrl } from '@/utils/assets';
 import { goPath } from '@/utils';
-import SkuDialog from '../components/sku-dialog.vue';
+import SkuDialog from '@/components/sku-dialog.vue';
 
 const skuDialogRef = ref();
 
@@ -390,4 +397,19 @@ const placeOrder = () => {
     }
   }
 }
+
+.goods-detail {
+  background: #FFFFFF;
+  margin-top: 20rpx;
+  text {
+    margin: 20rpx 30rpx;
+    font-weight: bold;
+    font-size: 30rpx;
+    color: #333333;
+  }
+
+  image {
+    width: 100%;
+  }
+}
 </style>

src/pages/mall/subs/order/order-confirm.vue

@@ -101,7 +101,7 @@
 
 <script lang='ts' setup>
 import { assetsUrl } from '@/utils/assets';
-import PaymentDialog from '../components/payment-dialog.vue';
+import PaymentDialog from '@/components/payment-dialog.vue';
 import CouponDialog from '@/pages/mall/subs/components/coupon-dialog.vue';
 import { goPath } from '@/utils';
 

types/components.d.ts

@@ -9,8 +9,10 @@ declare module 'vue' {
   export interface GlobalComponents {
     OfficialAccountDialog: typeof import('./../src/components/official-account-dialog.vue')['default']
     PageNav: typeof import('./../src/components/page-nav/page-nav.vue')['default']
+    PaymentDialog: typeof import('./../src/components/payment-dialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SkuDialog: typeof import('./../src/components/sku-dialog.vue')['default']
     Tabbar: typeof import('./../src/components/tabbar/tabbar.vue')['default']
   }
 }