health-front/pages/index/cart.vue

<template>
	<view class="page__view">
		<navbar bgColor="#F3F2F7" >
			<image class="nav-icon" src="@/static/image/icon-nav.png" 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">
				<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>
				<view class="flex flex-column empty">
					<view class="empty-title">购物车为空</view>
					<view class="empty-desc">请将喜欢的商品加入购物袋</view>
				</view>
				<view 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;"
						></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" @click="onDelete">删除</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 {
        // todo
				mixinsListApi: '',
        // todo
				keyword: '',
        mode: 'read',
				selectedList: [],
        recommendList: [],
      }
    },
		computed: {
			...mapState(['configList', 'userInfo']),

			// selectedList() {
			// 	return this.list.filter(item => item.selected)
			// },
			totalPrice() {
				return this.selectedList.reduce((price, item) => {
					// return price + item.price * (item.count || 1)
					return price + item.price
				}, 0)
			},
		},
		methods: {
			// 搜素
			search() {
        // todo
			},
			// todo: delete
			getData() {
				this.list = [
					{
						id: '001',
						url: '', 
						name: '月度装定制营养包',
						price: 688,
						count: 1,
						countDesc: '1月装',
						options: [
							{ id: '001', label: '1月装', count: 1, value: 688 },
							{ id: '002', label: '3月装', count: 3, value: 688*3 },
							{ id: '003', label: '6月装', count: 6, value: 688*6 },
						],
						customized: true,
						checked: false,
					},
					{
						id: '002',
						url: '', 
						name: '月度装定制营养包',
						price: 688,
						count: 1,
						countDesc: '1月装',
						options: [
							{ id: '001', label: '1月装', count: 1, value: 688 },
							{ id: '002', label: '3月装', count: 3, value: 688*3 },
							{ id: '003', label: '6月装', count: 6, value: 688*6 },
						],
						free: true,
						checked: false,
					},
					{
						id: '003',
						url: '', 
						name: '月度装定制营养包',
						price: 688,
						count: 1,
						countDesc: '1月装',
						options: [
							{ id: '001', label: '1月装', count: 1, value: 688 },
							{ id: '002', label: '3月装', count: 3, value: 688*3 },
							{ id: '003', label: '6月装', count: 6, value: 688*6 },
						],
						free: true,
						checked: false,
					},
					{
						id: '004',
						url: '', 
						name: '月度装定制营养包',
						price: 688,
						count: 1,
						countDesc: '1月装',
						options: [
							{ id: '001', label: '1月装', count: 1, value: 688 },
							{ id: '002', label: '3月装', count: 3, value: 688*3 },
							{ id: '003', label: '6月装', count: 6, value: 688*6 },
						],
						free: true,
						checked: false,
					},
					{
						id: '005',
						url: '', 
						name: '月度装定制营养包',
						price: 688,
						count: 1,
						countDesc: '1月装',
						options: [
							{ id: '001', label: '1月装', count: 1, value: 688 },
							{ id: '002', label: '3月装', count: 3, value: 688*3 },
							{ id: '003', label: '6月装', count: 6, value: 688*6 },
						],
						free: true,
						checked: false,
					},
				]

				this.total = this.list.length

				this.getDataThen && this.getDataThen(this.list, this.total)
			},
			getDataThen(records, total) {
				console.log('getDataThen')
				// todo
				
				if (total) {
					return
				}
				
				this.recommendList = [
					{
						id: '001',
						url: '', 
						name: '月度装定制营养包',
						sales: 24770,
						price: 688.00,
						originalPrice: 1664,
					},
					{
						id: '002',
						url: '', 
						name: '月度装定制营养包',
						sales: 24770,
						price: 688.00,
						originalPrice: 1664,
					},
					{
						id: '003',
						url: '', 
						name: '月度装定制营养包',
						sales: 24770,
						price: 688.00,
						originalPrice: 1664,
					},
					{
						id: '004',
						url: '', 
						name: '月度装定制营养包',
						sales: 24770,
						price: 688.00,
						originalPrice: 1664,
					},
				]

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

        this.list[index].selected = selected
				// todo

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

				// todo: check
        this.list[index].price = obj.price

        this.list[index].count = obj.count
        this.list[index].countDesc = obj.countDesc
				// todo

				this.updateSelectedList()
      },
			onEnterEdit() {
				this.mode = 'edit'
			},
			onLeaveEdit() {
				this.mode = 'read'
			},
			onDelete() {
        uni.showModal({
          title: '确认删除？',
          success : e => {
            if(e.confirm){
							// todo
							this.list = this.list.filter(item => !item.selected)
							this.total = this.list.length
            }
          }
        })

			},
			onBuy() {
				this.$store.commit('createOrder', this.selectedList)
			},
		},
	}
</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;

				&.is-disabled {
					opacity: 0.5;
				}
			}
		}
	}

</style>