H5-Merchant/openmerchant/amountopening/index.vue

<template>
	<view class="amountopening">
		<view class="amountopening-back">
			<image src="https://cdn.bjtdba.com/vod/image/2022-08-10/20220810090332606.png" mode="widthFix"></image>
			<view class="amountopening-header">
				<view class="amountopening-header-icon" @click="returns">
					<image src="https://cdn.bjtdba.com/vod/image/2022-08-10/20220810090600249.png" mode="widthFix">
					</image>
				</view>
				<view class="amountopening-header-text">
					开通商户
				</view>
			</view>
			<view class="amountopening-icon">
				<image src="https://cdn.bjtdba.com/vod/image/2022-08-10/20220810090719212.png" mode="widthFix"></image>
				<view class="amountopening-jinggao">
					<view class="amountopening-jinggao-top">
						开通电商商户
					</view>
					<view class="amountopening-jinggao-bot">
						¥19800/年
					</view>
				</view>
				<view class="amountopening-kaiqi">
					<view class="amountopening-kaiqi-text">
						开通商户立享八项功能权益
					</view>
					<view class="amountopening-kaiqi-iocnr" @click="activiteCard = false">
						我有激活码
					</view>
				</view>
			</view>
		</view>
		<view class="amountopening-quanyi">
			尊享权益
		</view>
		<view class="amountopening-list">
			<view class="amountopening-list-is" v-for="(item,index) in mus" :key="index">
				<view class="amountopening-list-is-top">
					<image :src="item.url" mode="widthFix"></image>
				</view>
				<view class="amountopening-list-is-bto">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- <view class="amountopening-kaitong" @click="payment">
			<image src="https://cdn.bjtdba.com/vod/image/2022-08-10/20220810105617180.png" mode="widthFix">

			</image>
			<view class="kaitong-amount">
				<span class="kaitong-money">¥3990</span>
				<span>/年</span>
			</view>
		</view> -->
		<view class="amountopening-anniu" @click="payment">
			立即开通
		</view>

		<view :class="[activiteCard ? 'dis-activite' : '', 'activite-code' ]" @touchmove.stop.prevent="moveHandle">
			<view class="activite-code-mask" @click="activiteCard = true"></view>
			<view class="bottomss">
				<view class="top">
					兑换激活码
				</view>
				<view class="cv">
					<view class="cv-title">输入激活码，兑换储蓄保一壶茶商户</view>
					<input class="cv-input" type="text" placeholder="输入激活码" v-model="useCode">
				</view>
				<view class="ft" @click="immediateUse">
					立即使用
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updateActivationCode,
		insterMerchantOrder,
		selectMerchant
	} from '@/commit/api.js';
	
	export default {
		data() {
			return {
				userinfo: [],
				activiteCard: true,
				useCode: '',
				code: '',
				mus: [{
						url: 'https://cdn.bjtdba.com/vod/image/2022-08-10/20220810101724170.png',
						name: '线上商城'
					},
					{
						url: 'https://cdn.bjtdba.com/vod/image/2022-08-10/20220810101550963.png',
						name: '店务管理'
					},
					{
						url: 'https://cdn.bjtdba.com/vod/image/2022-08-10/20220810101703873.png',
						name: '锁定客户'
					},
					{
						url: 'https://cdn.bjtdba.com/vod/image/2022-08-10/20220810101751275.png',
						name: '员工管理'
					},
					{
						url: 'https://cdn.bjtdba.com/vod/image/2022-08-10/20220810101615531.png',
						name: '经营报表'
					},
					{
						url: 'https://cdn.bjtdba.com/vod/image/2022-08-10/20220810101653529.png',
						name: '数据分析'
					},
					{
						url: 'https://cdn.bjtdba.com/vod/image/2022-08-10/20220810101604267.png',
						name: '会员管理'
					},
					{
						url: 'https://cdn.bjtdba.com/vod/image/2022-08-10/20220810101713873.png',
						name: '推广引流'
					},
				]
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo')
		},
		onShow() {
			    
		},
		methods: {
			moveHandle() {},
			returns() {
				uni.redirectTo({
					url: "/openmerchant/guide/index"
				})
			},
			immediateUse() {

				if (this.useCode == "") return uni.showToast({
					title: "请输入激活码",
					icon: "none"
				});
				updateActivationCode({
					code: this.useCode,
					uid: this.userinfo.uid
				}).then(res => {
					console.log('激活码激活 -->',res)
					if (res.data.status == 200) {
						this.useCode = "";
						this.activiteCard = true;
						//获取merId进行存储
						let UserSelectmerchant = uni.getStorageSync('selectmerchant')
						let selectmerchant = {
							status:UserSelectmerchant.status,
							merId:res.data.data.mer_id,
							pay_type:res.data.data.pay_type,
							msg:UserSelectmerchant.msg
						}
						if(res.data.data.pay_type=="2"){
							this.$store.commit('changeMerchantsStatus', 1);
						}
						uni.setStorageSync('selectmerchant', selectmerchant);
						uni.redirectTo({
							url: "/openmerchant/shopentry/process?mer_id=" + res.data.mer_id
						})
					}
				}, fail => {
					console.log('激活码激活 -->',fail)
				})
			},
			payment() {
				let userInfo = uni.getStorageSync('userinfo')
				// 用户状态判断
				selectMerchant({
					uid: userInfo.uid
				}).then(data => {
					console.log('data = ',data)
					if (data.data.status == 200) {
						if (data.data.data.status == -1) {
							this.pushToUserApplet()
						} else {
							uni.redirectTo({
								url: '/openmerchant/shopentry/process?mer_id=' + data.data.data.merId //已开通商户未填写资料
							});
							return
						}
					}
				}, fail => {
					uni.showToast({
						title: fail,
						icon: "none"
					})
				}).catch(err => {
					console.log(err)
				})
				
				
			},
			
			pushToUserApplet() {
				uni.navigateToMiniProgram({
					// appid  写你要跳转的小程序的 appid
					appId:'wx9082e5ac2fdb513f',
					// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
					// path: 'pagesA/oderPay/oder_nian',
					path: 'pages/chuangke/index?type=100',
					// 这个不写的话会显示开发环境,不能正常跳转,写上就能正常跳转了
					envVersion: 'trial',  // develop（开发版），trial（体验版），release（正式版）
					// envVersion: 'release',  // develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 打开成功
						uni.showToast({
							title: '跳转成功'
						})
					},
					fail(err) {
						console.log(err)
						// 打开失败/取消
						uni.showToast({
							title: '跳转不成功'
						})
					}
				})
			},
			
			pay(appId, timeStamp, nonceStr, pack, signType, paySign) {
				wx.requestPayment({
					'appId': appId,
					'timeStamp': timeStamp,
					'nonceStr': nonceStr,
					'package': pack,
					'signType': signType,
					'paySign': paySign,
					success: function(res) {
						uni.showToast({
							title: "支付成功",
							icon: 'none',
						})
						this.$store.commit('changeMerchantsStatus', 0);
						uni.redirectTo({
							url: "/openmerchant/shopentry/process?mer_id=539"
						})
					},
					fail: function(res) {
						uni.showToast({
							title: res.data,
							duration: 2000
						})
					},
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.amountopening {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.amountopening-back {
			width: 100%;
			height: 347rpx;
			position: relative;
			display: flex;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
			}

			.amountopening-header {
				position: absolute;
				width: 686rpx;
				height: 100rpx;
				// top: 37rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.amountopening-header-icon {
					width: 36rpx;
					height: 36rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.amountopening-header-text {
					font-size: 36rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 26rpx;
				}
			}

			.amountopening-icon {
				width: 686rpx;
				height: 320rpx;
				position: absolute;
				top: 108rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.amountopening-jinggao {
					position: absolute;
					top: 36rpx;
					left: 32rpx;
					height: 99rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;

					.amountopening-jinggao-top {
						font-size: 42rpx;
						font-weight: 500;
						color: #333333;
					}

					.amountopening-jinggao-bot {
						font-size: 38rpx;
						font-weight: 400;
						color: #333333;
					}
				}

				.amountopening-kaiqi {
					position: absolute;
					width: 622rpx;
					left: 32rpx;
					bottom: 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.amountopening-kaiqi-text {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}

					.amountopening-kaiqi-iocnr {
						width: 189rpx;
						height: 64rpx;
						background: linear-gradient(175deg, #FFF8E0 0%, #EAD6AE 100%);
						border-radius: 31px;
						line-height: 64rpx;
						text-align: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		.amountopening-quanyi {
			width: 686rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 113rpx;
			display: flex;
			justify-content: flex-start;
		}

		.amountopening-list {
			width: 686rpx;
			// height: 555rpx;
			border-radius: 16rpx;
			border: 1rpx solid #FEB84A;
			margin-top: 32rpx;
			display: flex;
			flex-wrap: wrap;

			.amountopening-list-is {
				width: 110rpx;
				height: 131rpx;
				display: flex;
				margin: 12rpx 31rpx 12rpx 31rpx;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.amountopening-list-is-top {
					width: 86rpx;
					height: 86rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.amountopening-list-is-bto {
					font-size: 26rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.amountopening-kaitong {
			width: 686rpx;
			height: 88rpx;
			margin-top: 280rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.kaitong-amount {
				position: absolute;
				top: 20rpx;
				left: 175rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				line-height: 48rpx;
				display: flex;

				.kaitong-money {
					color: #FBDD99;
					font-size: 48rpx;
					margin-right: 8rpx;
				}
			}
		}
		.amountopening-anniu{
			width: 686rpx;
			height: 88rpx;
			background: #45495A;
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			margin-top: 343rpx;
		}

		.dis-activite {
			display: none !important;
		}

		.activite-code {
			width: 100%;
			height: 100%;
			background: transparent;
			position: fixed;
			margin: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 111;
			display: flex;
			justify-content: center;
			align-items: center;

			.activite-code-mask {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				position: fixed;
			}

			.bottomss {
				width: 560rpx;
				// height: 408rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				text-align: center;
				padding-top: 50rpx;
				z-index: 112;

				.top {
					font-size: 36rpx;
				}

				.cv {
					width: 100%;
					box-sizing: border-box;
					padding: 35rpx 22rpx 40rpx 26rpx;
					border-bottom: 1rpx solid #E5E5E5;
					text-align: left;

					.cv-title {
						font-size: 30rpx;
						margin-bottom: 32rpx;
					}

					.cv-input {
						border-radius: 8rpx;
						border: 2px solid #999999;
						width: 508rpx;
						height: 86rpx;
						padding-left: 25rpx;
						box-sizing: border-box;
						font-size: 26rpx;
					}
				}

				.ft {
					width: 100%;
					padding: 31rpx 0;
					color: #1F7CFF;
					font-size: 36rpx;
				}
			}
		}
	}
</style>