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