customerapp-H5/pages/Buy_soap_tape/information.vue

<template>
	<view style="background-color: #fff;height: 100vh;">
		<view class="address flexB " @click="goaddress">
			<view class="flexV">
				<view class="address_tip red">
					收货人
				</view>
				<view v-if="!showEdit">
					<view>
						<text>{{ form.user_name }}</text>
						<text style="margin-left: 24rpx;">{{ form.mobile }}</text>
					</view>
					<view class="gray">
						{{ form.province + form.city + form.area + form.address }}
					</view>
				</view>
				<view class="address_title" v-if="showEdit">
					收货人信息
				</view>
			</view>
			<view style="width: 48rpx;height: 48rpx;">
				<image src="../../static/Buy_soap_tape/arrow.png" style="width: 48rpx;height: 48rpx;margin-left: 10rpx;"></image>
			</view>
		</view>
		<view class="detail flexV">
			<view style="width: 200rpx;height: 160rpx;">
				<image :src="type ? image[0] : image[1]" style="width: 200rpx;height: 160rpx;" />
			</view>
			<view class="detail_flex">
				<view class="title">
					{{ type ? '【大卫博士健康内裤】专用洗涤皂' : '【大卫博士健康内裤】专用打包胶带' }}
				</view>
				<view class="dan">
					<text>
						<text style="font-size: 28rpx;">￥</text>{{ type ? 8 : 20 }}
					</text>
					<view class="num-input">
						<view class="i l" style="font-size: 40rpx;" @tap.stop="red">-</view>
						<view class="i c" @tap.stop="inputNum = num, showInput = true">{{ num }}</view>
						<view class="i r" style="font-size: 40rpx;" @tap.stop="add">+</view>
						<view v-if="showInput" class="inputModelWrapper">
							<view class="inputModel">
								<view class="t">请输入数量</view>
								<view class="m">
									<input ref="input" focus type="number" maxlength="6" v-model="inputNum" />
								</view>
								<view class="b">
									<text style="color: #333333;" @tap.stop="showInput = false">取消</text>
									<text class="r basecolor" @tap.stop="comfirmNum">确定</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tip">
					本件商品10{{ type ? '块' : '卷' }}起订
				</view>
			</view>
		</view>
		<view class="remark">
			<text>备注（选填）</text>
			<view class="remark_bg">
				<textarea type="text" placeholder="在这里写备注" v-model="remark" placeholder-class="placetext" auto-height />
			</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="$noMultipleClicks(save)">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	// import NumInput from '@/components/public/num-input.vue'
	import { _API_Getpays } from '@/api/Buy_soap_tape.js'
	import { location } from '@/api/index.js'
	const jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				ads: {
					location: '',
					province: '',
					city: '',
					area: ''
				}, //文字地址
				allForm: {},
				type: '',
				noClick: true,
				showEdit: true,
				showInput: false,
				inputNum: '',
				remark: '',
				image: [
					require('../../static/Buy_soap_tape/soap-s.png'),
					require('../../static/Buy_soap_tape/tape-s.png')
				],
				num: 10,
				openid: '',
				m_mi: '',
				location: '',
				form: {
					user_name: '',
					mobile: '',
					province: '',
					city: '',
					area: '',
					address: '',
					area_code: '+86' // 手机号地区代码
					// user_name: '张先生',
					// mobile: '13523102256',
					// province: '河南省',
					// city: '郑州市',
					// area: '管城回族区',
					// address: '七里河小区1号楼1单元 5楼A508',
				},
			}
		},
		computed: {
			address() {
				return this.$store.state.list[this.$store.getters['usingAddressIndex']]
			},
			total() {
				return this.type ? this.num * 8 : this.num * 20
			}
		},
		onLoad: function(option) {
			this.type = uni.getStorageSync('type')
			if (option.num) {
				this.num = Number(option.num)
			}
		},
		onShow() {
			if (this.address) {
				this.showEdit = false
				const { con_name, con_mobile, provice, city, area, address, area_code } = this.address
				this.form = {
					user_name: con_name,
					mobile: con_mobile,
					province: provice,
					city: city,
					area: area,
					address: address,
					area_code: area_code
				}
			}
		},
		mounted() {
			this.getAddress()
		},
		methods: {
			//通过后端获取wx.config的配置,再通过微信的js-sdk获取经纬度
			getAddress() {
				const _this = this;
				let link = window.location.href;
				location({
					url: link
				}).then(res => {
					if (res.code == 200) {
						let data = JSON.parse(res.data);
						console.log('后端返回的wx.config的配置:', JSON.parse(res.data));
						_this.getLocation(data);
					} else {
						console.log('获取位置失败');
					}
				});
			},
			getLocation(params) {
				const _this = this;
				// 判断是否支持获取定位
				jweixin.config({
					debug: false, //开启debug模式.正式环境设置为false,测试环境设置为true
					appId: params.appId,
					timestamp: params.timestamp,
					nonceStr: params.nonceStr,
					signature: params.signature,
					jsApiList: ['getLocation'] //根据需要看需要哪些SDK的功能
				});
				// sdk加载完成后执行
				jweixin.ready(() => {
					jweixin.checkJsApi({
						jsApiList: ['getLocation'],
						success: res => {
							if (res.checkResult.getLocation == false) {
								alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
								return;
							}
						}
					});
					jweixin.error(res => {
						console.log( 'err错误', res.errMsg,);
					});
					// 获取位置
					jweixin.getLocation({
						type: 'gcj02',
						success: res => {
							this.location = `${res.longitude},${res.latitude}`;
							console.log('location', this.location, res)
						},
						cancel: res => {
							uni.showToast({
								title: '您已禁止获取位置信息',
								icon: 'none'
							});
						},
						fail: err => {
							uni.showModal({
								title: '提示',
								content: '获取位置信息失败，请关闭网页重新打开，否则会导致无法支付',
								showCancel: false,
							})
						}
					});
				});
			},
			//WeixinJSBridge判断
			wxJsPay(data, callback_succ_func, callback_error_func) {
				if (typeof WeixinJSBridge == 'undefined') {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
						document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
					}
				} else {
					this.jsApiCall(data, callback_succ_func, callback_error_func);
				}
			},
			//调起支付
			jsApiCall(data, callback_succ_func, callback_error_func) {
				//使用原生的，避免初始化appid问题
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: data.appId,
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign
					},
					function(res) {
						var msg = res.err_msg ? res.err_msg : res.errMsg;
						switch (msg) {
							//支付成功时
							case 'get_brand_wcpay_request:ok':
								if (callback_succ_func) {
									uni.showModal({
										content: '支付成功！',
										showCancel: false
									});
									callback_succ_func(res);
								}
								break;
							default:
								//支付失败时
								WeixinJSBridge.log('支付失败！' + msg + ',请返回重试.');
								if (callback_error_func) {
									callback_error_func({
										msg: msg
									});
								}
								break;
							// //支付成功时
							// case 'get_brand_wcpay_request:ok':
							// 	// if (callback_succ_func) {
							// 	uni.showModal({
							// 		content: '购买成功',
							// 		showCancel: false,
							// 		success: function(res) {
							// 			uni.redirectTo({
							// 				url: "/pages/soap/index"
							// 			})
							// 		},
							// 		// complete: function() {
							// 		// 	that.SearchStatus()
							// 		// }
							// 	});
							// 	// }
							// 	break;
							// default:
							// 	//支付失败时
							// 	WeixinJSBridge.log('支付失败!' + msg + ',请返回重试.');
							// 	if (callback_error_func) {
							// 		callback_error_func({
							// 			msg: msg
							// 		});
							// 	}
							// 	break;
						}
					}
				);
			},
			// 提交
			save() {
				let _this = this
				this.form.cost = this.total
				this.form.price = this.type ? 8 : 20
				this.form.num = this.num
				this.form.remark = this.remark
				this.form.goods_type = this.type ? 1 : 2
				this.form.location = this.location
				if (!this.form.user_name || !this.form.province) {
					uni.toast('未填写收货人信息');
					return
				}
				this.allForm = this.form
				_API_Getpays(this.form).then(res => {
						if (res.code === 200) {
							this.allForm.order_no = res.data.order_num
							this.allForm.created_at = res.data.created_at
							let that = this
							let callback_succ_func = function() {
								uni.showModal({
									content: '支付成功！',
									showCancel: false,
									success: function(res) {
										uni.reLaunch({
											url: '../pay-status/pay-status?order_no=' + that.allForm.order_no + '&total=' +that.total + '&data=' +  encodeURIComponent(JSON.stringify(that.allForm)).replace(/%/g, '%25')
										})
									},
								})
							};
							let callback_error_func = res => {
								uni.showModal({
									content: '支付失败！',
									showCancel: false
								});
							};
							// let callback_succ_func = res => {
							// 	uni.showToast({
							// 		title: '支付成功'
							// 	})
							// }
							// let callback_error_func = res => {
							// 	uni.showModal({
							// 		content: '支付失败！',
							// 		showCancel: false
							// 	})
							// }
							let info = res.data.data.pay_info
							this.wxJsPay(info, callback_succ_func, callback_error_func)
						} else {
							uni.showToast({
								title: res.message || '失败',
								icon: 'none'
							})
							return false;
						}
					})
					.catch(err => {})
					.finally(() => {
						setTimeout(() => {}, 3000)
					})
			},
			red() {
				if (this.num - 1 === 9) {
					uni.showModal({
						content: `数量不能再少了`,
						showCancel: false
					})

				} else {
					this.num -= 1
				}
			},
			add() {
				this.num += 1
			},
			comfirmNum() {
				//限制下单数量
				// if (this.inputNum % 10 != 0) {
				// 	uni.showModal({
				// 		content: `请输入10的倍数`,
				// 		showCancel: false
				// 	})
				// 	return
				// } else if (this.inputNum == 0) {
				// 	uni.showModal({
				// 		content: `数量不能为0`,
				// 		showCancel: false
				// 	})
				// 	return
				// }
				if (this.inputNum < 10) {
					uni.showModal({
						content: `购买数量不能小于10`,
						showCancel: false
					})
					return
				}
				this.num = Number(this.inputNum)
				this.showInput = false
			},
			// 收货人
			goaddress() {
				uni.navigateTo({
					url: './address-manage'
				})
				// const url = this.showEdit ? './address' : './address?data=' + encodeURIComponent(JSON.stringify(this.form))
				// uni.navigateTo({
				// 	url
				// })
			}
		}
	}
