cxb-minapp-vue3/src/pages/order_addcart/index.vue

<script lang="ts" setup>
import {getRecommendList} from "~/apis/merchant";
import MerchantProductCard from "~/pages/store/home/components/MerchantProductCard.vue";
import {deleteCartItem, getCartCount, getCartList} 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";
import CXBYaojinTag from "~/components/CXBYaojinTag/CXBYaojinTag.vue";
import {
  DyProductModel, IProductDetail,
  JdProductModel,
  SuNingProductModel,
  TaobaoProductThirdPartyWaresModel, VipProductModel
} from "~/apis/model/product.model";
import {DcProductModel} from "~/apis/model/dacang.model";
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";
const gouwucheImage = CDN_URL + '/static/assets/gouwuche.png'
const like_adorn_220628Image = CDN_URL + '/static/assets/like_adorn_220628.png'
const pageStore = usePageStoreWidthOut()
const userStore = useUserStore()

const state = reactive({
  recommendList: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
  totalPage: 0,


  totalCartCount: 0,
  totalPrice: 0,
  selectAllIndeterminate: false,

  cart_id: [],
  isManage: true,

  currentType: '',
})

// 距离顶部距离
let Scroll_X = ref(0)

const shopping = ref<ShoppingResult>()

onBeforeMount(() => {
  if (!userStore.uid) {
    return uni.navigateTo({
      url: '/user/login/index'
    })
  }
})
onLoad((options) => {
  uni.$on('cart-reload', () => {
    // console.log('新商品添加...')
    state.cart_id = []
    loadCartList()
  })

  state.cart_id = []
  loadCartList()
})
onShow(() => {
  // pageStore.setPageConfig({
  //   orderBack: {
  //     type: 'tab',
  //     url:  '/pages/order_addcart/index'
  //   }
  // })
  if (!state.isManage) {
    state.isManage = true
  }
  loadCartCount()
  loadList('reload')
})
function loadList(action: 'page' | 'reload', callback?: (items) => void) {
  const params = {
    page: state.currentPage,
    limit: state.pageSize
  }

  if (action === 'reload') {
    params.page = 1
  }

  getRecommendList({
    ...params
  }).then(res => {
    if (action === 'page') {
      state.recommendList = state.recommendList.concat(res.list)
    }
    if (action === 'reload') {
      // state.list = state.list.concat(res.list)
      state.recommendList = res.list
    }
    state.totalPage = Math.ceil(res.count / state.pageSize);
    state.status = 'more'
    if (callback) {
      callback(res.list)
    }
  })
}

function handleScrollToLower() {
  state.status = 'loading';
  state.currentPage += 1;
  // console.log(state.totalPage)
  if (state.currentPage > state.totalPage) {
    state.status = 'noMore';
  } else {
    setTimeout(() => {
      loadList('page')
    }, 300)
  }
}

onReachBottom(() => {
  handleScrollToLower()

})

// 加载购物车数据
function loadCartList() {
  uni.showLoading({
    title: '加载中',
    icon: 'none'
  })
  // state.totalCartCount = 0
  getCartList().then(res => {
    uni.hideLoading()
    shopping.value = res

    // console.log(res)
    shopping.value?.list.forEach((shopItem, index) => {
      // shopItem.allCheck = true

      shopItem.allCheck = false
      shopItem.indeterminate = false
      shopItem.list.forEach(goodItem => {
        goodItem.check = false
        // state.cart_id.push(goodItem.cart_id)
        // if (goodItem.cart_num === 1) {}
        // state.totalCartCount += Number.parseInt(goodItem.cart_num)
      })
      // console.log(shopItem)

    })
    // cartAllCheck("all")
    // if (shopping.value) {
    //   handleSelectAll()
    // }
  })
}
const hasShopping = computed(() => {
  return shopping.value && shopping.value?.list.length > 0
})

