388 lines
7.4 KiB
Vue
388 lines
7.4 KiB
Vue
<template>
|
|
<view>
|
|
<view class="dataInfo">
|
|
<view class="dataList" v-for="(item,index) in list" :key="index">
|
|
<view class="info-upper">
|
|
<checkbox-group @change="checkClick(item)">
|
|
<checkbox :checked="item.checked" />
|
|
</checkbox-group>
|
|
<view class="details">
|
|
|
|
<view class="text">
|
|
<text><span style="padding-right: 20rpx; color: #a6a6a6;">类型名称</span>{{item.typeName}}</text>
|
|
<text><span style="padding-right: 20rpx; color: #a6a6a6;">规格型号</span>{{item.specNo}}</text>
|
|
<text><span style="padding-right: 20rpx; color: #a6a6a6;">待入库数量</span>{{item.waitIn}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lower-btns">
|
|
<view
|
|
style="background-color: #3888ff;"
|
|
>
|
|
<uni-icons style="color: #fff;" type="eye" size="36"></uni-icons>
|
|
查看
|
|
</view>
|
|
<view
|
|
style="background-color: #1bd30b;"
|
|
@click="openPopup"
|
|
>
|
|
<uni-icons style="color: #fff;" type="cart" size="36"></uni-icons>
|
|
入库
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <button @click="delCart">删除</button> -->
|
|
<view class="buy">
|
|
<view class="checked">
|
|
<checkbox-group @tap="checkAll">
|
|
<checkbox :checked="allChecked" />
|
|
</checkbox-group>
|
|
<text>全选</text>
|
|
</view>
|
|
<view class="total">
|
|
<view class="bill" @click="finishCart">
|
|
<text>结算</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-popup
|
|
ref="popup"
|
|
type="center"
|
|
:mask-click="false"
|
|
>
|
|
<view class="popup">
|
|
<view class="pop-top">
|
|
<h4>入库</h4>
|
|
<uni-icons
|
|
style="color: #AAAAAA; font-weight: bold;"
|
|
type="closeempty"
|
|
size="32"
|
|
@click="closePopup"
|
|
>
|
|
</uni-icons>
|
|
</view>
|
|
<h5 style="width: 85%; margin: 2vh auto; font-weight: normal; text-align: center;">请选择入库方式</h5>
|
|
<view class="select-area">
|
|
<uni-data-checkbox
|
|
v-model="scanType"
|
|
:localdata="scanRange"
|
|
@change="scanChange"
|
|
></uni-data-checkbox>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
allChecked: false,
|
|
inputs: "",
|
|
list: [{
|
|
typeName: '手扶机角磨',
|
|
specNo: 'sjm-5',
|
|
waitIn: '2',
|
|
checked: false
|
|
},
|
|
{
|
|
typeName: '机动角磨',
|
|
specNo: 'cjm-3',
|
|
waitIn: '8',
|
|
checked: false
|
|
},
|
|
{
|
|
typeName: '卸扣',
|
|
specNo: 'DG-5',
|
|
waitIn: '11',
|
|
checked: false
|
|
}
|
|
],
|
|
totalFine: '',
|
|
totalGoods: [],
|
|
scanType: '',
|
|
scanRange: [
|
|
{ text: '二维码', value: '1' },
|
|
{ text: 'RFID', value: '2' }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
// 单个商品的选择
|
|
checkClick(item) {
|
|
item.checked = !item.checked
|
|
if (!item.checked) {
|
|
this.allChecked = false
|
|
} else {
|
|
// 判断每一个商品是否是被选择的状态
|
|
const goods = this.list.every(item => {
|
|
return item.checked === true
|
|
})
|
|
if (goods) {
|
|
this.allChecked = true
|
|
} else {
|
|
this.allChecked = false
|
|
}
|
|
}
|
|
},
|
|
//全选、全不选
|
|
checkAll() {
|
|
this.allChecked = !this.allChecked
|
|
if (this.allChecked) {
|
|
this.list.map(item => {
|
|
item.checked = true
|
|
})
|
|
} else {
|
|
this.list.map(item => {
|
|
item.checked = false
|
|
})
|
|
}
|
|
},
|
|
finishCart () {
|
|
let that = this
|
|
that.totalGoods = that.list.filter((item) => {
|
|
return item.checked == true
|
|
})
|
|
console.log(that.totalGoods);
|
|
},
|
|
openPopup () {
|
|
this.$refs.popup.open()
|
|
},
|
|
closePopup () {
|
|
this.$refs.popup.close()
|
|
},
|
|
scanChange (e) {
|
|
let that = this
|
|
console.log(e);
|
|
if (e.detail.value == '1') {
|
|
that.closePopup()
|
|
that.scanType = ''
|
|
uni.scanCode({
|
|
success: (res) => {
|
|
console.log(res);
|
|
uni.navigateTo({
|
|
url: `/pages/newInAfterScan/newInAfterScan?result=${res.result}`
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
console.log('id');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
/deep/uni-checkbox .uni-checkbox-input {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
|
|
border-color: #ddd;
|
|
color: #fff !important;
|
|
background-color: #2DCF8C !important;
|
|
}
|
|
|
|
/deep/uni-checkbox .uni-checkbox-input {
|
|
border-color: #ddd;
|
|
}
|
|
|
|
/deep/uni-checkbox .uni-checkbox-input:hover {
|
|
border-color: #ddd;
|
|
}
|
|
|
|
.search {
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.search .searchIput {
|
|
background-color: #e6e6e6;
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
border-radius: 50rpx;
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search .searchIput input {
|
|
font-size: 26rpx;
|
|
width: 100%;
|
|
color: grey;
|
|
}
|
|
|
|
.search .searchIput image {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
|
|
|
|
|
|
.dataInfo {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
|
|
.dataInfo .dataList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-bottom: 2px solid #F1F1F1;
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
.info-upper{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.lower-btns{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.lower-btns>view{
|
|
box-sizing: border-box;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 15rpx;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.dataInfo .dataList .details {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
font-size: 0;
|
|
}
|
|
|
|
.dataInfo .dataList .details .img image {
|
|
width: 200rpx;
|
|
height: 140rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.dataInfo .dataList .details .text text {
|
|
color: #000;
|
|
font-size: 23rpx;
|
|
display: block;
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
.dataInfo .dataList .details .text {
|
|
color: red;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.dataInfo .dataList .action text {
|
|
font-size: 25rpx;
|
|
color: #000;
|
|
border: 1px solid #C8C7CC;
|
|
display: inline-block;
|
|
line-height: 50rpx;
|
|
width: 60rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dataInfo .dataList .action text:nth-child(2) {
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.buy {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 95%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.buy .checked {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.buy .checked text {
|
|
font-size: 25rpx;
|
|
color: #000;
|
|
padding: 0 12rpx;
|
|
}
|
|
|
|
.buy .total {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.buy .total .price {
|
|
padding-right: 20rpx;
|
|
|
|
}
|
|
|
|
.buy .total .price text {
|
|
font-size: 27rpx;
|
|
color: #C8C7CC;
|
|
display: inline-block;
|
|
}
|
|
|
|
.buy .total .price text:last-child {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.buy .total .bill text {
|
|
font-size: 25rpx;
|
|
color: #fff;
|
|
display: inline-block;
|
|
background-color: red;
|
|
line-height: 70rpx;
|
|
width: 150rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.popup{
|
|
width: 80vw;
|
|
height: 20vh;
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
background: linear-gradient(#D9E7FE, #fff, #fff, #fff);
|
|
}
|
|
|
|
.popup>.pop-top{
|
|
width: 100%;
|
|
height: 5vh;
|
|
box-sizing: border-box;
|
|
padding: 0 25rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.popup>.select-area{
|
|
width: 85%;
|
|
margin: 40rpx auto;
|
|
.uni-data-checklist .checklist-group[data-v-84d5d996]{
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style> |