新增营销系统、分销系统、会员功能、门店、提现功能

components/canvasShow/basics/header/app/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="header">
+    <div class="header-row">
+      <image
+          class="logo"
+          :src="componentContent.imageUrl"
+          mode="heightFix"
+      />
+      <div
+          class="search-col"
+          @click="toSearch(item)">
+        <div class="search-input">
+          <div v-if="componentContent.keyList.length === 0">搜索商品</div>
+          <swiper
+              v-else
+              class="swiper-wrapper"
+              :circular="true"
+              :indicator-dots="false"
+              :autoplay="true"
+              :vertical="true">
+            <swiper-item
+                class="swiper-slide"
+                v-for="(item,index) in componentContent.keyList"
+                :key="index">
+              <div class="a-link">{{ item }}</div>
+            </swiper-item>
+          </swiper>
+        </div>
+      </div>
+    </div>
+    <div class="tabs-nav-warp">
+      <div
+          class="tabs-nav"
+          scroll-x="true">
+        <div class="ul">
+          <div
+              v-for="(item, index) in componentContent.tabs"
+              :key="index"
+              class="li"
+              :class="{ on: activeTab === index + 1 }"
+              @click="jumpLink(item.link)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, toRefs } from 'vue';
+import commonMixin from '../mixin';
+
+const props = defineProps({
+  componentContent: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+});
+const {componentContent} = toRefs(props);
+const {jumpLink, toSearch} = commonMixin();
+const activeTab = ref(0);
+</script>
+
+<style
+    lang="scss"
+    scoped>
+.header {
+  padding: 11rpx 34rpx 0;
+
+  .logo {
+    // width: 280px;
+    height: 40rpx;
+    margin-bottom: 11rpx;
+  }
+
+  .search-col {
+    height: 60rpx;
+    overflow: hidden;
+    border-radius: 30rpx;
+    padding: 0 30rpx 0 90rpx;
+    background: #FFFFFF url("https://b2c-pro-static-dev.zkthink.com/static/images/icon-search.png") no-repeat 30rpx center / auto 30rpx;
+    font-size: 24rpx;
+    line-height: 60rpx;
+    color: #999999;
+    margin: 24rpx 0;
+    .search-input{
+      width: 100%;
+    }
+    .swiper-wrapper{
+      width: 100%;
+      height: 60rpx;
+    }
+  }
+}
+
+.tabs-nav-warp {
+  margin-top: 20rpx;
+  overflow: hidden;
+
+  .tabs-nav {
+    .ul {
+      width: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      overflow: auto;
+
+      .li {
+        margin-left: 48rpx;
+        font-size: 28rpx;
+        color: #262626;
+        position: relative;
+        padding-bottom: 18rpx;
+        white-space: nowrap;
+        cursor: pointer;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &.on, &:hover {
+          font-weight: bold;
+          font-size: 36rpx;
+
+          &:after {
+            content: "";
+            width: 48rpx;
+            height: 6rpx;
+            background: #F26E47;
+            position: absolute;
+            left: 50%;
+            margin-left: -24rpx;
+            bottom: 10rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</style>