商品管理补充价格字段

src/views/product/index.vue

@@ -1,25 +1,26 @@
 <template>
   <basic-container>
-    <el-form :inline="true">
-      <el-form-item label="商品介绍详情图片：">
-        <div style="width: 360px; height: calc(100vh - 280px); overflow: auto;">
-          <img :src="productDetail.src" style="width: 100%; height: auto;" />
-        </div>
+    <el-form label-width="140px">
+      <el-form-item label="商品价格：" required>
+        <el-input style="width:360px;" v-model="productDetail.price" placeholder="请输入价格" maxlength="10" @input="NumberCheck" />
       </el-form-item>
-      <el-form-item label-width="0">
-        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
+      <el-form-item label="商品介绍详情图片：">
+        <el-upload v-if="productDetail.src == ''" class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
           :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
-          <img v-if="imageUrl" :src="imageUrl" class="avatar">
-          <template v-else>
+          <template>
             <i class="el-icon-plus avatar-uploader-icon"></i>
             <div class="tip">图片宽度：750 高度：不限 文件大小：≤5M</div>
           </template>
         </el-upload>
+        <div v-else class="img-box">
+          <el-button class="btn-del" size="mini" icon="el-icon-delete" type="danger" @click="productDetail.src == ''">删 除</el-button>
+          <img :src="productDetail.src" style="width: 100%; height: auto;" />
+        </div>
       </el-form-item>
       <div style="text-align:right;padding: 20px 0;">
-        <el-button type="success" size="small" @click="doSave">重新上传</el-button>
-        <el-button type="info" size="small" @click="cancelPublish" v-if="productDetail.status == 2">取消发布</el-button>
-        <el-button type="primary" size="small" @click="doPublish" v-if="productDetail.status == 1">发 布</el-button>
+        <el-button type="primary" size="small" @click="doSave">确 定</el-button>
+        <!-- <el-button type="info" size="small" @click="cancelPublish" v-if="productDetail.status == 2">取消发布</el-button>
+        <el-button type="primary" size="small" @click="doPublish" v-if="productDetail.status == 1">发 布</el-button> -->
       </div>
     </el-form>
   </basic-container>
@@ -47,24 +48,40 @@ export default {
   created() {
   },
   methods: {
+    //价格格式限制
+    NumberCheck() {
+      let str = this.productDetail.price;
+      //限制只能输入一个小数点
+      if (str.indexOf(".") != -1) {
+        var str_ = str.substr(str.indexOf(".") + 1);
+        if (str_.indexOf(".") != -1) {
+          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
+        }
+      }
+      //正则替换，保留数字和小数点
+      str = str.replace(/[^\d^\.]+/g,'')
+      this.productDetail.price=str
+    },
     //商品详情
     queryProduct() {
       
     },
     //重新上传
     doSave() {
-      if(this.imageUrl == '') {
+      if(this.productDetail.price == '') {
+        this.$message.warning("请填写商品价格");
+        return;
+      }
+      if(this.productDetail.src == '') {
         this.$message.warning("请先上传图片");
         return;
       }
-      this.$confirm(`确认重新上传当前商品图片吗？`, {
+      this.$confirm(`是否确认发布该商品信息`, {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
-        this.$message.success("重新上传成功");
-        this.imageUrl = "";
-        this.productDetail.src = "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100";
+        this.$message.success("发布成功");
       });
     },
     //取消发布
@@ -85,11 +102,10 @@ export default {
         type: "warning",
       }).then(() => {
         this.$message.success("发布成功");
-        this.imageUrl = "";
       });
     },
     handleAvatarSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw);
+      this.productDetail.src = URL.createObjectURL(file.raw);
     },
     beforeAvatarUpload(file) {
       const isJPG = file.type === 'image/jpeg';
@@ -137,4 +153,15 @@ export default {
   height: 368px;
   display: block;
 }
+.img-box{
+  position:relative; 
+  width: 360px; 
+  height: calc(100vh - 280px); 
+  overflow: auto;
+  .btn-del {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
 </style>