shop-applet/pages/product/addGood/components/price.vue

<template>
  <view class="container">
    <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>
      <view v-else>收起</view>
    </view>
    <!-- <view class="handle">
			<view class="button" @click="saveSingleSpecification">
				保存
			</view>
		</view> -->
  </view>
</template>

<script>
  import selectForm from '../../components/selectForm.vue';
  import { navigateTo, navigateBack, serialize, setStorage, getStorage } from '@/libs/uniApi.js';
  // 单规格商品 attrValue
  export default {
    components: {
      selectForm
    },
    props: ['product_id', 'bar_code', 'datas', 'show_sku'],
    data() {
      return {
        singleSpecification: {
          // sku: '', //名称
          price: '', // 售价
          cost: '', // 成本价
          stock: '', // 库存
          ot_price: '', // 市场价
          wholesale_price: '', // 批发价
          bar_code: '', // 商品条码
          weight: '', // 重量
          volume: '', // 体积
          // image: '',
          extension_one: '',
          extension_two: ''
        },
        moreThanFlag: true,
        formList: [{
            id: 1,
            label: '零售价',
            type: 'digit',
            model: 'price',
            holder: '请填写零售价',
            require: true,
          }, {
            id: 10,
            label: '库存',
            type: 'digit',
            model: 'stock',
            holder: '请填写库存',
            disable: true,
            require: true,
          }, 
        ],
        moreThanList: [{
            id: 2,
            label: '成本价',
            type: 'digit',
            holder: '请填写成本价',
            model: 'cost',
            require: false,
          },{
            id: 6,
            label: '重量',
            type: 'digit',
            holder: '请输入重量',
            model: 'weight',
            require: false,
          },
          {
            id: 7,
            label: '体积',
            type: 'digit',
            holder: '请输入体积',
            model: 'volume',
            require: false,
          },
          {
            id: 5,
            label: '商品条码',
            type: 'input',
            holder: '请填写商品条码',
            model: 'bar_code',
            require: false,
          },
          // {
          // 	id: 8,
          // 	label: '佣金（一级）',
          // 	type: 'digit',
          // 	holder: '请输入一级佣金',
          // 	model: 'extension_one'
          // },
          // {
          // 	id: 9,
          // 	label: '佣金（二级）',
          // 	type: 'digit',
          // 	holder: '请输入二级佣金',
          // 	model: 'extension_two'
          // }
        ],

      }
    },

    // watch: {
    //   singleSpecification: {
    //     handler(val, old) {
    //       console.log('新', val);
    //       this.singleSpecification = val;
    //     },
    //     deep: true
    //   },
    // },
    mounted() {
      this.singleSpecification.bar_code = this.$props.bar_code + '';
      if(this.$props.datas){
        // this.singleSpecification = this.$props.datas;
        // this.$set(this, 'singleSpecification', this.$props.datas);
        Object.keys(this.singleSpecification).forEach((key)=>{
          this.singleSpecification[key] = this.$props.datas[key]
        })
      }
      
      let userInfo = this.$store.state.app.userInfo;
      if(typeof userInfo == 'string') userInfo = JSON.parse(userInfo);
      // 市级供应链才需填写批发价
      if(userInfo.mer_info?.wholesale){
        this.formList.unshift({
          id: 3,
          label: '批发价',
          type: 'digit',
          holder: '请填写批发价',
          model: 'wholesale_price',
          require: true,
        })
      }
       
      // if (!this.$props.product_id) {
      //   this.formList.push({
      //     id: 10,
      //     label: '库存',
      //     type: 'digit',
      //     model: 'stock',
      //     holder: '请填写库存',
      //     disable: true
      //   })
      // }
    },
    methods: {
      selectMoreThan() {
        this.formList = this.formList.concat(this.moreThanList);
        this.moreThanFlag = false;
      },
      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(len, this.formList.length);
        else this.formList.splice(len-1, this.formList.length);
      },
      setDatas(data){
        console.log('收到', data);
        this.singleSpecification = {...data};
      },
      input(val) {
        this.singleSpecification = val
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 0 !important;
  }

  .more_than {
    background: #FFFFFF;
    border-radius: 0 0 10rpx 10rpx;
    margin: auto;
    // margin-top: 30rpx;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 710rpx;
    height: 84rpx;
    color: #333333;
    font-size: 30rpx;
  }

  .handle {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 126rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;

    .button {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 32rpx;
      width: 690rpx;
      height: 86rpx;
      background: #E93323;
      border-radius: 43rpx;
    }
  }
  .container_input{
    margin-top: 0;
    border-radius: 0;
  }
  .border-radius{
    border-radius: 10rpx 10rpx 0 0;
  }
</style>