From 096d62252a3e08e740c2e8694f72c41bba7306d1 Mon Sep 17 00:00:00 2001
From: donqi <ydq0308@qq.com>
Date: Sun, 15 May 2022 01:46:26 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=88=E6=9C=AC=E7=A0=94=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/js/data.js                       |  79 ++++++++-
 common/js/request.js                    |   6 +-
 components/uni-combox/my-uni-combox.vue |   2 +-
 pages.json                              |   3 +-
 pages/index/index.vue                   |  11 +-
 pages/index/my-home.vue                 | 137 +++++++++++++++
 pages/my/goods-manage.vue               | 214 ++++++++++++++++++++++++
 pages/my/new-serv.vue                   |  69 ++++++++
 style/default.css                       |   4 +
 9 files changed, 516 insertions(+), 9 deletions(-)
 create mode 100644 pages/index/my-home.vue
 create mode 100644 pages/my/goods-manage.vue
 create mode 100644 pages/my/new-serv.vue

diff --git a/common/js/data.js b/common/js/data.js
index 9c3db58..ac1879e 100644
--- a/common/js/data.js
+++ b/common/js/data.js
@@ -50,7 +50,13 @@ const myInfo = {
 		id: 1,
 		title: '您的一笔订单金额已到帐',
 		ifHasNoReadNotice: true
-	}
+	},
+	rate: '4.5',
+	balance: '200',
+	door24h: true,
+	warranty72h: true,
+	certification: true,
+	deposit: false
 }
 
 const myTeamInfo = {
@@ -356,6 +362,72 @@ const servDetail = {
 	serialCode: '20211007859098945',
 	createTime: '2021-10-07 16:15:46'
 }
+
+const goodsList = [{
+	id: 1,
+	picUrl: '',
+	name: '高温清洗油烟机清洗服务',
+	comments: '侧吸式T形机油烟机清洗服务',
+	servArea: ['惠州市'],
+	salePrice: 165,
+	groupBuyDate: ["", ""],
+	isGoldenServ: true
+}, {
+	id: 1,
+	picUrl: '',
+	name: '高温清洗油烟机清洗服务',
+	comments: '侧吸式T形机油烟机清洗服务',
+	servArea: ['惠州市'],
+	salePrice: 165,
+	groupBuyDate: ["2021-03-20 20:10:10", "2021-05-10 10:10:10"],
+	isGoldenServ: false
+}, {
+	id: 1,
+	picUrl: '',
+	name: '高温清洗油烟机清洗服务',
+	comments: '侧吸式T形机油烟机清洗服务',
+	servArea: ['惠州市'],
+	salePrice: 165,
+	groupBuyDate: ["2021-03-20 20:10:10", "2021-05-10 10:10:10"],
+	isGoldenServ: false
+}, {
+	id: 1,
+	picUrl: '',
+	name: '高温清洗油烟机清洗服务',
+	comments: '侧吸式T形机油烟机清洗服务',
+	servArea: ['惠州市'],
+	salePrice: 165,
+	groupBuyDate: ["2021-03-20 20:10:10", "2021-05-10 10:10:10"],
+	isGoldenServ: false
+}]
+
+const areaObj = {
+	provinceList: [{
+		id: 1,
+		name: '广东省'
+	}],
+	cityList: [{
+		id: 1,
+		name: '深圳市'
+	}],
+	districtList: [{
+		id: 1,
+		name: '宝安区'
+	}],
+	streetList: [{
+		id: 1,
+		name: '松岗镇'
+	}],
+	communityList: [{
+		id: 1,
+		name: '意乐小区'
+	}]
+};
+
+const specsList = [{
+	id: 1,
+	name: '电脑式'
+}]
 
 export default {
 	moduleBarInfos,
@@ -370,5 +442,8 @@ export default {
 	order,
 	myOrders,
 	timeRangeList,
-	servDetail
+	servDetail,
+	goodsList,
+	areaObj,
+	specsList
 }
diff --git a/common/js/request.js b/common/js/request.js
index 3f59cea..a562f16 100644
--- a/common/js/request.js
+++ b/common/js/request.js
@@ -110,5 +110,9 @@ export default {
 		// 页面存储用户登录有效信息，以便其他页面调用
 		uni.setStorageSync('userProfile', userInfo);
 		return true;
-	}
+	},
+	getCurUserInfo() {
+		let userProfile = uni.getStorageSync('userProfile');
+		return userProfile;
+	},
 }
