wzy更新'

api/index.js

@@ -0,0 +1,21 @@
+// 地址相关的请求
+import http from "./request";
+
+
+// 查询名片信息
+export function getIdEnterpriseUserApi(params){
+    return http.request({
+		method: "GET",
+		url: `/enterpriseUser/getUserId`,
+		params
+	})
+}
+
+//  保存卡片
+export function saveCard(data) {
+	return http.request({
+		method: "POST",
+		url: `/enterpriseUser/save`,
+		data
+	})
+}

api/request/index.js

@@ -9,7 +9,13 @@ const http = new Request({
 //  请求拦截器
 http.interceptors.request.use(
 	(config)=>{
-		
+		// 根据请求信息里携带的自定义属性，判断当前请求是否需要携带token
+		const needToken = config.custom.needToken || false;
+		if (needToken) {
+			const token = uni.getStorageSync("userInfo")?.token;
+			config.header.token = token;
+		}
+		return config;
 	},
 	//  失败拦截
 	(error)=>{
@@ -21,11 +27,18 @@ http.interceptors.request.use(
 http.interceptors.response.use(
 	// 响应成功拦截
 	(response)=>{
-		
+		const { data } = response;
+		return data;
 	},
 	//  响应失败拦截
 	(err)=>{
+		const { msg } = err
+		if(msg){
+			this.$showToast(msg)
+		}
 		console.log(err)
 	}
 	
-)
+)
+
+export default http;

components/capsule/capsule.vue

@@ -0,0 +1,84 @@
+<template>
+    <view class="capsule" :style="{ backgroundColor: bgColor, paddingTop: top + 'px'  }">
+        <view class="title" v-if="showBorder" :style="{ height: height, paddingLeft: titleLeft, display: isSecurity ? 'none' : 'block' }">
+            <slot name="top"></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    created() {
+        // #ifdef MP-WEIXIN
+        //  获取胶囊按钮的位置
+        let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+        console.log(menuButtonInfo);
+        this.height = menuButtonInfo.height + 'px'
+        this.top = menuButtonInfo.top
+        //  获取整个页面的宽度
+        uni.getSystemInfo({
+            success: res => {
+                console.log(res);
+                //  如果只需要安全区域的话 那就不需要高度
+                if (this.isSecurity) {
+                    this.top = res.safeAreaInsets.bottom + 'px'
+                    return
+                }
+                this.titleLeft = res.windowWidth - menuButtonInfo.right + "px"
+            }
+        })
+        // #endif
+    },
+    props: {
+        title: {
+            type: String,
+        },
+        bgColor: {
+            type: String,
+        },
+        //  是不是只需要安全区域
+        isSecurity: {
+            type: Boolean,
+            default: false
+        },
+        // 是否需要安全区域且于胶囊按钮平齐
+        showBorder: {
+            type: Boolean,
+            default: false
+        },
+        showIcon: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            height: null,
+            top: null,
+            titleLeft: null,
+        }
+    },
+    mounted () {
+        //  计算该组件的高度并返回给父组件
+      this.$emit('getHeight', this.top)  
+    },
+    methods: {
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.capsule {
+    width: 100%;
+    .title {
+        padding-left: 30rpx;
+        box-sizing: border-box;
+        color: rgba(0, 0, 0, 0.8);
+        font-size: 32rpx;
+        font-weight: 700;
+        display: flex !important;
+        align-items: center;
+        gap: 10rpx;
+    }
+}
+</style>

components/cardCom/index.scss

@@ -0,0 +1,111 @@
+.cardCom {
+  width: 690rpx;
+  height: 428rpx;
+  position: relative;
+  .card-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    image {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+  .card-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 2;
+    .card-header {
+      padding: 0 48rpx;
+      box-sizing: border-box;
+      width: 100%;
+      height: 120rpx;
+      @include flex(space-between, null, null);
+      position: absolute;
+      top: 52rpx;
+      left: 0;
+      .header-left {
+        .header-title {
+          margin-bottom: 16rpx;
+          @include flex(flex-start, null, 32rpx);
+          text {
+            color: #ffffff;
+            &:nth-of-type(1) {
+              font-size: 36rpx;
+              font-weight: 500;
+            }
+            &:nth-of-type(2) {
+              font-size: 24rpx;
+            }
+          }
+        }
+        .company {
+          font-size: 24rpx;
+          color: #ffffff;
+        }
+      }
+      .header-right {
+        position: relative;
+        width: 128rpx;
+        height: 128rpx;
+        border-radius: 50%;
+        overflow: hidden;
+        .edit {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          z-index: 4;
+          width: 120rpx;
+          height: 36rpx;
+          text-align: center;
+          line-height: 36rpx;
+          background: rgba(0, 0, 0, 0.4);
+          font-size: 20rpx;
+          color: #ffffff;
+        }
+        .img-box {
+          width: 128rpx;
+          height: 128rpx;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 3;
+          border-radius: 50%;
+          background-color: #ffffff;
+          @include flex(center,null,null);
+          image {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+    .card-content {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 228rpx;
+      padding: 0 48rpx;
+      box-sizing: border-box;
+      .content-item {
+        @include flex(flex-start, null, 10rpx);
+        margin-top: 16rpx;
+        image {
+          width: 24rpx;
+          height: 24rpx;
+          display: block;
+        }
+        text {
+          font-size: 24rpx;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}

components/cardCom/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <view class="cardCom">
+    <view class="card-bg">
+      <image class="" :src="bgList[imgSerial]" />
+    </view>
+    <view class="card-container">
+      <view class="card-header">
+        <view class="header-left">
+          <view class="header-title">
+            <text>{{ cardData.name || '' }}</text>
+            <text>{{ cardData.enterpriseDuties || '' }}</text>
+          </view>
+          <view class="company">{{ cardData.enterpriseName  || '' }}</view>
+        </view>
+        <view class="header-right">
+          <view class="edit" v-if="isEdit">编辑</view>
+          <view class="img-box">
+            <template v-if="cardData.headImage">
+              <image
+              class=""
+              :src="cardData.headImage"
+            />
+            </template>
+            <template v-else>
+              <image
+              class=""
+              src="@/static/images/default_avatar.png"
+            />
+            </template>
+           
+          </view>
+        </view>
+      </view>
+      <view class="card-content">
+        <view class="content-item" v-if="cardData.phone">
+          <image class="" src="@/static/images/icon_1.png" />
+          <text>{{ cardData.phone }}</text>
+        </view>
+        <view class="content-item" v-if="cardData.weChatSignal">
+          <image class="" src="@/static/images/icon_2.png" />
+          <text>{{ cardData.weChatSignal }}</text>
+        </view>
+        <view class="content-item" v-if="cardData.address">
+          <image class="" src="@/static/images/icon_3.png" />
+          <text>{{ cardData.address }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    // 控制第几章名片背景
+    imgSerial: {
+      typeof: Number,
+      default: 0,
+    },
+    // 控制编辑背景是否需要
+    isEdit: {
+      typeof: Boolean,
+      default: false,
+    },
+    //  传递过来的卡片数据
+    cardData:{
+      typeof: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      bgList: [
+        require("@/static/images/card_0.png"),
+        require("@/static/images/card_1.png"),
+        require("@/static/images/card_2.png"),
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

main.js

@@ -3,6 +3,12 @@ import store from './store'
 // #ifndef VUE3
 import Vue from 'vue'
 import './uni.promisify.adaptor'
+
+//  将工具函数挂载到原型上面去
+import { showToast,loading } from '@/utils/index'
+Vue.prototype.$showToast = showToast
+Vue.prototype.$loading = loading
+
 Vue.config.productionTip = false
 App.mpType = 'app'
 const app = new Vue({

pages.json

@@ -14,14 +14,6 @@
 			}
 		},
 		{
-			"path": "pages/establish/index",
-			"style": {
-				"navigationBarTitleText": "创建名片",
-				"navigationBarTextStyle":"black",
-				"navigationBarBackgroundColor":"#fff"
-			}
-		},
-		{
 			"path": "pages/previewCard/index",
 			"style": {
 				"navigationBarTitleText": "预览名片",
@@ -30,6 +22,22 @@
 			}
 		}
 	],
+	"subpackages":[
+		{
+			"root": "pages_module",
+			"name":"pages_module",
+			"pages": [
+				{
+					"path": "establish/index",
+					"style": {
+						"navigationBarTitleText": "创建名片",
+						"navigationBarTextStyle":"black",
+						"navigationBarBackgroundColor":"#fff"
+					}
+				}
+			] 
+		}
+	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

pages/establish/index.vue

@@ -1,197 +0,0 @@
-<template>
-    <view class="establish">
-        <view class="business-card"></view>
-        <view class="business-style">
-            <view class="business-title">名片样式</view>
-            <view class="style-list">
-                <view class="style-item"></view>
-                <view class="style-item"></view>
-                <view class="style-item"></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-input padding="0" :borderBottom="false" :size="28" placeholder="请输入姓名"></tui-input>
-                    </tui-form-item>
-                    <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="职位" :asterisk="true" :labelSize="28">
-                        <tui-input 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 padding="0" :borderBottom="false" :size="28" placeholder="请输入手机号"></tui-input>
-                </tui-form-item>
-                <tui-form-item label="微信" :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" :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>
-        <view class="footer" :style="{ bottom: bottom + 'rpx' }">
-            <view class="preview" @click="goCard">预览名片</view>
-            <view class="preserve">保存</view>
-        </view>
-    </view>
-</template>
-
-<script>
-export default {
-    onLoad() {
-        uni.getSystemInfo({
-            success: (res) => {
-                this.bottom = res.safeAreaInsets.bottom
-            }
-        })
-    },
-    data() {
-        return {
-            bottom: null
-        }
-    },
-    methods: {
-        goCard() {
-            uni.navigateTo({
-                url: '/pages/previewCard/index'
-            })  
-        }
-    },
-}
-</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;
-}
-
-.establish {
-    min-height: 100vh;
-    background-color: #f5f5f5;
-    padding: 30rpx;
-    box-sizing: border-box;
-
-    .business-card {
-        width: 100%;
-        height: 400rpx;
-        background-color: aquamarine;
-        border-radius: 20rpx;
-    }
-
-    .business-style {
-        @extend %paddBox;
-
-        .business-title {
-            @extend %title;
-        }
-
-        .style-list {
-            margin-top: 20rpx;
-            @include flex(space-between, null, 20rpx);
-
-            .style-item {
-                flex: 1;
-                height: 100rpx;
-                background-color: bisque;
-                border-radius: 10rpx
-            }
-        }
-    }
-
-    .basic-info {
-        @extend %paddBox;
-
-        .info-title {
-            border-bottom: 1rpx solid #ccc;
-            font-size: 30rpx;
-            color: #000;
-            font-weight: 600;
-            padding-bottom: 20rpx;
-        }
-    }
-
-    .contact-mode {
-        @extend %paddBox;
-
-        .mode-title {
-            @extend %title;
-        }
-    }
-
-    .personal-brief {
-        @extend %paddBox;
-
-        .brief-title {
-            @extend %title;
-        }
-    }
-
-    .company-brief {
-        @extend %paddBox;
-        margin-bottom: 130rpx;
-
-        .company-title {
-            @extend %title;
-        }
-    }
-
-    .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;
-        }
-    }
-}
-</style>

pages/index/index.scss

@@ -0,0 +1,160 @@
+.index {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #F1F1F1;
+  .detail-top {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 999;
+    @include flex(center);
+    .top-left{
+        position: absolute;
+        left: 28rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        image{
+            width: 48rpx;
+            height: 48rpx;
+            display: block;
+        }
+    }
+    .top-text{
+        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;
+  }
+  .container{
+    width: 100%;
+    padding: 28rpx 32rpx 28rpx 28rpx;
+    box-sizing: border-box;
+    .empty-box{
+        width: 100%;
+        height: 649rpx;
+        padding-top: 260rpx;
+        box-sizing: border-box;
+        @include flex(center,column,6rpx);
+        image{
+            width: 280rpx;
+            height: 297rpx;
+            display: block;
+        }
+        text{
+            font-size: 28rpx;
+            font-weight: 600;
+            color: #3A495F;
+        }
+    }
+    .card-btn{
+        width: 100%;
+        button{
+            width: 100%;
+            height: 98rpx;
+            background: linear-gradient(98deg, #0E83FF 0%, #0E3EFF 100%);
+            text-align: center;
+            line-height: 98rpx;
+            border-radius: 16rpx;
+            margin-top: 24rpx;
+            font-size: 28rpx;
+            color: #FFFFFF;
+        }
+    }
+  }
+  // .contant {
+  // 	height: calc(100vh - env(safe-area-inset-bottom));
+  // 	box-sizing: border-box;
+  // 	background-color: #fff;
+
+  // 	.header {
+  // 		position: relative;
+  // 		width: 100%;
+  // 		height: 80rpx;
+
+  // 		.header-icon {
+  // 			position: absolute;
+  // 			top: 50%;
+  // 			transform: translateY(-50%);
+  // 			left: 30rpx;
+
+  // 			image {
+  // 				width: 50rpx;
+  // 				height: 50rpx;
+  // 				display: block;
+  // 			}
+  // 		}
+
+  // 		.header-title {
+  // 			text-align: center;
+  // 			line-height: 80rpx;
+  // 			font-size: 32rpx;
+  // 		}
+  // 	}
+
+  // 	.main {
+  // 		padding: 20rpx 30rpx;
+
+  // 		.add-card {
+  // 			width: 100%;
+  // 			height: 200rpx;
+  // 			border: 1px solid #a3a3a3;
+  // 			border-radius: 10rpx;
+  // 			display: flex;
+  // 			align-items: center;
+  // 			justify-content: center;
+  // 			gap: 20rpx;
+  // 			color: rgb(58, 143, 255);
+  // 			font-size: 30rpx;
+  // 		}
+  // 	}
+  // }
+
+  .d-container {
+    // @extend %securityTop;
+    box-sizing: border-box;
+    height: 100vh;
+    width: 350rpx;
+    background-color: #fff;
+
+    .d-image {
+      @include flex(center, column, 20rpx);
+      padding: 35rpx 0;
+      box-sizing: border-box;
+      border-top: 1rpx solid #cccccc;
+      border-bottom: 1rpx solid #cccccc;
+
+      image {
+        width: 100rpx;
+        height: 100rpx;
+        display: block;
+        border-radius: 50%;
+      }
+
+      text {
+        font-size: 28rpx;
+      }
+    }
+
+    .quit {
+      height: 80rpx;
+      text-align: center;
+      line-height: 80rpx;
+      font-size: 26rpx;
+      border-bottom: 1rpx solid #cccccc;
+    }
+  }
+}

pages/index/index.vue

@@ -1,6 +1,30 @@
 <template>
-	<view class="index">
-		<view class="contant">
+  <view class="index">
+    <capsule :showBorder="true" bgColor="transparent">
+      <template v-slot:top>
+        <view class="detail-top">
+          <view class="top-left">
+            <image class="" src="@/static/images/catalogue_icon.png" />
+          </view>
+          <view class="top-text">团蜂电子名片</view>
+        </view>
+      </template>
+    </capsule>
+    <view class="seat"></view>
+    <view class="box-bg">
+		<!-- <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-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" />
@@ -17,155 +41,67 @@
 				</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-image">
-					<image class="" src="@/static/header_image.png" />
-					<text>摘星辰</text>
-				</view>
-				<view class="quit" @click="quitLogin">退出登录</view>
-			</view>
-		</tui-drawer>
-	</view>
+		</view> -->
+    <tui-drawer mode="left" :visible="visible" @close="closeDrawer">
+      <view class="d-container" :style="{ marginTop: top + 'rpx' }">
+        <view class="d-image">
+          <image class="" src="@/static/header_image.png" />
+          <text>摘星辰</text>
+        </view>
+        <view class="quit" @click="quitLogin">退出登录</view>
+      </view>
+    </tui-drawer>
+  </view>
 </template>
 
 <script>
 export default {
-	data() {
-		return {
-			visible: false,
-			top: null
-		}
-	},
-	onLoad() {
-		uni.getSystemInfo({
-			success: res => {
-				this.top = res.safeAreaInsets.top * 2
-			}
-		})
-	},
-	methods: {
-		//  打开侧边弹框
-		openDrawer() {
-			this.visible = true
-		},
-		//  新增卡片
-		addCard() {
-			// #ifdef MP-WEIXIN
-			wx.login({
-				success: res => {
-					console.log(res);
-				}
-			})
-			// #endif
-			uni.navigateTo({
-				url: '/pages/establish/index',
-			});
-		},
-		getPhone(e) {
-			console.log(e);
-		},
-		// 退出登录
-		quitLogin() {
-			this.visible = false
-		},
-		//  关闭侧边弹框
-		closeDrawer() {
-			this.visible = false
-		}
-	}
-}
+  data() {
+    return {
+      visible: false,
+      top: null,
+    };
+  },
+  onLoad() {
+    uni.getSystemInfo({
+      success: (res) => {
+        this.top = res.safeAreaInsets.top * 2;
+      },
+    });
+  },
+  methods: {
+    //  打开侧边弹框
+    openDrawer() {
+      this.visible = true;
+    },
+    //  新增卡片
+    addCard() {
+      // #ifdef MP-WEIXIN
+      wx.login({
+        success: (res) => {
+          console.log(res);
+        },
+      });
+      // #endif
+      uni.navigateTo({
+        url: "/pages_module/establish/index",
+      });
+    },
+    getPhone(e) {
+      console.log(e);
+    },
+    // 退出登录
+    quitLogin() {
+      this.visible = false;
+    },
+    //  关闭侧边弹框
+    closeDrawer() {
+      this.visible = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.index {
-	min-height: 100vh;
-	background-color: #f5f5f5;
-	// @extend %securityTop;
-	box-sizing: border-box;
-
-	.contant {
-		height: calc(100vh - env(safe-area-inset-bottom));
-		box-sizing: border-box;
-		background-color: #fff;
-
-		.header {
-			position: relative;
-			width: 100%;
-			height: 80rpx;
-
-			.header-icon {
-				position: absolute;
-				top: 50%;
-				transform: translateY(-50%);
-				left: 30rpx;
-
-				image {
-					width: 50rpx;
-					height: 50rpx;
-					display: block;
-				}
-			}
-
-			.header-title {
-				text-align: center;
-				line-height: 80rpx;
-				font-size: 32rpx;
-			}
-		}
-
-		.main {
-			padding: 20rpx 30rpx;
-
-			.add-card {
-				width: 100%;
-				height: 200rpx;
-				border: 1px solid #a3a3a3;
-				border-radius: 10rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				gap: 20rpx;
-				color: rgb(58, 143, 255);
-				font-size: 30rpx;
-			}
-		}
-	}
-
-	.d-container {
-		// @extend %securityTop;
-		box-sizing: border-box;
-		height: 100vh;
-		width: 350rpx;
-		background-color: #fff;
-
-		.d-image {
-			@include flex(center, column, 20rpx);
-			padding: 35rpx 0;
-			box-sizing: border-box;
-			border-top: 1rpx solid #cccccc;
-			border-bottom: 1rpx solid #cccccc;
-
-			image {
-				width: 100rpx;
-				height: 100rpx;
-				display: block;
-				border-radius: 50%;
-			}
-
-			text {
-				font-size: 28rpx;
-			}
-		}
-
-		.quit {
-			height: 80rpx;
-			text-align: center;
-			line-height: 80rpx;
-			font-size: 26rpx;
-			border-bottom: 1rpx solid #cccccc;
-		}
-	}
-}
-</style>
+@import "./index.scss";
+</style>

pages_module/establish/index.scss

@@ -0,0 +1,136 @@
+%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;
+}
+
+.establish {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  .establish-box {
+    padding: 30rpx;
+    box-sizing: border-box;
+    // margin-bottom: 130rpx;
+    .business-card {
+      width: 100%;
+      height: 400rpx;
+      background-color: aquamarine;
+      border-radius: 20rpx;
+    }
+
+    .business-style {
+      @extend %paddBox;
+
+      .business-title {
+        @extend %title;
+      }
+
+      .style-list {
+        margin-top: 20rpx;
+        @include flex(space-between, null, 20rpx);
+
+        .style-item {
+          flex: 1;
+          position: relative;
+          .style-icon {
+            position: absolute;
+            right: 16rpx;
+            bottom: 16rpx;
+            image {
+              width: 24rpx;
+              height: 24rpx;
+            }
+          }
+          & > image {
+            width: 100%;
+            height: 135rpx;
+          }
+        }
+      }
+    }
+
+    .basic-info {
+      @extend %paddBox;
+
+      .info-title {
+        border-bottom: 1rpx solid #ccc;
+        font-size: 30rpx;
+        color: #000;
+        font-weight: 600;
+        padding-bottom: 20rpx;
+      }
+    }
+
+    .contact-mode {
+      @extend %paddBox;
+
+      .mode-title {
+        @extend %title;
+      }
+    }
+
+    .personal-brief {
+      @extend %paddBox;
+
+      .brief-title {
+        @extend %title;
+      }
+    }
+
+    .company-brief {
+      @extend %paddBox;
+        margin-bottom: calc(112rpx + constant(safe-area-inset-bottom));
+        margin-bottom: calc(112rpx + env(safe-area-inset-bottom));
+      .company-title {
+        @extend %title;
+      }
+    }
+  }
+
+  .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);
+      view {
+        width: 333rpx;
+        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;
+        }
+        &:nth-of-type(2) {
+          background-color: #1472ff;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}

pages_module/establish/index.vue

@@ -0,0 +1,176 @@
+<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" />
+          </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-input
+              padding="0"
+              :borderBottom="false"
+              :size="28"
+              placeholder="请输入姓名"
+            ></tui-input>
+          </tui-form-item>
+          <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="职位" :asterisk="true" :labelSize="28">
+            <tui-input
+              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
+            padding="0"
+            :borderBottom="false"
+            :size="28"
+            placeholder="请输入手机号"
+          ></tui-input>
+        </tui-form-item>
+        <tui-form-item label="微信" :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"
+            :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>
+    </view>
+
+    <view class="footer">
+      <view class="btn-list">
+        <view>预览名片</view>
+        <view>保存名片</view>
+      </view>
+      <!-- <view class="preview" @click="goCard">预览名片</view>
+            <view class="preserve">保存</view> -->
+    </view>
+  </view>
+</template>
+
+<script>
+import cardCom from "@/components/cardCom/index.vue";
+export default {
+  components: {
+    cardCom,
+  },
+  onLoad() {
+    // uni.getSystemInfo({
+    //     success: (res) => {
+    //         this.bottom = res.safeAreaInsets.bottom
+    //     }
+    // })
+  },
+  data() {
+    return {
+      // bottom: null,
+      selectIdx: 0,
+      selectList: [
+        {
+          title: "one",
+          img: require("@/static/images/select_1.png"),
+        },
+        {
+          title: "two",
+          img: require("@/static/images/select_2.png"),
+        },
+        {
+          title: "three",
+          img: require("@/static/images/select_3.png"),
+        },
+      ],
+      //  名片信息
+      cardInfo: {
+        name: "", // 名字
+        phone: "", // 电话
+        weChatSignal: "", // 微信号
+        enterpriseName: "", // 企业名称
+        enterpriseDuties: "", // 担任职务
+        headImage: "", // 头像
+        address: "", // 地址
+        styleId: "", // 选择样式
+        personalProfile: "", // 个人简介
+      },
+    };
+  },
+  methods: {
+    goCard() {
+      uni.navigateTo({
+        url: "/pages/previewCard/index",
+      });
+    },
+    changeIdx(idx) {
+      this.selectIdx = idx;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1 @@
+{"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,10 +1,17 @@
 {
   "pages": [
     "pages/index/index",
-    "pages/establish/index",
     "pages/previewCard/index"
   ],
-  "subPackages": [],
+  "subPackages": [
+    {
+      "root": "pages_module",
+      "pages": [
+        "establish/index"
+      ],
+      "name": "pages_module"
+    }
+  ],
   "window": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",

unpackage/dist/dev/mp-weixin/components/capsule/capsule.json

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

unpackage/dist/dev/mp-weixin/components/capsule/capsule.wxml

@@ -0,0 +1 @@
+<view class="capsule data-v-81d9ab40" style="{{'background-color:'+(bgColor)+';'+('padding-top:'+(top+'px')+';')}}"><block wx:if="{{showBorder}}"><view class="title data-v-81d9ab40" style="{{'height:'+(height)+';'+('padding-left:'+(titleLeft)+';')+('display:'+(isSecurity?'none':'block')+';')}}"><slot name="top"></slot></view></block></view>

unpackage/dist/dev/mp-weixin/components/capsule/capsule.wxss

@@ -0,0 +1,40 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.capsule.data-v-81d9ab40 {
+  width: 100%;
+}
+.capsule .title.data-v-81d9ab40 {
+  padding-left: 30rpx;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 32rpx;
+  font-weight: 700;
+  display: flex !important;
+  align-items: center;
+  gap: 10rpx;
+}
+

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

@@ -0,0 +1,11 @@
+(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){}}]);
+//# 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))
+        })
+    },
+    [['components/cardCom/index-create-component']]
+]);

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

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

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

@@ -0,0 +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>

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

@@ -0,0 +1,146 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.cardCom.data-v-40e6932e {
+  width: 690rpx;
+  height: 428rpx;
+  position: relative;
+}
+.cardCom .card-bg.data-v-40e6932e {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.cardCom .card-bg image.data-v-40e6932e {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.cardCom .card-container.data-v-40e6932e {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 2;
+}
+.cardCom .card-container .card-header.data-v-40e6932e {
+  padding: 0 48rpx;
+  box-sizing: border-box;
+  width: 100%;
+  height: 120rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: 52rpx;
+  left: 0;
+}
+.cardCom .card-container .card-header .header-left .header-title.data-v-40e6932e {
+  margin-bottom: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 32rpx;
+}
+.cardCom .card-container .card-header .header-left .header-title text.data-v-40e6932e {
+  color: #ffffff;
+}
+.cardCom .card-container .card-header .header-left .header-title text.data-v-40e6932e:nth-of-type(1) {
+  font-size: 36rpx;
+  font-weight: 500;
+}
+.cardCom .card-container .card-header .header-left .header-title text.data-v-40e6932e:nth-of-type(2) {
+  font-size: 24rpx;
+}
+.cardCom .card-container .card-header .header-left .company.data-v-40e6932e {
+  font-size: 24rpx;
+  color: #ffffff;
+}
+.cardCom .card-container .card-header .header-right.data-v-40e6932e {
+  position: relative;
+  width: 128rpx;
+  height: 128rpx;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.cardCom .card-container .card-header .header-right .edit.data-v-40e6932e {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 4;
+  width: 120rpx;
+  height: 36rpx;
+  text-align: center;
+  line-height: 36rpx;
+  background: rgba(0, 0, 0, 0.4);
+  font-size: 20rpx;
+  color: #ffffff;
+}
+.cardCom .card-container .card-header .header-right .img-box.data-v-40e6932e {
+  width: 128rpx;
+  height: 128rpx;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  border-radius: 50%;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cardCom .card-container .card-header .header-right .img-box image.data-v-40e6932e {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+}
+.cardCom .card-container .card-content.data-v-40e6932e {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 228rpx;
+  padding: 0 48rpx;
+  box-sizing: border-box;
+}
+.cardCom .card-container .card-content .content-item.data-v-40e6932e {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10rpx;
+  margin-top: 16rpx;
+}
+.cardCom .card-container .card-content .content-item image.data-v-40e6932e {
+  width: 24rpx;
+  height: 24rpx;
+  display: block;
+}
+.cardCom .card-container .card-content .content-item text.data-v-40e6932e {
+  font-size: 24rpx;
+  color: #ffffff;
+}
+

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

@@ -1,101 +0,0 @@
-@charset "UTF-8";
-/**
- * 这里是uni-app内置的常用样式变量
- *
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- *
- */
-/**
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
- */
-/* 颜色变量 */
-/* 行为相关颜色 */
-/* 文字基本颜色 */
-/* 背景颜色 */
-/* 边框颜色 */
-/* 尺寸变量 */
-/* 文字尺寸 */
-/* 图片尺寸 */
-/* Border Radius */
-/* 水平间距 */
-/* 垂直间距 */
-/* 透明度 */
-/* 文章场景相关 */
-.establish .business-style.data-v-55397b13, .establish .basic-info.data-v-55397b13, .establish .contact-mode.data-v-55397b13, .establish .personal-brief.data-v-55397b13, .establish .company-brief.data-v-55397b13 {
-  margin-top: 20rpx;
-  border-radius: 10rpx;
-  padding: 30rpx 20rpx;
-  box-sizing: border-box;
-  background-color: #fff;
-}
-.establish .business-style .business-title.data-v-55397b13, .establish .contact-mode .mode-title.data-v-55397b13, .establish .personal-brief .brief-title.data-v-55397b13, .establish .company-brief .company-title.data-v-55397b13 {
-  border-bottom: 1rpx solid #ccc;
-  font-size: 30rpx;
-  color: #000;
-  font-weight: 600;
-  padding-bottom: 20rpx;
-}
-.establish.data-v-55397b13 {
-  min-height: 100vh;
-  background-color: #f5f5f5;
-  padding: 30rpx;
-  box-sizing: border-box;
-}
-.establish .business-card.data-v-55397b13 {
-  width: 100%;
-  height: 400rpx;
-  background-color: aquamarine;
-  border-radius: 20rpx;
-}
-.establish .business-style .style-list.data-v-55397b13 {
-  margin-top: 20rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20rpx;
-}
-.establish .business-style .style-list .style-item.data-v-55397b13 {
-  flex: 1;
-  height: 100rpx;
-  background-color: bisque;
-  border-radius: 10rpx;
-}
-.establish .basic-info .info-title.data-v-55397b13 {
-  border-bottom: 1rpx solid #ccc;
-  font-size: 30rpx;
-  color: #000;
-  font-weight: 600;
-  padding-bottom: 20rpx;
-}
-.establish .company-brief.data-v-55397b13 {
-  margin-bottom: 130rpx;
-}
-.establish .footer.data-v-55397b13 {
-  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;
-}
-.establish .footer .preview.data-v-55397b13 {
-  width: 250rpx;
-  background-color: #fff;
-  color: #3a8fff;
-}
-.establish .footer .preserve.data-v-55397b13 {
-  flex: 1;
-  background-color: #3A8FFF;
-  color: #fff;
-}
-

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

@@ -2,7 +2,7 @@
   "navigationBarTitleText": "团蜂小名片",
   "navigationStyle": "custom",
   "usingComponents": {
-    "tui-icon": "/components/thorui/tui-icon/tui-icon",
+    "capsule": "/components/capsule/capsule",
     "tui-drawer": "/components/thorui/tui-drawer/tui-drawer"
   }
 }

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

@@ -1 +1 @@
-<view class="index data-v-57280228"><view class="contant data-v-57280228"><view class="header data-v-57280228" style="{{'margin-top:'+(top+'rpx')+';'}}"><view data-event-opts="{{[['tap',[['openDrawer',['$event']]]]]}}" class="header-icon data-v-57280228" bindtap="__e"><image src="/static/catalogue_icon.png" class="data-v-57280228"></image></view><view class="header-title data-v-57280228">团蜂电子名片</view></view><view class="main data-v-57280228"><view class="card-list data-v-57280228"></view><view data-event-opts="{{[['tap',[['addCard',['$event']]]]]}}" class="add-card data-v-57280228" bindtap="__e"><view class="card-icon data-v-57280228"><tui-icon vue-id="8dd740cc-1" name="plus" size="{{24}}" color="rgb(58, 143, 255)" class="data-v-57280228" bind:__l="__l"></tui-icon></view><view class="card-text data-v-57280228">新增名片</view></view></view><button open-type="getPhoneNumber" data-event-opts="{{[['tap',[['addCard',['$event']]]],['getphonenumber',[['getPhone',['$event']]]]]}}" bindtap="__e" bindgetphonenumber="__e" class="data-v-57280228">点击事件</button></view><tui-drawer vue-id="8dd740cc-2" mode="left" visible="{{visible}}" data-event-opts="{{[['^close',[['closeDrawer']]]]}}" bind:close="__e" class="data-v-57280228" bind:__l="__l" vue-slots="{{['default']}}"><view class="d-container data-v-57280228" style="{{'margin-top:'+(top+'rpx')+';'}}"><view class="d-image data-v-57280228"><image src="/static/header_image.png" class="data-v-57280228"></image><text class="data-v-57280228">摘星辰</text></view><view data-event-opts="{{[['tap',[['quitLogin',['$event']]]]]}}" class="quit data-v-57280228" bindtap="__e">退出登录</view></view></tui-drawer></view>
+<view class="index data-v-57280228"><capsule vue-id="8dd740cc-1" showBorder="{{true}}" bgColor="transparent" class="data-v-57280228" bind:__l="__l" vue-slots="{{['top']}}"><view class="detail-top data-v-57280228" slot="top"><view class="top-left data-v-57280228"><image src="/static/images/catalogue_icon.png" class="data-v-57280228"></image></view><view class="top-text data-v-57280228">团蜂电子名片</view></view></capsule><view class="seat data-v-57280228"></view><view class="box-bg data-v-57280228"></view><view class="container data-v-57280228"><view class="empty-box data-v-57280228"><image src="/static/images/empty-card.png" class="data-v-57280228"></image><text class="data-v-57280228">暂未添加名片</text></view><view class="card-btn data-v-57280228"><button data-event-opts="{{[['tap',[['addCard',['$event']]]]]}}" bindtap="__e" class="data-v-57280228">+    新增名片</button></view></view><tui-drawer vue-id="8dd740cc-2" mode="left" visible="{{visible}}" data-event-opts="{{[['^close',[['closeDrawer']]]]}}" bind:close="__e" class="data-v-57280228" bind:__l="__l" vue-slots="{{['default']}}"><view class="d-container data-v-57280228" style="{{'margin-top:'+(top+'rpx')+';'}}"><view class="d-image data-v-57280228"><image src="/static/header_image.png" class="data-v-57280228"></image><text class="data-v-57280228">摘星辰</text></view><view data-event-opts="{{[['tap',[['quitLogin',['$event']]]]]}}" class="quit data-v-57280228" bindtap="__e">退出登录</view></view></tui-drawer></view>

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

@@ -25,51 +25,89 @@
 /* 透明度 */
 /* 文章场景相关 */
 .index.data-v-57280228 {
+  width: 100vw;
   min-height: 100vh;
-  background-color: #f5f5f5;
-  box-sizing: border-box;
-}
-.index .contant.data-v-57280228 {
-  height: calc(100vh - env(safe-area-inset-bottom));
-  box-sizing: border-box;
-  background-color: #fff;
+  background-color: #F1F1F1;
 }
-.index .contant .header.data-v-57280228 {
-  position: relative;
+.index .detail-top.data-v-57280228 {
   width: 100%;
-  height: 80rpx;
+  height: 100%;
+  position: relative;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: flase;
+  gap: 0rpx;
 }
-.index .contant .header .header-icon.data-v-57280228 {
+.index .detail-top .top-left.data-v-57280228 {
   position: absolute;
+  left: 28rpx;
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  left: 30rpx;
 }
-.index .contant .header .header-icon image.data-v-57280228 {
-  width: 50rpx;
-  height: 50rpx;
+.index .detail-top .top-left image.data-v-57280228 {
+  width: 48rpx;
+  height: 48rpx;
   display: block;
 }
-.index .contant .header .header-title.data-v-57280228 {
-  text-align: center;
-  line-height: 80rpx;
+.index .detail-top .top-text.data-v-57280228 {
   font-size: 32rpx;
+  font-weight: 600;
+  color: #000;
 }
-.index .contant .main.data-v-57280228 {
-  padding: 20rpx 30rpx;
+.index .seat.data-v-57280228 {
+  width: 100%;
+  height: 16rpx;
+}
+.index .box-bg.data-v-57280228 {
+  width: 100%;
+  height: 393rpx;
+  background-image: linear-gradient(to bottom, #8CCBFF 0%, #CDE9FF 71%, #F1F1F1 100%);
+  position: fixed;
+  top: 0;
+  left: 0;
 }
-.index .contant .main .add-card.data-v-57280228 {
+.index .container.data-v-57280228 {
   width: 100%;
-  height: 200rpx;
-  border: 1px solid #a3a3a3;
-  border-radius: 10rpx;
+  padding: 28rpx 32rpx 28rpx 28rpx;
+  box-sizing: border-box;
+}
+.index .container .empty-box.data-v-57280228 {
+  width: 100%;
+  height: 649rpx;
+  padding-top: 260rpx;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 20rpx;
-  color: #3a8fff;
-  font-size: 30rpx;
+  flex-direction: column;
+  gap: 6rpx;
+}
+.index .container .empty-box image.data-v-57280228 {
+  width: 280rpx;
+  height: 297rpx;
+  display: block;
+}
+.index .container .empty-box text.data-v-57280228 {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #3A495F;
+}
+.index .container .card-btn.data-v-57280228 {
+  width: 100%;
+}
+.index .container .card-btn button.data-v-57280228 {
+  width: 100%;
+  height: 98rpx;
+  background: linear-gradient(98deg, #0E83FF 0%, #0E3EFF 100%);
+  text-align: center;
+  line-height: 98rpx;
+  border-radius: 16rpx;
+  margin-top: 24rpx;
+  font-size: 28rpx;
+  color: #FFFFFF;
 }
 .index .d-container.data-v-57280228 {
   box-sizing: border-box;

unpackage/dist/dev/mp-weixin/pages/establish/index.json → unpackage/dist/dev/mp-weixin/pages_module/establish/index.json

@@ -6,6 +6,7 @@
     "tui-form": "/components/thorui/tui-form/tui-form",
     "tui-form-item": "/components/thorui/tui-form-item/tui-form-item",
     "tui-input": "/components/thorui/tui-input/tui-input",
-    "tui-textarea": "/components/thorui/tui-textarea/tui-textarea"
+    "tui-textarea": "/components/thorui/tui-textarea/tui-textarea",
+    "card-com": "/components/cardCom/index"
   }
 }

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

@@ -0,0 +1,128 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.establish .establish-box .business-style.data-v-fa4f4b7c, .establish .establish-box .basic-info.data-v-fa4f4b7c, .establish .establish-box .contact-mode.data-v-fa4f4b7c, .establish .establish-box .personal-brief.data-v-fa4f4b7c, .establish .establish-box .company-brief.data-v-fa4f4b7c {
+  margin-top: 20rpx;
+  border-radius: 10rpx;
+  padding: 30rpx 20rpx;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.establish .establish-box .business-style .business-title.data-v-fa4f4b7c, .establish .establish-box .contact-mode .mode-title.data-v-fa4f4b7c, .establish .establish-box .personal-brief .brief-title.data-v-fa4f4b7c, .establish .establish-box .company-brief .company-title.data-v-fa4f4b7c {
+  border-bottom: 1rpx solid #ccc;
+  font-size: 30rpx;
+  color: #000;
+  font-weight: 600;
+  padding-bottom: 20rpx;
+}
+.establish.data-v-fa4f4b7c {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+.establish .establish-box.data-v-fa4f4b7c {
+  padding: 30rpx;
+  box-sizing: border-box;
+}
+.establish .establish-box .business-card.data-v-fa4f4b7c {
+  width: 100%;
+  height: 400rpx;
+  background-color: aquamarine;
+  border-radius: 20rpx;
+}
+.establish .establish-box .business-style .style-list.data-v-fa4f4b7c {
+  margin-top: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+}
+.establish .establish-box .business-style .style-list .style-item.data-v-fa4f4b7c {
+  flex: 1;
+  position: relative;
+}
+.establish .establish-box .business-style .style-list .style-item .style-icon.data-v-fa4f4b7c {
+  position: absolute;
+  right: 16rpx;
+  bottom: 16rpx;
+}
+.establish .establish-box .business-style .style-list .style-item .style-icon image.data-v-fa4f4b7c {
+  width: 24rpx;
+  height: 24rpx;
+}
+.establish .establish-box .business-style .style-list .style-item > image.data-v-fa4f4b7c {
+  width: 100%;
+  height: 135rpx;
+}
+.establish .establish-box .basic-info .info-title.data-v-fa4f4b7c {
+  border-bottom: 1rpx solid #ccc;
+  font-size: 30rpx;
+  color: #000;
+  font-weight: 600;
+  padding-bottom: 20rpx;
+}
+.establish .establish-box .company-brief.data-v-fa4f4b7c {
+  margin-bottom: calc(112rpx + constant(safe-area-inset-bottom));
+  margin-bottom: calc(112rpx + env(safe-area-inset-bottom));
+}
+.establish .footer.data-v-fa4f4b7c {
+  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;
+}
+.establish .footer .btn-list.data-v-fa4f4b7c {
+  width: 100%;
+  height: 112rpx;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.establish .footer .btn-list view.data-v-fa4f4b7c {
+  width: 333rpx;
+  height: 88rpx;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  text-align: center;
+  line-height: 88rpx;
+}
+.establish .footer .btn-list view.data-v-fa4f4b7c:nth-of-type(1) {
+  color: #1472ff;
+  border: 2rpx solid #1472ff;
+  box-sizing: border-box;
+}
+.establish .footer .btn-list view.data-v-fa4f4b7c:nth-of-type(2) {
+  background-color: #1472ff;
+  color: #ffffff;
+}
+

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

@@ -9,7 +9,7 @@
       "list": [
         {
           "name": "创建名片",
-          "pathName": "pages/establish/index",
+          "pathName": "pages_module/establish/index",
           "query": "",
           "launchMode": "default",
           "scene": null

utils/index.js

@@ -0,0 +1,29 @@
+/**
+ * 提示框
+ * @param {string} title 显示的标题
+ * @param {string} icon 显示的 icon
+ * @param {number} icon 显示的毫秒数
+ */
+export const showToast = (title, icon = "none", time = 2000) => {
+  uni.showToast({
+    title: title,
+    icon: icon,
+    duration: time,
+  });
+};
+
+/**
+ * 显示隐藏加载的 loading 状态
+ * @param {string} title 显示的标题
+ */
+
+export const loading = {
+  show(title) {
+    uni.showLoading({
+      title: title || "加载中",
+    });
+  },
+  hide() {
+    uni.hideLoading();
+  },
+};