const totalCartInfo = computed(() => {
  let totalPrice = 0
  let goodsNum = 0
  if (shopping.value && shopping.value?.list.length > 0) {
    for (let i = 0; i < shopping.value?.list.length; i++) {
      for (let j = 0; j < shopping.value?.list[i].list.length; j++) {
        let num = Number.parseInt(shopping.value?.list[i].list[j].cart_num);
        let price = Number.parseFloat(shopping.value?.list[i].list[j].productAttr.price)
        totalPrice += (num * price)
        goodsNum += num
      }
    }
  }

  return {
    totalPrice,
    goodsNum
  }
})
const totalMoney = ref(0)
const isAllSelect = ref(false)

function handleGoodsItemCheck(check) {
  cartAllCheck('single')
}

function shopCheck(shopItem) {
  // console.log('shoo...')
  // if (type === 'active') {
  //   console.log('shooo...')
  //   if (shopItem.allCheck) {
  //     console.log(shopItem)
  //     shopItem.list.forEach((good, index) => {
  //       good.check = true
  //     })
  //     // cartAllCheck('single')
  //
  //   } else {
  //     shopItem.list.forEach((good, index) => {
  //       good.check = false
  //     })
  //   }
  // }
}

function handleShopTitleClick(shopItem) {
  if (shopItem.allCheck) {
        shopItem.list.forEach((good, index) => {
          good.check = true
        })
  } else {
        shopItem.list.forEach((good, index) => {
          good.check = false
        })
  }
}
function cartAllCheck(type: 'single' | 'all') {
  let allArr = []
  let totalMoney = 0
  let totalNum = 0
  state.currentType = type
  // 解决下单多次
  state.cart_id = []
  // console.log(type)
  shopping.value?.list.forEach((goods, index) => {
    if (type === 'single') {
      // 如果单选的情况下, 获取已选中的
      let tempArr = goods.list.filter(goodItem => {
        // if (goodItem.check) {
        return goodItem.check === true
        // }
      })
      // console.log(tempArr)
      if (goods.list.length === tempArr.length) {
        goods.allCheck = true
        allArr.push(goods)
        // goods.indeterminate = false
      }
      if (tempArr.length < goods.list.length) {
        goods.allCheck = false
      }

      // if (tempArr.length > 0) {
      //   goods.indeterminate = true
      // }
      if (tempArr.length <= 0) {
        goods.allCheck = false
        // state.currentType = 'all'
        // state.indeterminate = false
      }
    } else {
      goods.list.forEach(goodItem => {
        goodItem.check = isAllSelect.value
      })
      goods.allCheck = isAllSelect.value
      if (goods.allCheck) {
        allArr.push(goods)
      }
    }

    // 总金额｜总数
    goods.list.forEach(goodItem => {
      if (goodItem.check) {
        totalMoney += (goodItem.productAttr.price * goodItem.cart_num)
        totalNum += Number.parseFloat(goodItem.cart_num)
        state.cart_id.push(goodItem.cart_id)
      }
    })
  })

  isAllSelect.value = allArr.length === shopping.value?.list.length
  // state.totalCartCount = totalNum
  state.totalPrice = totalMoney
}


function reTotal() {
  let allArr = []
  let totalMoney = 0
  let totalNum = 0

  shopping.value?.list.forEach((goods, index) => {
    // 总金额｜总数
    goods.list.forEach(goodItem => {
      if (goodItem.check) {
        totalMoney += (goodItem.productAttr.price * goodItem.cart_num)
        // state.cart_id.push(goodItem.cart_id)
      }
      totalNum += Number.parseFloat(goodItem.cart_num)

    })
  })

  // isAllSelect.value = allArr.length === shopping.value?.list.length
  // state.totalCartCount = totalNum
  loadCartCount()
  state.totalPrice = totalMoney
}
function handleSelectAll(checked: boolean) {

  cartAllCheck('all')

}
function loadCartCount() {
  // pageStore.setPageConfig({
  //   orderBack: {
  //     type: 'tab',
  //     url:  '/pages/order_addcart/index'
  //   }
  // })

  getCartCount().then(res => {
    // console.log(res)
    // state.cartCount = res[0].count
    state.totalCartCount = res[0].count

  }).catch(error => {
    // console.log(error)
    if (error === '请登录') {
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/user/login/index'
        })
      }, 500)
    }
  })
}
function handleManageCart() {
  state.isManage = !state.isManage
}

