customerapp-H5/pages/Buy_soap_tape/goods.vue

<template>
	<view v-if="indexBox" class="indexBox">
		<image :src="type ? image[0] : image[1]" mode="widthFix" style="width: 100%;"></image>
		<view class="indexBox_introduce">
			<view>￥{{ type ? 8 : 20 }}</view>
			<view>{{ type ? '【大卫博士健康内裤】专用洗涤皂' : '【大卫博士健康内裤】专用打包胶带' }}</view>
			<view>本件商品10{{ type ? '块' : '卷' }}起订</view>
		</view>
		<view class="indexBox_stepper flexB">
			<text>购买数量</text>
			<view class="count flexS">
				<view class="flexC" @click.stop="down()">-</view>
				<input type="number" v-model="num" />
				<view class="flexC" @click.stop="up()">+</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom_top">
				<text class="text1">共{{ `${num + (type ? '块' : '卷')}` }}，</text>
				<text>合计；</text>
				<text class="text2">￥</text>
				<text class="text3">{{ total }}</text>
			</view>
			<view class="adress_bottom">
				<navigator :url="`./purchase_history?type=${type}`" class="add-address big-btn new_address">购买记录</navigator>
				<view @click="goBuy" class="add-address big-btn bg">立即下单</view>
				
			</view>
			<!-- <view class="bottom_btn" @click="goBuy">
				立即下单
			</view> -->
		</view>
	</view>
</template>

