引导关注公众号

store/src/admin/official/apply.vue

@@ -161,30 +161,24 @@ export default {
       });
     },
     _getMerchantDet() {
-      // #ifdef H5
       let id = uni.getStorageSync('introMerchantId');
       getIntroduce({ id: id }).then(res => {
         this.merchantData = res.data;
       });
-      // #endif
     },
     // ==============
     confirmFn() {
       let id = uni.getStorageSync('introMerchantId');
       applyRegister({
-        // oldId: this.option.merchantId || 0,
         introMerchantId: id || 0,
         ...this.form
       }).then(res => {
         uni.setStorageSync("officialApply", res.data);
         this.$util.pageTo({
-          // url: '/official/pay',
-          url: "/official/callback",
+          url: "/admin/official/callback",
           type: 2,
           query: {
             pagestatus: 3
-            // orderSn: this.option.orderSn,
-            // payDiscountPrice: res.data.discountAmount
           }
         });
       });

store/src/admin/official/callback.vue

@@ -1,285 +1,320 @@
 <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="`${constant.imgUrl}/retail/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" style="color: #09bb07">恭喜您, 续订成功!</div>
-							<div>
-								<span class="app-color-2">你的帐号有效期已延长至:</span>
-								<span>{{ data.deadline | formatTime('YYYY-MM-DD hh:mm:ss') }}</span>
-							</div>
-						</block>
-						<block v-if="pageStatus == 2">
-							<div class="prompt-tit">申请已提交</div>
-							<div>
-								<span class="app-color-2">审核大约需要一个工作日，请耐心等候</span>
-							</div>
-						</block>
-					</div>
-					<!-- qr-code -->
-					<!-- <div class="qr-code-wrap" v-if="option.focus == 0"> -->
-					<block v-if="pageStatus == 2">
-						<div class="qr-code-wrap">
-							<div class="qr-code-img">
-								<!-- <img :src="`${constant.imgUrl}/retail/common/qr-code.png`" alt /> -->
-								<img :src="officialApply.qrCode" alt="">
-							</div>
-							<div>识别二维码关注花卉宝</div>
-							<div>审核结果将通过微信通知您</div>
-						</div>
-					</block>
-				</block>
-				<!-- button -->
-				<div class="button-wrap">
-					<block v-if="pageStatus == 1 || pageStatus == 7">
-						<button class="admin-button-com big blue" @click="jumpPage">{{ btnText }}</button>
-					</block>
-					<block v-else>
-						<button class="admin-button-com big default" @click="jumpPage">{{ btnText }}</button>
-					</block>
-				</div>
-			</div>
-		</div>
-	</div>
+  <!-- 官网各种回调页面 -->
+  <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="`${constant.imgUrl}/retail/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" style="color: #09bb07">恭喜您, 续订成功!</div>
+              <div>
+                <span class="app-color-2">你的帐号有效期已延长至:</span>
+                <span>{{ data.deadline | formatTime('YYYY-MM-DD hh:mm:ss') }}</span>
+              </div>
+            </block>
+            <block v-if="pageStatus == 2 || pageStatus == 3">
+              <div class="prompt-tit">申请已提交</div>
+              <div>
+                <span class="app-color-2">审核大约需要一个工作日，请耐心等候</span>
+              </div>
+            </block>
+          </div>
+          <!-- qr-code -->
+          <!-- <div class="qr-code-wrap" v-if="option.focus == 0"> -->
+          <block v-if="pageStatus == 2">
+            <div class="qr-code-wrap">
+              <div class="qr-code-img">
+                <!-- <img :src="`${constant.imgUrl}/retail/common/qr-code.png`" alt /> -->
+                <img :src="officialApply.qrCode" alt />
+              </div>
+              <div>识别二维码关注花卉宝</div>
+              <div>审核结果将通过微信通知您</div>
+            </div>
+          </block>
+
+          <block v-if="pageStatus == 3">
+            <div class="qr-code-wrap" style="margin-top:100rpx;">
+              <div style="font-size:30rpx;">搜索并关注下方公众号</div>
+              <div style="color:red;font-size:35rpx;font-weight:bold;margin:18rpx 0 18rpx 0">{{officialApply.wxAliasName}}</div>
+              <div style="font-size:30rpx;">审核结果第一时间通知您</div>
+            </div>
+          </block>
+        </block>
+        <!-- button -->
+        <div class="button-wrap">
+          <block v-if="pageStatus == 1 || pageStatus == 7">
+            <button class="admin-button-com big blue" @click="jumpPage">{{ btnText }}</button>
+          </block>
+          <block v-else-if="pageStatus == 3">
+            <button
+              class="admin-button-com big blue"
+              style="width:230rpx;"
+              @click="pasteWxAccount()"
+            >复制</button>
+          </block>
+          <block v-else>
+            <button class="admin-button-com big default" @click="jumpPage">{{ 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
-	 */
-	// api
-	import { accountDet, applyStatus, getAuthUrl } from '@/api/official'
-	// import { getShopUser } from '@/utils/auth'
-	export default {
-		name: 'callback',
-		data() {
-			return {
-				constant: this.$constant,
-				data: {},
-				// pageStatus: '2',
-				pageStatus: '2',
-				promptData: ['确认你已经有公众号（服务号），并且已认证和申请微 信支付', '满足以上条件，可以点下方按钮开始授权。', '点击之后会跳到新页面，页面有个二维码，识别后按确 认授权即可。'],
-				officialApply: {}
-			}
-		},
-		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
-			}
-		},
-		onLoad() {
-			// if (!this.$util.isLogin()) {
-			// 	getShopUser()
-			// 	return false
-			// }
-		},
-		mounted() {
-			// this.pageStatus = this.option.pageStatus
-			// this.init()
-		},
-		methods: {
-			init() {
-				let officialApply = uni.getStorageSync('officialApply')
-				if (!this.$util.isEmpty(officialApply)) {
-					this.officialApply = officialApply
-				}
-				if (this.option.pagestatus == 1) {
-					this.pageStatus = 1
-				}
-				this.$util.getCheckLogin().then(res => {
-					if (res) {
-						// this._getStatus()
-						if (this.pageStatus == 1 || this.pageStatus == 5) {
-							this._accountDet()
-						}
-					}
-				})
-			},
-			// 获取状态
-			_getStatus() {
-				applyStatus().then(res => {
-					let status = res.data.status
-					if (status == 1) {
-						this.pageStatus = 2
-					}
-				})
-			},
-			// 获取用户信息
-			_accountDet() {
-				accountDet().then(res => {
-					this.data = res.data
-				})
-			},
-			jumpPage() {
-				if (this.btnText == '返回首页') {
-					this.$util.pageTo({
-						url: '/official/index',
-						query: {
-							id: this.option.id
-						}
-					})
-				} else if (this.btnText == '返回管理中心') {
-					// this.$util.pageTo({
-					// 	url: '/official/index',
-					// 	query: {
-					// 		id: this.option.id
-					// 	}
-					// })
-					// #ifdef H5
-					location.href = `${window.location.protocol}//b.${this.$constant.firstHost}.com/#/`
-					// #endif
-				} else if (this.btnText == '开始授权') {
-					getAuthUrl().then(res => {
-						// #ifdef H5
-						location.href = res.data.url
-						// #endif
-					})
-					// this.$msg('功能待对接！')
-				}
-			}
-		}
-	}
+/** *
+ * 页面状态
+ * @parmas pageStatus 进入页面的状态
+ * @parmas 1 续订成功
+ * @parmas 2 申请已提交
+ * @parmas 3 申请已提交 - 返回二维码 -- successPay
+ * @parmas 4 审核未通过 -- successEval
+ * @parmas 5 审核通过 - 扫码支付 -- successPayCode
+ * @parmas 6 授权成功 - 扫码支付 -- successPayCode
+ * @parmas 7 授权提示 - 扫码支付 -- successPayCode
+ */
+// api
+import { accountDet, applyStatus, getAuthUrl } from "@/api/official";
+// import { getShopUser } from '@/utils/auth'
+export default {
+  name: "callback",
+  data() {
+    return {
+      constant: this.$constant,
+      data: {},
+      pageStatus: "3",
+      promptData: [
+        "确认你已经有公众号（服务号），并且已认证和申请微 信支付",
+        "满足以上条件，可以点下方按钮开始授权。",
+        "点击之后会跳到新页面，页面有个二维码，识别后按确 认授权即可。"
+      ],
+	  officialApply: {
+		  wxAliasName:""
+	  },
+	  wxAccount:''
+    };
+  },
+  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;
+    }
+  },
+  onLoad() {
+    // if (!this.$util.isLogin()) {
+    // 	getShopUser()
+    // 	return false
+    // }
+  },
+  mounted() {
+    // this.pageStatus = this.option.pageStatus
+    // this.init()
+  },
+  methods: {
+    init() {
+      let officialApply = uni.getStorageSync("officialApply");
+      if (!this.$util.isEmpty(officialApply)) {
+        this.officialApply = officialApply;
+      }
+      if (this.option.pagestatus == 1) {
+        this.pageStatus = 1;
+      }
+      this.$util.getCheckLogin().then(res => {
+        if (res) {
+          // this._getStatus()
+          if (this.pageStatus == 1 || this.pageStatus == 5) {
+            this._accountDet();
+          }
+        }
+      });
+    },
+    // 获取状态
+    _getStatus() {
+      applyStatus().then(res => {
+        let status = res.data.status;
+        if (status == 1) {
+          this.pageStatus = 2;
+        }
+      });
+    },
+    // 获取用户信息
+    _accountDet() {
+      accountDet().then(res => {
+        this.data = res.data;
+      });
+    },
+    jumpPage() {
+      if (this.btnText == "返回首页") {
+        this.$util.pageTo({
+          url: "/official/index",
+          query: {
+            id: this.option.id
+          }
+        });
+      } else if (this.btnText == "返回管理中心") {
+        // this.$util.pageTo({
+        // 	url: '/official/index',
+        // 	query: {
+        // 		id: this.option.id
+        // 	}
+        // })
+        // #ifdef H5
+        location.href = `${window.location.protocol}//b.${this.$constant.firstHost}.com/#/`;
+        // #endif
+      } else if (this.btnText == "开始授权") {
+        getAuthUrl().then(res => {
+          // #ifdef H5
+          location.href = res.data.url;
+          // #endif
+        });
+        // this.$msg('功能待对接！')
+      }
+    },
+    pasteWxAccount() {
+      uni.setClipboardData({
+        data: this.officialApply.wxAliasName,
+        success: function(res) {
+          uni.getClipboardData({
+            success: function(res) {
+              uni.showToast({
+                title: "已复制"
+              });
+            }
+          });
+        }
+      });
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.callback-wrap {
-		padding-top: 30px;
-		.callback-blo {
-			width: calc(100% - 60px);
-			margin: 0 30px;
-			padding: 70px 0;
-			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 {
-				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;
-		}
-	}
+.callback-wrap {
+  padding-top: 30px;
+  .callback-blo {
+    width: calc(100% - 60px);
+    margin: 0 30px;
+    padding: 70px 0;
+    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 {
+      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>