hotel-tablecloth-uniapp-24-08-29/pages/index/cart.vue

<template>
  <view class="page">
    <navbar/>

    <view class="user">
      <uv-checkbox-group shape="circle" v-model="checkboxValue">
        <uv-swipe-action>
          <view v-for="(item, index) in list.records" :key="index">
            <view style="margin-top: 20rpx;"></view>
            <uv-swipe-action-item :options="options" @click="delCart(item, index)">
              <view class="item">
                <view class="checkbox">
                  <uv-checkbox :name="item.goodsId" activeColor="#FA5A0A" size="40rpx"
                               icon-size="35rpx"></uv-checkbox>
                </view>

                <image class="image"
                       :src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'"
                       mode=""></image>

                <view class="info">
                  <view class="title">
                    <view>{{ item.name }}</view>
                    <view>
                      <uv-number-box v-model="item.num"
                                     @change="e => valChange(item, e)"></uv-number-box>
                    </view>
                  </view>
                  <view class="unit" @click="toggleDropdown(item)">
                    规格：{{ item.title }}
                    <uv-icon name="arrow-down"></uv-icon>
                  </view>
                  <view class="price">
                    ￥
                    <text>{{ item.price }}</text>
                    元
                  </view>
                </view>
              </view>
            </uv-swipe-action-item>
          </view>
        </uv-swipe-action>
      </uv-checkbox-group>

      <view class="action">
        <view class="icon">
          <image src="/static/image/cart/1.png" mode=""></image>
          <view class="num">{{ checkboxValue.length }}</view>
        </view>
        <view class="price">
          <view class="count">
            合计
            <view>
              ￥
              <text>{{ totalPrice }}</text>
            </view>
          </view>
          <view class="text">
            共{{ checkboxValue.length }}件，已享受更低优惠
          </view>
        </view>
        <view class="btn" @click="goCleaning">去结算</view>
      </view>
    </view>

    <!-- 地址弹框 -->
    <uv-popup ref="addressPopup" :round="30">
      <addressList ref="addressList" height="60vh" @select="selectAddress"/>
    </uv-popup>

    <tabber select="3"/>
  </view>
</template>

<script>
import tabber from '@/components/base/tabbar.vue'
import addressList from '@/components/address/addressList.vue'

