下单，地址管理

.hbuilderx/launch.json

@@ -10,6 +10,10 @@
      	{
      		"launchtype" : "local"
      	},
+     	"h5" : 
+     	{
+     		"launchtype" : "local"
+     	},
      	"type" : "uniCloud"
      }
     ]

apis/interfaces/address.js

@@ -0,0 +1,65 @@
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 地址管理
+ */
+
+import { request } from '../index'
+
+// 地址列表
+const list = () =>{
+	return request({
+		url: 'mall/addresses'
+	})
+}
+
+// 添加地址
+const add = data => {
+	return request({
+		url: 'mall/addresses',
+		method: 'POST',
+		data
+	})
+}
+
+// 收货地址详情
+const info = id => {
+	return request({
+		url: 'mall/addresses/' + id
+	})
+}
+
+// 修改收货地址
+const edit = (id, data) => {
+	return request({
+		url: 'mall/addresses/' + id,
+		method: 'PUT',
+		data
+	})
+}
+
+// 删除收货地址
+const del = id => {
+	return request({
+		url: 'mall/addresses/' + id,
+		method: 'DELETE'
+	})
+}
+
+// 获取省市区
+const addresses = data => {
+	return request({
+		url: 'mall/addresses/create',
+		data
+	})
+}
+
+export {
+	list,
+	add,
+	info,
+	edit,
+	del,
+	addresses
+}

apis/interfaces/store.js

