我的主页编辑

xiaochengxu/App.vue

@@ -19,27 +19,9 @@
 	/*每个页面公共css */
 	@import "@/uni_modules/uview-ui/index.scss";
 	@import '@/uni_modules/uni-scss/index.scss';
-	// @import '/static/icons/iconfont.css';
 	@import '@/static/styles/index.scss';
-	/* #ifndef APP-NVUE */
-	@import '@/static/customicons.css';
 	// 设置整个项目的背景色
 	page {
 		background-color: #f5f5f5;
 	}
-
-	/* #endif */
-	.example-info {
-		font-size: 14px;
-		color: #333;
-		padding: 10px;
-	}
-	.footer{
-		display:fixed;
-		bottom:40px;
-		text-align:center;
-	}
-	.flex{
-		display:flex;
-	}
 </style>

xiaochengxu/pages.json

@@ -4,21 +4,6 @@
 	},
 	"pages": [
 		{
-			"path": "pages/circle/circle",
-			"style": {
-				"navigationBarTitleText": "圈子",
-				"enablePullDownRefresh": false
-			}
-		
-		}, 
-		{
-			"path": "pages/mySet/mySet",
-			"style": {
-				"navigationBarTitleText": "我的",
-				"enablePullDownRefresh": false
-			}
-		
-		}, {
 			"path": "pages/cardHolder/cardHolder",
 			"style": {
 				"navigationBarTitleText": "电子名片",
@@ -39,7 +24,32 @@
 
 			}
 
-		}, {
+		}, 
+		{
+			"path": "pages/mySet/myHome",
+			"style": {
+				"navigationBarTitleText": "主页信息",
+				"enablePullDownRefresh": false
+			}
+		
+		},{
+			"path": "pages/circle/circle",
+			"style": {
+				"navigationBarTitleText": "圈子",
+				"enablePullDownRefresh": false
+			}
+
+		},
+		{
+			"path": "pages/mySet/mySet",
+			"style": {
+				"navigationBarTitleText": "我的",
+				"enablePullDownRefresh": false
+			}
+
+		},
+
+		{
 			"path": "pages/cardHolder/map",
 			"style": {
 				"navigationBarTitleText": "地图",
@@ -92,21 +102,13 @@
 			"path": "pages/mySet/myCard",
 			"style": {
 				"navigationBarTitleText": "我的证件",
-				"enablePullDownRefresh": false,
-				"navigationStyle":"custom"
-			}
-
-		}, {
-			"path": "pages/mySet/myHome",
-			"style": {
-				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false
 			}
 
 		}, {
 			"path": "pages/mySet/cardType",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "名片分类",
 				"enablePullDownRefresh": false
 			}
 
@@ -148,43 +150,36 @@
 
 		}
 
-	    ,{
-            "path" : "pages/mySet/newCard",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "新增名片",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mySet/editHome",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "主页信息",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mySet/editCard",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "编辑名片",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mySet/lookCard",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "证件分享",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+		, {
+			"path": "pages/mySet/newCard",
+			"style": {
+				"navigationBarTitleText": "新增名片",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/mySet/editHome",
+			"style": {
+				"navigationBarTitleText": "主页信息",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/mySet/editCard",
+			"style": {
+				"navigationBarTitleText": "编辑名片",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/mySet/lookCard",
+			"style": {
+				"navigationBarTitleText": "证件分享",
+				"enablePullDownRefresh": false
+			}
+
+		}
+	],
 	"tabBar": {
 		"custom": false,
 		"color": "#656765",

xiaochengxu/pages/circle/circle.vue

@@ -37,7 +37,7 @@
 				</view>
 				<view class="row-tiem flex" v-if="!item.name" @click="toDetail(item.id)">
 					<view class="left">
-						<image src="../../static/imgs/scirlce.png" mode="widthFix" class="img"></image>
+						<image src="../../static/imgs/mySet/ewm.png" mode="widthFix" class="img"></image>
 					</view>
 					<view class="right">
 						<view class="top">{{item.circleName}}（{{item.cardNum}}）</view>

xiaochengxu/pages/circle/createCirclce.vue

@@ -1,31 +1,34 @@
 <template>
 	<view class="content">
-
-		<uni-forms :modelValue="formData">
-			<view class="content1">
-				<uni-forms-item label="圈子名称" name="name">
-					<uni-easyinput type="text" v-model="formData.circleName" placeholder="输入圈子名称" />
-				</uni-forms-item>
+		<view class="row1">
+			<view class="title">
+				圈子名称
 			</view>
-			<view class="content2">
-				<view class="title">
-					圈子标签
-				</view>
-				<view class="">
-					<uni-forms-item :label="'标签'+(index+1)" name="labelName" v-for="(item,index) in labelList"
-						:key="index">
-						<view class="flex">
-							<uni-easyinput type="text" v-model="item.labelName" placeholder="输入圈子标签,2-4个字" />
-							<uni-icons type="plus-filled" @click="add(item)" size="40"></uni-icons>
-							<uni-icons type="minus-filled" @click="subtract(index)" size="40"></uni-icons>
-						</view>
-					</uni-forms-item>
+			<u--input placeholder="请输入圈子名称" border="none" v-model="formData.circleName" @change="change"
+				:customStyle="custom"></u--input>
+		</view>
+		<view class="row1">
+			
+			<view class="flex flex-between" style="margin-top: 20rpx;">
+				<view class="title">圈子标签</view>
+				<uni-icons type="plus-filled" @click="add(item)" size="40" color="#112253"></uni-icons>
+			</view>
+			<view class="">
+				<view v-for="(item,index) in labelList":key="index">
+					<view class="flex">
+						<u-input placeholder="请输入圈子标签，2-4个字" border="none" v-model="item.labelName" @change="change"
+							:customStyle="custom">
+							<template slot="suffix">
+								<image src="../../static/imgs/mySet/del.png" mode="widthFix" style="width: 40rpx;" @click="subtract(index)"></image>
+							</template>
+							</u-input>
+						<!-- <uni-icons type="minus-filled" @click="subtract(index)" size="40"></uni-icons> -->
+					</view>
 				</view>
 			</view>
-		</uni-forms>
-
+		</view>
 		<view class="">
-			<button type="primary" @click="submit">提交</button>
+			<button type="default" @click="submit" class="submit">提交</button>
 		</view>
 		<u-toast ref="uToast"></u-toast>
 	</view>
@@ -36,6 +39,13 @@
 	export default {
 		data() {
 			return {
+				custom: {
+					"margin-top":"20rpx",
+					"background": "#fff",
+					"border-radius": "20rpx",
+					"padding":"20rpx"
+				},
+				value: '',
 				labelList: [{
 						labelName: ''
 					},
@@ -57,6 +67,9 @@
 			this.formData.commonId = this.userInfo.id
 		},
 		methods: {
+			change(e) {
+				console.log('change', e);
+			},
 			submit() {
 				this.formData.circleLabel = []
 				if (!this.formData.circleName) {
@@ -129,6 +142,21 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+	.content {
+		padding: 20rpx;
 
+		.title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #1A1A1A;
+		}
+	}
+	.submit{
+		position: fixed;
+		bottom: 100rpx;
+		background-color:#112253 ;
+		color: #fff;
+		width: calc(100% - 40rpx);
+	}
 </style>

xiaochengxu/pages/mySet/cardType.vue

@@ -1,86 +1,63 @@
 <template>
-	<view>
-		<mescroll-body  ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
-			<u-list @scrolltolower="scrolltolower">
-				<u-list-item  v-for='item in cardTypeList'>
-					<view class='flex'>
-						{{item.name}}
-					{{item.circleName}}
-						<u-icon v-if='item.circleName!="默认分类"' @click="del(item)" name="trash-fill" color="#2979ff" size="28"></u-icon>
-						<u-icon @click="stick(item)" name="pushpin" color="#2979ff" size="28"></u-icon>
+	<view class="content">
+		<view class="content1">
+			<view v-for='item in cardTypeList'>
+				<view class='flex row flex-between'>
+					<view class="left flex">
+						<view class="f-text flex flex-all-center">{{item.circleName[0]}}</view>
+						<view class="text">{{item.circleName}}</view>
 					</view>
-				</u-list-item>
-			</u-list>
-		</mescroll-body>
-		<u-modal showCancelButton='true'
-				@confirm='$u.debounce(confirm, 500)'
-				@cancel='show=false' :show="show" title="新增分类" >
+					<view class="right">
+						<image src="../../static/imgs/mySet/del.png" class="img" mode="widthFix"
+							v-if='item.circleName!="默认分类"' @click="del(item)"></image>
+						<image src="../../static/imgs/mySet/zd.png" class="img" mode="widthFix" @click="stick(item)">
+						</image>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-modal showCancelButton='true' @confirm='$u.debounce(confirm, 500)' @cancel='show=false' :show="show"
+			title="新增分类" confirmColor="#112253">
 			<view class="slot-content">
-				<u--input
-				v-model="cardTypeData.circleName"
-				placeholder="输入分类名称，2-8个字符"
-				border="none"
-				
-				></u--input>
+				<u--input v-model="cardTypeData.circleName" placeholder="输入分类名称，2-8个字符" border="none"></u--input>
 			</view>
 		</u-modal>
 
-		<view class="footer">
-			<view @click='add' class='button'>新增</view>
-		</view>
+		<view @click='add' class='button'>新增</view>
+		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
 
 <script>
+	var that;
 	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 	export default {
 		mixins: [MescrollMixin],
 		data() {
 			return {
-				show:false,
-				page:1,
-				limit:20,
-				cardTypeList:[],
-				cardTypeData:{},
-				userInfo:{},
-				canReset:false,
-				
+				show: false,
+				cardTypeList: [],
+				cardTypeData: {},
+				userInfo: {},
+				canReset: false,
+
 			};
 		},
 		onLoad() {
-			
-				// this.getList()
+			that = this
 		},
 		onShow() {
 			this.userInfo = uni.getStorageSync("userInfo")
-			this.cardTypeData.commonId=uni.getStorageSync("userInfo").id
-			this.$nextTick(function() {
-				this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
-				this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
-				this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
-			});
+			this.cardTypeData.commonId = uni.getStorageSync("userInfo").id
+			this.getList()
 		},
 		methods: {
-			mescrollInit(){
-				
-			},
-			downCallback(){
-				var that = this
-				this.$nextTick(() => {
-				// mescroll.endSuccess(data.result);
-				that.mescroll.resetUpScroll()
-				});
-				
-			},
-			upCallback(page){
-				var that = this
+			getList() {
 				uni.showLoading({
-						title: '数据加载中'
-					})
-				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list',{
-					page:page.num,
-					limit:page.size,
-					commonId:uni.getStorageSync("userInfo").id
+					title: '数据加载中'
+				})
+				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list', {
+					commonId: uni.getStorageSync("userInfo").id
 				}, failres => {
 					console.log('res+++++', failres.errmsg)
 					this.$refs.uToast.show({
@@ -89,162 +66,182 @@
 					})
 					uni.hideLoading()
 				}).then(res => {
-					console.log(res)
-					if(page.num == 1) this.cardTypeList = [];
-					let curPageLen = res.data.items.length;
-					let totalPage = res.data.total;
-					if(res.data.items.length>0){
-						for(var i=0;i<res.data.items.length;i++){
-						res.data.items[i].name=res.data.items[i].circleName[0]
-						}
-						var itemIndex=res.data.items.findIndex((item)=>{return item.topMarking==1})
-						// console.log(itemIndex)
-						if(itemIndex!=-1){
-							var data=res.data.items.splice(itemIndex,1)
-							if(page.num==1){
-								data.push({circleName:'默认分类',name:'默'})	
-							}
-							// console.log(data.concat(res.data.items))
-							res.data.items=data.concat(res.data.items)
-						}else{
-							if(page.num==1){
-								res.data.items=[{circleName:'默认分类',name:'默'}].concat(res.data.items)	
+					this.cardTypeList = res.data.items
+					uni.hideLoading()
+					for (let i = 0; i < this.cardTypeList.length; i++) {
+						if (this.cardTypeList[i].topMarking == 0) {
+							if (i == 0) {
+								this.cardTypeList.unshift({
+									circleName: '默认分类',
+									name: '默'
+								});
+							} else {
+								this.cardTypeList.splice(i, 0, {
+									circleName: '默认分类',
+									name: '默'
+								})
 							}
+							return
 						}
-						this.cardTypeList=this.cardTypeList.concat(res.data.items)
-					}else{
-						if(page.num==1){
-							this.cardTypeList=[{circleName:'默认分类',name:'默'}]
-						 }
 					}
-					
-					
-					this.$nextTick(() => {
-						console.log(that)
-					// mescroll.endSuccess(data.result);
-					that.mescroll.endBySize(curPageLen, totalPage)
-					});
-					
-					// if (res.errno == 200) {
-					uni.hideLoading()
-					
-					// }
 				})
 			},
-			del(item){
+			del(item) {
 				uni.showLoading({
 					title: '加载中',
-					mask:true
+					mask: true
 				})
-				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'delete',{
-					commonId:uni.getStorageSync("userInfo").id,
-					id:item.id
+				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'delete', {
+					commonId: uni.getStorageSync("userInfo").id,
+					id: item.id
 				}, failres => {
 					console.log('res+++++', failres.errmsg)
 					uni.showToast({
-					    title: failres.errmsg,
-					    icon: 'none',
-					    duration: 2000
+						title: failres.errmsg,
+						icon: 'none',
+						duration: 2000
 					})
 					uni.hideLoading()
 				}).then(res => {
-					uni.showToast({
-					    title: '删除成功',
-					    icon: 'none',
-					    duration: 2000
-					})
 					uni.hideLoading()
-					this.mescroll.resetUpScroll( )
+					this.$refs.uToast.show({
+						type: 'success',
+						message: '删除成功!',
+						complete() {
+							that.getList()
+						}
+					})
 				})
 			},
-			stick(item){
+			stick(item) {
 				uni.showLoading({
 					title: '加载中',
-					mask:true
+					mask: true
 				})
-				var type='',type1='',data={}
-				if(item.id){
-					type='admin.unimall.cardClassifyInfo'
-					type1='top'
-					data={
-						cardClassifyInfo:JSON.stringify({id:item.id})
+				var type = '',
+					type1 = '',
+					data = {}
+				if (item.id) {
+					type = 'admin.unimall.cardClassifyInfo'
+					type1 = 'top'
+					data = {
+						cardClassifyInfo: JSON.stringify({
+							id: item.id
+						})
 					}
-				}else{
-					type='admin.unimall.cardClassifyInfo'
-					type1='topDefault'
-					data={
-						cardClassifyInfo:JSON.stringify({commonId:this.cardTypeData.commonId})
+				} else {
+					type = 'admin.unimall.cardClassifyInfo'
+					type1 = 'topDefault'
+					data = {
+						cardClassifyInfo: JSON.stringify({
+							commonId: this.cardTypeData.commonId
+						})
 					}
 				}
-				this.$request.baseRequest(type, type1,data, failres => {
+				this.$request.baseRequest(type, type1, data, failres => {
 					console.log('res+++++', failres.errmsg)
 					uni.showToast({
-					    title: failres.errmsg,
-					    icon: 'none',
-					    duration: 2000
+						title: failres.errmsg,
+						icon: 'none',
+						duration: 2000
 					})
 					uni.hideLoading()
 				}).then(res => {
-					uni.showToast({
-					    title: '置顶成功',
-					    icon: 'none',
-					    duration: 2000
-					})
 					uni.hideLoading()
-					this.mescroll.resetUpScroll( )
+					this.$refs.uToast.show({
+						type: 'success',
+						message: '置顶成功!',
+						complete() {
+							that.getList()
+						}
+					})
 				})
 			},
-			
-			add(){
-				// if(){
-					
-				// }
-				this.show=true
+
+			add() {
+				this.show = true
 			},
-			confirm(){
-				if(!this.cardTypeData.circleName){
+			confirm() {
+				if (!this.cardTypeData.circleName) {
 					uni.showToast({
-					    title: '分类名称不能为空！',
-					    icon: 'none',
-					    duration: 2000
+						title: '分类名称不能为空！',
+						icon: 'none',
+						duration: 2000
 					})
 					return
 				}
-				if(this.cardTypeData.circleName<2||this.cardTypeData.circleName>8){
+				if (this.cardTypeData.circleName < 2 || this.cardTypeData.circleName > 8) {
 					uni.showToast({
-					    title: '类别名称2-8个字！',
-					    icon: 'none',
-					    duration: 2000
+						title: '类别名称2-8个字！',
+						icon: 'none',
+						duration: 2000
 					})
 					return
 				}
-				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'add',{
-						cardClassifyInfo:JSON.stringify(this.cardTypeData)
-					}, failres => {
+				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'add', {
+					cardClassifyInfo: JSON.stringify(this.cardTypeData)
+				}, failres => {
 					console.log('res+++++', failres.errmsg)
-					uni.showToast({
-					    title: failres.errmsg,
-					    icon: 'none',
-					    duration: 2000
+					this.$refs.uToast.show({
+						type: 'error',
+						message: failres.errmsg,
 					})
 					uni.hideLoading()
 				}).then(res => {
-					console.log(res)
-					// if (res.errno == 200) {
 					uni.hideLoading()
-					this.show=false
-					this.cardTypeData={
-						commonId:uni.getStorageSync("userInfo").id,
+					this.show = false
+					this.cardTypeData = {
+						commonId: uni.getStorageSync("userInfo").id,
 					}
-					this.mescroll.resetUpScroll( )
-					// }
+					this.$refs.uToast.show({
+						type: 'success',
+						message: '操作成功',
+						complete() {
+							that.getList()
+						}
+
+					})
 				})
-				
+
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	.content1 {
+		.row {
+			margin: 20rpx 20rpx 0 20rpx;
+			background-color: #fff;
+			padding: 20rpx;
+			border-radius: 20rpx;
+
+			.f-text {
+				width: 58rpx;
+				height: 58rpx;
+				background-color: #112253;
+				border-radius: 50%;
+				color: #fff;
+				margin-right: 20rpx;
+				font-size: 32rpx;
+			}
 
-</style>
+			.img {
+				width: 48rpx;
+				margin-left: 20rpx;
+			}
+		}
+	}
+
+	.button {
+		position: fixed;
+		bottom: 108rpx;
+		width: calc(100% - 40rpx);
+		padding: 24rpx 0;
+		color: #fff;
+		background-color: #112253;
+		text-align: center;
+		margin: 0 20rpx;
+		border-radius: 20rpx;
+	}
+</style>

xiaochengxu/pages/mySet/myCard.vue

@@ -1,23 +1,46 @@
 <template>
 	<view>
-		<view>
-			<u-navbar placeholder title="我的证件" @leftClick="leftClick">
-			</u-navbar>
-			<view class="flex">
-				<!-- <view :style="{'margin-top':navHeight  +'px'}" class="flex"> -->
-				<view @click='addclick' class="button">新增</view>
-				<view @click='share' class="button">分享</view>
-				<!-- <button ref='share' open-type="share" class="button">分享</button> -->
-				<view @click='imageOCR' class="button">识别号码</view>
+		<view class="flex content1 flex-between">
+			<view @click='addclick' class="button">
+				<image src="../../static/imgs/mySet/add.png" mode="widthFix" class="btn-img"></image>
+				新增
 			</view>
-
-
-			<mescroll-body v-if='!addstatus&&cardList.length==0||cardList.length>0' ref="mescrollRef"
-				@init="mescrollInit" @up="upCallback" @down="downCallback">
-				<view v-if='cardList.length>0' class="">
-					<view v-for='(item,index) in cardList' class="">
-						<view v-if='!item.editstatus'>
-							{{item.certificateName}}
+			<view @click='share' class="button">
+				<image src="../../static/imgs/mySet/share1.png" mode="widthFix" class="btn-img"></image>
+				分享
+			</view>
+			<view @click='imageOCR' class="button">
+				<image src="../../static/imgs/mySet/shibie.png" mode="widthFix" class="btn-img"></image>
+				识别号码
+			</view>
+		</view>
+		<view v-if='addstatus' class="content2" style="background-color: #fff;">
+			<view class="flex flex-between">
+				<u--input v-model="cardData.certificateName" placeholder="输入证件名称"></u--input>
+				<view @click='add' class="submit">提交</view>
+			</view>
+			<view>
+				<u-upload @afterRead="afterRead" :fileList="fileList1" @delete="deletePic" name="1" multiple
+					:maxCount="1">
+					<view class="bgc">
+						<view class="circle">
+							<view class="add">
+								+
+							</view>
+						</view>
+					</view>
+					</u-upload>
+			</view>
+		</view>
+		<view class="content3" style="background-color: #F7F7F7;">
+			<mescroll-body v-if='!addstatus&&cardList.length==0||cardList.length>0' ref="mescrollRef" @init="mescrollInit"
+				@up="upCallback" @down="downCallback">
+				<view v-for='(item,index) in cardList' class="">
+					<view class="flex flex-between row">
+						<view v-if='!item.editstatus' class="left">
+							<view class="name-text">
+								{{item.certificateName}}
+							</view>
 							<text v-if='item.personNo'>({{item.personNo1}})</text>
 							<u-icon v-if='item.personNo' @click='clip(0,item)' name="file-text-fill" color="#2979ff"
 								size="28"></u-icon>
@@ -25,34 +48,36 @@
 							<u-icon v-if='item.bankNo' @click='clip(1,item)' name="file-text-fill" color="#2979ff"
 								size="28"></u-icon>
 						</view>
-						<u--input v-else v-model="item.certificateName" placeholder="输入证件名称" border="none"></u--input>
-						<view @click='edit(item)'>{{!item.editstatus?'编辑':'完成'}}</view>
-						<u-checkbox-group v-model="item.checked" placement="column"
-							@change="checkboxChange($event,index,item)">
-							<u-checkbox :name='index+1' :customStyle="{marginBottom: '8px'}">
-							</u-checkbox>
-						</u-checkbox-group>
-
-						<image v-if='!item.editstatus' :src="item.certificateImage" mode=""></image>
-						<u-upload v-else @afterRead="afterRead" :fileList="fileList2" @delete="deletePic" name="2"
-							multiple :maxCount="1"></u-upload>
-						<u-icon @click="del(item)" name="trash-fill" color="#2979ff" size="28"></u-icon>
+						<u--input v-else v-model="item.certificateName" placeholder="输入证件名称"></u--input>
+						<view class="flex" v-if="item.editstatus">
+							<view @click='qxEdit(item)' :class="!item.editstatus?'edit':'finished'" style="margin:0 20rpx;">取消</view>
+							<view @click='edit(item)' :class="!item.editstatus?'edit':'finished'">完成</view>
+						</view>
+						<view @click='edit(item)' :class="!item.editstatus?'edit':'finished'" v-else>编辑</view>
+					</view>
+					<view class="row2" v-if='!item.editstatus'>
+						<image  :src="item.certificateImage" mode="aspectFill" class="img"></image>
+						<view class="right">
+							<u-checkbox-group v-model="item.checked" placement="column" @change="checkboxChange($event,index,item)">
+								<u-checkbox :name='index+1' :customStyle="{marginBottom: '8px'}">
+								</u-checkbox>
+							</u-checkbox-group>
+							<!-- <image src="../../static/imgs/mySet/del1.png" mode="widthFix" @click="del(item)" style="width: 28rpx;"></image> -->
+							<u-icon @click="del(item)" name="trash-fill" color="#fff" size="24"></u-icon>
+						</view>
 					</view>
-					<view></view>
+					<u-upload v-else @afterRead="afterRead" :fileList="fileList2" @delete="deletePic" name="2" multiple
+						:maxCount="1">
+						<view class="">
+							123
+						</view>
+						<!-- <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" 
+							mode="widthFix" style="width: 250px;height: 150px;"></image> -->
+						</u-upload>
 				</view>
 			</mescroll-body>
-			<view v-if='addstatus' class="">
-				<view class="">
-					<u--input v-model="cardData.certificateName" placeholder="输入证件名称" border="none"></u--input>
-				</view>
-				<view @click='add'>提交</view>
-				<view>
-					<u-upload @afterRead="afterRead" :fileList="fileList1" @delete="deletePic" name="1" multiple
-						:maxCount="1"></u-upload>
-				</view>
-			</view>
 		</view>
-
+	
 		<u-picker @cancel='show=false' @confirm='pickerConfirm' title='识别类型' :show="show" :columns="columns"></u-picker>
 		<u-popup :show="popupshow" mode="bottom">
 			<view>
@@ -143,6 +168,9 @@
 			});
 		},
 		methods: {
+			qxEdit(){
+				this.mescroll.resetUpScroll()
+			},
 			clip(status, item) {
 				uni.setClipboardData({
 					data: status == 1 ? item.bankNo : item.personNo, // e是你要保存的内容
@@ -495,7 +523,7 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped> 
 	button::after {
 		border: initial;
 	}
@@ -604,4 +632,108 @@
 			border-top: 1rpx solid #E4E7ED;
 		}
 	}
+
+	.content1 {
+		
+		background-color: #112253;
+		padding: 20rpx;
+		box-sizing: border-box;
+		border-radius: 0px 0px 20rpx 20rpx;
+
+		.button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: #fff;
+			color: #333333;
+			border-radius: 20rpx;
+			padding: 24rpx;
+			width: calc(33% - 60rpx);
+		}
+
+		.btn-img {
+			width: 28rpx;
+			margin-right: 18rpx;
+		}
+	}
+	.content2{
+		padding:20rpx ;
+		.bgc{
+			background: #fff;
+			width: calc(100vw - 40rpx);
+			height: 190rpx;
+			.circle{
+				width: 74px;
+				height: 74px;
+				border-radius: 50%;
+				background-color: #F7F7F7;
+				
+			}
+		}
+		.submit{
+			padding: 10rpx 14rpx;
+			text-align: center;
+			background: #112253;
+			border-radius: 10rpx;
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+			margin-left: 20rpx;
+		}
+	}
+	.content3{
+		.row{
+			padding: 20rpx;
+			box-sizing: border-box;
+			.name-text{
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #1A1A1A;
+			}
+		}
+		.edit{
+			padding: 10rpx 14rpx;
+			text-align: center;
+			background: #112253;
+			border-radius: 10rpx;
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+		}
+		.finished{
+			padding: 10rpx 14rpx;
+			text-align: center;
+			background: #112253;
+			border-radius: 10rpx;
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+		}
+		.row2{
+			display: flex;
+			    justify-content: center;
+			    position: relative;
+				.img{
+					    border-radius: 20rpx;
+						height: 380rpx;
+				}
+				.right{
+					    position: absolute;
+					    right: 0;
+					    height: 100%;
+					    right: 10px;
+					    background: #11225359;
+					    border-radius: 10px;
+					    display: flex;
+					    flex-direction: column;
+					    justify-content: space-between;
+					    align-items: center;
+					    padding: 10px 5px;
+					    box-sizing: border-box;
+				}
+				/deep/.u-checkbox__icon-wrap{
+					margin-right: 0!important;
+				}
+		}
+	}
 </style>

xiaochengxu/pages/mySet/myHome.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view class="content">
 		<view v-if='!editstatus&&fileList.length>0' class="swiper-wrap">
 			<u-swiper :list="fileList" indicator indicatorMode="dot"
 			autoplay
@@ -13,59 +13,63 @@
 			    title
 				loading
 		></u-skeleton> -->
-		<view class="company-title">
-			<view v-if='editstatus'>公司/机构名称</view>
-		 	<u--input v-if='editstatus' v-model="companyData.companyName"  placeholder="请输入公司名称" border="none" ></u--input>
-			<view v-else>{{companyData.companyName}}</view>
-		</view>
-		<view class="intro">
-			<view v-if='editstatus'>公司/机构简介</view>
-			<u--input type='textarea' v-if='editstatus' v-model="companyData.companyIntroduction" placeholder="请输入公司简介" border="none" ></u--input>
-			<view v-else>{{companyData.companyIntroduction}}</view>
-		</view>
-		<view class="scope">
-			<view>业务范围</view>
-			<u--input type='textarea' v-if='editstatus' v-model="companyData.scopeOfBusiness" placeholder="输入业务范围，不超过500个字" border="none" ></u--input>
-			<view v-else>{{companyData.scopeOfBusiness}}</view>
-		</view>
-		<u-list>
-			<u-list-item>
-				<view v-if='editstatus'>公司地址</view>
-				<u--input v-if='editstatus' v-model="companyData.companyAddress" placeholder="输入地址" border="none" ></u--input>
-				<view v-else>{{companyData.companyAddress}}</view>
-			</u-list-item>
-			<u-list-item>
-				<view v-if='editstatus'>联系电话</view>
-				<u--input v-if='editstatus' v-model="companyData.phone" placeholder="输入联系电话" border="none" ></u--input>
-				<view v-else>{{companyData.phone}}</view>
-			</u-list-item>
-			<u-list-item>
-				<view v-if='editstatus'>传真</view>
-				<u--input v-if='editstatus' v-model="companyData.portraiture" placeholder="输入传真号" border="none" ></u--input>
-				<view v-else>{{companyData.portraiture}}</view>
-			</u-list-item>
-			<u-list-item>
-				<view v-if='editstatus'>邮箱</view>
-				<u--input v-if='editstatus' v-model="companyData.postbox" placeholder="输入邮箱" border="none" ></u--input>
-				<view v-else>{{companyData.postbox}}</view>
-			</u-list-item>
-		</u-list>
-		<view v-if='editstatus'>
-			<view>企业风采</view>
-			<!-- <image v-for='item in fileList' :src="item.url" mode=""></image> -->
-			<u-upload
-					@afterRead="afterRead"
-					:fileList="fileList1"
-					@delete="deletePic"
-					name="1"
-					multiple
-					:maxCount="10"
-				></u-upload>
+		<view class="top" v-else>
+			
 		</view>
-		<view class="footer">
-			<view v-if='!editstatus' @click='edit' class='button'>编辑</view>
-			<view v-else @click='$u.debounce(buttonsubmit, 500)' class='button'>提交</view>
+		<view class="content1" :class="editstatus?'content1-edit':''">
+			<view class="company-title row flex flex-between line" >
+				<view v-if='editstatus'>公司/机构名称</view>
+			 	<u--input v-if='editstatus' v-model="companyData.companyName"  placeholder="请输入公司名称" border="none" inputAlign='right'></u--input>
+				<view v-else>{{companyData.companyName}}</view>
+			</view>
+			<view class="intro top-m">
+				<view v-if='editstatus'class="row">公司/机构简介</view>
+				<u--textarea v-if='editstatus' v-model="companyData.companyIntroduction" count placeholder="请输入公司/机构简介，不超过1000个字"></u--textarea>
+				<view v-else>{{companyData.companyIntroduction}}</view>
+			</view>
+			<view class="scope top-m">
+				<view class="row">业务范围</view>
+				<u--textarea v-if='editstatus' v-model="companyData.scopeOfBusiness" count placeholder="输入业务范围，不超过500个字"></u--textarea>
+				<view v-else>{{companyData.scopeOfBusiness}}</view>
+			</view>
+				<view class="row flex flex-between line top-m">
+					<view v-if='editstatus'>公司地址</view>
+					<u--input v-if='editstatus' v-model="companyData.companyAddress" placeholder="输入地址" border="none" inputAlign='right'></u--input>
+					<view v-else>{{companyData.companyAddress}}</view>
+				</view>
+				<view class="row flex flex-between line top-m">
+					<view v-if='editstatus'>联系电话</view>
+					<u--input v-if='editstatus' v-model="companyData.phone" placeholder="输入联系电话" border="none" inputAlign='right'></u--input>
+					<view v-else>{{companyData.phone}}</view>
+				</view>
+				<view class="row flex flex-between line top-m">
+					<view v-if='editstatus'>传真</view>
+					<u--input v-if='editstatus' v-model="companyData.portraiture" placeholder="输入传真号" border="none" inputAlign='right'></u--input>
+					<view v-else>{{companyData.portraiture}}</view>
+				</view>
+				<view class="row flex flex-between line top-m">
+					<view v-if='editstatus'>邮箱</view>
+					<u--input v-if='editstatus' v-model="companyData.postbox" placeholder="输入邮箱" border="none" inputAlign='right'></u--input>
+					<view v-else>{{companyData.postbox}}</view>
+				</view>
+			<view v-if='editstatus'>
+				<view class="qyfc">企业风采</view>
+				<!-- <image v-for='item in fileList' :src="item.url" mode=""></image> -->
+				<u-upload
+						@afterRead="afterRead"
+						:fileList="fileList1"
+						@delete="deletePic"
+						name="1"
+						multiple
+						:maxCount="10"
+					></u-upload>
+			</view>
 		</view>
+	<view class="footer">
+		<button v-if='!editstatus' @click='edit' class='button' >编辑</button>
+		<button v-else @click='$u.debounce(buttonsubmit, 500)' class='button' type="default">提交</button>
+	</view>
+		
 		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
@@ -262,6 +266,51 @@
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	/deep/.u-border {
+		border-color: #E6E6E6!important;
+	}
+	.content{
+		
+	}
+	.top{
+		width: 100vw;
+		height: 135rpx;
+		background: #112253;
+		border-radius: 0px 0px 20rpx 20rpx;
+	}
+	.content1{
+		margin: 20rpx 0 120rpx 0;
+		background-color: #fff;
+		border-radius: 20rpx;
+		padding: 20rpx;
+		box-sizing: border-box;
+		.row{
+			padding-bottom: 24rpx;
+		}
+		.line{
+			border-bottom: 1px solid #E6E6E6;
+		}
+		.top-m{
+			margin-top: 24rpx;
+		}
+		.qyfc{
+			margin: 24rpx 0;
+		}
+	}
+	.content1-edit{
+		position: relative;
+		top: -135rpx;
+	}
+	.footer{
+		position: fixed;
+		bottom: 80rpx;
+		width: calc(100% - 40rpx);
+		padding: 0 20rpx;
+	}
+	.button{
+		color: #fff;
+		background-color: #112253;
+		border-radius: 20rpx;
+	}
 </style>