ui

xiaochengxu/pages/mySet/newCard.vue

@@ -1,8 +1,8 @@
 <template>
 	<view class="content">
-		<view class="content1">
+		<view class="content1 bgc0" v-show="selectIndex==0">
 			<view class="left">
-				<image src="../../static/c3.png" mode="widthFix" class="img"></image>
+				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
 			</view>
 			<view class="right">
 				<view class="row1">
@@ -22,53 +22,175 @@
 				</view>
 			</view>
 		</view>
-		<view class="change-template">
-			切换模板
+		<view class="content1 bgc1" v-show="selectIndex==1">
+			<view class="left">
+				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
+			</view>
+			<view class="right">
+				<view class="row1">
+					{{cardInfo.name}}|{{cardInfo.post}}
+				</view>
+				<view class="">
+					{{cardInfo.companyName}}
+				</view>
+				<view class="">
+					地址
+				</view>
+				<view class="">
+					联系电话
+				</view>
+				<view class="">
+					备注
+				</view>
+			</view>
 		</view>
-		<view class="content2">
-			<view class="">
-				名片信息
-			</view>
-			<u--form labelPosition="left" :model="cardInfo" ref="uForm">
-				<u-form-item label="名片标识" prop="cardInfo.cardBusiness" borderBottom>
-					<u--input v-model="cardInfo.cardBusiness" border="none" placeholder="输入名片标识"></u--input>
-				</u-form-item>
-				<u-form-item label="姓名" prop="cardInfo.name" borderBottom>
-					<u--input v-model="cardInfo.name" border="none" placeholder="输入姓名"></u--input>
-				</u-form-item>
-				<u-form-item label="职务" prop="cardInfo.post" borderBottom>
-					<u--input v-model="cardInfo.post" border="none" placeholder="输入职务,不超过8个字符"></u--input>
-				</u-form-item>
-				<u-form-item label="公司/机构名称" prop="cardInfo.companyName" borderBottom>
-					<u--input v-model="cardInfo.companyName" border="none" placholder="输入公司/机构名称"></u--input>
-				</u-form-item>
-				</u-form-item>
-				<!-- 		<u-form-item label="地址" prop="userInfo.name" borderBottom>
-					<view @click="showPicker">选择地址</view>
-					<view>{{ province }}{{ city }}{{ area }}</view>
-				</u-form-item> -->
-				<u-form-item label="定位" prop="cardInfo.name" borderBottom @click="placeSelect();hideKeyboard()">
-					<text>选择地址> </text>
-				</u-form-item>
-				<u-form-item label="详细地址" prop="cardInfo.name" borderBottom>
-					<u--input v-model="cardInfo.detailedAddress" border="none" placeholder="输入地址,不超过15个字"></u--input>
-				</u-form-item>
-				<u-form-item label="联系电话" prop="cardInfo.name" borderBottom>
-					<u--input v-model="cardInfo.phone" border="none" placeholder="输入联系电话"></u--input>
-				</u-form-item>
-			</u--form>
+		<view class="content1 bgc2" v-show="selectIndex==2">
+			<view class="left">
+				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
+			</view>
+			<view class="right">
+				<view class="row1">
+					{{cardInfo.name}}|{{cardInfo.post}}
+				</view>
+				<view class="">
+					{{cardInfo.companyName}}
+				</view>
+				<view class="">
+					地址
+				</view>
+				<view class="">
+					联系电话
+				</view>
+				<view class="">
+					备注
+				</view>
+			</view>
+		</view>
+		<view class="content1 bgc3" v-show="selectIndex==3">
+			<view class="left">
+				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
+			</view>
+			<view class="right">
+				<view class="row1">
+					{{cardInfo.name}}|{{cardInfo.post}}
+				</view>
+				<view class="">
+					{{cardInfo.companyName}}
+				</view>
+				<view class="">
+					地址
+				</view>
+				<view class="">
+					联系电话
+				</view>
+				<view class="">
+					备注
+				</view>
+			</view>
 		</view>
-		<view class="content3">
+		<view class="content1 bgc4" v-show="selectIndex==4">
 			<view class="left">
-				上传企业logo或个人头像
+				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
 			</view>
 			<view class="right">
