massage-front/pages_order/mine/cooperation.vue

<template>
  <view class="page">
		<!-- 导航栏 -->
		<navbar title="商家合作" leftClick @leftClick="$utils.navigateBack" color="#fff" />
  
    <view v-if="['0', '2'].includes(status) && statusDesc" class="flex tips">
      <uv-icon name="info-circle" color="#86A941" size="28rpx"></uv-icon>
      <text style="margin-left: 3rpx;">{{ statusDesc }}</text>
    </view>

    <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" v-if="status != '1'">
        <button plain class="btn btn-submit" @click="onSubmit">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

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 {
      id: null,
      status: null,
      statusDesc: null,
      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: '请输入详细地址',
        },
      },
    }
  },
  computed: {
    ...mapState(['userInfo']),
  },
  onLoad() {
    this.initData()
  },
  onPullDownRefresh() {
    this.updateStatus()
  },
  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 initData() {

      try {
        const shopList = (await this.$fetch('queryShopList', { userId: this.userInfo.id }))?.records

        if (!shopList.length) {
          return
        }

        const {
          id,
          status,
          status_dictText,
          remark,
          image,
          shop,
          name,
          phone,
          area,
          latitude,
          longitude,
          address,
        } = shopList[0]

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

        this.id = id
        this.status = status
        this.statusDesc = status == '2' ? `${status_dictText}：${remark}` : status_dictText

      } catch (err) {
        
      }
    },
    async updateStatus() {
      if (!this.id) {
        return
      }

      try {
        const { status, status_dictText, remark } = await this.$fetch('queryShopById', { id: this.id })

        this.status = status
        this.statusDesc = status == '2' ? `${status_dictText}：${remark}` : status_dictText
      } catch (err) {
        console.log('--err', err)
      }

      uni.stopPullDownRefresh();
    },
    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,
        }

        let api = this.id ? 'updateShop' : 'addShop'
    
        await this.$fetch(api, 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);
		}
	}

  .tips {
    padding: 5rpx 0;
    font-weight: bold;
    font-size: 28rpx;
    color: $uni-color;
    background-color: rgba($color: #D8FF8F, $alpha: 0.3);
  }

  .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>