merchapp/java-mall-app-shop-admin/pages/audit/shop1.vue

<template>
  <view class="shop-1-container">
    <u-form :model="form" class="form" ref="uForm" label-width="70">
      <u-form-item label="联系人" prop="name" required>
        <u-input
          class="form-input"
          v-model="form.name"
          placeholder="请输入联系人"
        />
      </u-form-item>
      <u-form-item label="联系电话" prop="phone" required>
        <u-input
          class="form-input"
          v-model="form.phone"
          placeholder="请输入联系电话"
        />
      </u-form-item>
      <u-form-item label="经营品类" prop="name" required>
        <view class="manage-type-tips" slot="right" @click="skipuBsType"
          >{{ manageType }}
          <u-icon
            style="display: inline-block; margin-left: 8rpx"
            name="arrow-right"
            size="12"
            color="aaaaaa"
          ></u-icon>
        </view>
      </u-form-item>
      <u-form-item label="门店名称" prop="shopName" required>
        <u-input
          class="form-input"
          v-model="form.shopName"
          placeholder="请输入门店名称"
        />
      </u-form-item>
      <u-form-item
        label="店铺地址"
        prop="shopName"
        required
        :class="formItemClass()"
      >
        <u-input
          class="form-input"
          v-model="form.shopAddress"
          placeholder="（将作为配送员上门取货地址，请详情填写）"
        />
      </u-form-item>
      <u-form-item label="地图地址" prop="mapAddress" required>
        <view class="manage-type-tips" slot="right"
          >请在地图上选择门店地址
          <u-icon
            style="display: inline-block; margin-left: 8rpx"
            name="arrow-right"
            size="12"
            color="aaaaaa"
          ></u-icon>
        </view>
      </u-form-item>
      <u-form-item label="详细地址" prop="detailedAddress" required>
        <u-input
          class="form-input"
          v-model="form.detailedAddress"
          placeholder="详细地址:如:人民大道205号2楼213"
        />
      </u-form-item>
      <u-form-item label="门脸图" prop="storefrontImg">
        <u-upload
          class="shop1-upload"
          :action="action"
          :file-list="fileList"
          :max-count="1"
          :width="280"
          :height="160"
          :upload-text="'点击上传'"
        >
        </u-upload>
      </u-form-item>
      <u-form-item label="环境图" prop="surroundingsImg">
        <u-upload
          class="shop2-upload"
          :action="action"
          :file-list="fileList"
          :max-count="1"
          :width="280"
          :height="160"
          :upload-text="'点击上传'"
        >
        </u-upload>
      </u-form-item>
    </u-form>
    <view class="btn-content">
      <u-button class="btn-next" @click="handleNext">下一步</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      manageType:'请选择',
      form: {
        name: "",
        phone: "",
        type: 0,
        shopName: "",
        shopAddress: "",
        mapAddress: "",
        detailedAddress: "",
        storefrontImg: "",
        surroundingsImg: "",
      },
      action: "http://www.example.com/upload",
      fileList: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入联系人",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        intro: [
          {
            min: 5,
            message: "简介不能少于5个字",
            trigger: "change",
          },
        ],
      },
    };
  },
  onLoad(options){
    this.manageType = options.type;
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    formItemClass() {
      return this.form.shopAddress > 0 ? "" : "shop1-from-item";
    },
    skipuBsType(){
      uni.navigateTo({
          url: "/pages/audit/businessType",
      });
    },
    handleNext(){
      uni.navigateTo({
        url:"/pages/audit/shop2"
      })
    },
  },
};
</script>

<style lang="scss">
.shop-1-container {
  // background: #f2f2f2;
  // height: 100vh;

  .form {
    padding: 0 36rpx;
    background: #fff;
    border-top: 1px solid #f2f2f2;
    .u-form-item__body__right {
      background: red;
    }

    /deep/.shop1-from-item {
      .u-form-item__body__right {
        .uni-input-wrapper {
          font-size: 24rpx;
        }
      }
    }

    /deep/.shop1-upload {
      .u-upload__button {
        // background: url("../../static/shenhe-bg1.png");
        background-image: url("../../static/shenhe-bg1.png");
        background-size: 100%;
      }
    }

    /deep/.shop2-upload {
      .u-upload__button {
        // background: url("../../static/shenhe-bg1.png");
        background-image: url("../../static/shenhe-bg2.png");
        background-size: 100%;
      }
    }
  }

  .btn-content{
    position: fixed;
    bottom: 40rpx;
    width: 94%;
    padding:  0 24rpx;
  }

  .btn-next{
    border-radius: 16rpx;
    background: #02a7f0;
    color: #fff;
  }
}
</style>