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

<template>
  <view class="container">
    <select-form style="border-radius: 10rpx 10rpx 0 0;" :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'],
    data() {
      return {
        singleSpecification: {
          price: '', // 售价
          cost: '', // 成本价
          stock: '', // 库存
          ot_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,
          }, {
            id: 2,
            label: '成本价',
            type: 'digit',
            holder: '请填写成本价',
            model: 'cost',
            require: true,
          },
          {
            id: 3,
            label: '批发价',
            type: 'digit',
            holder: '请填写批发价',
            model: 'ot_price',
            require: true,
          }
        ],
        moreThanList: [{
            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) {
          this.singleSpecification = val;
          this.saveSingleSpecification();
          this.$emit('updateCode', val.bar_code);
        },
        deep: true
      },
    },
    // onLoad(option) {
    // 	console.log(option);
    // 	this.singleSpecification.bar_code=option.code
    // },
    // onShow() {
    // 	if(getStorage('addGoodsFormData').image) {
    // 		this.singleSpecification.image = getStorage('addGoodsFormData').image;
    // 	}
    // 	if(getStorage('singleSpecification')) {
    // 		Object.keys(this.singleSpecification).forEach(item => {
    // 			if(getStorage('singleSpecification')[item]) {
    // 				this.singleSpecification[item] = getStorage('singleSpecification')[item]
    // 			}
    // 		})
    // 	}
    // },
    // beforeDestroy() {
    // 	console.log('123');
    // 	uni.removeStorage({
    // 		key: 'singleSpecification'
    // 	});
    // },
    mounted() {
      if (getStorage('addGoodsFormData').image) {
        this.singleSpecification.image = getStorage('addGoodsFormData').image;
      }
      if (getStorage('singleSpecification')) {
        Object.keys(this.singleSpecification).forEach(item => {
          if (getStorage('singleSpecification')[item]) {
            this.singleSpecification[item] = getStorage('singleSpecification')[item]
          }
        })
      }
      this.singleSpecification.bar_code = this.$props.bar_code + '';
      // if (!this.$props.product_id) {
      //   this.formList.push({
      //     id: 10,
      //     label: '库存',
      //     type: 'digit',
      //     model: 'stock',
      //     holder: '请填写库存',
      //     disable: true
      //   })
      // }
    },
    destroyed() {
      setStorage('singleSpecification', {});
    },
    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);
        this.formList.splice(4, this.formList.length);
      },
      input(val) {
        this.singleSpecification = val
      },
      // 保存
      saveSingleSpecification() {
        setStorage('singleSpecification', this.singleSpecification);
        // navigateBack(1);
      }
    }
  }
</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;
    }
  }
</style>