更新多规格添加

pages/product/addGood/addGood.vue

@@ -212,6 +212,7 @@
         setFormData: {
           store_name: '',
           imageList: [],
+          attrValue: [],
           cate_name: '', //平台名称
           unit_name: '', //商品单位
           cate_id: '', // 平台分类id
@@ -317,6 +318,7 @@
       initDataEditData() {
         this.setFormData = {
           imageList: [],
+          attrValue: [],
           specification: '',
           image: '', //主图
           slider_image: '', // 轮播图
@@ -372,9 +374,7 @@
               imageList: res.data.content?.image
             }
           })
-          // 多规格
+          // 单规格
-          if (this.setFormData.spec_type == 1) {
-          }
           if (this.setFormData.spec_type == 0) {
             this.$refs.priceRef.setDatas(res.data.attrValue[0]);
           }
@@ -611,7 +611,8 @@
         uni.navigateTo({
           url:'/pages/product/addGood/specGood?product_id=' + this.product_id,
           success: (e) => {
-            uni.$emit()
+            // console.log(this.setFormData.attrValue, e);
+            e.eventChannel.emit('updateAttrValue', this.setFormData.attrValue);
           }
         })
       }

pages/product/addGood/components/price.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container">
-    <select-form style="border-radius: 10rpx 10rpx 0 0;" :platformClassification="formList" :form="singleSpecification"
+    <select-form :class="show_sku?'container_input':'border-radius'" :platformClassification="formList" :form="singleSpecification"
       @input="input"></select-form>
     <view class="more_than" @click="moreThanFlag?selectMoreThan():spliceMoreThan()">
       <view v-if="moreThanFlag">更多</view>
@@ -22,10 +22,11 @@
     components: {
       selectForm
     },
