<template>
	<view class="fui-wrap">
		<view class="fui-page__hd">
			<view class="fui-align__center" @tap="vip">
				<text class="fui-page__title">SubmitBar</text>
				<image src="/static/images/index/light/icon_member_3x.png" class="fui-vip__icon"></image>
			</view>
			<text class="fui-page__desc">提交订单栏，常用的页面布局，可提升开发效率以及带来舒服的视觉效果！</text>
		</view>
		<view class="fui-page__bd">
			<!-- 布局内容 start -->
			<text class="fui-section__title">结算栏</text>
			<view class="fui-submit__bar fui-submitbar__flex fui-submitbar__between">
				<view class="fui-submit__bar-left fui-submitbar__flex">
					<view class="fui-submitbar__flex">
						<fui-checkbox color="#FF2B2B" @change="change"></fui-checkbox>
						<text class="fui-submit__bar-text">全选</text>
					</view>
					<view class="fui-submitbar__column">
						<view class="fui-submitbar__flex">
							<text class="fui-submit__bar-sign">合计:￥</text>
							<text class="fui-submitbar__price">200.00</text>
						</view>
						<text class="fui-submitbar__sub" v-if="checkeAll">优惠减:￥2,130.00</text>
					</view>
				</view>
				<fui-button type="danger" width="192rpx" height="72rpx" :size="26" radius="60rpx" text="去结算(0)">
				</fui-button>
			</view>

			<text class="fui-section__title">提交订单栏</text>
			<view class="fui-submit__bar fui-submitbar__flex fui-submitbar__between">
				<view class="fui-submitbar__flex">
					<text class="fui-submit__bar-sign">合计:</text>
					<text class="fui-submit__bar-sign fui-color__danger">￥</text>
					<text class="fui-submitbar__price fui-color__danger">200.00</text>
				</view>
				<fui-button type="danger" width="192rpx" height="72rpx" :size="26" radius="60rpx" text="提交订单">
				</fui-button>
			</view>

			<text class="fui-section__title">提交订单栏</text>
			<view class="fui-submit__bar fui-submitbar__flex fui-submitbar__end">
				<view class="fui-submitbar__flex fui-submitbar__pr">
					<text class="fui-submit__bar-sign">合计:</text>
					<text class="fui-submit__bar-sign fui-color__danger">￥</text>
					<text class="fui-submitbar__price fui-color__danger">200.00</text>
				</view>
				<fui-button type="danger" width="192rpx" height="72rpx" :size="26" radius="60rpx" text="提交订单" disabled>
				</fui-button>
			</view>
			

			<view class="fui-submitbar__fixed">
				<view class="fui-submit__bar fui-submitbar__flex fui-submitbar__end">
					<view class="fui-submitbar__flex fui-submitbar__pr">
						<text class="fui-submit__bar-sign">合计:</text>
						<text class="fui-submit__bar-sign fui-color__danger">￥</text>
						<text class="fui-submitbar__price fui-color__danger">200.00</text>
					</view>
					<fui-button type="danger" width="192rpx" height="72rpx" :size="26" radius="60rpx" text="提交订单">
					</fui-button>
				</view>
				<fui-safe-area></fui-safe-area>
			</view>
			<!-- 布局内容 end -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkeAll: false
			}
		},
		methods: {
			vip() {
				const url = "/pages/my/qa/qa?index=2&title=VIP专属内容"
				uni.fui.href(url)
			},
			change(e) {
				console.log(e)
				this.checkeAll = e.checked
			}
		}
	}
</script>

<style>
	.fui-align__center {
		flex-direction: row;
	}

	.fui-section__title {
		margin-left: 32rpx;
		/* #ifdef APP-NVUE */
		margin-top: 64rpx;
		/* #endif */
	}

	/* 布局内容样式 start */
	.fui-submit__bar {
		/* #ifndef APP-NVUE */
		width: 100%;
		box-sizing: border-box;
		/* #endif */
		height: 100rpx;
		padding: 0 32rpx;
		background-color: #fff;
		position: relative;
		/* #ifdef APP-NVUE */
		flex: 1;
		border-top: 0.5px solid #eee;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-submit__bar::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		border-top: 1px solid #eee;
		transform: scaleY(0.5);
		transform-origin: 0 0;
		z-index: 1;
		pointer-events: none;
	}

	/* #endif */

	.fui-submitbar__flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.fui-submitbar__column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.fui-submit__bar-left {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.fui-submit__bar-text {
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: normal;
		padding: 0 24rpx 0 12rpx;
	}

	.fui-submit__bar-sign {
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: normal;
	}

	.fui-submitbar__price {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
	}

	.fui-submitbar__sub {
		font-size: 25rpx;
		font-weight: normal;
		color: #7F7F7F;
		transform: scale(0.8);
		transform-origin: 0 center;
	}

	.fui-submitbar__between {
		justify-content: space-between;
	}

	.fui-submitbar__end {
		justify-content: flex-end;
	}

	.fui-color__danger {
		color: #FF2B2B;
	}

	.fui-submitbar__pr {
		padding-right: 28rpx;
	}

	.fui-submitbar__fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		z-index: 10;
		/* #endif */
	}

	/* 布局内容样式 end */
</style>
