From 64292c195428f651f808e20a6a9864e32a72215b Mon Sep 17 00:00:00 2001
From: xuechunyuan <17853500702@163.com>
Date: Mon, 21 Aug 2023 13:59:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86=E8=A1=A5?=
 =?UTF-8?q?=E5=85=85=E4=BB=B7=E6=A0=BC=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/product/index.vue | 65 ++++++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 19 deletions(-)

diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index cfb5a7f..33a2394 100644
--- a/src/views/product/index.vue
+++ b/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>