<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"></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"></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"></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"></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>