print-package-app/pages/select-role/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="选择角色"></uni-nav-bar>
    <view class="flex-col">
      <view class="flex-col items-start text-wrapper">
        <text class="text_4">温馨提示：角色选定后无法变更请按需选择。</text>
      </view>
      <text class="text_5">请选择你的角色</text>
      <view class="flex-col section_1">
        <view class="flex-row equal-division">
          <view class="justify-center equal-division-item" :class="{ selected: selected == 'enterprise' }" @click="selectRole('enterprise')">
            <image v-show="selected == 'enterprise'" src="/static/imgs/general/selected-topright-icon.png" class="image_4" />
            <image src="/static/imgs/general/enterprise-icon.png" class="image_5" />
            <text class="text_6">我是企业</text>
          </view>
          <view class="justify-center equal-division-item_1" :class="{ selected: selected == 'person' }" @click="selectRole('person')">
            <image v-show="selected == 'person'" src="/static/imgs/general/selected-topright-icon.png" class="image_4" />
            <image src="/static/imgs/general/person-icon.png" class="image_6" />
            <text class="text_7">我是个人</text>
          </view>
        </view>
        <view v-show="selected == 'enterprise'" class="flex-col section_2">
          <text class="text_8">企业权益</text>
          <text class="text_9">
            1、企业信息推广、产品展、设备展；
            <br />
            2、企业成产数据、车间生产进度实时查询；
            <br />
            3、原纸商城购买原纸；
            <br />
            4、设备生产进度分享；
            <br />
            5、客户验厂申请审核；
            <br />
            6、在线签约采购合同；
            <br />
            7、供应链金融支持；
            <br />
            8、在线询价。
          </text>
        </view>
        <view v-show="selected == 'person'" class="flex-col section_2">
          <text class="text_8">个人权益</text>
          <text class="text_9">
            1、原纸商城购买原纸；
            <br />
            2、在线签约采购合同；
            <br />
            3、在线询价；
            <br />
          </text>
        </view>
      </view>
    </view>
    <qn-footer fixed>
      <view class="flex-col items-center text-wrapper_1" @click="next">
        <text>下一步</text>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
export default {
  data() {
    return {
      selected: null
    }
  },
  methods: {
    back,
    selectRole(type) {
      this.selected = type
    },
    next() {
      if (!this.selected) {
        uni.showToast({
          title: '请选择角色',
          icon: 'none'
        })
        return
      }
      go2('complete-info', {
        role: this.selected
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  .text-wrapper {
    padding: 20rpx 0;
    color: rgb(0, 122, 255);
    font-size: 28rpx;
    line-height: 40rpx;
    white-space: nowrap;
    background-color: rgb(229, 241, 255);
    .text_4 {
      margin-left: 32rpx;
    }
  }
  .text_5 {
    margin-left: 32rpx;
    margin-top: 19rpx;
    color: rgb(51, 51, 51);
    font-size: 30rpx;
    font-weight: 500;
    line-height: 42rpx;
    white-space: nowrap;
  }
  .section_1 {
    margin-top: 19rpx;
    padding: 40rpx 32rpx 48rpx;
    background-color: rgb(255, 255, 255);
    .equal-division {
      color: rgb(51, 51, 51);
      font-size: 36rpx;
      font-weight: 500;
      line-height: 50rpx;
      white-space: nowrap;
      .equal-division-item {
        padding: 71rpx 62rpx 73rpx 63rpx;
        flex: 1 1 332rpx;
        background-color: rgb(255, 255, 255);
        border-radius: 10rpx;
        height: 200rpx;
        border: solid 3rpx rgb(216, 216, 216);
        position: relative;
        .image_5 {
          margin: 10rpx 0 9rpx;
          width: 34rpx;
          height: 31rpx;
          position: relative;
        }
        .text_6 {
          margin-left: 23rpx;
          position: relative;
        }
      }
      .equal-division-item_1 {
        position: relative;
        margin-left: 19rpx;
        padding: 71rpx 60rpx 73rpx;
        flex: 1 1 332rpx;
        background-color: rgb(255, 255, 255);
        border-radius: 10rpx;
        height: 200rpx;
        border: solid 3rpx rgb(216, 216, 216);
        .image_6 {
          margin: 9rpx 0 9rpx;
          width: 39rpx;
          height: 32rpx;
        }
        .text_7 {
          margin-left: 21rpx;
        }
      }
      .selected {
        background-color: rgba(0, 122, 255, 0.05);
        border: solid 3rpx rgb(0, 122, 255);
        .image_4 {
          border-radius: 0px 10rpx 0px 40rpx;
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          right: -1rpx;
          top: -4rpx;
        }
      }
    }
    .section_2 {
      margin-top: 40rpx;
      padding: 24rpx 24rpx 29rpx;
      background-color: rgba(102, 102, 102, 0.05);
      border-radius: 10rpx;
      .text_8 {
        color: rgb(51, 51, 51);
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        white-space: nowrap;
      }
      .text_9 {
        margin-top: 14rpx;
        color: rgb(51, 51, 51);
        font-size: 24rpx;
        line-height: 36rpx;
        text-align: left;
        width: 473rpx;
      }
    }
  }
  .text-wrapper_1 {
    margin: 0 32rpx;
    padding: 23rpx 0;
    background-color: rgb(0, 122, 255);
    border-radius: 10rpx;
    color: rgb(255, 255, 255);
  }
}
</style>