jjx-wap/components/index/semicircle.vue

<template>
  <view>
    <view class="layout-semicircle">
      <view class="background">
        <view class="text-25 text-white text-right mb-15">客服电话：400 686 5559</view>
        <view class="title">
          <image class="title" src="/static/img/sem.jpg" mode=""></image>
        </view>
        <view class="flex justify-start items-center mt-20 type-list ml-10">
          <text class="item" :class="{active: active === 1}" @click="active = 1">现货</text>
          <text class="item" :class="{active: active === 2}" @click="active = 2">找供应</text>
          <text class="item" :class="{active: active === 3}" @click="active = 3">找加工</text>
          <text class="item" :class="{active: active === 4}" @click="active = 4">旧货</text>
          <text class="item" :class="{active: active === 0}" @click="active = 0">商品</text>
        </view>
        <view class="search-box flex justify-between align-center"
              :style="{borderTopLeftRadius: active === 0 ? '0' : '10rpx'}">
          <u-icon name="search" size="20"></u-icon>
          <input class="flex-1 search-input" type="text" placeholder="请输入关键词" v-model="keyword"/>
          <view class="search-btn" @click="search">搜索</view>
        </view>
      </view>
      <view class="text-white text-25 px-30 flex justify-start items-center" style="background-color: #A92924; padding-bottom: 20rpx">
        <view class="sort-text mr-10">分类 | </view>
        <view class="flex justify-start items-center flex-wrap">
          <view class="mr-10" style="flex-shrink: 0;" v-for="(item,index) in categoryData" :key="index" @click="cateSearch(item.name)">
            {{ item.name }}
          </view>
        </view>
      </view>
      <!--			<view class="tel flex justify-center align-center">-->
      <!--				<u-icon name="phone" size="16"></u-icon>-->
      <!--				<view class="text" @click="handTel">咨询热线：100-768-1458</view>-->
      <!--			</view>-->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      categoryData: [],
      active: 1,
      keyword: ''
    }
  },
  methods: {
    handTel() {
      uni.makePhoneCall({
        phoneNumber: '100-768-1458'
      })
    },
    getCateList() {
      vk.callFunction({
        url: 'client/spot/category/pub/getTree',
        loading: false,
        data: {},
        success: (data) => {
          data.rows.map(item => {
            item.showChild = false
            return item
          })
          this.categoryData = data.rows
        }
      });
    },
    search() {
      if (!this.keyword) return
      this.$emit('search', {
        keyword: this.keyword,
        type: this.active
      })
    },
    cateSearch(keyword) {
      this.$emit('search', {
        keyword,
        type: 1
      })
    }
  },
  mounted() {
    this.getCateList()
  },
}
</script>

<style lang="scss">
.layout-semicircle {
  background: #ffffff;

  .title {
    margin: 0 auto;
    width: 550rpx;
    height: 58rpx;
  }

  .tel {
    padding: 6rpx 0;
    font-size: 24rpx;
    line-height: 40rpx;
    color: #9A9A9A;
  }
}

.background {
  padding: 30rpx 30rpx 24rpx;
  background: #A92924;
}

.search-box {
  //margin-top: 30rpx;
  height: 80rpx;
  padding: 0 20rpx;
  background: #ffffff;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  border-top-right-radius: 10rpx;
  overflow: hidden;

  .search-input {
    padding: 4rpx 10rpx;
    font-size: 24rpx;
    line-height: 32rpx;
    color: #333333;
  }

  .search-btn {
    font-size: 24rpx;
    line-height: 36rpx;
    color: #A92924;
  }
}

.sort-box {
  position: relative;
  height: 80rpx;
  padding: 10rpx 30rpx 0;
  //background: url(@/static/img/elliptic.png) center no-repeat;
  background-color: #A92924;
  background-size: 100% 100%;

  .sort-text {
    position: absolute;
    left: 30rpx;
    top: 20rpx;
    z-index: 9;
    width: 80rpx;
    height: 28rpx;
    font-size: 24rpx;
    font-weight: 600;
    line-height: 28rpx;
    text-align: center;
    color: #ffffff;
    border-right: 1px solid #ffffff;
  }
}

.scroll-box {
  position: absolute;
  left: 110rpx;
  top: 10rpx;
  z-index: 9;
  width: 600rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  white-space: nowrap;

  .item {
    display: inline-block;
    padding: 0 12rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    text-align: center;
    color: #ffffff;
  }
}

.type-list {
  .item {
    color: white;
    margin-right: 10rpx;
    font-size: 25rpx;
    padding: 10rpx;
  }

  .active {
    color: #A92924;
    background-color: white;
    border-top-right-radius: 10rpx;
    border-top-left-radius: 10rpx;
  }
}
</style>