h5-uniapp/pages/my/aboutUs/API.vue

<template>
	<view>
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh" :style="'background-color: '+theme.bg+';color: '+theme.text">
			<!-- 下拉刷新 -->
			<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher>

			<myNav slot="top" :title="i18n.newWord.mytitle6"></myNav>
			<!-- 身体 -->
			<view class="width-750">
				<!-- 富文本 -->
				<view class="padding-c-40 padding-w-30 font-24" v-html="api_text"></view>
				<!-- 列表 -->
				<view class="flex direction-column align-center">
					<!-- 单一列表 -->
					<view @click="openshow(item)" v-for="(item,index) in list" class="apilistbox"
					 :style="'background-color: '+theme.fu_bg+';color: '+theme.fu_text">
						<view class="height-80 flex align-center justify-between">
							<view class="flex align-center">
								<text class="font-30 bold-font">{{item.notice}}</text>
								<view v-for="(itm,idx) in item.auth"
									:class="itm==1?'label1':itm==2?'label2':itm==3?'label3':''">
									<text v-if="itm==1">{{i18n.api.text1}}</text>
									<text v-if="itm==2">{{i18n.api.text2}}</text>
									<text v-if="itm==3">{{i18n.api.text3}}</text>
								</view>
								<!-- <view class="label2">提现</view> -->
								<!-- <view class="label3">交易</view> -->
							</view>
							<u-icon name="more-dot-fill" color="#979EA8" size="32"></u-icon>
						</view>
						<view class="height-120 flex">
							<view class="flex-4 height-120 padding-c-10">
								<view class="height-40 line-height-40">
									<text class="font-26 color-8B99A2">{{i18n.api.text4}}</text>
								</view>
								<view class="height-60 line-height-60">
									<text class="font-28">{{item.addtime}}</text>
								</view>
							</view>
							<view class="flex-4 height-120 padding-c-10">
								<view class="height-40 line-height-40">
									<text class="font-26 color-8B99A2">API Key</text>
								</view>
								<view class="height-60 line-height-60">
									<text class="font-28">{{item.api_key}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 空盒子 -->
				<view class="height-200"></view>
			</view>
			<!-- 底部 -->
			<view class="dibubox" :style="'background-color: '+theme.fu_bg">
				<button @click="router.push('/pages/my/aboutUs/applyAPI')" class="cu-btn loginBtn">{{i18n.api.text5}}</button>
			</view>

			<!-- 操作弹窗 -->
			<u-popup mode="bottom" v-model="show">
				<view class="padding-30" :style="'background-color: '+theme.bg">
					<view @click="show=false,router.push('/pages/my/aboutUs/lookAPI?id='+id)"
						class="height-100 line-height-100 text-center">
						<text class="font-30 bold-font">{{i18n.api.text6}}</text>
					</view>
					<view @click="getDeledt" class="height-100 line-height-100 text-center">
						<text class="font-30 color-FF4040 bold-font">{{i18n.api.text7}}</text>
					</view>
					<view @click="id='',show=false" class="height-100 line-height-100 text-center">
						<text class="font-30 bold-font">{{i18n.api.text8}}</text>
					</view>
				</view>
			</u-popup>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				api_text: '',
				show: false,
				list: [],
				id: '',
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.getInfo()
			this.getList()
		},
		methods: {
			onRefresh() {
				this.list = []
				this.getList()
				// 以告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					//1.5秒之后停止刷新动画
					this.$refs.paging.complete();
				}, 1000)
			},
			openshow(item) {
				this.id = item.id
				this.show = true
			},
			getDeledt() {
				var that = this
				uni.showModal({
					title: this.i18n.mine.tishi,
					content: this.i18n.api.text9,
					cancelText: this.i18n.mine.cancelText,
					confirmText: this.i18n.mine.confirmText,
					success(res) {
						if (res.confirm) {
							that.show = false
							uni.showLoading()
							that.post('/my/api_delete', {
								id: that.id
							}).then((res) => {
								uni.hideLoading()
								if (res.code == 1) {
									that.getList()
									that.id = ''
								}
							})
						}
					}
				})
			},
			getList() {
				this.post('/my/api_list').then(res => {
					if (res.code == 1) {
						console.log(res)
						this.list = res.data
					}
				})
			},
			getInfo() {
				this.post('/publics/new_common_data').then(res => {
					console.log('文案说明', res)
					if (res.code == 1) {
						this.api_text = res.data.api_text
					}
				})
			}
		}
	}
</script>

<style>
	.dibubox {
		width: 750rpx;
		height: 160rpx;
		/* background: rgba(255, 255, 255, 0.39); */
		box-shadow: 6rpx 0rpx 10rpx rgba(177, 177, 177, 0.28);
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		background: #0165EE !important;
		border-radius: 12rpx;
		color: #FFF;
		font-size: 32rpx;
	}

	.apilistbox {
		width: 690rpx;
		height: 200rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		/* background: rgba(255, 255, 255, 1); */
		box-shadow: 6rpx 0rpx 10rpx rgba(177, 177, 177, 0.3);
	}

	.label1 {
		height: 32rpx;
		line-height: 32rpx;
		padding: 0 4rpx;
		border-radius: 4rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		color: rgb(79, 119, 192);
		background-color: rgba(79, 119, 192, 0.3);
	}

	.label2 {
		height: 32rpx;
		line-height: 32rpx;
		padding: 0 4rpx;
		border-radius: 4rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		color: rgb(39, 151, 114);
		background-color: rgba(39, 151, 114, 0.3);
	}

	.label3 {
		height: 32rpx;
		line-height: 32rpx;
		padding: 0 4rpx;
		border-radius: 4rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		color: rgb(205, 120, 55);
		background-color: rgba(205, 120, 55, 0.3);
	}
</style>