shop-applet/pages/product/addGoods/modifyPrice.vue

695 lines
18 KiB
Vue

<template>
<view class="container">
<view class="multiSpecifica_container" v-for="(item, index) in multiSpecificationList" :key="index">
<view style="background: #fff;">
<view class="multiSpecifica_container_imageItem" @click="clk(index)">
<view class="multiSpecifica_container_imageItem_label">
<view v-if="isBatchOperation" class="batchOperation" :class="{ selectEd: item.select }" @click.stop="selectGoods(item)">
<view><span class="iconfont" v-if="item.select">&#xe64e;</span></view>
</view>
<view>商品图</view>
</view>
<view class="multiSpecifica_container_imageItem_value">
<image :src="item.image" v-if="item.image" class="myimg2"></image>
<view class="hanlerImage" v-else>
<view><image src="../static/images/creamer.png" mode="widthFix"></image></view>
<view>添加图片</view>
</view>
</view>
</view>
<view class="multiSpecifica_container_item">
<view class="multiSpecifica_container_item_label flex-start">规格信息</view>
<view class="multiSpecifica_container_item_value">
<text class="attributes" v-for="(v,i) in Object.values(item.detail)" :key="i">{{v}}</text>
</view>
</view>
<view class="multiSpecifica_container_item">
<view class="multiSpecifica_container_item_label flex-start">售价</view>
<view class="multiSpecifica_container_item_value"><input v-model="item.price" type="number" placeholder="请填写商品售价" /></view>
</view>
<view class="multiSpecifica_container_item">
<view class="multiSpecifica_container_item_label flex-start">成本价</view>
<view class="multiSpecifica_container_item_value"><input v-model="item.cost" type="number" placeholder="请填写商品成本价" /></view>
</view>
<view class="multiSpecifica_container_item">
<view class="multiSpecifica_container_item_label flex-start">原价</view>
<view class="multiSpecifica_container_item_value"><input v-model="item.ot_price" type="number" placeholder="请填写商品原价" /></view>
</view>
<view v-if="item.more_thanFlag">
<view class="multiSpecifica_container_item">
<view class="multiSpecifica_container_item_label flex-start">商品条码</view>
<view class="multiSpecifica_container_item_value"><input v-model="item.bar_code" type="text" placeholder="请填写商品条码" /></view>
</view>
<view class="multiSpecifica_container_item">
<view class="multiSpecifica_container_item_label flex-start">重量</view>
<view class="multiSpecifica_container_item_value"><input v-model="item.weight" type="number" value="" placeholder="请填写商品重量" /></view>
</view>
<view class="multiSpecifica_container_item">
<view class="multiSpecifica_container_item_label flex-start">体积</view>
<view class="multiSpecifica_container_item_value"><input v-model="item.volume" type="number" placeholder="请填写商品体积" /></view>
</view>
<view class="multiSpecifica_container_item">
<view class="multiSpecifica_container_item_label flex-start">佣金(一级)</view>
<view class="multiSpecifica_container_item_value"><input v-model="item.extension_one" type="number" placeholder="请填写商品佣金" /></view>
</view>
<view class="multiSpecifica_container_item">
<view class="multiSpecifica_container_item_label flex-start">佣金(二级)</view>
<view class="multiSpecifica_container_item_value"><input v-model="item.extension_two" type="number" placeholder="请填写商品佣金" /></view>
</view>
</view>
</view>
<view class="more_than" @click="moreThan(item)" v-if="!item.more_thanFlag">更多</view>
</view>
<view class="handle" v-if="isBatchOperation">
<view class="select_all" :class="{ selectAllEd: selectAllFlag }" @click="selectAll">
<view><text class="iconfont" v-if="selectAllFlag">&#xe64e;</text></view>
<view>全选</view>
</view>
<view class="change" @click="openChangeModel">修改</view>
</view>
<view class="handle" v-else>
<view class="handle_button" @click="batchOperation">批量操作</view>
<view class="handle_button save" @click="saveAttrValue">保存</view>
</view>
<!-- 弹框部分 -->
<uni-popup ref="changePopup" type="bottom">
<view class="changePopup_container">
<view class="changePopup_container_title">
<view>批量修改</view>
<view @click="closeChangePopup"><span class="iconfont">&#xe62f;</span></view>
</view>
<scroll-view :scroll-y="true" class="scrollViewCon">
<view class="changePopup_container_content">
<view class="changePopup_container_content_item">
<view class="changePopup_container_content_item_label">售价</view>
<view class="changePopup_container_content_item_value"><input v-model="batchData.price" type="number" placeholder="0.00" /></view>
</view>
<view class="changePopup_container_content_item">
<view class="changePopup_container_content_item_label">成本价</view>
<view class="changePopup_container_content_item_value"><input v-model="batchData.cost" type="number" placeholder="0.00" /></view>
</view>
<view class="changePopup_container_content_item">
<view class="changePopup_container_content_item_label">原价</view>
<view class="changePopup_container_content_item_value"><input v-model="batchData.ot_price" type="number" placeholder="0.00" /></view>
</view>
<view class="popup_moreThan" @click="popupOpenModel = !popupOpenModel" v-if="!popupOpenModel">
<text>展开</text>
<text class="iconfont">&#xe8ca;</text>
</view>
<view v-if="popupOpenModel">
<view class="changePopup_container_content_item">
<view class="changePopup_container_content_item_label">商品条码</view>
<view class="changePopup_container_content_item_value"><input v-model="batchData.bar_code" type="text" placeholder="0.00" /></view>
</view>
<view class="changePopup_container_content_item">
<view class="changePopup_container_content_item_label">重量</view>
<view class="changePopup_container_content_item_value"><input v-model="batchData.weight" type="text" placeholder="0.00" /></view>
</view>
<view class="changePopup_container_content_item">
<view class="changePopup_container_content_item_label">体积</view>
<view class="changePopup_container_content_item_value"><input v-model="batchData.volume" type="text" placeholder="0.00" /></view>
</view>
<view class="changePopup_container_content_item">
<view class="changePopup_container_content_item_label">佣金(一级)</view>
<view class="changePopup_container_content_item_value"><input v-model="batchData.extension_one" type="text" placeholder="0.00" /></view>
</view>
<view class="changePopup_container_content_item">
<view class="changePopup_container_content_item_label">佣金(二级)</view>
<view class="changePopup_container_content_item_value"><input v-model="batchData.extension_two" type="text" placeholder="0.00" /></view>
</view>
</view>
</view>
</scroll-view>
<view class="handle_popup"><view class="handle_popup_button" @click="saveBachData">确认</view></view>
</view>
</uni-popup>
<avatar @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx"></avatar>
</view>
</template>
<script>
import { Toast, setStorage, navigateBack, getStorage } from '../../../libs/uniApi.js';
import avatar from "@/components/yq-avatar/yq-avatar.vue";
import {TOKENNAME, HTTP_REQUEST_URL} from '@/config/app.js';
import store from '@/store';
export default {
components: {
avatar
},
data() {
return {
popupOpenModel: false,
selectAllFlag: false,
isBatchOperation: false, // 是否开始批量操作
multiSpecificationList: [],
addMultiSpecification: [],
attrObj: '',
index: 0,
imgName: "",
batchData: {
price: '', //售价
cost: '', // 成本价
ot_price: '', // 原价
bar_code: '', // 商品条码
weight: '', // 重量
volume: '', // 体积
extension_one: '', // 一级佣金
extension_two: '' //二级拥挤
},
a:{}
};
},
onLoad(opt) {
this.attrObj = opt.code;
},
onShow() {
this.initData();
},
watch: {
multiSpecificationList: {
handler(val) {
if (val.filter(item => item.select).length == val.length) {
this.selectAllFlag = true;
} else {
this.selectAllFlag = false;
}
},
deep: true
},
batchData:{
handler(val){
this.multiSpecificationList.bar_code=this.attrObj
setStorage('attrValue', this.multiSpecificationList);
},
deep:true,
}
},
methods: {
initData() {
if (getStorage('attrValue')) {
this.multiSpecificationList = getStorage('attrValue');
} else {
this.multiSpecificationList = this.attrFormat(getStorage('modifyPriceData').template_value);
}
this.multiSpecificationList.forEach(item => {
this.$set(item, 'more_thanFlag', false);
this.$set(item, 'select', false);
this.$set(item,'bar_code',this.attrObj)
});
},
// 选择图片
selectImage(item) {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
item.image = res.data.path;
});
},
clk(index) {
setStorage('attrValue', this.multiSpecificationList);
let avatar = this.$refs.avatar;
this.index = index;
avatar.fChooseImg(1,{selWidth: '350upx', selHeight: '350upx', inner: true});
},
doUpload(rsp) {
// console.log(rsp);
let that = this;
uni.uploadFile({
url: HTTP_REQUEST_URL + '/api/upload/image/field',
filePath: rsp.path,
name: 'field',
formData: {
'filename': rsp.path,
'name': that.imgName
},
header: {
// #ifdef MP
"Content-Type": "multipart/form-data",
// #endif
[TOKENNAME]: 'Bearer ' + store.state.app.token
},
success: (uploadFileRes) => {
// console.log(uploadFileRes.data);
let imgData = JSON.parse(uploadFileRes.data)
that.multiSpecificationList[that.index]['image'] = imgData.data.path;
},
complete(res) {
// console.log(res)
// console.log(that.multiSpecificationList);
}
});
},
getImgName(name){
this.imgName = name
},
moreThan(item) {
item.more_thanFlag = true;
},
// 批量操作
batchOperation() {
this.isBatchOperation = true;
this.multiSpecificationList.forEach(item => {
this.$set(item, 'select', false);
});
},
// 点击全选
selectAll() {
this.selectAllFlag = !this.selectAllFlag;
this.multiSpecificationList.forEach(item => {
if (this.selectAllFlag) {
this.$set(item, 'select', true);
} else {
this.$set(item, 'select', false);
}
});
},
// 单选
selectGoods(item) {
item.select = !item.select;
},
// 打开修改弹框
openChangeModel() {
if (!this.multiSpecificationList.filter(item => item.select).length) {
Toast('请选择商品');
return;
}
this.$refs.changePopup.open();
},
// 保存批量修改得数据
saveBachData() {
Object.keys(this.batchData).forEach(item => {
this.multiSpecificationList.forEach(val => {
if (val.select) {
val[item] = this.batchData[item];
}
});
});
this.isBatchOperation = false;
this.$refs.changePopup.close();
},
// 保存数据
saveAttrValue() {
setStorage('attrValue', this.multiSpecificationList);
navigateBack(1);
},
// 关闭修改弹框
closeChangePopup() {
this.$refs.changePopup.close();
},
attrFormat(arr) {
let data = [];
const res = [];
return format(arr);
function format(arr) {
if (arr.length > 1) {
arr.forEach((v, i) => {
if (i === 0) data = arr[i]['detail'];
const tmp = [];
data.forEach(function(vv) {
arr[i + 1] &&
arr[i + 1]['detail'] &&
arr[i + 1]['detail'].forEach(g => {
const rep2 = (i !== 0 ? '' : arr[i]['value'] + '_$_') + vv + '-$-' + arr[i + 1]['value'] + '_$_' + g;
tmp.push(rep2);
if (i === arr.length - 2) {
const rep4 = {
image: '',
price: 0,
cost: 0,
ot_price: 0,
bar_code: '',
weight: 0,
volume: 0,
brokerage: 0,
brokerage_two: 0
};
rep2.split('-$-').forEach((h, k) => {
const rep3 = h.split('_$_');
if (!rep4['detail']) rep4['detail'] = {};
rep4['detail'][rep3[0]] = rep3.length > 1 ? rep3[1] : '';
});
// if(rep4.detail !== 'undefined' && rep4.detail !== null){
Object.values(rep4.detail).forEach((v, i) => {
rep4['value' + i] = v;
});
// }
res.push(rep4);
}
});
});
data = tmp.length ? tmp : [];
});
} else {
const dataArr = [];
arr.forEach((v, k) => {
v['detail'].forEach((vv, kk) => {
dataArr[kk] = v['value'] + '_' + vv;
res[kk] = {
image: '',
price: 0,
cost: 0,
ot_price: 0,
bar_code: '',
weight: 0,
volume: 0,
brokerage: 0,
brokerage_two: 0,
detail: { [v['value']]: vv }
};
// if(res[kk].detail !== 'undefined' && res[kk].detail !== null){
Object.values(res[kk].detail).forEach((v, i) => {
res[kk]['value' + i] = v;
});
// }
});
});
data.push(dataArr.join('$&'));
}
return res;
}
}
}
};
</script>
<style lang="scss" scoped>
.container {
padding-top: 20rpx;
padding-bottom: 140rpx;
}
.multiSpecifica_container {
width: 710rpx;
margin: auto;
border-radius: 10px;
margin-bottom: 30rpx;
> view {
padding: 0 30rpx;
background: #ffffff;
}
&_imageItem {
display: flex;
padding: 17rpx 0 15rpx 0;
border-bottom: 1px solid #eeeeee;
&_label {
flex: 0.25;
white-space: nowrap;
padding-top: 10rpx;
display: flex;
align-items: center;
.batchOperation {
> view {
border: 1px solid #cccccc;
border-radius: 50%;
width: 38rpx;
height: 38rpx;
margin-right: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.selectEd {
> view {
border: none;
border-radius: 50%;
width: 38rpx;
height: 38rpx;
margin-right: 20rpx;
background: #e93323;
color: #fff;
}
}
}
&_value {
flex: 0.75;
overflow: hidden;
image {
width: 120rpx;
max-height: 120rpx;
border-radius: 8rpx;
}
}
}
.attributes{
display: inline-block;
margin-right: 3rpx;
&:not(:last-child) {
&:after{
content: '/';
display: inline-block;
}
}
}
&_item {
display: flex;
align-items: center;
padding: 32rpx 0;
border-bottom: 1px solid #eeeeee;
&_label {
flex: 0.25;
white-space: nowrap;
}
&_value {
flex: 0.75;
image {
width: 120rpx;
}
}
}
}
.more_than {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
margin-top: 20rpx;
// width: 710rpx;
height: 84rpx;
background: #ffffff;
border-radius: 10rpx;
}
.handle {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 126rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
z-index: 10;
&_button {
width: 330rpx;
height: 86rpx;
border-radius: 43rpx;
background: #fd6523;
color: #ffffff;
font-size: 32rpx;
display: flex;
align-items: center;
justify-content: center;
}
.save {
background: #e93323;
}
.select_all {
display: flex;
align-items: center;
> view:nth-child(1) {
border: 1px solid #cccccc;
border-radius: 50%;
width: 38rpx;
height: 38rpx;
margin-right: 24rpx;
display: flex;
align-items: center;
justify-content: center;
}
> view:nth-child(2) {
color: #282828;
font-size: 28rpx;
font-weight: 500;
}
}
.change {
display: flex;
align-items: center;
justify-content: center;
color: #e93323;
width: 180rpx;
height: 70rpx;
border: 1px solid #e93323;
border-radius: 35rpx;
font-size: 30rpx;
}
.selectAllEd {
> view:nth-child(1) {
background: #e93323;
border: none;
color: #fff;
}
}
}
.changePopup_container {
background: #fff;
border-radius: 16rpx 16rpx 0 0;
.scrollViewCon {
max-height: 668rpx;
}
&_title {
display: flex;
justify-content: flex-end;
padding: 40rpx 20rpx;
position: relative;
> view:nth-child(1) {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
> view:nth-child(2) {
position: relative;
z-index: 10;
}
}
&_content {
padding: 0 30rpx;
&_item {
margin-bottom: 20rpx;
height: 80rpx;
background: #f5f5f5;
border-radius: 10rpx;
display: flex;
align-items: center;
padding: 0 30rpx;
&_label {
flex: 0.3;
color: #666666;
font-size: 26rpx;
}
&_value {
flex: 0.7;
display: flex;
justify-content: flex-end;
input {
text-align: right;
}
}
}
.popup_moreThan {
margin-top: 18rpx;
display: flex;
align-items: center;
justify-content: flex-end;
color: #e93323;
padding-right: 20rpx;
> span:nth-child(1) {
display: inline-block;
margin-right: 10rpx;
font-size: 24rpx;
}
}
}
.handle_popup {
height: 126rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
&_button {
width: 580rpx;
height: 86rpx;
background: #e93323;
border-radius: 43rpx;
color: #ffffff;
font-size: 32rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.hanlerImage {
position: relative;
width: 126rpx;
height: 126rpx;
border: 1px solid #dddddd;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8rpx;
text-align: center;
> image {
height: 100%;
margin: auto;
}
> view:nth-child(1) {
height: 37rpx;
margin-bottom: 8rpx;
display: flex;
justify-content: center;
image {
width: 45rpx;
display: block;
}
}
> view:nth-child(2) {
text-align: center;
color: #bbbbbb;
font-size: 24rpx;
}
}
</style>