web-retail-h5/pages/specialMember/index.vue

<template>
  <view class="contain">
    <view class="logOut" @click="loginOut">退出登录</view>
    <view class="formed">
      <u-form :model="form"
              labelAlign="right"
              labelWidth="75"
              :rules="rules"
              ref="uForm">
        <u-form-item :label="'会员姓名'"
                     prop="recName">
          <u-input :placeholder="'请输入联系人'"
                   v-model.trim="form.recName" />
        </u-form-item>
        <u-form-item :label="'联系方式'"
                     prop="recPhone">
          <u-input :placeholder="'请输入联系方式'" type="number" maxlength="20"
                   v-model.trim="form.recPhone" />
        </u-form-item>
        <u-form-item :label="'收货地址'"
                     prop="diqu"
                     @click='getDiqu'>
          <view class="picker">
            <u-input v-model.trim="form.diqu"
                     :placeholder="'请选收货地址'"
                     border="none"></u-input>
            <u-icon name="arrow-down"></u-icon>
          </view>
        </u-form-item>
        <u-form-item :label="'详细地址'"
                     prop="recAddress">
          <u-input :placeholder="'请输入详细地址'"
                   v-model.trim="form.recAddress" />
        </u-form-item>
      </u-form>
      <u-button style="margin-top:20px"
                @click="submit"
                text="查询"
                color="#d61820"></u-button>
    </view>
    <v-address ref="address"
               :defaultCode="defaultCode"
               @addressData="addressData"></v-address>
  </view>
</template>

<script>
import address from '@/components/address.vue'
import * as api from '@/config/regiest'
export default {
  components: {
    'v-address': address,
  },
  data() {
    return {
      defaultCode: [],
      form: {
        dizhi: [],
        recName: '',
        recPhone: '',
      },
      rules: {
        recName: [
          { required: true, trigger: 'blur', message: '请输入联系人' },
        ],
        recPhone: [
          { required: true, trigger: 'blur', message: '请输入联系方式' },
        ],
        recAddress: [
          { required: true, trigger: 'blur', message: '请输入详细地址' },
        ],
        diqu: [
          { required: true, trigger: 'change', message: '请选择收货地址' },
        ],
      },
    }
  },
  onLoad(options) {

  },
  methods: {
    loginOut() {
				uni.setStorageSync('pkCountry', '')
				this.$store.dispatch('LogOut')
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
    submit() {
      this.$refs.uForm.validate().then((res) => {
        api
          .saveSpecial(this.form)
          .then((res) => {
            if (res.code == 200) {
              // // 获取列表
              // this.getDataList()
              uni.navigateTo({ url: '/pages/specialMember/list?recName=' + this.form.recName + '&recPhone=' + this.form.recPhone})
            }
          })
          .catch((err) => {
          })
      })
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    addressData(diqu, obj) {
      this.form.diqu = diqu
      this.form.recProvince = obj.province
      this.form.recCity = obj.city
      this.form.recCounty = obj.county
      this.$forceUpdate()
    },
  },
}
</script>
<style lang="scss" scoped>
.contain {
  background: url('@/static/images/specialMem.jpg') no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  .formed {
    position: absolute;
    width: 70%;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    top: 35%;
  }
  .logOut{
    text-align: right;
    padding: 12rpx;
    font-size: 14px;
  }
}
.picker {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  border-radius: 4px;
  padding: 6px 9px;
}
</style>