keysass_app/pages/index/addshoppingcart.vue

<template>
	<view >
		<img class="logobg" src="http://image.keyitest.cn/g1.png" alt="" />
		<img class="logoauto" src="http://image.keyitest.cn/static/index/g2.png" alt="" />
		<view style="background-color: #FFFFFF;">
			<view class="schedule">
				<view style='display:flex;justify-content:space-between;margin:10rpx 0  10px 0;'>
					<p style="color:#FD461A;">
						<span>¥ </span>
						<span style="font-size:40rpx;margin-left:10rpx;font-weight: 800;">1200</span>
					</p>
					<p style="color:#999999;font-size:24rpx;">X</p>
				</view>
				<view class="graycol" style="font-size:26rpx;">您已选择：{{cartnumber}} 份</view>
			</view>
			<view class="horizontalline"></view>
			<view class="schedule">
				<view class="commodity">
					<p>商品名称：</p>
					<p style="color:#333333;">Kinterface接口测试工具-软件版</p>
				</view>
				<view class="commodity">
					<p>商品规格：</p>
					<p style="color:#333333;">按月</p>
				</view>
				<view class="commodity">
					<p>交付方式：</p>
					<p style="color:#333333;">License</p>
				</view>
				<view class="commodity">
					<p>应付金额：</p>
					<p style="color:#FD461A;margin-top: -3px;">
						<span>¥ </span>
						<span style="font-size:40rpx;margin-left:10rpx;font-weight: 800;">1200</span>
					</p>
				</view>
				<view class="commodity">
					<p>购买数量：</p>
					<u-number-box v-model="cartnumber" @change="valChange"></u-number-box>
					<!-- <p style="color:#333333 ;">Kinterface接口测试工具-软件版</p> -->
				</view>
			</view>
		</view>
		<view class="submitt">
			<view class="button-g" style="background:#FFFFFF;border: 1px solid #1578ED;color: #1578ED;margin-left:0" @click="shopping('rests')">重置</view>
			<view class="button-g" @click="shopping('cart')">加入购物车</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartnumber: 0
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			shopping(type){
				if(type=='rests'){
					this.cartnumber=0
				}else{
					console.log('加入购物车: ')
						uni.switchTab({
							url:'/pages/shoppingtrolley/shoppingtrolley'
						})
				}
			}
		}
	}
</script>

<style>
	.logobg {
		width:100vw;
		object-fit: contain;
		position: relative;
		/* z-index:0; */
	}
	.logoauto{
		width:261rpx;
		height:261rpx;
		object-fit: contain;
		position: absolute;
		top:8%;
		left: 30%;
	}
	.schedule{
		width:94vw;
		margin:16px 3vw 20px 3vw;
	}
	.graycol{
		color: #999999
	}
	.horizontalline{
		width:100vw;
		height:.5rpx;
		margin: 10px 0;
		background-color: #EBEBEB;
	}
	.commodity{
		display: flex;
		color:#808080 ;
		font-size:30rpx;
		margin:20px 0;
	}
	.submitt {
		height:70px;
		/* line-height: 55px; */
		/* text-align: center; */
		font-size: 20px;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(7,70,144,0.3);
		margin-top:60px;
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 10px 20px;
		display: flex;
	}
	.button-g{
		width:46vw;
		height: 70rpx;
		background: linear-gradient(90deg, #FF8600, #FE2B2B);
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-left:13px;
	}
</style>