duantuihe/pages/my/charge/index.vue

<template>
	<view class="container">
		<navBar title="充值次数" :back="true" color="#333333" background="#FFFFFF" />

		<view class="addBg" :style="{'background-image':`url(${picBase+'chargeBg.png'})`}">
			<view class="topBox">
				<view class="userBox">
					<image class="avatar" :src="!userInfo.avatar?picBase+'defaultAvatar.png':userInfo.avatar" mode="">
					</image>

					<view class="right">
						<view class="nickname">
							{{userInfo.name?userInfo.name:'默认用户'}}
						</view>
						<view class="bot">
							<image class="icon" :src="picBase+'charge_yibiao.png'" mode=""></image>
							绘画次数：{{userInfo.diamond}}
						</view>
					</view>
				</view>

				<view class="btn" @click="toRecord">
					记录
				</view>
			</view>



			<view class="mainBox">
				<view class="tagLine">

				</view>
				<view class="carItem " :class="[index==curIndex?'bor':'']" v-for="(item,index) in list"
					@click="selTaocan(index,item.id)">
					<view class="left">
						<view class="name">
							{{item.title}}
						</view>
						<view class="count">
							次数：{{item.diamond}}
						</view>
					</view>
					<view class="right">
						￥{{item.amount}}
					</view>
				</view>
			</view>

		</view>
		<view class="btnBox">
			<view class="btn" @click="goumai">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	// import navBar from '@/components/navBar/index.vue'

	import {
		payConfig,
		getUserInfo,

		submitOrder
	} from '@/api/index/index.js'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				picBase: this.$picBase2,
				curIndex: 0,
				list: [],
				userInfo: null,
				seledId: -1,


				from: ''
			}
		},
		onLoad(o) {
			if (o.from) {
				this.from = o.from
			}
			this.payConfig()
			this.getUserInfo()
		},
		methods: {
			async getUserInfo() {
				let res1 = await getUserInfo()
				console.log('用户信息返回值--------2', res1);
				if (res1.code == 0) {
					uni.setStorageSync('userInfo', res1.data)
					this.userInfo = res1.data
				} else {
					this.$toast(res1.message)
				}
			},
			async payConfig() {
				let res1 = await payConfig()
				console.log('套餐配置返回值--------2', res1);

				if (res1.code == 0) {
					this.list = res1.data

					this.seledId = res1.data[0].id
				} else {
					this.$toast(res1.message)
				}
			},


			selTaocan(i, id) {
				this.curIndex = i
				this.seledId = id
			},
			toRecord() {
				uni.navigateTo({
					url: '/pages/my/myRecord/index?tabIndex=0'
				})
			},
			async goumai() {
				let res = wx.getSystemInfoSync();
				if (res.platform == 'ios') {
					return wx.showModal({
						title: '提示',
						content: '【由于相关规范，iOS功能暂不可用】',
						success(res) {
							if (res.confirm) {
								console.log('用户点击确定')
							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					})
				}


				// this.$toast('购买成功')
				// setTimeout(() => {
				// 	uni.navigateTo({
				// 		url: '/pages/my/myRecord/index?tabIndex=0'
				// 	})
				// }, 1500)
				// return console.log('套餐下单参数', {
				// 	id: this.seledId
				// });
				let res1 = await submitOrder({
					id: this.seledId
				})
				console.log('套餐下单返回值--------2', res1);
				if (res1.code == 0) {
					console.log('微信支付参数：', res1.data.config);


					// this.$toast('购买成功', 'success')
					// setTimeout(() => {
					// 	uni.navigateTo({
					// 		url: '/pages/my/myRecord/index?tabIndex=0'
					// 	})
					// }, 1500)
					this.pay(res1.data.config)
				} else {
					this.$toast(res1.message)
				}

			},

			pay(p) {

				let _this = this
				console.log('pay---p', p);
				wx.requestPayment({
					"timeStamp": p.timeStamp,
					"nonceStr": p.nonceStr,
					"package": p.package,
					"signType": p.signType,
					"paySign": p.paySign,
					"success": function(res) {
						wx.showToast({
							title: '支付成功',
							icon: 'success'
						})
						setTimeout(res => {
							if (_this.from == 'gen') {
								// wx.navigateTo({
								// 	url: '/pages/my/myRecord/index?tabIndex=0',
								// })
								uni.navigateBack()
							} else {
								wx.redirectTo({
									url: '/pages/my/myRecord/index?tabIndex=0',
								})
							}
						}, 1500)
					},
					"fail": function(res) {

						console.log('res', res);
						wx.showToast({
							title: '支付失败',
							icon: 'error'
						})
						// setTimeout(res => {
						// 	wx.navigateTo({
						// 		url: '/pages/order/order?status=0',
						// 	})
						// }, 2000)
					},
					"complete": function(res) {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>