JiangNingUmale-h5/subPublic/Store/Store.vue

<template>
  <view class="app-container">
    <u-navbar
      leftText="返回"
      title="店铺详细信息"
      :autoBack="true"
      :placeholder="true"
    />
    <view class="section-list">
      <view
        class="section-item"
        :class="currentIndex == index ? 'activeCss' : ''"
        v-for="(item, index) in sectionList"
        :key="index"
        @click="handleTab(index)"
        >{{ item.name }}</view
      >
    </view>
    <view class="list">
      <view class="list-item" v-for="(item, index) in 1" :key="index">
        <view class="item-cell">
          <view class="cell-lable">店铺名称：</view>
          <view class="cell-value u-line-1">南京市XX街道XX路XX号XX店</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">主体类别：</view>
          <view class="cell-value">食品生产</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">法定代表人：</view>
          <view class="cell-value">胡洁</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">店铺地址：</view>
          <view class="cell-value u-line-1">南京市XX街道XX路XX号</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">统一社会信用代码：</view>
          <view class="cell-value">92210211MA0WYDT0X2</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">登记地址：</view>
          <view class="cell-value">南京市XX街道XX路XX号</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">许可证编号：</view>
          <view class="cell-value">XXXXXXXXXXXXXXXXXXXXXXXX</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">许可证有效期至：</view>
          <view class="cell-value">2024-09-01</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      sectionList: [
        {
          name: "店铺基本信息",
        },
        {
          name: "店铺活动信息",
        },
        {
          name: "店铺监管信息",
        },
      ],
    };
  },
  methods: {
    handleTab(index) {
      if (this.currentIndex == index) return;
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.section-list {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;

  .section-item {
    flex: 1;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    position: relative;

    &::after {
      content: "|";
      position: absolute;
      right: 0;
      color: #e2e2e2;
    }
  }

  & .section-item:last-child::after {
    content: "";
  }

  .activeCss {
    background-color: #367bef;
    color: #ffffff;

    &::after {
      content: "";
    }
  }
}

.list {
  margin-top: 30rpx;

  .list-item {
    box-sizing: border-box;
    padding: 25rpx;
    background: #fff;
    margin-bottom: 30rpx;
    box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
    border-radius: 16rpx;

    .item-cell {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .cell-lable {
        // width: 200rpx;
        font-size: 28rpx;
        color: #9da2ab;
      }

      .cell-value {
        flex: 1;
        font-size: 28rpx;
        font-weight: 400;
        color: #2e2f31;
      }
    }

    & > .item-cell:last-child {
      margin-bottom: 0;
    }
  }

  .list-item:active {
    background: #f3f4f6;
  }

  .list > .list-item:last-child {
    margin-bottom: 0;
  }
}
</style>