From 1ed534cfa6a12686680cc80e74b8d0b647844073 Mon Sep 17 00:00:00 2001
From: aihe <961836564@qq.com>
Date: Tue, 12 Dec 2023 15:00:16 +0800
Subject: [PATCH] uu

---
 common/upload.js                     |  2 +-
 components/tpx-image/tpx-image.vue   | 24 +++++++++-
 components/tpx-upload/tpx-upload.vue | 65 ++++++++++++++++++++--------
 pages/user/certification.vue         |  8 ++--
 4 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/common/upload.js b/common/upload.js
index 920ec99..b388ac2 100644
--- a/common/upload.js
+++ b/common/upload.js
@@ -16,7 +16,7 @@ const chooseFile = function (action = 'chooseImage', opt = {}) {
       ...opts,
       success: function (res) {
         // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
-        var tempFilePaths = res.tempFilePaths || [res.tempFilePath]debugger
+        var tempFilePaths = res.tempFilePaths || [res.tempFilePath]
 		if (tempFilePaths.length > opts.count) {
 			reject()
 			return showToast(`最多选择${opts.count}个`)
diff --git a/components/tpx-image/tpx-image.vue b/components/tpx-image/tpx-image.vue
index 5abd1ff..9848139 100644
--- a/components/tpx-image/tpx-image.vue
+++ b/components/tpx-image/tpx-image.vue
@@ -1,15 +1,37 @@
 <template>
-	<image :src="src" :mode="mode" :hidden="!loadFlag" @load="bindload"></image>
+	<image :src="src" :mode="mode" :hidden="!loadFlag" @load="bindload" :style="cusStyle"></image>
 </template>
 
 <script>
 	export default {
+		computed: {
+			cusStyle() {
+				let s =	``
+				if(this.height) {
+					s+= `height:${this.height}rpx;`
+				}
+				if(this.width) {
+					s+= `width:${this.width}rpx;`
+				}
+				return s
+			},
+		},
 		props: {
 			src: {
 				default () {
 					return ''
 				}
 			},
+			height: {
+				default () {
+					return ''
+				}
+			},
+			width: {
+				default () {
+					return ''
+				}
+			},
 			mode: {
 				default () {
 					return 'aspectFit' // aspectFit | widthFix
diff --git a/components/tpx-upload/tpx-upload.vue b/components/tpx-upload/tpx-upload.vue
index d605c86..ca03060 100644
--- a/components/tpx-upload/tpx-upload.vue
+++ b/components/tpx-upload/tpx-upload.vue
@@ -1,25 +1,31 @@
 <template>
-	<view :style="`${customstyle}`">
+	<view :style="`${customstyle};flex-direction: ${direction};`" class="up-cont">
 		<view v-if="list.length < maxLen">
-			<view v-if="!isSlot"  @click="handleChooseFile" class="cam" style="">
-				<view class="">
-					<u-icon name="camera" size="50"></u-icon>
-				</view>
-				<view class="font-22">
-					<text>上传</text>
-					<text v-if="fileType==fileTypeEnum.image">图片</text>
-					<text v-if="fileType==fileTypeEnum.video">视频</text>
-					<text v-if="fileType==fileTypeEnum.all">文件</text>
-				</view>
+			<view v-if="!isSlot"  @click="handleChooseFile" class="camer-btn" :style="`width:${width}rpx;height:${height}rpx;`">
+				<template v-if="btnText">
+					<u-icon name="plus" size="40"></u-icon>
+					<text class="pt-10">{{btnText}}</text>
+				</template>
+				<template v-else>
+					<view class="">
+						<u-icon name="camera" size="50"></u-icon>
+					</view>
+					<view class="font-22">
+						<text>上传</text>
+						<text v-if="fileType==fileTypeEnum.image">图片</text>
+						<text v-if="fileType==fileTypeEnum.video">视频</text>
+						<text v-if="fileType==fileTypeEnum.all">文件</text>
+					</view>
+				</template >
 			</view>
 			<view v-if="isSlot" @click="handleChooseFile">
 				<slot></slot>
 			</view>
 		</view>
 		
-		<view v-for="(item) in list" :style="`${itemstyle}`">
+		<view v-for="(item) in list" :style="`${compItemstyle}`">
 			<view class="cdimg" @click="handleItem" data-index="{{index}}">
-				<tpx-image v-if="fileType==fileTypeEnum.image" :src="item" :mode="mode"></tpx-image>
+				<tpx-image v-if="fileType==fileTypeEnum.image" :src="item" :height="height" :width="width"></tpx-image>
 				<video v-if="fileType==fileTypeEnum.video" :src="item"></video>
 				<view v-if="fileType==fileTypeEnum.all">{{item}}</view>
 			</view>
@@ -52,6 +58,13 @@
 				}
 				return res
 			},
+			compItemstyle(){
+				let style =  `margin-bottom: 20rpx;`
+				if(this.direction == "row") {
+					// style += `width:${this.width}rpx;height:${this.height}rpx;`
+				}
+				return `${this.itemstyle};${style};`
+			}
 		},
 		props: {
 			customstyle: {
@@ -64,7 +77,22 @@
 					return ''
 				}
 			},
-			value: {
+			width: {
+				default () {
+					return 168
+				}
+			},
+			height: {
+				default () {
+					return 168
+				}
+			},
+			direction: {
+				default () {
+					return 'row'
+				}
+			},
+			btnText: {
 				default () {
 					return ''
 				}
@@ -195,9 +223,11 @@
 </script>
 
 <style scoped lang="scss">
-	.cam {
-		height: 168rpx;
-		width: 168rpx;
+	.up-cont{
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.camer-btn {
 		border: 2rpx solid #EFEFEF;
 		border-radius: 6rpx;
 		background: #F8F8F8;
@@ -205,5 +235,6 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
+		margin-bottom: 20rpx;
 	}
 </style>
\ No newline at end of file
diff --git a/pages/user/certification.vue b/pages/user/certification.vue
index c80517b..e8aefb6 100644
--- a/pages/user/certification.vue
+++ b/pages/user/certification.vue
@@ -20,13 +20,13 @@
 						<view class="mb-10">
 							<u-row justify="between">
 								<u-col span="5">
-									<tpx-upload v-model:value="baseFormData.pic1">
-										<u-text :text="'身份证人像面'" size="28" :scale="[7, 10]"></u-text>
+									<tpx-upload v-model:value="baseFormData.pic1" :btnText="'身份证人像面'" height="150" width="200">
+										<u-text :text="'身份证人像面'" size="28"></u-text>
 									</tpx-upload>
 								</u-col>
 								<u-col span="5">
-									<tpx-upload v-model:value="baseFormData.pic2">
-										<u-text :text="'身份证人像面'" size="28" :scale="[7, 10]"></u-text>
+									<tpx-upload v-model:value="baseFormData.pic2" :btnText="'身份证国徽面'"  height="150" width="200">
+										<u-text :text="'身份证国徽面'" size="28"></u-text>
 									</tpx-upload>
 								</u-col>
 							</u-row>