update

mobile-code/src/official/apply.vue

@@ -34,29 +34,26 @@
 					<div class="tui-code" v-else @click="getCode">获取验证码</div>
 				</tui-list-cell>
 			</div>
-		</form>
-		<!-- 推荐人 -->
-		<div class="module-com recommend-wrap">
-            <div class="recommend-tag">手机号</div>
-            <div class="recommend-det">
-                <div class="recommend-img">
-                    <img src="" alt="推荐人头像">
-                </div>
-                <div class="recommend-info">
-                    <div class="app-size-32">雨非轩</div>
-                    <div class="app-color-2">福建省厦门市思明区后埭溪路5号</div>
-                </div>
-            </div>
-        </div>
-
-		<div class="btn-wrap">
-			<button class="admin-button-com blue big" formType="submit">确认</button>
-		</div>
+			<!-- 推荐人 -->
+			<div class="module-com recommend-wrap">
+				<div class="recommend-tag">手机号</div>
+				<div class="recommend-det">
+					<app-avatar-module src :width="78" alt="推荐人头像" />
+					<div class="recommend-info">
+						<div class="app-size-32">雨非轩</div>
+						<div class="app-color-2">福建省厦门市思明区后埭溪路5号</div>
+					</div>
+				</div>
+			</div>
 
-		<!-- 选择地区 -->
-		<app-area-sel :show="showRegion" @hide="hideAreaSel" @change="changeAreaFn" />
-		<!-- 省市联动 -->
-		<simple-address ref="simpleAddress" :region="orderShop.region" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityConfirm"></simple-address>
+			<div class="btn-wrap">
+				<button class="admin-button-com blue big" formType="submit">确认</button>
+			</div>
+			<!-- 选择地区 -->
+			<app-area-sel :show="showRegion" @hide="hideAreaSel" @change="changeAreaFn" />
+			<!-- 省市联动 -->
+			<simple-address ref="simpleAddress" :region="orderShop.region" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityConfirm"></simple-address>
+		</form>
 	</div>
 </template>
 
@@ -65,6 +62,7 @@ import { mapGetters } from 'vuex'
 import TuiListCell from '@/components/plugin/list-cell'
 import AppAreaSel from '@/components/app-area-sel'
 import SimpleAddress from '@/components/plugin/simple-address'
+import AppAvatarModule from '@/components/module/app-avatar'
 const form = require('@/utils/formValidation.js')
 // api
 import { sendSms } from '@/api/common'
