update

mobile-code/src/components/plugin/bottom-popup.vue

@@ -3,7 +3,7 @@
 		<view class="tui-popup-class tui-bottom-popup" :class="{'tui-popup-show':show}" :style="{background:bgcolor,height:height?height+'rpx':'auto'}">
 			<slot></slot>
 		</view>
-		<view class="tui-popup-mask" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
+		<view class="tui-popup-mask" :style="{background: maskBgcolor}" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
 	</view>
 </template>
 
@@ -26,6 +26,11 @@ export default {
 			type: String,
 			default: '#fff'
 		},
+		// 蒙版背景颜色
+		maskBgcolor: {
+			type: String,
+			default: 'rgba(0, 0, 0, 0.6)'
+		},
 		// 高度 rpx
 		height: {
 			type: Number,
@@ -43,7 +48,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 	.tui-bottom-popup {
 		width: 100%;
 		position: fixed;
@@ -56,6 +61,8 @@ export default {
 		transform-origin: center;
 		transition: all 0.3s ease-in-out;
 		min-height: 20rpx;
+        // 适配iphoneX
+		padding-bottom: env(safe-area-inset-bottom);
 	}
 
 	.tui-popup-show {

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

@@ -1,6 +1,6 @@
 <template>
 	<view class="tui-tabs-view" :class="[isFixed?'tui-tabs-fixed':'tui-tabs-relative',unlined?'tui-unlined':'']" :style="{height:height+'rpx',padding:`0 ${padding}rpx`,background:bgColor,top:isFixed?top+'px':'auto'}">
-		<view v-for="(item,index) in tabs" :key="index" class="tui-tabs-item" :style="{width:itemWidth}" @tap.stop="swichTabs(index)">
+		<view v-for="(item,index) in tabs" :key="index" class="tui-tabs-item" :class="{'border-left': borderLeft}" :style="{width:itemWidth}" @tap.stop="swichTabs(index)">
 			<view class="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}" :style="{color:currentTab==index?selectedColor:color,fontSize:size+'rpx',lineHeight:size+'rpx',fontWeight:bold && currentTab==index?'bold':'normal'}">{{item.name}}</view>
 		</view>
 		<view class="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:sliderWidth+'rpx',height:
@@ -46,7 +46,7 @@ export default {
 			default: 0, // #endif
 			// #ifdef H5
 
-			default: 44
+			default: 0
 			// #endif
 		},
 		// 是否去掉底部线条
@@ -107,6 +107,11 @@ export default {
 		bold: {
 			type: Boolean,
 			default: false
+		},
+		// 是否显示borer-right
+		borderLeft: {
+			type: Boolean,
+			default: false
 		}
 	},
 	watch: {
@@ -167,6 +172,16 @@ export default {
 		align-items: center;
 		justify-content: space-between;
 		z-index: 99;
+		.tui-tabs-item {
+			&.border-left {
+				border-left: 2px solid #ddd;
+			}
+		}
+		.tui-tabs-item:first-child {
+			&.border-left {
+				border-left: none;
+			}
+		}
 	}
 
 	.tui-tabs-relative {

mobile-code/src/manifest.json

@@ -38,7 +38,7 @@
             "publicPath" : "/"
         },
         "devServer": {
-            "host": "bd.meijiabang.com",
+            // "host": "bd.meijiabang.com",
             "port": 80,
             "proxy": {
                 "/api": {

mobile-code/src/pages/category/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="container">
+	<div class="app-main app-content">
 		<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" :style="{height:height+'px'}">
 			<div v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichNav">
 				<text>{{item}}</text>

mobile-code/src/pages/coupon/list.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="app-content coupon-list">
-		<div class="tabs-wrap">
-			<app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="33.3333%" />
-		</div>
+		<!-- <div class="tabs-wrap"> -->
+			<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="33.3333%" />
+		<!-- </div> -->
 		<div class="list-wrap" :class="{'expired' : tabIndex == 2}">
 			<div class="list" v-for="(item, index) in 4" :key="index">
 				<div class="list-img">
@@ -86,10 +86,10 @@ export default {
 <style lang="scss" scoped>
 	.coupon-list {
 		position: relative;
-		.tabs-wrap {
-			position: absolute;
-			width: 100%;
-		}
+		// .tabs-wrap {
+		// 	position: absolute;
+		// 	width: 100%;
+		// }
 		.list-wrap {
 			padding: 100px 22px 0;
 			.list {
@@ -126,6 +126,10 @@ export default {
 								margin: 4px 0;
 							}
 						}
+						.button-com {
+							padding-top: 15px;
+							padding-bottom: 15px;
+						}
 						.icon-wrap {
 							position: absolute;
 							top: 20px;

mobile-code/src/pages/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="app-content">
+	<div class="app-main app-content">
 		<button @click="toPay">去支付页</button>
 		<button @click="$util.pageTo('/pages/callback/index')">支付回调</button>
 		<!-- <app-footer /> -->

mobile-code/src/pages/order/list.vue

@@ -10,9 +10,9 @@
 			</div>
 			<div class="list-bottom flex-center-between">
 				<div>
-                    <span>应付金额：</span>
-                    <span class="app-size-30 app-bold">¥580.00</span>
-                </div>
+					<span>应付金额：</span>
+					<span class="app-size-30 app-bold">¥580.00</span>
+				</div>
 				<div class="button-com success">立即付款</div>
 			</div>
 		</div>
@@ -41,17 +41,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-content {
-    padding-top: 20px;
-    padding-bottom: 1px;
-	.list-wrap {
-        padding: 0 30px;
-        background-color: #fff;
-        margin-bottom: 20px;
-        .list-top, .list-bottom {
-            padding: 20px 0;
-            border-bottom: 1px solid $borderColor;
-        }
+	.app-content {
+		padding-top: 20px;
+		padding-bottom: 1px;
+		.list-wrap {
+			padding: 0 30px;
+			background-color: #fff;
+			margin-bottom: 20px;
+			.list-top,
+			.list-bottom {
+				padding: 20px 0;
+				border-bottom: 1px solid $borderColor;
+				.button-com {
+					padding-top: 15px;
+					padding-bottom: 15px;
+				}
+			}
+		}
 	}
-}
 </style>

mobile-code/src/pages/pay/components/keyboard.vue

@@ -0,0 +1,106 @@
+<template>
+	<div class="keyboard">
+		<bottom-popup class="popup-wrap" :show="show" maskBgcolor="none" @close="comfirm">
+			<div class="ui-keyboard">
+				<ul class="ui-keyboard-numbers">
+					<li :class="{'zero': item == 0}" v-for="(item, index) in keyLeftData" :key="index" @click="clickKeyFn(item)">{{ item }}</li>
+				</ul>
+				<ul class="ui-keyboard-btn">
+					<li class="btn-del" @click="del">&lt;</li>
+					<li class="btn-ok" @click="comfirm">完成</li>
+				</ul>
+			</div>
+		</bottom-popup>
+	</div>
+</template>
+
+<script>
+import bottomPopup from '@/components/plugin/bottom-popup'
+export default {
+	name: 'keyboard',
+	components: {
+		bottomPopup
+	},
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			keyLeftData: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
+		}
+	},
+	methods: {
+		close() {
+			this.$emit('comfirm')
+		},
+		// 点击数字键盘
+		clickKeyFn(val) {
+			this.$emit('clickKey', val)
+		},
+		// 确认
+		comfirm() {
+			this.$emit('comfirm')
+		},
+		// 删除
+		del() {
+			this.$emit('del')
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    .popup-wrap {
+        .ui-keyboard {
+            @include disFlex(center, center);
+            padding: 0 20px 20px 20px;
+            background-color: $backColor;
+            box-shadow: 0 -8px 16px #ddd;
+            // 左侧键盘
+            .ui-keyboard-numbers {
+                width: 78%;
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                li {
+                    width: calc(33.33% - 20px);
+                }
+                li.zero {
+                    width: calc(66.66% - 20px);
+                }
+            }
+            // 右侧键盘
+            .ui-keyboard-btn {
+                width: 22%;
+                li {
+                    margin-right: 0;
+                }
+                li.btn-ok {
+                    height: 310px;
+                    color: #fff;
+                    background-color: $mainColor;
+                    // line-height: 310px
+                }
+            }
+            li {
+                @include disFlex(center, center);
+                height: 90px;
+                // line-height: 90px;
+                text-align: center;
+                border-radius: 10px;
+                background-color: #fff;
+                margin-top: 20px;
+                margin-right: 20px;
+                font-size: 38px;
+                font-weight: bold;
+                box-shadow: 0 2px 10px #ddd;
+            }
+            li:active {
+                background-color: rgba(0, 0, 0, 0.1);
+            }
+        }
+    }
+</style>

mobile-code/src/pages/pay/components/pay-input.vue

@@ -0,0 +1,134 @@
+<template>
+	<div class="pay-module">
+		<div @click="focusFn">
+			<div class="pay-tit">金额(元)</div>
+			<div class="pay-wrap">
+				<span class="money-text">￥</span>
+				<span type="text" class="cashier-text" v-if="val || focus">{{ val }}</span>
+                <span class="cashier-text prompt" v-else>请输入金额</span>
+				<i class="cursor" v-show="focus"></i>
+			</div>
+		</div>
+		<keyboard-module :show="keyShow" @comfirm="hideKeyFn" @clickKey="clickKeyFn" @del="delFn" />
+	</div>
+</template>
+
+<script>
+import keyboardModule from './keyboard'
+export default {
+	name: 'pay-input',
+	components: {
+		keyboardModule
+	},
+	props: {
+		num: {
+			type: String,
+			default: ''
+		},
+		// 输入框动画
+		focus: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			val: '',
+			keyShow: false
+		}
+	},
+	watch: {
+		num(val) {
+			this.val = val
+		},
+		focus(val) {
+			this.keyShow = val
+		}
+	},
+	methods: {
+		focusFn() {
+			this.$emit('focusFn')
+		},
+		hideKeyFn() {
+			this.$emit('blurFn')
+		},
+		// 点击键盘
+		clickKeyFn(e) {
+			let total = this.val + e
+			this.$emit('clickKey', total)
+		},
+		// 键盘删除
+		delFn() {
+			let total = this.val.substr(0, this.val.length - 1)
+			this.$emit('clickKey', total)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.pay-module {
+		.pay-tit {
+			margin-bottom: 36px;
+		}
+		.pay-wrap {
+			@include disFlex(flex-end, flex-start);
+			font-weight: bold;
+			border-bottom: 4px solid $borderColor;
+			padding-bottom: 38px;
+			font-family: TextaAlt, serif;
+			height: 70px;
+			.money-text {
+				font-size: 36px;
+			}
+			.cashier-text {
+				font-size: 70px;
+				line-height: 1;
+				margin-left: 8px;
+                margin-right: 6px;
+                &.prompt {
+                    color: $fontColor3;
+                }
+            }
+			.cursor {
+				position: relative;
+				top: 1px;
+				width: 4px;
+				height: 100%;
+				background: $mainColor;
+				display: inline-block;
+				-webkit-animation: inputCursorAnimation 1s infinite;
+				-moz-animation: inputCursorAnimation 1s infinite;
+				animation: inputCursorAnimation 1s infinite;
+			}
+		}
+	}
+
+	// 输入框动画
+	@-webkit-keyframes inputCursorAnimation {
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@-moz-keyframes inputCursorAnimation {
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes inputCursorAnimation {
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+</style>

mobile-code/src/pages/pay/index.vue

@@ -1,11 +1,38 @@
 <template>
-	<div>
-		<input class="uni-input" name="withdradesc" type="number" v-model="amount" placeholder="请输入金额" />
-		<button @click="save">提交</button>
+	<div class="app-content">
+		<!-- <div class="tabs-wrap"> -->
+		<app-tabs :tabs="tabs" :currentTab="tabIndex" :isFixed="true" :borderLeft="true" @change="tabChange" itemWidth="50%" />
+		<!-- </div> -->
+		<!-- 直接付款 -->
+		<template v-if="true">
+			<div class="logo-wrap">
+				<div class="logo-img">
+					<img src="../../static/images/user/attr-default.png" alt mode="widthFix" />
+				</div>
+				<div class="app-size-30">国兰花尚</div>
+			</div>
+			<div class="pay-input-wrap">
+				<pay-input-module :focus="inpFocus" :num="amount" @focusFn="focusFn" @blurFn="blurFn" @clickKey="clickKeyFn" />
+				<div class="balance">
+					<span>账户余额 ¥</span>
+					<span class="app-size-30">2872.09</span>
+				</div>
+				<!-- 按钮 -->
+				<div class="btn-wrap">
+					<div class="button-com success">余额支付</div>
+					<div class="button-com success">微信支付</div>
+				</div>
+			</div>
+		</template>
+		<!-- 我要配送 -->
+		<template v-else></template>
+		<!-- <button @click="_pay">提交</button> -->
 	</div>
 </template>
 
 <script>
+import appTabs from '@/components/plugin/tabs'
+import payInputModule from './components/pay-input'
 import { getMiniAppUrl } from '@/utils/common'
 import { getCheckLogin } from '@/utils/auth'
 import wexinPay from '@/utils/pay/wxPay'
@@ -13,11 +40,26 @@ import { pay } from '@/api/pay'
 import { oauth } from '@/api/login'
 export default {
 	name: 'pay',
+	components: {
+		appTabs,
+		payInputModule
+	},
 	data() {
 		return {
 			constant: this.$constant,
 			option: '',
-			amount: 10
+			amount: '',
+			inpFocus: false,
+			// tab
+			tabIndex: 0,
+			tabs: [
+				{
+					name: '直接付款'
+				},
+				{
+					name: '我要配送'
+				}
+			]
 		}
 	},
 	onLoad(option) {
@@ -25,7 +67,7 @@ export default {
 			account: 12358,
 			shopId: 15680
 		}
-		this.init()
+		// this.init()
 	},
 	methods: {
 		init() {
@@ -39,7 +81,7 @@ export default {
 				}
 			})
 		},
-		save() {
+		_pay() {
 			let params = {
 				prePrice: this.amount,
 				sourceType: 1,
@@ -52,6 +94,22 @@ export default {
 				// window.location.href = res.data.pay_button.mweb_url
 			})
 		},
+		// tab切换
+		tabChange(e) {
+			this.tabIndex = e.index
+		},
+		// 点击输入框
+		focusFn() {
+			this.inpFocus = true
+		},
+		// 失焦
+		blurFn() {
+			this.inpFocus = false
+		},
+		// 点击键盘
+		clickKeyFn(val) {
+			this.amount = val
+		},
 		// 支付成功
 		paySuccess() {
 			alert('支付成功!')
@@ -64,9 +122,33 @@ export default {
 </script>
 
 <style lang="scss">
-	.uni-input {
-		border: 1px solid #666;
-		margin-bottom: 20px;
-		padding-left: 10px;
+	.logo-wrap {
+		padding-top: 170px;
+		padding-bottom: 60px;
+		text-align: center;
+		.logo-img {
+			width: 120px;
+			margin: 0 auto 20px;
+		}
+	}
+	.pay-input-wrap {
+		background-color: #fff;
+		border-top-left-radius: 20px;
+		border-top-right-radius: 20px;
+		padding: 50px 80px 28px;
+		.balance {
+			margin-top: 30px;
+			color: $fontColor2;
+		}
+		.btn-wrap {
+			width: 100%;
+			margin-top: 64px;
+			.button-com {
+				display: block;
+				margin-bottom: 20px;
+				padding-top: 30px;
+				padding-bottom: 30px;
+			}
+		}
 	}
 </style>

mobile-code/src/pages/shop/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="app-content">
+	<div class="app-main app-content">
 		<app-swiper />
 		<div class="shop-wrap">
 			<div class="shop-tit">国兰华尚</div>

mobile-code/src/pages/user/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="app-content">
+	<div class="app-main app-content">
 		<div class="user-wrap">
 			<!-- 未登录 -->
 			<template v-if="true">
@@ -289,8 +289,8 @@ export default {
 				margin: 0 auto;
 				.button-com {
 					width: calc(100% - 60px);
-					height: 70px;
-					line-height: 70px;
+					height: 50px;
+					line-height: 50px;
 					text-align: center;
 					font-size: 32px;
 				}

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

@@ -5,6 +5,9 @@
     // line-height: 1;
     background-color: $backColor;
     min-height: 100vh;
+    &.app-main {
+        min-height: calc(100vh - 100px);
+    }
 }
 .gray_txt {
     color: #999 !important;

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

@@ -47,11 +47,12 @@ page, body {
 	display: inline-block;
     color: $mainColor;
     font-size: 28px;
-    padding: 10px 30px;
+    padding: 20px 30px;
 	background-color: #fff;
 	border-radius: 60px;
 	border: 1px solid $mainColor;
 	text-align: center;
+	line-height: 1;
 }
 .button-com.success {
 	color: #fff;