dl_uniapp/pages/mine/addr/addr-detail.vue

<template>
	<view class="my-card-box">
		<view class="card-detail">
			<view class="title">地址信息</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>收件人名称
				</view>
				<view class="item-value">
					<input class="uni-input" v-model="dataObj.name" type="number" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>联系电话
				</view>
				<view class="item-value">
					<input class="uni-input" v-model="dataObj.tel" type="tel" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>收件地址
				</view>
				<view class="item-value">
					<uni-data-picker placeholder="请选择" popup-title="请选择收件地址" :localdata="dataTree"
						v-model="dataObj.cityId" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
						@popupclosed="onpopupclosed">
					</uni-data-picker>
					<textarea style="margin-top: 10rpx;" v-model="dataObj.detail" placeholder="请输入详细地址" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>是否默认
				</view>
				<view class="item-value">
					<uni-data-checkbox v-model="dataObj.isDefault" :localdata="chooseArray" />
				</view>
			</view>
			<view class="item-field" style="align-items: center;">
				<view class="submit-box" @click="submitForm()">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
  import {treeCity} from '@/api/business/base.js'
  import {saveAddress,getById} from '@/api/business/member.js'
  import {toast} from '@/utils/common.js'
	export default {
		data() {
			return {
				// 单选数据源
				chooseArray: [{
					text: '是',
					value: "1"
				}, {
					text: '否',
					value: "0"
				}],
        //城市树结构
				dataTree: [],
				//名片数据对象
				dataObj: {
					name: "",
					tel: "",
					cityId: "",
					detail: "",
					isDefault: "0"
				}
			}
		},

    onLoad(options){
      this.initData(options.id,options.isCopy);
    },

    onShow(options) {
      this.initAddress();
    },
		methods: {

		  /**初始化界面*/
      initData(id,isCopy){
        if (id) {
          getById({id:id}).then(res =>{
            this.dataObj = res.data
            if (isCopy){
              this.dataObj.id = null
            }
          })
        } else {
          this.dataObj = {
            name: "",
            tel: "",
            cityId: "",
            detail: "",
            isDefault: "0"
          }
        }
      },

		  /**初始化树结构*/
      initAddress(){
        treeCity().then(res => {
          this.dataTree = res.data
        }).catch((e) => {
          uni.showToast({
            icon: 'error',
            duration: 2000,
            title: e
          });
        })
      },


      /**提交*/
      submitForm(){
        if (this.dataObj.name == null || this.dataObj.name == ""){
          toast("收件人姓名不能为空")
          return
        }
        if (this.dataObj.tel == null || this.dataObj.tel == ""){
          toast("联系电话不能为空")
          return
        }
        if (this.dataObj.cityId == null || this.dataObj.cityId == ""){
          toast("收件地址不能为空")
          return
        }
        saveAddress(this.dataObj).then(res => {
            if (res.code == 200) {
              uni.showToast({
                icon: 'success',
                duration: 2000,
                title: '保存成功'
              });
              uni.navigateBack()
            }
          }).catch((e) => {
            uni.showToast({
              icon: 'error',
              duration: 2000,
              title: e
            });
          })
      },

			onnodeclick(e) {
				console.log(e,135);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			submit() {
				console.log(this.dataObj)
			}
		}
	}
</script>

<style lang="scss">
	.my-card-box {
		border-top: 1rpx solid #F4F4F4;
		padding: 30rpx;
		width: 100%;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.card-detail {
			width: 100%;
			padding: 20rpx;
			background-color: white;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: center;
			position: relative;

			.title {
				font-size: 33rpx;
				width: 100%;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #F4F4F4;
			}

			.item-field {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: self-start;
				justify-content: center;

				.is-required {
					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
				}

				.item-lable {
					padding: 15rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;

				}

				.item-value {
					width: 100%;

					input {
						padding-left: 20rpx;
						line-height: 1;
						height: 70rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					.choose-add {
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					textarea {
						width: 100%;
						height: 150rpx;
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}
				}

				.submit-box {
					padding: 15rpx 0;
					background-color: #FC1F3E;
					color: white;
					width: 70%;
					border-radius: 10rpx;
					margin-top: 80rpx;
					text-align: center;
				}
			}


		}
	}
</style>