dudao_uniapp/pages/taBbar/Contact/Contact.vue

<template>
	<view>
		<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scrollTopFun" :scroll-into-view="jump" class='styleheight'
		 :croll-top="scrollTop">
			<!--  styleheight   class=""-->
			<image class="banner" :src="toppic" mode="widthFix"></image>



			<view class='contact_d'>
				<rich-text class="richtext" :nodes='effectPic'></rich-text>
				<!-- 	<import src="../../wxParse/wxParse.wxml" />
				<view style="display:block;">
					<template is="wxParse" data="{{wxParseData:conten_text.nodes}}" />
				</view> -->
			</view>
			<!-- swiper -->
			<form @submit="formBindsubmit" @reset="dsubmit">
				<view class='form'>
					<view class="section">
						<picker @change="mySelect" :value="index" :range="cooper" :data-type="cooperation1" name="cooperation1">
							<image class='images' src='../../../static/images/switch-2.png'></image>
							<!-- wx:if="{{picker?'{{firstPerson}}':'{{cooper[index]}}'}}" -->
							<view class="picker">
								<view class='color'>{{firstPerson}}</view>
								<view class='cooper'>{{cooper[index]}}</view>
							</view>
						</picker>
					</view>


					<view class='user username'>
						<image class='images_user' src='../../../static/images/user.png'></image>
						<input name="name" :data-names="names" class='inpu_t ' :value="name" type='text' :placeholder="placeholder1"
						 placeholder-class="phcolor"></input>
						<!-- 	<view class=' nput' wx:if="{{tis?'nput':''}}">
							<view class='nput_l'>{{tis}}</view>
						</view> -->
					</view>

					<view class='user phone'>
						<image class='images_user' src='../../../static/images/datl.png'></image>
						<input name="phone" :data-phones="phones" class='inpu_t' :value="phone" type='text' :placeholder="placeholder2"
						 placeholder-class="phcolor"></input>
						<!-- <view class=' nput' wx:if="{{tid?'nput':''}}">
							<view class='nput_l'>{{tid}}</view>
						</view> -->
					</view>

					<view class='user address'>
						<image class='images_user' src='../../../static/images/address.png'></image>
						<input name="address" class='inpu_t' :value="address" type='text' :placeholder="placeholder3" placeholder-class="phcolor"></input>
						<!-- 	<view class=' nput' wx:if="{{tif?'nput':''}}">
							<view class='nput_l'>{{tif}}</view>
						</view> -->

					</view>

					<view class="masklayer" v-show="iSshow">
						<image class='prosperit_y' src='../../../static/images/prosperity.png'></image>
						<view class="presen_t">信息提交成功</view>
						<view class='xinxi_t'>我们会在1-2个工作日内给您回复,</view>
						<view class='xinxi_t'>请注意接听。</view>
					</view>
					<button form-type="submit" class='button' hover-class="none" id="wengao" type="primary">提交</button>
				</view>
			</form>
			<!-- 
<view class='biaoshi'>
  <image class='form_img' src='/images/form_img.png'></image>
</view> -->



			<!--悬浮框  jump: 'wengao',-->
			<!-- style="display:{{viewButton ? 'block' : 'none'}}" -->

			<view class='suspension' :style="{display:viewButton ? 'block' : 'none'}">
				<view>
					<view class='affairs' @tap="jump1">
						<view class='text-s'>
							商务合作
						</view>
					</view>
					<view class='contact'>
						<!--  wx:if="{{ showhide ?'true':''}}" -->
						<!-- <button class='clickbtn' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button> -->
						<view class='text_d' @tap="dial">
							立即联系
						</view>
					</view>
				</view>
			</view>

		</scroll-view>

	</view>
</template>

