商品详情

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

@@ -22,14 +22,14 @@
     </view>
 
     <view class='goods-sku-view c-flex-column'>
-      <view class='c-flex-row'>
+      <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='height: 0.5rpx;margin-left: 100rpx' />
-      <view class='c-flex-row'>
+      <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")' />
@@ -72,24 +72,45 @@
       </view>
 
       <view class='primary-button-view c-flex-row'>
-        <view class='add-shoppingcart-button'>加入购物车</view>
-        <view class='place-order-button'>立即下单</view>
+        <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 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{
+.content {
   padding-bottom: 200rpx;
 }
+
 .swiper {
   display: flex;
   width: 100%;
@@ -283,16 +304,18 @@ const bannerList = ref([1, 2, 3, 4]);
 
         text {
           display: flex;
+          box-sizing: border-box;
           align-items: center;
           justify-content: center;
           position: absolute;
           top: -15rpx;
           right: -20rpx;
-          min-width: 30rpx;
+          min-width: 35rpx;
           min-height: 30rpx;
           background: #F32B2B;
           color: #FFFFFF;
-          border-radius: 15rpx;
+          padding: 2rpx;
+          border-radius: 50%;
           border: 2rpx solid #FFFFFF;
         }
       }