health-front/pages/index/cart.vue

<template>
	<view class="page__view">
		<navbar bgColor="#F3F2F7" >
			<image class="nav-icon" :src="configList.icon_nav_dark" mode="widthFix"></image>
		</navbar>

		<view class="main">
			<view class="top">
				<view class="flex header">
					<view class="flex label">
						<view>购物车</view>
						<view v-if="total" class="desc">{{ `（${total}）` }}</view>
					</view>
					<button v-if="mode == 'edit'" class="btn" @click="onLeaveEdit">完成</button>
					<button v-else class="btn" @click="onEnterEdit">管理</button>
				</view>

				<!-- 搜索栏 -->
				<view class="search">
					<uv-search 
						v-model="keyword"
						placeholder="请输入要查询的内容"
						placeholderColor="#C6C6C6"
						searchIconColor="#8B8B8B"
						:searchIconSize="40" 
						:inputStyle="{
							'font-family': 'PingFang SC',
							'font-weight': 400,
							'font-size': '28rpx',
							'line-height': 1.4,
							'padding': '12rpx 0',
						}"
						bgColor="#fff" 
						:showAction="false"
						@search="search"
					></uv-search>
				</view>
			</view>

			<template v-if="total > 0">
				<view>
					<view class="card" v-for="(item, index) in list" :key="item.id">
						<cart-product-card 
							:data="item" 
							@select="onSelect(index, $event)" 
							@change="onChange(index, $event)"
						></cart-product-card>
					</view>
				</view>
			</template>
			<template v-else-if="mode == 'edit'">
				<view class="flex flex-column empty">
					<view class="empty-title">购物车为空</view>
				</view>
			</template>
			<template v-else-if="queryParams.title">
				<view class="flex flex-column empty">
					<view class="empty-title">您的购物车里没有相关商品</view>
				</view>
			</template>
			<template v-else>
				<view class="flex flex-column empty">
					<view class="empty-title">购物车为空</view>
					<view class="empty-desc">请将喜欢的商品加入购物袋</view>
				</view>
				<view v-if="!queryParams.title" class="recommend">
					<view v-for="item in recommendList" :key="item.id">
						<recommend-product-card 
							:data="item"
							cardStyle="width: 100%; height: 210px;"
							imgStyle="width: 100%; height: 110px;"
							@addCartSucc="getData"
						></recommend-product-card>
					</view>
				</view>
			</template>
		</view>

		<view class="flex bottom">
			<template v-if="mode == 'edit'">
				<view class="flex bar bar-edit">
					<button class="btn" @click="onLeaveEdit">取消</button>
					<button :class="['btn', selectedList.length ? '' : 'is-disabled']" @click="onDelete" :disabled="!selectedList.length">删除</button>
				</view>
			</template>
			<template v-else>
				<view class="flex bar bar-settle">
					<view class="flex info">
						<image class="icon" src="@/pages_order/static/cart/cart-icon.png" mode="widthFix"></image>
						<view>
							<view class="flex row">已选<text class="count">{{ `${selectedList.length} 件` }}</text>已享受更低优惠</view>
							<view class="flex row">合计<text class="unit">¥</text><text class="price">{{ totalPrice }}</text></view>
						</view>
					</view>
					<button :class="['btn', selectedList.length ? '' : 'is-disabled']" :disabled="!selectedList.length" @click="onBuy">去结算</button>
				</view>
			</template>
		</view>

		<tabber select="cart" />

	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import mixinsList from '@/mixins/list.js'

	import tabber from '@/components/base/tabbar.vue'
  import cartProductCard from '@/pages_order/cart/productCard.vue'
  import recommendProductCard from '@/pages_order/product/productCard.vue'

	export default {
		mixins: [mixinsList],
		components: {
      cartProductCard,
			recommendProductCard,
			tabber,
    },
    data() {
      return {
				mixinsListApi: 'getCartList',
				keyword: '',
        mode: 'read',
				selectedList: [],
        recommendList: [],
      }
    },
		computed: {
			...mapState(['configList', 'userInfo']),

			// selectedList() {
			// 	return this.list.filter(item => item.selected)
			// },
			totalPrice() {
				return this.selectedList.reduce((price, item) => {
					// todo: check key
					// return price + item.price * (item.count || 1)
					return price + item.currentPrice
				}, 0)
			},
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
			}
		},
		methods: {
			// 搜素
			search() {
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10

        if (this.keyword) {
          this.queryParams.title = this.keyword
        } else {
          delete this.queryParams.title
        }

        this.getData()
			},
			async fetchRecommendProduct() {
				try {
					this.recommendList = await this.$fetch('getRecommendProduct')
				} catch (err) {

				}
			},
			getDataThen(records, total) {
				console.log('getDataThen', records, total)
				console.log('list', this.list, 'total', this.total)

				if (!total) {
					this.fetchRecommendProduct()
					this.updateSelectedList()
					return
				}
				
				this.selectedList.forEach(selectedItem => {
					let target = records.find(item => item.id === selectedItem.id)
					target.selected = true
				})

				this.list = records.map(item => {
					const { skuId, product, sku } = item

					const { currentPrice } = product || {}
					const { specName, price } = sku || {}

					return {
						...item,
						currentPrice: skuId ? price : currentPrice,
						specId: skuId,
						specName: specName,
					}
				})
				this.recommendList = []

				this.updateSelectedList()

			},
			updateSelectedList() {
				this.selectedList = this.list.filter(item => item.selected)
			},
      onSelect(index, selected) {
        console.log('onSelect', index, selected)

        this.list[index].selected = selected

				this.updateSelectedList()
      },
      async onChange(index, obj) {
        console.log('onChange', index, obj)

				try {
					const target = this.list[index]
					const params = {
						id: target.id,
						skuId: obj.id
					}
					await this.$fetch('editCart', params)

					// this.getData()

					target.specId = obj.id
					target.specName = obj.specName
					target.currentPrice = obj.price

					this.updateSelectedList()
				} catch (err) {
					console.log('err', err)
				}
				

      },
			onEnterEdit() {
				this.mode = 'edit'
			},
			onLeaveEdit() {
				this.mode = 'read'
			},
			async fetchDelete() {
				try {
					const ids = this.selectedList.map(item => item.id)

					await this.$fetch('deleteCartBatch', { ids })

					this.getData()

					uni.showToast({
						icon: 'success',
						title: '删除成功',
					});

				} catch (err) {

				}
			},
			onDelete() {
        uni.showModal({
          title: '确认删除？',
          success : e => {
            if(e.confirm){
							this.fetchDelete()
            }
          }
        })
			},
			onBuy() {
				// todo: check id

				const list = this.selectedList.map(item => {
					const { id, product, currentPrice, specId, specName } = item

					return { ...product, currentPrice, specId, specName, cartId: id, }
				})

				this.$store.commit('createOrder', list)
			},
		},
	}
