lilishop-ui/buyer/src/components/drawer/Drawer.vue

<template>
  <div class="content-drawer">
    <div v-if="title === '购物车'" class="cart-con">
      <ul>
        <li v-for="(goods,goodsIndex) in cartList" :key="goodsIndex">
          <div>
            <img :src="goods.goodsSku.thumbnail" loading="lazy" decoding="async" width="90" height="90" alt="">
          </div>
          <div>
            <p class="hover-color" @click="linkTo(`/goodsDetail?skuId=${goods.goodsSku.id}&goodsId=${goods.goodsSku.goodsId}`)">{{goods.goodsSku.goodsName}}</p>
            <p class="price">{{ $filters.unitPrice(goods.goodsSku.price, '￥') }}<span>&nbsp; x{{goods.num}}</span></p>
          </div>
          <span class="del hover-color" @click="delGoods(goods.goodsSku.id)">删除</span>
        </li>
      </ul>
      <el-button size="large" class="mt_10" type="primary" @click="linkTo('/cart')" style="width:100%">去购物车结算</el-button>
    </div>

    <div v-else-if="title === '我的订单'" class="order-con">
      <ul>
        <li v-for="(order,orderIndex) in orderList" :key="orderIndex">
          <div class="order-status"><span>{{filterOrderStatus(order.orderStatus)}}</span><span>{{order.createTime}}</span></div>
          <div class="goods-img">
            <img :src="img.image" loading="lazy" decoding="async"
              @click="linkTo(`/goodsDetail?skuId=${img.skuId}&goodsId=${img.goodsId}`)"
              v-for="(img,imgIndex) in order.orderItems"
              :key="imgIndex" width="40" height="40" alt="">
          </div>
          <div class="order-handle"><span>{{ $filters.unitPrice(order.flowPrice, "￥") }}</span><span class="hover-color" @click="linkTo(`/home/OrderDetail?sn=${order.sn}`)">查看订单</span></div>
        </li>
      </ul>
      <el-button type="primary" @click="linkTo('/home/MyOrder')" style="width:100%">查看全部订单</el-button>
    </div>

    <div v-else-if="title === '优惠券'" class="coupon-con">
      <ul class="coupon-list">
          <li v-for="(coupon, index) in couponList" class="coupon-item" :key="index">
            <div class="c-left">
              <div>
                <span v-if="coupon.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{ $filters.unitPrice(coupon.price) }}</span></span>
                <span v-if="coupon.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{coupon.couponDiscount}}</span>折</span>
                <span class="describe">{{ coupon.consumeThreshold > 0 ? '满' + coupon.consumeThreshold + '元可用' : '无门槛使用' }}</span>
              </div>
              <p>使用范围：{{useScope(coupon.scopeType, coupon.storeName)}}</p>
              <p>有效期：{{coupon.endTime}}</p>
            </div>
            <b></b>
            <a class="c-right" @click="receive(coupon)">立即领取</a>
            <i class="circle-top"></i>
            <i class="circle-bottom"></i>
          </li>
        </ul>
    </div>
    <div v-else-if="title === '我的足迹'" class="tracks-con">
      <ul>
        <li v-for="(track,trackIndex) in tracksList" :key="trackIndex">
          <img :src="track.thumbnail" loading="lazy" decoding="async" :alt="track.thumbnail" @click="linkTo(`/goodsDetail?skuId=${track.id}&goodsId=${track.goodsId}`)" width="100" height="100">
          <div @click="addToCart(track.id)">加入购物车</div>
          <p class="global_color">{{ $filters.unitPrice(track.price, '￥') }}</p>
        </li>
      </ul>
      <div class="hover-color" style="text-align:center;" @click="linkTo('/home/MyTracks')">查看更多>></div>
    </div>
    <div v-else-if="title === '我的收藏'" class="collect-con">
      <ul>
        <li v-for="(collect,collectIndex) in collectList" :key="collectIndex">
          <img :src="collect.image" loading="lazy" decoding="async" :alt="collect.image" @click="linkTo(`/goodsDetail?skuId=${collect.skuId}&goodsId=${collect.goodsId}`)" width="100" height="100">
          <div @click="addToCart(collect.skuId)">加入购物车</div>
          <span class="del-icon" @click.stop="cancelCollect(collect.skuId)">
            <el-icon><Delete /></el-icon>
          </span>
          <p class="global_color">{{ $filters.unitPrice(collect.price, '￥') }}</p>
        </li>
      </ul>
      <div class="hover-color" style="text-align:center;" @click="linkTo('/home/Favorites')">查看更多>></div>
    </div>
    <el-skeleton v-if="loading" fix></el-skeleton>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Message, Modal } from "@/utils/message";
import { Delete } from '@element-plus/icons-vue';
import {cartGoodsAll, delCartGoods, addCartGoods, cartCount} from '@/api/cart.js'
import { getOrderList as fetchOrderList } from '@/api/order';
import {couponList as fetchCouponList, receiveCoupon, tracksList as fetchTracksList, collectList as fetchCollectList, cancelCollect as apiCancelCollect} from '@/api/member.js'
import storage from '@/plugins/storage.js'
import { useAppStore } from '@/stores/app'

defineOptions({ name: 'Drawer' })