-    props: ['product_id', 'bar_code'],
+    props: ['product_id', 'bar_code', 'datas', 'show_sku'],
     data() {
       return {
         singleSpecification: {
+          sku: '', //名称
           price: '', // 售价
           cost: '', // 成本价
           stock: '', // 库存
@@ -106,27 +107,25 @@
       }
     },
 
-    watch: {
+    // watch: {
-      singleSpecification: {
+    //   singleSpecification: {
-        handler(val, old) {
+    //     handler(val, old) {
-          this.singleSpecification = val;
+    //       console.log('新', val);
-          this.$emit('updateCode', val.bar_code);
+    //       this.singleSpecification = val;
-        },
+    //     },
-        deep: true
+    //     deep: true
-      },
+    //   },
-    },
+    // },
     mounted() {
-      if (getStorage('addGoodsFormData').image) {
+      this.singleSpecification.bar_code = this.$props.bar_code + '';
-        this.singleSpecification.image = getStorage('addGoodsFormData').image;
+      if(this.$props.datas){
-      }
+        // this.singleSpecification = this.$props.datas;
-      if (getStorage('singleSpecification')) {
+        // this.$set(this, 'singleSpecification', this.$props.datas);
-        Object.keys(this.singleSpecification).forEach(item => {
+        Object.keys(this.singleSpecification).forEach((key)=>{
-          if (getStorage('singleSpecification')[item]) {
+          this.singleSpecification[key] = this.$props.datas[key]
-            this.singleSpecification[item] = getStorage('singleSpecification')[item]
-          }
         })
       }
-      this.singleSpecification.bar_code = this.$props.bar_code + '';
+      
       let userInfo = this.$store.state.app.userInfo;
       if(typeof userInfo == 'string') userInfo = JSON.parse(userInfo);
       // 市级供应链才需填写批发价
@@ -160,9 +159,10 @@
       spliceMoreThan() {
         this.moreThanFlag = true;
         // this.formList.splice(!this.$props.product_id ? 2 : 1, this.formList.length);
+        let len = 4;
         if(this.$store.state.app?.userInfo?.mer_info?.type_code=="TypeSupplyChain")
-          this.formList.splice(4, this.formList.length);
+          this.formList.splice(len, this.formList.length);
-        else this.formList.splice(3, this.formList.length);
+        else this.formList.splice(len-1, this.formList.length);
       },
       setDatas(data){
         this.singleSpecification = data;
@@ -217,4 +217,11 @@
       border-radius: 43rpx;
     }
   }
+  .container_input{
+    margin-top: 0;
+    border-radius: 0;
+  }
+  .border-radius{
+    border-radius: 10rpx 10rpx 0 0;
+  }
 </style>

pages/product/addGood/specGood.vue

@@ -1,34 +1,229 @@
 <template>
   <view>
-    <block v-for="item in attrValue">
+    <avatar style="height: 1px;" @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx">
-      <priceComponent ref="priceRef" :product_id="item.product_id" :bar_code="item.code" @updateCode="updateCode">
+    </avatar>
+    <block v-for="(item,index) in attrValue" :key="item.uuid">
+      <view class="popup_group">
+        <view class="popup_group_item head_close">
+          <view class="popup_group_item_label"><text style="color: #e93323;font-size: 28rpx;">{{'* '}}</text>规格名称</view>
+          <view class="popup_group_item_value"><input v-model="item.sku" type="text"
+              placeholder="请填写规格名称" /></view>
+          <view class="delete_btn" @click="deleteByIndex(index)">
+            <image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
+          </view>
+        </view>
+        <view class="popup_group_item">
+          <view class="popup_group_item_label">规格图片</view>
+          <view style="width: 120rpx;height: 120rpx;position: relative;">
+            <block v-if="item.image">
+              <image  @click="clk(item.uuid)" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;" :src="item.image"></image>
+              <view class="close-icon" @click="deleteImage(item)">
+                <image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
+              </view>
+            </block>
+            <view v-else style="width: 120rpx;height: 120rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #ccc;border-radius: 10rpx;">
+              <image @click="clk(item.uuid)" style="height: 60rpx;width: 60rpx;" src="../static/images/creamer.png"></image>
+            </view>
+          </view>
+        </view>
+      </view>
+      <priceComponent ref="priceRef" :product_id="product_id" :datas="item" :bar_code="item.bar_code" @updateCode="updateCode" :show_sku="true">
       </priceComponent>
     </block>
+    <button class="add_btn" @click="addAttrValue">点击添加规格</button>
+    <view class="submit">
+      <button class="btn" @click="submitAttr">确认</button>
+    </view>
+    <u-modal title="警告" content="删除后数据不可恢复,是否确认删除?" :show="showDelete" show-cancel-button @cancel="showDelete=false" @confirm="deleteAttr()"></u-modal>
   </view>
 </template>
 
 <script>
   import priceComponent from "./components/price.vue";
+  import avatar from "@/components/yq-avatar/yq-avatar.vue";
+  import { TOKENNAME, HTTP_REQUEST_URL } from '@/config/app.js';
+import { Toast } from "../../../libs/uniApi";
   export default {
     components:{
-      priceComponent
+      priceComponent,
+      avatar
     },
     data(){
       return{
         attrValue: [],
-        product_id: ''
+        product_id: '',
+        uuid: '', //选择图片的id
+        deleteIndex: '', //删除图片下标
+        showDelete: false,
+        userInfo: {}
       }
     },
     onLoad(options) {
-      this.product_id = options.product_id
+      this.product_id = options.product_id;
+      this.attrValue = JSON.parse(uni.getStorageSync('attrValue')||'[]');   
+      this.getOpenerEventChannel().once('updateAttrValue', (e)=>{
+        e.forEach((item, index)=>{
+          item.uuid=index + '-' + Math.floor(Math.random() * 10000);
+        })
+        this.attrValue = e;
+        uni.setStorageSync('attrValue', JSON.stringify(e));
+      })
+      this.userInfo = this.$store.state.app.userInfo;
+      if(typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
     },
     methods:{
       updateCode(e){
         console.log(e);
+      },
+      // 提交数据
+      submitAttr(){
+        let flag = true;
+        this.attrValue.forEach((item,index)=>{
+          Object.keys(this.$refs.priceRef[index].singleSpecification).forEach(key=>{
+            item[key]=this.$refs.priceRef[index].singleSpecification[key];
+          })
+          console.log(item);
+          if(flag){
+            if(item.price<=0)flag=false;
+            if(item.stock<=0)flag=false;
+            if(item.cost<=0)flag=false;
+            if(item.procure_price<=0&&this.userInfo.mer_info.type_code=='TypeSupplyChain')flag=false;
           }
+        })
+        if(!flag)return Toast('请填写完整信息')
+      },
+      // 选择图片
+      clk(uuid) {
+        this.uuid = uuid;
+        let avatar = this.$refs.avatar;
+        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 ' + this.$store.state.app.token
+          },
+          success: (uploadFileRes) => {
+            let imgData = JSON.parse(uploadFileRes.data)
+            let item = this.attrValue.find(item=>item.uuid==this.uuid);
+            item.image = imgData.data.path;
+          },
+          complete(res) {
+            // console.log(res)
+          }
+        });
+      },
+      getImgName(name) {
+        this.imgName = name
+      },
+      // 删除图片
+      deleteImage(item) {
+        item.image = '';
+      },
+      // 添加规格
+      addAttrValue(){
+        this.attrValue.push({
+          uuid: this.attrValue.length + '-' + Math.floor(Math.random() * 10000)
+        })
+      },
+      // 预删除
+      deleteByIndex(index){
+        this.deleteIndex = index;
+        this.showDelete = true;
+      },
+      // 删除规格
+      deleteAttr(){
+        this.attrValue.splice(this.deleteIndex, 1);
+        this.showDelete = false;
+      }
+    },
+    onBackPress: () => {
+      
     }
   }
 </script>
 
-<style>
+<style lang="scss">
+@import './scss/index.scss';
+.popup_group{
+  margin-bottom: 0;
+}
+.popup_group_item{
+  border-bottom: 1rpx solid #eee;
+  padding-left: 18rpx !important;
+  .close-icon{
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30rpx;
+    height: 30rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(#000, 0.4);
+    color: #fff;
+  }
+  
+}
+.head_close{
+  position: relative;
+  
+  .delete_btn{
+    position: absolute;
+    top: -15rpx;
+    right: -15rpx;
+    width: 40rpx;
+    height: 40rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: red;
+    color: #fff;
+    border-radius: 50%;
+  }
+  
+}
+.add_btn{
+  width: 710rpx;
+  margin: 28rpx auto;
+  margin-bottom: 160rpx;
+  font-size: 30rpx;
+  padding: 28rpx;
+  color: #333;
+}
+.submit{
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  padding: 20rpx 0;
+  
+  .btn{
+    width: 694rpx;
+    height: 80rpx;
+    margin: 0 auto;
+    background: #e93323;
+    border-radius: 43px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    color: #ffffff;
+  }
+}
 </style>