预览页面渲染

src/views/pointsManagement/pointsMall/addOrEditOrDetail.vue

@@ -78,11 +78,11 @@
                           <span>{{ formInline.paymentType == 1 ? '积分' : '元' }}</span>
                         </div>
 
-                        <div v-if="formInline.paymentType == 3">
-                          <el-input-number v-model="scope.row.pricePoint" controls-position="right"
+                        <div v-if="formInline.paymentType == 3" style="display: flex;width: 100%;">
+                          <el-input-number style="width:140px" v-model="scope.row.pricePoint" controls-position="right"
                             :min="0"></el-input-number>
                           <span>元 +</span>
-                          <el-input-number v-model="scope.row.pricePoint" controls-position="right"
+                          <el-input-number style="width:140px" v-model="scope.row.pricePoint" controls-position="right"
                             :min="0"></el-input-number>
                           <span>积分</span>
                         </div>
@@ -149,15 +149,18 @@
         <div style="display: flex;justify-content: center;margin-top: 25px;">
           <el-button @click="dialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="addOrEditOrDetailSave">保存</el-button>
+          <!-- <el-button type="primary" @click="previewFun">预览</el-button> -->
         </div>
       </div>
 
     </el-dialog>
+    <!-- 保存预览 -->
+    <SavePreview ref="savePreviewRef" @savePreviewFun="savePreviewFun"></SavePreview>
 
   </div>
 </template>
 <script>
-
+import SavePreview from './savePreview.vue'
 import tableCompontent from "@/components/tableCompontent/index.vue";
 import Tinymce from "@/components/tinymce/index.vue";
 import { productSpecSetup, productGenerateProductNo, productSpecCombinations, productUpdate } from "@/api/points/pointsMall_api";
