update

mobile-code/src/components/plugin/modal.vue

@@ -3,11 +3,18 @@
 		<view class="tui-modal-box" :style="{width:width,padding:padding,borderRadius:radius,background:bgcolor}" :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-modal-content" :class="[title?'':'tui-mtop']">
+					<block v-if="content">
+						<div :style="{color:color,fontSize:size+'rpx'}">{{content}}</div>
+					</block>
+					<block v-else>
+						<slot name="content"></slot>
+					</block>
+				</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>
+						<button class="tui-modal-btn" :class="['tui-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':'primary')+'-hover'" :data-index="index" @tap="handleClick">{{item.text || "确定"}}</button>
 					</block>
 				</view>
 			</view>
@@ -35,7 +42,7 @@ export default {
 		},
 		padding: {
 			type: String,
-			default: '40rpx 64rpx'
+			default: '40rpx 30rpx'
 		},
 		radius: {
 			type: String,
@@ -76,11 +83,9 @@ export default {
 			default: function() {
 				return [{
 					text: '取消',
-					type: 'red',
 					plain: true // 是否空心
 				}, {
 					text: '确定',
-					type: 'red',
 					plain: false
 				}]
 			}
@@ -122,14 +127,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 	.tui-modal-box {
 		position: fixed;
 		left: 50%;
 		top: 50%;
 		margin: auto;
 		background: #fff;
-		z-index: 9999998;
+		z-index: 9998;
 		transition: all 0.3s ease-in-out;
 		opacity: 0;
 		box-sizing: border-box;
@@ -156,7 +161,7 @@ export default {
 		right: 0;
 		bottom: 0;
 		background: rgba(0, 0, 0, 0.6);
-		z-index: 9999996;
+		z-index: 9996;
 		transition: all 0.3s ease-in-out;
 		opacity: 0;
 		visibility: hidden;
@@ -169,17 +174,15 @@ export default {
 
 	.tui-modal-title {
 		text-align: center;
-		font-size: 34rpx;
+		font-size: 40rpx;
 		color: #333;
-		padding-top: 20rpx;
-		font-weight: bold;
 	}
 
 	.tui-modal-content {
 		text-align: center;
-		color: #999;
-		font-size: 28rpx;
-		padding-top: 20rpx;
+		// color: #999;
+		font-size: 24rpx;
+		padding-top: 50rpx;
 		padding-bottom: 60rpx;
 	}
 
@@ -204,11 +207,11 @@ export default {
 
 	.tui-modal-btn {
 		width: 46%;
-		height: 68rpx;
-		line-height: 68rpx;
+		height: 90rpx;
+		line-height: 90rpx;
 		position: relative;
-		border-radius: 10rpx;
-		font-size: 24rpx;
+		border-radius: 4rpx;
+		font-size: 32rpx;
 		overflow: visible;
 		margin-left: 0;
 		margin-right: 0;
@@ -225,7 +228,7 @@ export default {
 		transform: scale(0.5, 0.5);
 		left: 0;
 		top: 0;
-		border-radius: 20rpx;
+		border-radius: 4rpx;
 	}
 
 	.tui-btn-width {
@@ -233,7 +236,7 @@ export default {
 	}
 
 	.tui-primary {
-		background: #5677fc;
+		background: $mainColor;
 		color: #fff;
 	}
 
@@ -243,126 +246,12 @@ export default {
 	}
 
 	.tui-primary-outline {
-		color: #5677fc;
+		color: $mainColor;
 		background: none;
 	}
 
 	.tui-primary-outline::after {
-		border: 1px solid #5677fc;
-	}
-
-	.tui-danger {
-		background: #ed3f14;
-		color: #fff;
-	}
-
-	.tui-danger-hover {
-		background: #d53912;
-		color: #e5e5e5;
-	}
-
-	.tui-danger-outline {
-		color: #ed3f14;
-		background: none;
-	}
-
-	.tui-danger-outline::after {
-		border: 1px solid #ed3f14;
-	}
-
-	.tui-red {
-		background: #e41f19;
-		color: #fff;
-	}
-
-	.tui-red-hover {
-		background: #c51a15;
-		color: #e5e5e5;
-	}
-
-	.tui-red-outline {
-		color: #e41f19;
-		background: none;
-	}
-
-	.tui-red-outline::after {
-		border: 1px solid #e41f19;
-	}
-
-	.tui-warning {
-		background: #ff7900;
-		color: #fff;
-	}
-
-	.tui-warning-hover {
-		background: #e56d00;
-		color: #e5e5e5;
-	}
-
-	.tui-warning-outline {
-		color: #ff7900;
-		background: none;
-	}
-
-	.tui-warning-outline::after {
-		border: 1px solid #ff7900;
-	}
-
-	.tui-green {
-		background: #19be6b;
-		color: #fff;
-	}
-
-	.tui-green-hover {
-		background: #16ab60;
-		color: #e5e5e5;
-	}
-
-	.tui-green-outline {
-		color: #19be6b;
-		background: none;
-	}
-
-	.tui-green-outline::after {
-		border: 1px solid #19be6b;
-	}
-
-	.tui-white {
-		background: #fff;
-		color: #333;
-	}
-
-	.tui-white-hover {
-		background: #f7f7f9;
-		color: #666;
-	}
-
-	.tui-white-outline {
-		color: #333;
-		background: none;
-	}
-
-	.tui-white-outline::after {
-		border: 1px solid #333;
-	}
-
-	.tui-gray {
-		background: #ededed;
-		color: #999;
-	}
-
-	.tui-gray-hover {
-		background: #d5d5d5;
-		color: #898989;
-	}
-
-	.tui-gray-outline {
-		color: #999;
-		background: none;
-	}
-
-	.tui-gray-outline::after {
-		border: 1px solid #999;
+		border: 1px solid $mainColor;
 	}
 
 	.tui-outline-hover {

mobile-code/src/pages.json

@@ -72,25 +72,25 @@
 	},
 	"tabBar": {
 		"color": "#C0C4CC",
-		"selectedColor": "#fa436a",
+		"selectedColor": "#3385FF",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{
 				"pagePath": "pages/admin/workbench",
-				"iconPath": "static/images/common/home-no.png",
-				"selectedIconPath": "static/images/common/home-is.png",
+				"iconPath": "static/images/admin/workbench-no.png",
+				"selectedIconPath": "static/images/admin/workbench-is.png",
 				"text": "工作台"
 			},
 			{
 				"pagePath": "pages/admin/order",
-				"iconPath": "static/images/common/category-no.png",
-				"selectedIconPath": "static/images/common/category-is.png",
+				"iconPath": "static/images/admin/order-no.png",
+				"selectedIconPath": "static/images/admin/order-is.png",
 				"text": "订单"
 			},
 			{
 				"pagePath": "pages/admin/member",
-				"iconPath": "static/images/common/shop-no.png",
-				"selectedIconPath": "static/images/common/shop-is.png",
+				"iconPath": "static/images/admin/member-no.png",
+				"selectedIconPath": "static/images/admin/member-is.png",
 				"text": "客户"
 			}
 		]

mobile-code/src/pages/member/detail.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="app-content">
 		<!-- 客户信息 -->
-		<!-- <div class="module-com user-info">
+		<div class="module-com user-info">
 			<div class="user-wrap">
 				<app-avatar-module />
 				<div class="user-top-right">
@@ -23,18 +23,18 @@
 					<div class="app-color-3">{{ item.name }}</div>
 				</div>
 			</div>
-		</div> -->
+		</div>
 		<!-- 客户按钮 -->
 		<div class="module-com tabs-wrap">
-			<div class="tabs-list" v-for="(item, index) in tabsData" :key="index">
+			<div class="tabs-list" v-for="(item, index) in tabsData" :key="index" @click="$util.pageTo(item)">
 				<div class="tabs-img">
-					<img :src="item.img" alt="" mode="widthFix" >
+					<img :src="item.img" alt mode="widthFix" />
 				</div>
 				<div class="tabs-name">{{ item.name }}</div>
 			</div>
 		</div>
 		<!-- 备注 -->
-		<!-- <div class="module-com remark-wrap">
+		<div class="module-com remark-wrap">
 			<div class="app-blod">备注</div>
 			<div class="list-wrap">
 				<div class="list-line" v-for="(item, index) in 3" :key="index">
@@ -44,9 +44,9 @@
 					</div>
 				</div>
 			</div>
-		</div> -->
+		</div>
 		<!-- 消费记录 -->
-		<!-- <div class="module-com remark-wrap">
+		<div class="module-com remark-wrap">
 			<div class="app-blod">消费记录</div>
 			<div class="list-wrap">
 				<div class="list-line" v-for="(item, index) in 3" :key="index">
@@ -58,13 +58,53 @@
 				</div>
 			</div>
 			<div class="more-text">更多 ></div>
-		</div> -->
+		</div>
+		<!-- 充值弹窗 -->
+		<modal-module :show="rechargeModal" @cancel="modalCancel" @click="modalClick" title="充值" padding="30rpx 30rpx">
+			<template v-slot:content>
+				<div class="app-modal-input-wrap">
+					<div class="inp-list-line">
+						<div class="line-label">充值金额</div>
+						<div class="line-input">
+							<input type="text" class="inp-input">
+							<div class="inp-prompt">元</div>
+						</div>
+					</div>
+					<div class="inp-list-line">
+						<div class="line-label">确认密码</div>
+						<div class="line-input">
+							<input type="text" class="inp-input">
+						</div>
+					</div>
+				</div>
+			</template>
+		</modal-module>
+		<!-- 升级 -->
+		<modal-module :show="upgradeModal" @cancel="modalCancel" @click="modalClick" title="升级" padding="30rpx 30rpx">
+			<template v-slot:content>
+				<div class="app-modal-input-wrap">
+					<div class="inp-list-line">
+						<div class="line-label">请选择等级</div>
+						<div class="line-input">
+							<div class="inp-select">1级</div>
+						</div>
+					</div>
+					<div class="inp-list-line">
+						<div class="line-label">确认密码</div>
+						<div class="line-input">
+							<input type="text" class="inp-input">
+						</div>
+					</div>
+				</div>
+			</template>
+		</modal-module>
 	</div>
 </template>
 
 <script>
 import appVipModule from '@/components/module/app-vip'
 import appAvatarModule from '@/components/module/app-avatar'
+import modalModule from '@/components/plugin/modal'
 // img
 import tabIcon1 from '@/static/images/member/tab-icon-1.png'
 import tabIcon2 from '@/static/images/member/tab-icon-2.png'
@@ -78,11 +118,16 @@ export default {
 	name: 'member-detail',
 	components: {
 		appVipModule,
-		appAvatarModule
+		appAvatarModule,
+		modalModule
 	},
 	props: {},
 	data() {
 		return {
+			rechargeModal: false,
+			passwordModal: false,
+			upgradeModal: false,
+			remarkModal: false,
 			// 用户资金情况
 			fundsData: [
 				{
@@ -122,22 +167,30 @@ export default {
 				{
 					name: '备注',
 					img: tabIcon4,
-					url: '/pages/coupon/list'
+					funtion: () => {
+						this.remarkModal = true
+					}
 				},
 				{
 					name: '充值',
 					img: tabIcon5,
-					url: '/pages/coupon/list'
+					funtion: () => {
+						this.rechargeModal = true
+					}
 				},
 				{
 					name: '重置密码',
 					img: tabIcon6,
-					url: '/pages/coupon/list'
+					funtion: () => {
+						this.passwordModal = true
+					}
 				},
 				{
 					name: '升级',
 					img: tabIcon7,
-					url: '/pages/coupon/list'
+					funtion: () => {
+						this.upgradeModal = true
+					}
 				},
 				{
 					name: '发消息',
@@ -146,6 +199,21 @@ export default {
 				}
 			]
 		}
+	},
+	methods: {
+		// 弹窗按钮
+		modalClick(e) {
+			console.log(e)
+			if (e.index === 0) {
+				this.modalCancel()
+			}
+		},
+		modalCancel() {
+			this.rechargeModal = false
+			this.passwordModal = false
+			this.upgradeModal = false
+			this.remarkModal = false
+		}
 	}
 }
 </script>
@@ -235,7 +303,7 @@ export default {
 				@include disFlex(center, space-between);
 				margin-top: 10px;
 				padding: 16px 20px;
-				background-color: #F7F7F8;
+				background-color: #f7f7f8;
 				color: $fontColor2;
 				border-radius: 4px;
 				.iconfont {

mobile-code/src/static/css/common.scss

@@ -129,24 +129,24 @@ body {
     }
 }
 
-// ======================= 输入框公共样式 =========================
+// ======================= 输入框公共样式 - start ====================
 .input-line-wrap {
-	// 公共
-	.line-cell {
-		.tui-title {
-			width: 210px;
-			color: $fontColor2;
-		}
-		.tui-input {
-			width: calc(100% - 210px);
-			font-size: 28px;
-		}
-		.tui-placeholder {
-			color: #ccc;
-		}
-		.phcolor {
-			color: #ccc;
-		}
+    // 公共
+    .line-cell {
+        .tui-title {
+            width: 210px;
+            color: $fontColor2;
+        }
+        .tui-input {
+            width: calc(100% - 210px);
+            font-size: 28px;
+        }
+        .tui-placeholder {
+            color: #ccc;
+        }
+        .phcolor {
+            color: #ccc;
+        }
     }
     .prompt-text {
         color: $fontColor3;
@@ -166,6 +166,65 @@ body {
         }
     }
 }
+// ======================= 输入框公共样式 - end ====================
+
+// ======================= 弹窗输入框公共样式 - start ====================
+.app-modal-input-wrap {
+    width: 100%;
+    .inp-list-line {
+        width: 100%;
+        @include disFlex(center, space-between);
+        font-size: 32px;
+        margin-bottom: 20px;
+        color: $fontColor2;
+        text-align: left;
+        &:last-child {
+            margin-bottom: 0;
+        }
+        .line-label {
+            margin-right: 20px;
+            flex-shrink: 0;
+        }
+        .line-input {
+            width: 100%;
+            @include disFlex(center, center);
+            .inp-input,
+            .inp-select {
+                width: 100%;
+                height: 90px;
+                border: 2px solid $borderColor;
+                padding-left: 20px;
+                border-radius: 4px;
+                color: #333;
+            }
+            .inp-select {
+                position: relative;
+                line-height: 90px;
+                &:active {
+                    background-color: $backColor;
+                }
+                &::before {
+                    content: " ";
+                    height: 20px;
+                    width: 20px;
+                    border-width: 2px 2px 0 0;
+                    border-color: #BBBBBB;
+                    border-style: solid;
+                    transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+                    position: absolute;
+                    top: 50%;
+                    margin-top: -12px;
+                    right: 16px;
+                }
+            }
+            .inp-prompt {
+                flex-shrink: 0;
+                margin-left: 20px;
+            }
+        }
+    }
+}
+// ======================= 弹窗输入框公共样式 - end ====================
 
 // 带统计字数文本域
 .textarea_wrap {