wardrobe/pages/gouwuche/index.vue

<template>
  <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
    <tm-menubars title="购物车列表" :shadow="0" :showback="true"></tm-menubars>
    <view class="zhuti shangpin" v-if="test.length>0">
      <tm-sheet :padding="[0, 0]" class="jiaoxi xiao">
        <view class="" style="width:100%;">
          <tm-checkbox @change="chooseAll" v-model="checked"></tm-checkbox>{{checked?'取消全选':'全选'}}
        </view>
        <view v-for="item in test">
          <tm-checkbox @change="choose" style="float: left;padding:2px !important;margin-top:9%;" v-model="item.checked"
            label=""></tm-checkbox>
          <tm-cartCellListFood @change="shuliangjia(item)" v-on:jian="jian(item)" v-on:jia="jia(item)" class="shuliang"
            :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy">
          </tm-cartCellListFood>
        </view>
      </tm-sheet>
    </view>
    <view class="dibu">
      <tm-listitem class="liebiao" value="免费" :round="24" :shadow="12" title="邮费" :show-right-icon="false">
      </tm-listitem>
      <tm-listitem class="liebiao jiageList" :value="'￥'+zongjia" :round="24" :shadow="12" title="价格"
        :show-right-icon="false"></tm-listitem>
      <view class="text-align-center">
        <!-- <tm-button theme="red" @click="qingkong()" :round="24" class="mt-50 logincla">清空</tm-button> -->

        <tm-button theme="red" @click="shanchu" :round="24" class="mt-50 logincla">删除</tm-button>
        <tm-button theme="primary" :round="24" class="mt-50 logincla" @click="goPay">立即付款</tm-button>
      </view>
    </view>
    <!-- 弹出层消息 -->
    <tm-message ref="toast"></tm-message>
  </view>