</script>
<style>
	.placetext {
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
	}
</style>
<style lang="scss" scoped>
	.num-input {
		@include flex();
		width: 228rpx;
		height: 64rpx;
		overflow: hidden;
		font-size: 32rpx;
		background: #F9F9FB;
		// border-radius: 64rpx;
		.i {
			flex: 1;
			height: 100%;
			@include flex();

			// &.c {
			// 	border-left: 4rpx solid #FFFFFF;
			// 	border-right: 4rpx solid #FFFFFF;
			// }
		}

		.l {
			color: #CCCCCC;
		}

		.r {
			color: #FB231F;
		}

		.inputModelWrapper {
			@include flex();
			top: 0;
			left: 0;
			z-index: 2;
			width: 100vw;
			height: 100vh;
			position: fixed;
			background: rgba(0, 0, 0, 0.3);

			.inputModel {
				width: 600rpx;
				height: 400rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				@include flex(column);

				.t {
					@include flex();
					width: 100%;
					height: 100rpx;
					border-bottom: 1rpx solid #CCCCCC;
				}

				.m {
					width: 100%;
					flex: 1;
					@include flex();

					input {
						width: 240rpx;
						height: 120rpx;
						text-align: center;
						font-size: 88rpx;
						border-radius: 8rpx;
						border: 1rpx solid #CCCCCC;
					}
				}

				.b {
					@include flex();
					width: 100%;
					height: 100rpx;
					border-top: 1rpx solid #CCCCCC;

					text {
						font-size: 32rpx;
						font-weight: 400;
						height: 100%;
						flex: 1;
						@include flex();

						&.basecolor {
							border-left: 1rpx solid #CCCCCC;
						}
					}
				}
			}
		}
	}

	.address {
		padding: 40rpx 0;
		margin: 0 24rpx;
		background-color: #fff;
		&_tip {
			width: 92rpx;
			color: #fff;
			font-size: 24rpx;
			font-weight: bold;
			line-height: 50rpx;
			text-align: center;
			
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 20rpx;
		}
		.green {
			background: linear-gradient(180deg, #46DBA1 0%, #19D16E 100%);
		}
		.red {
			background: linear-gradient(180deg, #FF232C 0%, #FF571B 100%);
		}
		&_title {
			font-size: 28rpx;
			font-weight: 400;
			color: $uni-text-color;
		}
		text {
			font-size: 34rpx;
			font-weight: bold;
		}

		.gray {
			width: 518rpx;
			font-size: 28rpx;
			color: #999999;
			margin-top: 8rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden; //溢出内容隐藏
			text-overflow: ellipsis; //文本溢出部分用省略号表示
			display: -webkit-box; //特别显示模式
			line-clamp: 2;
			-webkit-line-clamp: 2; //行数
			-webkit-box-orient: vertical;
		}
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 8rpx 24rpx 8rpx 24rpx;
		box-shadow: 0px -4rpx 24rpx 2rpx rgba(0, 0, 0, 0.1);
		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;
		}
	}

	.remark {
		padding: 80rpx 24rpx 210rpx 24rpx;
		text {
			font-size: 34rpx;
			font-weight: bold;
		}
		&_bg {
			margin-top: 22rpx;
			background-color: #F9F9FB;
			padding: 32rpx 24rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.placetext {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}
	
	.detail {
		padding: 56rpx 24rpx 24rpx 24rpx;
		background-color: #fff;
		border-top: 24rpx solid #F5F5F5;

		&_flex {
			// height: 160rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			.dan {
				display: flex;
				justify-content: space-between;
				width: 500rpx;
				margin: 16rpx 0 6rpx 0;
				text {
					font-size: 44rpx;
					color: #FB231F;
					font-weight: bold;
				}
			}

			.tip {
				width: 212rpx;
				height: 32rpx;
				line-height: 30rpx;
				border-radius: 0px 0px 0px 0px;
				opacity: 1;
				border: 1rpx solid #FB231F;
				font-size: 24rpx;
				color: #FB231F;
				text-align: center;
			}
		}
	}
</style>