MeetMateApp/pages/w3/tran.vue

<template>
	<view class="page">
		<uni-nav-bar rightWidth='136rpx' title="传送" fixed  :border="false" statusBar backgroundColor="#24234B" color="#FFFFFF">
			<template #left>
				<view class="cl-topbar__icon" @click="navigateBack">
					<text class="cl-icon-arrow-left"></text>
				</view>
			</template>
			<template #right>
				<view style="
				width: 136rpx;
				height: 52rpx;
				background: linear-gradient( 130deg, #322D52 20%, #6E47A2 100%);
				border-radius: 12rpx;
				text-align: center;
				line-height:52rpx; 
				color: #FFFFFF;
				font-weight: bold;
				font-size: 24rpx;
				" @click="navToTran">
					记录
				</view>
			</template>
		</uni-nav-bar>
		<view class="bodyMain">
			<view class="bg">
				<view style="margin-top: 140rpx;" class="item">
					<image class="iconId" mode="widthFix" src="http://c.yujianmate.com/images/v1/w3/tran/tran_num.png"></image>
					<text style="margin-left: 10rpx;font-weight: bold;font-size: 32rpx; color: #ffffff;">传送数量</text>
				</view>
				<view class="num1">
					<view class="num">
						<input type="number" v-model="num" placeholder="请输入传送数量" maxlength="16" />
					</view>
					<view class="all" @click="num = myinfo.num_gmb">
						全部
					</view>
				</view>
				<view class="line"></view>
				<view class="num2">
					<view class="num">
						可传送数量
					</view>
					<view class="all">
						{{myinfo.num_gmb}}
					</view>
				</view>
				<view class="item">
					<image class="iconId" mode="widthFix" src="http://c.yujianmate.com/images/v1/w3/tran/tran_id.png"></image>
					<text style="margin-left: 10rpx;font-weight: bold;font-size: 32rpx; color: #ffffff;">传送ID</text>
				</view>
				<view class="num1">
					<view class="num">
						<input type="number" v-model="mobile" placeholder="请输入传送手机号" maxlength="11" />
					</view>
					<view class="all">
					</view>
				</view>
				<view class="line"></view>
				<view class="num2">
					<view class="num">
						传送消耗
					</view>
					<view class="all">
						{{myinfo.fee}}
					</view>
				</view>
				<view class="item" @click="tranSubmit">
					<view class="btn">
						<text style="margin-top: 28rpx;font-weight: bold;font-size: 28rpx; color: #ffffff;">确认传送</text>
					</view>
				</view>

			</view>
			<view class="bg2">
				<view class="item">
					<!-- <image class="iconId" mode="widthFix" src="http://c.yujianmate.com/images/v1/w3/tran/tran_rule.png"></image> -->
					<text style="font-weight: bold;font-size: 32rpx; color: #ffffff;">传送规则</text>
				</view>
				<view class="itemRule">
					<view style="height: 74rpx;margin-top: 25rpx;" class="ruleItem">
						<view style="margin-top: 5rpx;" class="info">
							<view class="left">
								<text style="font-size: 24rpx; color: #999999;">战队人数</text>
							</view>
							<view class="right">
								<text style="font-size: 24rpx;color: #999999;">传送消耗</text>
							</view>
						</view>
						<view style="margin-top: 25rpx;" class="line"></view>
					</view>
					<view class="ruleItem" v-for="(info,index) in ruleInfo">
						<view class="info">
							<view class="left">
								<text style="font-size: 22rpx;color: white;">{{ info.reason }}</text>
							</view>
							<view style="color: white;" class="right">
								<text style="font-size: 22rpx;color: white;">{{ info.per }}</text>
							</view>
						</view>
						<view class="line"></view>
					</view>
					<text style="margin-top: 10rpx;font-size:22rpx;color: #999999;">注：按照用户战队人数来判定传送燃料消耗</text>
				</view>
			</view>
		</view>

		<ToastW3 ref="ToastW3"></ToastW3>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {uniNavBar},
		data() {
			return {
				myinfo: {},
				num: '',
				mobile: '',
				ruleInfo: [{
						reason: "0人",
						per: "40%",
					},
					{
						reason: "3人",
						per: "38%",
					},
					{
						reason: "5人",
						per: "35%",
					},
					{
						reason: "10人",
						per: "30%",
					},
					{
						reason: "15人",
						per: "25%",
					},
					{
						reason: "银河探索卡",
						per: "20%",
					},
					{
						reason: "星界探索卡",
						per: "18%",
					}
				]
			}
		},
		onLoad() {
			let self = this;
			this.loadData();
		},
		onShow() {
			// uni.hideTabBar({
			// 	animation:false
			// })
			// this.loadData(1);
			// this.showBottomPlayer();
		},
		methods: {
			navigateBack(){
				uni.navigateBack(1)
			},
			navToTran: function() {
				uni.navigateTo({
					url: "/pages/w3/tranRecord?stype=tran"
				});
			},
			cancel() {
				this.title = '录音取消，停止录音';
				console.log('cancel', new Date().getTime());
			},
			loadData() {
				console.log({
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey
				});
				uni.request({
					url: this.$apiHost + '/Web/getinfo',
					data: {
						uuid: getApp().globalData.uuid
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						this.myinfo = res.data;
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},
			tranSubmit() {
				var that = this;
				if (this.num < 1) {
					that.$refs['ToastW3'].showToast({
						title: "请填写数量",
						animation: 0
					});
					return;
				}
				if (this.mobile.length < 11) {
					that.$refs['ToastW3'].showToast({
						title: "请填写对方手机号",
						animation: 0
					});
					return;
				}
				uni.showLoading({})
				uni.request({
					url: this.$apiHost + '/Trade/tran',
					data: {
						uuid: getApp().globalData.uuid,
						num: this.num,
						mobile: this.mobile
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						that.$refs['ToastW3'].showToast({
							title: res.data.str,
							animation: 0
						});
						if (res.data.success == "yes") {
							this.num = 0;
							this.loadData();
						}
					},
					complete: (com) => {
						uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},
		}
	}
</script>

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