baozhida-mall-applet/pages/tabBar/medicine.vue

<template>
	<view>
		<x-steps :current="1"></x-steps>
		<x-commodity :commodityData="commodityData"></x-commodity>
		<view class="shop-foot">
			<view class="same_row_in" style="align-items: flex-end;">
				<view class="same_row_in">
					<checkbox-group @change="checkboxChangeAll">
						<checkbox class="round" style="transform:scale(0.8)" :checked="isAllChecked" />
					</checkbox-group>
					<!-- <u-checkbox-group shape="circle" v-model="checked">
						<u-checkbox activeColor="red" label="全选"></u-checkbox>
					</u-checkbox-group> -->
				</view>
				<view>全选</view>
			</view>
			<view class="same_row_in">
				<view class="footing_box">
					<view class="title_total">合计</view>
					<view class="title_money">￥</view>
					<view class="money_num">{{priceNum}}</view>
				</view>
				<view class="settle_accounts center_in" @click="settleAccounts">结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAllChecked: false,
				priceNum: 0,
				checked: [],
				commodityData: [{
					shopName: '国药控股大药房',
					drugData: [{
						title: '维生素c片',
						specification: '0.3gx24粒',
						price: 45,
						num: 4,
					}, {
						title: '布洛芬缓释胶囊',
						specification: '0.3gx24粒',
						price: 45,
						num: 4,
					}]
				}]
			}
		},
		methods: {
			checkboxChangeAll() {
				console.log(3214)
			},
			// 结算
			settleAccounts() {
				uni.navigateTo({
					url: '/pages/medicine/consultation'
				});
			}
		}
	}
</script>

<style lang="scss">
	.shop-foot {
		border-bottom: 1rpx solid $u-border-color;
		background-color: #FFF;
		position: fixed;
		bottom: var(--window-bottom, 0);
		left: 0;
		right: 0;
		justify-content: space-between;
		align-items: center;
		display: flex;
		padding: 15rpx 30rpx;
	}

	.footing_box {
		display: flex;
		align-items: flex-end;
		align-items: baseline;
	}

	.title_total {
		color: rgb(96, 98, 102);
		font-size: 30rpx;
	}

	.title_money {
		font-size: 30rpx;
		font-weight: 600;
		color: $u-error;
	}

	.money_num {
		font-size: 40rpx;
		font-weight: bold;
		color: $u-error;
	}

	.settle_accounts {
		margin-left: 20rpx;
		width: 120rpx;
		padding: 15rpx;
		font-size: 30rpx;
		color: #FFF;
		border-radius: 60rpx;
		background-color: $x-color;
	}
</style>