Commit 39c1f4c6 authored by Damon's avatar Damon
parents e8febf3e 7f66c1bb
......@@ -446,6 +446,7 @@
// margin-bottom: 20rpx;
font-size: 32rpx;
color: #333333;
height: 820rpx;
.learn-view-title {
font-size: 32rpx;
......
<template>
<view class="wrap">
<view class="top">
<view class="item">
<view class="left">收货人</view>
<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
</view>
<view class="item">
<view class="left">手机号码</view>
<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
</view>
<view class="item" @tap="showRegionPicker">
<view class="left">所在地区</view>
<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" />
</view>
<view class="item address">
<view class="left">详细地址</view>
<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" />
</view>
<!-- <view class="site-clipboard">
<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
<view class="clipboard">
地址粘贴板
<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
</view>
</view> -->
</view>
<view class="bottom">
<view class="tag">
<view class="left">标签</view>
<view class="right">
<text class="tags"></text>
<text class="tags">公司</text>
<text class="tags">学校</text>
<view class="tags plus"><u-icon size="22" name="plus"></u-icon></view>
</view>
</view>
<view class="default">
<view class="left">
<view class="set">设置默认地址</view>
<view class="tips">提醒:每次下单会默认推荐该地址</view>
</view>
<view class="right"><switch color="red" @change="setDefault" /></view>
</view>
</view>
<u-picker mode="region" ref="uPicker" v-model="show" />
</view>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
setDefault() {},
showRegionPicker() {
this.show = true;
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .line {
color: $u-light-color;
font-size: 28rpx;
}
.wrap {
background-color: #f2f2f2;
.top {
background-color: #ffffff;
border-top: solid 2rpx $u-border-color;
padding: 22rpx;
.item {
display: flex;
font-size: 32rpx;
line-height: 100rpx;
align-items: center;
border-bottom: solid 2rpx $u-border-color;
.left {
width: 180rpx;
}
input {
text-align: left;
}
}
.address {
padding: 20rpx 0;
textarea {
// width: 100%;
height: 150rpx;
background-color: #f7f7f7;
line-height: 60rpx;
margin: 40rpx auto;
padding: 20rpx;
}
}
.site-clipboard {
padding-right: 40rpx;
textarea {
// width: 100%;
height: 150rpx;
background-color: #f7f7f7;
line-height: 60rpx;
margin: 40rpx auto;
padding: 20rpx;
}
.clipboard {
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: $u-tips-color;
height: 80rpx;
.icon {
margin-top: 6rpx;
margin-left: 10rpx;
}
}
}
}
.bottom {
margin-top: 20rpx;
padding: 40rpx;
padding-right: 0;
background-color: #ffffff;
font-size: 28rpx;
.tag {
display: flex;
.left {
width: 160rpx;
}
.right {
display: flex;
flex-wrap: wrap;
.tags {
width: 140rpx;
padding: 16rpx 8rpx;
border: solid 2rpx $u-border-color;
text-align: center;
border-radius: 50rpx;
margin: 0 10rpx 20rpx;
display: flex;
font-size: 28rpx;
align-items: center;
justify-content: center;
color: $u-content-color;
line-height: 1;
}
.plus {
//padding: 10rpx 0;
}
}
}
.default {
margin-top: 50rpx;
display: flex;
justify-content: space-between;
border-bottom: solid 2rpx $u-border-color;
line-height: 64rpx;
.tips {
font-size: 24rpx;
}
.right {
}
}
}
}
</style>
<template>
<view>
<view class="item" v-for="(res, index) in siteList" :key="res.id">
<view class="top">
<view class="name">{{ res.name }}</view>
<view class="phone">{{ res.phone }}</view>
<view class="tag">
<text v-for="(item, index) in res.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
</view>
</view>
<view class="bottom">
广东省深圳市宝安区 自由路66号
<u-icon name="edit-pen" :size="40" color="#999999"></u-icon>
</view>
</view>
<view class="addSite" @tap="toAddSite">
<view class="add">
<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
siteList: []
};
},
onLoad() {
this.getData();
},
methods: {
getData() {
this.siteList = [
{
id: 1,
name: '游X',
phone: '183****5523',
tag: [
{
tagText: '默认'
},
{
tagText: '家'
}
],
site: '广东省深圳市宝安区 自由路66号'
},
{
id: 2,
name: '李XX',
phone: '183****5555',
tag: [
{
tagText: '公司'
}
],
site: '广东省深圳市宝安区 翻身路xx号'
},
{
id: 3,
name: '王YY',
phone: '153****5555',
tag: [],
site: '广东省深圳市宝安区 平安路13号'
}
];
},
toAddSite(){
uni.navigateTo({
url: '/pages/template/address/addSite'
});
}
}
};
</script>
<style lang="scss" scoped>
.item {
padding: 40rpx 20rpx;
.top {
display: flex;
font-weight: bold;
font-size: 34rpx;
.phone {
margin-left: 60rpx;
}
.tag {
display: flex;
font-weight: normal;
align-items: center;
text {
display: block;
width: 60rpx;
height: 34rpx;
line-height: 34rpx;
color: #ffffff;
font-size: 20rpx;
border-radius: 6rpx;
text-align: center;
margin-left: 30rpx;
background-color:rgb(49, 145, 253);
}
.red{
background-color:red
}
}
}
.bottom {
display: flex;
margin-top: 20rpx;
font-size: 28rpx;
justify-content: space-between;
color: #999999;
}
}
.addSite {
display: flex;
justify-content: space-around;
width: 600rpx;
line-height: 100rpx;
position: absolute;
bottom: 30rpx;
left: 80rpx;
background-color: red;
border-radius: 60rpx;
font-size: 30rpx;
.add{
display: flex;
align-items: center;
color: #ffffff;
.icon{
margin-right: 10rpx;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment