效果图
<template>
<view>
<view class="rule-bg col" @click.stop="onClose"></view>
<view class="rule col ">
<view class="rules col">
<view class="rules-title row_b">
<view class="bolder">添加规格和数量(只)</view>
<view class="tc9 fz30" @click="onclear">清空</view>
</view>
<view class="row_s" style="align-items: flex-start;">
<view class="content-box">
<scroll-view scroll-y="true" style="height: 540rpx; width: 196rpx;">
<view :class="[curIndex==index?'content-recom':'','col_c','content-info']"
style="display:inline-block;" @click="onSwitch(item.id,index)"
v-for="(item,index) in tabList" :key="index">{{item.name}}
<!-- <view class="bt-line" v-if="curIndex==index"></view> -->
</view>
</scroll-view>
</view>
<scroll-view scroll-y="true" style="height: 540rpx; background: #fff;"
@scrolltolower="scrolltolower(curIndex)">
<view class="rule-nums row_b" v-for="(item,index) in list" :key="index">
<view class="nums-title row_b">
<view>{{item.goodsName}}</view>
</view>
<view class="nums-boxs row_c">
<view class="nums-img row_c" @click.stop='onDel(item,index,curIndex)'>
<image class="nums-img-img" src="/static/images/index/jian.png" mode='aspectFit'>
</view>
<input type="number" @input="onNum(item,index,curIndex)" v-model="item.num" class="nums-box ipt row_c">
<view class="nums-img1 row_c" @click.stop='onAdd(item,index,curIndex)'>
<image class="nums-img-img" src="/static/images/index/jia.png" mode='aspectFit'>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="rule-btns row_c">
<view class="row">
<view class="rule-btn row_c" @click.stop="onSure">添加</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ruleBox',
components: {},
props: {
//数组
list: {
type: Array,
default: null
},
idx: String,
wall: Array,
batterylist1: Array,
goods: Array
},
watch: {
list: {
handler(item, index) {
this.oblist = this.list
},
deep: true // 深度监听父组件传过来对象变化
},
batterylist1: {
handler(item, index) {
console.log(item, 123)
this.batterylist1.forEach(v => {
this.wall.list2.map(el => {
if (v.id == el.id) {
v.num = el.num
}
return el
})
})
},
deep: true // 深度监听父组件传过来对象变化
},
idx: {
handler(item, index) {
console.log(this.idx,"sadaasd")
this.curIndex = this.idx
},
deep: true // 深度监听父组件传过来对象变化
}
},
computed: {
},
created() {
console.log(this.idx,"asdas")
this.curIndex = this.idx
this.getTypeList()
},
data() {
return {
num: 0, // 电池数量
id: '', // 电池分类id
tabList: [],
curIndex: 0,
oblist: []
}
},
methods: {
getTypeList() {
let data = {}
this.base.post('type/list', {}).then(res => {
this.tabList = res.data
})
},
onSwitch(id, index) {
let self = this
this.curIndex = index
this.$emit('onSwitch', id);
// if(self.batterylist1.length>0&&index==1){
// this.list.map(v => {
// self.batterylist1.forEach(el=>{
// if(el.id==v.id){
// v.num=el.num
// }
// })
// return v
// })
// }
// if (index == 0) {
// this.oblist = this.wall.list
// // self.batterylist1 = this.oblist.filter(el => el.num > 0)
// }
// if (index == 1) {
// this.oblist = this.wall.list2
// // self.selList1 = this.oblist.filter(el => el.num > 0)
// }
// this.list.map(v => {
// if (v.num > 0) {
// if (index == 0) {
// self.batterylist1.push(v);
// }
// if (index == 1) {
// self.selList1.push(v);
// }
// }
// })
console.log(self.selList1, self.batterylist1)
// this.$emit('onSwitch', index);
},
scrolltolower(index) {
// this.$emit('scrolltolower', index);
},
// 点击Cell
onSure() {
// console.log(this.oblist)
// let selList = [];
// this.oblist.forEach(v => {
// if (v.num > 0) {
// selList.push(v);
// }
// })
// let self = this
// let selList = [];
// let batterylist = []
// this.wall.list.forEach(v => {
// if (v.num > 0) {
// selList.push(v);
// }
// })
// this.wall.list2.forEach(v => {
// if (v.num > 0) {
// batterylist.push(v);
// }
// })
// console.log(selList, batterylist)
this.$emit('click', );
},
// 数量
onChangeNum() {
if (!this.num) {
this.num = 1;
}
},
onNum(item,index,type){
console.log(item,type)
this.$emit('onNum',item,index,this.tabList[type] );
},
//清空
onclear() {
// this.list.map(el => {
// el.isActive = false
// this.$forceUpdate()
// return el
// })
// this.batterylist1 = []
// this.selList1 = []
// this.oblist.map(v => {
// v['num'] = 0
// })
this.$emit('clearAll', );
// this.$emit('clearAll',);
},
//增加数量
onAdd(item, index, type) {
this.$emit('onAddNum', item, index, this.tabList[type]);
},
//减少数量
onDel(item, index, type) {
this.$emit('onDelNum', item, index, this.tabList[type],type);
},
onClose() {
console.log(123)
this.$emit('close', {});
},
}
}
</script>
<style>
.rules-title {
border-radius: 32rpx 32rpx 0 0;
/* background: #FCCD2F; */
border-bottom: 1rpx solid #EEEEEE;
padding: 21rpx 28rpx 42rpx 28rpx;
/* width: 690rpx; */
font-size: 36rpx;
}
.rule-bg {
width: 100%;
position: fixed;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, .75);
z-index: 10;
}
.rule {
width: 100%;
min-height: 368rpx;
position: fixed;
bottom: 0;
/* top: 0; */
z-index: 112;
overflow-y: scroll;
justify-content: flex-end;
}
.rules {
/* position: relative; */
width: 100%;
padding-bottom: 140rpx;
/* margin-bottom: 1rpx; */
border-radius: 32rpx 32rpx 0 0;
background-color: #fff;
}
.rule-cancal {
position: absolute;
width: 26rpx;
height: 26rpx;
right: 30rpx;
top: 40rpx;
padding: 5rpx;
}
.rule-item-box {
padding: 40rpx 30rpx 20rpx;
width: 690rpx;
min-height: 170rpx;
border-bottom: 1rpx solid #F7F7F7;
}
.rule-item-img {
width: 160rpx;
height: 160rpx;
background-color: #f7f7f7;
border-radius: 6rpx;
}
.rule-item-right {
margin-left: 24rpx;
width: 400rpx;
height: 150rpx;
}
.rule-item-top {
width: 100%;
/* margin-top: 20rpx; */
}
.rule-item-price {
width: 100%;
font-size: 44rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F95452;
}
.rule-item-price1 {
margin-left: 26rpx;
font-family: PingFang-SC-Medium;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #666666;
text-decoration: line-through;
}
.rule-item-kc {
width: 100%;
font-size: 23rpx;
font-weight: 500;
color: #B3B3B3;
}
.rule-item-sel {
width: 100%;
margin-top: 12rpx;
font-size: 24rpx;
font-weight: 500;
color: #666;
line-height: 36rpx;
}
.rule-item-title {
font-family: PingFang-SC-Medium;
font-size: 30rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 36rpx;
width: 100%;
padding-left: 30rpx;
}
.rule-title {
margin-top: 36rpx;
margin-bottom: 10rpx;
font-size: 26rpx;
font-weight: bold;
color: #333333;
line-height: 36rpx;
padding-left: 50rpx;
}
.rule-boxs {
margin: 0 30rpx;
padding: 0rpx 0 20rpx;
flex-wrap: wrap;
width: 690rpx;
border-bottom: 1rpx #F7F7F7 solid;
}
.rule-box1 {
min-width: 70rpx;
padding: 0 18rpx;
height: 58rpx;
background: rgba(169, 205, 57, 0.1);
border: 1rpx solid #A9CD39;
border-radius: 10rpx;
margin: 10rpx 15rpx;
font-size: 24rpx;
font-weight: bold;
color: #222222;
}
.rule-box {
min-width: 70rpx;
padding: 0 18rpx;
height: 58rpx;
background: #F3F3F4;
border: 1px solid #F3F3F4;
border-radius: 10rpx;
margin: 10rpx 15rpx;
font-size: 24rpx;
/* font-weight: bold; */
color: #222;
}
.rule-nums {
min-height: 110rpx;
/* width: 554rpx; */
padding: 0 28rpx;
/* margin: 0rpx 30rpx; */
/* border-bottom: #EEEEEE 1rpx solid; */
}
.content-info{
width:140rpx ;
padding: 34rpx 28rpx;
/* text-align: center; */
}
.nums-title {
font-size: 32rpx;
/* font-weight: bold; */
color: #333333;
line-height: 36rpx;
margin-left: 10rpx;
}
.nums-boxs {
min-width: 180rpx;
height: 56rpx;
border-radius: 5rpx;
}
.nums-img {
width: 56rpx;
height: 56rpx;
background-color: #f7f7f7;
border-radius: 6rpx 0 0 6rpx;
font-size: 40rpx;
line-height: 56rpx;
}
.nums-img1 {
width: 56rpx;
height: 56rpx;
background-color: #f7f7f7;
border-radius: 0 6rpx 6rpx 0;
font-size: 40rpx;
line-height: 56rpx;
}
.nums-img-img {
width: 18rpx;
height: 18rpx;
}
.nums-box {
width: 70rpx;
height: 56rpx;
padding: 0;
margin: 0;
/* background-color: #f7f7f7; */
margin: 0 2rpx;
/* margin: 0 .1rpx; */
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: center;
}
.rule-btns {
height: 136rpx;
background: #fff;
position: fixed;
width: 100%;
background-color: #fff;
/* height: 80rpx;
bottom: 40rpx; */
border-top: 1rpx solid #EEEEEE;
}
.rule-btn {
width: 640rpx;
height: 88rpx;
background: #FCCD2F;
border-radius: 16rpx;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.a1 {
-webkit-transform: translate(0, 0);
-webkit-animation: animations 0.5s ease-out;
transform: translate(0, 0);
animation: animations 0.5s ease-out;
}
.content-box {
background: #F7F7F7;
/* border-radius: 32rpx 32rpx 0 0; */
/* margin-top: -24rpx;
height: 87rpx; */
font-size: 28rpx;
font-weight: bold;
/* padding: 0 0 0 26rpx; */
}
.content-recom {
/* font-size: 32rpx; */
/* font-weight: bold; */
color: #FCCD2F;
background: #fff;
}
.bt-line {
width: 64rpx;
height: 8rpx;
background: #FCCD2F;
border-radius: 8rpx;
margin: 5rpx auto 0;
}
@-webkit-keyframes animations {
0% {
-webkit-transform: translate(0, 100%);
opacity: .5;
}
100% {
-webkit-transform: translate(0, 0);
opacity: 1;
}
}
@keyframes animations {
0% {
-webkit-transform: translate(0, 100%);
opacity: 0.5;
}
100% {
-webkit-transform: translate(0, 0);
opacity: 1;
}
}
</style>
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
