优化

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

@@ -1,10 +1,16 @@
 <template>
   <view class='content'>
-    <swiper class='swiper' :interval='1500' :duration='1000'>
-      <swiper-item v-for='(item,index) in bannerList' :key='index'>
-        <image src='/static/images/test_bg.png' />
-      </swiper-item>
-    </swiper>
+    <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='/static/images/test_bg.png' />
+        </swiper-item>
+      </swiper>
+      <view class='indicator'>
+        <text>{{ swiperIndex + 1 }}</text>
+        <text>/{{ bannerList.length }}</text>
+      </view>
+    </view>
 
     <view class='goods-info-view c-flex-column'>
       <view class='c-flex-row'>
@@ -16,7 +22,7 @@
         <text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装</text>
         <view class='share-button c-flex-column'>
           <image :src='assetsUrl("ic_share.png")'></image>
-          <text>分享</text>
+          <button class='btn' plain open-type='share'>分享</button>
         </view>
       </view>
     </view>
@@ -51,13 +57,13 @@
     </view>
 
     <view class='bottom-view c-flex-row'>
-      <view class='small-button-view'>
+      <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'>
+        <view class='small-button-item' @click.stop='goPath("/pages/mine/subs/order/order-list")'>
           <image :src='assetsUrl("ic_goods_order.png")' />
           <text>订单</text>
         </view>
@@ -88,6 +94,15 @@ 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();
@@ -110,14 +125,38 @@ const placeOrder = () => {
   padding-bottom: 200rpx;
 }
 
-.swiper {
-  display: flex;
-  width: 100%;
-  height: 750rpx;
+.swiper-container {
+  position: relative;
 
-  image {
+  .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;
+    }
   }
 }
 
@@ -159,16 +198,19 @@ const placeOrder = () => {
     .share-button {
       align-items: center;
 
-      text {
-        font-size: 24rpx;
-        color: #636566;
-        white-space: nowrap;
-      }
-
       image {
         width: 36rpx;
         height: 32rpx;
       }
+
+      .btn {
+        background: #00000000;
+        font-size: 24rpx;
+        color: #636566;
+        white-space: nowrap;
+        padding: 0;
+        border: none !important;
+      }
     }
   }
 }