@@ -165,7 +168,7 @@ import { upload } from "@/api/public";
 import { setTimeout } from "core-js";
 export default {
   components: {
-    Tinymce, tableCompontent
+    Tinymce, tableCompontent, SavePreview
   },
   props: {
     shopType: {
@@ -314,6 +317,19 @@ export default {
         // this.updataImg11.push(response.fileName)
       })
     },
+    previewFun() {
+      this.formInline.skuList = this.tableForm.skuList
+      this.$refs.savePreviewRef.showPage(JSON.parse(JSON.stringify(this.formInline)))
+    },
+    //预览后保存
+    savePreviewFun(params) {
+      productUpdate(params).then(res => {
+        this.$message.success(res.msg)
+        this.dialogVisible = false
+        this.$emit("getList");
+      })
+    },
+
     //新增、编辑、详情商品 ----保存
     addOrEditOrDetailSave() {
       console.log(this.formInline, 'formInline')
@@ -335,12 +351,8 @@ export default {
               //组装规格列表数据
               params.specList = this.specListReorganizeFun(this.formInline.specList)
               params.skuList = this.tableForm.skuList
-              console.log(params, 'params')
-              productUpdate(params).then(res => {
-                this.$message.success(res.msg)
-                this.dialogVisible = false
-                this.$emit("getList");
-              })
+              this.$refs.savePreviewRef.showPage(JSON.parse(JSON.stringify(params)))
+
             } else {
               this.$message.error("请完善规格明细信息!");
             }

src/views/pointsManagement/pointsMall/index.vue

@@ -17,28 +17,28 @@
             placeholder="请选择" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">搜索</el-button>
+          <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
           <el-button @click="resetForm">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div style="padding:0 15px;">
-      <el-button style="margin-bottom: 15px;" type="primary" size="small"
+      <el-button style="margin-bottom: 15px;" type="primary" size="small" plain
         @click="handleAddOrEditOrDetails('新增',null)">新增商品</el-button>
       <!-- :selection="true" -->
       <tableCompontent ref="tableRef" :loading="loading" :tableData="list" :height="'calc(100vh - 280px)'"
         :columnData="columnData">
         <template v-slot:status="row">
-          {{ row.status === 1 ? '上架' : '下架' }}
+          <span :style="{ color: row.status === 1 ?'#13ce66':'red' }">{{ row.status === 1 ? '上架' : '下架' }}</span>
         </template>
         <template v-slot:sellTime="row">
           {{ row.saleStartTime + '-' + row.saleEndTime }}
         </template>
         <template v-slot:operation="row">
-          <el-button size="mini" type="primary" plain @click="handleUpdateStatus(row)">{{ row.status === 0 ? '上架' : '下架'
+          <el-button size="mini" type="text" plain @click="handleUpdateStatus(row)">{{ row.status === 0 ? '上架' : '下架'
           }}</el-button>
-          <el-button size="mini" type="primary" plain @click="handleAddOrEditOrDetails('编辑',row.id)">编辑</el-button>
-          <el-button size="mini" type="primary" plain @click="handleAddOrEditOrDetails('详情', row.id)">详情</el-button>
+          <el-button size="mini" type="text" plain @click="handleAddOrEditOrDetails('编辑',row.id)">编辑</el-button>
+          <el-button size="mini" type="text" plain @click="handleAddOrEditOrDetails('详情', row.id)">详情</el-button>
         </template>
       </tableCompontent>
       <pagination v-show="total > 0" :total="total" :page.sync="formInlineParent.current"
@@ -94,14 +94,12 @@ export default {
           prop: 'productNo',
           label: '商品编号',
           align: 'center',
-          width: 180,
 
         },
         {
           prop: 'name',
           label: '商品名称',
           align: 'center',
-          width: 180,
         },
         {
           prop: 'categoryName',
@@ -147,7 +145,7 @@ export default {
           align: 'center',
           fixed: 'right',
           type: 'custom',
-          width: 220
+          width: 160
         },
       ],
       multipleSelection: [],
@@ -164,6 +162,7 @@ export default {
     this.getList();
   },
   methods: {
+
     //搜索
     onSubmit() {
       this.getList();

src/views/pointsManagement/pointsMall/savePreview.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="savePreview">
+    <el-dialog center title="预览" width="25%" :append-to-body="true" :close-on-click-modal="false"
+      :visible.sync="dialogVisible">
+      <div style="overflow-y: auto;height:70vh;background-color: #eee;border: 1px solid #bdbdbd;">
+        <div style="height: 200px;background-color: #fff;display: flex;align-items: center;">
+          <img :src="params.productMainImage" alt="" style="width: 100%;object-fit: cover">
+        </div>
+        <div style="border: 1px solid #bdbdbd;border-radius: 5px;margin: 10px 10px 0 10px;
+        padding:10px 10px 10px 10px;background-color: #fff;">
+          <div style="display: flex;justify-content: space-between;align-items: center;">
+            <div>
+              <div style="font-size: 16px;">{{ params.name }}</div>
+              <div style="margin-top: 10px;font-size: 14px;color: #878787;">{{ params.summary }}</div>
+            </div>
+            <div style="">
+              <div style="font-size: 15px;color: red;font-weight: 600">
+                {{ params.skuList[0].paymentType == 1 ? params.skuList[0].pricePoint + '积分' : params.skuList[0].paymentType == 2 ? params.skuList[0].pricePoint +
+                  '元'
+                  : params.skuList[0].pricePoint }}
+              </div>
+              <div style="font-size: 14px;color: #878787;text-decoration: line-through;text-align: right;">{{ params.skuList[0].originPrice }}</div>
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 5px;">
+            <div style="display: flex;align-items: center;">
+              <div style="color: 12px;">规格</div>
+              <div style="display: flex;">
+                <div v-show="params.skuList.length"
+                  style="border: 1px solid #bdbdbd;width: 40px;height: 35px;display: flex;align-items: center;margin-left: 15px;">
+                  <img :src="params.skuList[0].image" alt="" style="width: 100%;object-fit: cover">
+                </div>
+              </div>
+
+            </div>
+            <div style="color: #f6a66e;font-size: 12px;">已选: {{ params.skuList[0].specCombo }}</div>
+
+          </div>
+        </div>
+        <!-- 二 -->
+        <div style="border: 1px solid #bdbdbd;border-radius: 5px;margin: 10px 10px 0 10px;padding:10px;background-color: #fff;font-size: 12px;">
+          <div style="border-bottom: 1px solid #bdbdbd;">
+            <div style="padding-bottom: 5px;color: #f6a66e;">
+              <span v-for="item in params.servicePromise" style="padding-left: 15px;font-size: 12px;">{{ item }}</span>
+            </div>
+          </div>
+          <div style="margin: 10px 0;padding-left: 15px;">送至 <span style="padding-left: 15px;">山西省 太原市 小店区</span></div>
+          <div style="display: flex;padding-left: 15px;">
+            <div>发货</div>
+            <div style="padding-left: 15px;">
+              <div style="color: #25b6b3;">下单后{{ params.deliveryTime }}小时内发货 </div>
+              <div style="margin-top: 5px;">
+                <span style="border: 1px solid #f6a66e;color: #f6a66e;padding: 2px 5px;">{{ params.freight == 0 ? '免运费' : '运费' + params.freight + '元' }} </span>
+                <span>山西省 太原市 小店区</span></div>
+            </div>
+
+          </div>
+        </div>
+        <!-- 三 -->
+        <div
+          style="border: 1px solid #bdbdbd;border-radius: 5px;margin: 10px 10px 0 10px;padding:10px;background-color: #fff;;">
+          <div style="">商品详情</div>
+          <div style="height: 200px;display: flex;align-items: center;margin-top: 10px;border: 1px solid #f1f1f1"
+            v-for="item in params.productImage">
+            <img :src="item" alt="" style="width: 100%;object-fit: cover">
+          </div>
+        </div>
+
+
+        <div style="display: flex;justify-content: center;margin-top: 25px;">
+          <el-button type="primary" size="small" plain @click="savePreviewFun">保存</el-button>
+        </div>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      dialogVisible: false,
+      params: {},
+
+    }
+
+  },
+  created() {
+  },
+  methods: {
+    showPage(params) {
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.params=null
+        this.params = params
+        console.log(params, 'params')
+      })
+
+    },
+    savePreviewFun() {
+
+      this.$emit('savePreviewFun',this.params)
+      this.dialogVisible = false
+
+    }
+
+  },
+
+}
+</script>
+<style scoped lang="scss"></style>