2021-11-15

pages/money/conversionIntegral.vue

@@ -1,153 +1,294 @@
 <template>
-	<view class="conversionIntegral">
-		<view class="header">
-				<text>实时汇率</text><br>
-				<text>1USDT≈XXXX积分</text>
+	<view class="center">
+		<view class="rateBox">
+			<view class="rateTitle">实时汇率</view>
+			<view class="rate">{{ exchange }}</view>
 		</view>
-		<view class="title">
-			<view class="title-t">
-				兑换币种
+		<view class="rateConetnt" v-if="lodingType">
+			<view class="titleBox flex">
+				<view class="leftTip"></view>
+				<view class="title">兑换币种</view>
 			</view>
-		</view>
-		<view class="content">
-			<text>兑出币种</text>
-			<view class="it">
-				<view class="left">
-					<image src="../../static/icon/logo.png"></image>
-					USDT
-				</view>
-				<view class="center">
-					<image src="../../static/icon/sd1.png" mode=""></image>
-				</view>
-				<view class="right">
-					<input type="number" value="" placeholder="请输入需要兑换的数量" />
-				</view>
-			</view>
-			<view class="img">
-				<image src="../../static/img/change.png" mode=""></image>
-			</view>
-			<view class="it">
-				<view class="left">
-					<image src="../../static/icon/jf.png"></image>
-					积分
+			<view class="content">
+				<view class="moneyText">兑出币种</view>
+				<view class="Type flex">
+					<image class="moneylogo" :src="moneyType[index].LOGO" mode="scaleToFill"></image>
+					<view class="moneyName clamp" @click="show = true">{{moneyType[index].name}}</view>
+					<u-icon name="arrow-down-fill" color="#0F253A" size="10"></u-icon>
+					<u-input :height="45" class="input" v-model="pushMoney" type="number" :border="false"
+						placeholder="请输入需要兑换的数量" />
 				</view>
-				<view class="center2">
-					<image src="../../static/icon/sd2.png" mode=""></image>
+				<view class="contentImg">
+					<image class="img" src="../../static/img/change.png" mode="scaleToFill"></image>
 				</view>
-				<view class="right">
-					<text>0.00</text>
+				<view class="moneyText">兑入币种</view>
+				<view class="Type flex">
+					<image class="moneylogo" :src="add.LOGO" mode="scaleToFill"></image>
+					<view class="moneyName clamp">{{ add.name }}</view>
+					<view class="line"></view>
+					<view class="input">{{ moneyReta }}</view>
 				</view>
 			</view>
 		</view>
-		<view class="button">
-			确定兑换
-		</view>
+		<view class="lsButtom" @click="buy()">确认兑换</view>
+		<u-action-sheet :list="moneyType" v-model="show" @click="changeIndex"></u-action-sheet>
+		<view class="jg" style="height: 30rpx;"></view>
 	</view>
 </template>
-
 <script>