-				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
-					:maxCount="1"></u-upload>
+				<view class="row1">
+					{{cardInfo.name}}|{{cardInfo.post}}
+				</view>
+				<view class="">
+					{{cardInfo.companyName}}
+				</view>
+				<view class="">
+					地址
+				</view>
+				<view class="">
+					联系电话
+				</view>
+				<view class="">
+					备注
+				</view>
 			</view>
+		</view>
+		<view class="change-template">
+			切换模板
+		</view>
+		<view class="img-list">
+			<view class="img-item" v-for="(item,index) in imgList" @click="changeTemplate(index)">
+				<image :src="item.dictValue" class="img-item" :key="index"></image>
+				<image src="../../static/imgs/card/dh.png" class="dh" v-if="selectIndex==index"></image>
+			</view>
+		</view>
+		<view class="change-template">
+			名片信息
+		</view>
+
+		<view class="content2">
+			<view class="flex flex-between row">
+				<view class="left">
+					名片标识
+				</view>
+				<u--input v-model="cardInfo.cardBusiness" border="none" placeholder="输入名片标识" inputAlign='right'></u--input>
+			</view>
+			<view class="flex flex-between row">
+				<view class="left">
+					姓名
+				</view>
+				<u--input v-model="cardInfo.name" border="none" placeholder="输入姓名" inputAlign='right'></u--input>
+			</view>
+			<view class="flex flex-between row">
+				<view class="left">
+					职务
+				</view>
+				<u--input v-model="cardInfo.post" border="none" placeholder="输入职务,不超过8个字符" inputAlign='right'></u--input>
+			</view>
+			<view class="flex flex-between row">
+				<view class="left">
+					公司/机构名称
+				</view>
+				<u--input v-model="cardInfo.companyName" border="none" placeholder="输入公司/机构名称" inputAlign='right'></u--input>
+			</view>
+			<view class="flex flex-between row" @click="placeSelect();hideKeyboard()">
+				<view class="left">
+					地址
+				</view>
+				<view v-if="cardInfo.province">{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
+				<view class="" v-else>
+					<text>选择地址 </text>
+					<image src="../../static/imgs/card/yjt.png" mode="" style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image>
+				</view>
+				
+			</view>
+			<view class="flex flex-between row">
+				<view class="left">
+					详细地址
+				</view>
+				<u--input v-model="cardInfo.detailedAddress" border="none" placeholder="输入详细地址,不超过15个字" inputAlign='right'></u--input>
+			</view>
+			<view class="flex flex-between row">
+				<view class="left">
+					联系电话
+				</view>
+				<u--input v-model="cardInfo.phone" border="none" placeholder="输入联系电话" inputAlign='right'></u--input>
+			</view>
+			<!-- 		<u-form-item label="地址" prop="userInfo.name" borderBottom>
+						<view @click="showPicker">选择地址</view>
+						<view>{{ province }}{{ city }}{{ area }}</view>
+					</u-form-item> -->
+			<view class="flex flex-between row">
+				<view class="left">
+					上传企业logo或个人头像
+				</view>
+				<view class="right">
+					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
+						:maxCount="1"></u-upload>
+				</view>
+			</view>
+
+
+
+
 		</view>
 		<view class="bottom">
-			<button @click="submit">提交</button>
+			<button @click='$u.debounce(submit, 500)' class='button' type="default">提交</button>
 		</view>
 		<city-picker ref="picker" mode="multiSelector" :list="areaData" :level="3" @confirm="finishSelectAddress">
 		</city-picker>
@@ -86,9 +208,35 @@
 			that = this
 			this.userInfo = uni.getStorageSync("userInfo")
 			this.cardInfo.commonId = this.userInfo.id
+			// this.getList()
 		},
 		data() {
 			return {
+				selectIndex: 0,
+				imgList: [{
+						dictLabel: '/./../static/1.jpg',
+						dictValue: '/./../static/1.jpg'
+
+					},
+					{
+						dictLabel: '/./../static/2.jpg',
+						dictValue: '/./../static/2.jpg'
+
+					},
+					{
+						dictLabel: '/./../static/3.jpg',
+						dictValue: '/./../static/3.jpg'
+
+					}, {
+						dictLabel: '/./../static/4.jpg',
+						dictValue: '/./../static/4.jpg'
+
+					}, {
+						dictLabel: '/./../static/5.jpg',
+						dictValue: '/./../static/5.jpg'
+
+					}
+				],
 				isSubmit: false,
 				content: '确定提交名片信息？',
 				userInfo: {},
@@ -107,6 +255,24 @@
 			};
 		},
 		methods: {
+			changeTemplate(index) {
+				this.selectIndex = index
+			},
+			getList() {
+				this.$request.baseRequest('admin.dictData', 'list', {
+					dictType: "card_template"
+				}, failres => {
+					console.log('res+++++', failres.errmsg)
+					this.$refs.uToast.show({
+						type: 'error',
+						message: failres.errmsg,
+					})
+					uni.hideLoading()
+				}).then(res => {
+					console.log("img", res)
+					this.imgList = res.data.items
+				})
+			},
 			placeSelect() {
 				uni.chooseLocation({
 					success: function(res) {
@@ -175,10 +341,10 @@
 						type: 'success',
 						message: '提交成功！',
 					})
-					this.$request.baseRequest('admin.unimall.personalHomepageInfo', 'list',{
-						page:1,
-						limit:10,
-						commonId:uni.getStorageSync("userInfo").id
+					this.$request.baseRequest('admin.unimall.personalHomepageInfo', 'list', {
+						page: 1,
+						limit: 10,
+						commonId: uni.getStorageSync("userInfo").id
 					}, failres => {
 						console.log('res+++++', failres.errmsg)
 						this.$refs.uToast.show({
@@ -187,15 +353,15 @@
 						})
 						uni.hideLoading()
 					}).then(res => {
-						if(res.data.items.length>0){
+						if (res.data.items.length > 0) {
 							uni.navigateBack()
-						}else{
+						} else {
 							uni.navigateTo({
 								url: '/pages/mySet/myHome'
 							})
 						}
 					})
-					
+
 				})
 			},
 			submit() {
@@ -207,7 +373,90 @@
 </script>
 
 <style lang="scss" scoped>
+	.content {
+		padding: 20rpx;
+	}
+
+	.bgc0 {
+		background: url('../../static/1.jpg') no-repeat center;
+		height: 380rpx;
+		border-radius: 20rpx;
+	}
+
+	.bgc1 {
+		background: url('../../static/2.jpg') no-repeat center;
+		height: 380rpx;
+		border-radius: 20rpx;
+	}
+
+	.bgc2 {
+		background: url('../../static/3.jpg') no-repeat center;
+		height: 380rpx;
+		border-radius: 20rpx;
+	}
+
+	.bgc3 {
+		background: url('../../static/4.jpg') no-repeat center;
+		height: 380rpx;
+		border-radius: 20rpx;
+	}
+
+	.bgc4 {
+		background: url('../../static/5.jpg') no-repeat center;
+		height: 380rpx;
+		border-radius: 20rpx;
+	}
+
 	.img {
 		width: 100rpx;
 	}
+
+	.change-template {
+		margin: 46rpx 0 30rpx 0;
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #19191A;
+	}
+
+	.img-list {
+		display: block;
+		white-space: nowrap;
+		overflow-x: auto;
+
+		.dh {
+			width: 32rpx;
+			height: 32rpx;
+			position: absolute;
+			right: 8rpx;
+			bottom: 8rpx;
+		}
+
+		.img-item {
+
+			position: relative;
+			width: 186rpx;
+			height: 120rpx;
+			display: inline-block;
+			margin-right: 2 0rpx;
+			border-radius: 20rpx;
+			margin-right: 20rpx;
+		}
+
+	}
+
+	.content2 {
+		background-color: #fff;
+		border-radius: 20rpx;
+		padding:0 20rpx 0 20rpx;
+		.row{
+			padding: 20rpx;
+			border-bottom: 1px solid #E6E5E5;
+		}
+	}
+	.button{
+		color: #fff;
+		background-color: #112253;
+		border-radius: 20rpx;
+		margin: 40rpx 0;
+	}
 </style>