EditGoods.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <el-form ref="form" :model="form" label-width="120px">
  3. <el-form-item label="商品名称">
  4. <el-input v-model="form.name" size="mini"></el-input>
  5. </el-form-item>
  6. <el-form-item label="商品简介">
  7. <el-input v-model="form.describe" size="mini"></el-input>
  8. </el-form-item>
  9. <el-form-item label="商品原价">
  10. <el-input v-model="form.price" size="mini"></el-input>
  11. </el-form-item>
  12. <el-form-item label="商品折扣价">
  13. <el-input v-model="form.discountPrice" size="mini"></el-input>
  14. </el-form-item>
  15. <el-form-item label="商品图标">
  16. <el-upload
  17. class="avatar-uploader"
  18. :action="uploadAction"
  19. :show-file-list="false"
  20. :on-success="onUploadSuccess"
  21. :before-upload="onBeforeUpload"
  22. >
  23. <img v-if="form.icon" :src="form.icon" class="avatar" />
  24. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  25. </el-upload>
  26. <p class="zy">注意:图标比例一定要1:1</p>
  27. </el-form-item>
  28. <el-form-item>
  29. <el-button type="primary" @click="save" size="mini">保存</el-button>
  30. <el-button @click="goBack" size="mini">取消</el-button>
  31. </el-form-item>
  32. </el-form>
  33. </template>
  34. <script>
  35. export default {
  36. data() {
  37. return {
  38. uploadAction: process.env.SERVER_PATH + "upload",
  39. form: {
  40. gid: 0,
  41. name: "",
  42. describe: "",
  43. price: "",
  44. discountPrice: "",
  45. icon: "",
  46. status: false
  47. }
  48. };
  49. },
  50. methods: {
  51. onBeforeUpload: function(file) {
  52. const isJPG = file.type === "image/jpeg";
  53. const isPNG = file.type === "image/png";
  54. if (!isJPG && !isPNG) {
  55. this.$message.error("上传商品图标只能是 JPG/PNG 格式!");
  56. return false;
  57. } else {
  58. return true;
  59. }
  60. },
  61. onUploadSuccess: function(res, file) {
  62. if (res.code != 0) {
  63. this.$message.error(
  64. "上传图片失败 原因:" + res.msg + "(" + res.code + ")"
  65. );
  66. return;
  67. } else {
  68. this.form.icon = res.obj;
  69. }
  70. },
  71. save: function() {
  72. let goods = {
  73. gid: this.form.gid,
  74. name: this.form.name,
  75. describe: this.form.describe,
  76. icon: this.form.icon,
  77. status: this.form.status ? 1 : 0,
  78. price: this.form.price,
  79. discountPrice: this.form.discountPrice
  80. };
  81. let that = this;
  82. this.$http.editGoodsBase(goods, this).then(data => {
  83. if (data.code === 0) {
  84. this.$message({
  85. message: "操作成功",
  86. type: "success",
  87. duration: 1000,
  88. onClose: function() {
  89. that.$router.push("/goodsManager");
  90. }
  91. });
  92. }
  93. });
  94. },
  95. goBack: function() {
  96. this.$router.back();
  97. }
  98. },
  99. mounted: function() {
  100. var gid = this.$route.query.gid;
  101. this.form.gid = gid;
  102. if (gid === 0) {
  103. return;
  104. }
  105. this.$http.getOneGood({ gid: gid }, this).then(res => {
  106. if (res.code === 0) {
  107. var base = res.obj;
  108. this.form.name = base.name;
  109. this.form.describe = base.describe;
  110. this.form.price = base.price.price;
  111. this.form.discountPrice = base.price.discountPrice;
  112. this.form.icon = base.icon;
  113. }
  114. });
  115. }
  116. };
  117. </script>
  118. <style scoped>
  119. .avatar-uploader .el-upload {
  120. border: 1px dashed #d9d9d9;
  121. border-radius: 6px;
  122. cursor: pointer;
  123. position: relative;
  124. overflow: hidden;
  125. width: 178px;
  126. }
  127. .avatar-uploader .el-upload:hover {
  128. border-color: #409eff;
  129. }
  130. .avatar-uploader img {
  131. height: 100%;
  132. width: 100%;
  133. }
  134. .el-form-item {
  135. margin-bottom: 0px;
  136. }
  137. .avatar {
  138. width: 178px;
  139. height: 178px;
  140. display: block;
  141. }
  142. .zy {
  143. color: red;
  144. }
  145. </style>