Huanyuyuehui/components/passwordPopup/index.vue

<template>
	<view>
		<view class='password-window' :class='window==true?"on":""' :style="{ 'background-image': `url(${domain}/static/images/passwordPop.png)`}">
			<view class='passwordCount'>
				<view class="title1 acea-row row-between-wrapper">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" class="picture"></image>
					<text class="name line1">{{userInfo.nickname}}</text>
					给你分享了宝贝
				</view>
				<view class="banner">
					<image :src="storeInfo.image"></image>
				</view>
				<view class="pro-info">
					<view class="price acea-row">¥<text class="money">{{storeInfo.price}}</text>
						<text v-if="storeInfo.product_type == 0" class="pro_type">普通商品</text>
					</view>
					<view class="name line1">{{storeInfo.store_name}}</view>
				</view>
				<button v-if="storeInfo.product_type != 3" class="go_btn" @click="goDetail(storeInfo)">查看详情</button>
				<button v-if="storeInfo.product_type == 3" class="go_btn btn1" @click="goDetail(storeInfo)">帮他助力</button>
			</view>
			<view class='lid'>
				<view class='iconfont icon-guanbi3' @click="close"></view>
			</view>
		</view>
		
		<view class='mask' catchtouchmove="true" :hidden="window==false" style="z-index: 999;"></view>
	</view>
</template>

<script>
	 
	import { pwdResolution } from '@/api/user.js'
	import { mapGetters } from "vuex";
	import {toLogin} from '@/libs/login.js';
	import { goShopDetail } from '@/libs/order.js'
	import {initiateAssistApi} from '@/api/activity.js';
	import {HTTP_REQUEST_URL} from '@/config/app.js';
	export default {
		props: {
			isLogin:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				window: false,
				couponList: [],
				userInfo: {},
				storeInfo: {},
				pwdInfo: {},
				domain: HTTP_REQUEST_URL,
			};
		},
		computed: mapGetters(["copyPwd", "uid"]),
		watch: {
			copyPwd:{
				handler(nVal,oVal){
					if(nVal)this.resolution(nVal)
				},
				immediate: true,
				deep:true
			}
		},
		mounted(){		
		},
		beforeDestroy(){
			
		},
		methods: {
			close:function(){
			  this.window = false
			},
			resolution(data){
				let com = uni.getStorageSync('pwdKey')
				pwdResolution(data).then(res => {
					if(res.data.user && res.data.user.uid != this.uid && com !=res.data.com){
						this.window = true;
						this.pwdInfo = res.data;
						this.userInfo = res.data.user;
						this.storeInfo = res.data.data;
						if(res.data.activity_id )this.storeInfo.activity_id = res.data.activity_id 
						if(res.data.product_type )this.storeInfo.product_type = res.data.product_type 
						this.$store.commit("PARSE_PWD", null)
						uni.setStorageSync('pwdKey', res.data.com);
					}
				})
			},
			goDetail(item){
				goShopDetail(item, this.uid).then(res => {
					this.$store.commit("PARSE_PWD", null)
					if (this.isLogin) {
							initiateAssistApi(item.activity_id).then(res => {
								let id = res.data.product_assist_set_id;
								uni.hideLoading();
								uni.navigateTo({
									url: '/pages/activity/assist_detail/index?id=' + id
								});					
							}).catch((err) => {
								uni.showToast({
									title: err,
									icon: 'none'
								})
							});
						} else {
							toLogin();	
						}
					})		
			}
		}
	}
</script>

<style scoped lang="scss">
	.password-window {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #fff;
		width: 580rpx;
		height: 910rpx;
		position: fixed;
		top: 50%;
		z-index: 1000;
		left: 50%;
		margin-left: -290rpx;
		margin-top: -455rpx;
		transform: translate3d(0, -200%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		border-radius: 24rpx;
		padding: 25rpx 30rpx 40rpx;
	}
	
	.password-window.on {
		transform: translate3d(0, 0, 0);
	}
	.passwordCount .title1{
		width: 380rpx;
		margin: 0 auto;
		height: 42rpx;
		background: #F1F1F1;
		border-radius: 23rpx;
		padding: 0 15rpx;
		color: #666666;
		font-size: 24rpx;
		.picture{
			width: 36rpx;
			height: 36rpx;
			border-radius: 100%;
			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
		.name{
			color: #282828;
			font-weight: bold;
			max-width: 100rpx;
			margin: 0 10rpx;
		}
	}
	.password-window .banner{
		width: 520rpx;
		height: 520rpx;
		margin-top: 25rpx;
		image{
			width: 520rpx;
			height: 520rpx;
			border-radius: 16rpx;
		}
	}
	.password-window .pro-info{
		margin-top: 15rpx;
		.price{
			color: #E93323;
			font-size: 26rpx;
			justify-content: left;
			align-items: center;
			.money{
				font-size: 42rpx;
			}
		}
		.pro_type{
			display: inline-block;
			width: 100rpx;
			height: 28rpx;
			text-align: center;
			line-height: 28rpx;
			background: #FDEAE8;
			margin-left: 30rpx;
			font-size: 18rpx;
			position: relative;
			&::before{
				content: "";
				display: inline-block;
				width: 0;
				height: 0;
				border-width: 15rpx 15rpx 15rpx 0;
				border-style: solid;
				border-color: transparent #FDEAE8 transparent transparent;
				position: absolute;
				left: -16rpx;
			}
			&::after{
				content: "";
				display: inline-block;
				width: 6rpx;
				height: 6rpx;
				background: #fff;
				border-radius: 100%;
				position: absolute;
				top: 12.5rpx;
				left: -4rpx;
				z-index: 10;
			}
		}
		.name{
			margin-top: 15rpx;
			color: #282828;
			font-size: 30rpx;
		}
	}
	.password-window .lid {
		position: absolute;
		bottom: -100rpx;
		left: 0;
		width: 100%;
		text-align: center;
	}
	.go_btn{
		margin-top: 50rpx;
		width: 520rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #E93323;
		color: #ffffff;
		border-radius: 40rpx;
		font-size: 28rpx;
		&.btn1{
			background: #FC8327
		}
	}
	.password-window .lid .iconfont {
		color: #fff;
		font-size: 60rpx;
		text-align: center;
		margin-left: -30rpx;
	}
</style>