h5-colexiu/src/views/cart/index.tsx

import { defineComponent, ref } from 'vue'
import ColHeader from '@/components/col-header'
import styles from './index.module.less'
import {
  Checkbox,
  SubmitBar,
  Card,
  Stepper,
  CheckboxGroup,
  Dialog,
  Toast,
  Image
} from 'vant'
import request from '@/helpers/request'
import { cartConfirm, formateAttr } from './cart'
import ColResult from '@/components/col-result'
import { moneyFormat } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'
import iconSellOut from '../shop-mall/images/icon-sell-out.png'
import { getCartCount } from '../shop-mall/shop-mall'

export default defineComponent({
  name: 'cart',
  data() {
    return {
      loading: true,
      dataShow: false,
      isManage: false,
      cartList: [],
      selectItems: []
    }
  },
  computed: {
    checkAll() {
      let selectLen: number = this.selectItems.length
      let cartLen: number = this.cartList.length
      if (!cartLen) return false
      return selectLen === cartLen
    },
    len() {
      let n: number = this.selectItems.length
      return n
    },
    totalPrice() {
      let price = 0
      const items = this.selectItems as any
      this.cartList.forEach((n: any) => {
        if (items.includes(n.id) && typeof n.price === 'number') {
          price += n.price * n.quantity
        }
      })
      return price * 100
    }
  },
  mounted() {
    this.getCartList()
  },
  methods: {
    async getCartList() {
      this.loading = true
      this.cartList = []
      try {
        let { code, data } = await request.get('/api-mall-portal/cart/list')
        if (code === 200) {
          this.cartList = data.map(n => {
            n.stock = n.stock - n.lockStock
            n.stock = n.stock <= 0 ? 0 : n.stock
            return n
          })
        }
      } catch (err) {}
      this.dataShow = true
      this.loading = false
    },
    setCheckAll() {
      const selectItems = [] as any
      if (!this.checkAll) {
        this.cartList.forEach((n: any) => {
          if (!this.isManage) {
            if (n.stock > 0) {
              selectItems.push(n.id)
            }
          } else {
            selectItems.push(n.id)
          }
        })
      }
      this.selectItems = selectItems
    },

    async setCartItem(item: any) {
      try {
        let { code, data } = await request.get(
          '/api-mall-portal/cart/update/quantity',
          {
            params: {
              id: item.id,
              quantity: item.quantity
            }
          }
        )
        item.stock = data
        if (item.quantity > data) {
          item.quantity = data
          setTimeout(() => {
            Toast('库存不足')
          }, 500)
        }
      } catch (err) {}
    },

    onChecked(id: number) {
      const items = this.selectItems as number[]
      if (items.includes(id)) {
        items.splice(items.indexOf(id), 1)
      } else {
        items.push(id)
      }
      this.selectItems = items as []
    },

    async onDeleteCartItem() {
      Dialog.confirm({
        message: '是否确认删除选中的商品?'
      }).then(async () => {
        const ids = this.selectItems.join(',')
        try {
          let { code, data } = await request.post(
            '/api-mall-portal/cart/delete?ids=' + ids
          )
          if (code === 200) {
            this.getCartList()
            this.selectItems = []
            this.isManage = false
            getCartCount()
          }
        } catch (error) {}
      })
    },
    //生成确认订单
    async generateConfirmOrder() {
      this.$router.push({
        path: '/cartConfirm',
        query: {
          cartIds: this.selectItems.join(',')
        }
      })
      // return
      // const ids: number[] = [...this.selectItems]
      // try {
      //   let { code, data } = await request.post(
      //     '/api-mall-portal/order/generateConfirmOrder',
      //     {
      //       params: {
      //         cartIds: ids.join(',')
      //       }
      //     }
      //   )
      //   if (code === 200) {
      //     cartConfirm.calcAmount = data.calcAmount
      //     cartConfirm.cartPromotionItemList = data.cartPromotionItemList
      //     cartConfirm.memberReceiveAddressList = data.memberReceiveAddressList
      //     // alert(JSON.stringify(data.memberReceiveAddressList))
      //     this.$router.push({
      //       path: '/cartConfirm'
      //     })
      //   }
      // } catch (error) {}
    },
    gotoShopMall() {
      postMessage({
        api: 'back'
      })
    }
  },
  render() {
    return (
      <>
        {this.dataShow ? (
          <div>
            <ColHeader
              onClickRight={() => {
                this.isManage = !this.isManage
                if (!this.isManage) {
                  this.cartList.forEach((n: any) => {
                    if (n.stock <= 0) {
                      this.selectItems = this.selectItems.filter(
                        (item: any) => item != n.id
                      )
                    }
                  })
                }
              }}
              v-slots={{
                right: () => (
                  <span style={{ color: '#333', fontSize: '14px' }}>
                    {this.isManage ? '完成' : '管理'}
                  </span>
                )
              }}
            ></ColHeader>
            <div class={styles.cartBox}>
              {this.cartList.length ? (
                <CheckboxGroup v-model={this.selectItems}>
                  {this.cartList.map((item: any) => (
                    <div class={styles.cartItem}>
                      <Checkbox
                        name={item.id}
                        disabled={item.stock <= 0 && !this.isManage}
                      >
                        <Card
                          price={moneyFormat(item.price)}
                          desc={formateAttr(item.productAttr)}
                          title={item.productName}
                          thumb={item.productPic}
                          v-slots={{
                            num: () => (
                              <Stepper
                                longPress={false}
                                v-model={item.quantity}
                                onClick={e => {
                                  e.stopPropagation()
                                }}
                                onChange={() => {
                                  if (item.quantity) {
                                    this.setCartItem(item)
                                  }
                                }}
                                inputWidth="50px"
                                buttonSize="24px"
                                min={1}
                                max={item.stock > 200 ? 200 : item.stock}
                                integer
                              />
                            ),
                            thumb: () => (
                              <div>
                                <Image src={item.productPic}></Image>
                                {item.stock <= 0 && (
                                  <div class={styles.sellOut}>
                                    <Image
                                      src={iconSellOut}
                                      fit="cover"
                                      class={styles.sellOutImg}
                                    />
                                  </div>
                                )}
                              </div>
                            )
                          }}
                        ></Card>
                      </Checkbox>
                    </div>
                  ))}
                </CheckboxGroup>
              ) : null}
              {!this.loading && !this.cartList.length && (
                <ColResult
                  tips="购物车空空如也"
                  buttonText="去商城逛逛"
                  onClick={() => this.gotoShopMall()}
                ></ColResult>
              )}
              <div style={{ height: 'var(--van-submit-bar-height)' }}></div>

              {this.isManage ? (
                <div class={styles.delete}>
                  <SubmitBar
                    buttonText="删除"
                    buttonColor="var(--van-primary)"
                    disabled={this.len === 0}
                    onSubmit={() => this.onDeleteCartItem()}
                  >
                    <Checkbox
                      modelValue={this.checkAll}
                      onClick={value => this.setCheckAll()}
                    >
                      全选
                    </Checkbox>
                  </SubmitBar>
                </div>
              ) : (
                <div class={styles.submit}>
                  <SubmitBar
                    price={this.totalPrice}
                    buttonText={`结算(${this.len})`}
                    buttonColor="var(--van-primary)"
                    disabled={this.len === 0}
                    onSubmit={() => this.generateConfirmOrder()}
                  >
                    <Checkbox
                      modelValue={this.checkAll}
                      onClick={value => this.setCheckAll()}
                    >
                      全选
                    </Checkbox>
                  </SubmitBar>
                </div>
              )}
            </div>
          </div>
        ) : null}
      </>
    )
  }
})