+	import {
+		recharge,
+		wallet,
+		moneyType,
+		shan
+	} from '@/api/finance.js';
+	import {
+		lalaprice
+	} from '@/api/wallet.js'
+	export default {
+		data() {
+			return {
+				index: 0, //当前选中的兑出币种
+				moneyType: [], //兑出币种类型
+				add: {
+					LOGO: '',
+					name: ''
+				}, //兑入币种
+				pushMoney: '', //要兑换的金额
+				lodingType: false, //判断是否已经载入币种分类分类数据
+				show: false,
+				buying: false,
+				chart_data: [], //折线图数据
+			};
+		},
+		computed: {
+			// 转换金额
+			moneyReta() {
+				// 保存当前选中的对象
+				const obj = this.moneyType[this.index];
+				return (this.pushMoney * +obj.usdt_price) / +this.add.usdt_price;
+			},
+			// 实时汇率
+			exchange() {
+				try {
+					const data = this.moneyType[this.index];
+					console.log(this.add)
+					return 1 + data.name + '≈' + (data.usdt_price / this.add.usdt_price).toFixed(4) + this.add.name;
+				} catch (e) {
+					console.log(e);
+					return '加载中...';
+				}
+			},
+		},
+		//页面加载即刻发生
+		onLoad() {
+			this.init();
+		},
+		mounted() {
+			// this.createChart()
+		},
+		methods: {
+			// 初始化页面
+			init() {
+				this.wallet();
+
+			},
+			// 弹出层选择事件
+			changeIndex(e) {
+				console.log(e);
+				this.index = e;
+			},
+			// 加载币种分类
+			wallet() {
+				let that = this;
+				console.log('请求兑换');
+				uni.showLoading({
+					title: '载入数据中...',
+					mask: true
+				});
+				wallet()
+					.then(e => {
+						uni.hideLoading();
+						that.lodingType = true;
+						const moneyType = Object.keys(e.data.back);
+						moneyType.forEach(es => {
+							const data = e.data.back[es];
+							data.text = data.name;
+							if (+data.do_exchange == 1) {
+								that.moneyType.push(data);
+							}
+							if (+data.exchange == 1) {
+								that.add = data;
+								console.log(e.data.back[es], '555');
+							}
+						});
+						console.log(that.moneyType,'111');
+						console.log(that.add, '兑入');
+					})
+					.catch(e => {
+						uni.hideLoading();
+						if (e.status != 410000) {
+							that.lodingType = true;
+							uni.showModal({
+								title: '错误',
+								content: '加载失败请刷新页面',
+								cancelText: '关闭',
+								confirmText: '刷新',
+								success: res => {
+									if (res.confirm) {
+										that.init();
+									}
+								}
+							});
+							console.log(e);
+						}
+					});
+			},
+			//确认兑换
+			buy() {
+				if (this.buying) {
+
+				} else {
+					this.buying = true
+					console.log(this.moneyType[this.index].name)
+					shan({
+						origin_money_type: this.moneyType[this.index].name,
+						money_type: this.add.name,
+						num: this.pushMoney,
+					}).then(({
+						data
+					}) => {
+						console.log(data)
+						this.buying = false
+						this.$api.msg("闪兑成功")
+					}).catch(e => {
+						this.buying = false
+						console.log(e)
+					})
+				}
+			},
+		}
+	};
 </script>
+<style lang="scss">
+	.center {
+		min-height: 100%;
+	}
 