function handleSubmit() {
  // console.log(state.isManage)

  if (!state.isManage) {
    handleDelete()
  } else { // submit
    state.cart_id = uniq(state.cart_id)

    // console.log(state.cart_id)
    if (state.cart_id && state.cart_id.length > 0) {
      uni.navigateTo({
        url: `/pages/order-confirm/index?cartId=${state.cart_id.join(',')}`
      })
    } else {
      return uni.showToast({
        title: '请选择商品',
        icon: 'none'
      })
    }
  }

}

function handleDelete() {
  // const cart_id = <any>[]
  shopping.value?.list.forEach(shopItem => {
    shopItem.list.forEach(goodItem => {
      if (goodItem.check) {
        state.cart_id.push(goodItem.cart_id)
      }
    })
  })
  state.cart_id = uniq(state.cart_id)

  // console.log(cart_id)
  if (state.cart_id.length === 0) {
    return uni.showToast({
      title: '请选择产品',
      icon: "none"
    })
  } else {
    uni.showModal({
      title: '温馨提示',
      content: '确认将宝贝删除?',
      success: (res) => {
        if (res.confirm) {
          deleteCartItem(state.cart_id).then(res => {
            uni.showToast({
              title: '删除成功'
            })
            state.isManage = true
            state.cart_id = []
            state.totalPrice = ''
            loadCartList()
          })

        } else if (res.cancel) {
        }
      }
    })
  }
}


function handleProductItemClick(
    item:
        JdProductModel
        & DcProductModel
        & DyProductModel
        & SuNingProductModel
        & TaobaoProductThirdPartyWaresModel
        & VipProductModel
) {
  // function navigateToDetail(params) {
  //   let otherDetailUrl = `/pages/store/product/other`
  //   return uni.navigateTo({
  //     url: `${otherDetailUrl}?params=${params}`
  //   })
  // }
  // 大仓
  uni.navigateTo({
    url: `/pages/store/product/detail?id=${item.product_id}`
  })
}