<script>
	import { wxLogin } from '@/api/index.js'
	export default {
		data() {
			return {
				indexBox: false,
				type: '',
				title: '',
				num: 10,
				openid: '',
				image: ['https://soap.cliu.cc/chumeng/soap.png','https://soap.cliu.cc/chumeng/tape.png']
			}
		},
		computed: {
			total() {
				return this.type ? this.num * 8 : this.num * 20
			}
		},
		onLoad(e) {
			// 从首页、扫码、或登录页进入
			if (e.type) {
				let type = (e.type == 'soap' ? 1 : 0)
				uni.setStorageSync('type', Number(type))
				this.type = uni.getStorageSync('type')
				
				let wxcode = this.getUrlParam('code')
				
				// 回调
				if (!uni.getStorageSync('token') && wxcode) {
					this.getLogin(wxcode)
					return
				}
				
				// 没有token
				if (!uni.getStorageSync('token') || !uni.getStorageSync('userInfo')) {
					this.toWxchatLogin(`/pages/Buy_soap_tape/goods?type=${e.type}`, null)
					return false;
				}
				// 经销商无法购买胶带
				let userInfo = uni.getStorageSync('userInfo')
				if (userInfo.level != 3 && type == 0) {
					uni.showModal({
						title: '提示',
						content: '无法购买',
						showCancel: false,
						success: res => {
							uni.switchTab({
								url: '../index/index'
							})
						}
					})
				} else {
					this.indexBox = true
				}
			}
		},
		methods: {
			// 跳转微信授权
			toWxchatLogin(url, state) {
				url = url || '/pages/index/index';
				state = state || 'cli';
				const redirect_uri = encodeURIComponent(`${this.$config.redirect_uri}/#${url}`);
				const auth = () =>
					(window.location.href = `${this.$config.wxURL}?appid=${
					this.$config.appid
				}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`);
				auth();
			},
			// 登录
			getLogin(wxcode) {
				let _this = this
				wxLogin({ code: wxcode }).then(res => {
					let data = res.data
					if (data.token) {
						uni.setStorageSync('token', data.token)
						uni.setStorageSync('userInfo', data.user)
					} else if (!data.token && data.openid) {
						uni.showModal({
							title: '提示',
							content: data.msg,
							showCancel: false,
							success: res => {
								uni.reLaunch({
									url: '../login/login?type=' + _this.type + '&openid=' + data.openid
								})
							}
						})
					} else if (!data.token && !data.openid) {
						uni.showModal({
							title: '错误提示',
							content: data.msg,
							showCancel: false
						})
					}
				})
			},
			//获取code值方法
			getUrlParam(name) {
			    console.log(window.location, 'location');
			    console.log(window.location.href, 'href');
			    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); //构造一个含有目标参数的正则表达式对象
			    var r = window.location.search.substr(1).match(reg); //匹配目标参数
			    if (r != null) return decodeURIComponent(r[2]);
			    // return null; //返回参数值
			    return ''; //返回参数值
			},
			down() {
				if (this.num - 1 === 9) {
					uni.showModal({
						content: `数量不能再少了`,
						showCancel: false
					})
			
				} else {
					this.num -= 1
				}
			},
			up() {
				this.num += 1
			},
			goBuy() {
				if (this.num < 10) {
					uni.showModal({
						content: `购买数量不能小于10`,
						showCancel: false
					})
					return
				}
				uni.navigateTo({
					url: './information?num=' + this.num + '&openid=' + this.openid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indexBox {
		padding-bottom: 214rpx;
		&_introduce {
			margin: 6rpx 0 24rpx 0;
			padding: 24rpx 24rpx 24rpx 8rpx;
			background-color: #fff;
			view:first-child {
				font-size: 56rpx;
				font-weight: bold;
				color: #FB231F;
				margin-left: 12rpx;
			}
			view:nth-child(2) {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				margin: 16rpx 0 24rpx 0;
			}
			view:last-child {
				font-size: 28rpx;
				font-weight: 400;
				color: #FB231F;
				margin-left: 16rpx;
			}
		}
		&_stepper {
			padding: 24rpx;
			background-color: #fff;
			text {
				font-size: 32rpx;
				color: #333333;
			}
			.count {
				margin-left: 20rpx;
				width: 224rpx;
				height: 68rpx;
				background: #fff4f3;
				border: 2px solid #FF0000;
				border-radius: 16rpx;
				overflow: hidden;
				input {
					border-left: 1rpx solid #FF0000;
					border-right: 1rpx solid#FF0000;
					height: 100%;
					width: 40%;
					text-align: center;
				}
				view {
					color: #FB231F;
					width: 30%;
					font-size: 44rpx;
					flex-shrink: 0;
				}
			}
		}
		.bottom {
					box-shadow: 0px -4rpx 24rpx 2rpx rgba(0, 0, 0, 0.1);
					position: fixed;
					left: 0;
					bottom: 0;
					width: 100%;
					background-color: #fff;
					z-index: 999;
					&_top {
						font-weight: bold;
						font-size: 28rpx;
						padding: 8rpx 24rpx 12rpx 24rpx;
						.text1 {
							color: #999;
						}
						.text2 {
							color: #FB231F;
						}
						.text3 {
							font-size: 60rpx;
							color: #FB231F;
						}
					}
					.adress_bottom {
						width: 100%;
						border-radius: 0;
						height: 88rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.add-address {
							text-align: center;
							// flex: 1;
							width: 65%;
							line-height: 88rpx;
							position: relative;
							background: #FB231F;
							color: #fff;
						}
					
						.new_address {
							flex: 1;
							text-align: center;
							border: none;
							background-color: #FFFFFF;
							color: #FB231F;
							box-shadow: 0px 0px 24rpx 2rpx rgba(0, 0, 0, 0.1);
							// border-top: 1rpx solid #FE4815;
						}
					}
					// &_btn {
					// 	width: 702rpx;
					// 	height: 88rpx;
					// 	background: linear-gradient(91deg, #F30000 0%, #FE4815 100%);
					// 	border-radius: 44rpx 44rpx 44rpx 44rpx;
					// 	text-align: center;
					// 	line-height: 88rpx;
					// 	font-size: 32rpx;
					// 	font-weight: bold;
					// 	color: #FFFFFF;
					// 	margin-top: 12rpx;
					// }
				}
		// .bottom {
		// 	box-shadow: 0px -4rpx 24rpx 2rpx rgba(0, 0, 0, 0.1);
		// 	position: fixed;
		// 	left: 0;
		// 	bottom: 0;
		// 	width: 100%;
		// 	background-color: #fff;
		// 	z-index: 999;
		// 	padding: 8rpx 24rpx 12rpx 24rpx;
		// 	&_top {
		// 		font-weight: bold;
		// 		font-size: 28rpx;
		// 		.text1 {
		// 			color: #999;
		// 		}
		// 		.text2 {
		// 			color: #FB231F;
		// 		}
		// 		.text3 {
		// 			font-size: 60rpx;
		// 			color: #FB231F;
		// 		}
		// 	}
		// 	.adress_bottom {
		// 		width: 100%;
		// 		border-radius: 0;
		// 		height: 88rpx;
		// 		display: flex;
		// 		justify-content: space-between;
		// 		align-items: center;
		// 		.add-address {
		// 			text-align: center;
		// 			// flex: 1;
		// 			width: 65%;
		// 			line-height: 88rpx;
		// 			position: relative;
		// 			background: #FB231F;
		// 			color: #fff;
		// 		}
			
		// 		.new_address {
		// 			flex: 1;
		// 			text-align: center;
		// 			border: none;
		// 			background-color: #FFFFFF;
		// 			color: #FB231F;
		// 			box-shadow: 0px 0px 24rpx 2rpx rgba(0, 0, 0, 0.1);
		// 			// border-top: 1rpx solid #FE4815;
		// 		}
		// 	}
		// 	&_btn {
		// 		width: 702rpx;
		// 		height: 88rpx;
		// 		background: linear-gradient(91deg, #F30000 0%, #FE4815 100%);
		// 		border-radius: 44rpx 44rpx 44rpx 44rpx;
		// 		text-align: center;
		// 		line-height: 88rpx;
		// 		font-size: 32rpx;
		// 		font-weight: bold;
		// 		color: #FFFFFF;
		// 		margin-top: 12rpx;
		// 	}
		// }
	}
</style>