konggang-city-miniprogram/pages/supply/putSupply.vue

<template>
  <view class="content">
    <view class="supplyInfo">
      <view class="flex">
        <label>发布标题：</label>
        <input type="text" v-model="supplyInfo.title" class="input card" />
      </view>
      <view class="flex">
        <label>选择类型：</label>
        <view class="picker">
          <picker
            @change="bindPickerChange"
            :value="index"
            :range="array"
            range-key="name" class="pick"
          >
            <view class="picker_title">
              <view class="pickername">
                <view>
                  {{ array[index].name }}
                </view>
              </view>
              <view class="triangle-down"></view>
            </view>
          </picker>
        </view>
      </view>
      <view class="flex">
        <label>详情:</label>
        <textarea v-model="supplyInfo.msg" class="area card"></textarea>
      </view>
      <view class="update_photo">
        <view class="title"></view>
        <view>上传图片：</view>
        <view class="update_container card">
          <view class="update_button">
            <view>
              <image src="/static/appeal/photo.png" />
            </view>
            <view class="txt">上传</view>
          </view>
        </view>
      </view>
    </view>
    <view class="info">
      <view class="title">企业信息</view>
      <view class="name flex">
        <label>企业名称：</label>
        <input type="text" class="card input" v-model="company.name" />
      </view>
      <view class="tel flex">
        <label>统一社会信用代码：</label>
        <input type="text" class="card input" v-model="company.code" />
      </view>
      <view class="tel flex">
        <label>联系电话：</label>
        <input type="text" class="card input" v-model="company.tel" />
      </view>
    </view>
    <button class="submit" @tap="submit">提交</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      array: [{ name: "供需" }, { name: "需求" }],
      index: 0,
      supplyInfo: {
        title: "",
        msg:"",
      },
      company:{
        name:"",
        code:"",
        tel:""
      }
    };
  },
  methods: {
    submit() {
      console.log(this.supplyInfo);
      console.log(this.company);
    },
    bindPickerChange(e) {
      this.index = e.detail.value;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 25rpx;
  font-weight: 200;
  padding:1% 2%;
  .title {
    font-size: 30rpx;
    margin: 4% 0;
  }
  label {
    display: inline-block;
    width: 20%;
    vertical-align: middle;
  }
  .card {
    background-color: rgb(248, 247, 247);
    border-radius: 10rpx;
  }
  .flex {
    display: flex;
    align-items: center;
    margin-bottom: 2%;
  }
  .input {
      padding: 0 2%;
      margin: 2% 0;
      display: inline-block;
      width: 80%;
      height: 70rpx;
    }
  .supplyInfo {
    border-radius: 40rpx;
    padding: 4%;
    box-shadow: rgba(100, 100, 111, 0.2) 14rpx 14rpx 40rpx 14rpx;
    .area{
      height: 200rpx;
    }
    .picker {
      width: 80%;
      height: 70rpx;
      background: rgb(248, 247, 247);
      display: flex;
      align-items: center;
      position: relative;
      .pick{
          width: 100%;
      }
      .picker_title {
        display: flex;
        width:100%;
        margin-left: 30rpx;
        align-items: center;
        justify-content: space-between;
        .triangle-down {
          width: 0;
          height: 0;
          border-top: 15rpx solid rgb(173, 173, 173);
          border-left: 15rpx solid transparent;
          border-right: 15rpx solid transparent;
          position: absolute;
          right: 0;
        }
        .pickername {
          font-weight: 100;
        }
      }
    }
    image {
      width: 100rpx;
      height: 100rpx;
    }
    .update_button {
      text-align: center;
    }
  }
  .info{
    margin-top: 2%;
    border-radius: 40rpx;
    padding: 2% 4%;
    box-shadow: rgba(100, 100, 111, 0.2) 14rpx 14rpx 40rpx 14rpx;
  }
  .submit {
    color: white;
    font-weight: normal;
    width: 75%;
    border-radius: 20rpx;
    background-color: #02a7f0;
    margin: 2% auto;
  }
}
</style>