抓娃娃营销工具 uniapp

抓娃娃

有用到jquery , 自行下载并引入

<template>
	<view class="">
		<view class="catch-doll-header pawerPic">
			<view class="hook"><image v-show="dollBoxShox" src="../../static/catch-doll/doll-box.png" mode=""></image></view>
		</view>
		<view class="crossbar "></view>
		<view class="ld-bg"></view>
		<view class="display-board1"></view>
		<!-- <view class="gbro-marquee1" style="position: absolute; display:flex;">
			<view v-for="(item, ind) in imgdata" :key="ind" class="img_item1"><image ref="image1" class="image1" :src="item" mode=""></image></view>
		</view> -->
		<gbro-marquee
			broadcastType="mould"
			@changeEvent="testClick"
			direction="right"
			:viewHeight="200"
			:broadcastIconIsDisplay="!true"
			:touchEvent="true"
			:imgdata="imgdata"
			:broadcastStyle="broadcastStyle"
			class="gbro-marquee1"
		>
			<block v-for="c in 4" :key="c">
				<view v-for="(item, ind) in imgdata" :key="ind" class="img_item1"><image ref="image1" class="image1" :src="item" mode=""></image></view>
			</block>
		</gbro-marquee>
		<view class="display-board2"></view>
		<gbro-marquee
			broadcastType="mould"
			@changeEvent="testClick"
			direction="left"
			:viewHeight="300"
			:broadcastIconIsDisplay="!true"
			:touchEvent="true"
			:imgdata="imgdata"
			:broadcastStyle="broadcastStyle2"
			class="gbro-marquee2"
		>
			<block v-for="c in 2" :key="c">
				<view v-for="(item, ind) in imgdata" :key="ind" class="img_item2"><image ref="image2" class="image2" :src="item" mode=""></image></view>
			</block>
		</gbro-marquee>
		<view class="description-btn"></view>
		<view class="grab-btn" @click="$u.throttle (start, 2000)"></view>
		<view class="prize-btn" @click="myPrizeBtn"></view>
		<view class="frequency">剩余次: 0 次</view>
		<pop-ups :modalShow="modalRuleShow" @modalCancel="modalCancel" classBg="catch-doll-bg" :modalContentObj="modalRule" />
		<pop-ups :modalShow="modalPrizeShow" @modalCancel="modalCancel" classBg="catch-doll-bg" :modalContentObj="modalPrize" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import popUps from '../components/pop-ups.vue';
import $ from '@/common/jquery.min.js';
export default {
   
	components: {
   
		popUps
	},
	data() {
   
		return {
   
			modalRuleShow: false,
			modalPrizeShow: false,
			modalRule: {
   
				contentRule: '1',
				titleUrl: '../../static/catch-doll/pups-prize-header.png',
				content: '',
				prizeTitle: '恭喜您中奖了！',
				prizeType: 1,
				prizeName: '艾优电动牙刷一套',
				btnBgShow: 2
			},
			modalPrize: {
   
				prizeList: [
					{
   
						awardUrl: '../../static/image/salesp.png',
						name: '皮卡丘卡通',
						createTime: '2012.05.22 10.30'
					},
					{
   
						awardUrl: '../../static/image/salesp.png',
						name: '皮卡丘卡通',
						createTime: '2012.05.22 10.30'
					},
					{
   
						awardUrl: '../../static/image/salesp.png',
						name: '皮卡丘卡通',
						createTime: '2012.05.22 10.30'
					},
					{
   
						awardUrl: '../../static/image/salesp.png',
						name: '皮卡丘卡通',
						createTime: '2012.05.22 10.30'
					}
				],
				titleUrl: '../../static/catch-doll/pups-myprize-header.png'
			},
			broadcastData: [],
			broadcastStyle: {
   
				speed: 80
			},
			broadcastStyle2: {
   
				speed: 140
			},
			imgdata: [],
			imgs: [],
			oulStyle: {
   },
			oulLeft: 0,
			dollBoxShox: false,


			z: 1,
			btn: true,
			num: 1,
			gzShow2: false,
			modalName: '',
			data: [],
			tiem: 30,
			numm: 0,
			top: '',
			liwu: false,
			screenHeight: document.documentElement.clientHeight, // 屏幕尺寸
			long: '',
			loading: true,

			ifplay: true, // 是否开启音乐
			yinyueya: true,
			shijian: true,
			month: ''
		};
	},
	onLoad(option) {
   
		this.imgsFun();
	},
	mounted() {
   
		//爪子下降高度
		this.long = this.screenHeight - 320;
		this.setGrabInterval();
		this.onloads();
	},
	methods: {
   
		modalCancel() {
   
			this.modalPrizeShow = this.modalRuleShow = false;
		},
		myPrizeBtn() {
   
			this.modalPrizeShow = true;
		},
		setGrabInterval() {
   
			const _this = this;
			const objPaw = $('.pawerPic'); // 爪子
			let pawLeft = objPaw.offset().left