@@ -73,7 +71,8 @@ export default {
 	components: {
 		TuiListCell,
 		AppAreaSel,
-		SimpleAddress
+		SimpleAddress,
+		AppAvatarModule
 	},
 	data() {
 		return {
@@ -103,6 +102,9 @@ export default {
 		...mapGetters({ orderShop: 'getOrderShop' })
 	},
 	methods: {
+		confirmFn() {
+			this.$util.pageTo('/official/pay')
+		},
 		// 验证码
 		getCode() {
 			if (!this.form.mobile || !this.$util.checkMobile(this.form.mobile)) {
@@ -206,7 +208,7 @@ export default {
 		.phcolor {
 			color: #ccc;
 		}
-    }
+	}
 	.btn-wrap {
 		width: 90%;
 		margin: 60px auto;
@@ -227,6 +229,23 @@ export default {
 			border-left: 1px solid $borderColor;
 			color: $mainColor;
 		}
-    }
-    // 推荐人
+	}
+	// 推荐人
+	.recommend-wrap {
+		padding: 30px 45px;
+		.recommend-tag {
+			font-size: 28px;
+			color: $fontColor2;
+			margin-bottom: 24px;
+		}
+		.recommend-det {
+			@include disFlex(center, flex-start);
+			.recommend-info {
+				margin-left: 20px;
+				.app-size-32 {
+					margin-bottom: 4px;
+				}
+			}
+		}
+	}
 </style>

mobile-code/src/official/callback.vue

@@ -0,0 +1,203 @@
+<template>
+	<!-- 官网各种回调页面 -->
+	<div class="app-content">
+		<div class="callback-wrap">
+			<div class="callback-blo" :class="{ 'paddingTop' : pageStatus == 7 }">
+				<block v-if="pageStatus == 7">
+                    <div class="module-wrap">
+                        <div class="module-tit">提示</div>
+                        <div class="module-det">
+                            <div class="module-list" v-for="(item, index) in promptData" :key="index">
+                                <span class="dot-wrap"></span>
+                                <span>{{ item }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </block>
+				<block v-else>
+					<!-- 使用icon -->
+					<!-- 成功 icon -->
+					<block v-if="pageStatus == 1">
+						<div class="status-img">
+							<img src="../static/images/callback/success.png" alt mode="widthFix" />
+						</div>
+					</block>
+					<!-- 使用图片 -->
+					<!-- 支付成功 -->
+					<block v-else>
+						<div class="icon">
+							<i class="iconfont icondaizhifu"></i>
+						</div>
+					</block>
+					<!-- prompt-wrap -->
+					<div class="prompt-wrap">
+						<block v-if="pageStatus == 1">
+							<div class="prompt-tit">恭喜您, 续订成功!</div>
+							<div>
+								<span class="app-color-2">你的帐号有效期已延长至:</span>
+								<span>2020-11-05 23:09</span>
+							</div>
+						</block>
+					</div>
+					<!-- qr-code -->
+					<div class="qr-code-wrap">
+						<div class="qr-code-img">
+							<img src="../static/images/extension.png" alt />
+						</div>
+						<div>识别二维码关注花卉宝</div>
+						<div>审核结果将通过微信通知您</div>
+					</div>
+				</block>
+				<!-- button -->
+				<div class="button-wrap">
+					<block v-if="pageStatus == 1 || pageStatus == 7">
+						<button class="admin-button-com big blue">{{ btnText }}</button>
+					</block>
+					<block v-else>
+						<button class="admin-button-com big default">{{ btnText }}</button>
+					</block>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+/** *
+	 * 页面状态
+	 * @parmas pageStatus 进入页面的状态
+	 * @parmas 1 续订成功
+	 * @parmas 2 申请已提交
+	 * @parmas 3 申请已提交 - 返回二维码 -- successPay
+	 * @parmas 4 审核未通过 -- successEval
+	 * @parmas 5 审核通过 - 扫码支付 -- successPayCode
+	 * @parmas 6 授权成功 - 扫码支付 -- successPayCode
+	 * @parmas 7 授权提示 - 扫码支付 -- successPayCode
+	 */
+export default {
+	name: 'callback',
+	data() {
+		return {
+			pageStatus: 7,
+			promptData: [
+				'确认你已经有公众号（服务号），并且已认证和申请微 信支付',
+				'满足以上条件，可以点下方按钮开始授权。',
+				'点击之后会跳到新页面，页面有个二维码，识别后按确 认授权即可。'
+			]
+		}
+	},
+	computed: {
+		btnText() {
+			let text = ''
+			switch (this.pageStatus) {
+				case '1':
+					text = '返回管理中心'
+					break
+				case '2':
+					text = '返回首页'
+					break
+				case '3':
+					text = '返回首页'
+					break
+				case '4':
+					text = '返回首页'
+					break
+				case '5':
+					text = '开始授权'
+					break
+				case '6':
+					text = '管理中心'
+					break
+				case '7':
+					text = '开始授权'
+					break
+				default:
+					text = '返回管理中心'
+					break
+			}
+			return text
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.callback-wrap {
+		padding-top: 30px;
+		.callback-blo {
+			width: calc(100% - 60px);
+			margin: 0 auto;
+			padding: 70px 0;
+			margin: 0 30px;
+			background-color: #fff;
+			box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
+			border-radius: 10px;
+            text-align: center;
+            &.paddingTop {
+                padding-top: 40px;
+            }
+			// 使用icon
+			.icon {
+				.iconfont {
+					font-size: 170px;
+				}
+				.icondaizhifu {
+					color: #ffa92e;
+				}
+			}
+			// 使用状态图片
+			.status-img {
+				width: 294px;
+				margin: 0 auto;
+			}
+        }
+        // module
+        .module-wrap {
+            padding: 0 32px;
+            text-align: left;
+            .module-tit {
+                font-size: 38px;
+                // margin-bottom: 20px;
+            }
+            .module-det {
+                .module-list {
+                    @include disFlex(flex-start, flex-start);
+                    margin-top: 30px;
+                    .dot-wrap {
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 50%;
+                        background-color: $mainColor;
+                        margin-top: 12px;
+                        margin-right: 24px;
+                    }
+                }
+            }
+        }
+		// prompt
+		.prompt-wrap {
+			margin-top: 60px;
+			.prompt-tit {
+				color: #09bb07;
+				font-size: 36px;
+				margin-bottom: 10px;
+			}
+		}
+		// qr-code
+		.qr-code-wrap {
+			color: $fontColor2;
+			text-align: center;
+			& > div {
+				margin-top: 10px;
+			}
+			.qr-code-img {
+				width: 226px;
+				margin: 60px auto 40px;
+			}
+		}
+		// button
+		.button-wrap {
+			margin-top: 80px;
+		}
+	}
+</style>

mobile-code/src/official/pay.vue

@@ -0,0 +1,138 @@
+<template>
+	<div class="app-content">
+		<div class="banner-wrap">
+			<div class="banner-img">
+				<img src="../static/images/official/pay-banner.png" alt />
+			</div>
+			<div class="flex-center-between app-size-28">
+				<div>软件周期</div>
+				<div>1年</div>
+			</div>
+		</div>
+        <!-- list -->
+        <div class="module-wrap">
+            <div class="module-tit">主要功能</div>
+            <div class="module-det">
+                <div class="list-wrap">
+                    <div class="list" v-for="(item, index) in funcitonData" :key="index">
+                        <span :class="{ 'app-color-3' : !item.status}">{{ item.name }}</span>
+                        <i class="iconfont" :class="[item.status ? 'icondagou' : 'iconguanbi']"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+		<!-- buttom -->
+		<div class="page-btn app-footer">
+			<div class="flex-center">
+				<span>合计</span>
+				<span class="app-price">
+					<span>￥</span>
+					<span class="app-size-40">3600</span>
+                    <span>.00</span>
+				</span>
+			</div>
+			<button class="admin-button-com middle blue">支付</button>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'pay-page',
+	data() {
+		return {
+			funcitonData: [
+				{
+					name: '微信商城',
+					status: true
+				},
+				{
+					name: '节日自动涨价',
+					status: true
+				},
+				{
+					name: '小程序商城',
+					status: true
+				},
+				{
+					name: '订单管理',
+					status: false
+				},
+				{
+					name: '商品管理',
+					status: false
+				},
+				{
+					name: '客户管理',
+					status: false
+				}
+			]
+		}
+	}
+}
+</script>
+
+<style lang='scss' scoped>
+	.app-content {
+		background-color: #fff;
+	}
+	.banner-wrap {
+		padding: 32px;
+		width: calc(100% - 64px);
+		border-bottom: 20px solid $backColor;
+		.banner-img {
+			width: 100%;
+			margin-bottom: 6px;
+		}
+	}
+    // list
+    .module-wrap {
+        padding: 40px 30px 0;
+        .module-tit {
+            font-size: 28px;
+            font-weight: 600;
+            margin-bottom: 24px;
+        }
+        .module-det {
+            .list-wrap {
+                border: 2px solid #f9f9f9;
+                border-top: none;
+                .list {
+                    @include disFlex(center, space-between);
+                    padding: 20px 26px;
+                    border-top: 2px solid #f9f9f9;
+                    &:nth-child(odd) {
+                        background-color: #eee;
+                    }
+                    .iconfont {
+                        font-size: 30px;
+                    }
+                    .icondagou {
+                        color: $mainColor;
+                    }
+                    .iconguanbi {
+                        font-size: 24px;
+                        color: $fontColor3;
+                    }
+                }
+            }
+        }
+    }
+    // button
+	.page-btn {
+		width: calc(100% - 60px);
+		@include disFlex(center, space-between);
+		padding: 0 30px;
+		.app-price {
+			margin-bottom: 8px;
+			margin-left: 4px;
+		}
+		.red {
+			width: 270px;
+		}
+        .admin-button-com {
+            width: 200px;
+            font-size: 32px;
+        }
+	}
+</style>

mobile-code/src/pages.json

@@ -11,6 +11,18 @@
 			"style": {
 				"navigationBarTitleText": "填写资料"
 			}
+		},
+		{
+			"path": "official/pay",
+			"style": {
+				"navigationBarTitleText": "支付"
+			}
+		},
+		{
+			"path": "official/callback",
+			"style": {
+				"navigationBarTitleText": "支付"
+			}
 		}
 	],
 	"globalStyle": {

mobile-code/src/static/iconfont/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'iconfont';  /* project id 1525256 */
-  src: url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.eot');
-  src: url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.eot?#iefix') format('embedded-opentype'),
-  url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.woff2') format('woff2'),
-  url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.woff') format('woff'),
-  url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.ttf') format('truetype'),
-  url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.svg#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/font_1525256_gha7j3zx3x.eot');
+  src: url('https://at.alicdn.com/t/font_1525256_gha7j3zx3x.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_1525256_gha7j3zx3x.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_1525256_gha7j3zx3x.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_1525256_gha7j3zx3x.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/font_1525256_gha7j3zx3x.svg#iconfont') format('svg');
 }
 
 .iconfont {
@@ -280,3 +280,7 @@
   content: "\e76f";
 }
 
+.iconshenheweitongguo:before {
+  content: "\e774";
+}
+