<script>
	var graceRichText = require("../../../components/richText.js");
	var height = 700;
	export default {


		data() {
			return {
				pageData: [],
				banner1: '',

				cooperation1: [],
				selectPerson: true,
				firstPerson: '请选择合作意向',
				selectArea: false,
				color: '#000',
				showView: false,
				hideView: true,
				forminfo: '',
				name: '',
				phone: '',
				address: '',
				// cooperation:'',
				cooper: [],


				plan: 'default',
				height: '700',
				viewButton: true,
				placeholder1: '请输入姓名',
				placeholder2: '请输入联系方式',
				placeholder3: '请输入所在地',
				toppic: '',

				showhide: false,
				scrollTop: 0,
				effectPic: '',
				index: '',
				iSshow: false,
				jump: '',
				telephone: ''
			}
		},
		onLoad() {
			this.getap()
			this.getaps()
		},
		methods: {
			

			getap() {
				var that = this;
				var params = new Object()
				params.appid = uni.getStorageSync('appid')
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: 'https://cm.5dev.cn/applet_on/content/v1/contact.view_news',
					
					data: params,
					method: 'GET',
					header: {
						'content-type': 'application/json' // 默认值
					},
					success(res) {
						uni.hideLoading();
						var cooperation = res.data.data.cooperation;
						var cooper = [];
						for (var i in cooperation) {
							cooper[i] = cooperation[i]['name'];
						}
						console.log(222, res.data.data.contact.tel.phone)
						that.cooperation1 = res.data.data.cooperation,
							that.cooper = cooper,
							
						that.telephone = res.data.data.contact.tel.phone
						// that.toppic = res.data.data.contact.top
						// that.effectPic = graceRichText.format(res.data.data.contact.content)

					}
				})
			},
			getaps() {
				var that = this;
				var params = new Object()
				// params.appid = uni.getStorageSync('appid')
				// uni.showLoading({
				// 	title: '加载中'
				// });
				uni.request({
					url: 'https://trade.5dev.cn/dudaowenlv/content/?api.config_news',
					
					data: params,
					method: 'GET',
					header: {
						'content-type': 'application/json' // 默认值
					},
					success(res) {
						console.log(3333333,res)
						that.toppic = res.data.data.top
						that.effectPic = graceRichText.format(res.data.data.content)
						uni.hideLoading();
			
					}
				})
			},
			mySelect(e) {

				var that = this;
				console.log(9999, e)
				that.firstPerson = '',
					that.cooperations = that.cooperation1[e.detail.value]['id'],
					that.index = e.detail.value
				// })
			},
			// 表单验证
			formBindsubmit(e) {


				var that = this;

				console.log(7777, e)
				// return
				console.log(8888, that.cooperations)
				// return
				// 手机号
				var ph = /^1[34578]\d{9}$/;
				var mb = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
				// 姓名
				if (!that.cooperations) {
					uni.showToast({
						title: '提示：请选择合作意向！',
						icon: 'none',
						duration: 1000
					})
					return
				} else {

				}
				if (e.detail.value.name.length == 0) {
					uni.showToast({
						title: '提示：请输入姓名！',
						icon: 'none',
						duration: 1000
					})
					return
				} else {

				};
				// 手机号
				if (e.detail.value.phone.length == 0) {
					uni.showToast({
						title: '提示：请输入电话或者手机号！',
						icon: 'none',
						duration: 1000
					})

					return
				} else if (!ph.test(e.detail.value.phone) && !mb.test(e.detail.value.phone)) {
					uni.showToast({
						title: '*电话格式有误，请重新输入',
						icon: 'none',
						duration: 1000
					})

					return
				} else {

				};
				// 地址
				if (e.detail.value.address.length == 0) {
					uni.showToast({
						title: '提示：请输入所在地！',
						icon: 'none',
						duration: 1000
					})
					return
				} else {

				};
				//  &&  
				// if (e.detail.value.name && e.detail.value.phone && e.detail.value.address && that.cooperations != 0) {
				// if (ph.test(e.detail.value.phone) && mb.test(e.detail.value.phone) != true) {
				that.iSshow = true
				var params = new Object()
				params.appid = uni.getStorageSync('appid')
				params.name = e.detail.value.name,
					params.phone = e.detail.value.phone,
					params.address = e.detail.value.address,
					params.cooperation = that.cooperations,
					// console.log(111111, that.data.cooperation)

					console.log(1111, that.forminfo)
				console.log(3333, that.name = e.detail.value.name)
				console.log(4444, that.phone = e.detail.value.phone)
				console.log(5555, that.address = e.detail.value.address)
				that.name = e.detail.value.name
				that.phone = e.detail.value.phone
				that.address = e.detail.value.address

				// return

				uni.request({
					url: 'https://cm.5dev.cn/applet_on/content/v1/contact.submit',
					// url: this.host + 'l=api.desc',
					data: params,
					method: 'GET',
					header: {
						'content-type': 'application/json' // 默认值
					},
					success(res) {
						console.log(99999, that.forminfo)
						that.name = ''
						that.phone = ''
						that.address = ''
						that.firstPerson = '请选择合作意向',
							that.index = '',
							that.cooperations = ''

						setTimeout(function() {
							that.iSshow = false
						}, 3000);
					}
				})

			},
			dial() {
				var that = this;
				uni.makePhoneCall({
					phoneNumber: that.telephone
				});
			},
			// 点击跳转
			jump1() {

				// this.setData({
				this.jump = 'wengao'
				// })

			},
			// 距离底部隐藏
			scrollTopFun(e) {
				console.log(22222, e)
				var h = height;
				console.log(9999, e.detail.scrollTop + h)
				// this.setData({
				//   showView: ''
				// })
				var that = this;
				// var h = height;
				if (e.detail.scrollTop + h >= e.detail.scrollHeight) {
					if (that.viewButton == true) {
						// this.setData({
						that.viewButton = false
						that.jump = ''
						// })
					}
				} else {
					if (that.viewButton == false) {
						// this.setData({
						that.jump = ''
						that.viewButton = true
						// })
					}
				}
			},
		}
	}
