85 lines
2.9 KiB
Plaintext
85 lines
2.9 KiB
Plaintext
<template>
|
|
<view class="">
|
|
<view class="" style="padding: 0rpx 30rpx; ">
|
|
<up-form labelPosition="top" :model="userData" labelWidth='200rpx' ref="form1">
|
|
<up-form-item label="姓名" prop="userInfo.name" ref="item1">
|
|
<up-input v-model="userData.name"
|
|
style=" border-radius: 16rpx; margin-top: 15rpx; background-color: #F8F9FA; padding: 20rpx;"
|
|
prefix-icon="account" placeholder="请输入姓名" :prefixIconStyle="{fontSize:'50rpx'}"
|
|
border="none"></up-input>
|
|
</up-form-item>
|
|
<up-form-item label="手机号" prop="userInfo.name" ref="item1">
|
|
<up-input v-model="userData.name"
|
|
style=" border-radius: 16rpx; background-color: #F8F9FA;margin-top: 15rpx; padding: 20rpx;"
|
|
prefix-icon="phone" placeholder="请输入姓名" :prefixIconStyle="{fontSize:'45rpx'}"
|
|
border="none"></up-input>
|
|
</up-form-item>
|
|
<up-form-item label="所在地区" prop="userInfo.name" ref="item1">
|
|
<view class="" @click="location()"
|
|
style=" width: 100%; display: flex; align-items: center; justify-content: space-between; border-radius: 16rpx; margin-top: 15rpx; background-color: #F8F9FA;padding: 20rpx;">
|
|
<view class="" style="display: flex;align-items: center;">
|
|
<up-icon name="map" color="#606266" size="22"></up-icon>
|
|
<view class="" style="color: #c0c4cc; margin-left: 10rpx; ">
|
|
请选择地址
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<up-icon name="arrow-right" color="#606266" size="20"></up-icon>
|
|
</view>
|
|
</view>
|
|
</up-form-item>
|
|
<up-form-item label="详细地址" prop="userInfo.name" ref="item1">
|
|
<up-textarea v-model="userData.detail" style=" margin-top: 15rpx; background-color: #F8F9FA;"
|
|
placeholder="请输入内容"></up-textarea>
|
|
</up-form-item>
|
|
</up-form>
|
|
<view class=""
|
|
style=" margin-top: 15rpx; display: flex; align-items: center; justify-content: space-between;">
|
|
<view class="">
|
|
设为默认地址
|
|
</view>
|
|
<view class="">
|
|
<up-switch v-model="userData.switchValue" size='18' activeColor='var(--nav-mian)'
|
|
@change="switchChange"></up-switch>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 新增地址按钮 -->
|
|
<view class="" style="position: fixed; bottom: 0; width: 100%; padding: 20rpx; border-top: 1rpx solid #e2e2e2; background-color: #fff; ">
|
|
<up-button color='var(--nav-mian)' shape='circle' style="width: 90%; margin: 15rpx auto 0; "
|
|
text="保存地址"></up-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
let userData = ref({
|
|
name: '',
|
|
detail: '',
|
|
switchValue: ''
|
|
})
|
|
|
|
const location = () => {
|
|
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function (res) {
|
|
console.log('当前位置的经度：' + res.longitude);
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|
}
|
|
});
|
|
}
|
|
|
|
const switchChange = () => {
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
</style> |