购物车

整页模板，可Ctrl+A复制完整粘贴

<template> <view> <u-navbar title="购物车" :bgColor="'#FFF'" :placeholder="true"> <view slot="left"></view> </u-navbar> <view class="count_box flex-b"> <view class="flex"> <view style="margin-right: 12rpx;">购物数量</view> <view class="color-red">{{ my_count }}</view> </view> <view class="manage_box" v-show="is_manage" @click="manage_click()">管理</view> <view class="manage_box" v-show="!is_manage" @click="manage_click()">取消</view> </view> <view class="line_2"></view> <view v-if="cart_isloading" class="u-flex flex-center"> <u-loadmore loadingIcon="circle" iconColor="#3D7CFF" status="loading"> </u-loadmore> </view> <view v-if="cart_lists.length && !cart_isloading"> <scroll-view scroll-y="true" style="{height: calc(100vh - 198rpx}"> <view class="m-b-15" v-for="(item, index) in cart_lists" :key="index"> <view class="shop_item"> <view v-show="item.checked" @click.stop="cart_item_btn_click(item)"> <u-icon name="checkmark-circle-fill" color="#E93323" size="22"></u-icon> </view> <view v-show="!item.checked" @click.stop="cart_item_btn_click(item)"> <view class="inactive_checked_box"></view> </view> <view class="flex" @click="toNav(`/pages/shop/shop_detail?shop_id=${item.shop_id}`)"> <image class="m-l-25" src="http://tools.k.zentaotech.com/img/recruitment.png" style="width: 30rpx;height: 30rpx;position: relative;top: 2rpx"></image> <view class="m-l-15 m-r-15">{{ item.shop_name }}</view> <view style="position: relative;top: 2rpx"> <u-icon name="arrow-right"></u-icon> </view> </view> </view> <view class="shopping_item" v-for="(item2, index2) in item.product" :key="index2" @click="toNav(`/pages/goods/goods_detail?id=${item.product_id}`)"> <view v-show="item2.checked" @click.stop="cart_item2_btn_click(item, item2)"> <u-icon name="checkmark-circle-fill" color="#E93323" size="22"></u-icon> </view> <view v-show="!item2.checked" @click.stop="cart_item2_btn_click(item, item2)"> <view class="inactive_checked_box"></view> </view> <view style="position: relative;"> <image :src="`${domain}/storage/${item2.goods_picture}`" style="width: 160rpx;height: 160rpx;border-radius: 20rpx;"> </image> <view class="visit_tag" v-if="item2.goods_is_door && !item2.goods_is_store">上门</view> <view class="visit_tag" v-if="item2.goods_is_store && !item2.goods_is_door">到店</view> </view> <view style="width: 444rpx;"> <view class="text-line-2 font-28">{{ item2.goods_name }}</view> <view class="font-24" style="margin-top: 16rpx;color: #868686" v-if="item2.goods_sku_name"> 规格: {{ item2.goods_sku_name }} </view> <view class="flex-b" style="margin-top: 28rpx;"> <view class="color-red"> ￥{{ item2.goods_sku_price? item2.goods_sku_price : item2.goods_price }}</view> <u-number-box v-model="item2.cart_num" bgColor="none" :name="item2.cart_id" @change="number_box_change"></u-number-box> </view> </view> </view> </view> </scroll-view> </view> <view class="empty_box" v-if="!cart_lists.length && !cart_isloading"> <u-empty mode="car" text="购物车是空的" textColor="#AAA" width="207" height="152"> </u-empty> <view class="flex-center m-t-40"> <view style="width: 200rpx"> <u-button text="去首页逛逛" @click="toTab('/pages/index/index')" class="theme-btn"></u-button> </view> <!-- <view class="go_home" @click="toTab('/pages/index/index')">去首页逛逛</view> --> </view> </view> <view class="buy_box" v-if="cart_lists.length && !cart_isloading" :style="{paddingBottom:`${safeAreaInsetsBottom}rpx !important`}"> <view class="flex"> <view style="position: relative;top: 4rpx;" @click="all_checked_click()" v-show="!all_checked"> <view class="inactive_checked_box"></view> </view> <view style="position: relative;top: 4rpx;" @click="all_checked_click()" v-show="all_checked"> <u-icon name="checkmark-circle-fill" color="#E93323" size="22"></u-icon> </view> <view class="font-28" style="margin-left: 26rpx;">全选({{ is_checked_count }})</view> </view> <view class="flex" v-show="is_manage"> <view class="color-red font-28" style="margin-right: 22rpx;" v-if="my_sum_price"> ￥{{ (my_sum_price).toFixed(2) }} </view> <u-button :customStyle="buyBtn" color="#E93323" text="立即下单" @click="place_order()"></u-button> </view> <view class="flex" v-show="!is_manage"> <view class="buy_btn" @click="del_cart()">删除</view> </view> </view> </view> </template> <script> export default { data() { return { my_count: "", my_sum_price: "", buyBtn: { color: "#fff", fontSize: "30rpx", width: "226rpx", height: "70rpx", borderRadius: "50px", textAlign: "center", lineHeight: "70rpx" }, cart_lists: [], cart_param: { limit: 20, page: '', user_id: uni.getStorageSync("user_id"), user_hash: uni.getStorageSync("user_hash") }, cart_isloading: false, cart_isend: false, is_manage: 1, all_checked: true, is_checked_count: 0, domain: "", user_info: {}, statusBarHeight: 0, safeAreaInsetsBottom: 0 } }, onLoad() { // this.domain = this.__API__ this.domain = 'http://tools.k.zentaotech.com/' this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight this.safeAreaInsetsBottom = Math.abs(uni.getSystemInfoSync().safeAreaInsets.bottom) }, async onShow() { // await this.get_user_info() // this.cart_cout().then(res => { // this.my_count = res.count // }) this.get_cart_lists(true) }, onHide() { this.is_manage = 1 }, onPullDownRefresh() { this.get_cart_lists(true) }, onReachBottom() { if (!this.cart_isloading && !this.cart_isend) { this.cart_param.page++ this.get_cart_lists() } }, methods: { get_cart_lists(reload = false) { this.cart_isloading = true; if (reload) { this.cart_param.page = 1 this.cart_lists = [] this.cart_isend = false } uni.request({ url: `http://tools.k.zentaotech.com/json/cart.php`, method: 'post', data: this.cart_param, header: { 'content-type': 'application/json' }, success: (res) => { this.cart_isloading = false; const lists = res.data.data if (lists.length > 0) { this.cart_lists = [...this.cart_lists, ...lists] uni.stopPullDownRefresh() } else { this.cart_isend = true } let count = 0 let sum = 0 this.cart_lists.map(item => { item.product.map(item2 => { if (item2.checked) { sum += (Number(item2.goods_sku_price) || Number(item2 .goods_price)) * item2.cart_num count += 1 } }) }) this.is_checked_count = count this.my_sum_price = sum console.log(sum, 9); } }) }, manage_click() { this.is_manage = !this.is_manage }, cart_item_btn_click(item) { item.checked = !item.checked if (item.checked) { item.product.map(item2 => { item2.checked = true }) } else { item.product.map(item2 => { item2.checked = false }) } let flag = true let count = 0 let sum = 0 this.cart_lists.map(item => { if (!item.checked) { flag = false } item.product.map(item2 => { if (item2.checked) { sum += (Number(item2.goods_sku_price) || Number(item2.goods_price)) * item2 .cart_num count += 1 } }) }) this.is_checked_count = count this.my_sum_price = sum if (!flag) { this.all_checked = false } else { this.all_checked = true } }, cart_item2_btn_click(item0, item) { item.checked = !item.checked let flag0 = true item0.product.map(itemA => { if (!itemA.checked) { flag0 = false } }) if (flag0) { item0.checked = true } else { item0.checked = false } let count = 0 let sum = 0 this.cart_lists.map(item => { item.product.map(item2 => { if (item2.checked) { sum += (Number(item2.goods_sku_price) || Number(item2.goods_price)) * item2 .cart_num count += 1 } }) }) this.is_checked_count = count this.my_sum_price = sum let flag = true this.cart_lists.map(item => { if (!item.checked) { flag = false } }) if (!flag) { this.all_checked = false } else { this.all_checked = true } }, all_checked_click() { this.all_checked = !this.all_checked if (this.all_checked) { let count = 0 let sum = 0 this.cart_lists.map(item => { item.checked = true item.product.map(item2 => { item2.checked = true if (item2.checked) { sum += (Number(item2.goods_sku_price) || Number(item2.goods_price)) * item2.cart_num count += 1 } }) }) this.is_checked_count = count this.my_sum_price = sum } else { this.cart_lists.map(item => { item.checked = false item.product.map(item2 => { item2.checked = false }) }) this.is_checked_count = 0 this.my_sum_price = 0 } }, number_box_change(e) { setTimeout(() => { let count = 0 let sum = 0 this.cart_lists.map(item => { item.product.map(item2 => { if (item2.checked) { sum += (Number(item2.goods_sku_price) || Number(item2 .goods_price)) * item2.cart_num count += 1 } }) }) this.is_checked_count = count this.my_sum_price = sum }, 300) uni.request({ url: `${this.__API__}/Cart/edit`, method: 'post', data: { cart_id: e.name, number: e.value }, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: (res) => { // this.cart_cout().then(res => { // this.my_count = res.count // }) } }) }, del_cart() { let arr = [] this.cart_lists.map(item => { item.product.map(item2 => { if (item2.checked) { arr.push(item2.cart_id) } }) }) uni.request({ url: `${this.__API__}/Cart/del`, method: 'post', data: { cart_id: arr.join(','), }, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: (res) => { uni.showToast({ title: res.data.msg, icon: "none", duration: 2000 }) if (res.data.status === 1) { this.get_cart_lists(true) } } }) }, place_order() { let arr = [] this.cart_lists.map(item => { item.product.map(item2 => { if (item.checked) { arr.push(item2.cart_id) } }) }) arr = arr.join(',') console.log(arr, "kkk"); this.toNav(`/pages/order/place_order?cart_id=${arr}`) } } } </script> <style lang="scss"> page { background-color: #f5f7fb; } .top_box { width: 100%; height: 76rpx; padding: 0 30rpx; display: flex; justify-content: space-around; box-sizing: border-box; } .count_box { width: 100%; height: 80rpx; padding: 0 30rpx; box-sizing: border-box; font-size: 28rpx; background-color: #FFF; .manage_box { font-size: 26rpx; color: #282828; width: 110rpx; height: 46rpx; line-height: 46rpx; text-align: center; border-radius: 6rpx; border: 2rpx solid #a4a4a4; } } .empty_box { width: 100%; height: 500rpx; padding: 80rpx 0; box-sizing: border-box; background-color: #FFF; } .buy_box { position: fixed; left: 0; bottom: 0; width: 100%; // min-height: 100rpx; padding: 25rpx 30rpx; box-sizing: border-box; background-color: #FFF; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #f1f1f1; .buy { color: #fff; font-size: 15px; width: 113px; height: 35px; border-radius: 25px; text-align: center; line-height: 35px; margin-left: 11px; } } .shop_item { width: 100%; background-color: #FFF; padding: 24rpx 30rpx; display: flex; align-items: center; } .shopping_item { width: 100%; background-color: #FFF; padding: 24rpx 30rpx; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; } .buy_btn { font-size: 28rpx; color: #999; border-radius: 50rpx; border: 2rpx solid #999; width: 160rpx; height: 60rpx; text-align: center; line-height: 60rpx; } .buy_btn_active { font-size: 28rpx; color: #E93323; border-radius: 50rpx; border: 2rpx solid #E93323; width: 160rpx; height: 60rpx; text-align: center; line-height: 60rpx; margin-right: 16rpx; } .inactive_checked_box { width: 22px; height: 22px; border: 1px solid #d1d1d1; border-radius: 50%; box-sizing: border-box; } .go_home { display: flex; padding: 6rpx 20rpx; background-color: #ffd031; border: 1rpx solid #000; border-radius: 40rpx; font-size: 30rpx; } .visit_tag { position: absolute; top: 0; left: 0; background-color: #d1b08d; padding: 8rpx 12rpx; color: #FFF; font-size: 18rpx; border-radius: 20rpx 0 20rpx 0; } .order_item { padding: 25rpx; background-color: #FFF; } </style>