Ver código fonte

首页及网点详细

lilei 4 anos atrás
pai
commit
963ff2e495

+ 36 - 2
pages.json

@@ -10,6 +10,13 @@
 				"enablePullDownRefresh": false
 			}
 		},
+		{
+			"path": "pages/goods/index", // 商城
+			"style": {
+				"navigationBarTitleText": "乐色商城",
+				"enablePullDownRefresh": false
+			}
+		},
 		{
 			"path": "pages/login/login",
 			"style": {
@@ -30,6 +37,18 @@
 				"navigationBarTitleText": "关于我们"
 			}
 		},
+		{
+			"path": "pages/userCenter/liucheng",
+			"style": {
+				"navigationBarTitleText": "投递流程"
+			}
+		},
+		{
+			"path": "pages/userCenter/zhinan",
+			"style": {
+				"navigationBarTitleText": "分类指南"
+			}
+		},
 		{
 			"path": "pages/order/order",
 			"style": {
@@ -95,6 +114,15 @@
                 "enablePullDownRefresh": false
             }
         }
+        ,{
+            "path" : "pages/store/store",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "网点详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
@@ -110,15 +138,21 @@
 	"tabBar": {
 		"color": "#7A7E83",
 		"selectedColor": "#01c9b2",
-		"borderStyle": "#eee",
 		"backgroundColor": "#ffffff",
 		"fontSize": "14px",
-		"list": [{
+		"list": [
+		{
 			"pagePath": "pages/index/index",
 			"iconPath": "static/tabbar/home.png",
 			"selectedIconPath": "static/tabbar/home-active.png",
 			"text": "首页"
 		}, 
+		{
+			"pagePath": "pages/goods/index",
+			"iconPath": "static/tabbar/shop.png",
+			"selectedIconPath": "static/tabbar/shop-active.png",
+			"text": "商城"
+		}, 
 		{
 			"pagePath": "pages/userCenter/index",
 			"iconPath": "static/tabbar/user.png",

+ 104 - 0
pages/goods/index.vue

@@ -0,0 +1,104 @@
+<template>
+	<view class="content">
+		<u-swiper height="250" :list="imageTopList"></u-swiper>
+		<view class="t1">
+			<u-image height="40" src="/static/t1.png"></u-image>
+		</view>
+		<!-- 商品 -->
+		<view class="goods">
+			<view v-if="goodsList.length">
+				<u-section title="人气零食" v-if="goodsList.length" line-color="#01c9b2" sub-title="更多" @click="toGoods(1)"></u-section>
+				<view class="goods-list">
+					<uni-coods :list="goodsList"></uni-coods>
+				</view>
+			</view>
+			<view v-if="goodsList.length">
+				<u-section title="居家生活" v-if="goodsList.length" line-color="#01c9b2" sub-title="更多" @click="toGoods(2)"></u-section>
+				<view class="goods-list">
+					<uni-coods :list="goodsList"></uni-coods>
+				</view>
+			</view>
+		</view>
+		<!-- 购物车 -->
+		<uni-cart-fix></uni-cart-fix>
+	</view>
+</template>
+
+<script>
+	import {
+		checkLogin
+	} from '@/api/login.js'
+	import {
+		getMapStoreList
+	} from '@/api/store.js'
+	import {
+		getLookUpDatas
+	} from '@/api/data.js'
+	import {
+		getUnFinishedOrder
+	} from '@/api/order.js'
+	export default {
+		components: {
+		},
+		data() {
+			return {
+				imageTopList:[
+					{image:'/static/banner.png'},
+					{image:'/static/banner1.png'}
+				],
+				goodsList:[
+					{
+						id: 21312312321,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: '/static/goods.png',
+						price: 300,
+						status: 0
+					},
+					{
+						id: 6465465465,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: '/static/goods.png',
+						price: 50,
+						status: 1
+					},
+				]
+			}
+		},
+		onReady() {
+		},
+		onShow() {
+		},
+		onLoad() {
+		},
+		methods: { 
+			// 更多商品
+			toGoods(clsId){
+				uni.navigateTo({
+					url:"/pages/goods/goods?id="+clsId
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		background: url(../../static/topBg.png) no-repeat top center;
+		background-size: 100%;
+		.goods{
+			>view{
+				padding: 25upx 20upx 10upx;
+				background: #FFFFFF;
+				border-radius: 15upx;
+				box-shadow: 0upx 6upx 10upx #eee;
+				margin-bottom: 20upx;
+				> .goods-list{
+					padding-top: 5upx;
+				}
+			}
+		}
+		.t1{
+			padding: 20upx 0;
+		}
+	}
+</style>

+ 120 - 31
pages/index/index.vue

@@ -1,26 +1,49 @@
 <template>
 	<view class="content">
-		<u-swiper height="250" :list="imageTopList"></u-swiper>
-		<view class="t1">
-			<u-image height="40" src="/static/t1.png"></u-image>
+		<u-swiper height="320" :list="imageTopList"></u-swiper>
+		<!-- 导航按钮 -->
+		<view class="nav">
+			<u-grid :col="4" :border="false" @click="toPage">
+				<u-grid-item :index="0">
+					<u-image width="72rpx" height="72rpx" src="/static/zhinan.png"></u-image>
+					<view class="grid-text">分类指南</view>
+				</u-grid-item>
+				<u-grid-item :index="1">
+					<u-image width="72rpx" height="72rpx" src="/static/liucheng.png"></u-image>
+					<view class="grid-text">投递流程</view>
+				</u-grid-item>
+				<u-grid-item :index="2">
+					<u-image width="72rpx" height="72rpx" src="/static/shouyi.png"></u-image>
+					<view class="grid-text">乐豆收益</view>
+				</u-grid-item>
+				<u-grid-item :index="3">
+					<u-image width="72rpx" height="72rpx" src="/static/hexiao.png"></u-image>
+					<view class="grid-text">扫码核销</view>
+				</u-grid-item>
+			</u-grid>
 		</view>
-		<!-- 商品 -->
-		<view class="goods">
-			<view v-if="goodsList.length">
-				<u-section title="人气零食" v-if="goodsList.length" line-color="#01c9b2" sub-title="更多" @click="toGoods(1)"></u-section>
-				<view class="goods-list">
-					<uni-coods :list="goodsList"></uni-coods>
-				</view>
-			</view>
-			<view v-if="goodsList.length">
-				<u-section title="居家生活" v-if="goodsList.length" line-color="#01c9b2" sub-title="更多" @click="toGoods(2)"></u-section>
-				<view class="goods-list">
-					<uni-coods :list="goodsList"></uni-coods>
-				</view>
-			</view>
+		<!-- 网点 -->
+		<view class="storeList">
+			 <u-section title="附近的网点" :right="false" line-color="#01c9b2"></u-section>
+			 <view class="stores-box">
+				 <view class="stores-item" v-for="item in 3" @click="viewStore(item)">
+					 <view class="s-name">
+						<view>
+							网点名称啊撒地方就拉萨附近士大夫
+						</view>
+					 </view>
+					 <view class="s-address">
+						<view><text>陕西西安高新二路十字103号</text></view>
+						<view><u-icon name="map-fill" color="#01c9b2" size="30"></u-icon> 1.3KM</view>
+					 </view>
+					 <view class="s-time">
+						 <view>
+							 营业时间:<text>9:00 - 11:00 , 12:00 - 17:00</text>
+						 </view>
+					 </view>
+				 </view>
+			 </view>
 		</view>
-		<!-- 购物车 -->
-		<uni-cart-fix></uni-cart-fix>
 	</view>
 </template>
 
@@ -76,6 +99,40 @@
 				uni.navigateTo({
 					url:"/pages/goods/goods?id="+clsId
 				})
+			},
+			// 快速导航
+			toPage(e){
+				let path=[
+					'/pages/userCenter/zhinan',
+					'/pages/userCenter/liucheng',
+					'/pages/userCenter/ledouRecord',
+					''
+				]
+				if(path[e]!=''){
+					uni.navigateTo({
+						url: path[e]
+					})
+				}else{
+					// 核销
+					this.smHx()
+				}
+			},
+			// 扫码核销
+			smHx(){
+				uni.scanCode({
+					success(e) {
+						console.log(e)
+					},
+					fail(err) {
+						console.log(err)
+					}
+				})
+			},
+			// 查看网点
+			viewStore(item){
+				uni.navigateTo({
+					url: "/pages/store/store"
+				})
 			}
 		}
 	}
@@ -85,20 +142,52 @@
 	.content {
 		background: url(../../static/topBg.png) no-repeat top center;
 		background-size: 100%;
-		.goods{
-			>view{
-				padding: 25upx 20upx 10upx;
-				background: #FFFFFF;
-				border-radius: 15upx;
-				box-shadow: 0upx 6upx 10upx #eee;
-				margin-bottom: 20upx;
-				> .goods-list{
-					padding-top: 5upx;
-				}
+		width: 100%;
+		.nav{
+			margin: 20upx 0;
+			border-radius: 15upx;
+			box-shadow: 0upx 3upx 6upx #eee;
+			overflow: hidden;
+			.grid-text{
+				padding-top: 10upx;
 			}
 		}
-		.t1{
-			padding: 20upx 0;
+		.storeList{
+			padding: 25upx 20upx 20upx;
+			background: #FFFFFF;
+			border-radius: 15upx;
+			box-shadow: 0upx 3upx 6upx #eee;
+			.stores-box{
+				padding-top: 5upx;
+				.stores-item{
+					border-bottom: 1px solid #F8F8F8;
+					padding: 20upx 10upx;
+					&:last-child{
+						border: 0;
+					}
+					> view{
+						padding: 10upx 0;
+						display: flex;
+						align-items: center;
+					}
+					.s-address,.s-time{
+						justify-content: space-between;
+						color: #666;
+						font-size: 24rpx;
+					}
+					.s-address{
+						> view{
+							&:last-child{
+								font-size: 24rpx;
+								width: 30%;
+								display: flex;
+								align-items: center;
+								justify-content: flex-end;
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 </style>

+ 161 - 0
pages/store/store.vue

@@ -0,0 +1,161 @@
+<template>
+	<view class="content">
+		<map 
+		id="map" 
+		:latitude="lat" 
+		:longitude="lng" 
+		scale="18" 
+		show-compass 
+		show-location 
+		:markers="markers"
+		style="width: 100%; height:30%;">
+		</map>
+		<!-- 网点信息及设备 -->
+		<view class="details">
+			<view class="details-address">
+				<view>华金基座A座</view>
+				<view>西安市未央路北二环真光路A座12号</view>
+				<view>营业时间:9:00 - 12:00</view>
+			</view>
+			<!-- 设备列表 -->
+			<view class="details-dev">
+				<view class="details-dev-box" v-for="item in 3">
+					<view class="details-dev-title">设备编号:<text>SDFLSJLSAFJLJSLFJLKF</text></view>
+					<view class="details-dev-cons">
+						<view class="dev-item">
+							<view>
+								<u-image height="80" width="80" src="/static/yw.png"></u-image>
+							</view>
+							<view>
+								<view>废旧衣物</view>
+								<text>100g/1乐豆</text>
+							</view>
+						</view>
+						<view class="dev-item">
+							<view>
+								<u-image height="80" width="80" src="/static/zhizhang.png"></u-image>
+							</view>
+							<view>
+								<view>废旧纸张 <u-tag text="已满" size="mini" mode="dark" type="info" /></view>
+								<text>100g/1乐豆</text>
+							</view>
+						</view>
+						<view class="dev-item">
+							<view>
+								<u-image height="80" width="80" src="/static/jinshou.png"></u-image>
+							</view>
+							<view>
+								<view>废旧金属</view>
+								<text>100g/1乐豆</text>
+							</view>
+						</view>
+						<view class="dev-item">
+							<view>
+								<u-image height="80" width="80" src="/static/dhai.png"></u-image>
+							</view>
+							<view>
+								<view>有害垃圾</view>
+								<text>100g/1乐豆</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				lat: '',
+				lng: '',
+				mapCtx: null, // 地图对象
+				markers: [], // 标注点
+			};
+		},
+		onLoad() {
+			this.lng = '101.760521'
+			this.lat = '36.636193'
+			this.markers = [
+				{
+					latitude: this.lat,
+					longitude: this.lng,
+					width: 30,
+					height: 30,
+					iconPath: "/static/store.png"
+				}
+			]
+		}
+	}
+</script>
+
+<style lang="scss">
+.content{
+	width: 100%;
+	padding: 0;
+	.details{
+		margin: 20upx;
+		.details-address{
+			padding: 20upx;
+			background: #FFFFFF;
+			border-radius: 15upx;
+			box-shadow: 0upx 3upx 6upx #eee;
+			margin-bottom: 20upx;
+			>view{
+				font-size: 24upx;
+				padding: 5upx 0;
+				color: #666;
+				&:first-child{
+					font-weight: bold;
+					font-size: 30upx;
+					color: #333;
+				}
+			}
+		}
+		.details-dev{
+			.details-dev-box{
+				padding: 20upx 20upx 5upx;
+				background: #FFFFFF;
+				border-radius: 15upx;
+				box-shadow: 0upx 3upx 6upx #eee;
+				margin-bottom: 20upx;
+				.details-dev-title{
+					border-bottom: 1px solid #F8F8F8;
+					padding: 10upx 0 20upx;
+					text{
+						color: #666;
+					}
+				}
+				.details-dev-cons{
+					padding: 10upx;
+					display: flex;
+					flex-wrap: wrap;
+					.dev-item{
+						width: 50%;
+						display: flex;
+						align-items: center;
+						> view{
+							padding: 15upx 10upx;
+							&:last-child{
+								text{
+									color: #666;
+									font-size: 24upx;
+								}
+								view{
+									display: flex;
+									align-items: center;
+									.u-tag{
+										margin-left: 10upx;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>

+ 25 - 7
pages/toOrder/editAddress.vue

@@ -1,14 +1,18 @@
 <template>
 	<view class="content">
-		<u-form :model="form" ref="uForm" :error-type="['toast']">
+		<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
 			<u-form-item label="姓名" required prop="name">
-				<u-input placeholder="请输入姓名" v-model="form.name" />
+				<u-input placeholder="请输入姓名" :maxlength="30" v-model="form.name" />
 			</u-form-item>
 			<u-form-item label="电话" required prop="mobile">
-				<u-input placeholder="请输入电话" type="number" v-model="form.mobile" />
+				<u-input placeholder="请输入电话" :maxlength="11" type="number" v-model="form.mobile" />
 			</u-form-item>
-			<u-form-item label="地址" required prop="address">
-				<u-input placeholder="请输入收货地址(省+市+区+详细地址)" v-model="form.address" />
+			<u-form-item label="省市区" required prop="area">
+				<u-input v-model="form.area" placeholder="请选择省市区" @click="show = true" type="select" />
+				<u-picker v-model="show" @confirm="chooseArea" mode="region"></u-picker>
+			</u-form-item>
+			<u-form-item label="详细地址" required prop="address">
+				<u-input placeholder="请输入收货详细地址" :maxlength="100" v-model="form.address" />
 			</u-form-item>
 		</u-form>
 		<view class="buttons">
@@ -21,9 +25,11 @@
 	export default {
 		data() {
 			return {
+				show: false,
 				form: {
 					name: '',
 					mobile: '',
+					area: '',
 					address: ''
 				},
 				rules: {
@@ -43,11 +49,18 @@
 							trigger: ['change','blur'],
 						}
 					],
+					area: [
+						{
+							required: true, 
+							message: '请选择省市区', 
+							trigger: ['change','blur']
+						}
+					],
 					address: [
 						{
 							required: true, 
-							min: 100, 
-							message: '地址不能少于100个字', 
+							max: 100, 
+							message: '请输入详细地址,最多100个字', 
 							trigger: ['change','blur']
 						}
 					]
@@ -63,6 +76,11 @@
 						console.log('验证失败');
 					}
 				});
+			},
+			// 选择地址
+			chooseArea(e){
+				console.log(e)
+				this.form.area = e.province.label + '-' + e.city.label + '-' + e.area.label
 			}
 		},
 		// 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕

+ 16 - 0
pages/toOrder/index.vue

@@ -68,7 +68,23 @@
 				}
 			};
 		},
+		onLoad() {
+			this.getLocation()
+		},
 		methods: {
+			// 获取用户位置
+			getLocation() {
+				uni.getLocation({
+					type: 'gcj02',
+					success: (res) => {
+						console.log(res, 'location success')
+					},
+					// 定位失败默认展示青海西宁位置地图
+					fail: (err) => {
+						 console.log(err,'location error')
+					}
+				});
+			},
 			//立即下单
 			toPay(){
 				

+ 11 - 0
pages/userCenter/liucheng.vue

@@ -0,0 +1,11 @@
+<template>
+	<view>
+		阿斯顿发顺丰
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

+ 65 - 0
pages/userCenter/zhinan.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="container">
+		<view class="logoContent">
+			<view class="logoBorder">
+				<!-- <image class="logoImg" src="/static/logo-us.png"></image> -->
+			</view>
+			<view>章鱼车管家信息管理平台</view>
+		</view>
+		<view class="textContent">
+			<view>陕西山海高科信息技术有限公司专注于汽车服务行业,成立于古城西安,是一家以先进云端互联网技术驱动的公司,致力于通过saas云门店管理系统为汽车综修厂、社区店以及大量的中小门店赋能。以解决汽车维修、美容、保养等业务中发生的一系列问题。</view>
+			<view>章鱼车管家设计了一套完善的降本增效方案,在引流获客、员工提成、营销活动、财务报表、数据分析等方面获得客户一致认可。</view>
+			<view>山海高科将通过持续的科技成果转化为推动汽后市场发展提供动力,帮助更多服务终端、供应链企业、主机厂商、银行以及保险等汽车后市场参与方转型升级。</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="less">
+	page{
+		background: #FFFFFF;
+	}
+	.container{
+		font-size: 32rpx;
+		padding:0 50rpx;
+		text-align: center;
+		color:#666;
+		.logoContent{
+			.logoBorder{
+				width:200rpx;
+				height:200rpx;
+				border:2px solid #eee;
+				border-radius: 20rpx;
+				margin:50rpx 0 15rpx 0;
+				display: inline-block;
+				position: relative;
+				.logoImg{
+					width:135rpx;
+					height:180rpx;
+					position: absolute;
+					top:0;
+					left:0;
+					right:0;
+					bottom:0;
+					margin:auto;
+				}
+			}
+		}
+		.textContent{
+			text-align: left;
+			margin-top: 30rpx;
+			font-size: 32rpx;
+			.tetxTitle{
+				margin-bottom: 10rpx;
+				font-size: 32rpx;
+			}
+			> view{
+				padding: 16upx 0;
+				line-height: 50upx;
+				text-indent: 60rpx;
+			}
+		}
+	}
+</style>

BIN
static/dhai.png


BIN
static/hexiao.png


BIN
static/jinshou.png


BIN
static/liucheng.png


BIN
static/shouyi.png


BIN
static/store.png


BIN
static/tabbar/home-active.png


BIN
static/tabbar/home.png


BIN
static/tabbar/shop-active.png


BIN
static/tabbar/shop.png


BIN
static/yw.png


BIN
static/zhinan.png


BIN
static/zhizhang.png