软测宝小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
keysass_app/pages/index/addshoppingcart.vue

135 lines
3.2 KiB

<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>