parent
02d613067c
commit
a6aeb32cc7
@ -0,0 +1,139 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="width100 height90 headsbg backcorfff" @click="jumpupadess('add')"> |
||||||
|
<view class="height20"></view> |
||||||
|
<view class="width90 height40 alijus font15 fcor666 border1co6"> |
||||||
|
<image mode="widthFix" class="icon30 marRight20" src="../static/imgs/add.png"></image>添加新地址 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="list width90 mart15" v-for="(item, index) in addressList" :key="index" |
||||||
|
:class="chageid == item?'afterlist':'list'" @click="changemaddress(item)"> |
||||||
|
<view class="wrapper"> |
||||||
|
<view class="address-box width90 paddtop15"> |
||||||
|
<text class="address">但是放松放松放松的方式发顺丰沙发上是方式地方但是放松方式扶 门牌号</text> |
||||||
|
</view> |
||||||
|
<view class="u-box width90 mart10 paddbotm15"> |
||||||
|
<text class="name">名称</text> |
||||||
|
<text class="mobile">15583658692</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<image src="../static/imgs/upte.png" mode="widthFix" class="icon15 marRight20" |
||||||
|
@click.stop="jumpupadess('edit')"></image> |
||||||
|
</view> |
||||||
|
<view class="height70"></view> |
||||||
|
<view class="width100 height50 dispost font15 fotct">确认</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
addressList: [1, 2, 3, 4], |
||||||
|
chageid: '' //选中的地址 |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//跳转地址 |
||||||
|
jumpupadess(item) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: '../update-address/update-address?type=' + item |
||||||
|
}) |
||||||
|
}, |
||||||
|
//选择地址 |
||||||
|
changemaddress(item) { |
||||||
|
if (this.chageid == item) { |
||||||
|
this.chageid = ''; |
||||||
|
return; |
||||||
|
} |
||||||
|
this.chageid = item; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page { |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
|
||||||
|
.headsbg { |
||||||
|
border-radius: 0 0 30px 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.border1co6 { |
||||||
|
border: 1px solid #999999; |
||||||
|
border-radius: 50rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.icon15 { |
||||||
|
width: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.icon30 { |
||||||
|
width: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.list { |
||||||
|
border-radius: 15px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
background: #fff; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.afterlist { |
||||||
|
border-radius: 15px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
background: #fff; |
||||||
|
position: relative; |
||||||
|
border: 1px solid #c32a20; |
||||||
|
} |
||||||
|
|
||||||
|
.wrapper { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.address-box { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.tag { |
||||||
|
font-size: 24upx; |
||||||
|
color: #999999; |
||||||
|
margin-right: 10upx; |
||||||
|
background: #fffafb; |
||||||
|
border: 1px solid #ffb4c7; |
||||||
|
border-radius: 4upx; |
||||||
|
padding: 4upx 10upx; |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.address { |
||||||
|
font-size: 28upx; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.u-box { |
||||||
|
font-size: 26upx; |
||||||
|
color: #999999; |
||||||
|
margin-top: 16upx; |
||||||
|
|
||||||
|
.name { |
||||||
|
margin-right: 30upx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.dispost { |
||||||
|
position: fixed; |
||||||
|
background-color: #c32a20; |
||||||
|
bottom: 0px; |
||||||
|
border-radius: 15px 15px 0px 0px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<image mode="widthFix" class="width100 imgs" src="../static/imgs/kfchome.png"></image> |
||||||
|
<view class="width94 heads alijusstart"> |
||||||
|
<view class="width48 backcorfff height260 fotct paddtop15"> |
||||||
|
<view class="fcor666 font20"><text class="fcor333 fontwig6 ">KFC</text>在线点餐</view> |
||||||
|
<view class="c62a1e font28 mart10 fontwig6">5折起</view> |
||||||
|
<image class="width80p mart20" mode="widthFix" src="../static/imgs/kfc1.png"></image> |
||||||
|
<view class="mart15 width90 height30 border-15 fcorfff backcorf062 font13"> |
||||||
|
立即点餐(堂食/外带) |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="width48 backcorfff margitle height260 fotct paddtop15"> |
||||||
|
<view class="fcor666 font20">外卖优惠点餐</view> |
||||||
|
<view class="c62a1e font28 mart10 fontwig6">送到家</view> |
||||||
|
<image class="width80p mart20" mode="widthFix" src="../static/imgs/kfc2.png"></image> |
||||||
|
<view class="mart15 width90 height30 border-15 fcorfff backcorf062 font13" @click="jumpaddress()"> |
||||||
|
立即点餐 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="foots fotct marb20"> |
||||||
|
<view class="width90 mart30 colorbe font14"> 本产品为第三方代点餐/代配送服务！</view> |
||||||
|
<view class="width90 mart5 colorbe font14"> 即第三方代点餐，一切商业行为与肯德基无关。</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
jumpaddress() { |
||||||
|
uni.navigateTo({ |
||||||
|
url: '../address/address' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page { |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
|
||||||
|
.imgs { |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
.width48 { |
||||||
|
width: 48%; |
||||||
|
border-radius: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.margitle { |
||||||
|
margin-left: 4%; |
||||||
|
} |
||||||
|
|
||||||
|
.c62a1e { |
||||||
|
color: #c32a20; |
||||||
|
} |
||||||
|
|
||||||
|
.backcorf062 { |
||||||
|
background-color: #c32a20; |
||||||
|
} |
||||||
|
|
||||||
|
.heads { |
||||||
|
position: relative; |
||||||
|
top: 500rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.border-15 { |
||||||
|
border-radius: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.colorbe { |
||||||
|
color: #beac7c; |
||||||
|
} |
||||||
|
|
||||||
|
.foots { |
||||||
|
position: relative; |
||||||
|
top: 500rpx; |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 280 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,173 @@ |
|||||||
|
<template> |
||||||
|
<view class="content"> |
||||||
|
<view class="row bor-botm1"> |
||||||
|
<text class="tit">联系人</text> |
||||||
|
<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" /> |
||||||
|
</view> |
||||||
|
<view class="row bor-botm1"> |
||||||
|
<text class="tit">手机号</text> |
||||||
|
<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" /> |
||||||
|
</view> |
||||||
|
<view class="row bor-botm1"> |
||||||
|
<text class="tit">地址</text> |
||||||
|
<text @click="chooseLocation" class="input"> |
||||||
|
{{addressData.addressName}} |
||||||
|
</text> |
||||||
|
<text class="yticon icon-shouhuodizhi"></text> |
||||||
|
</view> |
||||||
|
<view class="row bor-botm1"> |
||||||
|
<text class="tit">门牌号</text> |
||||||
|
<input class="input" type="text" v-model="addressData.area" placeholder="楼号、门牌" placeholder-class="placeholder" /> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="row default-row"> |
||||||
|
<text class="tit">设为默认</text> |
||||||
|
<switch :checked="addressData.defaule" color="#fa436a" @change="switchChange" /> |
||||||
|
</view> |
||||||
|
<button class="add-btn" @click="confirm">提交</button> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
addressData: { |
||||||
|
name: '', |
||||||
|
mobile: '', |
||||||
|
addressName: '在地图选择', |
||||||
|
address: '', |
||||||
|
area: '', |
||||||
|
default: false |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(option){ |
||||||
|
console.log('===='+option.type) |
||||||
|
let title = '新增收货地址'; |
||||||
|
if(option.type == 'edit'){ |
||||||
|
title = '编辑收货地址' |
||||||
|
|
||||||
|
// this.addressData = JSON.parse(option.data) |
||||||
|
} |
||||||
|
this.manageType = option.type; |
||||||
|
uni.setNavigationBarTitle({ |
||||||
|
title |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
switchChange(e){ |
||||||
|
this.addressData.default = e.detail; |
||||||
|
}, |
||||||
|
|
||||||
|
//地图选择地址 |
||||||
|
chooseLocation(){ |
||||||
|
uni.chooseLocation({ |
||||||
|
success: (data)=> { |
||||||
|
this.addressData.addressName = data.name; |
||||||
|
this.addressData.address = data.name; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
//提交 |
||||||
|
confirm(){ |
||||||
|
let data = this.addressData; |
||||||
|
if(!data.name){ |
||||||
|
uni.showToast({ |
||||||
|
title:'请填写收货人姓名', |
||||||
|
duration:2000, |
||||||
|
icon:'none' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)){ |
||||||
|
uni.showToast({ |
||||||
|
title:'请输入正确的手机号码', |
||||||
|
duration:2000, |
||||||
|
icon:'none' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
if(!data.address){ |
||||||
|
uni.showToast({ |
||||||
|
title:'请在地图选择所在位置', |
||||||
|
duration:2000, |
||||||
|
icon:'none' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
if(!data.area){ |
||||||
|
uni.showToast({ |
||||||
|
title:'请填写门牌号信息', |
||||||
|
duration:2000, |
||||||
|
icon:'none' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义 |
||||||
|
// this.$api.prePage().refreshList(data, this.manageType); |
||||||
|
// this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`); |
||||||
|
setTimeout(()=>{ |
||||||
|
uni.navigateBack() |
||||||
|
}, 800) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page{ |
||||||
|
background: #f8f8f8; |
||||||
|
padding-top: 16upx; |
||||||
|
} |
||||||
|
|
||||||
|
.row{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
padding:0 30upx; |
||||||
|
height: 110upx; |
||||||
|
background: #fff; |
||||||
|
|
||||||
|
.tit{ |
||||||
|
flex-shrink: 0; |
||||||
|
width: 120upx; |
||||||
|
font-size: 30upx; |
||||||
|
color: #303133; |
||||||
|
} |
||||||
|
.input{ |
||||||
|
flex: 1; |
||||||
|
font-size: 30upx; |
||||||
|
color: #303133; |
||||||
|
} |
||||||
|
.icon-shouhuodizhi{ |
||||||
|
font-size: 36upx; |
||||||
|
color: #909399; |
||||||
|
} |
||||||
|
} |
||||||
|
.default-row{ |
||||||
|
margin-top: 16upx; |
||||||
|
.tit{ |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
switch{ |
||||||
|
transform: translateX(16upx) scale(.9); |
||||||
|
} |
||||||
|
} |
||||||
|
.add-btn{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 690upx; |
||||||
|
height: 80upx; |
||||||
|
margin: 60upx auto; |
||||||
|
font-size: 16px; |
||||||
|
color: #fff; |
||||||
|
background-color: #c32a20; |
||||||
|
border-radius: 10upx; |
||||||
|
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue