123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- <template>
- <view class="content">
- <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
- <u-form-item label="姓名" required prop="receiverName">
- <u-input placeholder="请输入姓名" :maxlength="30" v-model="form.receiverName" />
- </u-form-item>
- <u-form-item label="电话" required prop="receiverPhone">
- <u-input placeholder="请输入电话" :maxlength="11" type="number" v-model="form.receiverPhone" />
- </u-form-item>
- <u-form-item label="省市区" required prop="receiveAreasName">
- <u-input v-model="form.receiveAreasName" placeholder="请选择省市区" @click="show = true" type="select" />
- <u-picker v-model="show" @confirm="chooseArea" mode="region"></u-picker>
- </u-form-item>
- <u-form-item label="详细地址" required prop="receiveAddress">
- <u-input placeholder="请输入收货详细地址(最多500个字符)" :maxlength="500" v-model="form.receiveAddress" />
- </u-form-item>
- </u-form>
- <view class="buttons">
- <u-button type="primary" @click="submit">提交</u-button>
- </view>
- </view>
- </template>
- <script>
- import {
- saveAddress
- } from '@/api/receiveAddress.js'
- export default {
- data() {
- return {
- show: false,
- form: {
- receiverName: '',
- receiverPhone: '',
- receiveAreasreceiverName: '', // 地址名称
- receiveAreas: '', // 地址编码
- receiveAddress: '' // 详细地址
- },
- rules: {
- receiverName: [
- {
- required: true,
- message: '请输入姓名',
- // 可以单个或者同时写两个触发验证方式
- trigger: ['change','blur'],
- }
- ],
- receiverPhone: [
- {
- required: true,
- message: '请输入电话',
- // 可以单个或者同时写两个触发验证方式
- trigger: ['change','blur'],
- }
- ],
- receiveAreasName: [
- {
- required: true,
- message: '请选择省市区',
- trigger: ['change','blur']
- }
- ],
- receiveAddress: [
- {
- required: true,
- max: 100,
- message: '请输入详细地址,最多100个字',
- trigger: ['change','blur']
- }
- ]
- }
- };
- },
- onLoad(option) {
- this.form = this.$store.state.vuex_OrderAddress
- if (this.form.receiveAreasName) {
- uni.setNavigationBarTitle({
- title: '修改地址'
- })
- this.form.receiveAreasName = this.form.receiveAreasName.replace(',','-')
- } else {
- uni.setNavigationBarTitle({
- title: '新增地址'
- })
- }
- },
- methods: {
- submit() {
- this.$refs.uForm.validate(valid => {
- if (valid) {
- console.log('验证通过');
- let params = this.form
- saveAddress(params).then(res=>{
- if(res.status == 200) {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- setTimeout(()=>{
- uni.navigateBack()
- },300)
- } else {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- }
- })
- } else {
- console.log('验证失败');
- }
- });
- },
- // 选择地址
- chooseArea(e){
- console.log(e)
- this.form.receiveAreasName = e.province.label + '-' + e.city.label + '-' + e.area.label
- this.form.receiveAreas = e.province.value + ',' + e.city.value + ',' + e.area.value
- }
- },
- // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
- onReady() {
- this.$refs.uForm.setRules(this.rules);
- }
- };
- </script>
- <style lang="scss">
- .content{
- padding: 0 50upx;
- background: #FFFFFF;
- width: 100%;
- .buttons{
- padding: 80upx 100upx;
- }
- }
- </style>
|