更改购物车sku

src/apis/model/order.model.ts

@@ -275,6 +275,11 @@ export interface OrderCreateShoppingModel {
     cart_id: string
 }
 
+export interface ProductSkuModel {
+    cart_id: string,
+    unique : string
+}
+
 export interface OrderCheckModel {
     order_price: string
     total_price: string

src/apis/order.api.ts

@@ -2,7 +2,7 @@ import {defHttp} from "~/utils/http"
 
 import type {
     IntegralOrderCreateModel, OrderCheckModel, OrderCreateModel,
-    OrderCreateShoppingModel, OrderListDataModel, OrderListObligationResult, OrderListResult, OrderQuantityModel
+    OrderCreateShoppingModel, ProductSkuModel, OrderListDataModel, OrderListObligationResult, OrderListResult, OrderQuantityModel
 } from "~/apis/model/order.model"
 import type {ThirdOrderResult} from "~/apis/model/third-order.model";
 import type {CommentProductRequest} from "~/apis/model/comment-product";
@@ -33,6 +33,8 @@ enum API {
     ORDER_CHECK = '/api/order/check',
     // 修改购物车数量
     USER_CART_CHANGE = '/api/user/cart/change',
+    // 修改购物车商品的sku属性
+    CHANGE_PRODUCT_SKU = '/api/user/cart/changeUnique',
     // 创建订单 | 积分创建订单
     ORDER_CREATE = '/api/order/create',
     // 获取支付宝路径
@@ -206,6 +208,18 @@ export function createShopping(params: {
     })
 }
 
+/**
+ * 改变购物车商品sku
+ */
+export function changeProdoctSku(cart_id:string,unique:string): Promise<ProductSkuModel> {
+    console.log(unique,'order的api接收的unique')
+    return defHttp.post({
+        url:API.CHANGE_PRODUCT_SKU + `/${cart_id}?unique=${unique}`,
+        data:{
+            unique
+        }
+    })
+}
 
 /**
  * 选择订单商品

src/pages/order_addcart/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import {getRecommendList} from "~/apis/merchant";
+import {getRecommendList ,getProductDetail} from "~/apis/merchant";
 import MerchantProductCard from "~/pages/store/home/components/MerchantProductCard.vue";
-import {deleteCartItem, getCartCount, getCartList} from "~/apis/user";
+import {deleteCartItem, getCartCount, getCartList,xcxBanding} from "~/apis/user";
 import type {ShoppingResult} from "~/apis/model/shopping.model";
 import FPrice from "~/components/FPrice/FPrice.vue";
 import FButton from "~/components/FButton/FButton.vue";
@@ -13,11 +13,13 @@ import {
   TaobaoProductThirdPartyWaresModel, VipProductModel
 } from "~/apis/model/product.model";
 import {DcProductModel} from "~/apis/model/dacang.model";
+import {createShopping , changeProdoctSku} from "~/apis/order.api";
 import {encodeBase64} from "~/utils/http/helper";
 import {CDN_URL} from "~/config/app";
 import {uniq} from "lodash-es";
 import {cartChange} from "~/apis/order.api";
 import type CXBBackTop from "~/components/CXBBackTop/CXBBackTop.vue";
+import CXBSkuPopup from "~/components/CXBSkuPopup/CXBSkuPopup.vue";
 const gouwucheImage = CDN_URL + '/static/assets/gouwuche.png'
 const like_adorn_220628Image = CDN_URL + '/static/assets/like_adorn_220628.png'
 const pageStore = usePageStoreWidthOut()
@@ -36,11 +38,73 @@ const state = reactive({
   selectAllIndeterminate: false,
 
   cart_id: [],
+  changeSkuCart_id:'0',
   isManage: true,
 
   currentType: '',
+
+  isShowSku: false,
+  cartNum: 1,
+  currentSku: {},
 })
 
+const detail: any = ref(null)
+
+
+function onSelectedSku(item) {
+  state.currentSku = item
+}
+
+function handleCreateShopping() {
+  // console.log(state.flag)
+  console.log(state.currentSku.unique,'切换sku展示的商品',state)
+  changeProdoctSku(
+    // product_attr_unique: JSON.stringify(state.currentSku),
+    // detail.value.unique
+    state.changeSkuCart_id,
+    state.currentSku.unique
+  ).then(res => {
+    console.log(res)
+    // if (res.cart_id) {
+    //   // console.log(state.flag)
+    //   if (state.flag == '1' || state.flag == '3') {
+    //     uni.navigateTo({
+    //       url: `/pages/order-confirm/index?cartId=${res.cart_id}&type=${state.flag}&product_id=${detail.value.product_id}`
+    //     })
+    //   } else {
+    //     uni.$emit('cart-reload')
+
+    //     uni.showToast({
+    //       title: '添加购物车成功',
+    //       icon: 'none'
+    //     })
+    //     loadCartCount()
+    //     state.isShowSku = false
+    //   }
+    // }
+    // if(res.status === 200){
+    //   state.isShowSku = false
+    // }
+    state.isShowSku = false
+    uni.$on('cart-reload', () => {
+      // console.log('新商品添加...')
+      state.cart_id = []
+      loadCartList()
+    })
+
+    state.cart_id = []
+    loadCartList()
+  })
+}
+
+function handleCountChange(val) {
+  // console.log(val)
+  // detail.value.
+  // if (val > 0) {
+    state.cartNum = val
+  // }
+}
+
 // 距离顶部距离
 let Scroll_X = ref(0)
 
@@ -440,23 +504,58 @@ onPageScroll((page) => {
     headerClass.value = ''
   }
 })
-const changeSku = ref(false)
-const openTestLog = ()=>{
+const openTestLog1 = (a)=>{
+  console.log('商品的id',a.product_id)
   console.log('测试点击sku，多规模');
-  changeSku.value = true
+  state.isShowSku = true
   
 }
+
+function openTestLog(element) {
+  state.isShowSku = true
+  state.changeSkuCart_id = element.cart_id
+console.log('用户点击sku,展示商品id和购物车id',element.product_id,element.cart_id)
+getProductDetail(element.product_id).then(res => {
+  console.log(res.sku,'点击sku，展示返回的res')
+  detail.value = res
+  // console.log(detail.value,'点击sku获取的商品信息，存储的detail')
+  state.shareImage = detail.value.image
+  if (res && res.mer_id && res.mer_id === '148') {
+    if (detail.value && detail.value.price ) {
+      detail.value.price = detail.value.price * 30
+    }
+  }
+  state.isRelation = res.isRelation
+  if (res.merchant_type == 2) {
+    xcxBanding({
+      mer_id: res.mer_id,
+      share_id: state.shareId
+    }).then(res => {
+      console.info(res)
+    })
+  }
+
+  // if (detail.value.mer_id === '148') {
+  // }
+  uni.hideLoading()
+}).catch(error => {
+  // console.log(error)
+  uni.showToast({
+    icon: "none",
+    title: error
+  }).then( () => {
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 500)
+  })
+})
+}
 const closeTestLog = ()=>{
   console.log('测试点击sku，多规模');
-  changeSku.value = false
 
 }
 </script>
 <template>
-  <div v-if="changeSku" style="width: 100%; height: 100%; background-color: skyblue; margin-top: 100px;">
-    <p>sku信息</p>
-    <button @click="closeTestLog">关闭</button>
-  </div>
   <div class="">
     <div
         v-if="hasShopping"
@@ -529,8 +628,8 @@ const closeTestLog = ()=>{
                   class="text-overflow line-clamp-2 text-xs">{{ goodItem.product.store_name }}</div>
               <div class="flex flex-col justify-start gap-1">
                 <div
-                    class="text-[10px] text-gray min-w-5  p-1  items-center flex" @click="openTestLog">
-                  {{ goodItem.productAttr.sku }}
+                    class="text-[10px] text-gray min-w-5  p-1  items-center flex skushadow" v-if="goodItem.productAttr.sku" @click="openTestLog(goodItem)">
+                  {{ goodItem.productAttr.sku +' V'}}
                 </div>
                 <div class="flex">
                   <CXBYaojinTag :amount="goodItem.yanglao"/>
@@ -584,7 +683,13 @@ const closeTestLog = ()=>{
       </div>
     </div>
   </div>
-
+  <CXBSkuPopup 
+  v-model:show="state.isShowSku"
+      :detail="detail"
+      @selected:item="onSelectedSku"
+      @submit="handleCreateShopping"
+      @count-change="handleCountChange"
+  />
   <div v-if="hasShopping"
        class="fixed bottom-0 w-full z-3">
     <div class="bg-white h-10 flex justify-between" v-if="shopping && shopping.list">
@@ -618,6 +723,10 @@ const closeTestLog = ()=>{
 page {
   background-color: #f8f8f8;
 }
+.skushadow{
+  background-color: rgb(240, 240, 240);
+  border-radius: 10px;
+}
 </style>
 <route lang="yaml">
 style: