Quellcode durchsuchen

页面设计商品组支持购物车按钮样式

萤火科技 vor 1 Jahr
Ursprung
Commit
e5e8447944

+ 9 - 3
src/assets/icons/page/index.js

@@ -4,7 +4,13 @@ import search from './search.svg?inline'
 // 店铺公告
 import volumeFill from './volume-fill.svg?inline'
 
-// 购物车 (加号)
-import plus from './plus.svg?inline'
+// 购物车 (样式1)
+import jiagou1 from './jiagou1.svg?inline'
 
-export { search, volumeFill, plus }
+// 购物车 (样式2)
+import jiagou2 from './jiagou2.svg?inline'
+
+// 购物车 (样式3)
+import jiagou3 from './jiagou3.svg?inline'
+
+export { search, volumeFill, jiagou1, jiagou2, jiagou3 }

+ 1 - 0
src/assets/icons/page/jiagou1.svg

@@ -0,0 +1 @@
+<svg t="1731597533735" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7678" width="230" height="230"><path d="M512 1024c-282.787759 0-512-229.248343-512-512C0 229.212241 229.212241 0 512 0 794.751657 0 1024.036102 229.212241 1024.036102 512 1024.036102 794.787759 794.751657 1024 512 1024zM768.036102 460.80722l-204.80722 0L563.228882 256 460.843323 256l0 204.80722L256 460.80722l0 102.385559 204.80722 0 0 204.80722 102.385559 0 0-204.80722 204.80722 0L768 460.80722z" p-id="7679"></path></svg>

+ 1 - 0
src/assets/icons/page/jiagou2.svg

@@ -0,0 +1 @@
+<svg t="1731596674442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25263" width="230" height="230"><path d="M347.136 783.36q19.456 0 36.864 7.168t30.72 19.968 20.48 30.208 7.168 36.864-7.168 36.864-20.48 30.208-30.72 20.48-36.864 7.68q-20.48 0-37.376-7.68t-30.208-20.48-20.48-30.208-7.168-36.864 7.168-36.864 20.48-30.208 30.208-19.968 37.376-7.168zM773.12 785.408q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM945.152 203.776q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-12.8 37.888-22.016 62.976-24.064 68.096-17.92 53.248q-13.312 40.96-33.792 56.832t-50.176 15.872l-34.816 0-66.56 0-87.04 0-95.232 0-253.952 0 15.36 92.16 516.096 0q49.152 0 49.152 41.984 0 20.48-9.728 35.328t-38.4 14.848l-49.152 0-95.232 0-117.76 0-119.808 0-98.304 0-56.32 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-13.312l22.528 0 20.48 0 25.6 0 34.816 0q20.48 0 32.768 6.144t19.456 15.36 10.24 19.456 5.12 17.408q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0z" p-id="25264"></path></svg>

+ 1 - 0
src/assets/icons/page/jiagou3.svg

@@ -0,0 +1 @@
+<svg t="1731596946010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3921" width="230" height="230"><path d="M872.021333 149.33333333H341.333333v85.333333h530.688q20.821333 0 33.664 16.426667 12.8 16.384 7.765334 36.608l-85.333334 341.333333q-3.584 14.208-15.146666 23.253334-11.562667 9.045333-26.282667 9.045333H327.424q-15.488 0-27.349333-9.941333-11.946667-9.941333-14.634667-25.216L203.946667 169.51466633Q195.712 123.73333333 160 93.86666633 124.416 64.00000033 77.909333 64.00000033H0v85.333333h77.909333q15.488 0 27.349334 9.941333 11.946667 9.984 14.634666 25.216L201.386667 641.15200033q8.192 45.824 43.861333 75.648 35.626667 29.866667 82.133333 29.866666h459.264q44.074667 0 78.805334-27.093333 34.730667-27.136 45.397333-69.845333l85.333333-341.333334q15.146667-60.586667-23.296-109.824Q934.528 149.33333333 872.021333 149.33333333z" p-id="3922"></path><path d="M213.333333 874.66666633a85.333333 85.333333 0 1 0 170.666667 0 85.333333 85.333333 0 1 0-170.666667 0Z" p-id="3923"></path><path d="M725.333333 874.66666633a85.333333 85.333333 0 1 0 170.666667 0 85.333333 85.333333 0 1 0-170.666667 0Z" p-id="3924"></path></svg>

