新增地址管理

pages.json

@@ -23,20 +23,12 @@
 					"backgroundColor": "#FFFFFF",
 					"titleSize": "16",
 					"buttons": [{
-							"float": "left",
+						"float": "right",
-							"text": "\ue601",
+						"text": "\ue603",
-							"fontSrc": "/static/iconfont.ttf",
+						"fontSrc": "/static/iconfont.ttf",
-							"color": "#666",
+						"color": "#666",
-							"fontSize": "20px"
+						"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": "地址",
+			"navigationBarTitleText": "地址"
-			"app-plus": {
-				"titleNView": {
-					"backgroundColor": "#FFFFFF",
-					"titleSize": "16",
-					"buttons": [{
-						"float": "right",
-						"text": "新增",
-						"color": "#34CE98",
-						"fontSize": "14px"
-					}]
-				}
-			}
 		}
 	}, {
 		"path": "pages/address/edit",
@@ -116,8 +96,8 @@
 	}, {
 		"path": "pages/pay/pay",
 		"style": {
-			"navigationBarTitleText": "收银台",
+			"navigationBarTitleText": "收银台",
-			"navigationBarBackgroundColor":"#FFFFFF"
+			"navigationBarBackgroundColor": "#FFFFFF"
 		}
 	}],
 	"tabBar": {

pages/address/index.vue

@@ -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() {
+	data() {
-			return {
+		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>

pages/index/index.vue

@@ -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;

uni_modules/oct-address/components/oct-address/oct-address.vue

@@ -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>

uni_modules/oct-address/package.json

@@ -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"
+        }
+      }
+    }
+  }
+}

uni_modules/oct-address/readme.md

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

unpackage/dist/dev/app-plus/app-config-service.js

@@ -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}}}});