adv

src/components/chooseImage/chooseImage.vue

+<template>
+	<view class="submitGamePicture">
+		<template v-for="(item,index) in tempFileList">
+			<view class="submitGamePicture-item" :key="item.path">
+				<image :src="item.path" class="submitGamePicture-icon"></image>
+				<uni-icons type="closeempty" class="submitGamePicture-delete" color="#ffffff" @click="deleteImgHandle(index)"></uni-icons>
+			</view>
+		</template>
+		<view v-if="tempFileList.length<limit" class="submitGamePicture-btn" @click="chooseImageHandle">
+			<uni-icons type="plusempty" size="30"></uni-icons>
+			<text style="padding-top: 2px;">添加图片</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "chooseImage",
+		props: {
+			limit: {
+				type: String,
+				default: '9'
+			},
+			FileList: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				tempFileList: [], //选择图片临时存储
+			};
+		},
+		mounted() {
+			this.tempFileList = this.FileList;
+		},
+		methods: {
+			//上传图片
+			chooseImageHandle() {
+				console.log("[上传图片]")
+				let that = this;
+				let limit = parseInt(this.limit);
+				uni.chooseImage({
+					count: limit, //默认9
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success: function(res) {
+						console.log(res)
+						let tempFiles = res.tempFiles;
+						tempFiles.forEach(function(item, index) {
+							let filePath = item.path;
+							let filename = filePath.substr(filePath.lastIndexOf('/') + 1);
+							that.tempFileList.push({
+								name: filename,
+								path: filePath
+							})
+						})
+
+					}
+				})
+			},
+			//删除图片
+			deleteImgHandle(currentIndex) {
+				const temp = this.tempFileList.splice(currentIndex, 1);
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.submitGamePicture {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-top: 2px;
+	}
+
+	.submitGamePicture-item {
+		width:70px;
+		height: 70px;
+		margin-right: 9.5px;
+		margin-top: 9.5px;
+		display: flex;
+		background-color: #FFFFFF;
+		position: relative;
+	}
+
+	.submitGamePicture-icon {
+		border: 1px solid #70737F;
+		border-radius: 8px;
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+
+	.submitGamePicture-delete {
+		position: absolute;
+		top: -5px;
+		right: -5px;
+		background-color: #ff0000;
+		border-radius: 10px;
+	}
+
+	.submitGamePicture-btn {
+		border: 1px dashed #70737F;
+		border-radius: 8px;
+		width: 70px;
+		height: 70px;
+		margin-right: 9.5px;
+		margin-top: 9.5px;
+		display: flex;
+		flex-direction: column;
+		font-size: 13px;
+		font-family: Source Han Sans CN;
+		font-weight: 400;
+		color: #999999;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

src/pages.json

@@ -15,7 +15,27 @@
 			"style": {
 			"style": {
 				"navigationBarTitleText": "用户中心",
 				"navigationBarTitleText": "用户中心",
 				"navigationStyle": "default",
 				"navigationStyle": "default",
-				"navigationBarBackgroundColor":"#F1F1F1"
+				"navigationBarBackgroundColor": "#F1F1F1"
+			}
+		}, 
+		{
+			"path": "pages/center/adv",
+			"aliasPath": "/center/adv",
+			"name": "center",
+			"style": {
+				"navigationBarTitleText": "宣传设置",
+				"navigationStyle": "default",
+				"navigationBarBackgroundColor": "#F1F1F1"
+			}
+		}, 
+		{
+			"path": "pages/auth/login",
+			"aliasPath": "/login",
+			"name": "login",
+			"desc": "登录页",
+			"style": {
+				"navigationBarTitleText": "登录/注册",
+				"navigationStyle": "default"
 			}
 			}
 		},
 		},
 		{
 		{
@@ -34,15 +54,6 @@
 			"style": {
 			"style": {
 				"navigationStyle": "default"
 				"navigationStyle": "default"
 			}
 			}
-		}, {
-			"path": "pages/auth/login",
-			"aliasPath": "/login",
-			"name": "login",
-			"desc": "登录页",
-			"style": {
-				"navigationBarTitleText": "登录/注册",
-				"navigationStyle": "default"
-			}
 		}
 		}
 	],
 	],
 	"globalStyle": {
 	"globalStyle": {

src/pages/center/adv.vue

+<template>
+		<view class="panel">
+			<view class="panel-item panel-item-bottom">
+				<text class="panel-text">彩店类型</text>
+			</view>
+
+			<view class="panel-item">
+				<view class="panel-text">海报显示名称水印</view>
+				<switch class="switch" :checked="true" color="#1A9BFC" />
+			</view>
+
+			<view class="panel-txt">
+				<input type="text" class="panel-txt-txt" placeholder="彩店名称" />
+			</view>
+
+			<view class="panel-item-bottom panel-top"></view>
+
+			<view class="panel-item">
+				<text class="panel-text">海报显示店主二维码</text>
+				<!-- <liSwitch :checked="true"  width="90" bg="#1A9BFC" /> -->
+				<switch class="switch" :checked="true" color="#1A9BFC" />
+			</view>
+
+			<view class="panel-img">
+				<imgUpload />
+			</view>
+			
+			<button type="default" class="btn" @click="subimit">提交</button>
+		</view>
+</template>
+
+<script>
+	import imgUpload from '@/components/chooseImage/chooseImage.vue'
+	
+	export default {
+		components:{
+			imgUpload
+		},		
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			subimit(){
+				
+			}
+		}
+	}
+</script>
+
+<style>
+	.panel {
+		font-size: 14px;
+	}
+
+	.panel-item {
+		padding: 12px 20px;
+		display: flex;
+		justify-content: space-between;
+		background-color: #FFFFFF;
+	}
+
+	.panel-top {
+		margin-top: 15px;
+	}
+
+	.panel-item-bottom {
+		border-bottom: solid 1px #F5F5F5;
+	}
+
+	.panel-text {
+		color: #000;
+		word-wrap: break-word;
+		line-height: 30px;
+		height: 30px;
+		text-align: center;
+	}
+
+	.panel-txt {
+		width: calc(100vw - 40px);
+		margin: 5px 20px;
+		background-color: #F5F5F5;
+	}
+
+	.panel-txt-txt {
+		margin: 0 20px;
+		color: #8c8c8c8c;
+		background-color: #F5F5F5;
+		height: 38px;
+	}
+	
+	.switch{
+		transform: scale(0.7,0.7);
+	}
+	
+	.panel-img{
+		height: 90px;
+		padding: 0px 20px;
+	}
+	
+	.btn {
+		height: 44px;
+		margin-top: 15px;
+		background-color: #D23338;
+		color: #FFFFFF;
+	}
+</style>

src/pages/center/index.vue

@@ -9,9 +9,9 @@
 			</view>
 			</view>
 		</view>
 		</view>
 		<view class="panel" v-for="(list,i1) in navList" :class="{'panel-top':i1>0}" :key="i1">
 		<view class="panel" v-for="(list,i1) in navList" :class="{'panel-top':i1>0}" :key="i1">
-			<view v-for="(item,i2) in list" class="panel-item" :class="{'panel-item-bottom':i2<list.length-1}"
-				:key="i2">
-				<text class="panel-text">{{item}}</text>
+			<view v-for="(item,i2) in list" class="panel-item" :class="{'panel-item-bottom':i2<list.length-1}" :key="i2"
+				:data-to="item.to" @click="menuNavTo">
+				<text class="panel-text">{{item.name}}</text>
 				<uni-icons type="forward" size="14" color="#d2d2d2"></uni-icons>
 				<uni-icons type="forward" size="14" color="#d2d2d2"></uni-icons>
 			</view>
 			</view>
 		</view>
 		</view>
@@ -24,8 +24,26 @@
 		data() {
 		data() {
 			return {
 			return {
 				navList: [
 				navList: [
-					['宣传设置', '添加子账号', '分享给好友'],
-					['联系客服', '提建议', '缓存清理']
+					[{
+						name: '宣传设置',
+						to: '/center/adv'
+					}, {
+						name: '添加子账号',
+						to: ''
+					}, {
+						name: '分享给好友',
+						to: ''
+					}],
+					[{
+						name: '联系客服',
+						to: ''
+					}, {
+						name: '提建议',
+						to: ''
+					}, {
+						name: '缓存清理',
+						to: ''
+					}]
 				],
 				],
 				data: {
 				data: {
 					addr: '未登记彩店'
 					addr: '未登记彩店'
@@ -42,7 +60,14 @@
 			this.data.addr = data.addr
 			this.data.addr = data.addr
 		},
 		},
 		methods: {
 		methods: {
-
+			menuNavTo(e) {
+				const url = e.target.dataset.to
+				console.log(url)
+				if (!url) return
+				uni.navigateTo({
+					url
+				})
+			}
 		}
 		}
 	}
 	}
 </script>
 </script>