renshou/topic/promotion/index.vue

<template>
	<view>
		<view class="banner">
			<image :src="params.pic" mode="widthFix"></image>
		</view>
		<view class="con">
			<block v-for="(it,index) in params.images" :key="index">
			<image :src="it" mode="widthFix"></image>
			</block>
		</view>
		<!-- <view class="pro" v-if="params.fieldValues&&params.fieldValues.product">
			<view class="title">专项技术产品</view>
			<swiper autoplay :easing-function="easeInOutCubic" @change="changeSwiper" class="pro-list">
				<swiper-item v-for="(item,index) in JSON.parse(params.fieldValues.product)" :key="index">
					<image :src="item.proPic" mode="aspectFill"></image>
					<view class="pro-tit tover">{{item.proTitle}}</view>
					<view class="pro-bri tovers">{{item.brief}}</view>
				</swiper-item>
			</swiper>
			<view class="pro-dot ddflex"><view :class="'dot' + (swiperCurrent == index ? ' active':'')" v-for="(it,index) in JSON.parse(params.fieldValues.product)" :key="index"></view></view>
		</view> -->
		<view class="act" v-if="matchList&&matchList.length>0">
			<view class="title">活动中心</view>
			<view class="act-list" v-for="(item,index) in matchList" :key="index">
				<view class="act-info ddflex">
					<image :src="item.pic" mode="aspectFill" class="act-img"></image>
					<view class="fflex">
						<view class="act-tit tovers">{{item.title}}</view>
						<view class="tag ddflex">
							<text>申请享优惠</text>
						</view>
						<view class="ddflex">
							<view class="area fflex tover">
								<text>{{captureTime(item.endTime,false)}} 结束</text>
							</view>
							<view class="money"><text v-if="item.money">￥</text>{{item.money ? item.money : '免费'}}</view>
						</view>
					</view>
				</view>
				<view class="stas ddflex">
					<view class="tag-box ddflex fflex">
						{{item.brief}}
					</view>
					<view class="act-btn" @click="toActivity(item)">立即报名</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-tag">长沙专享</view>
			<view class="form-tit"><view>获取一对一定制维修及报价</view></view>
			<view class="form-person ddflex">已提交<text>80</text>人</view>
			<view class="li">
				<view class="label">您的姓名</view>
				<input v-model="name" placeholder="请输入" placeholder-class="placeholder" class="form-ipt" />
			</view>
			<view class="li">
				<view class="label">您的电话</view>
				<input v-model="phone" placeholder="请输入" placeholder-class="placeholder" class="form-ipt" v-if="phone" />
				<button hover-class="none" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="phone-btn" v-else>请输入</button>
			</view>
			<view class="li">
				<view class="label">汽车问题</view>
				<input v-model="question" placeholder="请输入" placeholder-class="placeholder" class="form-ipt" />
			</view>
			<view class="form-tip ddflex"><image src="../static/images/liwu.png"></image>每天前<text>10</text>名有好礼</view>
			<view class="form-btn" @click="submit">马上索取维修方案及报价</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			sessionKey: '',
			userInfo: '',
			swiperCurrent: 0,
			params: {},
			matchList: [],
			name: '',
			phone: '',
			question: ''
		};
	},

	onLoad: async function(options) {
		let _ts = this;
		app.globalData.getCheckSessoin(json => {
			_ts.sessionKey = json.session_key;
		});
		this.getList();
		this.getMatchList();
		req.silenceLogin(options.userId, '');
	},
	onShow(){
		let userInfo = req.getStorage('userInfo');
		if(userInfo){
			this.name = userInfo.realName ? userInfo.realName : userInfo.nickName;
			console.log('phone==',userInfo.mobile)
			this.phone = userInfo.mobile;
		}
	},

	onShareAppMessage() {
		return {
			title: this.detaile.title,
			imageUrl: this.detaile.pic,
			path: '/topic/promotion/index?id=' + this.id +'&isShare=' + true + '&userId=' + req.getStorage('userInfo').id
		};
	},
	onShareTimeline() {
		let query = {
			id: this.id,
			isShare: true,
			isShareTimeline: true,
			userId: req.getStorage('userInfo').id
		}
		return {
			title: this.detaile.title,
			imageUrl: this.detaile.pic,
			query: query
		};
	},
	methods: {
		changeSwiper(e){
			this.swiperCurrent = e.detail.current
		},
		getList(){
			req.getRequest('/api/content/list',{code: 'promotion',page: 1,limit: 1},data=>{
				this.getData(data[0].id)
			})
		},
		getData(id){
			req.getRequest('/api/content/detail',{id: id},data=>{
				this.params = data;
			})
		},
		captureTime(time, isTime) {
			return util.captureTime(time, isTime);
		},
		getMatchList(){
			req.getRequest('/api/match/list',{page: 1,limit: 1},data=>{
				this.matchList = data;
			})
		},
		toActivity(item){
			app.globalData.navigateTo('match/activityDetail/activityDetail?id=' + item.id)
		},
		getphonenumber(event) {
			const detail = event.detail;
			const _ts = this;
			if (!detail || !detail.encryptedData || !detail.iv) return false;
			req.postRequest('/api/weixin/mobile', {
				encryptedData: detail.encryptedData,
				iv: detail.iv,
				sessionKey: this.sessionKey
			}, res => {
				let userInfo = req.getStorage('userInfo');
				if(!userInfo.mobile){
					userInfo.mobile = res.mobile;
					req.setStorage('userInfo', userInfo)
				}
				this.phone = res.mobile;
			});
		},
		submit(){
			if(!this.name) return req.msg('请输入您的姓名');
			if(!this.phone) return req.msg('请输入您的电话');
			if(!this.question) return req.msg('请输入您的汽车问题');
			let params = {
				formId: '10007',
			}
			params.valueList = [
				{
					fieldId: '26',
					fieldName: 'name',
					fieldValue: this.name
				},
				{
					fieldId: '27',
					fieldName: 'phone',
					fieldValue: this.phone
				},
				{
					fieldId: '28',
					fieldName: 'question',
					fieldValue: this.question
				}
			]
			req.postRequest('/api/v3/custom/form/submit',params,data=>{
				req.alertMsg('您的申请已提交，我们会有专业人员联系您',res=>{
					uni.navigateBack()
				})
			})
		}
	}
};
</script>
<style>
@import './index.css';
</style>