wx-fensisiyu/pageA/submit.vue

<template>
	<view class="page">
		<view class="change u-flex u-row-between" @click="toaddress">
			<view class="u-flex">
				<image style="width: 80rpx;height: 80rpx;" src="" mode=""></image>
				<view class="" style="margin-left: 38rpx;">
					<text>玲玲</text>
					<text style="margin-left: 14rpx;">18666666666</text>
					<view class="">
						山东省临沂市柳青街道柳青
					</view>
				</view>
			</view>
			<u-icon name="arrow-right" size="28"></u-icon>
		</view>
		<view class="center">
			<view class="top u-flex">
				<image style="width: 185rpx;height: 156rpx;" src="static/images/shangpin.png" mode=""></image>
				<view class="" style="margin-left: 24rpx;">
					<view class="u-flex u-row-between">
						<text>成犬通用型狗粮5斤装成犬通用型粮5斤装</text>
						<text>*1</text>
					</view>
					<view class="margin">500G/1斤</view>
					<view class="margin">
						<text class="fuhao">￥</text>
						<text class="money">6.20</text>
						<text class="jifen">+</text>
						<text class="money">300</text>
						<text class="jifen">积分</text>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-between" style="margin-left: 208rpx;padding-right: 26rpx;margin-top: 32rpx;">
				<text>兑换数量</text>
				<u-number-box v-model="value"></u-number-box>
			</view>
			<view class="bottom">
				<view class="u-flex u-row-between">
					<text class="left">商品总价</text>
					<text class="right">￥39.00</text>
				</view>
				<view class="u-flex u-row-between" style='margin-top:27rpx'>
					<text class="left">运费</text>
					<text class="right">包邮</text>
				</view>
				<view class="u-flex u-row-between" style='margin-top:27rpx'>
					<text class="left">积分抵扣</text>
					<text class="right">300积分</text>
				</view>
			</view>
		</view>
		<view class="" style="margin:32rpx 0 30rpx ;"></view>
		<view class="pay u-flex u-row-between">
			<view class="u-flex">
				<image src="static/images/wx.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
				<text style="margin-left: 8rpx;">微信支付</text>
			</view>
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle"></u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="fixed_box ">
			<view class="u-flex " style="justify-content: flex-end;">
				<text class="fukuan">实付款:</text>
				<text class="money1" style='margin-left:24rpx'>￥1399.00</text>
				<view class="bottom_pay" style='margin-left:20rpx'>
					立即支付
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				checked: true,
			};
		},
		methods: {
			toaddress(){
				uni.navigateTo({
					url:'/pageA/address'
				})
			}
		}
	}
</script>

<style lang="scss">
	.fukuan {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 36rpx;
		color: #333333;
	}

	.money1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44rpx;
		color: #FC1E1E;
	}

	.bottom_pay {
		width: 262rpx;
		height: 72rpx;
		background: rgba(143, 211, 243, 1);
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 72rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.fixed_box {
		width: 750rpx;
		height: 98rpx;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 14rpx 24rpx 12rpx 0;
	}

	.pay {
		width: 750rpx;
		height: 130rpx;
		background: rgba(255, 255, 255, 1);
		padding: 14rpx 56rpx 16rpx 6rpx;
		margin-left: -22rpx;
	}

	.jifen {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		// line-height: 105rpx;
		color: #F64016;
	}

	.fuhao {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		// line-height: 105rpx;
		color: #F64016;
	}

	.money {
		font-size: 32rpx;
		font-family: DIN;
		font-weight: bold;
		// line-height: 48rpx;
		color: #F64016;
	}

	.margin {
		margin-top: 6rpx;
	}

	.bottom {
		padding: 0 24rpx;
		margin-top: 90rpx;
	}

	::v-deep .u-number-input {
		background: rgba(0, 0, 0, 0) !important;
	}

	.left {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #676767;
	}

	.right {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #111111;
	}

	::v-deep .u-icon-minus {
		width: 40rpx !important;
		height: 40rpx !important;
		border-radius: 100% !important;
	}

	::v-deep .u-icon-plus {
		width: 40rpx !important;
		height: 40rpx !important;
		border-radius: 100% !important;
	}

	.top {
		padding: 12rpx 26rpx 0 18rpx;
		border-top: 2rpx solid #f6f6f6;
	}

	.center {
		width: 702rpx;
		height: 568rpx;
		background: rgba(255, 255, 255, 1);
		// opacity: 1;
		border-radius: 16rpx;
		padding: 32rpx 0 20rpx 0;
		box-sizing: border-box;
	}

	.page {
		padding: 0 22rpx;
		background: rgba(246, 245, 250, 1);
		border: 2rpx solid rgba(246, 245, 250, 0);
		min-height: 100vh;
	}

	.change {
		width: 702rpx;
		height: 144rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
		padding: 40rpx 24rpx 20rpx;
		margin: 30rpx 0 20rpx 0;
	}
</style>