feat(custom): build

src/pages/goods/goods_detail/index.vue

@@ -20,18 +20,31 @@
     <!-- 标题价格 -->
     <view class="card">
       <view class="header">
-        <nut-price
-          size="large"
-          :price="goodInfo.number as number"
-          position="after"
-          :symbol="payType === 'jf' ? '积分' : '元'"
-        />
-        <view class="stock"> 库存剩余:{{ goodInfo.stock }} </view>
+        <view class="price">
+          <nut-price
+            size="normal"
+            :price="goodInfo.number as number"
+            position="after"
+            symbol="元"
+          />
+          <nut-price
+            size="normal"
+            :price="goodInfo.exchange as number"
+            position="after"
+            symbol="积分"
+          />
+        </view>
+
+        <view class="stock"> 库存剩余:{{ goodInfo.stock }}</view>
       </view>
       <view class="title">{{ goodInfo.name }}</view>
       <view class="sub">{{ goodInfo.profile }}</view>
+      <nut-button size="small" type="primary" @click.stop="add_cart(goodInfo)">
+        <template #icon>
+          <Cart2 />
+        </template>
+      </nut-button>
     </view>
-    <nut-cell title="请选择规格: " is-link @click="openSku"></nut-cell>
     <!-- 产品介绍 -->
     <view class="rich-box">
       <view class="title">产品介绍</view>
@@ -44,142 +57,56 @@
     </view>
     <view style="height: 9vh"></view>
     <!-- 底部 -->
-    <view class="bottom-box">
-      <view class="left">
-        <view class="icon" @click="toPage('/pages/index/index')">
-          <Home />
-          <view>首页</view>
-        </view>
-        <!--        <view-->
-        <!--            class="icon"-->
-        <!--            v-if="payType === 'jf'"-->
-        <!--            @click="toPage('/pages/cart/index')"-->
-        <!--        >-->
-        <!--          <Cart/>-->
-        <!--          <view>购物车</view>-->
-        <!--        </view>-->
-        <view class="icon" @click="toPage('/pages/kefu/index', 2)">
-          <My />
-          <view>客服</view>
-        </view>
-      </view>
-      <!-- 占位 -->
-
-      <view style="width: 80%">
-        <!--                <nut-button-->
-        <!--                    v-if="payType === 'jf'"-->
-        <!--                    style="margin-right: 10px"-->
-        <!--                    type="warning"-->
-        <!--                    @click="add_cart()"-->
-        <!--                    >加入购物车-->
-        <!--                </nut-button>-->
-        <nut-button type="primary" block @click="toOrderDetail()"
-          >{{ payType === "jf" ? "立即兑换" : "立即购买" }}
-        </nut-button>
-      </view>
-    </view>
-    <!-- 规格选择 -->
-    <nut-popup
-      position="bottom"
-      overlay-class="overlay"
-      safe-area-inset-bottom
-      closeable
-      round
-      :style="{ zIndex: 1 }"
-      v-model:visible="isSkuShow"
-    >
-      <view class="sku-box">
-        <view>商品规格</view>
-        <nut-cell-group>
-          <nut-cell title="数量:">
-            <template v-slot:link>
-              <nut-input-number
-                v-model="count"
-                @change="addCount"
-                button-size="30"
-              />
-            </template>
-          </nut-cell>
-        </nut-cell-group>
-      </view>
-    </nut-popup>
-    <!-- <nut-sku
-        v-model:visible="isSkuShow"
-        :sku="sku"
-        :goods="goods"
-        @selectSku="selectSku"
-        @clickBtnOperate="clickBtnOperate"
-        @close="close"
-    ></nut-sku> -->
-    <Pay
-      :is-show-pay="isShowPay"
-      :pay-type="payType"
-      v-model:jfInfo="orderData"
-      @closePay="closePay"
-    />
+    <!--  购物车  -->
+    <cart ref="cartRef" :mer-info="mer_info" @update-cart="updateCartNum" />
   </view>
 </template>
 
 <script setup lang="ts">
-const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight;
-import { ref } from "vue";
+import { Ref, ref } from "vue";
 import Taro from "@tarojs/taro";
-import { Home, Left, My } from "@nutui/icons-vue-taro";
-import {
-  createActiveOrder,
-  createOrder,
-  getActiveGoodsDetail,
-  getGoodsDetail,
-} from "@/api/goods";
-import Pay from "@/components/Pay.vue";
+import { Home, Left } from "@nutui/icons-vue-taro";
+import { getActiveGoodsDetail } from "@/api/goods";
+import Cart from "@/components/Cart.vue";
+import { Cart2 } from "@nutui/icons-vue-taro";
+import { nextTick } from "vue";
 
+const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight;
 const BarHeight = ref((statusBarHeight as number) + 7);
 
 const swiperList = ref([]);
 
-const isSkuShow = ref(false);
-
-const isShowPay = ref(false);
-
-// const sku = ref([]);
-
-const payType = ref("");
-
-const orderData = ref([]);
-
-const count = ref(1);
-
 interface GoodInfo {
-  gid?: number;
+  gid?: string;
   name?: string;
   number?: number;
+  exchange?: number;
   cover?: string;
   details?: string;
   sku?: any[];
   stock?: number;
   profile?: string;
+  price?: number;
+  cartNum?: number;
 }
 
 const goodInfo = ref<GoodInfo>({});
 
