新游预约

大约 5 分钟

介绍

配合新的预约小程序使用的预约组件，统一弹层

引入

通过以下方式来全局注册组件，更多注册方式请参考Vue3-Base说明。

const app = createApp()

// 需要使用滑块验证，需要额外引用
await VueBase.include.loadScript("https://cstaticdun.126.net/load.min.js");

// 移动端需要配合MShare组件使用
const [MShare, NewGame] = await VueBase.require(["nie.vue3.mshare", "nie.vue3.newgame"]);
app.use(MShare);
app.use(NewGame);

app.mount("#app");

代码演示

PC

移动

组件类型

<!-- PC端 -->
<feg-newgame></feg-newgame>
<!-- 移动端 -->
<!-- MShare依赖微信开放标签 -->
<feg-mshare :tag="['wx-open-launch-weapp']">
    <feg-newgame m></feg-newgame>
</feg-mshare>

预约模式

<!-- 手机号+小程序（默认模式）-->
<feg-newgame></feg-newgame>
<!-- 手机号预约 -->
<feg-newgame mode="phone"></feg-newgame>
<!-- 小程序预约 -->
<feg-newgame mode="qrcode"></feg-newgame>

组件方法

<template>
    <feg-newgame ref="NGameOrderRef">
        <component :is="NGameOrderRef?.show">按钮</component>
    </feg-newgame>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const NGameOrderRef = ref(null);

watchEffect(() => {
    if (NGameOrderRef.value) {
        NGameOrderRef.value.isMini();
    }
});
</script>

依赖注入

<template>
    <feg-newgame ref="NGameOrderRef">
        <Child />
    </feg-newgame>
</template>
<script setup>
import { ref, provide } from 'vue';
const NGameOrderRef = ref(null);
provide("NGameOrder", NGameOrderRef);
</script>

<template>
    <component :is="NGameOrder?.show">按钮</component>
</template>
<script setup>
import { inject } from 'vue';
const NGameOrder = inject('NGameOrder');
</script>

弹窗自定义内容

<feg-newgame>
    <template #custom="{ type }">
        <!-- PC端 -->
        <div v-if="type === 'phone'">手机号预约</div>
        <div v-if="type === 'qr-success'">手机号预约成功</div>
        <div v-if="type === 'qrcode'">小程序预约</div>
        <div v-if="type === 'success'">小程序预约成功</div>
        <!-- 移动端 -->
        <div v-if="type === 'phone'">手机号预约</div>
        <div v-if="type === 'no-open'">小程序跳转失败</div>
    </template>
</feg-newgame>

API

Props

参数	说明	类型	备注
m	组件类型是否移动端	boolean	选填
debug	小程序跳转体验版	boolean	选填
code	预约产品的code，需要再预约后台申请后获得	string	必填
channel	渠道，比如gw，fab之类，用于统计	string	必填
product	预约产品的id，需要跟平台申请后获得	string	选填，没`os_link`时必填
mode	默认显示模式，`phone`为手机预约，`qrcode`为扫码	string	选填
submitBefore	预约前的校验，需要返回true、false，此为自定义	() => boolean	选填
callback	预约回调，参数在下方有说明，返回true表示阻止默认的预约成功alert	(flag , msg , data) => boolean	选填
requestParam	自定义传进预约接口的参数，json格式	object	选填
modules	添加自定义输入组件，参数在下方有说明	array	选填
os_link	需要自定义接口地址，参数在下方有说明	object	选填，没`product`时必填
osSelect	预约操作系统的参数	object	选填，只支持PC端

callback传参

名称	说明
flag	预约与发短信成功与否
msg	失败的错误信息，成功此值为空
data	预约成功后的接口返回值，data.pt_user = {user_id : '用户id', weixin_token:'用户token'}，扫码预约后才有返回

modules参数，数组中的Object

参数	说明	类型	备注
key	组件的名称，需要唯一而且只能英文数字	string	必填
type	组件类型，目前只有文本输入框，值为：text	string	默认：text
placeholder	文本框默认提示内容	string	选填
isrequired	是否必填项	boolean	默认：true
verify	组件的名称，需要唯一而且只能英文数字	(val) => boolean	选填

os_link参数

参数	说明	类型	备注
getCode	获取手机验证码接口地址	string	选填
getCodeHash	短信接口传参对应关系，支持`mobile`与`NECaptchaValidate`	object	选填
order	预约接口地址	string	选填
orderHash	预约接口传参对应关系，支持`mobile`	object	选填

osSelect参数

参数	说明	类型	备注
pc	是否显示PC选项	boolean	默认是false
hide	是否隐藏预约系统选项	boolean	默认是false

Slots

名称	说明	返回值
default	容器内容	-
custom	自定义弹窗内容，type值为 `phone` `qr-success` `qrcode` `success` `no-open`

方法

名称	说明	参数	返回值
show	显示弹层，注意这是一个按钮组件	-	Component
hide	隐藏弹层	-	-
isMini	移动端专属：判断是否在小程序环境	-	boolean
jumpMiniPage	移动端专属：跳转到小程序制定页面	object	-
setMiniShare	移动端专属：设置小程序分享内容	object	-

jumpMiniPage方法参数(param)

参数	说明	类型	备注
code	预约产品的code，与init方法的code相同	string	必填
page	跳转的页面，活动，加群，公众号，订阅：`activity`、`group`、`official`、`subscribe`	string	默认：activity

setMiniShare方法参数(param)

参数	说明	类型	备注
title	分享的标题	string	必填
img	分享图	string	必填
page_key	分享链路的page_key	string	选填

常见问题

初始化

一次性传参，请勿异步修改。

<template>
    <feg-newgame :m="m" :code="code"></feg-newgame>
</template>
<script setup>
import { ref } from 'vue';

const m = ref(false);
const code = ref("");

code.value = "xxx"; // 同步修改有效
setTimeout(() => m.value = true, 1000); // 异步修改无效
</script>

容器组件只能存在一个。

<template>
    <feg-newgame v-if="true"></feg-newgame>
    <feg-newgame v-else m></feg-newgame>
</template>

多页面应用推荐在根组件作为容器。

<template>
    <feg-newgame>
        <RouterView />
    </feg-newgame>
</template>

组件不能互相嵌套！！！

<!-- 错误示例 -->
<feg-newgame>
    <feg-newgame></feg-newgame>
</feg-newgame>

<!-- 错误示例 -->
<component :is="NGameOrderRef?.show">
    <component :is="NGameOrderRef?.show"></component>
</component>

组件默认样式

PC端： https://git-wz.nie.netease.com/nie-vue3/vue3-components-newgame/-/raw/master/src/assets/pc.less

移动端：https://git-wz.nie.netease.com/nie-vue3/vue3-components-newgame/-/raw/master/src/assets/m.less

弹窗自定义样式问题

弹窗使用了Teleport组件，不支持scoped。https://github.com/element-plus/element-plus/issues/10515

按钮组件问题

按钮组件支持透传属性，通过class或者style修改样式，支持scoped，一般情况不要传其它属性和事件。

按钮组件支持多个同时存在。

<template>
    <component :is="NGameOrderRef?.show" class="btn"></component>
    <component :is="NGameOrderRef?.show" style="display: block;"></component>
</template>

<style scoped>
.btn {
    display: block;
}
</style>