600 lines
13 KiB
Vue
600 lines
13 KiB
Vue
<template>
|
|
<view class="containers" :style="viewColor">
|
|
<view class="header">
|
|
|
|
<view class="search">
|
|
<text class="iconfont icon-xiazai5"></text>
|
|
<input type="text" placeholder="请输入商品名称" v-model="searchVal" @input="setValue" confirm-type="search"
|
|
@confirm="searchBut()" placeholder-class='placeholder'>
|
|
</view>
|
|
|
|
<view class="iconclose" @click="close">
|
|
<image src="@/static/images/wt_close.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
<view class="main">
|
|
<scroll-view scroll-y="true" @touchmove.stop>
|
|
<block>
|
|
<view v-if="bought.length" @touchmove="onTouchmove" id="goods" class="goods">
|
|
<view class="picTxt acea-row" v-for="(item, i) in bought" :key="i">
|
|
<view class="checkbox">
|
|
<text @click.stop="goodsCheck(item)" v-if="item.check"
|
|
class="iconfont icon-xuanzhong1"></text>
|
|
<text @click.stop="goodsCheck(item)" v-else
|
|
:class="checkedArr.length >=5 ? 'disabled': ''"
|
|
class="iconfont icon-weixuanzhong"></text>
|
|
</view>
|
|
<view class='pictrue'>
|
|
<image :src='item.image'></image>
|
|
</view>
|
|
|
|
<view class='text'>
|
|
<view class='line2 name'>{{item.store_name}}</view>
|
|
|
|
|
|
<view class="picTxt_one" v-if="item.attrValue.length>0">
|
|
<picker class="slecte" v-if="item.attrValue.length>1"
|
|
@change="bindPickerChange($event,item.attrValue,i)" :value="index"
|
|
:range="item.attrValue" :range-key="'sku'">
|
|
<view class="uni-input">{{item.attrValue[index].sku}}</view>
|
|
</picker>
|
|
|
|
<view class="" style="margin-top: 10rpx;">
|
|
库存:{{item.attrValue[index].stock}}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="picTxt_price">
|
|
<view class="price">
|
|
<span>出售价格</span>
|
|
<input type="text" :value="item.price" placeholder="输入出售价格"
|
|
@input="producrprice($event,i,item)" adjust-position=""
|
|
placeholder-style="color: #CCCCCC;" />
|
|
</view>
|
|
<view class="price_num">
|
|
<span>出售数量</span>
|
|
<subtractive v-if='item.number==0' style="margin-top: 10rpx;margin-left: 20rpx;"
|
|
class="step" :min="0" :max="item.attrValue[index].stock" :value="peicenumber"
|
|
:isMax="true" :isMin="true" index="11" @eventChange="numberChange($event,i)">
|
|
</subtractive>
|
|
|
|
<subtractive v-else style="margin-top: 10rpx;margin-left: 20rpx;" class="step"
|
|
:min="0" :max="item.attrValue[index].stock" :value="item.number" :isMax="true"
|
|
:isMin="true" index="11" @increment="incrementTotal($event,i,item)"
|
|
@eventChange="numberChange($event,i)"></subtractive>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="empty">
|
|
<image src="/static/images/no_thing.png"></image>
|
|
<text>暂无内容哦~</text>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
<view class="foot_bar">
|
|
<button class="confirm_btn" @click="submit">确定({{checkedArr.length}})</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Loading from '@/components/Loading/index.vue';
|
|
import subtractive from '@/components/subtractive/subtractive.vue';
|
|
|
|
import {
|
|
getCommunitygetOrderList
|
|
} from "@/api/trading-floor";
|
|
import {
|
|
mapGetters
|
|
} from "vuex";
|
|
export default {
|
|
props: {
|
|
checkedObj: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
},
|
|
computed: mapGetters(['viewColor']),
|
|
components: {
|
|
Loading,
|
|
subtractive
|
|
},
|
|
data() {
|
|
return {
|
|
isActive: 0,
|
|
loadedb: false,
|
|
loadingb: false,
|
|
loadedc: false,
|
|
loadingc: false,
|
|
loadeds: false,
|
|
loadings: false,
|
|
whereb: {
|
|
page: 1,
|
|
limit: 10,
|
|
keyword: '',
|
|
},
|
|
peicenumber: 0,
|
|
|
|
searchVal: "",
|
|
checked: [],
|
|
list: [],
|
|
|
|
bought: [],
|
|
|
|
checkedArr: [],
|
|
aryys: [],
|
|
// picker下拉数据源
|
|
storageCustomList: [{
|
|
CustGoodsCode: "TEST001",
|
|
CustGoodsName: "测试货主001",
|
|
IfBoxId: 0,
|
|
IfProductId: 0,
|
|
}, {
|
|
CustGoodsCode: "TEST002",
|
|
CustGoodsName: "测试货主002",
|
|
IfBoxId: 0,
|
|
IfProductId: 0,
|
|
}, {
|
|
CustGoodsCode: "TEST003",
|
|
CustGoodsName: "测试货主003",
|
|
IfBoxId: 0,
|
|
IfProductId: 0,
|
|
}],
|
|
index: 0,
|
|
pickerData: '请选择',
|
|
itstock: '',
|
|
|
|
};
|
|
},
|
|
watch: {
|
|
checkedObj: {
|
|
handler(n) {
|
|
|
|
this.checkedArr = JSON.parse(JSON.stringify(n||{}))
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.checkedArr = JSON.parse(JSON.stringify(this.checkedObj||{}))
|
|
this.aryys = JSON.parse(JSON.stringify(this.checkedObj||{}))
|
|
this.getBounht();
|
|
},
|
|
methods: {
|
|
//价格
|
|
producrprice(e, i, item) {
|
|
this.bought[i].price = e.detail.value
|
|
// 处理数据回显时, 调整数量, 选中的数据不改变的问题
|
|
let obj = this.checkedArr.find((item)=>item.product_id==this.bought[i].product_id);
|
|
obj ? obj.price = e.detail.value:null;
|
|
// this.$set(item, 'check', false);
|
|
// for (let i in this.checkedArr) {
|
|
// if (this.checkedArr[i].product_id == item.product_id) {
|
|
// this.checkedArr.splice(i, 1)
|
|
// }
|
|
// }
|
|
},
|
|
incrementTotal(e, i, item) {
|
|
// console.log(e, i, item)
|
|
// this.$set(item, 'check', false);
|
|
// for (let i in this.checkedArr) {
|
|
// if (this.checkedArr[i].product_id == item.product_id) {
|
|
// this.checkedArr.splice(i, 1)
|
|
// }
|
|
// }
|
|
},
|
|
// picker修改事件
|
|
bindPickerChange: function(e, storage, num) {
|
|
this.bought[num].attrValue[this.index].sku = storage[e.detail.value].sku
|
|
this.bought[num].attrValue[this.index].stock = storage[e.detail.value].stock
|
|
this.bought[num].product_attr_unique = storage[e.detail.value].unique
|
|
this.pickerData = storage[this.index] // 这里就是选中的对象
|
|
if (this.bought[num].attrValue[this.index].stock == 0) {
|
|
this.$util.Tips({
|
|
title: '库存不足'
|
|
});
|
|
}
|
|
},
|
|
|
|
// 点击关闭按钮
|
|
close() {
|
|
this.$emit('close');
|
|
},
|
|
numberChange(data, i) {
|
|
this.peicenumber = data.number;
|
|
this.bought[i].number = data.number
|
|
// 处理数据回显时, 调整数量, 选中的数据不改变的问题
|
|
let obj = this.checkedArr.find((item)=>item.product_id==this.bought[i].product_id);
|
|
obj ? obj.number = data.number:null;
|
|
},
|
|
|
|
tabs(index) {
|
|
this.isActive = index
|
|
this.$set(this.whereb, 'keyword', '');
|
|
this.searchVal = ''
|
|
this.searchBut()
|
|
},
|
|
onTouchmove(e) {
|
|
if (this.loadendb) return;
|
|
if (this.loadingb) return;
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('#goods').boundingClientRect(data => {
|
|
if (data.bottom < 1500 && data.top < 0) {
|
|
this.getBounht();
|
|
}
|
|
}).exec();
|
|
|
|
// 模拟触底刷新
|
|
},
|
|
|
|
|
|
setValue: function(event) {
|
|
this.$set(this.whereb, 'keyword', event.detail.value);
|
|
if (!event.detail.value) {
|
|
this.whereb.page = 1
|
|
this.loadedb = false
|
|
this.getBounht()
|
|
}
|
|
|
|
},
|
|
searchBut() {
|
|
this.bought = []
|
|
this.whereb.page = 1
|
|
this.loadedb = false
|
|
this.getBounht()
|
|
},
|
|
getBounht() {
|
|
var that = this;
|
|
// console.log('1111111', that.loadingb, that.loadedb)
|
|
if (that.loadingb || that.loadedb) return;
|
|
that.loadingb = true;
|
|
|
|
getCommunitygetOrderList(that.whereb).then(
|
|
res => {
|
|
that.loadingb = false;
|
|
that.loadedb = res.data.list.length < that.whereb.limit;
|
|
that.bought.push.apply(that.bought, res.data.list);
|
|
that.whereb.page = that.whereb.page + 1;
|
|
that.getInitchecked(that.bought);
|
|
},
|
|
error => {
|
|
that.$util.Tips({
|
|
title: error.msg
|
|
})
|
|
}
|
|
);
|
|
},
|
|
|
|
|
|
/*获取初始化选中的数据*/
|
|
getInitchecked(arr) {
|
|
let that = this;
|
|
arr.forEach((item, index) => {
|
|
that.$set(item, 'check', false);
|
|
that.checkedArr.forEach((val, i) => {
|
|
if (item.product_id == val.product_id) {
|
|
that.$set(item, 'check', true);
|
|
that.$set(item, 'number', val.number);
|
|
that.$set(item, 'price', val.price);
|
|
that.peicenumber=val.number
|
|
}
|
|
})
|
|
})
|
|
|
|
},
|
|
/*已选中的商品打钩*/
|
|
getCheckedGoods() {
|
|
this.checked = []
|
|
this.checkedArr.forEach((item, index) => {
|
|
this.checkedArr.push(item)
|
|
})
|
|
},
|
|
/*点击选中与否*/
|
|
goodsCheck(item) {
|
|
this.$set(item, 'check', !item.check);
|
|
if (item.check) {
|
|
|
|
if (this.peicenumber == 0) {
|
|
item.number = 1
|
|
}
|
|
if (!item.product_attr_unique) {
|
|
item.product_attr_unique = item.attrValue[0].unique
|
|
}
|
|
this.checkedArr.push(item)
|
|
} else {
|
|
this.checkedArr.splice(this.checkedArr.findIndex(itemn => ((itemn.product_id == item.product_id))), 1)
|
|
}
|
|
},
|
|
|
|
/*确定提交*/
|
|
submit() {
|
|
|
|
this.$emit('getProduct', this.checkedArr);
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.containers {
|
|
background: #ffffff;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
padding: 40rpx 0;
|
|
position: relative;
|
|
|
|
.header {
|
|
position: relative;
|
|
padding: 0 30rpx;
|
|
|
|
.title {
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
text {
|
|
position: relative;
|
|
margin: 0 50rpx;
|
|
color: #999999;
|
|
font-size: 30rpx;
|
|
|
|
&.on {
|
|
color: #333333;
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 40rpx;
|
|
height: 5rpx;
|
|
background: var(--view-theme);
|
|
position: absolute;
|
|
bottom: -10rpx;
|
|
left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconclose {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
|
|
position: absolute;
|
|
top: -150rpx;
|
|
right: 30rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
margin-top: 44rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 30rpx;
|
|
padding: 12rpx 30rpx 12rpx 66rpx;
|
|
position: relative;
|
|
|
|
.iconfont {
|
|
font-size: 24rpx;
|
|
color: #939393;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
left: 30rpx;
|
|
}
|
|
|
|
.placeholder {
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.sub_title {
|
|
color: #282828;
|
|
font-size: 26rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.iconfont {
|
|
color: #8A8A8A;
|
|
font-size: 28rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 30rpx;
|
|
}
|
|
}
|
|
|
|
scroll-view {
|
|
height: 650rpx;
|
|
}
|
|
|
|
.main {
|
|
height: 650rpx;
|
|
margin: 40rpx 0 80rpx;
|
|
padding: 0 30rpx;
|
|
}
|
|
}
|
|
|
|
.picTxt {
|
|
width: 100%;
|
|
padding: 25rpx 0;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
border-top: 2rpx solid #E7E6E4;
|
|
|
|
.picTxt_one {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.picTxt_one {
|
|
display: flex;
|
|
margin-top: 20rpx;
|
|
|
|
|
|
.slecte {
|
|
margin-right: 30rpx;
|
|
width: 280rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #959595;
|
|
background-color: #E7E6E4;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.picTxt_price {
|
|
display: flex;
|
|
margin-top: 37rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
|
|
.price {
|
|
display: flex;
|
|
margin-right: 15rpx;
|
|
|
|
input {
|
|
width: 210rpx;
|
|
text-align: center;
|
|
height: 70rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 7rpx 7rpx 7rpx 7rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
|
|
margin-left: 20rpx;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.price_num {
|
|
display: flex;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
margin-right: 30rpx;
|
|
|
|
.iconfont {
|
|
font-size: 38rpx;
|
|
color: #CCCCCC;
|
|
}
|
|
|
|
.icon-xuanzhong1 {
|
|
color: var(--view-theme);
|
|
}
|
|
|
|
.disabled {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.pictrue {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
width: 430rpx;
|
|
margin-left: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
position: relative;
|
|
height: 160rpx;
|
|
|
|
.name {
|
|
color: #282828;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.money {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
color: var(--view-priceColor);
|
|
font-size: 22rpx;
|
|
font-weight: bold;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.foot_bar {
|
|
width: 100%;
|
|
position: fixed;
|
|
// bottom: 54px;
|
|
left: 0;
|
|
padding: 20rpx 0;
|
|
z-index: 5;
|
|
|
|
.confirm_btn {
|
|
width: 710rpx;
|
|
height: 86rpx;
|
|
line-height: 86rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
background: var(--view-theme);
|
|
border-radius: 43rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
margin: 130rpx 0 150rpx;
|
|
text-align: center;
|
|
|
|
image,
|
|
uni-image {
|
|
display: inline-block;
|
|
width: 414rpx;
|
|
height: 305rpx;
|
|
}
|
|
|
|
text {
|
|
display: block;
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
</style> |