feat: ✨ 商家端新增格式化价格文件插件并在代码中引入,更新代码需要install插件

manager/src/views/seller/bill/bill-detail.vue

@@ -235,11 +235,9 @@ export default {
           key: "finalPrice",
           width: 120,
           render: (h, params) => {
-            return h(
+            return h("priceColorScheme", {props:{value:params.row.finalPrice,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.finalPrice, "￥")
-            );
           },
+
         },
         {
           title: "平台分佣",

manager/src/views/seller/shop/shopDetail.vue

@@ -602,8 +602,9 @@
             key: "flowPrice",
             width: 140,
             render: (h, params) => {
-              return h("div", this.$options.filters.unitPrice(params.row.flowPrice, '￥'));
+              return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-            }
+            },
+
           },
           {
             title: "订单类型",

seller/package.json

@@ -18,6 +18,7 @@
     "dplayer": "^1.27.0",
     "js-cookie": "^2.2.1",
     "node-sass": "^4.14.1",
+    "price-color": "^1.0.2",
     "s": "^1.0.0",
     "sass-loader": "^8.0.2",
     "sockjs-client": "^1.4.0",

seller/src/config/index.js

@@ -11,5 +11,10 @@ module.exports = {
   website: "https://www.pickmall.cn", //官网地址
   enableCDN: true, //生产环境 是否启用cdn加载 vue等js
   port: 10002, //端口
-  inputMaxLength:'140' //全局输入框默认最大输入长度字
+  inputMaxLength:'140', //全局输入框默认最大输入长度字
+  /**
+   * 如需更换主题请修改此处以及theme.less中修改
+   */
+  mainColor:"#ff5c58", //主题色
+
 };

seller/src/main.js

@@ -28,7 +28,7 @@ import * as filters from "@/utils/filters"; // global filter
 
 import {md5} from "@/utils/md5.js";
 
-const {aMapSecurityJsCode, inputMaxLength} = require("@/config");
+const {aMapSecurityJsCode, inputMaxLength,mainColor} = require("@/config");
 // 打印
 import Print from 'vue-print-nb';
 
@@ -46,6 +46,9 @@ Vue.use(VueLazyload, {
   loading: require("./assets/loading2.gif")
 });
 
+// 引入价格格式化组件
+import priceColorScheme from 'price-color'
+Vue.use(priceColorScheme);
 
 const copyViewUi = {...ViewUI}
 copyViewUi.Input.props.maxlength.default = inputMaxLength // 挂载最大输入值
@@ -66,6 +69,7 @@ Vue.prototype.uploadFileRequest = uploadFileRequest;
 Vue.prototype.setStore = setStore;
 Vue.prototype.getStore = getStore;
 Vue.prototype.removeStore = removeStore;
+Vue.prototype.$mainColor = mainColor;
 Vue.prototype.md5 = md5;
 const PC_URL = BASE.PC_URL; // 跳转买家端地址 pc端
 const WAP_URL = BASE.WAP_URL; // 跳转买家端地址 wap端

seller/src/views/distribution/distributionGoods.vue

@@ -118,7 +118,7 @@ export default {
           key: "price",
           width: 130,
           render: (h, params) => {
-            return h("div", this.$options.filters.unitPrice(params.row.price,'￥'));
+            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
           }
         },
         {

seller/src/views/goods/goods-seller/draftGoods.vue

@@ -85,10 +85,7 @@ export default {
           title: "商品价格",
           key: "price",
           render: (h, params) => {
-            return h(
+            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.price, "￥")
-            );
           },
         },
         {

seller/src/views/goods/goods-seller/goods.vue

@@ -354,7 +354,7 @@ export default {
           key: "price",
           width: 130,
           render: (h, params) => {
-            return h("div", this.$options.filters.unitPrice(params.row.price, "￥"));
+            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
           },
         },
         {

seller/src/views/order/after-order/orderComplaintDetail.vue

@@ -196,7 +196,7 @@
                 订单金额
               </dt>
               <dd>
-                {{ complaintInfo.orderPrice | unitPrice('￥')}}
+                <priceColorScheme :value="complaintInfo.orderPrice" :color="$mainColor"></priceColorScheme>
               </dd>
             </dl>
 

seller/src/views/order/after-order/returnGoodsOrder.vue

@@ -143,11 +143,9 @@
             key: "applyRefundPrice",
             width: 130,
             render: (h, params) => {
-              return h(
+              return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
-                "div",
-                this.$options.filters.unitPrice(params.row.applyRefundPrice, "￥")
-              );
             },
+
           },
           {
             title: "会员名称",

seller/src/views/order/after-order/returnMoneyOrder.vue

@@ -142,13 +142,10 @@
             title: "申请退款金额",
             key: "applyRefundPrice",
             width: 130,
-
             render: (h, params) => {
-              return h(
+              return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
-                "div",
-                this.$options.filters.unitPrice(params.row.applyRefundPrice, "￥")
-              );
             },
+
           },
           {
             title: "会员",

seller/src/views/order/after-order/reurnGoodsOrderDetail.vue

@@ -22,7 +22,9 @@
               </dl>
               <dl>
                 <dt>申请退款金额</dt>
-                <dd>{{ afterSaleInfo.applyRefundPrice | unitPrice('￥') }}</dd>
+                <dd>
+                  <priceColorScheme :value="afterSaleInfo.applyRefundPrice" :color="$mainColor" />
+                </dd>
               </dl>
               <dl v-if="afterSaleInfo.actualRefundPrice">
                 <dt>实际退款金额</dt>
@@ -89,7 +91,9 @@
 
               <dl>
                 <dt>申请退款金额</dt>
-                <dd>{{ afterSaleInfo.applyRefundPrice | unitPrice('￥') }}</dd>
+                <dd>
+                  <priceColorScheme :value="afterSaleInfo.applyRefundPrice" :color="$mainColor" />
+                </dd>
               </dl>
               <dl v-if="params.serviceStatus == 'PASS'">
                 <dt>实际退款金额</dt>

seller/src/views/order/order/orderList.vue

@@ -202,10 +202,7 @@ export default {
           minWidth: 100,
           tooltip: true,
           render: (h, params) => {
-            return h(
+            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.flowPrice, "￥")
-            );
           },
         },
 

seller/src/views/order/order/virtualOrderList.vue

@@ -107,11 +107,10 @@ export default {
           minWidth: 100,
           tooltip: true,
           render: (h, params) => {
-            return h(
+            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.flowPrice, "￥")
-            );
           },
+
+
         },
 
         {

seller/src/views/order/receiptManager/receipt.vue

@@ -96,10 +96,7 @@ export default {
           key: "billPrice",
           width: 150,
           render: (h, params) => {
-            return h(
+            return h("priceColorScheme", {props:{value:params.row.receiptPrice,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.receiptPrice, "￥")
-            );
           },
         },
         {

seller/src/views/promotion/coupon/coupon-publish.vue

@@ -301,7 +301,7 @@ export default {
           key: "price",
           minWidth: 40,
           render: (h, params) => {
-            return h("div", this.$options.filters.unitPrice(params.row.price, "￥"));
+            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
           },
         },
         {

seller/src/views/promotion/coupon/coupon-receive.vue

@@ -127,10 +127,7 @@ export default {
           width: 100,
           render: (h, params) => {
             if (params.row.price) {
-              return h(
+              return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-                "div",
-                this.$options.filters.unitPrice(params.row.price, "￥")
-              );
             } else {
               return h("div", params.row.discount + "折");
             }

seller/src/views/promotion/coupon/coupon.vue

@@ -155,10 +155,7 @@ export default {
           width: 100,
           render: (h, params) => {
             if (params.row.price) {
-              return h(
+              return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-                "div",
-                this.$options.filters.unitPrice(params.row.price || 0, "￥")
-              );
             } else {
               return h("div", (params.row.couponDiscount || 0) + "折");
             }

seller/src/views/promotion/full-discount/full-discount-add.vue

@@ -201,10 +201,7 @@ export default {
           key: "price",
           minWidth: 40,
           render: (h, params) => {
-            return h(
+            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.price, "￥")
-            );
           },
         },
         {

seller/src/views/promotion/live/liveGoods.vue

@@ -53,9 +53,9 @@
               </div>
             </RadioGroup>
             <div v-else>
-              <div v-if="row.priceType == 1">{{row.price | unitPrice('￥')}}</div>
+              <div v-if="row.priceType == 1"><priceColorScheme :value="row.price" :color="$mainColor" /></div>
-              <div v-if="row.priceType == 2">{{row.price | unitPrice('￥')}}至{{row.price2 | unitPrice('￥')}}</div>
+              <div class="flex" v-if="row.priceType == 2"><priceColorScheme :value="row.price" :color="$mainColor" />至<priceColorScheme :value="row.price2" :color="$mainColor" /></div>
-              <div v-if="row.priceType == 3">{{row.price2 | unitPrice('￥')}}<span class="original-price">{{row.price | unitPrice('￥')}}</span></div>
+              <div class="flex" v-if="row.priceType == 3"><priceColorScheme :value="row.price2" :color="$mainColor" /><span class="original-price">{{row.price | unitPrice('￥')}}</span></div>
             </div>
 
           </template>
@@ -381,4 +381,9 @@ h4 {
   line-height: 40px;
   text-align: left;
 }
+.flex{
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
 </style>

seller/src/views/shop/bill/accountStatementBill.vue

@@ -103,10 +103,7 @@
             key: "billPrice",
             minWidth: 100,
             render: (h, params) => {
-              return h(
+              return h("priceColorScheme", {props:{value:params.row.billPrice,color:this.$mainColor}} );
-                "div",
-                this.$options.filters.unitPrice(params.row.billPrice, "￥")
-              );
             },
           },
 

seller/src/views/shop/bill/billDetail.vue

@@ -180,10 +180,7 @@ export default {
           title: "订单金额",
           key: "finalPrice",
           render: (h, params) => {
-            return h(
+            return h("priceColorScheme", {props:{value:params.row.finalPrice,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.finalPrice, "￥")
-            );
           },
         },
         {
@@ -191,13 +188,7 @@ export default {
           key: "kanjiaSettlementPrice",
           render: (h, params) => {
             if (params.row.kanjiaSettlementPrice) {
-              return h(
+              return h("priceColorScheme", {props:{value:params.row.kanjiaSettlementPrice,color:this.$mainColor}} );
-                "div",
-                this.$options.filters.unitPrice(
-                  params.row.kanjiaSettlementPrice,
-                  "￥"
-                )
-              );
             } else {
               return h("div", "￥0.00");
             }

seller/src/views/shop/bill/storeBill.vue

@@ -106,11 +106,9 @@
             key: "billPrice",
             minWidth: 100,
             render: (h, params) => {
-              return h(
+              return h("priceColorScheme", {props:{value:params.row.billPrice,color:this.$mainColor}} );
-                "div",
-                this.$options.filters.unitPrice(params.row.billPrice, "￥")
-              );
             },
+
           },
 
 

seller/src/views/statistics/goods.vue

@@ -47,10 +47,7 @@ export default {
           title: "销售金额",
           key: "price",
           render: (h, params) => {
-            return h(
+            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.price)
-            );
           },
         },
       ],

seller/src/views/statistics/order.vue

@@ -260,10 +260,7 @@ export default {
           title: "价格",
           key: "flowPrice",
           render: (h, params) => {
-            return h(
+            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.flowPrice, "￥")
-            );
           },
         },
       ],
@@ -329,11 +326,9 @@ export default {
           title: "申请退款金额",
           key: "applyRefundPrice",
           render: (h, params) => {
-            return h(
+              return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
-              "div",
-              this.$options.filters.unitPrice(params.row.applyRefundPrice, "￥")
-            );
           },
+
         },
         {
           title: "申请原因",

seller/src/views/statistics/order/refundOrder.vue

@@ -18,7 +18,9 @@
         </div>
         <div class="label-item">
           <span>申请退款金额</span>
-          <span>{{res.applyRefundPrice || '0'}}</span>
+          <span>
+            <priceColorScheme :value="afterSaleInfo.applyRefundPrice" :color="$mainColor" />
+          </span>
         </div>
         <div class="label-item">
           <span>商家备注</span>