chelvc-custom/src/pages/merchant/mine/openStore/index.vue

<template>
  <view class="container">
    <topProcess></topProcess>

    <view class="center-box">
      <span class="center-title">你需要准备以下材料：</span>

      <view class="content-item-box">
        <view class="center-item" v-for="(item, index) of centerList">
          <img class="l-img" src="@/static/logo.png" alt="" />
          <view class="item-r">
            <p class="r-text1">{{ index + 1 }} 、{{ item.title }}</p>
            <p class="r-text2">{{ item.content }}</p>
          </view>
        </view>
      </view>

      <view class="radoi-box">
        <u-checkbox-group v-model="checked">
          <u-checkbox shape="circle" :name="1" />
        </u-checkbox-group>
        <span>我已阅读并同意 <span style="color: #5992bb">《开店说明》</span> </span>
      </view>
    </view>

    <button class="btn" @click="handlerSkipOpenShop">我已经准备好了</button>
  </view>
</template>

<script>
import topProcess from '@/pages/merchant/mine/openStore/components/top-process.vue';
export default {
  data() {
    return {
      centerList: [
        {
          img: '',
          title: '实体店照片',
          content: '需要提供有完整拍的门店照片和真实的内部环境照片',
        },
        {
          img: '',
          title: '法人身份证',
          content: '需要提供营业执照的法人身份证正反面照片',
        },
        {
          img: '',
          title: '营业执照',
          content: '需要提供有效的营业执照或监管部门认可的具有与营业执照相同法律效力的其他证件',
        },
      ],
      checked: [1],
    };
  },
  components: { topProcess },
  methods: {
    // 点击跳转到开店
    handlerSkipOpenShop() {
      if (this.checked.length != 0) {
        uni.navigateTo({
          url: 'pages/merchant/mine/openStore/storeInformation',
        });
      } else {
        uni.showToast({
          title: '请阅读并同意开店说明',
          icon: 'none',
        });
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  .center-box {
    padding: 20rpx;
    margin-top: 20rpx;
    .center-item {
      display: flex;
      width: 100%;
      margin: 20rpx 0;
      .l-img {
        width: 35%;
        height: 180rpx;
      }
      .item-r {
        margin-left: 50rpx;
        width: 300rpx;
        flex-wrap: wrap;
        .r-text1 {
        }
        .r-text2 {
          color: #9e9e9e;
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
  .radoi-box {
    display: flex;
    color: #9e9e9e;
    font-size: 26rpx;
    margin-top: 40rpx;
  }
  .btn {
    background-color: #5992bb !important;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
    margin-top: 300rpx;
    width: 55%;
  }
}
</style>