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.
267 lines
6.2 KiB
267 lines
6.2 KiB
3 months ago
|
<template>
|
||
|
|
<view class="page-css">
|
||
|
|
<view class="list_box">
|
||
|
|
<view class="list_item" v-for="(item,index) in listData" :key="item.id">
|
||
|
|
<view class="name">
|
||
|
|
<text class="name_text">{{item.name}}</text>
|
||
|
|
<text class="code_text">{{item.code}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="">规格：{{item.specifications}}</view>
|
||
|
|
<view class="model_box">
|
||
|
|
<span>型号：{{item.modelNum}}</span>
|
||
|
|
<view class="add_box">
|
||
|
|
<u-number-box v-model="item.addNum" @change="valChange(item)"></u-number-box>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="fixed_box">
|
||
|
|
<view class="" style="position: relative;margin-left: 20rpx;" @click="showPopup">
|
||
|
|
<u-badge type="error" :count="selectedNum" :offset="[0,2]"></u-badge>
|
||
|
|
<!-- <image src="../" alt="" style="width: 80rpx;height: 80rpx;" /> -->
|
||
|
|
<image src="../../static/images/shop.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
|
||
|
|
</view>
|
||
|
|
<view class="button_box">
|
||
|
|
<u-button type="primary" :plain="true" style="width: 100%;height: 100%;" @click="addCommodity()">确定</u-button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-popup
|
||
|
|
v-model="showSelected"
|
||
|
|
mode="bottom"
|
||
|
|
border-radius="30"
|
||
|
|
:mask-close-able="false"
|
||
|
|
:closeable="true"
|
||
|
|
@close="closePop"
|
||
|
|
>
|
||
|
|
<view class="popup-content">
|
||
|
|
<view class="title_box">商品清单</view>
|
||
|
|
<scroll-view scroll-y="true" :style="{height:selectedNum > 3 ? '530rpx' : ''}">
|
||
|
|
<view class="selected_box">
|
||
|
|
<view class="selected_box_item" v-for="(item,index) in selectedArr" :key="item.id">
|
||
|
|
<view class="name">
|
||
|
|
<view class="name_left">
|
||
|
|
<text class="name_text">{{item.name}}</text>
|
||
|
|
<text class="code_text" style="margin-left: 20rpx;">{{item.code}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="delete_box" @click="deleteNum(item)">
|
||
|
|
<image style="width: 32rpx;height: 32rpx;" src="../../static/images/delete.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="">规格：{{item.specifications}}</view>
|
||
|
|
<view class="model_box">
|
||
|
|
<span>型号：{{item.modelNum}}</span>
|
||
|
|
<view class="add_box">
|
||
|
|
<u-number-box v-model="item.addNum" @change="valChange(item)"></u-number-box>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</u-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default{
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
listData:[],
|
||
|
|
selectedNum:0,
|
||
|
|
showSelected:false,
|
||
|
|
selectedArr:[],
|
||
|
|
optionArr:[],
|
||
|
|
formData:{},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onLoad(option) {
|
||
|
|
this.optionArr = option.selectArr ? JSON.parse(option.selectArr) : [],
|
||
|
|
this.selectedArr = JSON.parse(JSON.stringify(this.optionArr))
|
||
|
|
this.selectedNum = this.optionArr.length
|
||
|
|
this.formData = {
|
||
|
|
date:option.date ? option.date : '',
|
||
|
|
address:option.address ? option.address : ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
getList(){
|
||
|
|
console.log('111111111111111111111')
|
||
|
|
this.$u.api.getAllGoods().then(res =>{
|
||
|
|
if(this.optionArr.length == 0){
|
||
|
|
res.data.forEach(item =>{
|
||
|
|
item.addNum = 0
|
||
|
|
})
|
||
|
|
this.listData = res.data
|
||
|
|
}else{
|
||
|
|
res.data.map(item =>{
|
||
|
|
item.addNum = 0
|
||
|
|
this.optionArr.map(item1=>{
|
||
|
|
if(item.id == item1.id){
|
||
|
|
item.addNum = item1.addNum
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
this.listData = res.data
|
||
|
|
console.log('listData====================',this.listData)
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
deleteNum(item){
|
||
|
|
item.addNum = 0
|
||
|
|
this.selectedNum = this.listData.filter(item => item.addNum != 0).length
|
||
|
|
this.selectedArr = this.listData.filter(item => item.addNum != 0)
|
||
|
|
},
|
||
|
|
addNum(item){
|
||
|
|
item.addNum = item.addNum + 1
|
||
|
|
},
|
||
|
|
valChange(value){
|
||
|
|
this.listData.map(item =>{
|
||
|
|
if(item.id == value.id){
|
||
|
|
item.addNum = value.addNum
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.selectedNum = this.listData.filter(item => item.addNum != 0).length
|
||
|
|
this.selectedArr = this.listData.filter(item => item.addNum != 0)
|
||
|
|
},
|
||
|
|
addCommodity(){
|
||
|
|
if(this.selectedArr.length == 0){
|
||
|
|
uni.showToast({ title: "至少选择一个商品", icon: "none" });
|
||
|
|
}else{
|
||
|
|
uni.redirectTo({
|
||
|
|
url:'/pages/commodity/addOrder?selectArr=' + JSON.stringify(this.selectedArr) + '&date=' + this.formData.date + '&address=' + this.formData.address
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
showPopup(){
|
||
|
|
if(this.selectedNum && this.selectedNum != 0){
|
||
|
|
this.showSelected = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
closePop(){
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.page-css {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0;
|
||
|
|
padding-top: 20rpx;
|
||
|
|
padding-bottom: 140rpx;
|
||
|
|
background: rgba(239, 239, 239, 1);
|
||
|
|
|
||
|
|
.list_box{
|
||
|
|
width: 95%;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
.list_item{
|
||
|
|
padding: 20rpx;
|
||
|
|
width: 100%;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
|
||
|
|
.name{
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.name_text{
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.code_text{
|
||
|
|
margin-left: 30rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.model_box{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.add_box{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.add_item{
|
||
|
|
width: 30rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border: 1px solid #000;
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
.fixed_box{
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 120rpx;
|
||
|
|
background: #fff;
|
||
|
|
display: flex;
|
||
|
|
z-index: 300000;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.button_box{
|
||
|
|
width: 200rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
margin-right: 40rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-content {
|
||
|
|
position: relative;
|
||
|
|
background: #fff;
|
||
|
|
box-shadow: 0px, -2px rgba(0, 0, 0, 0.25);
|
||
|
|
padding: 32rpx;
|
||
|
|
position: relative;
|
||
|
|
padding-bottom: 140rpx;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.title_box{
|
||
|
|
font-size: 18px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected_box{
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
max-height: 530rpx;
|
||
|
|
|
||
|
|
|
||
|
|
.selected_box_item{
|
||
|
|
padding: 20rpx;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background: #e6e6e6;
|
||
|
|
.name{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.model_box{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|