55

components/uni-badge/uni-badge.vue

@@ -0,0 +1,101 @@
+<template>
+  <text v-if="text" :class="inverted ? 'uni-badge-' + type + ' uni-badge--' + size + ' uni-badge-inverted' : 'uni-badge-' + type + ' uni-badge--' + size"
+    class="uni-badge" @click="onClick()">{{ text }}</text>
+</template>
+
+<script>
+  export default {
+    name: 'UniBadge',
+    props: {
+      type: {
+        type: String,
+        default: 'default'
+      },
+      inverted: {
+        type: Boolean,
+        default: false
+      },
+      text: {
+        type: String,
+        default: ''
+      },
+      size: { // small.normal
+        type: String,
+        default: 'normal'
+      }
+    },
+    methods: {
+      onClick() {
+        this.$emit('click')
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  $bage-size:12px;
+  $bage-small:scale(0.8);
+
+  .uni-badge {
+    font-family: 'Helvetica Neue', Helvetica, sans-serif;
+    box-sizing: border-box;
+    font-size: $bage-size;
+    line-height: 1;
+    display: inline-block;
+    padding: 3px 6px;
+    color: $uni-text-color;
+    border-radius: 100px;
+    background-color: $uni-bg-color-hover;
+
+    &.uni-badge-inverted {
+      padding: 0 5px 0 0;
+      color: $uni-text-color-grey;
+      background-color: transparent;
+    }
+
+    &-primary {
+      color: $uni-text-color-inverse;
+      background-color: $uni-color-primary;
+
+      &.uni-badge-inverted {
+        color: $uni-color-primary;
+        background-color: transparent
+      }
+    }
+
+    &-success {
+      color: $uni-text-color-inverse;
+      background-color: $uni-color-success;
+
+      &.uni-badge-inverted {
+        color: $uni-color-success;
+        background-color: transparent
+      }
+    }
+
+    &-warning {
+      color: $uni-text-color-inverse;
+      background-color: $uni-color-warning;
+
+      &.uni-badge-inverted {
+        color: $uni-color-warning;
+        background-color: transparent
+      }
+    }
+
+    &-error {
+      color: $uni-text-color-inverse;
+      background-color: $uni-color-error;
+
+      &.uni-badge-inverted {
+        color: $uni-color-error;
+        background-color: transparent
+      }
+    }
+
+    &--small {
+      transform: $bage-small;
+      transform-origin: center center;
+    }
+  }
+</style>

components/uni-list-item/uni-list-item.vue

@@ -0,0 +1,244 @@
+<template>
+  <view
+    :class="disabled ? 'uni-list-item--disabled' : ''"
+    :hover-class="disabled || showSwitch ? '' : 'uni-list-item--hover'"
+    class="uni-list-item"
+    @click="onClick">
+    <view class="uni-list-item__container">
+      <view
+        v-if="thumb"
+        class="uni-list-item__icon"><image
+          :src="thumb"
+          class="uni-list-item__icon-img" /></view>
+      <view
+        v-else-if="showExtraIcon"
+        class="uni-list-item__icon">
+        <uni-icons
+          :color="extraIcon.color"
+          :size="extraIcon.size"
+          :type="extraIcon.type"
+          class="uni-icon-wrapper" />
+      </view>
+      <view class="uni-list-item__content">
+        <view class="uni-list-item__content-title">{{ title }}</view>
+        <view
+          v-if="note"
+          class="uni-list-item__content-note">{{ note }}</view>
+      </view>
+      <view
+        v-if="showBadge || showArrow || showSwitch"
+        class="uni-list-item__extra">
+        <uni-badge
+          v-if="showBadge"
+          :type="badgeType"
+          :text="badgeText" />
+        <switch
+          v-if="showSwitch"
+          :disabled="disabled"
+          :checked="switchChecked"
+          @change="onSwitchChange" />
+        <uni-icons
+          v-if="showArrow"
+          :size="20"
+          class="uni-icon-wrapper"
+          color="#bbb"
+          type="arrowright" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import uniIcons from '../uni-icons/uni-icons.vue'
+import uniBadge from '../uni-badge/uni-badge.vue'
+export default {
+  name: 'UniListItem',
+  components: {
+    uniIcons,
+    uniBadge
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }, // 列表标题
+    note: {
+      type: String,
+      default: ''
+    }, // 列表描述
+    disabled: {
+      // 是否禁用
+      type: [Boolean, String],
+      default: false
+    },
+    showArrow: {
+      // 是否显示箭头
+      type: [Boolean, String],
+      default: true
+    },
+    showBadge: {
+      // 是否显示数字角标
+      type: [Boolean, String],
+      default: false
+    },
+    showSwitch: {
+      // 是否显示Switch
+      type: [Boolean, String],
+      default: false
+    },
+    switchChecked: {
+      // Switch是否被选中
+      type: [Boolean, String],
+      default: false
+    },
+    badgeText: {
+      // badge内容
+      type: String,
+      default: ''
+    },
+    badgeType: {
+      // badge类型
+      type: String,
+      default: 'success'
+    },
+    thumb: {
+      // 缩略图
+      type: String,
+      default: ''
+    },
+    showExtraIcon: {
+      // 是否显示扩展图标
+      type: [Boolean, String],
+      default: false
+    },
+    extraIcon: {
+      type: Object,
+      default () {
+        return {
+          type: 'contact',
+          color: '#000000',
+          size: 20
+        }
+      }
+    }
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    onClick () {
+      this.$emit('click')
+    },
+    onSwitchChange (e) {
+      this.$emit('switchChange', e.detail)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@mixin list-hover {
+	background-color: $uni-bg-color-hover;
+}
+
+@mixin list-disabled {
+	opacity: 0.3;
+}
+
+$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
+
+.uni-list-item {
+	font-size: $uni-font-size-lg;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
+	// height:130rpx ;
+
+	&--disabled {
+		@include list-disabled;
+	}
+
+	// &--hover {
+	// 	@include list-hover;
+	// }
+
+	&__container {
+		padding: $list-item-pd;
+		width: 100%;
+		box-sizing: border-box;
+		flex: 1;
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+
+		&:after {
+			position: absolute;
+			z-index: 3;
+			right: 0;
+			bottom: 0;
+			left: 30rpx;
+			height: 1px;
+			content: '';
+			-webkit-transform: scaleY(0.5);
+			transform: scaleY(0.5);
+			background-color: #464755;
+		}
+	}
+
+	&__content {
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		color: #FFFFFF;
+		&-title {
+			font-size:30rpx;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			color: inherit;
+			line-height: 1.5;
+			overflow: hidden;
+		}
+
+		&-note {
+			margin-top: 6rpx;
+			color: #85858E;
+			font-size: 22rpx;
+			white-space: normal;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 2;
+			overflow: hidden;
+		}
+	}
+
+	&__extra {
+		width: 25%;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	&__icon {
+		margin-right: 40rpx;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+
+		&-img {
+			height: 35rpx;
+			width: 35rpx;
+		}
+	}
+}
+
+.uni-list > .uni-list-item:last-child .uni-list-item-container:after {
+	height: 0px;
+}
+</style>

components/uni-list/uni-list.vue

@@ -0,0 +1,45 @@
+<template>
+  <view class="uni-list">
+    <slot/>
+  </view>
+</template>
+<script>
+export default {
+  name: 'UniList'
+}
+</script>
+<style lang="scss">
+	.uni-list {
+		background-color: $uni-bg-color;
+		position: relative;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+
+		&:after {
+			position: absolute;
+			z-index: 10;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			height: 1px;
+			content: '';
+			-webkit-transform: scaleY(0.5);
+			transform: scaleY(0.5);
+			background-color: #060818;
+		}
+
+		&:before {
+			position: absolute;
+			z-index: 10;
+			right: 0;
+			top: 0;
+			left: 0;
+			height: 1px;
+			content: '';
+			-webkit-transform: scaleY(0.5);
+			transform: scaleY(0.5);
+			background-color: #060818;
+		}
+	}
+</style>

pages/index/index.vue

@@ -21,7 +21,7 @@
 			<view class="tip"></view>
 		</view>
 		<view class="flex navList">
-			<view class="navTpl" @click="openurl('')">
+			<view class="navTpl" @click="openurl('/pages/index/recharge')">
 				<image src="/static/image/img06.png" style="width: 123rpx;" mode="widthFix"></image>
 				<view class="navName">充值</view>
 			</view>

pages/index/recharge.vue

@@ -0,0 +1,268 @@
+<template>
+	<view class="container">
+		<view class="recharge">
+			<view class="example-title flex_item">
+				<view class="titleTip"></view>
+				<view class="">充值地址</view>
+			</view>
+			<view class="infoBox">
+				<view class="tplName">链名称</view>
+				<view class="tplNum">USDT-TRC20</view>
+				<view class="tplAddr">收款地址<text>ca87ca68ca68c6a986c98a678c7a8</text></view>
+			</view>
+			<view class="code"><image :src="er_code"></image></view>
+			<view class="flex btnBox">
+				<view class="btn">保存相册</view>
+				<view class="btn">复制地址</view>
+			</view>
+		</view>
+		<view class="login_text">
+			<view class="login_input flex" style="padding-top: 45rpx;">
+				<view class="login_img">金额</view>
+				<view class="login_name"><input class="uni-input" type="text" v-model="money" placeholder="请输入充值金额" /></view>
+			</view>
+			<view class="login_input flex">
+				<view class="login_img"><text>打款凭证</text></view>
+				<view class="login_name" @click="scImg"><image :src="img"></image></view>
+			</view>
+			<view class="login_input flex" style="padding-top: 45rpx;">
+				<view class="login_img">备注</view>
+				<view class="login_name"><input class="uni-input" type="text" v-model="remark" placeholder="例如：备注用户账号" /></view>
+			</view>
+			<view class="submission"><button class="golden" type="golden" hover-class="none" @click="submission">确认提交</button></view>
+		</view>
+		<view class="login_text">
+			<view class="tip">
+				<view>
+					<text>
+						请勿向上述地址充值人任何非USDT资产，否则资产将不可追回，USDT冲币仅支持
+						<text style="color: #EEC680;">ERC20</text>
+						通道充值，其他USDT将无法上帐，请您谅解。 您充值至上述地址后，需要整个网络节点确认，1次网络确认后到账，2次网络确认后即可提币。
+						最小充值金额：100USDT,小于最小金额的充值将不会上帐且无法退回。充值时在备注栏填写 个人的用户ID,如果用户ID错误，将导致您无法入账，请注意确认。
+					</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script type="text/javascript">
+import uniList from '@/components/uni-list/uni-list.vue';
+import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
+// import { show_cb,do_cb } from '@/api/recharge.js';
+// import { upload } from '@/api/real.js';
+export default {
+	components: {
+		uniList,
+		uniListItem
+	},
+	data() {
+		return {
+			uid: '',
+			list:'',
+			account: '',
+			money: '',
+			address:'',
+			er_code:'',
+			remark:'',
+			img: '/static/image/img19.png'
+		};
+	},
+	onLoad() {
+		this.uid = uni.getStorageSync('uid');
+		this.loadData();
+	},
+	methods: {
+		//获取数据
+		loadData() {
+		  // show_cb({})
+		  //   .then(data => {
+		  //     this.list = data.data;
+			 //  this.address = data.data.address;
+			 //  this.er_code = data.data.er_code;
+		  //   })
+		  //   .catch(err => {
+		  //     console.log(err);
+		  //   });
+		},
+		//确认提交
+		submission() {
+			let obj = this;
+			uni.showLoading({
+				title: '充币中...',
+				mask: true
+			});
+			//确认充值调接口，成功跳转页面
+			do_cb({
+				uid: obj.uid,
+				img: obj.img,
+				address: obj.address,
+				money: obj.money,
+				bz: obj.remark,
+			})
+				.then(function(e) {
+					uni.showToast({
+						title: '请耐心等待系统审核通过',
+						duration: 1500,
+						mask: false,
+						icon: 'none'
+					});
+					uni.hideLoading();
+				})
+				.catch(function(e) {
+					console.log(e);
+				});
+		},
+		//上传图片
+		scImg() {
+			upload({
+				file:''
+			}).then((e) => {
+				console.log(e,55)
+				this.img = e[0].url;
+			});
+		},
+	}
+};
+</script>
+
+<style lang="scss">
+/* page {
+	min-height: 100%;
+	background: linear-gradient(-28deg, rgba(44, 45, 53, 1), rgba(59, 62, 74, 1));
+} */
+.body_content {
+	width: 100%;
+	height: 100%;
+}
+.login_text {
+	width: 100%;
+	color: #fff !important;
+	font-size: 28rpx !important;
+	background-color: #1F2A4A;
+	margin: 25rpx 0rpx;
+	padding: 0rpx 25rpx;
+	padding-bottom: 15rpx;
+}
+.recharge {
+	text-align: center;
+	color: #85858e;
+	font-size: 30rpx;
+	background-color: #1F2A4A;
+}
+.example-title{
+	text-align: left !important;
+	padding: 25rpx 25rpx;
+	border-bottom: 2rpx solid #2F364E;
+	color: #0C5AFA;
+	.titleTip{
+		width: 5rpx;
+		height: 30rpx;
+		background: linear-gradient(90deg, #0C5AFA, #1356FF);
+		border-radius: 3rpx;
+		margin-right: 15rpx;
+	}
+}
+.infoBox{
+	text-align: left;
+	padding: 28rpx 51rpx;
+	.tplName{
+		font-family: PingFang SC;
+		font-weight: bold;
+		font-size: 32rpx;
+		color: #FFFFFF;
+		line-height: 24rpx;
+	}
+	.tplNum{
+		margin: 30rpx 0rpx;
+		padding: 15rpx 30rpx;
+		border-radius: 10rpx;
+		border: 1px solid #1356FF;
+		font-family: PingFang SC;
+		font-size: 26rpx;
+		color: #1356FF;
+		display: inline-block;
+	}
+	.tplAddr{
+		color: #fff;
+		font-size: 32rpx;
+		text{
+			padding-left: 15rpx;
+			font-size: 26rpx;
+			color: #FFFFFF;
+		}
+	}
+}
+.login_input {
+	border-bottom: 1px solid #464755;
+	padding: 35rpx;
+}
+.uni-input {
+	width: 100%;
+	text-align: left !important;
+}
+.code {
+	width: 277rpx;
+	height: 277rpx;
+	margin: 25rpx auto;
+	margin-bottom: 35rpx;
+	background: #0C5AFA;
+}
+.code image {
+	width: 100%;
+	height: 100%;
+}
+.btnBox{
+	justify-content: center;
+	padding-bottom: 50rpx;
+	padding-top: 30rpx;
+	.btn{
+		margin-right: 50rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		font-size: 26rpx;
+		color: #0C5AFA;
+		border: 1rpx solid #0C5AFA;
+		padding: 15rpx 45rpx;
+		border-radius: 15rpx;
+	}
+}
+.submission {
+	padding: 0rpx 25rpx;
+}
+.login_name {
+	width: 480rpx;
+	color: #ffffff;
+}
+.login_name image {
+	width: 100rpx;
+	height: 100rpx;
+}
+.tip {
+	padding: 29rpx 31rpx;
+	line-height: 55rpx;
+	font-size: 24rpx;
+}
+.select_img {
+	width: 28rpx;
+	height: 32rpx;
+}
+.select_img image {
+	width: 100%;
+	height: 100%;
+}
+.scann {
+	margin-bottom: 35rpx;
+	margin-top: 15rpx;
+}
+.scanning {
+	background-color: #6f6f78;
+	color: #ffffff;
+	padding: 10rpx 30rpx;
+	border-radius: 15rpx;
+	font-size: 28rpx;
+}
+.address_code {
+	padding: 25rpx 0rpx;
+	color: #ffffff;
+}
+</style>