-<style lang="scss" scoped>
-	.conversionIntegral {
-		.header {
-			background-color: #fff;
-			padding: 30rpx;
-			text:nth-child(1) {
-				color: #0F253A;
-				font-size: 28rpx;
-			}
-			text:nth-child(3) {
-				color: #6D7C88;
-				font-size: 25rpx;
-			}
+	.lsButtom {
+		font-size: 30rpx;
+		background: linear-gradient(90deg, #438BED 0%,  #44BFEC 100%);
+		text-align: center;
+		color: $font-color-white;
+		padding: 30rpx 0;
+		border-radius: 99rpx;
+		margin: 50rpx 30rpx 0rpx 30rpx;
+		line-height: 1;
+	}
+
+	.rateBox {
+		padding: $page-row-spacing;
+		background-color: #ffffff;
+
+		.rateTitle {
+			font-size: 26rpx;
+			font-weight: 500;
+			color: $font-color-dark;
+		}
+
+		.rate {
+			margin-top: 10rpx;
+			font-size: 26rpx;
+			font-weight: 500;
+			color: $font-color-light;
 		}
-		.title {
-			background-color: #fff;
-			padding: 30rpx;
-			margin-bottom: 1rpx;
-			.title-t {
-				font-weight: Medium;
-				padding: 0 15rpx;
-				color: #333333;
-				border-left: solid 2rpx #75EFFA;
+	}
+
+	.rateConetnt {
+		margin-top: 10rpx;
+		background-color: #ffffff;
+		line-height: 1;
+		padding-bottom: 60rpx;
+
+		.titleBox {
+			align-items: stretch;
+			justify-content: flex-start;
+			padding: $page-row-spacing;
+			border-bottom: 1px solid $border-color-light;
+
+			.leftTip {
+				width: 7rpx;
+				border-radius: 99rpx;
+				background-color: $base-color;
+			}
+
+			.title {
+				margin-left: 20rpx;
+				font-size: 30rpx;
+				font-weight: 500;
+				color: $font-color-dark;
 			}
 		}
+
 		.content {
-			background-color: #fff;
-			padding: 30rpx;
-			text {
-				font-size: 25rpx;
+			.moneyText {
+				font-size: 24rpx;
+				font-weight: 500;
+				color: $font-color-dark;
+				padding: $page-row-spacing;
 			}
-			.img {
-				text-align: center;
-				image {
-					width: 80rpx;
-					height: 80rpx;
+
+			.Type {
+				padding: 0 $page-row-spacing;
+
+				.moneylogo {
+					width: 50rpx;
+					height: 50rpx;
+					border-radius: 99rpx;
 				}
-			}
-			.it {
-				position: relative;
-				padding: 80rpx 20rpx;
-				display: flex;
-				justify-content: space-between;
-				.left {
-					font-family: PingFang-SC-Medium;
-					font-weight: 500;
-					color: #0F253A;
+
+				.moneyName {
+					width: 180rpx;
 					font-size: 30rpx;
-					image {
-						margin-right: 20rpx;
-						margin-bottom: -13rpx;
-						width: 60rpx;
-						height: 60rpx;
-					}
+					font-weight: 500;
+					color: $font-color-dark;
+					margin: 0 20rpx;
 				}
-				.center {
-					position: absolute;
-					right: 400rpx;
-					// font-weight: bold;
-					padding-top: 10rpx;
-					image {
-						width: 20rpx;
-						height: 15rpx;
-					}
+
+				.input {
+					flex-grow: 1;
+					height: 45rpx;
+					line-height: 45rpx;
+					margin-left: 40rpx;
+					color: $font-color-light;
+					border-bottom: 1px solid $border-color-light;
 				}
-				.center2 {
-					padding-top: 10rpx;
-					position: absolute;
-					right: 390rpx;
-					image {
-						width: 35rpx;
-						height: 42rpx;
-					}
+
+				.line {
+					width: 2rpx;
+					background-color: $font-color-dark;
+					margin: 0 10rpx;
+					height: 30rpx;
 				}
-				.right {
-					padding: 10rpx 0;
-					width: 340rpx;
-					border-bottom: solid 1rpx #ECECEC;
-					color: #6D7C88;
-						font-size: 28rpx;
-					input {
-						font-size: 28rpx;
-					}
-					text {
-					}
+			}
+
+			.contentImg {
+				width: 70rpx;
+				height: 70rpx;
+				margin: 40rpx auto 0;
+
+				.img {
+					width: 100%;
+					height: 100%;
 				}
 			}
 		}
-		
-		.button {
-			text-align: center;
-			margin: 0 auto;
-			width: 90%;
-			background: linear-gradient(90deg, #438BED 0%,  #44BFEC 100%);
-			height: 70rpx;
-			line-height: 70rpx;
-			border-radius: 50rpx;
-			color: #fff;
-			font-size: 32rpx;
-			margin-top: 80rpx ;
-		}
+	}
+
+	.line-chart {
+		height: 500rpx;
+		width: 730rpx;
+		margin: auto;
+		background-color: #eee;
 	}
 </style>

pages/product/product.vue

@@ -129,10 +129,10 @@
 				<text class="iconfont iconcart"></text>
 				<text>购物车</text>
 			</navigator> -->
-			<!-- <view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
+			<view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
 				<text class="iconfont " :class="{ iconlike: !goodsObjact.userCollect, iconlikefill: goodsObjact.userCollect }"></text>
 				<text>收藏</text>
-			</view> -->
+			</view>
 
 			<view class="action-btn-group">
 				<button type="primary" class=" action-btn no-border buy-now-btn" @click="toggleSpec(2)">加入购物车</button>