sykl-sm/pages/index/index.vue

<template>
	<view class="content">
        <image class="inedxImg" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/10/indexTop.png" mode="widthFix"></image>
		<view class="inedxCont">
			<image class="inedxBack" src="/static/img/indexBack.png" mode="widthFix"></image>
			<form @submit="siteform" class="inedxForm">
				<view class="site-input">
					<label>姓名<text>*</text></label>
					<input placeholder="请输入" name="name" maxlength="4" :value="userData.nickname ? userData.nickname : ''"></input>
				</view>
				<view class="site-input">
					<label>联系方式<text>*</text></label>
					<input placeholder="请输入" class="site-disabled" :disabled="userData.username" name="tel" maxlength="11" type="number" :value="userData.username ? userData.username : ''"></input>
				</view>
				<!-- 授权书 -->
				<!-- <view class="agreement">
					<checkbox-group @change="radioChange">
						<checkbox style="transform: scale(.75)" color="#B79872" :checked="checked" size='6' class="radioGroup" />
					</checkbox-group>
					<view class="agreement-text">
						下次自动填写，阅读并同意<view class="agreement-color" @click="$Router.push({name: 'Agreement', params: {name : 'warrant'}})">《授权书》</view>
					</view>
				</view> -->
				<view class="site-btn">
					<button form-type="submit" size="mini" :disabled="disabled">
						<image src="/static/img/indexBtn.png" mode="widthFix"></image>
					</button>
					<view class="site-tips">
						剩余：{{residue ? residue : '--'}}份
					</view>
				</view>
				
				<view class="mapModular">
					<view class="mapModular-img">
						<map :latitude="latitude" :longitude="longitude" @click="clickMap" style="width: 100%; height: 270rpx;"></map>
					</view>
					<view class="mapModular-name">
						禅经寺地址：{{city}}{{rough}}
					</view>
				</view>
			</form>
		</view>
		<image class="inedxImg-Down" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/05/indexDown.png" mode="widthFix"></image>
	</view>
</template>

<script>
	import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
    import { mallIndex } from '@/apis/interfaces/mall'
    export default {
		data() {
			return {
				latitude : '34.115519',
				longitude: '108.958177',
				rough	 : '',
				city     : '',
				address  : '',
                disabled: false,
				checked : false,
				userData: '',
				skuId   : '',
				residue : '',// 份数
				qqMap: new QQMapWX({
				    key: 'MDGBZ-WDNC4-P6EUO-DOPPE-JAMMJ-ZNBA4',
				    vm: this
				}),
				
			}
		},
        onShow() {
			// 获取商品详情数据
            this.detailsInfo();
			
			console.log(this.qqMap)
			
			// 调用接口
			this.qqMap.reverseGeocoder({
			    location: {
			        latitude: 34.115519,
			        longitude: 108.958177
			    },
			    success: locatRes => {
					this.rough   = locatRes.result.formatted_addresses.rough
					this.city    = locatRes.result.address_component.city
			    },
			    fail: res => {},
			    complete: res => {}
			});
        },
		methods: {
			// 商品详情数据
			detailsInfo() {
				mallIndex().then(res => {
					this.userData = res.user
					this.skuId    = res.show_goods.skus[0].sku_id
					this.residue  = res.residue
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
            // 勾选协议
            radioChange() {
                this.checked = !this.checked
            },
			
			// 跳转
			siteform(e) {
				let value = e.detail.value
				if(this.$store.getters.getToken != '') {
					if(value.name != '' && value.tel != '') {
						this.$Router.push({
							name: 'indexPlace',
							params: {
								name	: value.name ,
								skuId	: this.skuId
							},
						})
					}
					else {
						uni.showToast({
							title: '请填写信息',
							icon: "none"
						})
					}
					return
				}
				// 立即登录
				if(value.name != '' && value.tel != '') {
					// 立即登录
					this.$Router.push({
						name: 'Login',
						params: {
							name	: value.name,
							tel		: value.tel,
							skuId	: this.skuId,
						},
					})
				} else {
					uni.showToast({
						title: '请填写信息',
						icon: "none"
					})
				}
			},
			
			// 跳地图
			clickMap(){
				uni.openLocation({
					longitude: Number(this.longitude),
					latitude : Number(this.latitude),
					name     : this.city,
					address  : this.rough
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.inedxImg {
		width: 100%;
		display: block;
		position: relative;
		z-index: 9;
	}
	
	.inedxImg-Down {
		width: 100%;
		display: block;
		position: relative;
		z-index: 9;
	}
	
	.inedxCont {
		display: block;
		position: relative;
		z-index: 1;
		top: -160rpx;
		padding-top: 126%;
		.inedxBack {
			width: 100%;
			top: 0;
		}
		.inedxBack,
		.inedxForm {
			width: 100%;
			position: absolute;
			left: 0;
		}
		.inedxForm {
			top: 160rpx;
			padding: 0 $padding * 2;
			box-sizing: border-box;
		}
		.site-input {
			padding: $padding 0;
			box-sizing: border-box;
			line-height: 80rpx;
			border-bottom: 2rpx solid #6F6F6F;
			label {
				font-size: $title-size;
				color: #6f6f6f;
				text {
					font-weight: 600;
					color: red;
				}
			}
			.site-disabled {
				color: #999;
			}
		}
		.agreement{
			margin: $margin + 10 0 $margin * 2;
			display: flex;
			line-height: 44rpx;
			font-size: $title-size-sm - 2;
			color: #ABABAB;
			.agreement-text {
				display: flex;
				line-height: 52rpx;
				.agreement-color {
					color: #B79872;
				}
			}
		}
		
		.site-btn {
			display: inline-block;
			text-align: center;
			width: 100%;
			margin-top: 70rpx;
			button {
				background: transparent;
				border: none;
				image {
					width: 240rpx;
				}
				&::after {
					display: none;
				}
			}
			.site-tips {
				color: red;
				font-size: $title-size-m;
			}
		}
		
		.mapModular {
			margin-top: 60rpx;
			color: #6f6f6f;
			font-size: 27rpx;
			.mapModular-img {
				height: 270rpx;
				border: #ae8e69 2rpx solid;
				background-color: #ffffff;
			}
			.mapModular-name {
				padding: 20rpx 10rpx;
				box-sizing: border-box;
			}
		}
	}
</style>