+ 0 - 1
src/assets/icons/page/plus.svg

@@ -1 +0,0 @@
-<svg t="1729791578301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9748" width="230" height="230"><path d="M449.15639939 449.15639939V9.2511995h125.68720122v439.90519989h439.90519989v125.68720122h-439.90519989v439.90519989h-125.68720122v-439.90519989H9.2511995v-125.68720122h439.90519989z" p-id="9749"></path></svg>

+ 44 - 0
src/views/page/modules/editor/Editor.vue

@@ -702,6 +702,26 @@
                   <colorPicker v-model="curItem.style.btnFontColor" defaultColor="#ffffff" />
                 </div>
               </div>
+              <div class="block-item">
+                <span class="label">购物车背景颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'btnCartColor', '#27c29a')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.btnCartColor" defaultColor="#27c29a" />
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">购物车文字颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'btnFontColor', '#ffffff')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.btnFontColor" defaultColor="#ffffff" />
+                </div>
+              </div>
               <div class="block-item">
                 <span class="label">商品卖点颜色</span>
                 <div class="item-colorPicker">
@@ -712,6 +732,26 @@
                   <colorPicker v-model="curItem.style.sellingColor" defaultColor="#e3771f" />
                 </div>
               </div>
+              <template v-if="inArray('cartBtn', curItem.style.show)">
+                <div class="block-item">
+                  <span class="label">购物车按钮样式</span>
+                  <a-radio-group buttonStyle="solid" v-model="curItem.style.btnCartStyle">
+                    <a-radio-button :value="1">样式1</a-radio-button>
+                    <a-radio-button :value="2">样式2</a-radio-button>
+                    <a-radio-button :value="3">样式3</a-radio-button>
+                  </a-radio-group>
+                </div>
+                <div class="block-item">
+                  <span class="label">购物车按钮颜色</span>
+                  <div class="item-colorPicker">
+                    <span
+                      class="rest-color"
+                      @click="onEditorResetColor(curItem.style, 'btnCartColor', '#27c29a')"
+                    >重置</span>
+                    <colorPicker v-model="curItem.style.btnCartColor" defaultColor="#27c29a" />
+                  </div>
+                </div>
+              </template>
             </div>
             <div class="block-box">
               <div class="block-title">卡片样式</div>
@@ -1465,6 +1505,7 @@ import Vue from 'vue'
 import vcolorpicker from 'vcolorpicker'
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import draggable from 'vuedraggable'
+import { inArray } from '@/utils/util'
 import { Ueditor, SelectCategory } from '@/components'
 import { SImage, SArticleCate, SGoods, SLink, SHotZone, SCoupon } from './modules'
 
@@ -1495,6 +1536,9 @@ export default {
   data () {
     return {}
   },
+  beforeCreate () {
+    this.inArray = inArray
+  },
   methods: {
 
     // 新增数据

+ 5 - 5
src/views/page/modules/phone/Phone.vue

@@ -301,11 +301,11 @@
                             v-show="inArray('cartBtn', item.style.show) && item.style.column < 3"
                             class="action"
                           >
-                            <div
-                              class="btn-cart"
-                              :style="{ background: item.style.btnCartColor, color: item.style.btnFontColor }"
-                            >
-                              <a-icon class="cart-icon" :component="PageIcon.plus" />
+                            <div class="btn-cart" :style="{ color: item.style.btnCartColor }">
+                              <a-icon
+                                class="cart-icon"
+                                :component="PageIcon[`jiagou${item.style.btnCartStyle}`]"
+                              />
                             </div>
                           </div>
                         </div>

+ 2 - 7
src/views/page/modules/phone/style.less

@@ -672,15 +672,10 @@ dl {
               .btn-cart {
                 width: 22px;
                 height: 22px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background-color: #27c29a;
-                color: #fff;
-                border-radius: 50%;
+                text-align: center;
 
                 .cart-icon {
-                  font-size: 10px;
+                  font-size: 18px;
                 }
               }