</script>

<style>
	/* @import "/wxParse/wxParse.wxss";  */


	.styleheight {
		height: 610px;
	}


	.banner {
		width: 100%;

		margin-bottom: 80upx;
	}

	.banner1 {

		position: absolute;
		left: 0;
		top: 455upx;
		width: 631upx;
		height: 276upx;
		z-index: 9999;
	}

	.banner1_t {
		width: 631upx;
		height: 276upx;
		margin-left: 84upx;
	}

	.introduce {
		margin-left: 84upx;
		margin-bottom: 120upx;
		margin-top: -110upx;
		/* clear: both; */
	}

	.intr_left {
		height: 470upx;
		width: 578upx;

		box-shadow: -1px 7px 20px #ccc;
		float: left;
		overflow: hidden;

	}

	.intr_text {
		padding-left: 40upx;
		padding-right: 40upx;
		/* height: 470upx; 
  width: 578upx;  Thisisasmallprogram

 */
		padding-top: 40upx;
		font-size: 30upx;
		color: rgb(25, 25, 25);
		/* text-indent: 60upx;  */
		overflow: hidden;
	}

	.intr_right {
		width: 88upx;
		height: 470upx;
		background: #5397e4;

		margin-left: 578upx;
		/* margin-left:  */
		/* float: left;  */
		/* position: absolute;
      top: 462upx;  
    right: 0;  */

	}






	/*下拉框  */

	.select {
		margin-bottom: 20upx;
	}

	.phone_one {
		display: flex;
		position: relative;
		height: 64upx;
		border-radius: 10upx;
		border: 1upx solid #666;
		margin: 0upx 74upx;
		/* margin-bottom: 80upx; */
	}

	.phone_personal {
		color: rgb(153, 153, 153);
		font-size: 30upx;
		height: 64upx;
		line-height: 64upx;
		margin-left: 20upx;
	}

	.personal_image {
		z-index: 100;
		width: 40upx;
		height: 32upx;
		position: absolute;
		right: 20upx;
		top: 16upx;
	}

	.person_box {
		position: relative;
	}

	.phone_select {
		margin-top: 0;
		z-index: 100;
	}

	.select_one {
		/* background-color: rgb(239, 239, 239); */
		margin: 0upx 74upx;
		height: 64upx;
		line-height: 64upx;
		border-bottom: 1upx solid #ccc;
		padding-left: 20upx;
		font-size: 30upx;
		color: rgb(153, 153, 153);

	}

	.hide {
		display: none;
	}

	.show {
		display: block;
	}

	.form {
		position: relative;
		/* height: 592upx;  */
		/* margin-left:40upx; */
		margin-bottom: 36upx;

		/* margin: 0 88upx;  */
	}

	.form_left {
		height: 592upx;
		width: 88upx;
		background: #d259ce;
		position: absolute;
		left: -40upx;
		top: 0upx;
	}

	.form_text1 {
		text-align: center;
		font-size: 28upx;
		color: rgb(102, 102, 102)
	}

	.form_text2 {
		text-align: center;
		font-size: 28upx;
		color: rgb(102, 102, 102)
	}

	/*验证  */
	/* .calc{
  position: relative;
} */
	.nput {
		position: absolute;
		left: 0;
		top: -180upx;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.nput_l {
		z-index: 9999;
		padding: 38upx 60upx;
		text-align: center;
		font-size: 30upx;
		background: #333333;
		color: rgb(254, 254, 254);

		border-radius: 20upx;
	}

	/*遮罩层  */



	.masklayer {
		border-radius: 20upx;
		position: absolute;
		left: 180upx;
		top: -166upx;
		margin: auto;
		width: 392upx;
		height: 326upx;
		background: #f4f4f4;
		z-index: 9;
	}

	.prosperit_y {
		width: 72upx;
		height: 72upx;
		margin-top: 56upx;
		padding: 0 160upx;
	}

	.presen_t {
		margin-top: 30upx;
		margin-bottom: 20upx;
		text-align: center;
		font-size: 28upx;
		color: rgb(51, 51, 51);
	}

	.xinxi_t {
		text-align: center;
		margin-bottom: 20upx;
		font-size: 28upx;
		color: rgb(51, 51, 51);
	}

	.xinxi_t {
		text-align: center;
		font-size: 22upx;
		margin-bottom: 20upx;
	}

	/*botton按钮  */



	button[type=default] {
		color: rgb(253, 251, 251);
		border: none;
		background: #ccc;
		font-size: 36upx;
	}

	button {
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 14px;
		padding-right: 14px;
		font-size: 18px;
		text-align: center;
		text-decoration: none;
		border-radius: 10upx;
		overflow: hidden;
		border: none;
	}

	button::after {
		border: none;
	}





	.color {
		color: rgb(153, 153, 153);
		font-size: 30upx;
		margin-left: 20upx;
	}

	.cooper {
		font-size: 30upx;
		/* background: red;  */
		color: rgb(51, 51, 51);
		margin-left: 20upx;
	}

	.images {
		position: absolute;
		width: 36upx;
		height: 18upx;
		right: 88upx;
		top: 32upx;
	}

	.phcolor {

		color: rgb(153, 153, 153)
	}

	.biaoshi {
		margin-bottom: 84upx;
		height: 34upx;
	}

	.form_img {
		width: 654upx;
		height: 34upx;
		position: absolute;
		right: 0;
	}


	.btn_images {
		width: 100%;
		height: 247upx;
		float: left;
	}





	.contact_d {
		margin: 0 66upx;



		margin-bottom: 40upx;
		/* font-size: 30upx; */
		color: #333333;
		/* line-height: 45upx; */

	}

	.contact_d_2 {
		margin: 0 66upx;
		margin-bottom: 80upx;
		font-size: 30upx;
		color: #333333;
		line-height: 45upx;
	}

	.picker {
		width: 622upx;
		height: 80upx;
		border: 1upx solid #666666;
		margin: 0 64upx;
		box-sizing: border-box;
		line-height: 80upx;
		border-radius: 10upx;

	}


	/*下拉框  */

	.user {
		height: 98upx;
		margin: 0 64upx;
		border-bottom: 1upx solid #eee;
		clear: both;
		position: relative;
		width: 622upx;
		box-sizing: border-box;
	}

	.section {
		height: 80upx;
		position: relative;
		/* margin: 0 88upx;  */
	}

	.images_user {
		width: 48upx;
		height: 48upx;
		margin-left: 18upx;
		float: left;
		margin-top: 26upx;
		/* background: orange */
	}

	.inpu_t {
		float: left;
		margin-left: 64upx;
		margin-top: 26upx;
		/* border: 1upx solid #333; */
		width: 400upx;
		position: relative;
		font-size: 30upx;
		color: rgb(51, 51, 51)
	}

	.button {
		width: 622upx;
		height: 80upx;
		line-height: 80upx;
		margin: 0upx 66upx;
		margin-top: 60upx;
		margin-bottom: 80upx;
		border: none;
		background: #ccc;
		font-size: 36upx;
		color: rgb(253, 251, 251);

	}

	/*悬浮框  */

	.suspension {
		z-index: 2;
		position: fixed;
		bottom: 100upx;
		right: 0;
	}

	.affairs {
		width: 100upx;
		height: 98upx;
		color: rgb(255, 255, 255);
		font-size: 24upx;
		background: #474747;
		opacity: 0.5;
		text-align: center;
		margin-bottom: 6upx;
		border-top-left-radius: 10upx;
		border-bottom-left-radius: 10upx;
	}

	.text-s {
		margin-left: 30upx;
		margin-right: 24upx;
		width: 50upx;
		color: rgb(255, 255, 255);
		padding-top: 18upx;
	}

	.contact {
		width: 100upx;
		height: 98upx;
		color: rgb(255, 255, 255);
		font-size: 24upx;
		background: #474747;
		opacity: 0.5;
		text-align: center;
		border-top-left-radius: 10upx;
		border-bottom-left-radius: 10upx;
	}



	.text_d {
		margin-left: 30upx;
		margin-right: 24upx;
		width: 50upx;
		color: rgb(255, 255, 255);
		padding-top: 18upx;
	}

	.clickbtn {
		position: fixed;
		bottom: 100upx;
		right: 0;
		width: 100upx;
		height: 98upx;

		opacity: 0;

	}
</style>