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 } from 'vant'
import request from '@/helpers/request'
import { cartConfirm } from './cart'
import item from '@/teacher/music/list/item'
import ColResult from '@/components/col-result'

export default defineComponent({
  name: 'cart',
  data() {
    return {
      isManage: false,
      cartList: [],
      selectItems: []
    }
  },
  computed: {
    checkAll() {
      let selectLen = this.selectItems.length as any
      let cartLen = this.cartList.length as any
      return selectLen === cartLen
    },
    len() {
      let n = this.selectItems.length as any
      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.cartList = []
      try {
        let { code, data } = await request.get('/api-mall-portal/cart/list')
        code === 200 && (this.cartList = data)
      } catch (err) {}
    },
    setCheckAll() {
      const selectItems = [] as any
      if (!this.checkAll) {
        this.cartList.forEach((n: any) => {
          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
            }
          }
        )
      } 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() {
      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
        }
      } catch (error) {}
    },
    //生成确认订单
    async generateConfirmOrder() {
      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
          this.$router.push({
            path: '/cartConfirm'
          })
        }
      } catch (error) {}
    },
    gotoShopMall() {
      this.$router.push({
        path: '/shopMall'
      })
    }
  },
  render() {
    return (
      <>
        {!this.cartList.length ? (
          <ColResult
            tips="购物车空空如也"
            buttonText="去商城逛逛"
            onClick={() => this.gotoShopMall()}
          ></ColResult>
        ) : (
          <>
            <ColHeader
              isBack
              onClickRight={() => (this.isManage = !this.isManage)}
              v-slots={{
                right: () => (
                  <span style={{ color: '#333', fontSize: '14px' }}>
                    {this.isManage ? '完成' : '管理'}
                  </span>
                )
              }}
            ></ColHeader>
            <div class={styles.cartBox}>
              <CheckboxGroup v-model={this.selectItems}>
                {this.cartList.map((item: any) => (
                  <div class={styles.cartItem}>
                    <Checkbox name={item.id}>
                      <Card
                        price={(
                          (item.price * item.quantity * 100) /
                          100
                        ).toFixed(2)}
                        desc={item.productAttr}
                        title={item.productName}
                        thumb={item.productPic}
                        v-slots={{
                          num: () => (
                            <Stepper
                              v-model={item.quantity}
                              onClick={e => {
                                e.stopPropagation()
                              }}
                              onChange={() => this.setCartItem(item)}
                              inputWidth="50px"
                              buttonSize="24px"
                              min={1}
                            />
                          )
                        }}
                      ></Card>
                    </Checkbox>
                  </div>
                ))}
              </CheckboxGroup>

              {this.isManage ? (
                <div class={styles.delete}>
                  <SubmitBar
                    buttonText="删除"
                    buttonColor="var(--van-primary)"
                    disabled={this.totalPrice === 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.totalPrice === 0}
                    onSubmit={() => this.generateConfirmOrder()}
                  >
                    <Checkbox
                      modelValue={this.checkAll}
                      onClick={value => this.setCheckAll()}
                    >
                      全选
                    </Checkbox>
                  </SubmitBar>
                </div>
              )}
            </div>
          </>
        )}

        <div style={{ height: 'var(--van-submit-bar-height)' }}></div>
      </>
    )
  }
})