front-end/hdApp/src/admin/goodsManage/add.vue

<template>
  <div class="app-content">
    <!-- 商品基本信息 -->
    <form @submit="formSubmit">
      <div class="module-com input-line-wrap">
        <tui-list-cell class="line-cell" :hover="false">
          <div class="tui-title required">名称</div>
          <input
            v-model="form.goodsName"
            placeholder-class="phcolor"
            class="tui-input"
            name="goodsName"
            placeholder="请输入"
            maxlength="50"
            type="text"
          />
        </tui-list-cell>
        <tui-list-cell class="line-cell" :hover="false">
          <div class="tui-title">已售</div>
          <input
            v-model="form.sold"
            placeholder-class="phcolor"
            class="tui-input"
            name="sold"
            placeholder="请输入已售数量"
            maxlength="50"
            type="number"
          />
        </tui-list-cell>
        <tui-list-cell class="line-cell" :hover="false">
          <div class="tui-title">库存</div>
          <input
            v-model="form.stock"
            placeholder-class="phcolor"
            class="tui-input"
            name="stock"
            placeholder="请输入库存，留空表示库存充足"
            maxlength="50"
            type="number"
          />
        </tui-list-cell>
        <tui-list-cell class="line-cell category-wrap" :hover="false">
          <div class="tui-title">类型</div>
          <div class="tui-input">
            <block v-for="(item, index) in categoryData" :key="index">
              <button
                class="admin-button-com"
                :class="[(form.categoryIdList.includes(item.id + '')||form.categoryIdList.includes(item.id*1)) ? '' : 'default']"
                @click="selCategoryFn(item)"
              >{{ item.categoryName || '暂无' }}</button>
            </block>
          </div>
        </tui-list-cell>
        <tui-list-cell class="line-cell" :hover="false">
          <div class="tui-title required">价格</div>
          <input
            v-model="form.price"
            placeholder-class="phcolor"
            class="tui-input"
            name="price"
            placeholder="请输入"
            maxlength="50"
            type="number"
          />
          <div class="tui-prompt">元</div>
        </tui-list-cell>
        <!-- <tui-list-cell class="line-cell" :arrow="true">
					<div class="tui-title">分类</div>
					<div v-if="form.receiveFullAddress" class="tui-input">{{ form.receiveFullAddress }}</div>
					<div v-else class="tui-placeholder">请选择</div>
        </tui-list-cell>-->
        <tui-list-cell class="line-cell" :hover="false">
          <div class="tui-title">节日涨价</div>
          <label for="autoPrice" class="tui-input" @click="autoRiseChange(form.autoRise)">
            <checkbox
              id="autoPrice"
              class="ljd-checkbox"
              :checked="form.autoRise == 1"
              style="transform: scale(0.7,0.7);"
            ></checkbox>
            <span>需要</span>
          </label>
        </tui-list-cell>
        <tui-list-cell class="line-cell" :hover="false">
          <div class="tui-title">配送方式</div>
          <label for="sendType" class="tui-input" @click="needSendChange(form.needSend)">
            <checkbox
              id="sendType"
              class="ljd-checkbox"
              :checked="form.needSend == 1"
              @change="giftChange"
              style="transform: scale(0.7,0.7);"
            ></checkbox>
            <span>到店自取</span>
          </label>
        </tui-list-cell>
        <tui-list-cell class="line-cell" :hover="false">
          <div class="tui-title">运费</div>
          <radio-group class="tui-input flex-center-between" @change="freightChange">
            <label class="list" for="customLink">
              <radio
                id="customLink"
                value="0"
                :checked="form.freightType == 0"
                style="transform: scale(0.8,0.8);"
              />
              <span class="checkbox-text">按距离收费</span>
            </label>
            <label class="list" for="goodsLink">
              <radio
                id="goodsLink"
                value="1"
                :checked="form.freightType == 1"
                style="transform: scale(0.8,0.8);"
              />
              <span class="checkbox-text">免运费</span>
            </label>
          </radio-group>
        </tui-list-cell>
      </div>
      <!-- 商品图片 -->
      <div class="module-com input-line-wrap goods-wrap">
        <div class="module-tit">
          <span>商品图片</span>
          <span class="app-color-3">（最多上传4张）</span>
        </div>
        <div class="module-det">
          <app-uploader ref="appUploader" :imgList.sync="form.shopImg" :isMain="true" :num="4" />
        </div>
      </div>
      <!-- 商品简介 -->
      <div class="module-com input-line-wrap summary-wrap">
        <div class="module-tit">商品简介</div>
        <div class="module-det" style="padding-bottom: 10px">
          <textarea
            v-model="form.briefContent"
            class="goods-summary"
            placeholder-class="phcolor"
            placeholder="请输入商品简介"
          />
        </div>
      </div>
      <!-- button -->
      <div class="app-footer">
        <button class="admin-button-com middle default" formType="submit" @click="status = 0">加入仓库</button>
        <button class="admin-button-com middle blue" formType="submit" @click="status = 1">上架</button>
      </div>
    </form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TuiListCell from "@/components/plugin/list-cell";