</script>

<style scoped lang="scss">

	.page__view {
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color;
		position: relative;

    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }

		.nav-icon {
			width: 200rpx;
			height: auto;
			vertical-align: top;
		}

		/deep/ .tabbar-box .tabbar {
    	z-index: 9999;
		}
	}

	.main {
    padding: calc(var(--status-bar-height) + 288rpx) 32rpx 186rpx 32rpx;
	}

	.top {
		position: fixed;
		top: calc(var(--status-bar-height) + 120rpx);
		left: 0;
		width: 100%;
		height: 168rpx;
		padding: 16rpx 32rpx 8rpx 32rpx;
		background-color: $uni-bg-color;
		box-sizing: border-box;
    z-index: 1;
	}

	.header {
		justify-content: space-between;
		column-gap: 4rpx;

		.label {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			line-height: 1.2;
			color: #252545;
		}

		.desc {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 1.4;
			color: #2A2A2A;
		}

		.btn {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			line-height: 1.5;
			color: #FFFFFF;
			padding: 8rpx 32rpx;
			background-image: linear-gradient(to right, #4B348F, #845CFA);
			border-radius: 30rpx;
		}
	}

	.search {
		margin: 24rpx 0 40rpx 0;

		/deep/ .uv-search__content__icon {
			margin-top: 2rpx;
		}
	}

	.empty {
		width: 100%;
		font-family: PingFang SC;
		line-height: 1.4;
		padding: 104rpx 0;
		box-sizing: border-box;

		&-title {
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}

		&-desc {
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #8B8B8B;	
		}
	}

	.recommend {
		margin-top: 40rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32rpx;
	}

	.card {
		margin-top: 32rpx;
	}
	
	.bottom {
		position: fixed;
		left: 0;
		bottom: calc(env(safe-area-inset-bottom) + #{$tabbar-height});

		width: 100vw;
		height: 122rpx;
		padding: 0 40rpx;
		background: #FFFFFF;
		box-sizing: border-box;
	}

	.bar {
		width: 100%;

		&-edit {
			column-gap: 32rpx;

			.btn {
				flex: 1;
				padding: 16rpx 0;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 1;
				color: #252545;
				border: 2rpx solid #252545;
				border-radius: 41rpx;
			}
		}

		&-settle {
			justify-content: space-between;

			.info {
				column-gap: 16rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 1.4;
				color: #626262;
				
				.icon {
					width: 76rpx;
					height: auto;
				}
				
				.row {
					justify-content: flex-start;
				}

				.count,
				.unit,
				.price {
					font-weight: 500;
					color: #7451DE;
				}

				.count {
					margin: 0 12rpx;
				}
				.unit {
					margin: 0 8rpx;
				}
				.price {
					font-size: 40rpx;
				}
			}

			.btn {
				padding: 16rpx 46rpx;
				color: #FFFFFF;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 1;
				background-image: linear-gradient(to right, #4B348F, #845CFA);
				border-radius: 41rpx;
			}
		}
	}

</style>