shop-applet/pages/product/addGood/specGood.vue

<template>
  <view>
    <avatar style="height: 1px;" @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx">
    </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,
      avatar
    },
    data(){
      return{
        attrValue: [],
        product_id: '',
        uuid: '', //选择图片的id
        deleteIndex: '', //删除图片下标
        showDelete: false,
        userInfo: {}
      }
    },
    onLoad(options) {
      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 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>