export default {
  components: {
    tabber,
    addressList,
  },

  data() {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      list: [],
      addressTotal: 0,
      address: {
        name: '请选择联系人',
        addressDetail: ''
      },
      skuList: [],
      editSkuForm: {
        id: '', //购物车id
        goodsId: '', //商品id
        skuId: '', //规格id
      },
      value: 0,
      checkboxValue: [],
      options: [{
        text: '删除',
        style: {
          backgroundColor: '#FA5A0A'
        }
      },],
    }
  },
  computed: {

    totalPrice() {
      if (!this.checkboxValue.length) {
        return 0
      }
      let price = 0
      this.list.records.forEach(n => {
        if (this.checkboxValue.includes(n.id)) {
          price += n.price * n.num
        }
      })
      return price
    },
  },
  onShow() {
    this.getData()
    this.getAddressListA()
  },
  //滚动到屏幕底部
  onReachBottom() {
    if (this.queryParams.pageSize < this.list.total) {
      this.queryParams.pageSize += 10
      this.getData()
    }
  },
  methods: {

    // 修改商品规格弹框
    toggleDropdown(item) {
      this.editSkuForm.id = item.id
      this.editSkuForm.goodsId = item.goodsId
      // 根据商品id获取规格
      this.$api('goodsSku', {
        id: item.goodsId
      }, res => {
        if (res.code == 200) {
          this.skuList = res.result
          // 打开规格下拉框待完善  TODO

        }
      })
    },

    // 规格下拉框选中后的回调
    changeCartProductSku(e) {
      console.log(e, "e");
      this.editSkuForm.skuId = e.aaa //TODO
      return
      this.$api('editSku', this.editSkuForm, res => {
        if (res.code == 200) {
          this.getData()
        }
      })
    },

    // 去结算按钮
    goCleaning() {
      if (this.checkboxValue.length < 1) {
        uni.showToast({
          title: "请勾选商品",
          icon: 'none'
        })
        return
      }
      // 打开地址弹框
      this.$refs.addressPopup.open('bottom')
    },

    // 选择地址
    selectAddress(e) {
      this.address = e
      this.$refs.addressPopup.close()
      this.ordersPay()
    },

    //商品下单
    ordersPay() {
      var self = this
      var deleteCartIds = this.checkboxValue.join(",") //待删除的购物车id

      let data = []
      let records = this.list.records
      for (var i = 0; i < records.length; i++) {
        if (this.checkboxValue.includes(records[i].goodsId)) {
          data.push({
            id: records[i].goodsId, //商品id
            skuId: records[i].skuId, //规格id
            addressId: this.address.id, //地址id
            sku: records[i].title, //规格
            num: records[i].num,
          })
        }
      }

      this.$api('orderCreate', {
        req: JSON.stringify(data)
      }, res => {
        if (res.code == 200) {
          let form = {
            id: res.result.id
          }
          this.$api('orderPay', form, res => {
            if (res.code == 200) {
              uni.requestPayment({
                provider: 'wxpay', // 服务提提供商
                timeStamp: res.result.timeStamp, // 时间戳
                nonceStr: res.result.nonceStr, // 随机字符串
                package: res.result.packageValue,
                signType: res.result.signType, // 签名算法
                paySign: res.result.paySign, // 签名
                success: function (res) {
                  console.log('支付成功', res);

                  // 清除购物车数据
                  self.$api('cartDel', {
                    id: deleteCartIds
                  }, res => {
                    if (res.code == 200) {
                      self.getData()
                    }
                  })

                  uni.redirectTo({
                    url: '/pages/index/order'
                  })

                },
                fail: function (err) {
                  console.log('支付失败', err);
                  // self.$refs.confirmationPopup.close()
                  uni.showToast({
                    icon: 'none',
                    title: "支付失败"
                  })
                }
              });
            }
          })
        }
      })
    },

    // 修改购物车里面商品的规格
    unitChange(item, e) {

      // TODO 查询商品规格
      // this.$api('goodsOne', this.queryParams, res => {
      // 	if (res.code == 200) {
      // 		this.list = res.result
      // 	}
      // })
    },

    // 获取地址列表
    getAddressListA() {
      this.$refs.addressList.getAddressList().then(res => {
        this.addressTotal = res.total
        if (this.addressTotal != 0) {
          this.address = res.records[0]
        }
      })
    },


    valChange(item, e) {
      console.log(e.value);
      this.$api('cartNum', {
        id: item.id,
        num: e.value,
      })
    },

    // 购物车分页
    getData() {
      this.$api('cartPage', this.queryParams, res => {
        if (res.code == 200) {
          this.list = res.result
        }
      })
    },
    // 删除购物车
    delCart(item, index) {
      this.$api('cartDel', {
        id: item.id
      }, res => {
        if (res.code == 200) {
          this.getData()
          uni.showToast({
            title: '删除成功',
          });
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.page {
  /deep/ .uv-swipe-action {
    width: 100%;
  }
}

.user {
  .item {
    background-color: #fff;
    display: flex;
    padding: 30rpx;

    .checkbox {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }

    .info {
      flex: 1;

      .title {
        display: flex;
        padding: 10rpx 20rpx;
        justify-content: space-between;

      }

      .unit {
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        color: #717171;
        display: flex;
        align-items: center;
      }


      .price {
        color: $uni-color;
        font-size: 28rpx;
        padding: 10rpx 20rpx;

        text {
          font-size: 36rpx;
          font-weight: 900;
        }
      }
    }
  }

  .action {
    width: 700rpx;
    position: fixed;
    bottom: 220rpx;
    left: 25rpx;
    background-color: #fff;
    height: 100rpx;
    border-radius: 50rpx;
    box-shadow: 0 0 6rpx 6rpx #00000010;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .icon {
      position: relative;
      width: 80rpx;
      height: 80rpx;
      margin: 0 20rpx;

      image {
        width: 80rpx;
        height: 80rpx;
      }

      .num {
        position: absolute;
        right: 10rpx;
        top: 0rpx;
        background-color: $uni-color;
        color: #fff;
        font-size: 18rpx;
        border-radius: 50%;
        height: 30rpx;
        width: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .price {
      .count {
        display: flex;
        font-size: 26rpx;
        align-items: center;

        view {
          color: $uni-color;
          margin-left: 10rpx;

          text {
            font-size: 32rpx;
            font-weight: 900;
          }
        }
      }

      .text {
        font-size: 20rpx;
        color: #717171;
      }
    }

    .btn {
      margin-left: auto;
      background-color: $uni-color;
      height: 100%;
      padding: 0 50rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.example-body {
  padding: 12px;
  background-color: #FFFFFF;
}

.result-box {
  text-align: center;
  padding: 20px 0px;
  font-size: 16px;
}

.text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.uni-px-5 {
  padding-left: 10px;
  padding-right: 10px;
}

.uni-pb-5 {
  padding-bottom: 10px;
}
</style>