function handleNumberChange(num, goodItem) {
  // console.log(goodItem)
  uni.showLoading()
  // console.log(num)
  cartChange(goodItem.cart_id, num).then(res => {
    reTotal()
    uni.hideLoading()
  })
  // console.log(goodItem)
  // console.log(num)
  // const
  // goodItem.productAttr.price = goodItem.productAttr.price * num
  // goodItem.productAttr.price = goodItem.productAttr.price * goodItem.cart_num
}
const headerClass = ref('')
onPageScroll((page) => {
  // console.log('滚轮事件触发了',page.scrollTop.toFixed());
  
  // console.log(page.scrollTop.toFixed(),'距离顶部的距离')
  Scroll_X.value = Number(page.scrollTop.toFixed())
  if (page.scrollTop >= 76 ) {
    headerClass.value = 'bg-white !text-gray-900'
  } else {
    headerClass.value = ''
  }
})
const changeSku = ref(false)
const openTestLog = ()=>{
  console.log('测试点击sku，多规模');
  changeSku.value = true
  
}
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"
        class="bg-white h-10 fixed top-0 w-full z-1 flex justify-end "
    >
      <div class="pr-3">
        <FButton size="small"
                 @click="handleManageCart"
        >
          <div>{{ state.isManage ? '管理' : '完成'}}</div>
        </FButton>
      </div>
    </div>
    <div
        v-if="!hasShopping"
        class="flex flex-col justify-center items-center bg-white rounded-lg gap-3 text-xs py-8">
      <div>
        <image :src="gouwucheImage" mode="widthFix" class="w-20 h-20"></image>
      </div>
      <div>
        暂无商品，去添加喜欢的商品
      </div>
    </div>
    <div v-else class="mt-10">

      <div
          v-if="shopping && shopping.list"
          class="flex flex-col gap-4 p-3"
      >
        <div
            v-for="(shopItem, index) in shopping.list"
            :key="index"
            class="bg-white rounded-lg  "
        >
          <div
              class="f-hairline-bottom flex  items-center font-bold p-3"
          >
            <div @tap.stop="handleShopTitleClick(shopItem)">

            <nut-checkbox v-model="shopItem.allCheck"
                          @change="(checked) => shopCheck( shopItem)"
                          label="全选"
                          class="!text-primary"
            >
              {{ shopItem.mer_name }}
            </nut-checkbox>
            </div>

          </div>
          <div v-for="(goodItem, goodIndex) in shopItem.list"
               :key="goodIndex"
               class="flex f-hairline-bottom p-3 gap-2"
          >
            <div class="flex">
              <nut-checkbox v-model="goodItem.check"
                            @change="handleGoodsItemCheck"
                            label="单选"
                            class="!text-primary"
              ></nut-checkbox>
              <image
                  @click="handleProductItemClick(goodItem)"
                  :src="goodItem.product.image"
                  mode="aspectFill" class="w-18 h-18 rounded"
              ></image>
            </div>

            <div class="flex flex-col gap-1 w-full">
              <div
                  @click="handleProductItemClick(goodItem)"
                  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 }}
                </div>
                <div class="flex">
                  <CXBYaojinTag :amount="goodItem.yanglao"/>

                </div>
              </div>
              <div class="flex  justify-between ">
                <FPrice :price="goodItem.productAttr.price"
                        ex-class="font-bold text-dark"
                />
                <nut-input-number v-model="goodItem.cart_num" @change="(num) => handleNumberChange(num, goodItem)"/>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <CXBBackTop :Scroll_X="Scroll_X"/>
    <div class="pb-12">
      <div class="flex flex-row justify-center items-center gap-3 font-bold text-sm p-3 ">
        <image :src="like_adorn_220628Image" mode="widthFix" class="w-6 h-6"></image>
        <div>
          猜你喜欢
        </div>
        <image :src="like_adorn_220628Image" mode="widthFix" class="w-6 h-6"></image>
      </div>

      <div class="pb-3 px-3" v-if="state.recommendList">
        <grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10px" main-axis-gap="10px">
          <div v-for="(item, index) in state.recommendList"
               :key="index"
               @click="handleProductItemClick(item)"
          >
            <MerchantProductCard :item="item" />

          </div>
        </grid-view>

        <div class=" flex justify-center items-center text-[12px] text-gray-500"
        >
          <div v-if="state.status === 'loading'">
            加载中...
          </div>
          <div v-if="state.status === 'noMore'">
            没有更多了～
          </div>
        </div>

      </div>
    </div>
  </div>

  <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">
      <div class="flex justify-center items-center gap-2 pl-3" @tap.stop="handleSelectAll">
        <nut-checkbox v-model="isAllSelect"
                      label="全选"
                      class="!text-primary"
        >全选
        </nut-checkbox>
        <div class="text-xs text-gray">共 {{ state.totalCartCount }} 件</div>
      </div>

      <div class="flex justify-center items-center gap-2 pr-3">
        <div class="flex text-[12px]" v-if="state.isManage">
          合计：
          <FPrice :price="state.totalPrice"></FPrice>
          <!--          {{totalCartInfo.totalPrice}}-->
        </div>
        <FButton
            @click="handleSubmit"
            size="small"
            :exClass="['rounded-full','!text-[14px]', 'text-white', 'bg-primary', 'w-full']"
        >
          {{ state.isManage? '去结算' : '删除'}}
        </FButton>
      </div>
    </div>
  </div>
</template>
<style>
page {
  background-color: #f8f8f8;
}
</style>
<route lang="yaml">
style:
  navigationBarTitleText: 购物车
  enablePullDownRefresh: false
</route>