diff --git a/components/uni-combox/my-uni-combox.vue b/components/uni-combox/my-uni-combox.vue
index 434ee05..f73b965 100644
--- a/components/uni-combox/my-uni-combox.vue
+++ b/components/uni-combox/my-uni-combox.vue
@@ -207,7 +207,7 @@
 		border: 1px solid #EBEEF5;
 		border-radius: 6px;
 		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-		z-index: 2;
+		z-index: 3;
 		padding: 4px 0;
 	}
 
diff --git a/pages.json b/pages.json
index 854d42d..55ef2b3 100644
--- a/pages.json
+++ b/pages.json
@@ -1,6 +1,7 @@
 {
 	"pages": [{
-		"path": "pages/index/index"
+		// "path": "pages/index/index"
+		"path": "pages/my/new-serv"
 	}],
 	"subPackages": [{
 		"root": "pages/area-proxy/",
diff --git a/pages/index/index.vue b/pages/index/index.vue
index f79515f..577b9df 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,23 +1,26 @@
 <template>
 	<view>
-		<index v-if="curPageCode === 'indexPage'"></index>
+		<index v-if="curPageCode === 'indexPage'"></index>
+		<my-home v-else-if="curPageCode === 'myPage'"></my-home>
 		<module-bar :moduleBarInfos="moduleBarInfos"></module-bar>
 	</view>
 </template>
 
 <script>
 	import moduleBar from '@/components/custom-bar/module-bar.vue';
-	import index from '@/pages/index/index-home.vue';
+	import index from '@/pages/index/index-home.vue';
+	import myHome from '@/pages/index/my-home.vue';
 
 	export default {
 		components: {
 			moduleBar,
-			index
+			index,
+			myHome
 		},
 		data() {
 			return {
 				moduleBarInfos: [],
-				curPageCode: 'indexPage'
+				curPageCode: 'myPage'
 			}
 		},
 		onLoad() {
diff --git a/pages/index/my-home.vue b/pages/index/my-home.vue
new file mode 100644
index 0000000..d2ef435
--- /dev/null
+++ b/pages/index/my-home.vue
@@ -0,0 +1,137 @@
+<template>
+	<view>
+		<view class="bg-main-color padding text-center"
+			:style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
+			<view class="cu-avatar round"
+				:style="'width: 150rpx; height: 150rpx; background-image:url(' + curUserInfo.userInfo.avatarUrl + ');'">
+			</view>
+			<view class="text-xl margin-sm">{{curUserInfo.userInfo.nickName}}</view>
+			<view class="cu-list grid no-border col-2" style="background-color: inherit;">
+				<view class="cu-item">
+					<view class="margin-bottom-xs text-xxl">{{myInfo.balance}}</view>
+					<view>我的钱包</view>
+				</view>
+				<view class="cu-item solid-left">
+					<view class="margin-bottom-xs text-xxl">{{myInfo.rate}}</view>
+					<view>服务评分</view>
+				</view>
+			</view>
+		</view>
+		<view class="paper-drawer-bar margin-bottom-with-bar">
+			<view class="margin-lr-sm cu-list grid no-border col-4 shadow-warp">
+				<view class="cu-item">
+					<view class="cuIcon-remind margin-bottom-xs middle-icon"
+						:class="myInfo.door24h ? 'text-main-color' : 'text-gray'"></view>
+					<view :class="myInfo.door24h ? '' : 'text-gray'">24小时上门</view>
+				</view>
+				<view class="cu-item solid-left">
+					<view class="cuIcon-safe margin-bottom-xs middle-icon"
+						:class="myInfo.warranty72h ? 'text-main-color' : 'text-gray'"></view>
+					<view :class="myInfo.warranty72h ? '' : 'text-gray'">72小时质保</view>
+				</view>
+				<view class="cu-item solid-left">
+					<view class="cuIcon-profile margin-bottom-xs middle-icon"
+						:class="myInfo.certification ? 'text-main-color' : 'text-gray'"></view>
+					<view :class="myInfo.certification ? '' : 'text-gray'">实名认证</view>
+				</view>
+				<view class="cu-item solid-left">
+					<view class="cuIcon-moneybag margin-bottom-xs middle-icon"
+						:class="myInfo.deposit ? 'text-main-color' : 'text-gray'"></view>
+					<view :class="myInfo.deposit ? '' : 'text-gray'">保证金</view>
+				</view>
+			</view>
+			<view class="bg-white">
+				<view class="margin-top">
+					<view class="flex justify-between align-center solid-bottom padding padding-lr-lg text-lg" v-for="(item, index) in menuList" @click="clickMenuItem(item)">
+						<view class="flex justify-start align-center">
+							<view class="margin-right-sm text-main-color text-xl"><view :class="'cuIcon-' + item.icon"></view></view>
+							<view>{{item.name}}</view>
+						</view>
+						<view class="cuIcon-right"></view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'my-home',
+		data() {
+			return {
+				pageContentTop: this.CustomBar,
+				curUserInfo: {},
+				myInfo: {},
+				menuList: [{
+					name: '提现',
+					icon: 'moneybag'
+				}, {
+					name: '交易明细',
+					icon: 'form'
+				}, {
+					name: '服务明细',
+					icon: 'calendar'
+				}, {
+					name: '师傅入驻',
+					icon: 'profile'
+				}, {
+					name: '商品管理',
+					icon: 'goods',
+					pageUrl: '/pages/my/goods-manage'
+				}, {
+					name: '个人信息',
+					icon: 'lock'
+				}, {
+					name: '法律声明',
+					icon: 'read'
+				}, {
+					name: '店铺认证',
+					icon: 'taoxiaopu'
+				}, {
+					name: '签约协议',
+					icon: 'punch'
+				}, {
+					name: '反馈到平台',
+					icon: 'comment'
+				}, {
+					name: '开放平台',
+					icon: 'community'
+				}, {
+					name: '师傅缴费',
+					icon: 'sponsor'
+				}]
+			}
+		},
+		onReady() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.curUserInfo = this.$request.getCurUserInfo();
+				this.myInfo = await this.$api.data('myInfo');
+			},
+			clickMenuItem(menu) {
+				uni.navigateTo({
+					url: menu.pageUrl
+				})
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.cu-list.grid.no-border>.solid-left.cu-item:after {
+		border-left: 1upx solid rgba(255, 255, 255, 0.5);
+	}
+
+	.paper-drawer-bar {
+		position: relative;
+		top: -100rpx;
+	}
+
+	.paper-drawer-bar-back {
+		z-index: -1;
+		padding-top: 100rpx;
+	}
+</style>
diff --git a/pages/my/goods-manage.vue b/pages/my/goods-manage.vue
new file mode 100644
index 0000000..bb7c90b
--- /dev/null
+++ b/pages/my/goods-manage.vue
@@ -0,0 +1,214 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">商品管理</block>
+		</cu-custom>
+		<!-- 展示商品/服务tab -->
+		<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
+			<!-- tab header -->
+			<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true"
+				:scroll-left="scrollLeft">
+				<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in tabHeaders"
+					:key="index" @tap="tabSelect" :data-id="index">
+					{{item.name}}
+				</view>
+			</scroll-view>
+			<!-- 条件筛选栏 -->
+			<view class="padding bg-white solid-bottom">
+				<view class="flex justify-between align-center">
+					<input class="line-input radius-input" v-model="formData.keywords" placeholder="请输入关键字"></input>
+					<button class="cu-btn bg-main-color shadow-blur">搜索</button>
+				</view>
+			</view>
+		</view>
+		<!-- tab content -->
+		<view class="margin-bottom-with-bar">
+			<view class="padding bg-white margin-top-sm margin-lr-sm name-card" v-for="(good, index) in goodsList">
+				<view class="flex justify-start">
+					<view class="cu-avatar xxl-view" :style="'background-image:url(' + good.picUrl + ');'"></view>
+					<view class="margin-left-sm flex-column-between">
+						<view class="text-black text-cut" style="width: 330rpx;">{{good.name}}</view>
+						<view class="text-price text-red text-lg">{{good.salePrice}}</view>
+						<view class="text-gray">{{good.comments}}</view>
+						<view class="text-gray">服务城市：{{good.servArea}}</view>
+						<view class="text-gray">团购日期：</view>
+						<uni-datetime-picker :value="good.groupBuyDate" type="datetimerange" rangeSeparator="至" @change="changeGroupBuyDate($event, good)"/>
+					</view>
+				</view>
+				<view class="flex justify-end oper-bar">
+					<view class="text-center margin-right-sm" v-if="good.isGoldenServ">
+						<view class="cuIcon-selectionfill text-orange"></view>
+						<view class="text-xs">金牌服务</view>
+					</view>
+				</view>
+				<view>
+					<button class="cu-btn line-main-color margin-right-xs margin-top-sm" @click="editGood(good)">编辑</button>
+					<button class="cu-btn line-main-color margin-right-xs margin-top-sm" @click="offGood(good)">下架</button>
+					<button class="cu-btn line-main-color margin-right-xs margin-top-sm" @click="copyGood(good)">复制</button>
+					<button class="cu-btn line-main-color margin-right-xs margin-top-sm">优惠券</button>
+					<button class="cu-btn line-red shadow-blur margin-right-xs margin-top-sm" @click="delGood(good)">删除</button>
+				</view>
+			</view>
+		</view>
+		<!-- 底部操作栏 -->
+		<view class="cu-bar tabbar border shop fixed-bottom-bar bg-white">
+			<button class="cu-btn bg-main-color lg shadow-blur margin-left-xs">新增服务</button>
+			<button class="cu-btn bg-main-color lg shadow-blur">优惠券</button>
+			<button class="cu-btn bg-main-color lg shadow-blur">暂停售卖</button>
+			<button class="cu-btn bg-main-color lg shadow-blur margin-right-xs" data-modal="communityModal" @tap="showModal">社区</button>
+		</view>
+		<!-- 模态框 -->
+		<view class="cu-modal" :class="communityModal?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar bg-white justify-end solid-bottom">
+					<view class="content">社区入驻</view>
+					<view class="action" data-modal="communityModal" @tap="hideModal">
+						<text class="cuIcon-close text-red"></text>
+					</view>
+				</view>
+				<view class="padding bg-white text-left">
+					<view>你可选择一个物业/楼盘作为入驻的社区，则你所有服务或商品将展示在该社区。社区服务属于一公里范围便利服务内容，你必须选择你驻点所在地入驻，以便提供快捷便利的社区服务。</view>
+					<view class="margin-top">社区入驻：</view>
+					<view>
+						<my-uni-combox class="inline-combox margin-right-xs margin-bottom-xs" :candidates="provinceList" placeholder="省"
+							v-model="selectedCommunity.province" @input="changeCommunity($event, 0)"></my-uni-combox>
+						<my-uni-combox class="inline-combox margin-right-xs margin-bottom-xs" :candidates="cityList" placeholder="市"
+							v-model="selectedCommunity.city" @input="changeCommunity($event, 0)"></my-uni-combox>
+						<my-uni-combox class="inline-combox margin-right-xs margin-bottom-xs" :candidates="districtList" placeholder="区"
+							v-model="selectedCommunity.district" @input="changeCommunity($event, 0)"></my-uni-combox>
+						<my-uni-combox class="inline-combox margin-bottom-xs" :candidates="streetList" placeholder="街道"
+							v-model="selectedCommunity.street" @input="changeCommunity($event, 0)"></my-uni-combox>
+					</view>
+					<my-uni-combox :candidates="communityList" placeholder="社区/物业选择"
+						v-model="selectedCommunity.community" @input="changeCommunity($event, 0)"></my-uni-combox>
+					<view class="margin-top text-gray">注：未创建的社区可在商城端创建再行入驻</view>
+				</view>
+				<view class="cu-bar bg-white solid-top">
+					<view class="action margin-0 flex-sub text-black" data-modal="communityModal" @tap="hideModal">新增社区上架</view>
+					<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="communityModal" @tap="hideModal" @click="comfirmCommunity">确认入驻社区</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
+	
+	export default {
+		components: {
+			myUniCombox
+		},
+		data() {
+			return {
+				tabCur: 0,
+				tabHeaders: [{
+					code: 0,
+					name: '服务商品'
+				}, {
+					code: 1,
+					name: '配件商品'
+				}],
+				scrollLeft: 0,
+				stickyTop: this.CustomBar,
+				formData: {
+					keywords: ''
+				},
+				goodsList: [],
+				datetimerange: ["", ""],
+				communityModal: false,
+				provinceList: [],
+				cityList: [],
+				districtList: [],
+				streetList: [],
+				communityList: {},
+				selectedCommunity: {
+				}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.goodsList = await this.$api.data('goodsList');
+				this.areaObj = await this.$api.data('areaObj');
+				this.provinceList = this.areaObj.provinceList;
+				this.cityList = this.areaObj.cityList;
+				this.districtList = this.areaObj.districtList;
+				this.streetList = this.areaObj.streetList;
+				this.communityList = this.areaObj.communityList;
+			},
+			tabSelect(e) {
+				this.tabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			},
+			showModal(e) {
+				this[e.currentTarget.dataset.modal] = true;
+			},
+			hideModal(e) {
+				this[e.currentTarget.dataset.modal] = false;
+			},
+			changeGroupBuyDate(value, good) {
+				console.log(value)
+			},
+			editGood(good) {
+				
+			},
+			offGood(good) {
+				
+			},
+			copyGood(good) {
+				
+			},
+			delGood(good) {
+				
+			},
+			changeCommunity(selectObj, communityCode) {
+				// TODO: 不同的code加载不同的数据
+				console.log(selectObj)
+			},
+			comfirmCommunity() {
+				
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.nav .cu-item {
+		width: 50%;
+		margin: 0;
+	}
+
+	.line-input {
+		width: 77%;
+	}
+	
+	.xxl-view {
+		min-width: 200rpx;
+		min-height: 200rpx;
+	}
+	
+	.name-card {
+		position: relative;
+	}
+	
+	.name-card .oper-bar {
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+		font-size: 40rpx;
+	}
+	
+	/deep/ .uni-date__x-input {
+		height: 30px;
+	}
+	
+	.inline-combox {
+		display: inline-block;
+		width: calc((100vw - 158rpx)/4);
+	}
+</style>
diff --git a/pages/my/new-serv.vue b/pages/my/new-serv.vue
new file mode 100644
index 0000000..ae9c0ed
--- /dev/null
+++ b/pages/my/new-serv.vue
@@ -0,0 +1,69 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">服务上架</block>
+		</cu-custom>
+		<!-- 表单内容 -->
+		<form @submit="submit">
+			<view class="cu-form-group">
+				<view class="title">服务名称</view>
+				<input name="name" placeholder="请编辑上架标题(供客户搜索)"></input>
+			</view>
+			<view class="cu-form-group">
+				<view class="title">服务描述</view>
+				<input name="name" placeholder="让客户更清晰的上架内容描述"></input>
+			</view>
+			<view class="solid-top">
+				<view class="cu-form-group">
+					<view class="title">选择类目</view>
+					<picker :mode="'multiSelector'" @change="categoryChange" :value="categoryMultiIndex" :range-key="'name'" :range="categoryList">
+						<input class="line-input radius-input" :value="formData.category ? formData.category[0].name + '-' + formData.category[1].name + '-' + formData.category[2].name : ''"
+							placeholder="请选择类目"></input>
+					</picker>
+				</view>
+				<view class="padding-lr">
+					
+				</view>
+			</view>
+		</form>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				formData: {},
+				categoryList: [],
+				categoryMultiIndex: [0, 0, 0],
+				specsList: []
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.categoryList = await this.$api.data('categoryList');
+			},
+			async categoryChange(e) {
+				this.categoryMultiIndex = e.detail.value;
+				let chosenCategory = [];
+				for(let i = 0; i < this.categoryList.length; i++) {
+					chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
+				}
+				this.formData.category = chosenCategory;
+				
+				this.specsList = await this.$api.data('specsList');
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	.cu-form-group picker::after {
+		display: none;
+	}
+</style>
diff --git a/style/default.css b/style/default.css
index 5d15ea4..23c93a0 100644
--- a/style/default.css
+++ b/style/default.css
@@ -244,6 +244,10 @@
 .big-icon {
 	font-size: 111rpx !important;
 }
+
+.middle-icon {
+	font-size: 65rpx !important;
+}
 
 .line-input {
 	width: 100%;