const props = defineProps({
  title: {
    default: '',
    type: String
  }
})

const router = useRouter()
const appStore = useAppStore()

const loading = ref(false) // 控制spin显隐
const cartList = ref([]) // 购物车列表
const couponList = ref([]) // 优惠券列表
const orderList = ref([]) // 订单列表
const collectList = ref([]) // 收藏列表
const tracksList = ref([]) // 足迹列表
const orderStatusList = ref([ // 订单状态
  {
    name: '未付款',
    status: 'UNPAID'
  },
  {
    name: '已付款',
    status: 'PAID'
  },
  {
    name: '待发货',
    status: 'UNDELIVERED'
  },
  {
    name: '已发货',
    status: 'DELIVERED'
  },
  {
    name: '已完成',
    status: 'COMPLETED'
  },
  {
    name: '待核验',
    status: 'TAKE'
  },
  {
    name: '已取消',
    status: 'CANCELLED'
  }
])

watch(() => props.title, (val) => {
  switch (val) {
    case '购物车':
      getCartList()
      break;
    case '我的订单':
      getOrderList()
      break;
    case '我的足迹':
      getTracksList()
      break;
    case '优惠券':
      getCouponList()
      break;
    case '我的收藏':
      getCollectList()
      break;
  }
})

function getCartList () { // 获取购物车列表
  loading.value = true
  cartGoodsAll().then(res => {
    loading.value = false
    cartList.value = res.result.skuList
  })
}
// 删除商品
function delGoods (id) {
  delCartGoods({ skuIds: id }).then((res) => {
    if (res.success) {
      Message.success('删除成功');
      getCartList();
      cartCount().then(res => {
        appStore.setCartNum(res.result)
        storage.setItem('cartNum', res.result)
      })
    } else {
      Message.error(res.message);
    }
  });
}
function filterOrderStatus (status) { // 获取订单状态中文
  const ob = orderStatusList.value.filter(e => { return e.status === status });
  return ob[0].name
}
function receive (item) { // 领取优惠券
  receiveCoupon(item.id).then(res => {
    if (res.success) {
      Modal.confirm({
        title: '领取优惠券',
        content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
        okText: '我的优惠券',
        cancelText: '立即使用',
        onOk: () => {
          router.push('/home/Coupons')
        },
        onCancel: () => {
          if (item.storeId !== '0') {
            router.push({path: '/merchant', query: {id: item.storeId}})
          } else {
            if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
              router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
            } else {
              router.push({path: '/goodsList'})
            }
          }
        }
      });
    }
  })
}
function useScope (type, storeName) { // 判断优惠券使用范围
  let shop = '平台';
  let goods = '全部商品'
  if (storeName !== 'platform') shop = storeName
  switch (type) {
    case 'ALL':
      goods = '全部商品'
      break;
    case 'PORTION_GOODS':
      goods = '部分商品'
      break;
    case 'PORTION_GOODS_CATEGORY':
      goods = '部分分类商品'
      break;
  }
  return `${shop}${goods}可用`
}
function addToCart (id) { // 添加商品到购物车
  const params = {
    num: 1,
    skuId: id
  }
  loading.value = true;
  addCartGoods(params).then(res => {
    loading.value = false;
    if (res.success) {
      Message.success('商品已成功添加到购物车')
    } else {
      Message.warning(res.message);
    }
  }).catch(() => { loading.value = false });
}
function getCouponList () { // 获取优惠券列表
  // loading.value = true;
  const params = {
    pageNumber: 1,
    pageSize: 10
  }
  fetchCouponList(params).then(res => {
    loading.value = false
    if (res.success) {
      couponList.value = res.result.records
    }
  }).catch(() => { loading.value = false })
}
function getOrderList () { // 获取订单列表
  loading.value = true
  const params = {
    pageNumber: 1,
    pageSize: 10,
    tag: 'ALL'
  }
  fetchOrderList(params).then(res => {
    loading.value = false
    if (res.success) {
      orderList.value = res.result.records;
    }
  });
}
function getCollectList () { // 获取收藏列表
  const params = {
    pageNumber: 1,
    pageSize: 10,
    type: 'GOODS'
  }
  loading.value = true
  fetchCollectList(params).then(res => {
    loading.value = false
    collectList.value = res.result.records
  })
}
function cancelCollect (id) { // 取消商品收藏
  apiCancelCollect('GOODS', id).then(res => {
    if (res.success) {
      Message.success('取消收藏成功')
      getCollectList();
    }
  })
}
function getTracksList () { // 获取足迹列表
  const params = {
    pageNumber: 1,
    pageSize: 20
  }
  loading.value = true
  fetchTracksList(params).then(res => {
    tracksList.value = res.result.records
    loading.value = false
  }).catch(() => { loading.value = false })
}
</script>

<style scoped lang="scss">
@import '../../assets/styles/coupon.scss';
@import './drawer.scss';
.coupon-item{
  overflow: hidden;
  background-color: #fff;
  height: 120px;
  .c-left{
    padding: 15px;
  }
  .c-right{
    width: 38px;
    padding: 13px;
    font-size: 14px;
  }
  i{
    right: 30px;
    background-color: #eee;
  }
}
</style>