第一版完成

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#11313C",
+        "titleBar.activeBackground": "#184554",
+        "titleBar.activeForeground": "#F7FBFD"
+    }
+}

App.vue

@@ -1,17 +1,20 @@
 <script>
-	export default {
-		onLaunch: function() {
-			console.log('App Launch')
-		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
-		}
-	}
+export default {
+  onLaunch: function () {
+    console.log("App Launch");
+  },
+  onShow: function () {
+    console.log("App Show");
+  },
+  onHide: function () {
+    console.log("App Hide");
+  },
+};
 </script>
 
 <style>
-	/*每个页面公共css */
+/*每个页面公共css */
+::v-deep .index .tui-modal-btn {
+  background: linear-gradient(98deg, #0E83FF 0%, #0E3EFF 100%) !important;
+}
 </style>

api/index.js

@@ -1,21 +1,67 @@
 // 地址相关的请求
-import http from "./request";
+import http from "./request/index";
 
+//  微信登录
+export function wxLoginApi(params) {
+  return http.request({
+    method: "POST",
+    url: `/loginByCode`,
+    params,
+  });
+}
+
+//  获取名片列表
+export function getCardListApi() {
+  return http.request({
+    method: "GET",
+    url: `/queryAll`,
+    custom: {
+      needToken: true,
+    },
+  });
+}
+
+//  获取名片详情
+export function getCardDetailApi(params) {
+  return http.request({
+    method: "GET",
+    url: `/query`,
+    params,
+  });
+}
+
+//  新建名片
+export function createCardApi(data) {
+  return http.request({
+    method: "POST",
+    url: `/add`,
+    data,
+    custom: {
+      needToken: true,
+    },
+  });
+}
 
-// 查询名片信息
-export function getIdEnterpriseUserApi(params){
-    return http.request({
-		method: "GET",
-		url: `/enterpriseUser/getUserId`,
-		params
-	})
+//  修改名片
+export function updateCardApi(data) {
+  return http.request({
+    method: "POST",
+    url: `/update`,
+    data,
+    custom: {
+      needToken: true,
+    },
+  });
 }
 
-//  保存卡片
-export function saveCard(data) {
-	return http.request({
-		method: "POST",
-		url: `/enterpriseUser/save`,
-		data
-	})
-}
+//  删除名片
+export function deleteCardApi(params) {
+  return http.request({
+    method: "POST",
+    url: `/delete`,
+    params,
+    custom: {
+      needToken: true,
+    },
+  });
+}

api/request/config.js

@@ -1,4 +1,4 @@
 //  定义请求根路径 以及请求超时时间
-export const BASE_URL = "https://nsappapi.tuanfengkeji.cn";
+export const BASE_URL = "https://test.zhult.com/laoa-huozhu/api/hz/business-card/third";
 // export const BASE_URL = "http://127.0.0.1:7001";
 export const TIMEOUT = 10000

api/request/index.js

@@ -1,6 +1,8 @@
 import { BASE_URL, TIMEOUT } from "./config.js";
+
+import Cache from "@/utils/cache.js";
 //  引入请求库
-import Request from "@/utils/luch-request/index.js";
+import Request from "@/utils/luch-request/luch-request/index.js";
 const http = new Request({
 	baseURL: BASE_URL,
 	timeout: TIMEOUT
@@ -12,8 +14,8 @@ http.interceptors.request.use(
 		// 根据请求信息里携带的自定义属性，判断当前请求是否需要携带token
 		const needToken = config.custom.needToken || false;
 		if (needToken) {
-			const token = uni.getStorageSync("userInfo")?.token;
-			config.header.token = token;
+			const token = Cache.getCache('token');
+			config.header['Auth-Token'] = token;
 		}
 		return config;
 	},

components/capsule/capsule.vue

@@ -12,13 +12,13 @@ export default {
         // #ifdef MP-WEIXIN
         //  获取胶囊按钮的位置
         let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
-        console.log(menuButtonInfo);
+        // console.log(menuButtonInfo);
         this.height = menuButtonInfo.height + 'px'
         this.top = menuButtonInfo.top
         //  获取整个页面的宽度
         uni.getSystemInfo({
             success: res => {
-                console.log(res);
+                // console.log(res);
                 //  如果只需要安全区域的话 那就不需要高度
                 if (this.isSecurity) {
                     this.top = res.safeAreaInsets.bottom + 'px'

components/cardCom/index.scss

@@ -96,6 +96,7 @@
       .content-item {
         @include flex(flex-start, null, 10rpx);
         margin-top: 16rpx;
+        
         image {
           width: 24rpx;
           height: 24rpx;
@@ -104,6 +105,9 @@
         text {
           font-size: 24rpx;
           color: #ffffff;
+          overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
         }
       }
     }

components/cardCom/index.vue

@@ -8,17 +8,17 @@
         <view class="header-left">
           <view class="header-title">
             <text>{{ cardData.name || '' }}</text>
-            <text>{{ cardData.enterpriseDuties || '' }}</text>
+            <text>{{ cardData.positions }}</text>
           </view>
-          <view class="company">{{ cardData.enterpriseName  || '' }}</view>
+          <view class="company">{{ cardData.company || '' }}</view>
         </view>
-        <view class="header-right">
+        <view class="header-right" @click="changeImg">
           <view class="edit" v-if="isEdit">编辑</view>
           <view class="img-box">
-            <template v-if="cardData.headImage">
+            <template v-if="cardData.head">
               <image
               class=""
-              :src="cardData.headImage"
+              :src="cardData.head"
             />
             </template>
             <template v-else>
@@ -32,13 +32,13 @@
         </view>
       </view>
       <view class="card-content">
-        <view class="content-item" v-if="cardData.phone">
+        <view class="content-item" v-if="cardData.mobile">
           <image class="" src="@/static/images/icon_1.png" />
-          <text>{{ cardData.phone }}</text>
+          <text>{{ cardData.mobile }}</text>
         </view>
-        <view class="content-item" v-if="cardData.weChatSignal">
+        <view class="content-item" v-if="cardData.wechat">
           <image class="" src="@/static/images/icon_2.png" />
-          <text>{{ cardData.weChatSignal }}</text>
+          <text>{{ cardData.wechat }}</text>
         </view>
         <view class="content-item" v-if="cardData.address">
           <image class="" src="@/static/images/icon_3.png" />
@@ -65,9 +65,7 @@ export default {
     //  传递过来的卡片数据
     cardData:{
       typeof: Object,
-      default: () => {
-        return {}
-      }
+      default:{}
     }
   },
   data() {
@@ -79,6 +77,12 @@ export default {
       ],
     };
   },
+  methods: {
+    changeImg(){
+      if(!this.isEdit)return
+      this.$emit("changeImg")
+    }
+  }
 };
 </script>
 

components/thorui/tui-input/tui-input.vue

@@ -1,34 +1,39 @@
 <template>
-	<view :class="{'tui-input__border':inputBorder,'tui-radius__fillet':isFillet}" :style="{marginTop:marginTop+'rpx'}"
-		@tap="fieldClick">
-		<view class="tui-input__wrap"
-			:class="{'tui-line__left':lineLeft,'tui-border__top':!borderTop || inputBorder,'tui-border__bottom':!borderBottom || inputBorder,'tui-radius__fillet':isFillet}"
-			:style="{padding:padding,backgroundColor:backgroundColor}">
-			<!-- #ifdef APP-NVUE -->
-			<view class="tui-input__required" v-if="required">
-				<text :style="{color:requiredColor}">*</text>
-			</view>
-			<!-- #endif -->
-			<!-- #ifndef APP-NVUE -->
-			<view class="tui-input__required" :style="{color:requiredColor}" v-if="required">*</view>
-			<!-- #endif -->
-			<view class="tui-input__label"
-				:style="{fontSize:labelSize+'rpx',color:labelColor,minWidth:labelWidth+'rpx'}" v-if="label">
-				<text :style="{fontSize:labelSize+'rpx',color:labelColor}">{{label}}</text>
-			</view>
-			<slot name="left"></slot>
-			<input class="tui-input__self" :class="{'tui-text__right':textRight}"
-				:style="{fontSize:size+'rpx',color:color}" placeholder-class="tui-input__placeholder" :type="type"
-				:name="name" :value="inputVal" :password="password" :placeholder="placeholder"
-				:placeholder-style="placeholderStyl" :disabled="disabled" :cursor-spacing="cursorSpacing"
-				:maxlength="maxlength" :focus="focused" :confirm-type="confirmType" :confirm-hold="confirmHold"
-				:cursor="cursor" :selection-start="selectionStart" :selection-end="selectionEnd"
-				:adjust-position="adjustPosition" :hold-keyboard="holdKeyboard" :auto-blur="autoBlur" @focus="onFocus"
-				@blur="onBlur" @input="onInput" @confirm="onConfirm" @keyboardheightchange="onKeyboardheightchange" />
-			<icon type="clear" :size="clearSize" :color="clearColor" v-if="clearable && inputVal != ''"
-				@tap.stop="onClear"></icon>
-			<slot name="right"></slot>
+	<view class="tui-input__wrap"
+		:class="{'tui-border__top':borderTop && !inputBorder,'tui-border__bottom':borderBottom && !inputBorder,'tui-radius__fillet':isFillet && !getRadius,'tui-input__border-nvue':inputBorder}"
+		:style="getStyles" @tap="fieldClick">
+		<!-- #ifndef APP-NVUE -->
+		<view class="tui-input__border-top" v-if="borderTop && !inputBorder" :style="{borderTopColor:borderColor}">
 		</view>
+		<view class="tui-input__border-bottom" :class="{'tui-line__left':lineLeft}" v-if="borderBottom && !inputBorder"
+			:style="{borderBottomColor:borderColor}"></view>
+		<view class="tui-input__border" :class="{'tui-radius__fillet':isFillet && !getRadius}" v-if="inputBorder"
+			:style="{borderColor:borderColor,borderRadius:(getRadius*2)+'rpx'}"></view>
+		<!-- #endif -->
+		<!-- #ifdef APP-NVUE -->
+		<view class="tui-input__required" v-if="required">
+			<text :style="{color:getRequiredColor}">*</text>
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<view class="tui-input__required" :style="{color:getRequiredColor}" v-if="required">*</view>
+		<!-- #endif -->
+		<view class="tui-input__label"
+			:style="{fontSize:getLabelSize+'rpx',color:getLabelColor,minWidth:labelWidth+'rpx'}" v-if="label">
+			<text :style="{fontSize:getLabelSize+'rpx',color:getLabelColor}">{{label}}</text>
+		</view>
+		<slot name="left"></slot>
+		<input class="tui-input__self" :class="{'tui-text__right':textRight,'tui-input__disabled':disabled}"
+			:style="{fontSize:getSize+'rpx',color:color}" placeholder-class="tui-input__placeholder" :type="type"
+			:name="name" :value="inputVal" :password="password" :placeholder="inputVal?'':placeholder"
+			:placeholder-style="placeholderStyl" :disabled="disabled" :cursor-spacing="cursorSpacing"
+			:maxlength="maxlength" :focus="focused" :confirm-type="confirmType" :confirm-hold="confirmHold"
+			:cursor="cursor" :selection-start="selectionStart" :selection-end="selectionEnd"
+			:adjust-position="adjustPosition" :hold-keyboard="holdKeyboard" :auto-blur="autoBlur" @focus="onFocus"
+			@blur="onBlur" @input="onInput" @confirm="onConfirm" @keyboardheightchange="onKeyboardheightchange" />
+		<icon type="clear" :size="clearSize" :color="clearColor" v-if="clearable && inputVal != ''" @tap.stop="onClear">
+		</icon>
+		<slot name="right"></slot>
 	</view>
 </template>
 
@@ -37,14 +42,17 @@
 		name: "tui-input",
 		emits: ['input', 'update:modelValue', 'focus', 'blur', 'confirm', 'click', 'keyboardheightchange'],
 		//这里加group是为了避免在表单中使用时给组件加value属性
-		// #ifndef VUE3
 		// #ifdef MP-WEIXIN
 		behaviors: ['wx://form-field-group'],
 		// #endif
-		// #ifdef MP-BAIDU || MP-QQ
-		//如果在这些平台不需要也能识别，则删除
-		behaviors: ['uni://form-field'],
+		// #ifdef MP-BAIDU
+		behaviors: ['swan://form-field'],
 		// #endif
+		// #ifdef MP-QQ
+		behaviors: ['qq://form-field'],
+		// #endif
+		// #ifdef H5
+		behaviors: ['uni://form-field'],
 		// #endif
 		// #ifdef MP-WEIXIN
 		options: {
@@ -60,7 +68,7 @@
 			},
 			requiredColor: {
 				type: String,
-				default: '#EB0909'
+				default: ''
 			},
 			//左侧标题
 			label: {
@@ -69,12 +77,12 @@
 			},
 			//标题字体大小
 			labelSize: {
-				type: Number,
-				default: 32
+				type: [Number, String],
+				default: 0
 			},
 			labelColor: {
 				type: String,
-				default: '#333'
+				default: ''
 			},
 			//label 最小宽度 rpx
 			labelWidth: {
@@ -190,19 +198,23 @@
 			},
 			//输入框字体大小 rpx
 			size: {
-				type: [Number,String],
-				default: 32
+				type: [Number, String],
+				default: 0
 			},
 			//输入框字体颜色
 			color: {
 				type: String,
-				default: '#333'
+				default: ''
 			},
 			// 是否显示 input 边框
 			inputBorder: {
 				type: Boolean,
 				default: false
 			},
+			borderColor: {
+				type: String,
+				default: 'rgba(0, 0, 0, 0.1)'
+			},
 			//input是否显示为圆角
 			isFillet: {
 				type: Boolean,
@@ -235,19 +247,61 @@
 			//输入框padding值
 			padding: {
 				type: String,
-				default: '26rpx 30rpx'
+				default: ''
 			},
 			//输入框背景颜色
 			backgroundColor: {
 				type: String,
-				default: '#FFFFFF'
+				default: ''
+			},
+			radius: {
+				type: [Number, String],
+				default: -1
 			},
 			//输入框margin-top值 rpx
 			marginTop: {
-				type: Number,
+				type: [Number, String],
 				default: 0
 			}
 		},
+		computed: {
+			getLabelSize() {
+				return this.labelSize || (uni && uni.$tui && uni.$tui.tuiInput.labelSize) || 32
+			},
+			getLabelColor() {
+				return this.labelColor || (uni && uni.$tui && uni.$tui.tuiInput.labelColor) || '#333'
+			},
+			getSize() {
+				return this.size || (uni && uni.$tui && uni.$tui.tuiInput.size) || 32
+			},
+			getColor() {
+				return this.color || (uni && uni.$tui && uni.$tui.tuiInput.color) || '#333'
+			},
+			getRadius() {
+				let radius = this.radius
+				if (radius === -1 || radius === true) {
+					radius = uni && uni.$tui && uni.$tui.tuiInput.radius
+				}
+				return Number(radius || 0)
+			},
+			getStyles() {
+				const padding = this.padding || (uni && uni.$tui && uni.$tui.tuiInput.padding) || '26rpx 30rpx';
+				const bgColor = this.backgroundColor || (uni && uni.$tui && uni.$tui.tuiInput.backgroundColor) ||
+					'#FFFFFF';
+				let radius = this.getRadius;
+				let styles = `padding:${padding};background:${bgColor};margin-top:${this.marginTop}rpx;`
+				if (radius && radius !== true && radius !== -1) {
+					styles += `border-radius:${radius}rpx;`
+				}
+				if (this.borderTop || this.borderBottom || this.inputBorder) {
+					styles += `border-color:${this.borderColor};`
+				}
+				return styles
+			},
+			getRequiredColor() {
+				return this.requiredColor || (uni && uni.$tui && uni.$tui.tuiInput.requiredColor) || '#EB0909'
+			}
+		},
 		data() {
 			return {
 				placeholderStyl: '',
@@ -258,7 +312,9 @@
 		watch: {
 			focus(val) {
 				this.$nextTick(() => {
-					this.focused = val
+					setTimeout(() => {
+						this.focused = val
+					}, 50)
 				})
 			},
 			placeholderStyle() {
@@ -274,31 +330,26 @@
 			}
 		},
 		created() {
-			// #ifndef VUE3
-			this.inputVal = this.value
-			// #endif
-
-			// #ifdef VUE3
-			if (this.value && !this.modelValue) {
-				this.inputVal = this.value
-			} else {
-				this.inputVal = this.modelValue
-			}
-			// #endif
 			this.fieldPlaceholderStyle()
+			setTimeout(() => {
+				// #ifndef VUE3
+				this.inputVal = this.value
+				// #endif
+
+				// #ifdef VUE3
+				if (this.value && !this.modelValue) {
+					this.inputVal = this.value
+				} else {
+					this.inputVal = this.modelValue
+				}
+				// #endif
+			}, 50)
 		},
 		mounted() {
 			this.$nextTick(() => {
-				// #ifdef MP-TOUTIAO
 				setTimeout(() => {
 					this.focused = this.focus
 				}, 300)
-				// #endif
-				// #ifndef MP-TOUTIAO
-				setTimeout(() => {
-					this.focused = this.focus
-				}, 120)
-				// #endif
 			})
 		},
 		methods: {
@@ -306,7 +357,7 @@
 				if (this.placeholderStyle) {
 					this.placeholderStyl = this.placeholderStyle
 				} else {
-					const size = uni.upx2px(this.size)
+					const size = uni.upx2px(this.size || (uni && uni.$tui && uni.$tui.tuiInput.size) || 32)
 					this.placeholderStyl = `font-size:${size}px`
 				}
 			},
@@ -314,14 +365,17 @@
 				let value = event.detail.value;
 				if (this.trim) value = this.trimStr(value);
 				this.inputVal = value
-				if (this.modelModifiers.number || this.type === 'digit' || this.type === 'number') {
-					let eVal = Number(value)
-					if (typeof eVal === 'number') {
+				//数字类型 数值不能超过最大整数安全范围，一但超过则返回字符串
+				const cVal = Number(value)
+				if ((this.modelModifiers.number || this.type === 'digit' || this.type === 'number') && !isNaN(cVal) &&
+					Number.isSafeInteger(cVal)) {
+					let eVal = this.type === 'digit' ? value : cVal
+					if (typeof cVal === 'number') {
 						const min = Number(this.min)
 						const max = Number(this.max)
-						if (typeof min === 'number' && eVal < min) {
+						if (typeof min === 'number' && cVal < min) {
 							eVal = min
-						} else if (typeof max === 'number' && max < eVal) {
+						} else if (typeof max === 'number' && max < cVal) {
 							eVal = max
 						}
 					}
@@ -330,10 +384,10 @@
 				this.$nextTick(() => {
 					event.detail.value !== '' && (this.inputVal = value);
 				})
-				
-				this.$emit('input', value);
+				const inputValue = event.detail.value !== '' ? value : ''
+				this.$emit('input', inputValue);
 				// #ifdef VUE3
-				this.$emit('update:modelValue', value)
+				this.$emit('update:modelValue', inputValue)
 				// #endif
 			},
 			onFocus(event) {
@@ -346,7 +400,7 @@
 				this.$emit('confirm', e);
 			},
 			onClear(event) {
-				if(this.disabled) return;
+				if (this.disabled) return;
 				uni.hideKeyboard()
 				this.inputVal = '';
 				this.$emit('input', '');
@@ -377,24 +431,18 @@
 		display: flex;
 		/* #endif */
 		flex-direction: row;
-		flex: 1;
 		align-items: center;
 		position: relative;
-
+		flex: 1;
 		/* #ifdef APP-NVUE */
-		border-top-width: 0.5px;
-		border-top-style: solid;
-		border-top-color: rgba(0, 0, 0, 0.1);
-		border-bottom-width: 0.5px;
-		border-bottom-style: solid;
-		border-bottom-color: rgba(0, 0, 0, 0.1);
 		padding: 26rpx 30rpx;
 		/* #endif */
+		border-width: 0;
 	}
 
 	/* #ifndef APP-NVUE */
-	.tui-input__wrap::before {
-		content: ' ';
+
+	.tui-input__border-top {
 		position: absolute;
 		top: 0;
 		right: 0;
@@ -407,8 +455,7 @@
 		pointer-events: none;
 	}
 
-	.tui-input__wrap::after {
-		content: ' ';
+	.tui-input__border-bottom {
 		position: absolute;
 		border-bottom: 1px solid var(--thorui-line-color, rgba(0, 0, 0, 0.1));
 		-webkit-transform: scaleY(0.5);
@@ -421,27 +468,21 @@
 		pointer-events: none;
 	}
 
-	.tui-line__left::after {
+	.tui-line__left {
 		left: 30rpx !important;
 	}
 
-	.tui-border__top::before {
-		border-top: 0;
-	}
-
-	.tui-border__bottom::after {
-		border-bottom: 0;
-	}
-
 	/* #endif */
 
 	/* #ifdef APP-NVUE */
 	.tui-border__top {
-		border-top-width: 0;
+		border-top-width: 0.5px;
+		border-top-style: solid;
 	}
 
 	.tui-border__bottom {
-		border-bottom-width: 0;
+		border-top-width: 0.5px;
+		border-top-style: solid;
 	}
 
 	/* #endif */
@@ -499,22 +540,20 @@
 
 	/* #endif */
 
-	.tui-input__border {
-		border-radius: 4rpx;
-		position: relative;
-		/* #ifdef APP-NVUE */
-		border-style: solid;
+	/* #ifdef APP-NVUE */
+	.tui-input__border-nvue {
 		border-width: 0.5px;
-		border-color: #d1d1d1;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		border-width: 0;
-		/* #endif */
+		border-style: solid;
 	}
 
+	/* #endif */
+
 	/* #ifndef APP-NVUE */
-	.tui-input__border::after {
-		content: ' ';
+	.tui-input__disabled {
+		pointer-events: none;
+	}
+
+	.tui-input__border {
 		position: absolute;
 		height: 200%;
 		width: 200%;
@@ -527,11 +566,8 @@
 		pointer-events: none;
 	}
 
-	.tui-radius__fillet::after {
-		border-radius: 100px !important;
-	}
-
 	/* #endif */
+
 	.tui-radius__fillet {
 		border-radius: 100px !important;
 	}
@@ -539,4 +575,4 @@
 	.tui-text__right {
 		text-align: right;
 	}
-</style>
+</style>

components/thorui/tui-modal/tui-modal.vue

@@ -0,0 +1,446 @@
+<template>
+	<view class="tui-modal__container" :class="[show ? 'tui-modal-show' : '']" :style="{zIndex:zIndex}" @touchmove.stop.prevent>
+		<view
+			class="tui-modal-box"
+			:style="{ width: width, padding: padding, borderRadius: radius, backgroundColor: backgroundColor,zIndex:zIndex+1 }"
+			:class="[fadeIn || show ? 'tui-modal-normal' : 'tui-modal-scale', show ? 'tui-modal-show' : '']"
+		>
+			<view v-if="!custom">
+				<view class="tui-modal-title" v-if="title">{{ title }}</view>
+				<view class="tui-modal-content" :class="[title ? '' : 'tui-mtop']" :style="{ color: color, fontSize: size + 'rpx' }">{{ content }}</view>
+				<view class="tui-modalBtn-box" :class="[button.length != 2 ? 'tui-flex-column' : '']">
+					<block v-for="(item, index) in button" :key="index">
+						<button
+							class="tui-modal-btn"
+							:class="[
+								'tui-' + (item.type || 'primary') + (item.plain ? '-outline' : ''),
+								button.length != 2 ? 'tui-btn-width' : '',
+								button.length > 2 ? 'tui-mbtm' : '',
+								shape == 'circle' ? 'tui-circle-btn' : ''
+							]"
+							:hover-class="'tui-' + (item.plain ? 'outline' : item.type || 'primary') + '-hover'"
+							:data-index="index"
+							@tap="handleClick"
+						>
+							{{ item.text || '确定' }}
+						</button>
+					</block>
+				</view>
+			</view>
+			<view v-else><slot></slot></view>
+		</view>
+		<view class="tui-modal-mask" :class="[show ? 'tui-mask-show' : '']" :style="{zIndex:maskZIndex}" @tap="handleClickCancel"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiModal',
+	emits: ['click','cancel'],
+	props: {
+		//是否显示
+		show: {
+			type: Boolean,
+			default: false
+		},
+		width: {
+			type: String,
+			default: '84%'
+		},
+		backgroundColor: {
+			type: String,
+			default: '#fff'
+		},
+		padding: {
+			type: String,
+			default: '40rpx 64rpx'
+		},
+		radius: {
+			type: String,
+			default: '24rpx'
+		},
+		//标题
+		title: {
+			type: String,
+			default: ''
+		},
+		//内容
+		content: {
+			type: String,
+			default: ''
+		},
+		//内容字体颜色
+		color: {
+			type: String,
+			default: '#999'
+		},
+		//内容字体大小 rpx
+		size: {
+			type: Number,
+			default: 28
+		},
+		//形状 circle, square
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		button: {
+			type: Array,
+			default: function() {
+				return [
+					{
+						text: '取消',
+						type: 'red',
+						plain: true //是否空心
+					},
+					{
+						text: '确定',
+						type: 'red',
+						plain: false
+					}
+				];
+			}
+		},
+		//点击遮罩 是否可关闭
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		//淡入效果，自定义弹框插入input输入框时传true
+		fadeIn: {
+			type: Boolean,
+			default: false
+		},
+		//自定义弹窗内容
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		//容器z-index
+		zIndex:{
+			type: Number,
+			default: 9997
+		},
+		//mask z-index
+		maskZIndex:{
+			type: Number,
+			default: 9990
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		handleClick(e) {
+			if (!this.show) return;
+			const dataset = e.currentTarget.dataset;
+			this.$emit('click', {
+				index: Number(dataset.index)
+			});
+		},
+		handleClickCancel() {
+			if (!this.maskClosable) return;
+			this.$emit('cancel');
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-modal__container {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	left: 0;
+	top: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	visibility: hidden;
+}
+.tui-modal-box {
+	position: relative;
+	opacity: 0;
+	visibility: hidden;
+	box-sizing: border-box;
+	transition: all 0.3s ease-in-out;
+}
+
+.tui-modal-scale {
+	transform: scale(0);
+}
+
+.tui-modal-normal {
+	transform: scale(1);
+}
+
+.tui-modal-show {
+	opacity: 1;
+	visibility: visible;
+}
+
+.tui-modal-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	transition: all 0.3s ease-in-out;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.tui-mask-show {
+	visibility: visible;
+	opacity: 1;
+}
+
+.tui-modal-title {
+	text-align: center;
+	font-size: 34rpx;
+	color: #333;
+	padding-top: 20rpx;
+	font-weight: bold;
+}
+
+.tui-modal-content {
+	text-align: center;
+	color: #999;
+	font-size: 28rpx;
+	padding-top: 20rpx;
+	padding-bottom: 60rpx;
+}
+
+.tui-mtop {
+	margin-top: 30rpx;
+}
+
+.tui-mbtm {
+	margin-bottom: 30rpx;
+}
+
+.tui-modalBtn-box {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.tui-flex-column {
+	flex-direction: column;
+}
+
+.tui-modal-btn {
+	width: 46%;
+	height: 68rpx;
+	line-height: 68rpx;
+	position: relative;
+	border-radius: 10rpx;
+	font-size: 26rpx;
+	overflow: visible;
+	margin-left: 0;
+	margin-right: 0;
+	box-sizing: border-box;
+}
+
+/* #ifndef MP-QQ */
+.tui-modal-btn::after {
+	content: ' ';
+	position: absolute;
+	width: 200%;
+	height: 200%;
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+	transform: scale(0.5, 0.5) translateZ(0);
+	left: 0;
+	top: 0;
+	border-radius: 20rpx;
+	z-index: 2;
+}
+/* #endif */
+
+.tui-btn-width {
+	width: 80% !important;
+}
+
+.tui-primary {
+	background: #5677fc;
+	color: #fff;
+}
+
+.tui-primary-hover {
+	background: #4a67d6;
+	color: #e5e5e5;
+}
+
+.tui-primary-outline {
+	color: #5677fc;
+	background: transparent;
+	/* #ifdef MP-QQ */
+	border: 1rpx solid #5677fc;
+	/* #endif */
+}
+
+/* #ifndef MP-QQ */
+.tui-primary-outline::after {
+	border: 1px solid #5677fc;
+}
+
+/* #endif */
+.tui-danger {
+	background: #ed3f14;
+	color: #fff;
+}
+
+.tui-danger-hover {
+	background: #d53912;
+	color: #e5e5e5;
+}
+
+.tui-danger-outline {
+	color: #ed3f14;
+	background: transparent;
+	/* #ifdef MP-QQ */
+	border: 1rpx solid #ed3f14;
+	/* #endif */
+}
+
+/* #ifndef MP-QQ */
+.tui-danger-outline::after {
+	border: 1px solid #ed3f14;
+}
+/* #endif */
+
+.tui-red {
+	background: #e41f19;
+	color: #fff;
+}
+
+.tui-red-hover {
+	background: #c51a15;
+	color: #e5e5e5;
+}
+
+.tui-red-outline {
+	color: #e41f19;
+	background: transparent;
+	/* #ifdef MP-QQ */
+	border: 1rpx solid #e41f19;
+	/* #endif */
+}
+
+/* #ifndef MP-QQ */
+.tui-red-outline::after {
+	border: 1px solid #e41f19;
+}
+/* #endif */
+
+.tui-warning {
+	background: #ff7900;
+	color: #fff;
+}
+
+.tui-warning-hover {
+	background: #e56d00;
+	color: #e5e5e5;
+}
+
+.tui-warning-outline {
+	color: #ff7900;
+	background: transparent;
+	/* #ifdef MP-QQ */
+	border: 1rpx solid #ff7900;
+	/* #endif */
+}
+
+/* #ifndef MP-QQ */
+.tui-warning-outline::after {
+	border: 1px solid #ff7900;
+}
+
+/* #endif */
+.tui-green {
+	background: #19be6b;
+	color: #fff;
+}
+
+.tui-green-hover {
+	background: #16ab60;
+	color: #e5e5e5;
+}
+
+.tui-green-outline {
+	color: #19be6b;
+	background: transparent;
+	/* #ifdef MP-QQ */
+	border: 1rpx solid #19be6b;
+	/* #endif */
+}
+
+/* #ifndef MP-QQ */
+.tui-green-outline::after {
+	border: 1px solid #19be6b;
+}
+/* #endif */
+
+.tui-white {
+	background: #fff;
+	color: #333;
+}
+
+.tui-white-hover {
+	background: #f7f7f9;
+	color: #666;
+}
+
+.tui-white-outline {
+	color: #333;
+	background: transparent;
+	/* #ifdef MP-QQ */
+	border: 1rpx solid #333;
+	/* #endif */
+}
+
+/* #ifndef MP-QQ */
+.tui-white-outline::after {
+	border: 1px solid #333;
+}
+/* #endif */
+
+.tui-gray {
+	background: #ededed;
+	color: #999;
+}
+
+.tui-gray-hover {
+	background: #d5d5d5;
+	color: #898989;
+}
+
+.tui-gray-outline {
+	color: #999;
+	background: transparent;
+	/* #ifdef MP-QQ */
+	border: 1rpx solid #999;
+	/* #endif */
+}
+
+/* #ifndef MP-QQ */
+.tui-gray-outline::after {
+	border: 1px solid #999;
+}
+/* #endif */
+
+.tui-outline-hover {
+	opacity: 0.6;
+}
+
+.tui-circle-btn {
+	border-radius: 40rpx !important;
+}
+
+.tui-circle-btn::after {
+	border-radius: 80rpx !important;
+}
+</style>

main.js

@@ -9,6 +9,10 @@ import { showToast,loading } from '@/utils/index'
 Vue.prototype.$showToast = showToast
 Vue.prototype.$loading = loading
 
+//  将本地存储的函数挂载到this上面去
+import Cache from '@/utils/cache.js'
+Vue.prototype.$cache = Cache
+
 Vue.config.productionTip = false
 App.mpType = 'app'
 const app = new Vue({

manifest.json

@@ -55,10 +55,10 @@
             "urlCheck" : false
         },
         "usingComponents" : true,
-		"optimization" : {
-		    "subPackages" : true
-		},
-		"lazyCodeLoading" : "requiredComponents"
+        "optimization" : {
+            "subPackages" : true
+        },
+        "lazyCodeLoading" : "requiredComponents"
     },
     "mp-alipay" : {
         "usingComponents" : true

pages.json

@@ -1,48 +1,63 @@
 {
-	"easycom": {
-		"autoscan": true,
-		"custom": {
-			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
-		}
-	},
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "团蜂小名片",
-				"navigationStyle":"custom"
-			}
-		},
-		{
-			"path": "pages/previewCard/index",
-			"style": {
-				"navigationBarTitleText": "预览名片",
-				"navigationBarTextStylemyCard":"black",
-				"navigationBarBackgroundColor":"#fff"
-			}
-		}
-	],
-	"subpackages":[
-		{
-			"root": "pages_module",
-			"name":"pages_module",
-			"pages": [
-				{
-					"path": "establish/index",
-					"style": {
-						"navigationBarTitleText": "创建名片",
-						"navigationBarTextStyle":"black",
-						"navigationBarBackgroundColor":"#fff"
-					}
-				}
-			] 
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"uniIdRouter": {}
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
+    }
+  },
+  "pages": [
+    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "团蜂小名片",
+        "navigationStyle": "custom"
+      }
+    }
+    // {
+    //   "path": "pages/previewCard/index",
+    //   "style": {
+    //     "navigationBarTitleText": "预览名片",
+    //     "navigationBarTextStylemyCard": "black",
+    //     "navigationBarBackgroundColor": "#fff"
+    //   }
+    // }
+  ],
+  "subpackages": [
+    {
+      "root": "pages_module",
+      "name": "pages_module",
+      "pages": [
+        {
+          "path": "establish/index",
+          "style": {
+            "navigationBarTitleText": "创建名片",
+            "navigationBarTextStyle": "black",
+            "navigationBarBackgroundColor": "#fff"
+          }
+        },
+        {
+          "path": "previewCard/index",
+          "style": {
+            "navigationBarTitleText": "预览名片",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "myCard/index",
+          "style": {
+            "navigationBarTitleText": "我的名片",
+			      "navigationStyle": "custom"
+          }
+        }
+      ]
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  },
+  "uniIdRouter": {}
 }

pages/index/index.scss

@@ -6,7 +6,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    z-index: 999;
+    z-index: 2;
     @include flex(center);
     .top-left{
         position: absolute;
@@ -43,6 +43,13 @@
     width: 100%;
     padding: 28rpx 32rpx 28rpx 28rpx;
     box-sizing: border-box;
+    .card-list{
+      position: relative;
+      .card-item{
+        position: absolute;
+        left: 0;
+      }
+    }
     .empty-box{
         width: 100%;
         height: 649rpx;
@@ -124,11 +131,12 @@
   // }
 
   .d-container {
-    // @extend %securityTop;
+    @extend %securityTop;
     box-sizing: border-box;
     height: 100vh;
     width: 350rpx;
     background-color: #fff;
+    border-radius: 16rpx;
 
     .d-image {
       @include flex(center, column, 20rpx);
@@ -158,3 +166,7 @@
     }
   }
 }
+
+::v-deep .tui-drawer-container{
+  border-radius:  0 16rpx 16rpx 0;
+}

pages/index/index.vue

@@ -3,7 +3,7 @@
     <capsule :showBorder="true" bgColor="transparent">
       <template v-slot:top>
         <view class="detail-top">
-          <view class="top-left">
+          <view class="top-left" @click="openDrawer">
             <image class="" src="@/static/images/catalogue_icon.png" />
           </view>
           <view class="top-text">团蜂电子名片</view>
@@ -12,91 +12,160 @@
     </capsule>
     <view class="seat"></view>
     <view class="box-bg">
-		<!-- <view class="bg"></view> -->
-	</view>
+      <!-- <view class="bg"></view> -->
+    </view>
     <view class="container">
-		<view class="empty-box">
-			<image src="@/static/images/empty-card.png" />
-			<text>暂未添加名片</text>
-		</view>
+      <view
+        class="card-list"
+        :style="{ height: cardListHeight + 'rpx' }"
+        v-if="cardList.length > 0"
+      >
+        <view
+          class="card-item"
+          v-for="(item, index) in cardList"
+          :key="index"
+          :style="{ top: index * 120 + 'rpx', zIndex: index }"
+          @click.stop="goCard('/pages_module/myCard/index?id=' + item.id)"
+        >
+          <cardCom :cardData="item" :imgSerial="item.style"></cardCom>
+        </view>
+        <!-- <view class="card-item" v-for="item in 3" :key="item" :style="{top: (item)*120 + 'rpx'}">
+          <cardCom></cardCom>
+        </view> -->
+      </view>
+      <view class="empty-box" v-else>
+        <image src="@/static/images/empty-card.png" />
+        <text>暂未添加名片</text>
+      </view>
       <view class="card-btn">
         <button @click="addCard">+&nbsp; &nbsp;&nbsp;新增名片</button>
       </view>
     </view>
-
-    <!-- <view class="contant">
-			<view class="header" :style="{ marginTop: top + 'rpx' }">
-				<view class="header-icon" @click="openDrawer">
-					<image class="" src="@/static/catalogue_icon.png" />
-				</view>
-				<view class="header-title">团蜂电子名片</view>
-			</view>
-			<view class="main">
-				<view class="card-list"></view>
-				<view class="add-card" @click="addCard">
-					<view class="card-icon">
-						<tui-icon name="plus" :size="24" color="rgb(58, 143, 255)"></tui-icon>
-					</view>
-					<view class="card-text">新增名片</view>
-				</view>
-			</view>
-			<button open-type="getPhoneNumber" @click="addCard" @getphonenumber="getPhone">点击事件</button>
-		</view> -->
     <tui-drawer mode="left" :visible="visible" @close="closeDrawer">
-      <view class="d-container" :style="{ marginTop: top + 'rpx' }">
+      <view class="d-container">
         <view class="d-image">
-          <image class="" src="@/static/header_image.png" />
-          <text>摘星辰</text>
+          <template v-if="cardList[0].head">
+            <image class="" :src="cardList[0].head" />
+          </template>
+          <template v-else>
+            <image class="" src="@/static/images/default_avatar.png" />
+          </template>
+          <text>{{ cardList[0].name }}</text>
         </view>
         <view class="quit" @click="quitLogin">退出登录</view>
       </view>
     </tui-drawer>
+    <tui-modal
+      :show="modal"
+      :button="[{ text: '确定', type: 'red', plain: false }]"
+      @click="handleClick"
+      @cancel="hideModal"
+      title="提示"
+      content="您还未登录，是否需要登录？"
+    ></tui-modal>
   </view>
 </template>
 
 <script>
+import cardCom from "@/components/cardCom/index.vue";
+import { wxLoginApi, getCardListApi } from "@/api/index.js";
 export default {
+  components: {
+    cardCom,
+  },
+  onShow() {
+    //  判断是否登录
+    if (!this.$cache.getCache("token")) return;
+    this.getCardList();
+  },
+  computed: {
+    // 计算高度
+    cardListHeight() {
+      let num = 308 + this.cardList.length * 120;
+      return num;
+    },
+  },
   data() {
     return {
       visible: false,
       top: null,
+      modal: false,
+      //  卡片列表
+      cardList: [],
     };
   },
-  onLoad() {
-    uni.getSystemInfo({
-      success: (res) => {
-        this.top = res.safeAreaInsets.top * 2;
-      },
-    });
-  },
   methods: {
+    //  获取当前用户所有名片
+    async getCardList() {
+      let { data } = await getCardListApi();
+      this.cardList = data;
+    },
     //  打开侧边弹框
     openDrawer() {
+      if (!this.$cache.getCache("token")){
+        this.modal = true;
+        return
+      }
       this.visible = true;
     },
+    //  关闭侧边弹框
+    closeDrawer() {
+      this.visible = false;
+    },
     //  新增卡片
     addCard() {
-      // #ifdef MP-WEIXIN
-      wx.login({
-        success: (res) => {
-          console.log(res);
-        },
-      });
-      // #endif
+      //  获取本地 token
+      const flag = this.$cache.getCache("token");
+      if (!flag) {
+        this.modal = true;
+        return;
+      }
       uni.navigateTo({
         url: "/pages_module/establish/index",
       });
     },
-    getPhone(e) {
-      console.log(e);
-    },
     // 退出登录
     quitLogin() {
-      this.visible = false;
+      // #ifdef MP-WEIXIN
+      wx.showModal({
+        title: "提示",
+        content: "是否退出当前登录的账号",
+        success: async (res) => {
+          if (res.confirm) {
+            this.$cache.removeCache("token");
+            this.cardList = [];
+            this.visible = false;
+          }
+        },
+      });
+      // #endif
     },
-    //  关闭侧边弹框
-    closeDrawer() {
-      this.visible = false;
+    handleClick(e) {
+      // 微信登录
+      this.$loading.show("登录中...");
+      // #ifdef MP-WEIXIN
+      wx.login({
+        success: async (res) => {
+          let codeRes = await wxLoginApi({ code: res.code });
+          //  获取名片列表
+          this.getCardList();
+          //  存储 token 到本地
+          this.$cache.setCache("token", codeRes.data);
+          this.modal = false;
+        },
+        complete: () => {
+          this.$loading.hide();
+        },
+      });
+      // #endif
+    },
+    hideModal() {
+      this.modal = false;
+    },
+    goCard(url) {
+      uni.navigateTo({
+        url: url,
+      });
     },
   },
 };

pages/previewCard/index.vue

@@ -1,257 +0,0 @@
-<template>
-    <view class="previewCard">
-        <view class="card-container">11111</view>
-        <view class="contact-mode">
-            <view class="mode-item" v-for="(item,index) in modeList" :key="index" @click="mobeClick(item.value,item.name)">
-                <tui-icon :name="item.icon" :size="26" color="#3A8FFF"></tui-icon>
-                <text>{{ item.name }}</text>
-            </view>
-        </view>
-        <view class="personal" v-for="(item, index) in briefList" :key="index" :class="index == 1 ? 'act' : ''">
-            <view class="title">
-                <text>{{ item.title }}</text>
-                <view class="edit">
-                    <tui-icon name="evaluate" :size="24" color="#3A8FFF"></tui-icon>
-                    <text>编辑</text>
-                </view>
-            </view>
-            <tui-textarea :disabled="item.disabled" :value=item.value flexStart :placeholder=item.placeholder
-                min-height="200rpx" height="200rpx" :size="28"></tui-textarea>
-        </view>
-        <view class="footer" :style="{ bottom: bottom + 'rpx' }">
-            <view class="preview" @click="goBack">编辑名片</view>
-            <view class="preserve">发送名片</view>
-        </view>
-        <tui-drawer mode="bottom" :visible="visible" @close="closeDrawer">
-            <view class="d-container">
-                <view class="d-header">
-                    <text>{{ drawerVal.title }}</text>
-                    <view class="icon" @click="closeDrawer">
-                        <tui-icon name="shut" :size="24"></tui-icon>
-                    </view>
-                </view>
-                <view class="d-body">
-                    <text>{{ drawerVal.value }}</text>
-                    <view class="copy" @click="copyVal">
-                        <tui-icon name="feedback"  :size="24" color="#3A8FFF"></tui-icon>
-                    </view>
-                </view>
-            </view>
-		</tui-drawer>
-    </view>
-</template>
-
-<script>
-export default {
-    onLoad() {
-        uni.getSystemInfo({
-            success: (res) => {
-                this.bottom = res.safeAreaInsets.bottom
-            }
-        })
-    },
-    data() {
-        return {
-            //  控制底部弹框
-            visible:false,
-            //  控制输入框是否可以编辑
-            personalDis: true,
-            companylDis: true,
-            bottom: null,
-            //  联系列表
-            modeList:[
-                {
-                    name:"电话",
-                    icon:"voipphone",
-                    value:"1"
-                },
-                {
-                    name:"微信",
-                    icon:"wechat",
-                    value:"2"
-                },
-                {
-                    name:"地址",
-                    icon:"gps",
-                    value:"3"
-                }
-            ],
-            //  简介列表
-            briefList: [
-                {
-                    title: "个人简介",
-                    value: "广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介",
-                    placeholder: "请填写个人简介",
-                    disabled: true
-                },
-                {
-                    title: "公司简介",
-                    value: "团蜂科技公司理念：用专业获得尊重，用系统解决问题，用服务赢得信任，用结果换来认可，执行，认真，快，坚守承诺！！！向奋斗者学习，和创新者共进，与价值观一致者同行",
-                    placeholder: "请填写公司简介",
-                    disabled: true
-                }
-            ],
-            //  弹框数据 
-            drawerVal:{
-                value:"11111",
-                title:"电话"
-            }
-        }
-    },
-    methods: {
-        mobeClick(val,title){
-            //  给弹框赋值
-            this.drawerVal.value = val
-            this.drawerVal.title = title
-            this.visible = true
-        },
-        //  拷贝文本
-        copyVal(){
-            uni.setClipboardData({
-                data:this.drawerVal.value,
-                success: (res) => {
-                    uni.showToast({
-                        title: '复制成功',
-                        icon: 'none'
-                    })
-                }
-            })
-        },
-        //  关闭弹框
-        closeDrawer(){
-            this.visible = false
-        },
-        goBack() {
-            uni.navigateBack()
-        }
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-%paddBox {
-    margin-top: 20rpx;
-    border-radius: 10rpx;
-    padding: 30rpx 20rpx;
-    box-sizing: border-box;
-    background-color: #fff;
-}
-
-%title {
-    border-bottom: 1rpx solid #ccc;
-    font-size: 30rpx;
-    color: #000;
-    font-weight: 600;
-    padding-bottom: 20rpx;
-}
-
-page {
-    background-color: #f5f5f5;
-}
-
-.previewCard {
-    padding: 30rpx 20rpx;
-    background-color: #f5f5f5;
-    min-height: 100vh;
-    box-sizing: border-box;
-
-    .card-container {
-        width: 100%;
-        height: 400rpx;
-        background-color: aquamarine;
-        border-radius: 20rpx;
-    }
-
-    .contact-mode {
-        @include flex(center, null);
-        width: 100%;
-        height: 250rpx;
-        background-color: #fff;
-        border-radius: 20rpx;
-
-        .mode-item {
-            flex: 1;
-            @include flex(center, column, 20rpx);
-
-            text {
-                font-size: 28rpx;
-                color: #000;
-            }
-        }
-    }
-
-    .personal {
-        @extend %paddBox;
-
-        .title {
-            @extend %title;
-            @include flex(space-between, null, 0);
-
-            .edit {
-                @include flex(center, null, 10rpx);
-                color: #3A8FFF;
-
-                text {
-                    font-size: 26rpx;
-                }
-            }
-        }
-    }
-
-    .act {
-        margin-bottom: 150rpx;
-    }
-
-    .footer {
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100rpx;
-        line-height: 100rpx;
-        z-index: 99;
-        @include flex(space-between, null);
-        font-size: 30rpx;
-        text-align: center;
-
-        .preview {
-            width: 250rpx;
-            background-color: #fff;
-            color: rgb(58, 143, 255);
-        }
-
-        .preserve {
-            flex: 1;
-            background-color: #3A8FFF;
-            color: #fff;
-        }
-    }
-}
-
-//  弹框
-.d-container{
-    height: 500rpx;
-    width: 100%;
-    .d-header{
-        height: 100rpx;
-        line-height: 100rpx;
-        text-align: center;
-        font-size: 28rpx;
-        position: relative;
-        .icon{
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: 30rpx;
-        }
-    }
-    .d-body{
-        margin-top: 30rpx;
-        padding-left: 50rpx;
-        padding-right: 30rpx;
-        box-sizing: border-box;
-        // justify-content: 
-        @include flex(space-between);
-    }
-}
-</style>

pages_module/establish/index.vue

@@ -1,135 +1,145 @@
 <template>
   <view class="establish">
     <view class="establish-box">
-        <cardCom :imgSerial="selectIdx" :isEdit="true" :cardData="cardInfo"></cardCom>
-    <view class="business-style"> 
-      <view class="business-title">名片样式</view>
-      <view class="style-list">
-        <view
-          class="style-item"
-          v-for="(item, index) in selectList"
-          :key="item.title"
-          @click="changeIdx(index)"
-        >
-          <view class="style-icon" v-if="index === selectIdx">
-            <image class="" src="@/static/images/success.png" />
+      <cardCom
+        :imgSerial="cardInfo.style"
+        :isEdit="true"
+        :cardData="cardInfo"
+        @changeImg="changeImg"
+      ></cardCom>
+      <view class="business-style">
+        <view class="business-title">名片样式</view>
+        <view class="style-list">
+          <view
+            class="style-item"
+            v-for="(item, index) in selectList"
+            :key="item.title"
+            @click="changeIdx(index)"
+          >
+            <view class="style-icon" v-if="index === cardInfo.style">
+              <image class="" src="@/static/images/success.png" />
+            </view>
+            <image class="" :src="item.img" />
           </view>
-          <image class="" :src="item.img" />
         </view>
       </view>
-    </view>
-    <tui-form ref="form">
-      <view class="basic-info">
-        <view class="info-title">基本信息</view>
-        <view class="tui-form">
-          <!-- <tui-form-item label="头像">
-                        <image class="" src="@/static/header_image.png"
-                            style="width: 80rpx;height: 80rpx; border-radius: 50%;" />
-                    </tui-form-item> -->
-          <tui-form-item label="姓名" :asterisk="true" :labelSize="28">
+      <tui-form ref="form">
+        <view class="basic-info">
+          <view class="info-title">基本信息</view>
+          <view class="tui-form">
+            <tui-form-item label="姓名" :asterisk="true" :labelSize="28">
+              <tui-input
+                v-model="cardInfo.name"
+                padding="0"
+                :borderBottom="false"
+                :size="28"
+                placeholder="请输入姓名"
+              ></tui-input>
+            </tui-form-item>
+            <tui-form-item label="公司" :labelSize="28">
+              <tui-input
+                v-model="cardInfo.company"
+                padding="0"
+                :borderBottom="false"
+                :size="28"
+                placeholder="请输入公司名称"
+              ></tui-input>
+            </tui-form-item>
+            <tui-form-item label="职位" :labelSize="28">
+              <tui-input
+                v-model="cardInfo.positions"
+                padding="0"
+                :borderBottom="false"
+                :size="28"
+                placeholder="请输入担任职位"
+              ></tui-input>
+            </tui-form-item>
+          </view>
+        </view>
+        <view class="contact-mode">
+          <view class="mode-title">联系方式</view>
+          <tui-form-item label="手机" :asterisk="true" :labelSize="28">
             <tui-input
+              v-model="cardInfo.mobile"
               padding="0"
               :borderBottom="false"
               :size="28"
-              placeholder="请输入姓名"
+              placeholder="请输入手机号"
             ></tui-input>
           </tui-form-item>
-          <tui-form-item label="公司" :asterisk="true" :labelSize="28">
+          <tui-form-item label="微信" :labelSize="28">
             <tui-input
+              v-model="cardInfo.wechat"
               padding="0"
               :borderBottom="false"
               :size="28"
-              placeholder="请输入公司名称"
+              placeholder="请输入微信号"
             ></tui-input>
           </tui-form-item>
-          <tui-form-item label="职位" :asterisk="true" :labelSize="28">
+          <tui-form-item label="地址" :labelSize="28">
             <tui-input
+              v-model="cardInfo.address"
               padding="0"
               :borderBottom="false"
               :size="28"
-              placeholder="请输入担任职位"
+              placeholder="请填写地址信息"
             ></tui-input>
           </tui-form-item>
         </view>
-      </view>
-      <view class="contact-mode">
-        <view class="mode-title">联系方式</view>
-        <tui-form-item label="手机" :asterisk="true" :labelSize="28">
-          <tui-input
-            padding="0"
-            :borderBottom="false"
-            :size="28"
-            placeholder="请输入手机号"
-          ></tui-input>
-        </tui-form-item>
-        <tui-form-item label="微信" :labelSize="28">
-          <tui-input
-            padding="0"
-            :borderBottom="false"
+        <view class="personal-brief">
+          <view class="brief-title">个人简介</view>
+          <tui-textarea
+            v-model="cardInfo.personalIntroduction"
+            flexStart
+            placeholder="请输入个人简介"
+            min-height="100rpx"
+            height="150rpx"
             :size="28"
-            placeholder="请输入微信号"
-          ></tui-input>
-        </tui-form-item>
-        <tui-form-item label="地址" :labelSize="28">
-          <tui-input
-            padding="0"
-            :borderBottom="false"
+            :isCounter="true"
+            :maxlength="240"
+          ></tui-textarea>
+        </view>
+        <view class="company-brief">
+          <view class="company-title">公司简介</view>
+          <tui-textarea
+            v-model="cardInfo.companyIntroduction"
+            flexStart
+            placeholder="请填写公司简介"
+            min-height="100rpx"
+            height="105rpx"
             :size="28"
-            placeholder="请填写地址信息"
-          ></tui-input>
-        </tui-form-item>
-      </view>
-      <view class="personal-brief">
-        <view class="brief-title">个人简介</view>
-        <tui-textarea
-          flexStart
-          placeholder="请输入个人简介"
-          min-height="100rpx"
-          height="100rpx"
-          :size="28"
-        ></tui-textarea>
-      </view>
-      <view class="company-brief">
-        <view class="company-title">公司简介</view>
-        <tui-textarea
-          flexStart
-          placeholder="请填写公司简介"
-          min-height="100rpx"
-          height="100rpx"
-          :size="28"
-        ></tui-textarea>
-      </view>
-    </tui-form>
+            :isCounter="true"
+            :maxlength="240"
+          ></tui-textarea>
+        </view>
+      </tui-form>
     </view>
 
     <view class="footer">
       <view class="btn-list">
-        <view>预览名片</view>
-        <view>保存名片</view>
+        <view @click="previewCard">预览名片</view>
+        <view @click="saveCard">保存名片</view>
       </view>
-      <!-- <view class="preview" @click="goCard">预览名片</view>
-            <view class="preserve">保存</view> -->
     </view>
   </view>
 </template>
 
 <script>
 import cardCom from "@/components/cardCom/index.vue";
+import { createCardApi, updateCardApi } from "@/api/index.js";
 export default {
   components: {
     cardCom,
   },
-  onLoad() {
-    // uni.getSystemInfo({
-    //     success: (res) => {
-    //         this.bottom = res.safeAreaInsets.bottom
-    //     }
-    // })
+  onLoad(option) {
+    //   根据 id 获取详情
+    if (option.id || option.id == 0) {
+      this.isEdit = true;
+      this.cardInfo = this.$cache.getCache("cardInfo");
+    }
   },
   data() {
     return {
-      // bottom: null,
-      selectIdx: 0,
       selectList: [
         {
           title: "one",
@@ -146,27 +156,98 @@ export default {
       ],
       //  名片信息
       cardInfo: {
-        name: "", // 名字
-        phone: "", // 电话
-        weChatSignal: "", // 微信号
-        enterpriseName: "", // 企业名称
-        enterpriseDuties: "", // 担任职务
-        headImage: "", // 头像
+        name: "", //名字
+        positions: "", //职位
+        company: "", //公司名称
+        head: "", //头像
+        mobile: "", // 手机号码
+        wechat: "", // 微信号
         address: "", // 地址
-        styleId: "", // 选择样式
-        personalProfile: "", // 个人简介
+        personalIntroduction: "", // 个人简介
+        companyIntroduction: "", // 公司简介
+        style: 0, //样式
       },
+      //  判断是不是编辑
+      isEdit: false,
     };
   },
   methods: {
-    goCard() {
+    //  预览名片
+    previewCard(url) {
+      //  存储数据到本地
+      this.$cache.setCache("cardInfo", this.cardInfo);
+      //  跳转预览页面
       uni.navigateTo({
-        url: "/pages/previewCard/index",
+        url: "/pages_module/previewCard/index",
       });
     },
     changeIdx(idx) {
-      this.selectIdx = idx;
+      this.cardInfo.style = idx;
     },
+    changeImg() {
+      // 选择图片文件
+      uni.chooseMedia({
+        count: 1,
+        mediaType: ["image"],
+        sourceType: ["album", "camera"],
+        sizeType: ["original", "compressed"],
+        success: (res) => {
+          this.getImage(res.tempFiles[0].tempFilePath);
+        },
+      });
+    },
+    async getImage(file) {
+      //  加载状态
+      this.$loading.show("上传中...");
+      uni.uploadFile({
+        url: `https://test.zhult.com/laoa-huozhu/api/hz/business-card/third/upload`, //仅为示例，非真实的接口地址
+        filePath: file,
+        header: {
+          "Content-Type": "application/json; charset=UTF-8",
+          "Auth-Token": uni.getStorageSync("token"),
+        },
+        name: "file",
+        formData: {
+          user: "head",
+        },
+        success: (uploadFileRes) => {
+          this.cardInfo.head = JSON.parse(uploadFileRes.data).data;
+        },
+        complete: () => {
+          this.$loading.hide();
+        },
+      });
+    },
+    //  保存名片
+    async saveCard() {
+      if (this.cardInfo.name === "") {
+        this.$showToast("请输入姓名");
+        return;
+      }
+      //  判断是不是电话号码 电话号码的话就用正则判断
+      const phoneRule = /^1[3-9]\d{9}$/;
+      if (!phoneRule.test(this.cardInfo.mobile)) {
+        this.$showToast("请输入正确的手机号码");
+        return;
+      }
+      let res = this.isEdit
+        ? await updateCardApi(this.cardInfo)
+        : await createCardApi(this.cardInfo);
+      if (res.statusCode === 20000) {
+        this.$showToast(this.isEdit ? "更新成功..." : "创建成功...",'success');
+        setTimeout(() => {
+          //  跳转我的卡片页面
+          uni.reLaunch({
+            url: `/pages_module/myCard/index?id=${res.data}`,
+          });
+        }, 1200);
+      }
+    },
+  },
+  //  页面卸载
+  onUnload() {
+    //  删除本地存储
+    this.$cache.removeCache("cardInfo");
   },
 };
 </script>

pages_module/myCard/index.scss

@@ -0,0 +1,148 @@
+.previewCard {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f1f1f1;
+  .detail-top {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 999;
+    @include flex(flex-start, null);
+    position: relative;
+    .back-box{
+      width: 100rpx;
+      position: relative;
+      z-index: 2;
+    }
+    .top-text {
+      width: 100%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 0;
+      text-align: center;
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #000;
+    }
+  }
+  .seat {
+    width: 100%;
+    height: 16rpx;
+  }
+  .box-bg {
+    width: 100%;
+    height: 393rpx;
+    // background: linear-gradient(233deg, #8CCBFF 24%, #CDE9FF 71%);
+    // background: ;
+    background-image: linear-gradient(
+      to bottom,
+      #8ccbff 0%,
+      #cde9ff 71%,
+      #f1f1f1 100%
+    );
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+  .card-box {
+    padding-top: 52rpx;
+    box-sizing: border-box;
+    @include flex(center, column, null);
+    position: relative;
+    .card-bg {
+      position: absolute;
+      top: 16rpx;
+      left: 50%;
+      transform: translateX(-50%);
+      image {
+        width: 705rpx;
+      }
+    }
+    .seat-list {
+      height: 120rpx;
+      width: 690rpx;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -112rpx;
+      border-radius: 0 0 16rpx 16rpx;
+      background-color: #ffffff;
+      @include flex(center, null, null);
+      .seat-item {
+        flex: 1;
+        color: #2566ee;
+        font-size: 26rpx;
+        @include flex(center, null, 8rpx);
+        image {
+          width: 32rpx;
+          height: 32rpx;
+        }
+        &:last-of-type {
+          color: #ee2525;
+        }
+      }
+    }
+  }
+  .btn-box{
+    margin-top: 136rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+    button{
+      width: 100%;
+      height: 98rpx;
+      background: linear-gradient(98deg, #0E83FF 0%, #0E3EFF 100%);
+      color: #FFFFFF;
+      font-size: 28rpx;
+      text-align: center;
+      line-height: 98rpx;
+      border-radius: 16rpx;
+    }
+  }
+  .card-data{
+    margin-top: 40rpx;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    .card-container{
+      width: 100%;
+      height: 266rpx;
+      padding: 0 32rpx;
+      box-sizing: border-box;
+      background-color: #FFFFFF;
+      border-radius: 16rpx;
+      .data-top{
+        width: 100%;
+        height: 90rpx;
+        padding:  08rpx;
+        box-sizing: border-box;
+        @include flex(space-between);
+        border-bottom: 2rpx solid #D8E0F1;
+        text{
+          color: rgba(0, 0, 0, 0.9);
+          font-weight: 500;
+          font-size: 28rpx;
+        }
+      }
+      .data-bottom{
+        width: 100%;
+        height: 176rpx;
+        @include flex(center,null,null);
+        .bottom-item{
+          flex: 1;
+          @include flex(center,column,16rpx);
+          text{
+            &:nth-of-type(1){
+              font-size: 40rpx;
+              color: #2566EE;
+              font-weight: 500;
+            }
+            &:nth-of-type(2){
+              color: rgba(0, 0, 0, 0.6);
+              font-size: 24rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+}

pages_module/myCard/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <view class="previewCard">
+    <capsule :showBorder="true" bgColor="transparent">
+      <template v-slot:top>
+        <view class="detail-top">
+          <view class="back-box" @click="goBack">
+            <tui-icon name="arrowleft" color="#000" :size="28"></tui-icon>
+          </view>
+          <view class="top-text">我的名片</view>
+        </view>
+      </template>
+    </capsule>
+    <view class="seat"></view>
+    <view class="box-bg"></view>
+    <view class="card-box">
+      <CardCom :cardData="cardInfo" :imgSerial="cardInfo.style"></CardCom>
+      <view class="seat-list">
+        <view class="seat-item" @click="previewCard">
+          <image class="" src="@/static/images/my_icon1.png" />
+          <text>预览</text>
+        </view>
+        <view class="seat-item" @click="editCard">
+          <image class="" src="@/static/images/my_icon2.png" />
+          <text>编辑</text>
+        </view>
+        <view class="seat-item" @click="deleteCard">
+          <image class="" src="@/static/images/my_icon3.png" />
+          <text>删除</text>
+        </view>
+      </view>
+      <view class="card-bg">
+        <image class="" src="@/static/images/card-bg.png" />
+      </view>
+    </view>
+    <view class="btn-box">
+      <button open-type="share">发名片</button>
+    </view>
+    <view class="card-data">
+      <view class="card-container">
+        <view class="data-top">
+          <text>名片数据</text>
+          <tui-icon
+            name="arrowright"
+            :size="22"
+            color="rgba(0, 0, 0, 0.9)"
+          ></tui-icon>
+        </view>
+        <view class="data-bottom">
+          <view class="bottom-item">
+            <text>12</text>
+            <text>今日访客</text>
+          </view>
+          <view class="bottom-item">
+            <text>100</text>
+            <text>总访客</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import cardCom from "@/components/cardCom/index.vue";
+import { getCardDetailApi, deleteCardApi } from "@/api/index.js";
+export default {
+  components: {
+    cardCom,
+  },
+  onLoad(option) {
+    this.id = option.id;
+    this.getCardDetail();
+  },
+  data() {
+    return {
+      id: null,
+      cardInfo: {},
+    };
+  },
+  methods: {
+    //  根据 id 获取详情
+    async getCardDetail() {
+      let { data } = await getCardDetailApi({ id: this.id });
+      this.cardInfo = data;
+    },
+    //  预览名片
+    previewCard() {
+      //  存储数据到本地
+      this.$cache.setCache("cardInfo", this.cardInfo);
+      //  跳转预览页面
+      uni.navigateTo({
+        url: "/pages_module/previewCard/index",
+      });
+    },
+    //  编辑名片
+    editCard() {
+      //  存储数据到本地
+      this.$cache.setCache("cardInfo", this.cardInfo);
+      // 跳转编辑页面
+      uni.navigateTo({
+        url: `/pages_module/establish/index?id=${this.cardInfo.id}`,
+      });
+    },
+    //  删除名片
+    deleteCard() {
+      // #ifdef MP-WEIXIN
+      wx.showModal({
+        title: "提示",
+        content: "是否删除当前名片",
+        success: async (res) => {
+          if (res.confirm) {
+            let res = await deleteCardApi({ id: this.cardInfo.id });
+            if (res.statusCode == 20000) {
+              this.$showToast("删除成功...", "success");
+              setTimeout(() => {
+                //  跳转首页
+                uni.reLaunch({
+                  url: "/pages/index/index",
+                });
+              }, 1200);
+            }
+          }
+        },
+      });
+      // #endif
+    },
+    //  返回
+    goBack() {
+      uni.navigateBack({
+        delta: 1,
+        fail: () => {
+          uni.reLaunch({
+            url: "/pages/index/index",
+          });
+        },
+      });
+    },
+  },
+  onShareAppMessage(){
+    return {
+      title:"团蜂小名片",
+			path: `/pages_module/previewCard/index?id=${this.cardInfo.id}`
+		}
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

pages_module/previewCard/index.scss

@@ -0,0 +1,144 @@
+.previewCard {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f1f1f1;
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f1f1f1;
+  .detail-top {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 999;
+    @include flex(flex-start, null);
+    position: relative;
+    .back-box{
+      width: 100rpx;
+      position: relative;
+      z-index: 2;
+    }
+    .top-text {
+      width: 100%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 0;
+      text-align: center;
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #000;
+    }
+  }
+  .seat {
+    width: 100%;
+    height: 16rpx;
+  }
+  .box-bg {
+    width: 100%;
+    height: 393rpx;
+    // background: linear-gradient(233deg, #8CCBFF 24%, #CDE9FF 71%);
+    // background: ;
+    background-image: linear-gradient(
+      to bottom,
+      #8ccbff 0%,
+      #cde9ff 71%,
+      #f1f1f1 100%
+    );
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+  .card-box {
+    padding-top: 52rpx;
+    box-sizing: border-box;
+    @include flex(center, column, null);
+    position: relative;
+    .card-bg {
+      position: absolute;
+      top: 16rpx;
+      left: 50%;
+      transform: translateX(-50%);
+      image {
+        width: 705rpx;
+      }
+    }
+    .seat-list {
+      height: 120rpx;
+      width: 690rpx;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -112rpx;
+      border-radius: 0 0 16rpx 16rpx;
+      background-color: #ffffff;
+      @include flex(center, null, null);
+      .seat-item {
+        flex: 1;
+        color: #2566ee;
+        font-size: 26rpx;
+        @include flex(center, null, 8rpx);
+        image {
+          width: 32rpx;
+          height: 32rpx;
+        }
+      }
+    }
+  }
+  .brief {
+    width: 100%;
+    margin-top: 136rpx;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    .brief-item {
+      padding: 24rpx 32rpx 32rpx 32rpx;
+      box-sizing: border-box;
+      border-radius: 16rpx;
+      background-color: #ffffff;
+      margin-top: 24rpx;
+      .item-title {
+        width: 100%;
+        border-bottom: 1rpx solid #d8e0f1;
+        font-size: 28rpx;
+        color: rgba(0, 0, 0, 0.9);
+        padding-bottom: 24rpx;
+      }
+      .item-container {
+        padding-top: 24rpx;
+        font-size: 24rpx;
+        color: #606e84;
+        line-height: 36rpx;
+      }
+    }
+  }
+  .footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 2;
+    width: 100vw;
+    margin-top: 24rpx;
+    padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
+    padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
+    background-color: #ffffff;
+    .btn-list {
+      width: 100%;
+      height: 112rpx;
+      padding: 0 30rpx;
+      box-sizing: border-box;
+      @include flex(space-between, null, null);
+      button {
+        width: 690rpx;
+        height: 88rpx;
+        border-radius: 16rpx;
+        font-size: 28rpx;
+        text-align: center;
+        line-height: 88rpx;
+        &:nth-of-type(1) {
+          color: #1472ff;
+          border: 2rpx solid #1472ff;
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+}

pages_module/previewCard/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <view class="previewCard">
+    <capsule :showBorder="true" bgColor="transparent">
+      <template v-slot:top>
+        <view class="detail-top">
+          <view class="back-box" @click="goBack">
+            <tui-icon name="arrowleft" color="#000" :size="28"></tui-icon>
+          </view>
+          <view class="top-text">预览名片</view>
+        </view>
+      </template>
+    </capsule>
+    <view class="seat"></view>
+    <view class="box-bg"></view>
+    <view class="card-box">
+      <cardCom :cardData="cardInfo" :imgSerial="cardInfo.style"></cardCom>
+      <view class="seat-list">
+        <view class="seat-item" @click="callMobile">
+          <image class="" src="@/static/images/preview_icon1.png" />
+          <text>电话</text>
+        </view>
+        <view class="seat-item" @click="copyText('wechat')">
+          <image class="" src="@/static/images/preview_icon2.png" />
+          <text>微信</text>
+        </view>
+        <view class="seat-item" @click="copyText('address')">
+          <image class="" src="@/static/images/preview_icon3.png" />
+          <text>地址</text>
+        </view>
+      </view>
+      <view class="card-bg">
+        <image class="" src="@/static/images/card-bg.png" />
+      </view>
+    </view>
+    <view class="brief">
+      <view class="brief-item">
+        <view class="item-title">个人简介</view>
+        <view class="item-container">{{
+          cardInfo.personalIntroduction || "--"
+        }}</view>
+      </view>
+      <view class="brief-item">
+        <view class="item-title">公司简介</view>
+        <view class="item-container">{{ cardInfo.companyIntroduction }}</view>
+      </view>
+    </view>
+    <view class="footer">
+      <view class="btn-list" v-if="id == ''">
+        <button @click="goBack">返回</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import cardCom from "@/components/cardCom/index.vue";
+import { getCardDetailApi } from "@/api/index.js";
+export default {
+  components: {
+    cardCom,
+  },
+  onLoad(option) {
+    if (!option.id) {
+      // 拿到本地存储的数据
+      this.cardInfo = this.$cache.getCache("cardInfo");
+    } else {
+      this.id = option.id;
+      //  请求名片数据
+      this.getCardDetail();
+    }
+  },
+  data() {
+    return {
+      id: "",
+      cardInfo: {},
+    };
+  },
+  methods: {
+    //  根据 id 获取详情
+    async getCardDetail() {
+      let { data } = await getCardDetailApi({ id: this.id });
+      this.cardInfo = data;
+    },
+    //  打电话
+    callMobile() {
+      uni.makePhoneCall({
+        phoneNumber: this.cardInfo.mobile,
+      });
+    },
+    //  复制内容
+    copyText(txt) {
+      console.log("进来了1111");
+      uni.setClipboardData({
+        data: this.cardInfo[txt] || '',
+        success: () => {
+          this.$showToast("复制成功");
+        },
+        fail:(err)=>{
+          console.log(err);
+        }
+      });
+    },
+    goBack() {
+      uni.navigateBack({
+        delta: 1,
+        fail: () => {
+          if (this.id != "") {
+            uni.reLaunch({
+              url: "/pages/index/index",
+            });
+          }
+        },
+      });
+    },
+  },
+  //  页面卸载
+  onUnload() {
+    //  删除本地存储
+    this.$cache.removeCache("cardInfo");
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

unpackage/dist/dev/.sourcemap/mp-weixin/pages/establish/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":"+IAAA,MAGA,aACA,6HAFAA,EAAGC,kCAAoCC,EAGvCC,EAAWC,a","file":"pages/establish/index.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages/establish/index.vue'\ncreatePage(Page)"],"sourceRoot":""}

unpackage/dist/dev/.sourcemap/mp-weixin/pages_module/pages/establish/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":"6JAAA,MAGA,aACA,0IAFAA,EAAGC,kCAAoCC,EAGvCC,EAAWC,a","file":"pages_module/pages/establish/index.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages_module/pages/establish/index.vue'\ncreatePage(Page)"],"sourceRoot":""}

unpackage/dist/dev/.sourcemap/mp-weixin/pages_module/pages/myCard/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":"0JAAA,MAGA,aACA,uIAFAA,EAAGC,kCAAoCC,EAGvCC,EAAWC,a","file":"pages_module/pages/myCard/index.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages_module/pages/myCard/index.vue'\ncreatePage(Page)"],"sourceRoot":""}

unpackage/dist/dev/.sourcemap/mp-weixin/pages_module/pages_module/establish/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":"mKAAA,MAGA,aACA,iJAFAA,EAAGC,kCAAoCC,EAGvCC,EAAWC,a","file":"pages_module/pages_module/establish/index.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages_module/pages_module/establish/index.vue'\ncreatePage(Page)"],"sourceRoot":""}

unpackage/dist/dev/mp-weixin/app.json

@@ -1,13 +1,14 @@
 {
   "pages": [
-    "pages/index/index",
-    "pages/previewCard/index"
+    "pages/index/index"
   ],
   "subPackages": [
     {
       "root": "pages_module",
       "pages": [
-        "establish/index"
+        "establish/index",
+        "previewCard/index",
+        "myCard/index"
       ],
       "name": "pages_module"
     }

unpackage/dist/dev/mp-weixin/common/main.wxss

@@ -14,4 +14,7 @@
 
 
 /*每个页面公共css */
+ .index .tui-modal-btn {
+  background: linear-gradient(98deg, #0E83FF 0%, #0E3EFF 100%) !important;
+}
 

unpackage/dist/dev/mp-weixin/components/cardCom/index.js

@@ -1,10 +1,10 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["components/cardCom/index"],{115:function(n,e,t){"use strict";t.r(e);var r=t(116),u=t(118);for(var o in u)["default"].indexOf(o)<0&&function(n){t.d(e,n,(function(){return u[n]}))}(o);t(123);var c,i=t(32),a=Object(i["default"])(u["default"],r["render"],r["staticRenderFns"],!1,null,"40e6932e",null,!1,r["components"],c);a.options.__file="components/cardCom/index.vue",e["default"]=a.exports},116:function(n,e,t){"use strict";t.r(e);var r=t(117);t.d(e,"render",(function(){return r["render"]})),t.d(e,"staticRenderFns",(function(){return r["staticRenderFns"]})),t.d(e,"recyclableRender",(function(){return r["recyclableRender"]})),t.d(e,"components",(function(){return r["components"]}))},117:function(n,e,t){"use strict";var r;t.r(e),t.d(e,"render",(function(){return u})),t.d(e,"staticRenderFns",(function(){return c})),t.d(e,"recyclableRender",(function(){return o})),t.d(e,"components",(function(){return r}));var u=function(){var n=this,e=n.$createElement;n._self._c},o=!1,c=[];u._withStripped=!0},118:function(n,e,t){"use strict";t.r(e);var r=t(119),u=t.n(r);for(var o in r)["default"].indexOf(o)<0&&function(n){t.d(e,n,(function(){return r[n]}))}(o);e["default"]=u.a},119:function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var r={props:{imgSerial:{typeof:Number,default:0},isEdit:{typeof:Boolean,default:!1},cardData:{typeof:Object,default:function(){return{}}}},data:function(){return{bgList:[t(120),t(121),t(122)]}}};e.default=r},123:function(n,e,t){"use strict";t.r(e);var r=t(124),u=t.n(r);for(var o in r)["default"].indexOf(o)<0&&function(n){t.d(e,n,(function(){return r[n]}))}(o);e["default"]=u.a},124:function(n,e,t){}}]);
+(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["components/cardCom/index"],{118:function(n,e,t){"use strict";t.r(e);var r=t(119),u=t(121);for(var i in u)["default"].indexOf(i)<0&&function(n){t.d(e,n,(function(){return u[n]}))}(i);t(126);var c,o=t(32),a=Object(o["default"])(u["default"],r["render"],r["staticRenderFns"],!1,null,"40e6932e",null,!1,r["components"],c);a.options.__file="components/cardCom/index.vue",e["default"]=a.exports},119:function(n,e,t){"use strict";t.r(e);var r=t(120);t.d(e,"render",(function(){return r["render"]})),t.d(e,"staticRenderFns",(function(){return r["staticRenderFns"]})),t.d(e,"recyclableRender",(function(){return r["recyclableRender"]})),t.d(e,"components",(function(){return r["components"]}))},120:function(n,e,t){"use strict";var r;t.r(e),t.d(e,"render",(function(){return u})),t.d(e,"staticRenderFns",(function(){return c})),t.d(e,"recyclableRender",(function(){return i})),t.d(e,"components",(function(){return r}));var u=function(){var n=this,e=n.$createElement;n._self._c},i=!1,c=[];u._withStripped=!0},121:function(n,e,t){"use strict";t.r(e);var r=t(122),u=t.n(r);for(var i in r)["default"].indexOf(i)<0&&function(n){t.d(e,n,(function(){return r[n]}))}(i);e["default"]=u.a},122:function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var r={props:{imgSerial:{typeof:Number,default:0},isEdit:{typeof:Boolean,default:!1},cardData:{typeof:Object,default:{}}},data:function(){return{bgList:[t(123),t(124),t(125)]}},methods:{changeImg:function(){this.isEdit&&this.$emit("changeImg")}}};e.default=r},126:function(n,e,t){"use strict";t.r(e);var r=t(127),u=t.n(r);for(var i in r)["default"].indexOf(i)<0&&function(n){t.d(e,n,(function(){return r[n]}))}(i);e["default"]=u.a},127:function(n,e,t){}}]);
 //# sourceMappingURL=../../../.sourcemap/mp-weixin/components/cardCom/index.js.map
 ;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
     'components/cardCom/index-create-component',
     {
         'components/cardCom/index-create-component':(function(module, exports, __webpack_require__){
-            __webpack_require__('2')['createComponent'](__webpack_require__(115))
+            __webpack_require__('2')['createComponent'](__webpack_require__(118))
         })
     },
     [['components/cardCom/index-create-component']]

unpackage/dist/dev/mp-weixin/components/cardCom/index.wxml

@@ -1 +1 @@
-<view class="cardCom data-v-40e6932e"><view class="card-bg data-v-40e6932e"><image src="{{bgList[imgSerial]}}" class="data-v-40e6932e"></image></view><view class="card-container data-v-40e6932e"><view class="card-header data-v-40e6932e"><view class="header-left data-v-40e6932e"><view class="header-title data-v-40e6932e"><text class="data-v-40e6932e">{{cardData.name||''}}</text><text class="data-v-40e6932e">{{cardData.enterpriseDuties||''}}</text></view><view class="company data-v-40e6932e">{{cardData.enterpriseName||''}}</view></view><view class="header-right data-v-40e6932e"><block wx:if="{{isEdit}}"><view class="edit data-v-40e6932e">编辑</view></block><view class="img-box data-v-40e6932e"><block wx:if="{{cardData.headImage}}"><image src="{{cardData.headImage}}" class="data-v-40e6932e"></image></block><block wx:else><image src="/static/images/default_avatar.png" class="data-v-40e6932e"></image></block></view></view></view><view class="card-content data-v-40e6932e"><block wx:if="{{cardData.phone}}"><view class="content-item data-v-40e6932e"><image src="/static/images/icon_1.png" class="data-v-40e6932e"></image><text class="data-v-40e6932e">{{cardData.phone}}</text></view></block><block wx:if="{{cardData.weChatSignal}}"><view class="content-item data-v-40e6932e"><image src="/static/images/icon_2.png" class="data-v-40e6932e"></image><text class="data-v-40e6932e">{{cardData.weChatSignal}}</text></view></block><block wx:if="{{cardData.address}}"><view class="content-item data-v-40e6932e"><image src="/static/images/icon_3.png" class="data-v-40e6932e"></image><text class="data-v-40e6932e">{{cardData.address}}</text></view></block></view></view></view>
+<view class="cardCom data-v-40e6932e"><view class="card-bg data-v-40e6932e"><image src="{{bgList[imgSerial]}}" class="data-v-40e6932e"></image></view><view class="card-container data-v-40e6932e"><view class="card-header data-v-40e6932e"><view class="header-left data-v-40e6932e"><view class="header-title data-v-40e6932e"><text class="data-v-40e6932e">{{cardData.name||''}}</text><text class="data-v-40e6932e">{{cardData.positions}}</text></view><view class="company data-v-40e6932e">{{cardData.company||''}}</view></view><view data-event-opts="{{[['tap',[['changeImg',['$event']]]]]}}" class="header-right data-v-40e6932e" bindtap="__e"><block wx:if="{{isEdit}}"><view class="edit data-v-40e6932e">编辑</view></block><view class="img-box data-v-40e6932e"><block wx:if="{{cardData.head}}"><image src="{{cardData.head}}" class="data-v-40e6932e"></image></block><block wx:else><image src="/static/images/default_avatar.png" class="data-v-40e6932e"></image></block></view></view></view><view class="card-content data-v-40e6932e"><block wx:if="{{cardData.mobile}}"><view class="content-item data-v-40e6932e"><image src="/static/images/icon_1.png" class="data-v-40e6932e"></image><text class="data-v-40e6932e">{{cardData.mobile}}</text></view></block><block wx:if="{{cardData.wechat}}"><view class="content-item data-v-40e6932e"><image src="/static/images/icon_2.png" class="data-v-40e6932e"></image><text class="data-v-40e6932e">{{cardData.wechat}}</text></view></block><block wx:if="{{cardData.address}}"><view class="content-item data-v-40e6932e"><image src="/static/images/icon_3.png" class="data-v-40e6932e"></image><text class="data-v-40e6932e">{{cardData.address}}</text></view></block></view></view></view>

unpackage/dist/dev/mp-weixin/components/cardCom/index.wxss

@@ -142,5 +142,8 @@
 .cardCom .card-container .card-content .content-item text.data-v-40e6932e {
   font-size: 24rpx;
   color: #ffffff;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 

unpackage/dist/dev/mp-weixin/components/thorui/tui-drawer/tui-drawer.js

@@ -1,10 +1,10 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["components/thorui/tui-drawer/tui-drawer"],{70:function(e,n,t){"use strict";t.r(n);var r=t(71),u=t(73);for(var o in u)["default"].indexOf(o)<0&&function(e){t.d(n,e,(function(){return u[e]}))}(o);t(75);var i,a=t(32),c=Object(a["default"])(u["default"],r["render"],r["staticRenderFns"],!1,null,"120ca7f4",null,!1,r["components"],i);c.options.__file="components/thorui/tui-drawer/tui-drawer.vue",n["default"]=c.exports},71:function(e,n,t){"use strict";t.r(n);var r=t(72);t.d(n,"render",(function(){return r["render"]})),t.d(n,"staticRenderFns",(function(){return r["staticRenderFns"]})),t.d(n,"recyclableRender",(function(){return r["recyclableRender"]})),t.d(n,"components",(function(){return r["components"]}))},72:function(e,n,t){"use strict";var r;t.r(n),t.d(n,"render",(function(){return u})),t.d(n,"staticRenderFns",(function(){return i})),t.d(n,"recyclableRender",(function(){return o})),t.d(n,"components",(function(){return r}));var u=function(){var e=this,n=e.$createElement;e._self._c},o=!1,i=[];u._withStripped=!0},73:function(e,n,t){"use strict";t.r(n);var r=t(74),u=t.n(r);for(var o in r)["default"].indexOf(o)<0&&function(e){t.d(n,e,(function(){return r[e]}))}(o);n["default"]=u.a},74:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r={name:"tuiDrawer",emits:["close"],props:{visible:{type:Boolean,default:!1},mask:{type:Boolean,default:!0},maskClosable:{type:Boolean,default:!0},mode:{type:String,default:"right"},zIndex:{type:[Number,String],default:990},maskZIndex:{type:[Number,String],default:980},backgroundColor:{type:String,default:"#fff"}},methods:{handleMaskClick:function(){this.maskClosable&&this.$emit("close",{})}}};n.default=r},75:function(e,n,t){"use strict";t.r(n);var r=t(76),u=t.n(r);for(var o in r)["default"].indexOf(o)<0&&function(e){t.d(n,e,(function(){return r[e]}))}(o);n["default"]=u.a},76:function(e,n,t){}}]);
+(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["components/thorui/tui-drawer/tui-drawer"],{104:function(e,n,t){"use strict";t.r(n);var r=t(105),u=t(107);for(var o in u)["default"].indexOf(o)<0&&function(e){t.d(n,e,(function(){return u[e]}))}(o);t(109);var i,a=t(32),c=Object(a["default"])(u["default"],r["render"],r["staticRenderFns"],!1,null,"120ca7f4",null,!1,r["components"],i);c.options.__file="components/thorui/tui-drawer/tui-drawer.vue",n["default"]=c.exports},105:function(e,n,t){"use strict";t.r(n);var r=t(106);t.d(n,"render",(function(){return r["render"]})),t.d(n,"staticRenderFns",(function(){return r["staticRenderFns"]})),t.d(n,"recyclableRender",(function(){return r["recyclableRender"]})),t.d(n,"components",(function(){return r["components"]}))},106:function(e,n,t){"use strict";var r;t.r(n),t.d(n,"render",(function(){return u})),t.d(n,"staticRenderFns",(function(){return i})),t.d(n,"recyclableRender",(function(){return o})),t.d(n,"components",(function(){return r}));var u=function(){var e=this,n=e.$createElement;e._self._c},o=!1,i=[];u._withStripped=!0},107:function(e,n,t){"use strict";t.r(n);var r=t(108),u=t.n(r);for(var o in r)["default"].indexOf(o)<0&&function(e){t.d(n,e,(function(){return r[e]}))}(o);n["default"]=u.a},108:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r={name:"tuiDrawer",emits:["close"],props:{visible:{type:Boolean,default:!1},mask:{type:Boolean,default:!0},maskClosable:{type:Boolean,default:!0},mode:{type:String,default:"right"},zIndex:{type:[Number,String],default:990},maskZIndex:{type:[Number,String],default:980},backgroundColor:{type:String,default:"#fff"}},methods:{handleMaskClick:function(){this.maskClosable&&this.$emit("close",{})}}};n.default=r},109:function(e,n,t){"use strict";t.r(n);var r=t(110),u=t.n(r);for(var o in r)["default"].indexOf(o)<0&&function(e){t.d(n,e,(function(){return r[e]}))}(o);n["default"]=u.a},110:function(e,n,t){}}]);
 //# sourceMappingURL=../../../../.sourcemap/mp-weixin/components/thorui/tui-drawer/tui-drawer.js.map
 ;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
     'components/thorui/tui-drawer/tui-drawer-create-component',
     {
         'components/thorui/tui-drawer/tui-drawer-create-component':(function(module, exports, __webpack_require__){
-            __webpack_require__('2')['createComponent'](__webpack_require__(70))
+            __webpack_require__('2')['createComponent'](__webpack_require__(104))
         })
     },
     [['components/thorui/tui-drawer/tui-drawer-create-component']]

unpackage/dist/dev/mp-weixin/components/thorui/tui-icon/tui-icon.js

@@ -1,10 +1,10 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["components/thorui/tui-icon/tui-icon"],{77:function(n,t,e){"use strict";e.r(t);var r=e(78),i=e(80);for(var u in i)["default"].indexOf(u)<0&&function(n){e.d(t,n,(function(){return i[n]}))}(u);e(83);var c,o=e(32),d=Object(o["default"])(i["default"],r["render"],r["staticRenderFns"],!1,null,"3225e6c6",null,!1,r["components"],c);d.options.__file="components/thorui/tui-icon/tui-icon.vue",t["default"]=d.exports},78:function(n,t,e){"use strict";e.r(t);var r=e(79);e.d(t,"render",(function(){return r["render"]})),e.d(t,"staticRenderFns",(function(){return r["staticRenderFns"]})),e.d(t,"recyclableRender",(function(){return r["recyclableRender"]})),e.d(t,"components",(function(){return r["components"]}))},79:function(n,t,e){"use strict";var r;e.r(t),e.d(t,"render",(function(){return i})),e.d(t,"staticRenderFns",(function(){return c})),e.d(t,"recyclableRender",(function(){return u})),e.d(t,"components",(function(){return r}));var i=function(){var n=this,t=n.$createElement;n._self._c},u=!1,c=[];i._withStripped=!0},80:function(n,t,e){"use strict";e.r(t);var r=e(81),i=e.n(r);for(var u in r)["default"].indexOf(u)<0&&function(n){e.d(t,n,(function(){return r[n]}))}(u);t["default"]=i.a},81:function(n,t,e){"use strict";var r=e(4);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=r(e(82)),u={name:"tuiIcon",emits:["click"],props:{name:{type:String,default:""},size:{type:[Number,String],default:32},unit:{type:String,default:"px"},color:{type:String,default:"#999"},bold:{type:Boolean,default:!1},margin:{type:String,default:"0"},index:{type:Number,default:0}},data:function(){return{icons:i.default}},methods:{handleClick:function(){this.$emit("click",{index:this.index})}}};t.default=u},83:function(n,t,e){"use strict";e.r(t);var r=e(84),i=e.n(r);for(var u in r)["default"].indexOf(u)<0&&function(n){e.d(t,n,(function(){return r[n]}))}(u);t["default"]=i.a},84:function(n,t,e){}}]);
+(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["components/thorui/tui-icon/tui-icon"],{158:function(n,t,e){"use strict";e.r(t);var r=e(159),i=e(161);for(var u in i)["default"].indexOf(u)<0&&function(n){e.d(t,n,(function(){return i[n]}))}(u);e(164);var c,o=e(32),d=Object(o["default"])(i["default"],r["render"],r["staticRenderFns"],!1,null,"3225e6c6",null,!1,r["components"],c);d.options.__file="components/thorui/tui-icon/tui-icon.vue",t["default"]=d.exports},159:function(n,t,e){"use strict";e.r(t);var r=e(160);e.d(t,"render",(function(){return r["render"]})),e.d(t,"staticRenderFns",(function(){return r["staticRenderFns"]})),e.d(t,"recyclableRender",(function(){return r["recyclableRender"]})),e.d(t,"components",(function(){return r["components"]}))},160:function(n,t,e){"use strict";var r;e.r(t),e.d(t,"render",(function(){return i})),e.d(t,"staticRenderFns",(function(){return c})),e.d(t,"recyclableRender",(function(){return u})),e.d(t,"components",(function(){return r}));var i=function(){var n=this,t=n.$createElement;n._self._c},u=!1,c=[];i._withStripped=!0},161:function(n,t,e){"use strict";e.r(t);var r=e(162),i=e.n(r);for(var u in r)["default"].indexOf(u)<0&&function(n){e.d(t,n,(function(){return r[n]}))}(u);t["default"]=i.a},162:function(n,t,e){"use strict";var r=e(4);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=r(e(163)),u={name:"tuiIcon",emits:["click"],props:{name:{type:String,default:""},size:{type:[Number,String],default:32},unit:{type:String,default:"px"},color:{type:String,default:"#999"},bold:{type:Boolean,default:!1},margin:{type:String,default:"0"},index:{type:Number,default:0}},data:function(){return{icons:i.default}},methods:{handleClick:function(){this.$emit("click",{index:this.index})}}};t.default=u},164:function(n,t,e){"use strict";e.r(t);var r=e(165),i=e.n(r);for(var u in r)["default"].indexOf(u)<0&&function(n){e.d(t,n,(function(){return r[n]}))}(u);t["default"]=i.a},165:function(n,t,e){}}]);
 //# sourceMappingURL=../../../../.sourcemap/mp-weixin/components/thorui/tui-icon/tui-icon.js.map
 ;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
     'components/thorui/tui-icon/tui-icon-create-component',
     {
         'components/thorui/tui-icon/tui-icon-create-component':(function(module, exports, __webpack_require__){
-            __webpack_require__('2')['createComponent'](__webpack_require__(77))
+            __webpack_require__('2')['createComponent'](__webpack_require__(158))
         })
     },
     [['components/thorui/tui-icon/tui-icon-create-component']]

unpackage/dist/dev/mp-weixin/components/thorui/tui-input/tui-input.json

@@ -1,4 +1,4 @@
 {
-  "usingComponents": {},
-  "component": true
+  "component": true,
+  "usingComponents": {}
 }

unpackage/dist/dev/mp-weixin/components/thorui/tui-input/tui-input.wxss

@@ -6,12 +6,15 @@
 	display: flex;
 
 	flex-direction: row;
-	flex: 1;
 	align-items: center;
 	position: relative;
+	flex: 1;
+
+
+
+	border-width: 0;
 }
-.tui-input__wrap.data-v-e795a7dc::before {
-	content: ' ';
+.tui-input__border-top.data-v-e795a7dc {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -24,8 +27,7 @@
 	z-index: 2;
 	pointer-events: none;
 }
-.tui-input__wrap.data-v-e795a7dc::after {
-	content: ' ';
+.tui-input__border-bottom.data-v-e795a7dc {
 	position: absolute;
 	border-bottom: 1px solid var(--thorui-line-color, rgba(0, 0, 0, 0.1));
 	-webkit-transform: scaleY(0.5);
@@ -38,15 +40,9 @@
 	z-index: 2;
 	pointer-events: none;
 }
-.tui-line__left.data-v-e795a7dc::after {
+.tui-line__left.data-v-e795a7dc {
 	left: 30rpx !important;
 }
-.tui-border__top.data-v-e795a7dc::before {
-	border-top: 0;
-}
-.tui-border__bottom.data-v-e795a7dc::after {
-	border-bottom: 0;
-}
 .tui-input__required.data-v-e795a7dc {
 	position: absolute;
 	left: 12rpx;
@@ -80,19 +76,10 @@
 	color: var(--thorui-text-color-placeholder, #ccc);
 	overflow: visible;
 }
-.tui-input__border.data-v-e795a7dc {
-	border-radius: 4rpx;
-	position: relative;
-
-
-
-
-
-
-	border-width: 0;
+.tui-input__disabled.data-v-e795a7dc {
+	pointer-events: none;
 }
-.tui-input__border.data-v-e795a7dc::after {
-	content: ' ';
+.tui-input__border.data-v-e795a7dc {
 	position: absolute;
 	height: 200%;
 	width: 200%;
@@ -106,9 +93,6 @@
 	border-radius: 8rpx;
 	pointer-events: none;
 }
-.tui-radius__fillet.data-v-e795a7dc::after {
-	border-radius: 100px !important;
-}
 .tui-radius__fillet.data-v-e795a7dc {
 	border-radius: 100px !important;
 }

unpackage/dist/dev/mp-weixin/components/thorui/tui-modal/tui-modal.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

unpackage/dist/dev/mp-weixin/components/thorui/tui-modal/tui-modal.wxml

@@ -0,0 +1 @@
+<view data-event-opts="{{[['touchmove',[['',['$event']]]]]}}" class="{{['tui-modal__container','data-v-6ccfff18',show?'tui-modal-show':'']}}" style="{{'z-index:'+(zIndex)+';'}}" catchtouchmove="__e"><view class="{{['tui-modal-box','data-v-6ccfff18',fadeIn||show?'tui-modal-normal':'tui-modal-scale',show?'tui-modal-show':'']}}" style="{{'width:'+(width)+';'+('padding:'+(padding)+';')+('border-radius:'+(radius)+';')+('background-color:'+(backgroundColor)+';')+('z-index:'+(zIndex+1)+';')}}"><block wx:if="{{!custom}}"><view class="data-v-6ccfff18"><block wx:if="{{title}}"><view class="tui-modal-title data-v-6ccfff18">{{title}}</view></block><view class="{{['tui-modal-content','data-v-6ccfff18',title?'':'tui-mtop']}}" style="{{'color:'+(color)+';'+('font-size:'+(size+'rpx')+';')}}">{{content}}</view><view class="{{['tui-modalBtn-box','data-v-6ccfff18',$root.g0!=2?'tui-flex-column':'']}}"><block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><block class="data-v-6ccfff18"><button class="{{['tui-modal-btn','data-v-6ccfff18','tui-'+(item.$orig.type||'primary')+(item.$orig.plain?'-outline':''),item.g1!=2?'tui-btn-width':'',item.g2>2?'tui-mbtm':'',shape=='circle'?'tui-circle-btn':'']}}" hover-class="{{'tui-'+(item.$orig.plain?'outline':item.$orig.type||'primary')+'-hover'}}" data-index="{{index}}" data-event-opts="{{[['tap',[['handleClick',['$event']]]]]}}" bindtap="__e">{{''+(item.$orig.text||'确定')+''}}</button></block></block></view></view></block><block wx:else><view class="data-v-6ccfff18"><slot></slot></view></block></view><view data-event-opts="{{[['tap',[['handleClickCancel',['$event']]]]]}}" class="{{['tui-modal-mask','data-v-6ccfff18',show?'tui-mask-show':'']}}" style="{{'z-index:'+(maskZIndex)+';'}}" bindtap="__e"></view></view>

unpackage/dist/dev/mp-weixin/components/thorui/tui-modal/tui-modal.wxss

@@ -0,0 +1,219 @@
+
+.tui-modal__container.data-v-6ccfff18 {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	left: 0;
+	top: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	visibility: hidden;
+}
+.tui-modal-box.data-v-6ccfff18 {
+	position: relative;
+	opacity: 0;
+	visibility: hidden;
+	box-sizing: border-box;
+	transition: all 0.3s ease-in-out;
+}
+.tui-modal-scale.data-v-6ccfff18 {
+	-webkit-transform: scale(0);
+	        transform: scale(0);
+}
+.tui-modal-normal.data-v-6ccfff18 {
+	-webkit-transform: scale(1);
+	        transform: scale(1);
+}
+.tui-modal-show.data-v-6ccfff18 {
+	opacity: 1;
+	visibility: visible;
+}
+.tui-modal-mask.data-v-6ccfff18 {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	transition: all 0.3s ease-in-out;
+	opacity: 0;
+	visibility: hidden;
+}
+.tui-mask-show.data-v-6ccfff18 {
+	visibility: visible;
+	opacity: 1;
+}
+.tui-modal-title.data-v-6ccfff18 {
+	text-align: center;
+	font-size: 34rpx;
+	color: #333;
+	padding-top: 20rpx;
+	font-weight: bold;
+}
+.tui-modal-content.data-v-6ccfff18 {
+	text-align: center;
+	color: #999;
+	font-size: 28rpx;
+	padding-top: 20rpx;
+	padding-bottom: 60rpx;
+}
+.tui-mtop.data-v-6ccfff18 {
+	margin-top: 30rpx;
+}
+.tui-mbtm.data-v-6ccfff18 {
+	margin-bottom: 30rpx;
+}
+.tui-modalBtn-box.data-v-6ccfff18 {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.tui-flex-column.data-v-6ccfff18 {
+	flex-direction: column;
+}
+.tui-modal-btn.data-v-6ccfff18 {
+	width: 46%;
+	height: 68rpx;
+	line-height: 68rpx;
+	position: relative;
+	border-radius: 10rpx;
+	font-size: 26rpx;
+	overflow: visible;
+	margin-left: 0;
+	margin-right: 0;
+	box-sizing: border-box;
+}
+.tui-modal-btn.data-v-6ccfff18::after {
+	content: ' ';
+	position: absolute;
+	width: 200%;
+	height: 200%;
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+	-webkit-transform: scale(0.5, 0.5) translateZ(0);
+	        transform: scale(0.5, 0.5) translateZ(0);
+	left: 0;
+	top: 0;
+	border-radius: 20rpx;
+	z-index: 2;
+}
+.tui-btn-width.data-v-6ccfff18 {
+	width: 80% !important;
+}
+.tui-primary.data-v-6ccfff18 {
+	background: #5677fc;
+	color: #fff;
+}
+.tui-primary-hover.data-v-6ccfff18 {
+	background: #4a67d6;
+	color: #e5e5e5;
+}
+.tui-primary-outline.data-v-6ccfff18 {
+	color: #5677fc;
+	background: transparent;
+}
+.tui-primary-outline.data-v-6ccfff18::after {
+	border: 1px solid #5677fc;
+}
+.tui-danger.data-v-6ccfff18 {
+	background: #ed3f14;
+	color: #fff;
+}
+.tui-danger-hover.data-v-6ccfff18 {
+	background: #d53912;
+	color: #e5e5e5;
+}
+.tui-danger-outline.data-v-6ccfff18 {
+	color: #ed3f14;
+	background: transparent;
+}
+.tui-danger-outline.data-v-6ccfff18::after {
+	border: 1px solid #ed3f14;
+}
+.tui-red.data-v-6ccfff18 {
+	background: #e41f19;
+	color: #fff;
+}
+.tui-red-hover.data-v-6ccfff18 {
+	background: #c51a15;
+	color: #e5e5e5;
+}
+.tui-red-outline.data-v-6ccfff18 {
+	color: #e41f19;
+	background: transparent;
+}
+.tui-red-outline.data-v-6ccfff18::after {
+	border: 1px solid #e41f19;
+}
+.tui-warning.data-v-6ccfff18 {
+	background: #ff7900;
+	color: #fff;
+}
+.tui-warning-hover.data-v-6ccfff18 {
+	background: #e56d00;
+	color: #e5e5e5;
+}
+.tui-warning-outline.data-v-6ccfff18 {
+	color: #ff7900;
+	background: transparent;
+}
+.tui-warning-outline.data-v-6ccfff18::after {
+	border: 1px solid #ff7900;
+}
+.tui-green.data-v-6ccfff18 {
+	background: #19be6b;
+	color: #fff;
+}
+.tui-green-hover.data-v-6ccfff18 {
+	background: #16ab60;
+	color: #e5e5e5;
+}
+.tui-green-outline.data-v-6ccfff18 {
+	color: #19be6b;
+	background: transparent;
+}
+.tui-green-outline.data-v-6ccfff18::after {
+	border: 1px solid #19be6b;
+}
+.tui-white.data-v-6ccfff18 {
+	background: #fff;
+	color: #333;
+}
+.tui-white-hover.data-v-6ccfff18 {
+	background: #f7f7f9;
+	color: #666;
+}
+.tui-white-outline.data-v-6ccfff18 {
+	color: #333;
+	background: transparent;
+}
+.tui-white-outline.data-v-6ccfff18::after {
+	border: 1px solid #333;
+}
+.tui-gray.data-v-6ccfff18 {
+	background: #ededed;
+	color: #999;
+}
+.tui-gray-hover.data-v-6ccfff18 {
+	background: #d5d5d5;
+	color: #898989;
+}
+.tui-gray-outline.data-v-6ccfff18 {
+	color: #999;
+	background: transparent;
+}
+.tui-gray-outline.data-v-6ccfff18::after {
+	border: 1px solid #999;
+}
+.tui-outline-hover.data-v-6ccfff18 {
+	opacity: 0.6;
+}
+.tui-circle-btn.data-v-6ccfff18 {
+	border-radius: 40rpx !important;
+}
+.tui-circle-btn.data-v-6ccfff18::after {
+	border-radius: 80rpx !important;
+}
+

unpackage/dist/dev/mp-weixin/pages/index/index.json

@@ -3,6 +3,8 @@
   "navigationStyle": "custom",
   "usingComponents": {
     "capsule": "/components/capsule/capsule",
-    "tui-drawer": "/components/thorui/tui-drawer/tui-drawer"
+    "tui-drawer": "/components/thorui/tui-drawer/tui-drawer",
+    "tui-modal": "/components/thorui/tui-modal/tui-modal",
+    "card-com": "/components/cardCom/index"
   }
 }

unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -11,6 +11,10 @@
  *
  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  */
+.index .d-container.data-v-57280228 {
+  padding-top: constant(safe-area-inset-bottom);
+  padding-top: env(safe-area-inset-bottom);
+}
 /* 颜色变量 */
 /* 行为相关颜色 */
 /* 文字基本颜色 */
@@ -33,7 +37,7 @@
   width: 100%;
   height: 100%;
   position: relative;
-  z-index: 999;
+  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -74,6 +78,13 @@
   padding: 28rpx 32rpx 28rpx 28rpx;
   box-sizing: border-box;
 }
+.index .container .card-list.data-v-57280228 {
+  position: relative;
+}
+.index .container .card-list .card-item.data-v-57280228 {
+  position: absolute;
+  left: 0;
+}
 .index .container .empty-box.data-v-57280228 {
   width: 100%;
   height: 649rpx;
@@ -114,6 +125,7 @@
   height: 100vh;
   width: 350rpx;
   background-color: #fff;
+  border-radius: 16rpx;
 }
 .index .d-container .d-image.data-v-57280228 {
   display: flex;
@@ -142,4 +154,7 @@
   font-size: 26rpx;
   border-bottom: 1rpx solid #cccccc;
 }
+.data-v-57280228 .tui-drawer-container {
+  border-radius: 0 16rpx 16rpx 0;
+}
 

unpackage/dist/dev/mp-weixin/pages/previewCard/index.json

@@ -1,10 +0,0 @@
-{
-  "navigationBarTitleText": "预览名片",
-  "navigationBarTextStylemyCard": "black",
-  "navigationBarBackgroundColor": "#fff",
-  "usingComponents": {
-    "tui-icon": "/components/thorui/tui-icon/tui-icon",
-    "tui-textarea": "/components/thorui/tui-textarea/tui-textarea",
-    "tui-drawer": "/components/thorui/tui-drawer/tui-drawer"
-  }
-}

unpackage/dist/dev/mp-weixin/pages/previewCard/index.wxss

@@ -1,151 +0,0 @@
-@charset "UTF-8";
-/**
- * 这里是uni-app内置的常用样式变量
- *
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- *
- */
-/**
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
- */
-/* 颜色变量 */
-/* 行为相关颜色 */
-/* 文字基本颜色 */
-/* 背景颜色 */
-/* 边框颜色 */
-/* 尺寸变量 */
-/* 文字尺寸 */
-/* 图片尺寸 */
-/* Border Radius */
-/* 水平间距 */
-/* 垂直间距 */
-/* 透明度 */
-/* 文章场景相关 */
-.previewCard .personal.data-v-7c3f3252 {
-  margin-top: 20rpx;
-  border-radius: 10rpx;
-  padding: 30rpx 20rpx;
-  box-sizing: border-box;
-  background-color: #fff;
-}
-.previewCard .personal .title.data-v-7c3f3252 {
-  border-bottom: 1rpx solid #ccc;
-  font-size: 30rpx;
-  color: #000;
-  font-weight: 600;
-  padding-bottom: 20rpx;
-}
-page.data-v-7c3f3252 {
-  background-color: #f5f5f5;
-}
-.previewCard.data-v-7c3f3252 {
-  padding: 30rpx 20rpx;
-  background-color: #f5f5f5;
-  min-height: 100vh;
-  box-sizing: border-box;
-}
-.previewCard .card-container.data-v-7c3f3252 {
-  width: 100%;
-  height: 400rpx;
-  background-color: aquamarine;
-  border-radius: 20rpx;
-}
-.previewCard .contact-mode.data-v-7c3f3252 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0rpx;
-  width: 100%;
-  height: 250rpx;
-  background-color: #fff;
-  border-radius: 20rpx;
-}
-.previewCard .contact-mode .mode-item.data-v-7c3f3252 {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 20rpx;
-}
-.previewCard .contact-mode .mode-item text.data-v-7c3f3252 {
-  font-size: 28rpx;
-  color: #000;
-}
-.previewCard .personal .title.data-v-7c3f3252 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0;
-}
-.previewCard .personal .title .edit.data-v-7c3f3252 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10rpx;
-  color: #3A8FFF;
-}
-.previewCard .personal .title .edit text.data-v-7c3f3252 {
-  font-size: 26rpx;
-}
-.previewCard .act.data-v-7c3f3252 {
-  margin-bottom: 150rpx;
-}
-.previewCard .footer.data-v-7c3f3252 {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100rpx;
-  line-height: 100rpx;
-  z-index: 99;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0rpx;
-  font-size: 30rpx;
-  text-align: center;
-}
-.previewCard .footer .preview.data-v-7c3f3252 {
-  width: 250rpx;
-  background-color: #fff;
-  color: #3a8fff;
-}
-.previewCard .footer .preserve.data-v-7c3f3252 {
-  flex: 1;
-  background-color: #3A8FFF;
-  color: #fff;
-}
-.d-container.data-v-7c3f3252 {
-  height: 500rpx;
-  width: 100%;
-}
-.d-container .d-header.data-v-7c3f3252 {
-  height: 100rpx;
-  line-height: 100rpx;
-  text-align: center;
-  font-size: 28rpx;
-  position: relative;
-}
-.d-container .d-header .icon.data-v-7c3f3252 {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  right: 30rpx;
-}
-.d-container .d-body.data-v-7c3f3252 {
-  margin-top: 30rpx;
-  padding-left: 50rpx;
-  padding-right: 30rpx;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: flase;
-  gap: 0rpx;
-}
-

unpackage/dist/dev/mp-weixin/pages_module/myCard/index.json

@@ -0,0 +1,9 @@
+{
+  "navigationBarTitleText": "我的名片",
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "capsule": "/components/capsule/capsule",
+    "tui-icon": "/components/thorui/tui-icon/tui-icon",
+    "card-com": "/components/cardCom/index"
+  }
+}

unpackage/dist/dev/mp-weixin/pages_module/myCard/index.wxss

@@ -0,0 +1,190 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.previewCard.data-v-26a696ee {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f1f1f1;
+}
+.previewCard .detail-top.data-v-26a696ee {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0rpx;
+  position: relative;
+}
+.previewCard .detail-top .back-box.data-v-26a696ee {
+  width: 100rpx;
+  position: relative;
+  z-index: 2;
+}
+.previewCard .detail-top .top-text.data-v-26a696ee {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  left: 0;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #000;
+}
+.previewCard .seat.data-v-26a696ee {
+  width: 100%;
+  height: 16rpx;
+}
+.previewCard .box-bg.data-v-26a696ee {
+  width: 100%;
+  height: 393rpx;
+  background-image: linear-gradient(to bottom, #8ccbff 0%, #cde9ff 71%, #f1f1f1 100%);
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.previewCard .card-box.data-v-26a696ee {
+  padding-top: 52rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+}
+.previewCard .card-box .card-bg.data-v-26a696ee {
+  position: absolute;
+  top: 16rpx;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.previewCard .card-box .card-bg image.data-v-26a696ee {
+  width: 705rpx;
+}
+.previewCard .card-box .seat-list.data-v-26a696ee {
+  height: 120rpx;
+  width: 690rpx;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  bottom: -112rpx;
+  border-radius: 0 0 16rpx 16rpx;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.previewCard .card-box .seat-list .seat-item.data-v-26a696ee {
+  flex: 1;
+  color: #2566ee;
+  font-size: 26rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+}
+.previewCard .card-box .seat-list .seat-item image.data-v-26a696ee {
+  width: 32rpx;
+  height: 32rpx;
+}
+.previewCard .card-box .seat-list .seat-item.data-v-26a696ee:last-of-type {
+  color: #ee2525;
+}
+.previewCard .btn-box.data-v-26a696ee {
+  margin-top: 136rpx;
+  padding: 30rpx;
+  box-sizing: border-box;
+}
+.previewCard .btn-box button.data-v-26a696ee {
+  width: 100%;
+  height: 98rpx;
+  background: linear-gradient(98deg, #0E83FF 0%, #0E3EFF 100%);
+  color: #FFFFFF;
+  font-size: 28rpx;
+  text-align: center;
+  line-height: 98rpx;
+  border-radius: 16rpx;
+}
+.previewCard .card-data.data-v-26a696ee {
+  margin-top: 40rpx;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+}
+.previewCard .card-data .card-container.data-v-26a696ee {
+  width: 100%;
+  height: 266rpx;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  background-color: #FFFFFF;
+  border-radius: 16rpx;
+}
+.previewCard .card-data .card-container .data-top.data-v-26a696ee {
+  width: 100%;
+  height: 90rpx;
+  padding: 08rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: flase;
+  gap: 0rpx;
+  border-bottom: 2rpx solid #D8E0F1;
+}
+.previewCard .card-data .card-container .data-top text.data-v-26a696ee {
+  color: rgba(0, 0, 0, 0.9);
+  font-weight: 500;
+  font-size: 28rpx;
+}
+.previewCard .card-data .card-container .data-bottom.data-v-26a696ee {
+  width: 100%;
+  height: 176rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.previewCard .card-data .card-container .data-bottom .bottom-item.data-v-26a696ee {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16rpx;
+}
+.previewCard .card-data .card-container .data-bottom .bottom-item text.data-v-26a696ee:nth-of-type(1) {
+  font-size: 40rpx;
+  color: #2566EE;
+  font-weight: 500;
+}
+.previewCard .card-data .card-container .data-bottom .bottom-item text.data-v-26a696ee:nth-of-type(2) {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 24rpx;
+}
+

unpackage/dist/dev/mp-weixin/pages_module/previewCard/index.json

@@ -0,0 +1,9 @@
+{
+  "navigationBarTitleText": "预览名片",
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "capsule": "/components/capsule/capsule",
+    "tui-icon": "/components/thorui/tui-icon/tui-icon",
+    "card-com": "/components/cardCom/index"
+  }
+}

unpackage/dist/dev/mp-weixin/pages_module/previewCard/index.wxss

@@ -0,0 +1,180 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.previewCard.data-v-84b9fc7e {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f1f1f1;
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f1f1f1;
+}
+.previewCard .detail-top.data-v-84b9fc7e {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0rpx;
+  position: relative;
+}
+.previewCard .detail-top .back-box.data-v-84b9fc7e {
+  width: 100rpx;
+  position: relative;
+  z-index: 2;
+}
+.previewCard .detail-top .top-text.data-v-84b9fc7e {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  left: 0;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #000;
+}
+.previewCard .seat.data-v-84b9fc7e {
+  width: 100%;
+  height: 16rpx;
+}
+.previewCard .box-bg.data-v-84b9fc7e {
+  width: 100%;
+  height: 393rpx;
+  background-image: linear-gradient(to bottom, #8ccbff 0%, #cde9ff 71%, #f1f1f1 100%);
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.previewCard .card-box.data-v-84b9fc7e {
+  padding-top: 52rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+}
+.previewCard .card-box .card-bg.data-v-84b9fc7e {
+  position: absolute;
+  top: 16rpx;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.previewCard .card-box .card-bg image.data-v-84b9fc7e {
+  width: 705rpx;
+}
+.previewCard .card-box .seat-list.data-v-84b9fc7e {
+  height: 120rpx;
+  width: 690rpx;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  bottom: -112rpx;
+  border-radius: 0 0 16rpx 16rpx;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.previewCard .card-box .seat-list .seat-item.data-v-84b9fc7e {
+  flex: 1;
+  color: #2566ee;
+  font-size: 26rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+}
+.previewCard .card-box .seat-list .seat-item image.data-v-84b9fc7e {
+  width: 32rpx;
+  height: 32rpx;
+}
+.previewCard .brief.data-v-84b9fc7e {
+  width: 100%;
+  margin-top: 136rpx;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+}
+.previewCard .brief .brief-item.data-v-84b9fc7e {
+  padding: 24rpx 32rpx 32rpx 32rpx;
+  box-sizing: border-box;
+  border-radius: 16rpx;
+  background-color: #ffffff;
+  margin-top: 24rpx;
+}
+.previewCard .brief .brief-item .item-title.data-v-84b9fc7e {
+  width: 100%;
+  border-bottom: 1rpx solid #d8e0f1;
+  font-size: 28rpx;
+  color: rgba(0, 0, 0, 0.9);
+  padding-bottom: 24rpx;
+}
+.previewCard .brief .brief-item .item-container.data-v-84b9fc7e {
+  padding-top: 24rpx;
+  font-size: 24rpx;
+  color: #606e84;
+  line-height: 36rpx;
+}
+.previewCard .footer.data-v-84b9fc7e {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 100vw;
+  margin-top: 24rpx;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  background-color: #ffffff;
+}
+.previewCard .footer .btn-list.data-v-84b9fc7e {
+  width: 100%;
+  height: 112rpx;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.previewCard .footer .btn-list button.data-v-84b9fc7e {
+  width: 690rpx;
+  height: 88rpx;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  text-align: center;
+  line-height: 88rpx;
+}
+.previewCard .footer .btn-list button.data-v-84b9fc7e:nth-of-type(1) {
+  color: #1472ff;
+  border: 2rpx solid #1472ff;
+  box-sizing: border-box;
+}
+

unpackage/dist/dev/mp-weixin/project.private.config.json

@@ -1,13 +1,16 @@
 {
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "projectname": "new-card-wx",
-  "setting": {
-    "compileHotReLoad": true
-  },
   "condition": {
     "miniprogram": {
       "list": [
         {
+          "name": "预览名片",
+          "pathName": "pages_module/previewCard/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "创建名片",
           "pathName": "pages_module/establish/index",
           "query": "",

utils/cache.js

@@ -0,0 +1,23 @@
+// 对本地的数据存储进行处理
+
+class LocalCache {
+    setCache(key,value){
+        uni.setStorageSync(key, JSON.stringify(value));
+    }
+    getCache(key){
+        if(uni.getStorageSync(key) == ""){
+            return false;
+        }else{
+            return JSON.parse(uni.getStorageSync(key));
+        }
+    }
+    //  删除
+    removeCache(key){
+        uni.removeStorageSync(key);
+    }
+    clearCache(){
+        uni.clearStorageSync();
+    }
+}
+
+export default new LocalCache();