预览样式

src/views/pointsManagement/pointsMall/addOrEditOrDetail.vue

@@ -681,8 +681,13 @@ export default {
 .titleInfo {
   font-size: 14px;
   font-weight: 800;
-  margin: 20px 0 10px 0;
+  margin: 40px 0 10px 0;
+  border-bottom: 1px solid #f1f1f1;
+
 }
+.titleInfo:first-of-type{
+    margin-top: 0;
+  }
 
 ::v-deep .tableFormClass {
   .el-form-item__error {

src/views/pointsManagement/pointsMall/index.vue

@@ -50,10 +50,10 @@
           {{ row.saleStartTime + '-' + row.saleEndTime }}
         </template>
         <template v-slot:operation="row">
-          <el-button size="mini" type="text" plain @click="handleUpdateStatus(row)">{{ row.status === 0 ? '上架' : '下架'
+          <el-button size="mini" type="text" @click="handleUpdateStatus(row)">{{ row.status === 0 ? '上架' : '下架'
             }}</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>
+          <el-button size="mini" type="text" @click="handleAddOrEditOrDetails('编辑', row.id)">编辑</el-button>
+          <el-button size="mini" type="text" @click="handleAddOrEditOrDetails('详情', row.id)">详情</el-button>
         </template>
       </tableCompontent>
       <pagination v-show="total > 0" :total="total" :page.sync="formInlineParent.current"
@@ -115,6 +115,8 @@ export default {
           prop: 'name',
           label: '商品名称',
           align: 'center',
+          tooltip: 'true',
+
         },
         {
           prop: 'categoryName',

src/views/pointsManagement/pointsMall/savePreview.vue

@@ -8,50 +8,52 @@
         </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 class="firstRow">
+            <div class="priceClass">
+              {{ params.paymentType == 1 ? skuListItem.pricePoint + '积分' : params.paymentType == 2 ?
+                '￥' + skuListItem.priceMoney +
+                '元' : params.paymentType == 3 ? '￥' + skuListItem.priceMoney + '元' + '+' + skuListItem.pricePoint + '积分'
+                  : null }}
             </div>
-            <div style="">
-              <div style="font-size: 15px;color: red;font-weight: 600;font-family: Arial,">
-                {{ params.paymentType == 1 ? skuListItem.pricePoint + '积分' : params.paymentType == 2 ? '￥'+skuListItem.priceMoney +
-                  '元':params.paymentType == 3 ? '￥'+skuListItem.priceMoney+'元' +'+'+skuListItem.pricePoint + '积分'
-                  :null }}
-              </div>
-              <div style="font-size: 14px;color: #878787;text-decoration: line-through;text-align: right;">{{ skuListItem.originPrice }}</div>
+            <div class="deletePriceClass">
+              {{ skuListItem.originPrice }}
             </div>
           </div>
+          <div style="font-size: 18px;margin-top: 5px;color: #333;font-weight: bold;">{{ params.name }}</div>
+          <div style="margin-top: 3px;font-size: 14px;color: #999;font-weight: 500;">{{ params.summary }}</div>
+
+          <div style="padding-bottom: 5px;color: #666;font-weight: 500;margin-top: 6px;">
+            <span v-for="item in params.servicePromise" style="font-size: 12px;">{{ item }}</span>
+          </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="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="skuListItem"
-                  style="border: 1px solid #bdbdbd;width: 40px;height: 35px;display: flex;align-items: center;margin-left: 15px;overflow: hidden;">
-                  <img :src="skuListItem.image" alt="" style="width: 100%;object-fit: cover;">
-                </div>
+              <div v-show="skuListItem"
+                style="display: flex;border: 1px solid #bdbdbd;width: 40px;height: 35px;display: flex;align-items: center;margin-left: 15px;overflow: hidden;">
+                <img :src="skuListItem.image" alt="" style="width: 100%;object-fit: cover;">
               </div>
-
             </div>
             <div style="color: #f6a66e;font-size: 12px;">已选: {{ skuListItem.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 style="margin: 10px 0;">送至 <span style="padding-left: 15px;">山西省 太原市 小店区</span></div>
+          <div style="display: flex;">
             <div>发货</div>
             <div style="padding-left: 15px;">
-              <div style="color: #25b6b3;">下单后{{ params.deliveryTime }}小时内发货 </div>
+              <div>山西省 太原市 小店区 |
+                <span style="color: #f6a66e;padding: 2px 5px;">{{ params.freight == 0 ? '免运费'
+                  : '运费' + params.freight + '元' }} </span>
+
+              </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>
+
+                <span style="color: #25b6b3;">下单后{{ params.deliveryTime }}小时内发货</span>
+              </div>
             </div>
 
           </div>
@@ -60,7 +62,8 @@
         <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;overflow: hidden;"
+          <div
+            style="height: 200px;display: flex;align-items: center;margin-top: 10px;border: 1px solid #f1f1f1;overflow: hidden;"
             v-for="item in params.productImage">
             <img :src="item" alt="" style="width: 100%;object-fit: cover">
           </div>
@@ -82,7 +85,7 @@ export default {
     return {
       dialogVisible: false,
       params: {},
-      skuListItem:null
+      skuListItem: null
 
     }
 
@@ -93,17 +96,17 @@ export default {
     showPage(params) {
       this.dialogVisible = true
       this.$nextTick(() => {
-        this.params=null
-        this.skuListItem=null
+        this.params = null
+        this.skuListItem = null
         this.params = params
-        this.skuListItem = params.skuList.length?params.skuList[0]:null
+        this.skuListItem = params.skuList.length ? params.skuList[0] : null
         console.log(params, 'params')
       })
 
     },
     savePreviewFun() {
 
-      this.$emit('savePreviewFun',this.params)
+      this.$emit('savePreviewFun', this.params)
       this.dialogVisible = false
 
     }
@@ -112,4 +115,34 @@ export default {
 
 }
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.firstRow {
+  display: flex;
+  align-items: center;
+
+  .priceClass {
+    font-weight: 500;
+    font-size: 20px;
+    color: #F53E54;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none
+  }
+
+  .deletePriceClass {
+    margin-left: 12px;
+    width: 45px;
+    height: 16px;
+    font-weight: 500;
+    font-size: 16px;
+    color: #999999;
+    line-height: 16px;
+    text-align: left;
+    font-style: normal;
+    text-decoration-line: line-through;
+    text-transform: none;
+
+  }
+}
+</style>