295 lines
12 KiB
Vue
295 lines
12 KiB
Vue
<template>
|
||
<view :style="themeColor">
|
||
<view class="page" v-if="detail">
|
||
<view class="form-banner">
|
||
<image :src="$util.img('public/uniapp/form/banner.png')" mode="widthFix"></image>
|
||
</view>
|
||
<view class="system-form-wrap">
|
||
<view class="form-title">{{ $lang('form.form.title') }}</view>
|
||
<ns-form :data="detail.json_data" :formConfig="detail.form_config" ref="form"></ns-form>
|
||
<!-- 行为设置：提交验证码 -->
|
||
<view class="captcha-wrap" v-if="behavior.captcha == 1">
|
||
<input class="captcha-input" type="text" v-model="captcha.code" :placeholder="$lang('form.form.captchaPlaceholder')" />
|
||
<image class="captcha-img" :src="captcha.img" mode="aspectFill" @click="getCaptcha()"></image>
|
||
</view>
|
||
<button type="primary" size="mini" class="button mini" @click="create()">{{ $lang('common.submit') }}</button>
|
||
</view>
|
||
</view>
|
||
<ns-empty :text="emptyText" v-else></ns-empty>
|
||
|
||
<loading-cover ref="loadingCover"></loading-cover>
|
||
<ns-login ref="login"></ns-login>
|
||
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import scroll from '@/common/js/scroll-view.js';
|
||
|
||
export default {
|
||
mixins: [scroll],
|
||
data() {
|
||
return {
|
||
id: 0,
|
||
detail: null,
|
||
isRepeat: false,
|
||
complete: false,
|
||
scroll: true,
|
||
urlParams: {},
|
||
// 行为设置（后端 __form_config__.behavior 下发，含默认值）
|
||
behavior: {},
|
||
// 非成功状态的空态文案（表单未开放/需登录/加载失败等）
|
||
formError: '',
|
||
// 图形验证码（behavior.captcha=1 时展示）
|
||
captcha: { id: '', img: '', code: '' }
|
||
};
|
||
},
|
||
computed: {
|
||
emptyText() {
|
||
return this.complete ? this.$lang('form.form.submitSuccess') : (this.formError || this.$lang('form.form.noFormInfo'));
|
||
}
|
||
},
|
||
onLoad(data) {
|
||
// #ifdef MP-ALIPAY
|
||
let options = my.getLaunchOptionsSync();
|
||
options.query && Object.assign(data, options.query)
|
||
// #endif
|
||
|
||
this.id = data.id || 0;
|
||
|
||
// 通用 URL 参数收集：除 id/scene 外的所有参数都透传给后端
|
||
// 后端会做卫生过滤并广播事件，供 recommend 等插件消费
|
||
const reservedKeys = ['uniacid', 'id', 'scene'];
|
||
this.urlParams = {};
|
||
for (let key in data) {
|
||
if (reservedKeys.indexOf(key) !== -1) continue;
|
||
this.urlParams[key] = data[key];
|
||
}
|
||
|
||
if (data.scene) {
|
||
var sceneParams = decodeURIComponent(data.scene);
|
||
sceneParams = sceneParams.split('&');
|
||
if (sceneParams.length) {
|
||
sceneParams.forEach(item => {
|
||
if (item.indexOf('id') != -1) this.id = item.split('-')[1];
|
||
// scene 中也可能携带其他参数
|
||
let pair = item.split('=');
|
||
if (pair.length === 2 && pair[0] !== 'id') {
|
||
this.urlParams[pair[0]] = pair[1];
|
||
}
|
||
});
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
// 打开是否需要登录由后端 behavior 决定（info 返回 FORM_LOGIN_REQUIRED 时弹登录）
|
||
this.getData();
|
||
},
|
||
watch: {
|
||
storeToken: function(nVal, oVal) {
|
||
if (nVal) this.getData();
|
||
}
|
||
},
|
||
methods: {
|
||
getData() {
|
||
this.$api.sendRequest({
|
||
url: '/form/api/form/info',
|
||
data: {
|
||
form_id: this.id
|
||
},
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
this.detail = res.data;
|
||
this.behavior = (res.data.form_config && res.data.form_config.behavior) || {};
|
||
if (this.behavior.captcha == 1) this.getCaptcha();
|
||
} else if (res.message == 'FORM_LOGIN_REQUIRED') {
|
||
// 打开需登录：弹登录组件，登录成功后 watch storeToken 重新拉取
|
||
this.$refs.login ? this.$refs.login.open('/pages_tool/form/form?id=' + this.id)
|
||
: (this.formError = this.$lang('form.form.loginRequired'));
|
||
} else if (res.message == 'FORM_NOT_OPEN') {
|
||
this.formError = this.$lang('form.form.notOpen');
|
||
} else {
|
||
this.formError = res.message || this.$lang('form.form.noFormInfo');
|
||
}
|
||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||
},
|
||
fail: res => {
|
||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||
}
|
||
});
|
||
},
|
||
// 图形验证码（点击图片刷新；提交失败后自动刷新）
|
||
getCaptcha() {
|
||
this.$api.sendRequest({
|
||
url: '/api/captcha/captcha',
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
this.captcha.id = res.data.id;
|
||
this.captcha.img = res.data.img;
|
||
this.captcha.code = '';
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 填完跳转：消费统一链接选择器的完整对象（wap_url 外链/页面路径、外部小程序、拨打电话）
|
||
doRedirect(link) {
|
||
const fallback = () => { this.complete = true; this.detail = null; };
|
||
if (!link) return fallback();
|
||
if (link.appid) {
|
||
// 跳转其他微信小程序
|
||
wx.navigateToMiniProgram({ appId: link.appid, path: link.page || '', fail: fallback });
|
||
} else if (link.mobile) {
|
||
uni.makePhoneCall({ phoneNumber: String(link.mobile), fail: fallback });
|
||
fallback();
|
||
} else if (link.wap_url) {
|
||
if (/^https?:\/\//i.test(link.wap_url)) {
|
||
uni.navigateTo({ url: '/pages_tool/webview/webview?src=' + encodeURIComponent(link.wap_url), fail: fallback });
|
||
} else {
|
||
uni.navigateTo({ url: link.wap_url, fail: fallback });
|
||
}
|
||
} else {
|
||
fallback();
|
||
}
|
||
},
|
||
create() {
|
||
if (this.$refs.form.verify()) {
|
||
if (this.isRepeat) return;
|
||
const behavior = this.behavior || {};
|
||
|
||
// 填写需登录 / 限填（后端强制，前端提前拦截优化体验）
|
||
if ((behavior.require_login_submit == 1 || behavior.submit_limit > 0) && !this.storeToken) {
|
||
this.$refs.login && this.$refs.login.open('/pages_tool/form/form?id=' + this.id);
|
||
return;
|
||
}
|
||
// 验证码必填
|
||
if (behavior.captcha == 1 && !this.captcha.code) {
|
||
this.$util.showToast({ title: this.$lang('form.form.captchaRequired') });
|
||
return;
|
||
}
|
||
|
||
this.isRepeat = true;
|
||
this.$api.sendRequest({
|
||
url: '/form/api/form/create',
|
||
data: {
|
||
form_id: this.id,
|
||
form_data: typeof this.$refs.form.formData === 'string' ? this.$refs.form.formData : JSON.stringify(this.$refs.form.formData),
|
||
url_params: JSON.stringify(this.urlParams),
|
||
member_id: this.memberInfo ? this.memberInfo.id : 0,
|
||
captcha_id: this.captcha.id || '',
|
||
captcha_code: this.captcha.code || ''
|
||
},
|
||
success: res => {
|
||
if (res.code == 0) {
|
||
this.$util.showToast({ title: this.$lang('form.form.submitSuccess') });
|
||
const link = behavior.redirect;
|
||
setTimeout(() => {
|
||
link ? this.doRedirect(link)
|
||
: (this.complete = true, this.detail = null);
|
||
}, link ? 800 : 1500);
|
||
} else {
|
||
this.isRepeat = false;
|
||
if (res.message == 'FORM_LOGIN_REQUIRED') {
|
||
this.$refs.login && this.$refs.login.open('/pages_tool/form/form?id=' + this.id);
|
||
} else if (res.message == 'CAPTCHA_ERROR' || res.message == 'CAPTCHA_FAILURE') {
|
||
this.$util.showToast({ title: this.$lang('form.form.captchaError') });
|
||
if (behavior.captcha == 1) this.getCaptcha();
|
||
} else if (res.message == 'FORM_SUBMIT_LIMIT') {
|
||
this.$util.showToast({ title: this.$lang('form.form.submitLimit') });
|
||
this.complete = true;
|
||
this.detail = null;
|
||
} else if (res.message == 'FORM_NOT_OPEN') {
|
||
this.$util.showToast({ title: this.$lang('form.form.notOpen') });
|
||
} else {
|
||
this.$util.showToast({ title: res.message });
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.form-banner {
|
||
width: 100vw;
|
||
line-height: 1;
|
||
|
||
image {
|
||
width: 100%;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
.system-form-wrap {
|
||
background: $color-bg;
|
||
border-radius: 32rpx;
|
||
overflow: hidden;
|
||
margin: 0 0 60rpx 0;
|
||
padding: 0 26rpx;
|
||
transform: translateY(-40rpx);
|
||
|
||
.form-title {
|
||
line-height: 100rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.captcha-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 20rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.captcha-input {
|
||
flex: 1;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
font-size: 28rpx;
|
||
border: 2rpx solid #e5e7eb;
|
||
border-radius: 12rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.captcha-img {
|
||
width: 200rpx;
|
||
height: 72rpx;
|
||
margin-left: 20rpx;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #e5e7eb;
|
||
}
|
||
}
|
||
|
||
.button {
|
||
height: 80rpx;
|
||
line-height: 80rpx !important;
|
||
margin-top: 30rpx !important;
|
||
width: 100%;
|
||
border-radius: 80rpx;
|
||
}
|
||
|
||
::v-deep .form-wrap {
|
||
background: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 32rpx;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .mescroll-totop {
|
||
/* #ifdef H5 */
|
||
right: 27rpx !important;
|
||
bottom: 120rpx !important;
|
||
/* #endif */
|
||
/* #ifdef MP */
|
||
right: 27rpx !important;
|
||
bottom: 180rpx !important;
|
||
/* #endif */
|
||
}
|
||
</style>
|