@@ -30,6 +30,7 @@ const meals = id => {
 
 // 商品列表
 const lists = data => {
+	console.log(data)
 	return request({
 		url: 'mall/goods',
 		data
@@ -53,11 +54,19 @@ const verify = data => {
 	})
 }
 
+// 商城二级分类
+const classify = id => {
+	return request({
+		url: 'mall/categories/' + id + '/children'
+	})
+}
+
 export {
 	mall,
 	goods,
 	meals,
 	lists,
 	buy,
-	verify
+	verify,
+	classify
 }

pages/address/edit.vue

@@ -1,19 +1,303 @@
 <template>
-	<view>
+	<view class="content">
-		编辑地址
+		<!-- 表单 -->
+		<view class="form-block">
+			<view class="item">
+				<label>收货人</label>
+				<input class="form-input" type="text" v-model="name" placeholder="输入收货人姓名" />
+			</view>
+			<view class="item">
+				<label>手机号码</label>
+				<input class="form-input" type="number" v-model="phone" placeholder="输入手机号码"/>
+			</view>
+			<view class="item">
+				<label>所在地区</label>
+				<view class="picker-value" @click="show = true">
+					<block v-if="value.length > 0">
+						<text v-for="(item, index) in value" :key="index">{{item.name}}</text>
+					</block>
+					<block v-else>
+						<view class="picker-value-placeholder">请选择省市区</view>
+					</block>
+				</view>
+			</view>
+			<view class="item">
+				<label>详细地址</label>
+				<input class="form-input" type="text" v-model="street" placeholder="输入详细地址"/>
+			</view>
+		</view>
+		<view class="form-block">
+			<view class="item">
+				<label>设为默认</label>
+				<view class="form-switch">
+					<u-switch v-model="def" size="22" activeColor="#34CE98" />
+				</view>
+			</view>
+		</view>
+		<view class="form-block" v-if="this.$Route.query.id">
+			<view class="item remove" @click="deleteThis">
+				<label>删除地址</label>
+				<view class="form-switch">
+					<uni-icons type="forward" color="#999"></uni-icons>
+				</view>
+			</view>
+		</view>
+		<!-- 编辑信息 -->
+		<view class="footer">
+			<button type="default" @click="submit">{{this.$Route.query.id ? '保存' : '创建'}}</button>
+		</view>
+		<!-- 地址选择器 -->
+		<u-picker
+			:show="show"
+			ref="uPicker"
+			keyName="name"
+			:columns="columns"
+			confirmColor="#34CE98"
+			cancelColor="#666"
+			:defaultIndex="defaultIndex"
+			@cancel="show = false"
+			@confirm="confirm"
+			@change="changePicker"
+		></u-picker>
 	</view>
 </template>
 
 <script>
+	import { addresses, add, info, edit, del } from '@/apis/interfaces/address'
 	export default {
 		data() {
 			return {
-				
+				show		: false,
+				value		: [],
+				columns		: [
+					[{name: '省'}],
+					[{name: '市'}],
+					[{name: '区/县'}]
+				],
+				defaultIndex: [],
+				name		: "",
+				phone		: "",
+				street		: "",
+				def			: false,
 			};
+		},
+		created() {
+			uni.setNavigationBarTitle({
+				title: this.$Route.query.id ? '编辑地址': '创建地址'
+			})
+			if(this.$Route.query.id){
+				info(this.$Route.query.id).then(res =>{
+					let addressId = [
+						res.province.region_id,
+						res.city.region_id,
+						res.district.region_id,
+					]
+					this.name 		  = res.name
+					this.phone 		  = res.mobile
+					this.street		  = res.address
+					this.def		  = res.default
+					this.value  	  = [
+						{ name:res.province.name,  id: res.province.region_id},
+						{ name:res.city.name,  	   id: res.city.region_id},
+						{ name:res.district.name,  id: res.district.region_id}
+					]
+					this.getAddresses(addressId)
+				})
+			}else{
+				this.getAddresses()
+			}
+		},
+		methods:{
+			confirm(e){
+				this.show = false
+				
+				console.log(e.value)
+				
+				this.value = e.value
+			},
+			changePicker(e){
+				const { columnIndex, index, values } = e
+				const parentId = values[columnIndex][index].id
+				switch(columnIndex){
+					case 0:
+						this.getCity(parentId)
+						break;
+					case 1:
+						this.getCounty(parentId)
+						break;
+				}
+			},
+			async getAddresses(values){
+				let parentId 	= "",
+					columnsArr	= []
+					
+				for(let i in this.columns){
+					await addresses({parent_id:parentId}).then(res => {
+						if(values){
+							parentId = values[i]
+						}else{
+							parentId = res[0].id
+						}
+						columnsArr.push(res)
+						this.$refs.uPicker.setColumnValues(i, res)
+						if(i == 2 && values){
+							let defIndex = columnsArr.map((val,index) => {
+								return val.findIndex(v => v.id === values[index])
+							})
+							this.defaultIndex = defIndex
+						}
+					})
+				}
+			},
+			getCity(id) {
+				addresses({parent_id:id}).then(res => {
+					this.$refs.uPicker.setColumnValues(1, res)
+					this.getCounty(res[0].id)
+				})
+			},
+			getCounty(id){
+				addresses({parent_id:id}).then(res => {
+					this.$refs.uPicker.setColumnValues(2, res)
+				})
+			},
+			submit(){
+				let data = {
+					name		: this.name,
+					mobile		: this.phone,
+					province_id	: this.value[0].id,
+					city_id		: this.value[1].id,
+					district_id	: this.value[2].id,
+					address		: this.street,
+					is_default	: this.def ? 1 : 0
+				}
+				
+				let submitFun
+				
+				if(this.$Route.query.id){
+					submitFun = edit(this.$Route.query.id, data)
+				}else{
+					submitFun = add(data)
+				}
+				
+				submitFun.then(res => {
+					uni.showToast({
+						title: res,
+						icon : 'success',
+						mask : true
+					})
+					setTimeout(() => {
+						this.$Router.back()
+					},2000)
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon : 'none'
+					})
+				})
+			},
+			deleteThis(){
+				uni.showModal({
+					title		: '提示',
+					content		: '确定删除地址？',
+					cancelText	: '取消',
+					confirmText : '确认',
+					showCancel	: true,
+					confirmColor: '#34CE98',
+					success		: res => {
+						if(res.confirm){
+							del(this.$Route.query.id).then(res => {
+								uni.showToast({
+									title: res,
+									icon : 'success',
+									mask : true
+								})
+								setTimeout(() => {
+									this.$Router.back()
+								},2000)
+							})
+						}
+					}
+				})
+			}
 		}
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-
+	.content{
+		background: $window-color;
+		min-height: 100vh;
+		padding: $padding;
+		box-sizing: border-box;
+	}
+	// 提交按钮
+	.footer{
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 999;
+		padding: $padding;
+		background: white;
+		button{
+			border-radius: $radius/2;
+			height: 90rpx;
+			line-height: 90rpx;
+			font-size: $title-size;
+			background: $main-color;
+			padding: 0;
+			color: white;
+			&::after{
+				display: none;
+			}
+		}
+	}
+	// 表单
+	.form-block{
+		background-color: white;
+		border-radius: $radius;
+		margin-bottom: $margin;
+		.item{
+			position: relative;
+			padding: 0 $padding 0 200rpx;
+			border-bottom: solid 1rpx $border-color;
+			min-height: 90rpx;
+			&.remove{
+				color: $text-price;
+			}
+			&:last-child{
+				border-bottom: none;
+			}
+			label{
+				position: absolute;
+				left: 0;
+				top: 0;
+				padding-left: $padding;
+				line-height: 90rpx;
+				font-size: $title-size-lg;
+			}
+			.form-switch{
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+				height: 90rpx;
+			}
+			.form-input,
+			.picker-value{
+				min-height: 90rpx;
+				line-height: 90rpx;
+				font-size: $title-size-lg;
+				&-placeholder{
+					color: $text-gray-m;
+				}
+				@extend .nowrap;
+				text{
+					margin-right: 10rpx;
+					&:last-child{
+						margin-right: 0;
+					}
+				}
+			}
+		}
+	}
 </style>

pages/address/index.vue

@@ -1,86 +1,51 @@
 <template>
 	<view class="content">
 		<oct-address
-			:isTag="false"
 			:lists="addressList"
-			:isEdit="false"
 			:pattern="true"
+			:isEdit="edit"
 			editColor="#34CE98"
 			:btnStyle="{'backgroundColor': '#34CE98'}"
 			@onAddress="onInfo"
 			@onAdd="$Router.push({name: 'AddressEdit'})"
 		/>
+		<!--  -->
 	</view>
 </template>
 
 <script>
-export default {
+	import { list } from '@/apis/interfaces/address'
-	data() {
+	export default {
-		return {
+		data() {
-			addressList: [
+			return {
-				{
+				edit	   : true,
-					name: '唐明明',
+				addressList: []
-					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){
-			this.$store.commit('setAddress', val)
-			this.$Router.back()
 		},
-		add(){
+		onShow(){
-			console.log("新增地址")
+			this.edit = this.$Route.query.type === 'edit'
+			
+			list().then(res => {
+				this.addressList = res
+			})
+		},
+		methods: {
+			onInfo(val){
+				console.log(val)
+				if(this.edit){
+					this.$Router.push({
+						name	: 'AddressEdit',
+						params	: {
+							id	: val.address_id
+						}
+					})
+				}else{
+					this.$store.commit('setAddress', val)
+					this.$Router.back()
+				}
+			}
 		}
-	}
+	};
-};
 </script>
 
 <style lang="scss">

pages/store/buy.vue

@@ -5,8 +5,8 @@
 			<view class="block address" @click="$Router.push({name: 'Address'})">
 				<uni-icons class="address-icon location" type="location-filled" size="24" color="#34CE98"></uni-icons>
 				<uni-icons class="address-icon arrows" type="right" size="20" color="#999"></uni-icons>
-				<view class="user"><text>{{address.name}}</text>{{address.phone}}</view>
+				<view class="user"><text>{{address.name}}</text>{{address.mobile}}</view>
-				<view class="city">{{address.address}}{{address.city}}</view>
+				<view class="city">{{address.full_address}}</view>
 			</view>
 		</block>
 		<block v-else>
@@ -38,13 +38,19 @@
 			</view>
 			<view class="info-item">
 				<view class="label">配送费用</view>
-				<view class="nowrap">{{freight <= 0 ? '免费': freight}}</view>
+				<view class="nowrap">{{freight == 0 ? '免费': freight}}</view>
+			</view>
+		</view>
+		<view class="block info-box">
+			<view class="info-item">
+				<view class="label">订单备注</view>
+				<textarea class="info-textarea" v-model="remark" placeholder="订单备注"></textarea>
 			</view>
 		</view>
 		<!-- footer -->
 		<view class="order-footer">
 		    <view class="total">总计：<text>￥{{total}}</text></view>
-		    <button class="btn">确认订单</button>
+		    <button class="btn" @click="subOrder">确认订单</button>
 		</view>
 	</view>
 </template>
@@ -58,7 +64,8 @@
 				goodsInfo : [],
 				total	  : 0,
 				freight	  : 0,
-				address	  : ""
+				address	  : "",
+				remark	  : ""
 			};
 		},
 		computed:{
@@ -91,6 +98,21 @@
 			numberChange(e){
 				this.qty = e
 				this.getBuy()
+			},
+			// 确认订单
+			subOrder(){
+				verify({
+					goods_sku_id: this.$Route.query.skuId,
+					qty			: this.qty,
+					address_id	: this.address.address_id,
+					remark		: this.remark || ''
+				}).then(res => {
+					console.log(res)
+					this.$store.commit('setAddress', {})
+					this.$Router.replace({
+						name: 'Pay'
+					})
+				})
 			}
 		}
 	}
@@ -206,6 +228,12 @@
 				top: $margin;
 				color: $text-gray;
 			}
+			.info-textarea{
+				height: 120rpx;
+				width: 100%;
+				text-align: left;
+				font-size: $title-size-m;
+			}
 			&::after{
 				position: absolute;
 				left: $margin;

pages/store/index.vue

@@ -28,7 +28,7 @@
 		<view class="new-box">
 			<view class="title">上新精选</view>
 			<view class="news">
-				<view class="news-item" v-for="(item, index) in newGood" :key="index">
+				<view class="news-item" v-for="(item, index) in newGood" :key="index" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
 					<view class="news-cover">
 						<image :src="item.cover" mode="aspectFill"></image>
 					</view>

pages/store/list.vue

@@ -2,30 +2,39 @@
 	<view class="content">
 		<!-- 分类 -->
 		<u-sticky bgColor="#fff" zIndex="99">
-			<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs()"></u-tabs>
+			<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs"></u-tabs>
 		</u-sticky>
 		<!-- 分类商品 -->
-		<oct-goods
+		<block v-if="goodsArr.length >= 1">
-			:lists="goodsArr"
+			<oct-goods
-			color="#e6576b"
+				:lists="goodsArr"
-			@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
+				color="#e6576b"
-		/>
+				@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
+			/>
+		</block>
+		<block v-else>
+			<view class="vertical pages-empty">
+				<u-empty
+					icon="http://cdn.uviewui.com/uview/empty/data.png"
+					textColor="#999"
+					text="暂无数据"
+				>
+				</u-empty>
+			</view>
+		</block>
 	</view>
 </template>
 
 <script>
-	import { lists } from "@/apis/interfaces/store"
+	import { lists, classify } from "@/apis/interfaces/store"
 	export default {
 		data() {
 			return {
 				goodsArr: [],
 				classify: [
-					{ name: "全部" },
+					{ name: "全部", category_id: "" }
-					{ name: "21天盒子" },
+				],
-					{ name: "7天盒子" },
+				cid		: ""
-					{ name: "3天盒子" },
-					{ name: "复食餐" },
-				]
 			};
 		},
 		mounted(){
@@ -33,21 +42,29 @@
 				title: this.$Route.query.title
 			})
 			this.getLists()
+			this.getClassify()
 		},
 		methods:{
 			// 商品列表
-			getLists() {
+			getLists(cid) {
-				// {
+				lists({
-				// 	this.$Route.query.id
+					category_id	: this.$Route.query.id,
-				// }
+					category_cid: this.cid
-				lists({}).then(res => {
+				}).then(res => {
 					this.goodsArr = res.data
 					uni.stopPullDownRefresh()
 				})
 			},
+			// 获取二级分类
+			getClassify(){
+				classify(this.$Route.query.id).then(res => {
+					this.classify = this.classify.concat(res)
+				})
+			},
 			// 二级分类筛选
-			onTabs(){
+			onTabs(e){
 				this.goodsArr = []
+				this.cid	  = e.category_id
 				this.getLists()
 			}
 		},
@@ -62,4 +79,8 @@
 		background: $window-color;
 		min-height: 100vh;
 	}
+	
+	.pages-empty{
+		height: 70vh;
+	}
 </style>

pages/store/meals.vue

@@ -28,11 +28,11 @@
 		methods:{
 			getMeals(){
 				meals(this.$Route.query.id).then(res => {
-					console.log(res)
 					uni.setNavigationBarTitle({
 						title: res.meal.subtitle
 					})
-					this.banner   = res.banner
+					console.log(res)
+					this.banner   = res.banners
 					this.goodsArr = res.meal.goods
 					uni.stopPullDownRefresh()
 				})

pages/user/index.vue

@@ -89,7 +89,7 @@
 				健康档案
 				<uni-icons class="forward" type="forward" color="#999"></uni-icons>
 			</view>
-			<view class="btns-box-item" @click="$Router.push({name: 'Address'})">
+			<view class="btns-box-item" @click="$Router.push({name: 'Address', params: {type: 'edit'}})">
 				<image class="icon" src="@/static/user/icon_02.png" mode="widthFix"></image>
 				地址管理
 				<uni-icons class="forward" type="forward" color="#999"></uni-icons>

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

@@ -11,12 +11,12 @@
 					<view class="city">
 						<block v-if="isTag">
 							<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>
+							<!-- <text v-if="item.tag && item.tag != ''" class="city--tag city--type">{{item.tag}}</text> -->
 						</block>
-						{{item.city}}
+						{{item.province.name}}{{item.city.name}}{{item.district.name}}
 					</view>
 					<view class="address">{{item.address}}</view>
-					<view class="name">{{item.name}}<text>{{item.phone}}</text></view>
+					<view class="name">{{item.name}}<text>{{item.mobile}}</text></view>
 					<view class="edit" :style="{'color': editColor}" @click="$emit('onAddress', item)">{{isEdit ? '编辑' : '选择'}}</view>
 				</view>
 			</view>
@@ -153,7 +153,7 @@
 						margin-right: $margin/2;
 					}
 					.city--default{
-						background: #FF6160;
+						background: #e6576b;
 						color: white;
 						padding: 0 $margin/3;
 						border-radius: $radius;