lucky_shop/pages_tool/form/formdata.vue

<template>
	<view :style="themeColor">
		<block v-if="detail">
			<view class="page">
				<view class="form-banner" v-if="detail.show_banner > 0">
					<image :src="$util.img(formBanner)" mode="widthFix"></image>
				</view>
				<view class="form-tip">
					<view class="system-form-tip" v-if="detail.show_tip > 0">{{ formTip }}</view>
				</view>
				<view class="system-form-wrap">
					<ns-newform ref="form" :data="detail.json_data" @submit="create"></ns-newform>
					<button class="button mini" style="font-size:32rpx;" type="primary" size="mini"
						@click="create">提交</button>
				</view>
			</view>
		</block>
		<block v-else>
			<ns-empty :text="complete ? '提交成功' : '未获取到表单信息'" :isIndex="false"></ns-empty>
		</block>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>

import nsNewform from '../_components/ns-newform/ns-newform.vue';

export default {
	components: {
		nsNewform
	},
	data() {
		return {
			id: 0,
			detail: null,
			isRepeat: false,
			complete: false,
			scroll: true,
			uniacid: 0,
			isFromMpWebView: false, // 是否是从微信小程序的WebView跳转过来的
		}
	},
	computed: {
		formBanner() {
			const bannerImg = this.detail?.form_banner
			return bannerImg ? bannerImg : 'public/uniapp/form/banner.png'
		},
		formTip() {
			const tip = this.detail?.form_tip
			console.log('formTip computed, tip value:', tip, 'truthy:', !!tip)
			return tip ? tip : '请填写表单所需信息'
		}
	},
	onLoad(options) {
		if (!options.uniacid) {
			uni.showModal({
				title: '提示',
				content: '参数错误',
				showCancel: false,
				success: () => { }
			})
			return false
		}

		uni.setStorageSync('skipPrivacyCheck', true);

		this.uniacid = options.uniacid
		this.id = options.id || 0
		this.isFromMpWebView = options.from === 'mp-webview';

		if (options.scene) {
			const scene = decodeURIComponent(options.scene)
			const params = scene.split('&')
			params.length && params.forEach(item => {
				if (item.indexOf('id') != -1) {
					this.id = item.split('-')[1]
				}
			})
		}

		this.getData()
	},
	
	watch: {
		storeToken(newVal, oldVal) {
			newVal && this.getData()
		}
	},
	methods: {
		getData() {
			this.$api.sendRequest({
				url: '/form/api/form/info',
				data: {
					form_id: this.id,
					uniacid: this.uniacid
				},
				success: res => {
					if (res.code == 0 && res.data) {
						this.detail = res.data
						console.log(`form data =>`, this.detail)

						// 非H5的情况下，设置标题
						if (!this.isFromMpWebView) {
							uni.setNavigationBarTitle({
								title: res.data.form_name
							})
						}
					}
					this.$refs.loadingCover && this.$refs.loadingCover.hide()
				},
				fail: () => {
					this.$refs.loadingCover && this.$refs.loadingCover.hide()
				}
			})
		},
		create() {
			if (!this.$refs.form.verify()) return

			if (this.isRepeat) return

			this.isRepeat = true
			this.$api.sendRequest({
				url: '/form/api/form/create',
				data: {
					form_id: this.id,
					form_data: JSON.stringify(this.$refs.form.formData),
					uniacid: this.uniacid
				},
				success: res => {
					if (res.code == 0) {
						uni.showModal({
							title: '提示',
							content: '提交成功',
							showCancel: false,
							success: () => { }
						})
					} else {
						this.isRepeat = false
						this.$util.showToast({
							title: res.message
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}

.form-banner {
	width: 100vw;
	line-height: 1;
}

.form-banner image {
	width: 100%;
	line-height: 1;
}

.form-tip {
	text-align: center;
}

.system-form-tip {
	line-height: 120rpx;
	font-weight: 600;
	font-size: 30rpx;
}

.system-form-wrap {
	border-radius: 32rpx;
	overflow: hidden;
	margin: 0 0 60rpx 0;
	padding: 0 12rpx;
	padding-top: 40rpx;
	transform: translateY(-40rpx);
}

.system-form-wrap .button {
	height: 80rpx;
	line-height: 80rpx !important;
	margin-top: 30rpx !important;
	width: 84%;
	margin-left: 28rpx !important;
	border-radius: 80rpx;
	background: #f4391c;
	color: #fff;
}

.system-form-wrap .form-wrap {
	background: #fff;
	padding: 30rpx;
	border-radius: 32rpx;
}
</style>