新增地址管理

This commit is contained in:
唐明明
2022-01-04 13:27:29 +08:00
parent cddd9e7d0e
commit c810dbdb1d
12 changed files with 1108 additions and 46 deletions

View File

@@ -23,20 +23,12 @@
"backgroundColor": "#FFFFFF",
"titleSize": "16",
"buttons": [{
"float": "left",
"text": "\ue601",
"fontSrc": "/static/iconfont.ttf",
"color": "#666",
"fontSize": "20px"
},
{
"float": "right",
"text": "\ue603",
"fontSrc": "/static/iconfont.ttf",
"color": "#666",
"fontSize": "20px"
}
]
}]
}
}
}
@@ -92,19 +84,7 @@
"path": "pages/address/index",
"name": "Address",
"style": {
"navigationBarTitleText": "地址",
"app-plus": {
"titleNView": {
"backgroundColor": "#FFFFFF",
"titleSize": "16",
"buttons": [{
"float": "right",
"text": "新增",
"color": "#34CE98",
"fontSize": "14px"
}]
}
}
"navigationBarTitleText": "地址"
}
}, {
"path": "pages/address/edit",
@@ -117,7 +97,7 @@
"path": "pages/pay/pay",
"style": {
"navigationBarTitleText": "收银台",
"navigationBarBackgroundColor":"#FFFFFF"
"navigationBarBackgroundColor": "#FFFFFF"
}
}],
"tabBar": {

View File

@@ -1,19 +1,91 @@
<template>
<view>
地址管理
<view class="content">
<oct-address
:lists="addressList"
:isEdit="false"
:pattern="true"
editColor="#34CE98"
:btnStyle="{'backgroundColor': '#34CE98'}"
@onAddress="onInfo"
@onAdd="add"
>
</oct-address>
</view>
</template>
<script>
export default {
export default {
data() {
return {
addressList: [
{
name: '唐明明',
phone: '18245180131',
city: '黑龙江省哈尔滨市香坊区',
address: '旭升南街108号',
default: false,
tag: '公司'
},{
name: '张静',
phone: '18245180131',
city: '黑龙江省哈尔滨市香坊区',
address: '旭升南街108号',
default: true,
tag: '家'
},{
name: '法外狂徒张三',
phone: '18245180131',
city: '黑龙江省哈尔滨市香坊区',
address: '旭升南街108号',
default: false,
tag: ''
},{
name: '王尼玛',
phone: '18245180131',
city: '黑龙江省哈尔滨市香坊区',
address: '旭升南街108号',
default: false,
tag: ''
},{
name: '纸巾劳斯',
phone: '18245180131',
city: '黑龙江省哈尔滨市香坊区',
address: '旭升南街108号',
default: false,
tag: ''
},{
name: '张同学',
phone: '18245180131',
city: '黑龙江省哈尔滨市香坊区',
address: '旭升南街108号',
default: false,
tag: ''
},{
name: '大叔',
phone: '18245180131',
city: '黑龙江省哈尔滨市香坊区',
address: '旭升南街108号',
default: false,
tag: ''
}
]
};
},
methods: {
onInfo(val){
console.log(val)
},
add(){
console.log("新增地址")
}
}
};
</script>
<style lang="scss">
.content{
background: #F3F6FB;
overflow: hidden;
min-height: 100vh;
}
</style>

View File

@@ -227,10 +227,11 @@ export default {
border-radius: $radius;
}
.new-title {
font-size: $title-size;
font-size: $title-size-lg;
line-height: 45rpx;
min-height: 100rpx;
margin-bottom: 10px;
font-weight: bold;
}
.new-tool {
color: $text-gray;

View File

View File

@@ -0,0 +1,200 @@
<template>
<scroll-view class="address--scroll" scroll-y="true" >
<view class="address--footer">
<view class="address--newAdd" @click="$emit('onAdd')" :style="btnStyle">
<slot name="btn">新建收货地址</slot>
</view>
</view>
<block v-if="lists.length > 0">
<view class="address--lists">
<view class="address--item" :class="[pattern ? 'chunk': 'broad', {'edit': isEdit}]" v-for="(item, index) in lists" :key="index">
<view class="city">
<text v-if="item.default" class="city--tag city--default">默认</text>
<text v-if="item.tag && item.tag != ''" class="city--tag city--type">{{item.tag}}</text>
{{item.city}}
</view>
<view class="address">{{item.address}}</view>
<view class="name">{{item.name}}<text>{{item.phone}}</text></view>
<view class="edit" :style="{'color': editColor}" @click="$emit('onAddress', item)">{{isEdit ? '编辑' : '选择'}}</view>
</view>
</view>
</block>
<block v-else>
<view class="address--null">
<slot name="null">
<image class="null--icon" v-if="nullIcon != ''" :src="nullIcon" mode="widthFix"></image>
<view class="null--text">{{nullText}}</view>
</slot>
</view>
</block>
</scroll-view>
</template>
<script>
export default{
props: {
// 订单样式否为块
pattern: {
type: Boolean,
default: true
},
// 地址列表
lists: {
type: Array,
default: () => {
return []
}
},
// 是否为管理列表
isEdit: {
type: Boolean,
default: true
},
// 状态标签颜色
stateColor: {
type : Object,
default : () => {
return {}
}
},
// 编辑/选择按钮颜色
editColor: {
type : String,
default : "#FF6160"
},
// 底部按钮颜色
btnStyle: {
type : Object,
default : () => {
return {}
}
},
// 缺省页提示文字
nullText: {
type : String,
default : '还没有创建收货地址~'
},
// 缺省页提示icon
nullIcon: {
type : String,
default : () => {
return require('../../static/null-icon.png')
}
}
}
}
</script>
<style lang="scss" scoped>
$margin: 30rpx;
$radius: 10rpx;
.address--footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: $margin;
z-index: 999;
.address--newAdd{
background-color: #3764FF;
color: white;
height: 90rpx;
line-height: 90rpx;
border-radius: $radius;
text-align: center;
font-size: 32rpx;
margin-bottom: env(safe-area-inset-bottom);
margin-bottom: constant(safe-area-inset-bottom);
}
}
.address--scroll{
height: 100vh;
width: 100vw;
box-sizing: border-box;
.address--lists{
padding-bottom: ($margin*3) + 90rpx;
padding-bottom: ($margin*3) + 90rpx;
overflow: hidden;
.address--item{
position: relative;
background: white;
&.chunk{
margin: $margin;
border-radius: $radius;
padding: $margin ($margin + 120rpx) $margin $margin;
}
&.broad{
padding: $margin;
border-bottom: solid 1rpx #ddd;
}
&>.edit{
position: absolute;
right: $margin;
top: 50%;
margin-top: -45rpx;
line-height: 90rpx;
width: 90rpx;
text-align: center;
font-size: 28rpx;
}
&>.city{
font-size: 26rpx;
color: #888;
.city--tag{
vertical-align: middle;
margin-right: $margin/2;
}
.city--default{
background: #FF6160;
color: white;
padding: 0 $margin/3;
border-radius: $radius;
font-size: 22rpx;
}
.city--type{
background: #007AFF;
padding: 0 $margin/3;
border-radius: $radius;
color: white;
font-size: 22rpx;
}
}
&>.address{
font-size: 30rpx;
color: #333;
line-height: 30rpx;
padding: $margin/3 0;
font-weight: bold;
}
&>.name{
font-size: 26rpx;
color: #888;
text{
padding-left: $margin;
}
}
&:last-child{
margin-bottom: env(safe-area-inset-bottom);
margin-bottom: constant(safe-area-inset-bottom);
}
}
}
}
.address--null{
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.null--icon{
width: 188rpx;
}
.null--text{
color: #555;
font-size: 28rpx;
margin-top: $margin;
}
}
</style>

View File

@@ -0,0 +1,80 @@
{
"id": "oct-address",
"displayName": "oct-address",
"version": "1.0.0",
"description": "oct-address",
"keywords": [
"oct-address"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "",
"data": "",
"permissions": ""
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

View File

@@ -0,0 +1 @@
# oct-address

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@@ -2,7 +2,7 @@
var isReady=false;var onReadyCallbacks=[];
var isServiceReady=false;var onServiceReadyCallbacks=[];
var __uniConfig = {"pages":["pages/index/index","pages/record/index","pages/store/index","pages/user/index","pages/auth/auth","pages/store/goods","pages/store/buy","pages/order/index","pages/order/details","pages/address/index","pages/address/edit","pages/pay/pay"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"ZH健康","navigationBarBackgroundColor":"#F3F6FB","backgroundColorTop":"#F3F6FB","backgroundColorBottom":"#F3F6FB"},"tabBar":{"borderStyle":"white","selectedColor":"#34CE98","list":[{"iconPath":"static/tabBar/tabBar_00.png","selectedIconPath":"static/tabBar/tabBar_show_00.png","pagePath":"pages/index/index","text":"发现"},{"iconPath":"static/tabBar/tabBar_01.png","selectedIconPath":"static/tabBar/tabBar_show_01.png","pagePath":"pages/record/index","text":"记录"},{"iconPath":"static/tabBar/tabBar_02.png","selectedIconPath":"static/tabBar/tabBar_show_02.png","pagePath":"pages/store/index","text":"商城"},{"iconPath":"static/tabBar/tabBar_03.png","selectedIconPath":"static/tabBar/tabBar_show_03.png","pagePath":"pages/user/index","text":"我的"}]},"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"健康监测","compilerVersion":"3.3.5","entryPagePath":"pages/index/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
var __uniRoutes = [{"path":"/pages/index/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"发现","navigationStyle":"custom"}},{"path":"/pages/record/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"记录","navigationStyle":"custom"}},{"path":"/pages/store/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"健康生活","titleNView":{"backgroundColor":"#FFFFFF","titleSize":"16","buttons":[{"float":"left","text":"","fontSrc":"/static/iconfont.ttf","color":"#666","fontSize":"20px"},{"float":"right","text":"","fontSrc":"/static/iconfont.ttf","color":"#666","fontSize":"20px"}]}}},{"path":"/pages/user/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"我的","navigationStyle":"custom"}},{"path":"/pages/auth/auth","meta":{},"window":{"navigationBarTitleText":"登录"}},{"path":"/pages/store/goods","meta":{},"window":{"navigationStyle":"custom","navigationBarTitleText":"详情","titleNView":{"backgroundColor":"#FFFFFF","type":"transparent"}}},{"path":"/pages/store/buy","meta":{},"window":{"navigationBarTitleText":"确认订单","enablePullDownRefresh":false}},{"path":"/pages/order/index","meta":{},"window":{"navigationBarTitleText":"订单","navigationBarBackgroundColor":"#FFFFFF","enablePullDownRefresh":false}},{"path":"/pages/order/details","meta":{},"window":{"navigationBarTitleText":"订单详情","enablePullDownRefresh":false}},{"path":"/pages/address/index","meta":{},"window":{"navigationBarTitleText":"地址","titleNView":{"backgroundColor":"#FFFFFF","titleSize":"16","buttons":[{"float":"right","text":"新增","color":"#34CE98","fontSize":"14px"}]}}},{"path":"/pages/address/edit","meta":{},"window":{"navigationBarTitleText":"编辑","enablePullDownRefresh":false}},{"path":"/pages/pay/pay","meta":{},"window":{"navigationBarTitleText":"收银台","navigationBarBackgroundColor":"#FFFFFF"}}];
var __uniRoutes = [{"path":"/pages/index/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"发现","navigationStyle":"custom"}},{"path":"/pages/record/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"记录","navigationStyle":"custom"}},{"path":"/pages/store/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"健康生活","titleNView":{"backgroundColor":"#FFFFFF","titleSize":"16","buttons":[{"float":"right","text":"","fontSrc":"/static/iconfont.ttf","color":"#666","fontSize":"20px"}]}}},{"path":"/pages/user/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"我的","navigationStyle":"custom"}},{"path":"/pages/auth/auth","meta":{},"window":{"navigationBarTitleText":"登录"}},{"path":"/pages/store/goods","meta":{},"window":{"navigationStyle":"custom","navigationBarTitleText":"详情","titleNView":{"backgroundColor":"#FFFFFF","type":"transparent"}}},{"path":"/pages/store/buy","meta":{},"window":{"navigationBarTitleText":"确认订单","enablePullDownRefresh":false}},{"path":"/pages/order/index","meta":{},"window":{"navigationBarTitleText":"订单","navigationBarBackgroundColor":"#FFFFFF","enablePullDownRefresh":false}},{"path":"/pages/order/details","meta":{},"window":{"navigationBarTitleText":"订单详情","enablePullDownRefresh":false}},{"path":"/pages/address/index","meta":{},"window":{"navigationBarTitleText":"地址"}},{"path":"/pages/address/edit","meta":{},"window":{"navigationBarTitleText":"编辑","enablePullDownRefresh":false}},{"path":"/pages/pay/pay","meta":{},"window":{"navigationBarTitleText":"收银台","navigationBarBackgroundColor":"#FFFFFF"}}];
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
service.register("uni-app-config",{create(a,b,c){if(!__uniConfig.viewport){var d=b.weex.config.env.scale,e=b.weex.config.env.deviceWidth,f=Math.ceil(e/d);Object.assign(__uniConfig,{viewport:f,defaultFontSize:Math.round(f/20)})}return{instance:{__uniConfig:__uniConfig,__uniRoutes:__uniRoutes,global:void 0,window:void 0,document:void 0,frames:void 0,self:void 0,location:void 0,navigator:void 0,localStorage:void 0,history:void 0,Caches:void 0,screen:void 0,alert:void 0,confirm:void 0,prompt:void 0,fetch:void 0,XMLHttpRequest:void 0,WebSocket:void 0,webkit:void 0,print:void 0}}}});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB