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, formateAttr } from './cart'
import ColResult from '@/components/col-result'
import { moneyFormat } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'

export default defineComponent({
  name: 'cart',
  data() {
    return {
      dataShow: false,
      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) {}
      this.dataShow = true
    },
    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
            },

            hideLoading: true
          }
        )
      } 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() {
      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)}
              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}>
                        <Card
                          price={moneyFormat(item.price)}
                          desc={formateAttr(item.productAttr)}
                          title={item.productName}
                          thumb={item.productPic}
                          v-slots={{
                            num: () => (
                              <Stepper
                                v-model={item.quantity}
                                onClick={e => {
                                  e.stopPropagation()
                                }}
                                onChange={() => {
                                  if (item.quantity){
                                    this.setCartItem(item)
                                  }
                                }}
                                inputWidth="50px"
                                buttonSize="24px"
                                min={1}
                              />
                            )
                          }}
                        ></Card>
                      </Checkbox>
                    </div>
                  ))}
                </CheckboxGroup>
              ) : (
                <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.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.len === 0}
                    onSubmit={() => this.generateConfirmOrder()}
                  >
                    <Checkbox
                      modelValue={this.checkAll}
                      onClick={value => this.setCheckAll()}
                    >
                      全选
                    </Checkbox>
                  </SubmitBar>
                </div>
              )}
            </div>
          </div>
        ) : null}
      </>
    )
  }
})