OfficeApp/subpkg/merchantAudit/merchantAudit.vue

<template>
  <view class="">
    <u-sticky bgColor="#0022C7">
      <u-tabs :list="tabLists" @click="changeCurrent" lineColor='white' :scrollable="false" lineWidth='20'
        inactiveStyle='color:white' activeStyle="color:white"></u-tabs>
    </u-sticky>
    <view class="p_list">
      <view class="card">
        <view class="nav_bar">
          <view class="left">
            <image src="../../static/img/company/company.png"></image>
            <view>爱读蛋糕</view>
          </view>
          <view class="right" @click="navTo(`/subpkg/merchantDetails/merchantDetails?id=${id=1}`)">
            <text>查看</text>
            <u-icon name="arrow-right" size="12" color="#fff"></u-icon>
          </view>
        </view>
        <view class="body">
          <view class="b_item name">
            <view class="text"><view>商户姓名:</view> <view>某moods v你的伤口v技能大赛空军第三空间</view></view>
            <view class="type">
              <text v-if="true" style="color: #ff7c32;">未审核</text>
              <text v-else-if="true" style="color: #47be62;">已通过</text>
              <text v-else style="color: #FF0000;">未通过</text>
            </view>
          </view>
          <view class="b_item"><view>商户分类:</view> <view>商超</view></view>
          <view class="b_item"><view>店铺分类:</view> <view>分类</view></view>
          <view class="b_item"><view>镇街店铺:</view> <view>店铺</view></view>
          <view class="b_item"><view>联系方式:</view> <view>1999999999</view></view>
          <view class="b_item"><view>申请时间:</view> <view>2023-09-09</view></view>
          <view class="img">
            <image src="../../uni_modules/guyue-updater/assets/bg1.png"></image>
            <image src="../../uni_modules/guyue-updater/assets/bg1.png"></image>
            <image src="../../uni_modules/guyue-updater/assets/bg1.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabLists: [{
            name: '全部',
          }, {
            name: '未审核'
          }, {
            name: '已开通'
          },
          {
            name: '未通过'
          },
        ],
      }
    },
    onLoad() {},
    onShow() {},
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
    methods: {
      changeCurrent(e) {
        this.current = e.index;
      },
      navTo (url) {
        if (url) {
          uni.navigateTo({
            url: url,
          })
        } else Toast('暂未开放')
      },
    },

  }
</script>

<style lang="scss">
.p_list{
  padding-top: 28rpx;
  .card{
    margin: 0 auto;
    margin-bottom: 28rpx;
    width: 694rpx;
    background-color: #fff;
    border-radius: 26rpx;
    overflow: hidden;
    .nav_bar{
      background-color: #0122c7;
      padding: 28rpx;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        display: flex;
        font-size: 32rpx;
        image{
          width: 40rpx;
          height: 40rpx;
          margin-right: 16rpx;
        }
      }
      .right{
        display: flex;
        font-size: 28rpx;
        align-items: center;
      }
    }
    .body{
      font-size: 28rpx;
      padding: 28rpx;
      .b_item{
        padding-bottom: 16rpx;
        display: flex;
        view:nth-child(1){
          flex-shrink: 0;
          padding-right: 10rpx;
        }
      }
      .name{
        display: flex;
        justify-content: space-between;
        .text{
          flex: 1;
          display: flex;
          view:nth-child(1){
            flex-shrink: 0;
          }
        }
        .type{
          flex-shrink: 0;
        }
      }
      .img{
        display: flex;
        
        image{
          width: 200rpx;
          height: 150rpx;
          margin-right: 19rpx;
          &:last-child{
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>