massage-front/pages_order/mine/cooperation.vue

<template>
  <view class="page">
		<!-- 导航栏 -->
		<navbar title="商家合作" leftClick @leftClick="$utils.navigateBack" color="#fff" />
  
    <view class="content">
      <view class="form">
        <view class="form-title">门头照片</view>
        <view class="card upload">
          <formUpload v-model="form.image">
            <template v-slot="{ value }">
              <view class="flex">
                <image v-if="value"
                  class="upload-img"
                  :src="value" 
                  mode="aspectFill" 
                />
                <image v-else
                  class="upload-img"
                  src="../static/cooperation/icon-upload.png" 
                  mode="aspectFill" 
                />
              </view>
            </template>
          </formUpload>
        </view>
      </view>
      <view class="form">
        <view class="form-title">店铺信息</view>
        <view class="card info">
          <uv-form 
            ref="form"
            :model="form"
            :rules="rules"
            labelPosition="left" 
            labelWidth="150rpx"
            :labelStyle="{
              color: '#000000',
              fontSize: '28rpx',
            }"
          >
            <view class="form-item">
              <uv-form-item label="店铺名称" prop="shop">
                <view class="form-item-content">
                  <formInput v-model="form.shop" placeholder="请输入店铺名称"></formInput>
                </view>
              </uv-form-item>
            </view>
            <view class="form-item">
              <uv-form-item label="您的姓名" prop="name">
                <view class="form-item-content">
                  <formInput v-model="form.name" placeholder="请输入您的姓名"></formInput>
                </view>
              </uv-form-item>
            </view>
            <view class="form-item">
              <uv-form-item label="联系手机号" prop="phone">
                <view class="form-item-content">
                  <formInput v-model="form.phone" placeholder="请输入您的手机号"></formInput>
                </view>
              </uv-form-item>
            </view>
            <view class="form-item">
              <uv-form-item label="所在地区" prop="area">
                <view class="form-item-content flex area">
                  <text>{{ form.area ? form.area : '请选择' }}</text>
                  <button plain class="btn area-btn" @click="selectAddr">
                    <image class="area-btn-icon" src="../static/cooperation/icon-arrow.png" mode="widthFix"></image>
                  </button>
                </view>
              </uv-form-item>
            </view>
            <view class="form-item address">
              <uv-form-item label="详细地址" prop="address" labelPosition="top" >
                <view style="margin-top: 22rpx;">
                  <formTextarea
                    v-model="form.address" 
                    placeholder="请输入详细地址"
                  ></formTextarea>
                </view>
              </uv-form-item>
            </view>
          </uv-form>
        </view>
      </view>
      <view class="tools">
        <button plain class="btn btn-submit" @click="onSubmit">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
	import Position from '@/utils/position.js'

  import formInput from '../components/formInput.vue'
  import formUpload from '../components/formUpload.vue'
  import formTextarea from '../components/formTextarea.vue'

export default {
  components: {
    formInput,
    formUpload,
    formTextarea,
  },
  data() {
    return {
      form: {
        image: null,
        shop: null,
        name: null,
        phone: null,
        area: null,
        latitude: null,
        longitude: null,
        address: null,
      },
      rules: {
        'image': {
          type: 'string',
          required: true,
          message: '请选择门头照片',
        },
        'shop': {
          type: 'string',
          required: true,
          message: '请输入店铺名称',
        },
        'name': {
          type: 'string',
          required: true,
          message: '请输入您的姓名',
        },
        'phone': {
          type: 'string',
          required: true,
          message: '请输入您的手机号',
        },
        'area': {
          type: 'string',
          required: true,
          message: '请选择所在地区',
        },
        'address': {
          type: 'string',
          required: true,
          message: '请输入详细地址',
        },
      },
    }
  },
  methods: {
    //地图上选择地址
    selectAddr() {
      // Position.getLocation(res => {
        Position.selectAddress(0, 0, success => {
          this.setAddress(success)
        })
      // })
    },
    //提取用户选择的地址信息复制给表单数据
    setAddress(res) {
      //经纬度信息
      this.form.latitude = res.latitude
      this.form.longitude = res.longitude

      if (!res.address && res.name) { //用户直接选择城市的逻辑
        return this.form.area = res.name
      }
      if (res.address || res.name) {
        return this.form.area = res.address + res.name
      }
      this.form.area = '' //用户啥都没选就点击勾选
    },
    async onSubmit() {
      try {

        await this.$refs.form.validate()

        const {
          image,
          shop,
          name,
          phone,
          area,
          latitude,
          longitude,
          address,
        } = this.form

        const params = {
          image,
          shop,
          name,
          phone,
          area,
          latitude,
          longitude,
          address,
        }
    
        await this.$fetch('addShop', params)
        
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        })

        setTimeout(uni.navigateBack, 1000, -1)
          
      } catch (err) {
        
      }

    },
  },
}
</script>

<style lang="scss" scoped>
	.page {
		background-color: $uni-bg-color;
		min-height: 100vh;
				
		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}
	}

  .content {
    padding: 28rpx 30rpx;
  }

  
  .form {
    & + & {
      margin-top: 44rpx;
    }

    &-title {
      color: #000000;
      font-size: 28rpx;
      margin-bottom: 15rpx;
    }

    &-item {
      padding-left: 8rpx;

      & + & {
        // margin-top: 20rpx;
        border-top: 1rpx solid rgba($color: #C7C7C7, $alpha: 0.69);
      }

      &-content {
        min-height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 28rpx;;
        color: #999999;
      }
    }
  }

  .upload {
    padding: 37rpx 22rpx;

    &-img {
      width: 131rpx; height: 131rpx;
    }
  }

  .area {
    color: #000000;
    font-size: 28rpx;
    line-height: 40rpx; 
    justify-content: flex-end;

    &-btn {
      border: none;
      padding: 7rpx 20rpx 7rpx 7rpx;

      &-icon {
        width: 30rpx;
        height: auto;
      }
    }
  }

  .address {
    padding: 0;

    /deep/ .uv-form-item__body__left__content {
      margin-top: 10rpx;
      padding-left: 8rpx;
    }
  }

  .tools {
    padding: 0 56rpx;
    margin-top: 126rpx;
  }

  .btn-submit {
    padding: 29rpx 0;
    border: none;
    font-size: 36rpx;
    border-radius: 45rpx;
    color: $uni-text-color-inverse;
    background-image: linear-gradient(to right, #84A73F, #D8FF8F);
  }
  
</style>