<template>
	<div class="popUpBox">
		<div class="por" v-if="isShowPop">
			<div class="popUpBag">
				<div class="popUpInner" :style="popHeight">
					<div class="myPrize" v-if="popData.popUpTilte == 'myPrize'"></div>
					<div class="hint" v-if="popData.popUpTilte == 'hint'"></div>
					<div class="wish" v-if="popData.popUpTilte == 'wish'"></div>
					<div class="prompt" v-if="popData.popUpTilte == 'prompt'"></div>
					<div class="upDateFail" v-if="popData.popUpTilte == 'upDateFail'"></div>
					<div class="activityStatus" v-if="popData.popUpTilte == 'activityStatus'"></div>
					
					<div v-if="popData.popUptext">
						<textarea class="myPrizeText">{{ popData.text }}</textarea>
						<div class="popIcon"></div>
						<div v-if="popData.butImg" class="popUpbut"><img :src="popData.butImg" alt="" @click="back(popData.source)" /></div>
					</div>
					<div class="popUpTable" v-if="popData.popUpTable">
						<div class="popUpTableHead">
							<div class="popUpTableTitle" v-for="(item, index) in popData.listTitle" :key="index">{{ item.name }}</div>
						</div>
						<div class="popUpTableBodyAll">
							<div class="popUpTableBody" v-for="(item, index) in list" :key="index">
								<div class="popUpBodyTitle">{{ item.rewardName }}</div>
								<div class="popUpBodyTitle">{{ item.time }}</div>
								<div class="popUpBodyTitle" v-if="item.status == 1 && item.rewardType == 1">
									<img class="tableImg" src="//img10.360buyimg.com/imgzone/jfs/t1/30247/25/19107/3558/637b411eEc00435d6/709c8fffd7692894.png" alt="" />
								</div>
								<div class="popUpBodyTitle" v-if="item.status == 1 && item.rewardType == 3 && item.hasWriteAddress">
									<img
										class="tableImg"
										@click="fillIn(item, 1)"
										src="//img10.360buyimg.com/imgzone/jfs/t1/121364/6/27569/3233/637b411eE3d9f493e/e419df75148edbe7.png"
										alt=""
									/>
								</div>
								<div class="popUpBodyTitle " v-if="item.rewardType == 3 && !item.hasWriteAddress">
									<img
										class="tableImg"
										@click="fillIn(item, 3)"
										src="//img10.360buyimg.com/imgzone/jfs/t1/44396/12/21411/3302/637b411eE8a2477f5/e55026bae72e6f19.png"
										alt=""
									/>
								</div>
							</div>
							<div v-if="list.length <= 0" class="listNull"><div>暂无明细</div></div>
						</div>
					</div>

					<div v-if="popData.memberText">
						<div class="popLogo"><img src="//img10.360buyimg.com/imgzone/jfs/t1/192928/30/28857/5641/637c323dE7ad56ccf/db58f9fb9a80adda.png" alt="" /></div>
						<div class="popMemderText">
							非常抱歉
							<div class="popMemderYellow">您还不是K星会员</div>
						</div>
						<div class="popMemberWord">加入会员才能参与DIY哦</div>
						<div class="popMemberBut">
							<img @click="joinVipClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/92255/35/22152/7470/637b411eE44b3b614/a6158293b0cc0ca5.png" alt="" />
						</div>
					</div>
					<div v-if="popData.prizeWinning && prizeList">
						<div class="prizeTilte"><img src="//img10.360buyimg.com/imgzone/jfs/t1/137820/11/31292/29482/637b411dE0a62d08c/710b351c57ac45df.png" alt="" /></div>
						<div class="prizeName">{{ prizeList.rewardName }}</div>
						<div class="prizeImg" v-if="prizeList.rewardType == 1">
							<img v-if="pos == 1" src="//img10.360buyimg.com/imgzone/jfs/t1/80881/39/18068/54200/637c3e3fE1c49c712/7e62538b4c925395.png" alt="" />
							<img v-if="pos == 2" src="//img10.360buyimg.com/imgzone/jfs/t1/170071/3/17729/79497/637c3e3fE450e66c2/eedef6dd6577f0b7.png" alt="" />
							<img v-if="pos == 3" src="//img10.360buyimg.com/imgzone/jfs/t1/111742/1/32310/92311/637c3e3fE65264d62/c099331370637a66.png" alt="" />
						</div>
						<div class="prizeImage" v-else><img src="//img10.360buyimg.com/imgzone/jfs/t1/23298/11/20021/38692/6386f0ecE026e69ad/f0bd31280dce2d2a.png" alt="" /></div>
						<div class="prizeButBox">
							<div class="prizeBut m-right-20" v-if="prizeList.rewardType != 1">
								<img @click="prizeClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/182488/18/31022/6647/637c43b2Ebc3e2386/db09538a1540f101.png" alt="" />
							</div>
							<div class="prizeBut">
								<img @click="strollClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/58930/31/23654/6127/637c43b2E1f263903/26a18b1bc5726c7d.png" alt="" />
							</div>
						</div>
					</div>
					<div v-if="popData.prizeFail">
						<div class="popLogo"><img src="//img10.360buyimg.com/imgzone/jfs/t1/192928/30/28857/5641/637c323dE7ad56ccf/db58f9fb9a80adda.png" alt="" /></div>
						<textarea class="popMemderText">{{ popData.text }}</textarea>

						<div class="popMemberBut" v-if="popData.prizeFailBut == 1">
							<img @click="backMakeClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/200789/8/26846/7473/637c700bE90578c3a/4bba9a0c8163ed52.png" alt="" />
							<img @click="strollClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/79757/31/23754/7175/6385b1e5Ef89f0134/2be8c9ab2c684cef.png" alt="" />
						</div>
						<div class="popMemberBut" v-if="popData.prizeFailBut == 2">
							<img @click="taskShowClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/163088/31/32872/10501/637c6ff2E5a065720/3e5dc27480ae14c3.png" alt="" />
						</div>
						<div class="popMemberBut" v-if="popData.prizeFailBut == 3">
							<img @click="noDrawChanceClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/43741/33/21960/10937/6385c47fEad6dc114/4cffa7d305f0f902.png" alt="" />
						</div>
					</div>
					<div class="address" v-if="popData.addressText">
						<div class="addressTilte">
							<img v-if="adsStatus == 0" src="//img10.360buyimg.com/imgzone/jfs/t1/95568/22/19688/30304/637c6ff2Ed916d53a/4c27fecf7d1590a7.png" alt="" />
							<img v-if="adsStatus == 1" src="//img10.360buyimg.com/imgzone/jfs/t1/146629/33/31621/31028/637dc896E365889f1/88bd5b0d231ca211.png" alt="" />
							<img v-if="adsStatus == 2" src="//img10.360buyimg.com/imgzone/jfs/t1/27057/10/19777/22554/637c6ff2Eac04648f/2ed85370b4273ebb.png" alt="" />
						</div>
						<van-form class="addressForm">
							<van-cell-group class="addressInner">
								<i class="contactIcon"></i>
								<div class="addressName">姓名</div>
								<!-- :disabled="adsStatus != 0" -->
								<input v-if="adsStatus == 0" class="addressInput" maxlength="20" type="text" v-model="popAddress.receiver" />
								<div style="text-align: left;color: #bcad86" class="addressInput addressInputDiv" v-else>{{ popAddress.receiver }}</div>
							</van-cell-group>
							<van-cell-group class="addressInner">
								<i class="phoneIcon"></i>
								<div class="addressName">手机号</div>
								<input v-if="adsStatus == 0" class="addressInput" maxlength="11" type="tel" v-model="popAddress.phone" />
								<div style="text-align: left;color: #bcad86" class="addressInput" v-else>{{ popAddress.phone }}</div>
							</van-cell-group>
							<van-cell-group>
								<div class="ads">
									<i class="addressIcon"></i>
									<div class="addressName">省市区</div>
								</div>
								<div class="addressText" @click="openArea">
									<div :class="adsStatus != 0 ? 'addressTextD' : 'addressTextI'">{{ popAddress.region }}</div>
								</div>
							</van-cell-group>

							<van-cell-group>
								<div class="addressLabel">详细地址</div>
								<div class="addressTextareaAll">
									<textarea @change="textareaChange" ref='textareaRef' v-show="adsStatus == 0" type="textarea" maxlength="50" v-model="popAddress.address" class="addressTextarea"></textarea>
									<div v-show="adsStatus != 0" class="addressTextareaDivAll">
										<div ref='textareaRef' style="text-align: left;margin-left: 0.35rem;color: #bcad86" class="addressTextarea addressTextareaDiv">{{ popAddress.address }}</div>
									</div>
									
								</div>
							</van-cell-group>

							<div class="prizeButBox" v-if="adsStatus == 1">
								<div class="prizeBut m-right-20" @click="amend">
									<img src="//img10.360buyimg.com/imgzone/jfs/t1/143999/1/32151/6894/637c9980E29d4b854/6222eae90f309d24.png" alt="" />
								</div>
								<div class="prizeBut" @click="affirmSubmit">
									<img src="//img10.360buyimg.com/imgzone/jfs/t1/78879/32/22642/6842/637c9980E50908fa7/cd71f835e9aaeb7e.png" alt="" />
								</div>
							</div>
							<div class="prizeBut" v-if="adsStatus == 2">
								<img @click="strollClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/96093/34/35415/7205/637c6ff2Ee8b8befd/1ec9a8575fd36089.png" alt="" />
							</div>
							<div class="prizeBut" @click="submit" v-if="adsStatus == 0">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/141047/17/31732/6808/637dc920E5447a0c6/e6f41dd217680a26.png" alt="" />
							</div>
						</van-form>
					</div>
				</div>
			</div>
			<div class="hintWord" v-if="prizeFail">
				*成功领取后，系统将在30个工作日内
				<br />
				自动发放至领奖ID的京东账户。
			</div>
			<div class="close" @click="closePopUp" v-if="!popData.memberText && popData.popUpTilte != 'activityStatus'"></div>
			<div v-if="isArea" class="bottom" @onClose="isArea = false">
				<div class="cc_width"><van-area title="" :area-list="areaList" @cancel="areaCancel" @confirm="areaConfirm" :value="areaCode" /></div>
			</div>
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import { Form, Field, CellGroup } from 'vant';
import areaUtil from '../../../../util/areaUtil';
import apis from '../api/api.js';
import { dateChangeYYYY } from '../utils';
import { goToShopPage, goToOpenCard } from '../../../../util/tools';
import store from '../../../../store/store';
let { getMyPrize, saveAddress, getAddress, draw } = apis;
Vue.use(Form);
Vue.use(Field);
Vue.use(CellGroup);
export default {
	props: ['popData'],

	data() {
		return {
			isShowPop: true, //是否显示通用弹框
			popUpTable: false,
			wishText: false,
			updateFailText: false,
			memberText: false,
			prizeWinning: false,
			prizeFail: false,
			addressText: false,
			adsStatus: 0,
			addressId: '',
			popHeight: '',
			address: '',
			list: [],
			prizeList: [],
			popAddress: {
				receiver: '',
				phone: '',
				address: '',
				region: ''
			},
			areaList: {},
			areaCode: '',
			isDisabledindex: 1,
			isArea: false,
			areaDetails: [],
			pos:-1,//奖品位置
		};
	},
	created() {
		this.popHeight = `height:${this.popData.popUpHeight}`;
		if (this.popData.popUpWidth) {
			this.popHeight = `height:${this.popData.popUpHeight};width:${this.popData.popUpWidth}`;
		}
		// console.log(this.addressId, 'this.popHeight');
		this.initAreaList();
	},
	watch: {
		popData: {
			handler(newValue, init) {
				this.popHeight = `height:${newValue.popUpHeight}`;
				// console.log(newValue, newValue.draw, 'newValuenewValuenewValue');
				if (newValue.popUpTable) {
					this.queryMyPizeList();
				}
				if (newValue.addressStatus == 3) {
					this.queryAddressData();
				}
				//抽奖弹窗
				if (newValue.draw) {
					this.isShowPop = false;
					this.getDrawPize();
				}
			},
			deep: true,
			immediate: true
		},
		
	},
	methods: {
		textareaChange(){
			this.changeHeight()
		},
		changeHeight() {
	
			let _this = this;
			this.$nextTick(() => {
				var textArea = _this.$refs.textareaRef;
				var scrollHeight = textArea.scrollHeight; // 控件所有的高度，包含滚动的那部分(不可见也会有高度)
				var height = textArea.offsetHeight; // 屏幕上显示的高度
				if (height <= scrollHeight) {
					textArea.style.height = 'auto'; // 恢复默认值，这个作用就是根据内容自适应textarea高度
				    textArea.style.height = textArea.scrollHeight + 'px'; // 拿到最新的高度改变textarea的高度	
				}
			});
			
		},
		
		onLoad() {
			setTimeout(() => {
				if (this.refreshing) {
					this.list = [
						{
							name: '奖项名称'
						}
					];
					this.refreshing = false;
				}

				for (let i = 0; i < 10; i++) {
					this.list.push(this.list.length + 1);
				}
				this.loading = false;

				if (this.list.length >= 40) {
					this.finished = true;
				}
			}, 1000);
		},
		onRefresh() {
			// 清空列表数据
			this.finished = false;

			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			this.onLoad();
		},
		initAreaList() {
			this.areaList.province_list = areaUtil.province_list;
			this.areaList.city_list = areaUtil.city_list;
			this.areaList.county_list = areaUtil.county_list;
		},
		openArea() {
			if (this.adsStatus !== 0) return;
			this.isArea = true;
		},
		//取消省市区选择
		areaCancel() {
			this.isArea = false;
		},
		//省市区
		areaConfirm(value) {
			this.popAddress.region = '';
			// console.log(this.areaDetails,'valuevalue');
			this.areaDetails = value.map((item, index) => {
				if (index === 2) {
					this.areaCode = item.code;
				}
				return item.name;
			});
			this.isArea = false;
			// console.log(this.areaDetails, 'this.areaDetails');
			value.forEach(element => {
				this.popAddress.region = this.popAddress.region + element.name;
			});

			// console.log(this.areaDetails, 'ssss');
		},
		closePopUp() {
			this.$emit('closePop');
		},
		checkEmoj(str) {
			var iosFace = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
			var androidFace = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
			if (iosFace.test(str) || androidFace.test(str)) {
				return false;
			}
			return true;
		},

		// 第一次提交
		submit() {
			// console.log(this.popAddress.address,'this.popAddress.detailedAddress');
			if (!this.popAddress.receiver || this.popAddress.receiver == '') {
				this.$toast('请填写姓名');
				return;
			}
			if (!this.checkEmoj(this.popAddress.receiver)) {
				this.$toast('收货人姓名不能包含表情！');
				return false;
			}
			if (!this.popAddress.phone || this.popAddress.phone == '') {
				this.$toast('请填写手机号');
				return;
			}
			if (!/^1[3456789]\d{9}$/.test(this.popAddress.phone)) {
				this.$toast('请填写正确的手机号码！');
				return;
			}
			console.log(this.popAddress, 'this.popAddress');
			if (!this.popAddress.region || this.popAddress.region == '') {
				this.$toast('请填写省市区');
				return;
			}
			if (!this.popAddress.address || this.popAddress.address == '') {
				this.$toast('请填写详细地址');
				return;
			}
			if (!this.checkEmoj(this.popAddress.address)) {
				this.$toast('详细地址不能包含表情！');
				return false;
			}
			this.adsStatus = 1;
			this.changeHeight()
		},
		// 修改
		amend() {
			this.adsStatus = 0;
		},
		// 第二次提交
		affirmSubmit() {
			let param = {
				addressId: sessionStorage.getItem('addressId'), //this.addressId,
				activityId: this.$route.query.activityId,
				pin: sessionStorage.getItem('pin'),
				receiver: this.popAddress.receiver,
				phone: this.popAddress.phone,
				province: this.areaDetails[0],
				city: this.areaDetails[1],
				area: this.areaDetails[2],
				address: this.popAddress.address
			};
			let content = {
				activityId: this.$route.query.activityId,
				content: this.popAddress.address,
				type: 1
			};
			saveAddress(param, data => {
				if (data.resp_code == 0) {
					this.adsStatus = 2;
					this.changeHeight()
				}
			});
		},
		// 获取我的奖品列表
		queryMyPizeList() {
			getMyPrize(data => {
				this.list = data.data;
				this.list.forEach(item => {
					item.time = dateChangeYYYY(item.createtime, 1);
					return item;
				});
			});
		},
		// 去填写获奖信息
		fillIn(item, type) {
			// type 3 是填写地址
			this.addressId = item.addressId;
			if (item.addressId) {
				sessionStorage.setItem('addressId', this.addressId);
			}
			if (type == 3) {
				this.$emit('closePop', '12');

				this.popData = {
					addressText: true,
					popUpHeight: '7.26rem'
				};
			} else if (type == 1) {
				// type 1 是查看实物
				this.$emit('closePop', '13');
				this.popData = {
					addressText: true,
					popUpHeight: '7.26rem',
					addressStatus: 3
				};
			}
		},
		back(type) {
			// saveAddress 保存地址
			if (type == 'saveAddress') {
				this.$emit('closePop', '12');
				this.popData = {
					addressText: true,
					popUpHeight: '7.26rem'
				};
			} else if (type == 'saveWin') {
				this.$emit('closePop', '14');
			} else if (type == 'wxts') {
				this.$emit('closePop', '23');
			}
		},
		// 获取地址
		queryAddressData() {
			let param = {
				activityId: this.$route.query.activityId,
				addressId: sessionStorage.getItem('addressId') //this.addressId
			};
			this.adsStatus = 2;
			getAddress(param, data => {
				
				this.popAddress = data.data;
				this.popAddress.region = data.data.province + data.data.city + data.data.area;
				this.changeHeight();
			});
		},
		getDrawPize() {
			// console.log(1,'000----1111-----2-222222')
			draw(data => {
				this.isShowPop = true;
				// console.log(4,'000----1111-----2-222222')
				if (data.resp_code == 1000) {
					this.popHeight = 'height:4.36rem';
					this.popData = {
						prizeFail: true,
						text: data.resp_msg,
						prizeFailBut: 3,
						popUpHeight: '7.26rem'
					};
				}
				if (data.resp_code == 0) {
					// console.log(data, '009900900');

					if (data.data.pos == -1) {
						// console.log(2, '00--00---111--22--33');
						this.$emit('closePop', '18');
						this.popHeight = 'height:7.26rem';
						this.popData = {
							prizeFail: true,
							text: '很遗憾\n这次什么都没抽中',
							prizeFailBut: 1,
							popUpHeight: '7.26rem'
						};
					} else {
						sessionStorage.setItem('addressId', data.data.prize.addressId);
						this.pos = data.data.pos;//奖品位置 1 10京豆 2 50京豆 3 100京豆 4 实物
						this.prizeList = data.data.prize;
						this.popData = {
							prizeWinning: true,
							popUpHeight: '7.26rem'
						};
					}
				}
			});
		},
		prizeClick() {
			this.$emit('closePop', '12');
			this.popData = {
				addressText: true,
				popUpHeight: '7.26rem'
			};
		},
		//进店逛逛
		strollClick() {
			let shopId = store.state.shopId;
			goToShopPage(shopId);
		},
		// 再试一次返回作业
		backMakeClick() {
			this.$emit('closePop', '19');
		},
		// 显示
		taskShowClick() {
			this.$emit('closePop', '20');
		},
		//没有抽奖机会的
		noDrawChanceClick() {
			this.$emit('closePop', '22');
		},
		// 入会
		joinVipClick() {
			goToOpenCard(sessionStorage.getItem('openCardUrl'));
		}
	}
};
</script>

