chelvc-custom/src/pages/tabbar/mine/openStore/storeInformation.vue

<template>
  <view class="container">
    <view class="top-box">
      为了方便我们与您尽快联系达成合作，请如实填写以下资料，谢谢您的支持与配合
    </view>
    <view class="content-box">
      <view class="content-item">
        <view class="item-l"> 负责人 </view>
        <view class="item-r">
          <u--input placeholder="请输入负责人名称" border="surround" v-model="value"></u--input>
        </view>
      </view>
      <view class="content-item">
        <view class="item-l"> 手机号码 </view>
        <view class="item-r">
          <u--input placeholder="请输入手机号码" border="surround" v-model="value" type='number'></u--input>
        </view>
      </view>
    </view>
    <view class="content-box">
      <view class="content-item">
        <view class="item-l"> 主营服务 </view>
        <view class="item-r">
          <!-- <u--input placeholder="请选择主营服务" border="surround" suffixIcon="arrow-right" v-model="value" ></u--input> -->
          <uni-data-select class="data_select" placeholder="请选择主营服务" v-model="value1" :localdata="range"
            @change="change"></uni-data-select>
          <u-icon name="arrow-right" color="#97989A" size="18"></u-icon>
        </view>
      </view>
      <view class="content-item">
        <view class="item-l"> 辅营服务 </view>
        <view class="item-r">
          <!-- <u--input placeholder="请选择辅营服务" border="surround" suffixIcon="arrow-right" v-model="value"
            ></u--input> -->
          <uni-data-select class="data_select" placeholder="请选择辅营服务" v-model="value1" :localdata="range"
            @change="change"></uni-data-select>
          <u-icon name="arrow-right" color="#97989A" size="18"></u-icon>
        </view>
      </view>
    </view>

    <view class="content-box">
      <view class="content-item">
        <view class="item-l"> 店铺名称 </view>
        <view class="item-r">
          <u--input placeholder="请输入店铺名称" border="surround" v-model="value" ></u--input>
        </view>
      </view>
      <view class="content-item">
        <view class="item-l"> 所在地 </view>
        <view class="item-r">
          <u--input placeholder="请选择所在地" border="surround" suffixIcon="arrow-right" v-model="value"
           ></u--input>
        </view>
      </view>
      <view class="content-item">
        <view class="item-l"> 详细地址 </view>
        <view class="item-r">
          <u--input placeholder="请输入门店详细地址" border="surround" v-model="value" ></u--input>
        </view>
      </view>
    </view>

    <view class="content-box">
      <imgs-upload :filelist.sync="filelist"></imgs-upload>
      <p class='upload-text'>店铺门面图(需要包含完整牌匾)</p>
    </view>

    <view class="content-box">
      <imgs-upload :filelist.sync="filelist"></imgs-upload>
      <p class='upload-text'>店内真实环境图</p>
    </view>


    <button class="btn" @click="handlerSkipNext">下一步</button>
  </view>
</template>

<script>
  import ImgsUpload from "@/pages/tabbar/mine/openStore/components/ImgsUpload.vue"
  export default {
    data() {
      return {
        value: '',
        value1: -1,
        range: [{
            value: 0,
            text: "篮球"
          },
          {
            value: 1,
            text: "足球"
          },
          {
            value: 2,
            text: "游泳"
          },
        ],
        filelist: [],
      }
    },
    components:{ImgsUpload},
    methods: {
      // 跳转到3/4法人信息
      handlerSkipNext() {
        uni.navigateTo({
          url: '/pages/tabbar/mine/openStore/corporateInformation'
        })
      },
      change(e) {
        console.log("e:", e);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #F7F7F7 !important;
    padding-bottom: 40rpx;
    .top-box {
      color: #666666;
      font-size: 26rpx;
      text-align: center;
      padding: 20rpx 40rpx;
      background-color: #fff;
    }

    .content-box {
      padding: 20rpx 40rpx;
      background-color: #fff;
      margin: 10rpx 0;

      .content-item {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        margin: 20rpx 0;

        .item-l {
          width: 30%;
        }

        .item-r {
          width: 70%;
          background-color: #F7F7F7;
          border-radius: 20rpx;
          display: flex;

          .data_select {
            width: 90%;
          }
        }

      }
      .upload-text{
        text-align: center;
        color: #666666;
        font-size:28rpx;
        margin-top: 20rpx;
      }
    }

    .btn {
      background-color: #5992BB !important;
      color: #fff;
      font-size: 32rpx;
      border-radius: 40rpx;
      margin-top: 40rpx;
      width: 95%;
    }
  }

  ::v-deep .u-input__content__field-wrapper__field.data-v-fdbb9fe6 {}

  ::v-deep .uni-select {
    border: none !important;
  }

  ::v-deep .uni-select__input-placeholder {
    font-size: 28rpx !important;
    color: #CBCED4 !important;
  }
</style>