-Taro.useLoad((options) => {
-  payType.value = options.type === "1" ? "wx" : "jf";
-  get_good_detail(options.gid);
+Taro.useLoad(async (options) => {
+  await get_good_detail(options.gid);
+  mer_info.value = Taro.getStorageSync("mer_info");
+  await nextTick(async () => {
+    await cartRef.value.get_cart_list();
+  });
 });
 
 const get_good_detail = async (gid: string) => {
   try {
-    let res: any;
-    if (payType.value === "jf") {
-      res = await getGoodsDetail({ gid: gid });
-    } else {
-      res = await getActiveGoodsDetail({ gid: gid });
-    }
+    const res = await getActiveGoodsDetail({ gid: gid });
     goodInfo.value = {
       ...res.data.data,
       // details: res.data.data.details.,
     };
-
     swiperList.value = res.data.data.rotation.split(",");
   } catch (e) {
     Taro.showToast({
@@ -189,17 +116,6 @@ const get_good_detail = async (gid: string) => {
   }
 };
 
-const addCount = () => {
-  if (count.value >= (goodInfo.value.stock as number)) {
-    count.value = goodInfo.value.stock as number;
-    Taro.showToast({
-      title: "库存不足",
-      icon: "none",
-    });
-    return;
-  }
-};
-
 const returns = () => {
   Taro.navigateBack({
     delta: 1,
@@ -212,100 +128,36 @@ const goHome = () => {
   });
 };
 
-const openSku = () => {
-  isSkuShow.value = true;
+interface CartItems {
+  bid: string;
+  gid: string;
+  number: number;
+  price: number;
+  cover: string;
+  name: string;
+  exchange: number;
+}
+
+const mer_info = ref<any>({});
+
+const cartRef = ref(null) as Ref;
+
+const add_cart = async (item: any) => {
+  const num = item.cartNum ? Number(item.cartNum) + 1 : 1;
+  await nextTick(async () => {
+    await cartRef.value.add_cart(item, num);
+  });
 };
 
-// const selectSku = () => {};
-// const clickBtnOperate = () => {};
-// const close = () => {};
-// const add_cart = async () => {
-//     if (isSkuShow.value === false) return openSku();
-//     try {
-//         await addCart({ gid: goodInfo.value.gid });
-//         Taro.showToast({
-//             title: "加入购物车成功",
-//             icon: "success",
-//             duration: 2000,
-//         });
-//     } catch (e) {
-//         Taro.showToast({
-//             title: e.msg,
-//             icon: "none",
-//         });
-//     }
-//     isSkuShow.value = false;
-// };
-
-const toOrderDetail = async () => {
-  if (!Taro.getStorageSync("token")) {
-    return Taro.showModal({
-      title: "提示",
-      content: "你还没登录,请先登录",
-      cancelText: "先逛逛",
-      confirmText: "去登录",
-      success: (res) => {
-        if (res.confirm) {
-          Taro.reLaunch({
-            url: "/pages/users/login/index",
-          });
-        }
-      },
-    });
-  }
-  if (isSkuShow.value === false) return openSku();
-  // Taro.navigateTo({
-  //   url: '/pages/goods/order_create/index'
-  // })
-  try {
-    let res: any;
-    if (payType.value === "jf") {
-      res = await createOrder([
-        {
-          gid: goodInfo.value.gid,
-          count: Number(count.value),
-        },
-      ]);
-    } else {
-      res = await createActiveOrder({
-        gid: goodInfo.value.gid,
-        stock: Number(count.value),
-      });
-    }
-
-    orderData.value = res?.data?.data;
-
-    isShowPay.value = true;
-
-    count.value = 1;
-  } catch (e) {
-    Taro.showToast({
-      title: e.msg,
-      icon: "none",
-    });
-  }
-
-  isSkuShow.value = false;
-};
-
-const closePay = (val: boolean) => {
-  isShowPay.value = val;
-  orderData.value = [];
-};
-
-const toPage = (url: string, type: number = 1) => {
-  if (type === 1) {
-    Taro.switchTab({
-      url: url,
+const updateCartNum = (cartItems: CartItems[]) => {
+  if (cartItems.length > 0) {
+    cartItems.forEach((cartItem: CartItems) => {
+      if (goodInfo.value.gid === cartItem.gid) {
+        goodInfo.value.cartNum = cartItem.number;
+      }
     });
   } else {
-    // Taro.navigateTo({
-    //     url: url,
-    // });
-    Taro.showToast({
-      title: "暂未开放",
-      icon: "none",
-    });
+    Reflect.deleteProperty(goodInfo.value, "cartNum");
   }
 };
 </script>
@@ -313,7 +165,6 @@ const toPage = (url: string, type: number = 1) => {
 <style lang="scss">
 page {
   --nut-cell-box-shadow: none;
-  // --nut-cell-padding: 0;
   --nut-cell-title-font: 30px;
 }
 
@@ -357,12 +208,18 @@ page {
 .card {
   padding: 30px;
   background-color: #fff;
+  position: relative;
 
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 
+    .price {
+      display: flex;
+      flex-direction: column;
+    }
+
     .title {
       font-size: 30px;
       font-weight: bold;
@@ -378,6 +235,13 @@ page {
     font-size: 24px;
     color: #999;
   }
+
+  .nut-button {
+    // margin: 10px;
+    position: absolute;
+    right: 40rpx;
+    bottom: 20rpx;
+  }
 }
 
 .rich-box {
@@ -396,12 +260,6 @@ page {
 
   .rich {
     width: 100%;
-
-    // img {
-    //     width: 100%;
-    //     height: auto;
-    //     display: block;
-    // }
   }
 }
 
@@ -447,7 +305,6 @@ page {
       color: #333;
       font-size: 25px;
       width: 100px;
-      // margin-right: 100px;
     }
   }