wx-qhb/pages/cart/cart.vue

<template>
	<!-- 购物车 -->
	<view>
		<u-navbar :safeAreaInsetTop="true" :placeholder='true'>
			<view class="u-nav-slot" slot="left">
				<view class="">
					<text class="shopcart">{{i18n.Shopping}}</text>
					<text class="sum">(12)</text>
				</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="u-flex">
					<text @click="admin" v-if="success">{{i18n.manage}}</text>
					<text @click="admin" v-else>{{i18n.complete}}</text>
					<view class="" style="width: 200rpx;"></view>
				</view>
			</view>
		</u-navbar>
		<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
			<view class="box" v-for="(item,idx) in 6" :key="idx">
				<view class="item">
					<view class="shopname u-flex">
						<image src="/static/images/logo.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
						<text>妞妞团🇨🇳进群抢秒杀❗️❗️</text>
						<image src="/static/express/next1.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
					<u-swipe-action>
						<view class="u-flex" style="margin-top: 30rpx;width: 100%;" v-for="(chid,index) in 2"
							:key="index">
							<u-swipe-action-item :options="options2">
								<!-- 				<view class="" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background-color: rgba(255, 255, 255, 0.5);"></view> -->
								<u-checkbox shape='circle' :customStyle="{marginBottom: '8px'}" :name="shopitem">
								</u-checkbox>
								<view class="" style="position: relative;width: 172rpx;height: 172rpx;">
									<image src="/static/images/logo.png" style="width: 172rpx;height: 172rpx;" mode="">
									</image>
									<!-- 		<view class="sold">
										商品下架
									</view> -->
								</view>
								<view class="good" style="flex: 1;">
									<view class="goodname">布兰德超级锁鲜全价主食冻干成</view>
									<view class="goods">兔肉味-提高免疫 主食白金包</view>
									<view class="" style="margin-top: 21rpx;">
										<view class="goodtab">{{i18n.postage}}</view>
									</view>
									<view class="u-flex u-row-between" style="width: 100%;margin-top: 20rpx;">
										<view class="">
											<text class="money">¥</text>
											<text class="money" style="font-size: 30rpx;">179</text>
											<text class="money">.00</text>
											<text class="weight">500g</text>
										</view>
										<view class="">
											<!-- <view class="delect" v-if='dele'>{{i18n.delete}}</view> -->
											<view class="" v-if="num&&success">
												<!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
												<u-number-box v-model="value">

													<view slot="minus" class="minus">
														<u-icon name="minus" color="#B5B5B5" size="12"></u-icon>
													</view>
													<text slot="input"
														style="width: 50px;text-align: center;font-size: 20rpx;"
														class="input">{{value}}</text>
													<view slot="plus" class="plus">
														<u-icon name="plus" color="#B5B5B5" size="12"></u-icon>
													</view>

												</u-number-box>
											</view>
											<view class="num" v-if="num==false&&success" @click="num = true">
												x1
											</view>
										</view>
										<view v-if="success==false" class="icon">
											<u-icon name="trash" color="#fff" size="20"></u-icon>
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</view>
					</u-swipe-action>
				</view>
			</view>
		</u-checkbox-group>
		<view class="" style="height: 260rpx;"></view>
		<kj-tabbar ref="tabbar1" :value1=3></kj-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dele: true,
				success: true,
				shopitem: -1,
				checkboxValue1: [], //商品数组
				value: 0,
				all: [], //全选数组
				selectall: -1,
				num: false,
				options2: [{
					text: '收藏',
					style: {
						backgroundColor: '#3c9cff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				tabarheight: ''
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onLoad() {
			const systemInfo = wx.getSystemInfoSync()
			console.log(systemInfo);
			const tab = systemInfo.screenHeight - systemInfo.safeArea.bottom + systemInfo.statusBarHeight;
			this.tabarheight = tab
			console.log(this.tabarheight);
		},
		methods: {
			admin() {
				this.success = !this.success
				console.log(this.success);
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			//全选
			checkAll(e) {
				console.log('all', e);
			},
			aaa() {
				console.log(this.$refs.tabbar1.getLabelHeight())
			},
			checkboxChange(n) {
				console.log('change', n);
			}
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	.sold {
		width: 108rpx;
		height: 36rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 18rpx;
		// padding: 0 14rpx;
		text-align: center;
		box-sizing: border-box;
		line-height: 36rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		font-style: normal;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -18rpx;
		margin-left: -54rpx;

	}

	.delect {
		// width: 68rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 22rpx;
		border: 1rpx solid #FF1515;
		padding: 0 14rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FF1515;
		text-align: center;
		font-style: normal;
	}

	.allweight {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #333333;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.sum {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #333333;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.summon {
		font-family: JDZhengHT, JDZhengHT;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF1515;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
	}

	.settle {
		width: 176rpx;
		height: 68rpx;
		background: #F83224;
		border-radius: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		font-style: normal;
		margin-left: 20rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		background: #F83224;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dle {
		width: 136rpx;
		height: 60rpx;
		border-radius: 38rpx;
		border: 1rpx solid #979797;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 60rpx;
		text-align: center;
		font-style: normal;
	}

	::v-deep .u-swipe-action-item__content {
		flex-direction: row !important;
	}

	::v-deep .u-swipe-action-item {
		width: 100% !important;
	}

	::v-deep .u-swipe-action-item__right {
		top: 2rpx !important;
		right: 2rpx !important;
		bottom: 2rpx !important;
	}

	.bottom {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.num {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		border: 1rpx solid rgba(151, 151, 151, 0.4);
		font-family: HarmonyOS_Sans;
		font-size: 20rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
	}

	.box {
		padding: 0rpx 24rpx 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		.item {
			padding: 36rpx 20rpx;
			box-sizing: border-box;
			width: 702rpx;
			// height: 556rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.money {
				font-family: HarmonyOS_Sans_Medium;
				font-size: 20rpx;
				color: #FF1515;
				line-height: 26rpx;
				text-align: left;
				font-style: normal;
			}

			.weight {
				font-family: SFPro, SFPro;
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
				margin-left: 12rpx;
			}

			.goodtab {
				// width: 96rpx;
				height: 32rpx;
				border-radius: 4rpx;
				border: 1rpx solid #FF1515;
				padding: 2rpx 8rpx;
				box-sizing: border-box;
				text-align: center;
				line-height: 32rpx;
				display: inline;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #FF1515;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.goods {
				// width: 284rpx;
				height: 40rpx;
				background: #F4F4F4;
				border-radius: 8rpx;
				display: inline;
				text-align: center;
				line-height: 40rpx;
				margin-top: 20rpx;
				padding: 6rpx 12rpx;
				box-sizing: border-box;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #555555;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.goodname {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.shopname {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.shopcart {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #222222;
		line-height: 50rpx;
		text-align: right;
		font-style: normal;
	}

	.sum {
		font-family: HarmonyOS_Sans;
		font-size: 22rpx;
		color: #333333;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}
</style>