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.
378 lines
11 KiB
378 lines
11 KiB
<template>
|
|
<view>
|
|
<view class="contendt">
|
|
<!-- <view class="bureau">
|
|
<img src="http://image.bjkeyware.com/static/shopping/shop.png" alt="">
|
|
<p>购物车竟然是空的</p>
|
|
<view class="button-g" @click="toinde">去首页逛逛</view>@change="checkboxChange(item)"
|
|
</view> -->
|
|
<!-- <view></view>@change="checkboxChange(item)"-->
|
|
<view v-if="cartrows&&cartrows.length>0">
|
|
<checkbox-group @change="checkboxChange">
|
|
<view class="catall" v-for="(item,key) of cartrows" :key="key" >
|
|
<u-swipe-action :show="item.show" :index="key" @click="rightclick(item.toolId)" btn-width="150" @open="delopen" :options="options">
|
|
<view style="display: flex;align-items: center;justify-content: space-between;margin-left: 15px;">
|
|
<checkbox :value="item.name" :checked="item.isselect" >
|
|
</checkbox>
|
|
<!-- @click="tooldetils(item.toolId)" -->
|
|
<view style="display: flex;justify-content: space-between;align-items: center;width:78vw;margin: 18px 10px 18px 0;">
|
|
<img class="deyalimg" :src="item.imgs" alt="">
|
|
<view style="color:#808080;font-size:22rpx;width:70%;margin-right:10px;">
|
|
<p style="color: #1A1A1A;font-size:32rpx;font-weight: bold;margin:-3px 0 10px 0;">{{item.name}}</p>
|
|
<view style="display: flex;margin:3px 0 10px 0;">
|
|
<u-tag v-if="item.toolType==1" text="规格：按次" plain bgColor='transparent' style="margin-right:10px" size='mini'> </u-tag>
|
|
<u-tag v-if="item.toolType==2" text="规格：按月" plain bgColor='transparent' style="margin-right:10px" size='mini'> </u-tag>
|
|
<u-tag :text="'交付方式：'+item.deliverType" plain bgColor='transparent' type="warning" size='mini'> </u-tag>
|
|
</view>
|
|
<view style="display: flex;justify-content: space-between;">
|
|
<p style="color: #FD461A;">
|
|
<span style="font-size: 13px;">¥</span>
|
|
<span style="font-size: 18px;">{{item.price}}</span>
|
|
</p>
|
|
<!-- <u-number-box v-model="item.amount" @change="valChange(item)"></u-number-box> -->
|
|
<uni-number-box v-model="item.amount" :min="1" :max="999" @change.stop="valChange(item)" @minus.native.stop='minuschange(item,$event)' @plus.native.stop="pluschange(item,$event)"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-swipe-action>
|
|
</view>
|
|
</checkbox-group>
|
|
<view style="height:70px;"></view>
|
|
</view>
|
|
<view v-else class="bureau">
|
|
<img src="http://image.bjkeyware.com/static/shopping/shop.png" alt="">
|
|
<p>购物车竟然是空的</p>
|
|
<view class="button-g" @click="toinde">去首页逛逛</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="cartrows.length>0" class="submitt">
|
|
<checkbox-group @change="allcheckboxChange">
|
|
<checkbox :checked="allselect" >全选</checkbox>
|
|
</checkbox-group>
|
|
<view style="display: flex;align-items: center;">
|
|
<p>合计：</p>
|
|
<p style="color: #FD461A;font-size: 18px;">¥{{allperice}}</p>
|
|
<view class="button-g" style="width:25vw;" @click="popcilk('determine')">去下单</view>
|
|
</view>
|
|
</view>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
cartrows: [],
|
|
cartnumber:'1',
|
|
allselect:false,
|
|
allperice:0,
|
|
allselectdata:[],//当前选中的商品
|
|
options: [
|
|
{
|
|
text: '删除',
|
|
style: {
|
|
backgroundColor: '#dd524d',
|
|
// backgroundImage: 'url("/static/index/index.png")'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onShow() {
|
|
let wxUserInfo = uni.getStorageSync('wxUserInfo');
|
|
if(wxUserInfo){
|
|
this.getcartlist();
|
|
// console.log('onShow')
|
|
}else{
|
|
this.cartrows=[]
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.getcartlist();
|
|
// console.log('onLoad')
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
//获取购物车数据
|
|
getcartlist(){
|
|
this.http.quickGet(`/my/shoppingCart`,true).then(res => {
|
|
console.log('购物车',res)
|
|
this.cartrows=res.data.rows
|
|
if(this.cartrows&&this.cartrows.length>0){
|
|
this.cartrows.forEach(item=>{
|
|
item.show=false
|
|
if(item.name=='代码静态分析工具'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/11.png'
|
|
}else if(item.name=='源代码安全检测工具'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/5.png'
|
|
}else if(item.name=='C/C++单元测试工具'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/2.png'
|
|
}else if(item.name=='接口测试工具'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/12.png'
|
|
}else if(item.name=='JAVA单元测试工具'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/tool/1.png'
|
|
}else if(item.name=='功能测试工具AutoFun'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/3.png'
|
|
}else if(item.name=='代码组成分析平台'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/tool/4.png'
|
|
}else if(item.name=='性能测试工具'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/6.png'
|
|
}else if(item.name=='自鉴-交互式应用安全测试系统IAST'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/tool/3.png'
|
|
}else if(item.name=='Web应用安全测试工具'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/tool/2.png'
|
|
}else if(item.name=='资产识别及漏洞管理工具'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/zc.png'
|
|
}else if(item.name=='性能测试工具AutoLoad'){
|
|
item.imgs='http://image.bjkeyware.com/static/index/xn.png'
|
|
}
|
|
})
|
|
this.getallperice();
|
|
}
|
|
})
|
|
},
|
|
//打开右滑动框显示删除功能
|
|
delopen(index){
|
|
console.log('odc---',index)
|
|
this.cartrows[index].show = true;
|
|
this.cartrows.map((val, idx) => {
|
|
console.log('idx---',idx)
|
|
if(index != idx){
|
|
this.cartrows[idx].show = false;
|
|
}
|
|
|
|
this.cartrows= JSON.parse(JSON.stringify(this.cartrows));
|
|
|
|
})
|
|
console.log('this.cartrows---',this.cartrows)
|
|
},
|
|
// 删除功能
|
|
rightclick(index){
|
|
console.log('index---',index)
|
|
this.http.quickDelete(`/my/shoppingCart/${index}`,true).then(res=>{
|
|
console.log('购物车删除',res)
|
|
this.getcartlist();
|
|
})
|
|
},
|
|
//跳转商品详情页
|
|
tooldetils(id){
|
|
uni.showToast({ title: '该功能开发中', icon: 'none', duration: 1000 });
|
|
// uni.navigateTo({
|
|
// url: `/pages/index/toolleasing/tooldetails?id=${id}`
|
|
// })
|
|
},
|
|
toinde(){
|
|
uni.switchTab({
|
|
url: '../index/index'
|
|
})
|
|
},
|
|
// 单个选择的按钮
|
|
checkboxChange(e) {
|
|
this.allperice=0
|
|
// console.log('change',e,this.cartrows);
|
|
var items = this.cartrows,
|
|
values = e.detail.value;
|
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
|
const item = items[i]
|
|
if(values.includes(item.name)){
|
|
this.$set(item,'isselect',true)
|
|
}else{
|
|
this.$set(item,'isselect',false)
|
|
}
|
|
}
|
|
|
|
console.log('合计：---，',this.allperice)
|
|
// 商品是否全部勾选，判断全选与否状态
|
|
var offcartrows = []
|
|
this.cartrows.forEach(item => item.isselect == true? offcartrows.push(item): '')
|
|
// let allChecks = offcartrows.every(item => item.isselect == true)
|
|
// if(offcartrows.length>0){
|
|
// offcartrows.forEach(items=>{
|
|
// this.allperice+=parseFloat(items.price*items.amount)
|
|
// })
|
|
// }
|
|
console.log('当前勾选的---，',offcartrows)
|
|
this.allselectdata=offcartrows
|
|
this.getallperice();
|
|
if(offcartrows.length==this.cartrows.length){
|
|
this.allselect=true
|
|
}else{
|
|
this.allselect=false
|
|
}
|
|
|
|
},
|
|
// 全选按钮
|
|
allcheckboxChange(e){
|
|
console.log('全选',e,this.cartrows)
|
|
this.allperice=0
|
|
if(e.detail.value.length == 0){
|
|
this.cartrows.map(item => this.$set(item, 'isselect', false))
|
|
this.allselect=false
|
|
this.allselectdata=[]
|
|
}else{
|
|
this.cartrows.map(item => this.$set(item, 'isselect', true))
|
|
this.allselect=true
|
|
this.allselectdata=this.cartrows
|
|
this.cartrows.forEach(item=>{
|
|
this.allperice+=parseFloat(item.price*item.amount)
|
|
})
|
|
}
|
|
|
|
console.log('总价',this.allperice)
|
|
},
|
|
//计算总价
|
|
getallperice(){
|
|
// console.log('当前所选',this.allselectdata)
|
|
|
|
this.allselectdata.forEach(items=>{
|
|
this.allperice+=parseFloat(items.price*items.amount)
|
|
})
|
|
},
|
|
//-号按钮
|
|
minuschange(item,e){
|
|
if(item.amount==1){
|
|
console.log('您好数量不能在减少了')
|
|
uni.showToast({ title: '您好数量不能在减少了', icon: 'none', duration:3000 });
|
|
}
|
|
if(item.isselect){
|
|
this.allperice-=item.price
|
|
}
|
|
|
|
// console.log('-号按钮: ',item,e)
|
|
|
|
},
|
|
//+号按钮
|
|
pluschange(item,e){
|
|
if(item.isselect){
|
|
this.allperice+=item.price
|
|
}
|
|
// console.log('+号按钮: ',item,e,this.allselectdata)
|
|
// 购物车加减号的时候需要新增一个修改当前商品数量的接口
|
|
},
|
|
//加减框输入值的方法
|
|
valChange(val){
|
|
this.allperice=0
|
|
// console.log('val: ',val,)
|
|
if(val.isselect){
|
|
// console.log('输入框事件---',this.allselectdata)
|
|
this.allselectdata.forEach(items=>{
|
|
this.allperice+=parseFloat(items.price*items.amount)
|
|
})
|
|
}
|
|
|
|
},
|
|
popcilk(){
|
|
console.log('this.allselectdata--',this.allselectdata)
|
|
if(this.allselectdata.length==0){
|
|
this.$refs.uToast.show({
|
|
title: '请选择要下单的商品',
|
|
type: 'warning',
|
|
duration: 2000,
|
|
})
|
|
return;
|
|
}else{
|
|
this.$refs.uToast.show({
|
|
title: '功能暂未开放',
|
|
type: 'info',
|
|
duration: 2000,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.contendt{
|
|
width:100vw;
|
|
padding: 13px;
|
|
/* margin:16px 5vw 20px 5vw; */
|
|
}
|
|
.bureau{
|
|
width: 49%;
|
|
/* height: 210rpx; */
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
padding: 10px 5px;
|
|
margin: 23vh auto;
|
|
}
|
|
.bureau img{
|
|
width:28vw;
|
|
height:28vw;
|
|
margin:10px auto;
|
|
}
|
|
.bureau p{
|
|
font-size:30rpx;
|
|
color: #969494;
|
|
margin:10px 0 15px 0px
|
|
}
|
|
.button-g{
|
|
width:280rpx;
|
|
height:75rpx;
|
|
background: linear-gradient(90deg, #5EA6FD, #1A81F9);
|
|
border-radius:43rpx;
|
|
text-align: center;
|
|
line-height:75rpx;
|
|
color: #FFFFFF;
|
|
font-size: 33rpx;
|
|
margin-left:13px;
|
|
}
|
|
.catall{
|
|
width: 100%;
|
|
/* height: 20vw; */
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
/* padding:35rpx 25rpx; */
|
|
|
|
margin-bottom: 20px;
|
|
}
|
|
.deyalimg{
|
|
width: 15vw;
|
|
height: 15vw;
|
|
margin: 0 7px;
|
|
}
|
|
.submitt {
|
|
height:70px;
|
|
/* font-size: 20px; */
|
|
background: #FFFFFF;
|
|
box-shadow: -4px 7px 18px 0px rgba(248, 164, 54, 0.33);
|
|
margin-top:60px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 99;
|
|
}
|
|
/* .u-checkbox__label{
|
|
margin-right: 0;
|
|
} */
|
|
checkbox .wx-checkbox-input {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
/* border-radius: 50%; */
|
|
}
|
|
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
|
background: #1578ED;
|
|
border-color:transparent;
|
|
}
|
|
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
line-height: 20rpx;
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
background: transparent;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
-webkit-transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
|
|
</style>
|
|
|