Buy_soap_tape/pages/index/index.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" focus 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="bottom_btn" @click="goBuy">
				立即下单
			</view>
		</view>
	</view>
</template>

<script>
	import { getOpenid } from '@/api/good.js'
	export default {
		data() {
			return {
				indexBox: false,
				type: '',
				title: '',
				num: 10,
				openid: '',
				image: [
					require('../../static/img/soap.png'),
					require('../../static/img/tape.png')
				]
			}
		},
		computed: {
			total() {
				return this.type ? this.num * 8 : this.num * 20
			}
		},
		onLoad(opt) {
			// 已授权
			if (opt.wxcode) {
				const type = (opt.type == 'soap' ? 1 : 0)
				uni.setStorageSync('type', Number(type))
				this.type = uni.getStorageSync('type')
				this.indexBox = true
				getOpenid({
					code: opt.wxcode
				}).then(res => {
					if (res.code == 200) {
						this.openid = res.data.openid
					} else {
						uni.showToast({
							title: res.msg || '登录失败',
							icon: 'none'
						});
					}
				})
				return
			}
			// 未授权
			let wxcode = this.getUrlParam('code')
			if (!wxcode) {
				const redirect_uri = 'http://api.app.cliu.cc'
				const wxURL = 'https://open.weixin.qq.com/connect/oauth2/authorize'
				const appid = 'wx5224793b7dc7f7b7'
				let uri = encodeURIComponent(
					`${redirect_uri}/api/gzh#/pages/to_soap_tape/to_soap_tape?type=${opt.type}`
				); 
				let authURL =
					`${wxURL}?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
				window.location.href = authURL;
				return false;
			}
			// if (opt.type) {
			// 	const type = (opt.type == 'soap' ? 1 : 0)
			// 	uni.setStorageSync('type', Number(type))
			// }
			// this.type = uni.getStorageSync('type')
		},
		methods: {
			//获取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/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 {
			padding: 8rpx 24rpx 6rpx 24rpx;
			box-shadow: 0px -4rpx 24rpx 2rpx rgba(0, 0, 0, 0.1);
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			&_top {
				font-weight: bold;
				font-size: 28rpx;
		
				.text1 {
					color: #999;
				}
				.text2 {
					color: #FB231F;
				}
				.text3 {
					font-size: 60rpx;
					color: #FB231F;
				}
			}
			&_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>