import AppUploader from "@/components/app-uploader";
const form = require("@/utils/formValidation.js");
import { getCategory } from "@/utils/config";
import { getDetailB, addB, updateB } from "@/api/goods";
export default {
  name: "goods-add",
  components: {
    TuiListCell,
    AppUploader
  },
  data() {
    return {
      status: 1,
      form: {
        goodsName: "",
        stock: "",
        price: "",
        categoryIdList: [],
        autoRise: "1",
        needSend: "0",
        freightType: "0",
        shopImg: [],
        briefContent: ""
      }
    };
  },
  computed: {
    ...mapGetters({ categoryData: "getCategory" })
  },
  onLoad() {
    // this.init()
  },
  watch:{
    categoryData(val){
      
    },
    'form.categoryIdList'(val){
    }
  },
  methods: {
    init() {
      getCategory()
        .then(() => {
        if (this.option.id) {
          uni.setNavigationBarTitle({
              title: '修改商品'
          });
          this._getDet();
        }
      });
    },
    _getDet() {
      return getDetailB({ id: this.option.id })
        .then(res => {
        if (this.$util.isEmpty(res.data)) {
          return;
        }
        Object.keys(this.form).forEach((i, index) => {
          this.form[i] = res.data[i];
        });
        if (this.form.stock == -1) {
          this.$set(this.form, "stock", "");
        }
        this.$set(this.form, "sold", res.data.sold);
        this.$set(this.form, "shopImg", res.data.imgList)
      });
    },
    // 确认
    confirmFn() {
      if (this.form.categoryIdList == 0) {
        this.$msg("请选择分类");
        return false;
      }
      if (this.form.shopImg.length == 0) {
        this.$msg("请上传图片");
        return false;
      }
      let host = this.option.id ? updateB : addB;
      let form = JSON.parse(JSON.stringify(this.form));
      form.shopImg = this.$util.imgSubstr(form.shopImg);
      if (form.stock == "") {
        form.stock = -1;
      }
      if(this.option.id){
        form.id = this.option.id 
      }
      host({
        status: this.status,
        ...form
      }).then(res => {
        uni.navigateBack({});
        this.$msg("操作成功！");
      });
    },
    selCategoryFn(item) {
      let index = this.form.categoryIdList.findIndex(e => e == item.id);
      if (index == -1) {
        this.form.categoryIdList.push(item.id);
      } else {
        this.form.categoryIdList.splice(index, 1);
      }
    },
    autoRiseChange(e) {
      this.form.autoRise = e == "0" ? "1" : "0";
    },
    needSendChange(e) {
      this.form.needSend = e == "0" ? "1" : "0";
    },
    freightChange(e) {
      this.form.freightType = e.detail.value;
    },
    // 表单验证
    formSubmit(e) {
      // 表单规则
      let rules = [
        {
          name: "goodsName",
          rule: ["required"],
          msg: ["请输入商品名"]
        },
        {
          name: "price",
          rule: ["required"],
          msg: ["请输入价格"]
        }
      ];
      // 进行表单检查
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        setTimeout(() => {
          this.confirmFn();
        });
      } else {
        this.$msg(checkRes);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 100px);
  padding-bottom: 100px;
}
// 公共模块
.module-com {
  margin-bottom: 20px;
  background-color: #fff;
  color: $fontColor2;
  .module-tit {
    padding: 20px 30px;
    font-size: 28px;
  }
  .module-det {
    padding: 0 30px;
  }
}
.category-wrap {
  align-items: flex-start;
  padding-bottom: 0 !important;
  .tui-input {
    @include disFlex(center, flex-start);
    flex-wrap: wrap;
    .admin-button-com {
      // width: 104px;
      margin-right: 20px;
      margin-bottom: 20px;
      position: relative;
      z-index: 9999;
      // &:nth-child(4n + 1) {
      // 	margin-left: 0;
      // }
    }
  }
}
.summary-wrap {
  .goods-summary {
    height: 400px;
    // font-size: 24px;
  }
}
// button
.app-footer {
  justify-content: space-evenly;
  z-index: 9999;
  .admin-button-com {
    width: 46%;
  }
}
</style>