</template>
<script>
  import {
    myRequest
  } from '@/api/request.js'
  export default {
    data() {
      return {
        zongjia: 0,
        test: [],
        typeclick: 2, //1加入购物车，2购物车
        // 全选状态
        checked: false,
        // 数量默认为1
        number: 1,
        // 是否全选
        isAll: true
      };
    },
    onLoad() {

    },
    created() {
      if (!uni.getStorageSync("token")) {
        uni.navigateTo({
          url: "/pages/login/index",
        })
      }
      this.sys = uni.getSystemInfoSync();
      this.getList()
    },
    methods: {
      // 全选
      chooseAll() {
        if (this.checked) {
          this.test.forEach(item => {
            item.checked = true
          })
        } else {
          if (this.isAll) {
            this.checked = false
          } else {
            this.test.forEach(item => {
              item.checked = false
            })
          }

        }
        this.jiage()
      },
      // 单选
      choose() {
        let status = []
        this.test.forEach(item => {
          status.push(item.checked)
        })
        // console.log(status, '单选状态数组');
        if (status.includes(false)) {
          this.checked = false;
          this.isAll = true;
        } else {
          this.checked = true;
          this.isAll = false;
        }
        this.jiage()
      },

      // 清空
      qingkong() {
        let that = this;
        myRequest({
          url: '/api/ShopCart/deleteAllGoods',
          method: 'post',
          data: {}
        }).then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data, '33');
            that.$refs.toast.show({
              model: 'success',
              label: res.data.msg
            })
            this.getList()
          } else {
            that.$refs.toast.show({
              model: 'error',
              label: res.data.msg
            })
          }
        })
      },
      goPay() {
        var that = this,
          data = this.test,
          goods = [],
          gw_id = [];
        for (let i = 0; i < data.length; i++) {
          if (data[i].checked) {
            console.log(that.zongjia, 'ss');
            goods.push({
              order_remark: '',
              order_money: data[i].buy * data[i].price,
              pay_money: data[i].buy * data[i].price,
              buy_num: data[i].buy,
              goods_id: data[i].goods_id,
            })
            gw_id.push(data[i].id)
            console.log(goods, gw_id, '下单数据');
          }
        }
        if (goods.length == 0) {
          that.$refs.toast.show({
            model: 'warn',
            label: '请选择商品'
          })
          return
        } else {
          myRequest({
            url: "/api/Order/addOrder",
            method: 'post',
            data: {
              gw_id: gw_id,
              good: goods
            }
          }).then(res => {
            if (res.data.code == 200) {
              that.$refs.toast.show({
                model: 'success',
                label: res.data.msg
              })
              this.getList()
            } else {
              that.$refs.toast.show({
                model: 'error',
                label: res.data.msg
              })
            }
          })
        }
      },
      shanchu() {
        var that = this,
          data = this.test,
          ids = [];
        for (let i = 0; i < data.length; i++) {
          if (data[i].checked) {
            ids.push(data[i].id)
            console.log(ids);
          }
        }
        if (ids.length == data.length) {
          console.log(ids.length, data.length);
          this.checked = true;
        }
        console.log(data, '数据');
        if (ids.length == 0) {
          that.$refs.toast.show({
            model: 'warn',
            label: '请选择商品'
          })
          return
        }
        myRequest({
          url: "/api/ShopCart/deleteOneGoods",
          method: 'post',
          data: {
            id: ids
          }
        }).then(res => {
          if (res.data.code == 200) {
            that.$refs.toast.show({
              model: 'success',
              label: res.data.msg
            })
            this.getList()
          } else {
            that.$refs.toast.show({
              model: 'error',
              label: res.data.msg
            })
          }
        })
      },
      // 按钮减
      jian() {
        this.number = -1;
      },
      // 按钮加
      jia() {
        this.number = 1;
      },

      // 数量增减
      shuliangjia(num) {
        var that = this;
        myRequest({
          url: "/api/ShopCart/addShopCart",
          method: 'post',
          data: {
            goods_id: num.goods_id,
            goods_num: that.number
          }
        }).then(res => {
          if (res.data.code == 200) {} else {
            that.$refs.toast.show({
              model: 'error',
              label: res.data.msg
            })
          }
        })
        this.jiage();
      },

      // 总价
      jiage() {
        var data = this.test,
          jiage = 0;
        for (let i = 0; i < data.length; i++) {
          if (data[i].checked) {
            var danjia = JSON.parse(data[i].price);
            var shuliang = data[i].buy;
            jiage = jiage + (danjia * shuliang);
          }
        }
        this.zongjia = jiage;
      },
      // /获取购物车列表
      getList() {
        var that = this;
        myRequest({
          url: "/api/ShopCart/shopCartList",
          method: 'post',
          data: {}
        }).then(res => {
          if (res.data.code == 200) {
            that.test = [];
            for (let i = 0; i < res.data.data.length; i++) {
              var obj = {
                img: res.data.data[i].goods_image,
                title: res.data.data[i].goods_name,
                // label: '黑色 - 6518/320',
                // size:'S',
                price: res.data.data[i].goods_price,
                id: res.data.data[i].id,
                buy: res.data.data[i].goods_num,
                itemId: res.data.data[i].id,
                checked: false,
                goods_id: res.data.data[i].goods_id
              };
              that.test.push(obj)
            }
            that.jiage()
          } else {
            that.test = [];
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  /deep/ .tm-menubars .body {
    background-color: #1b1b1b !important;
  }

  /deep/ .jiaoxi {
    margin: 0 !important;
    padding: 8px !important;
    margin-bottom: 200px !important;
  }

  /deep/ .shangpin .white.bk {
    background-color: #1b1b1b !important;
  }

  /deep/ .shangpin .tm-cartCellListFood {
    padding: 0px 0px 15px 0px !important;
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #303030;
  }

  /deep/ .shangpin .border-t-1.bk {
    border-top: 1px solid #1b1b1b !important;
  }

  /deep/ .shangpin .title {
    color: white !important;
  }

  /deep/ .shangpin .text-red {
    color: white !important;
  }

  /deep/ .shangpin .round-3 {
    width: 90px !important;
    height: 90px !important;
  }

  /deep/ .shangpin .tm-cartCellListFood-img {
    width: 90px !important;
    height: 90px !important;
  }

  /deep/ .shuliang .text-size-n {
    color: white !important;
  }

  .dibu {
    background: #0D0D0D;
    position: fixed;
    bottom: 0px;
    width: 100%;
  }

  /deep/ .liebiao .grey-darken-4.bk {
    background: #0D0D0D !important;
    padding: 0px;
    margin: 0px;
    width: 100%;
    border-radius: 0px !important;
  }

  .logincla {
    width: 40%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  /deep/ .jiageList .d-inline-block {
    font-size: 18px !important;
    color: white !important;
  }
</style>