<style lang="scss" scoped>
.popUpBox {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	.tableImg {
		width: 1.38rem;
		height: 0.4rem;
	}

	.popUpBag {
		padding: 0.19rem;
		border-radius: 0.5rem;
		background-color: #f8d580;
		position: relative;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/157466/13/33216/118611/637b4366E585ed795/c9d12a98613dd9b8.png');
	}
	.popUpInner {
		width: 5.8rem;
		height: 4.36rem;
		background: #fee7b0;
		border: 0px solid #fffbf3;
		border-radius: 0.5rem;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.myPrize {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/103741/28/28159/28230/637b411dEed0db6e8/b36b195f4d5e0215.png');
	}
	.activityStatus {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/107014/22/21271/29130/63907d69E5caaa0f4/15a2424e26112160.png');
	}
	
	.popIcon {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 1.34rem;
		height: 1.37rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/210152/7/28747/29226/637b411dE7d53eebd/4c3830dd8c4fbb12.png');
	}
	.myPrizeText {
		padding: 0 0.4rem;
		font-size: 0.44rem;
		font-weight: 600;
		color: #000000;
		text-align: center;
		resize: none;
		padding-bottom: 0.1rem;
	}
	.popUpTable {
		width: 100%;
		height: 3.36rem;
		margin-top: 0.8rem;
	}
	.popUpTableHead {
		display: flex;
		align-items: center;
		justify-content: start;
		height: 0.8rem;
		background: #fcc951;
		font-size: 0.34rem;
		color: #000;
		font-weight: 600;
	}
	.popUpTableTitle {
		text-align: center;
		width: 100%;
	}
	.popUpTableBodyAll {
		overflow-y: scroll;
		height: 2.2rem;
	}
	.popUpTableBody {
		display: flex;
		align-items: center;
		justify-content: start;
		font-size: 0.24rem;
		color: #000;
	}
	.popUpBodyTitle {
		text-align: center;
		width: 100%;
		padding: 0.13rem 0.03rem;
	}
	.popBut {
		margin: 0 auto;
		margin-top: 0.6rem;
		height: 0.73rem;
		width: 2.61rem;
		img {
			width: 100%;
			display: block;
		}
	}
	.hint {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/97295/27/33958/28289/637b411dE1324b953/ca547c1d52b012e9.png');
	}
	.wish {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/179721/23/28435/31563/637b411dE7ac4fab2/71d140e72de24900.png');
	}
	.prompt {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/15271/29/19043/28199/6388078cE9f12ce73/b5e6fa98364fae11.png');
	}
	.popUpFailBut {
		margin: 0 auto;
		margin-top: 0.6rem;
		height: 0.73rem;
		width: 3.12rem;
		img {
			width: 100%;
		}
	}
	.upDateFail {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/158316/40/32778/26845/637b411dEada82016/2acdb34eb3ec0170.png');
	}
	.popLogo {
		margin: 0 auto;
		width: 2.76rem;
		height: 0.73rem;
		img {
			width: 100%;
			display: block;
		}
	}
	.popMemderText {
		color: #000000;
		font-size: 0.52rem;
		line-height: 0.66rem;
		font-weight: 600;
		margin: 0 auto;
		text-align: center;
		margin-top: 0.7rem;
		padding-bottom: 0.1rem;
		resize: none;
	}
	.popMemderYellow {
		position: relative;
		z-index: 2;
		&::before {
			content: '';
			position: absolute;
			bottom: 0.02rem;
			left: 0;
			width: 100%;
			height: 0.13rem;
			background-color: #ffe700;
			z-index: -1;
		}
	}
	.close {
		margin: 0 auto;
		margin-top: 0.6rem;
		height: 0.69rem;
		width: 0.69rem;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/192327/22/31425/7696/637b411eEab7f9238/617003dc49594628.png');
	}
	.popMemberWord {
		font-size: 0.36rem;
		margin: 0 auto;
		margin-top: 0.28rem;
	}
	.popMemberBut {
		margin: 0 auto;
		margin-top: 1.07rem;
		height: 0.73rem;
		white-space: 3.12rem;
		img {
			margin: 0 auto;
			margin-bottom: 0.2rem;
			height: 100%;
			display: block;
		}
	}
	.por {
		position: relative;
	}
	.hintWord {
		margin: 0 auto;
		margin-top: 0.1rem;
		font-size: 0.18rem;
		text-align: center;
		opacity: 0.6;
		color: #ffffff;
	}
	.prizeTilte {
		width: 4.65rem;
		height: 0.1em 0.113rem;
	}
	.prizeName {
		color: #000;
		font-size: 0.36rem;
		text-align: center;
	}
	.prizeImg {
		height: 2.88rem;
		margin: 0.4rem auto;
		img {
			height: 100%;
			display: block;
			margin: 0 auto;
		}
	}
	.prizeButBox {
		display: flex;
		justify-content: space-around;
	}
	.prizeBut {
		height: 0.62rem;
		img {
			height: 100%;
		}
	}
	.m-right-20 {
		margin-right: 0.2rem;
	}
	.prizeImage {
		// height: 3.68rem;
		// width: 2.45rem;
		margin-top: 0.28rem;
		margin-bottom: 0.18rem;
		display: flex;
		justify-content: center;
		align-items: center;
		img {
			height: 3.68rem;
			width: 2.45rem;
		}
	}
	.popUpbut {
		margin: 0 auto;
		height: 0.73rem;
		margin-top: 0.6rem;
		img {
			height: 100%;
		}
	}
	.addressTilte {
		margin: 0 auto;
		height: 1.13rem;
		img {
			height: 100%;
		}
	}
	.contactIcon {
		margin-right: 0.1rem;
		width: 0.34rem;
		height: 0.34rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/216820/26/23672/810/637c800aE8d3c7a9e/d70cbeccca2832a2.png');
	}
	.addressInner {
		display: flex;
		align-items: center;
		justify-content: start;
		margin-bottom: 0.46rem;
		position: relative;
		input:disabled {
			color: #bcad86 !important;
		}
	}
	.addressName {
		width: 1rem;
		text-align-last: justify;
		text-justify: distribute-all-lines;
		color: #000;
		font-size: 0.29rem;
		font-weight: 600;
		margin-right: 0.15rem;
	}
	.addressInput {
		height: 0.39rem;
		width: 2.98rem;
		font-size: 0.28rem;
		color: #000;
		border-bottom: 0.02rem solid #000;
	}
	.addressInputDiv {
		overflow-x: scroll;
		white-space: nowrap;
	}

	.addressForm {
		margin: 0 auto;
		margin-top: 0.5rem;
		width: 4.82rem;
		.van-cell-group {
			background-color: transparent;
			border: none;
			&::after {
				border: none;
			}
		}
	}
	.phoneIcon {
		margin-right: 0.1rem;
		width: 0.34rem;
		height: 0.34rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/195789/16/28102/791/637c8384Ed3fdafff/ce8dc7518c2624b8.png');
	}
	.addressIcon {
		margin-right: 0.1rem;
		width: 0.34rem;
		height: 0.34rem;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/177086/23/30655/1781/637c838cE474a63ef/3ffa73d98158c8c7.png');
	}
	.addressText {
		width: 4.02rem;
		height: 0.42rem;
		font-size: 0.28rem;
		border-bottom: 0.02rem solid #000;
		overflow: hidden;
		margin-left: 0.44rem;
	}
	.addressTextI {
		overflow-x: scroll;
		white-space: nowrap;
		text-align: left;
		color: #000;
	}
	.addressTextD {
		overflow-x: scroll;
		white-space: nowrap;
		text-align: left;
		color: #bcad86;
		// color: #000000;
	}
	.addressLabel {
		margin-left: 0.35rem;
		font-size: 0.29rem;
		color: #000;
		font-weight: 600;
		text-align: left;
		margin-top: 0.1rem;
	}
	.addressTextareaAll{
		overflow-y: scroll;
		height: 0.84rem;
	}
	.addressTextarea {
		width: 4.02rem;
		background: linear-gradient(rgba(0, 0, 0, 0) 0.4rem, #000 0.02rem);
		background-size: 100% 0.42rem;
		line-height: 0.42rem;
		height: 0.84rem;
		resize: none;
		font-size: 0.28rem;
		margin-bottom: 0.1rem;
		color: #000;
		// color: #bcad86;
	}
	.addressTextarea:disabled {
		color: #bcad86 !important;
	}
	.addressTextareaDivAll{
		min-height: 0.84rem;
		overflow-y: scroll;
	}
	// .addressTextareaDiv{
	// 	min-height: 0.84rem;
	// 	overflow-y: scroll;
	// }
	.ads {
		display: flex;
		align-items: center;
		justify-content: start;
		position: relative;
	}
	.taskTilte {
		height: 1.5rem;
		img {
			height: 100%;
		}
	}
	.taskShopList {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 0.3rem;
	}
	.taskShopText {
		width: 2rem;
		font-size: 0.2rem;
		line-height: 0.62rem;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.taskNum {
		color: #000000;
		font-size: 0.3rem;
		text-align: center;
		font-weight: 600;
		line-height: 0.62rem;
	}
	.taskWord {
		font-size: 0.2rem;
		color: #000;
		text-align: center;
	}
	.taskShopImg {
		width: 2rem;
		img {
			width: 100%;
			display: block;
		}
	}
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.listNull {
		height: calc(100% - 0.8rem);
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
