上传Mcoin界面

pages.json

@@ -7,7 +7,8 @@
 				"navigationStyle": "custom",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/my",
 			"style": {
 				"navigationBarTitleText": "我的",
@@ -21,6 +22,28 @@
 					"bounce": "none"
 				}
 			}
+		},
+		{
+			"path": "pages/article/article",
+			"style": {
+				"navigationBarTitleText": "动态",
+				"navigationBarBackgroundColor": "#FFC800",
+				"navigationStyle": "custom",
+				"h5": {
+					"titleNView": false,
+					"bounce": "none"
+				},
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
+		{
+			"path": "pages/my/M_coin",
+			"style": {
+				"navigationBarTitleText": "我的M币",
+				"navigationBarBackgroundColor": "#FFC800"
+			}
 		}
 
 	],
@@ -44,7 +67,7 @@
 				"text": "遇见"
 			},
 			{
-				"pagePath": "pages/index/index",
+				"pagePath": "pages/article/article",
 				"iconPath": "static/tab/tab_article_sel.png",
 				"selectedIconPath": "static/tab/tab_article_sel.png",
 				"text": "动态"

pages/article/article.scss

@@ -0,0 +1,146 @@
+
+page {
+	background-color: #161616;
+}
+.page {
+	background-color: #161616;
+}
+.topbg {
+}
+.topBody {
+	width:750rpx;
+}
+.header {
+	display: flex;flex-direction: row;justify-content: space-between;align-items: center;color:$title;
+	width:750rpx;height:calc(var(--status-bar-height) + 100rpx);z-index: 999;
+	padding-top: calc(var(--status-bar-height) + 220rpx);
+	width:750rpx;height:460rpx;
+	background: url("../../static/home/my_top_bg.png");background-size: 100% 100%;background-repeat: no-repeat;z-index: 0;
+	
+	.title {
+		font-size: 34rpx;
+	}
+	.left {
+		padding-left: 50rpx;width:200rpx;
+		image {
+			width:136rpx;border-radius: 100rpx;border:solid 4rpx #fff;
+		}
+	}
+	.right {
+		color:#fff;width:400rpx;font-size: 40rpx;
+		.nickname {
+			font-weight: bold;margin-bottom: 10rpx;
+			display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+			image {
+				width:76rpx;margin-left: 8rpx;margin-right: 10rpx;
+			}
+			.siming {
+				display: flex;flex-direction: row;justify-content: center;align-items: center;
+				width: 84rpx;height: 32rpx;
+				border-radius: 12rpx 12rpx 12rpx 12rpx;
+				border: 2rpx solid #FFFFFF;
+				font-size: 20rpx;color:#fff;font-weight: normal;
+			}
+		}
+		.join_date {
+			display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+			font-size: 28rpx;color:#fff;
+			image {
+				width:36rpx;margin-left: 6rpx;
+			}
+		}
+	}
+	.dashang {
+		width:150rpx;
+		.sel {
+			display: flex;flex-direction: row;justify-content: center;align-items: center;
+			width: 130rpx;
+			height: 64rpx;
+			background: linear-gradient( 137deg, #FF5869 0%, #FF3C83 100%);
+			border-radius: 16rpx 16rpx 16rpx 16rpx;
+			border: 2rpx solid #FFFFFF;
+			.name {
+				color:#fff;font-size: 20rpx;margin-right: 12rpx;
+			}
+			.block {
+				width: 48rpx;
+				height: 48rpx;
+				background: #FFFFFF;
+				border-radius: 8rpx 8rpx 8rpx 8rpx;
+			}
+		}
+		.selno {
+			display: flex;flex-direction: row;justify-content: center;align-items: center;
+			width: 130rpx;
+			height: 64rpx;
+			background-color: rgba(255, 255, 255, 0.35);
+			border-radius: 16rpx 16rpx 16rpx 16rpx;
+			border: 2rpx solid #FFFFFF;
+			.name {
+				color:#fff;font-size: 20rpx;
+			}
+			.blockGray {
+				width: 48rpx;margin-right: 12rpx;
+				height: 48rpx;background-color: #fff;
+				border-radius: 8rpx 8rpx 8rpx 8rpx;
+			}
+		}
+		
+	}
+}
+.thread {
+	height:210rpx;
+	padding:50rpx;font-size: 52rpx;color:#6E6A6A;padding-top: 80rpx;
+}
+.myinfo {
+	width: 690rpx;display:flex;flex-direction: column;margin:30rpx 30rpx 60rpx;justify-content: flex-start;
+	
+	
+	.numlist {
+		display: flex;flex-direction: row;justify-content: center;align-items: center;
+		background: #28292D;
+		border-radius: 24rpx 24rpx 24rpx 24rpx;
+		.item {
+			display: flex;justify-content: center;padding:20rpx;
+			border-radius: 38rpx;width:316rpx;height:186rpx;
+			.icon {
+			}
+			image {
+				width:64rpx;
+			}
+			.num {
+				color:#fff;font-size: 36rpx;
+				text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
+				.name {
+					font-size: 28rpx;color:#BABABA;margin-top: 12rpx;
+				}
+			}
+		}
+	}
+	
+	.numlist2 {
+		display: flex;flex-direction: row;justify-content: center;align-items: center;
+		flex-wrap: wrap;
+		background: #28292D;
+		border-radius: 24rpx;
+		.item {
+			display: flex;justify-content: center;padding:20rpx;
+			border-radius: 38rpx;width:160rpx;height:186rpx;
+			.icon {
+			}
+			image {
+				width:54rpx;
+			}
+			.num {
+				color:#fff;
+				text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
+				.name {
+					font-size: 24rpx;color:#BABABA;margin-top: 12rpx;
+				}
+			}
+		}
+	}
+}
+.blankHeight {
+	height:100rpx;
+}

pages/article/article.vue

@@ -0,0 +1,188 @@
+<template>
+	<view class="page">
+		<view class="topBody">
+			<view class="header">
+				<view class="left">
+					<image class="img" mode="widthFix" src="../../static/home/avator.png"></image>
+				</view>
+				<view class="right">
+					<view class="nickname">
+						<text>{{myinfo.nickname}}</text>
+						<image src="../../static/me/icon_vip.png" mode="widthFix" />
+						<view class="siming">已实名</view>
+					</view>
+					<view class="join_date">
+						{{myinfo.join_name}}
+						<image src="../../static/me/arrow_right.png" mode="widthFix" />
+					</view>
+				</view>
+				<view class="dashang" @click="chkSel">
+					<view class="sel" v-if="sel == 1">
+						<view class="name">关闭<br />打赏</view>
+						<view class="block"></view>
+					</view>
+					<view class="selno" v-else>
+						<view class="blockGray"></view>
+						<view class="name">开启<br />打赏</view>
+					</view>
+				</view>
+			</view>
+			<view class="myinfo">
+				<view class="line"></view>
+				<view class="numlist">
+					<view class="item">
+						<view class="num">
+							<text style="color:#FF2A95;">{{myinfo.num_1}}</text>
+							<view class="name">我的糖果</view>
+						</view>
+					</view>
+					<view class="item">
+						<view class="num">
+							<text>{{myinfo.num_1}}</text>
+							<view class="name">我的M币</view>
+						</view>
+					</view>
+					<view class="item">
+						<view class="num">
+							<image src="../../static/me/web3.0.png" mode="widthFix" />
+							<view class="name">WEB3.0</view>
+						</view>
+					</view>
+
+				</view>
+				<view class="numlist2" style="margin-top: 60rpx;">
+					<view class="item" v-for="(item,index) in 20">
+						<view class="num">
+							<image class="icon" src="../../static/me/icon_list.png" mode="widthFix" />
+							<view class="name">基本资料</view>
+						</view>
+					</view>
+				</view>
+
+			</view>
+
+
+			<view class="blankHeight"></view>
+		</view>
+
+
+		<!-- 提示框 -->
+		<DialogBox ref="DialogBox"></DialogBox>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				title: '',
+				sel: 1,
+				myinfo: {
+					nickname: '王思思',
+					join_name: '注册日期：2024年5月',
+					num_1: 0,
+					num_2: 0,
+					num_3: 0,
+					num_4: 0,
+					is_login: 'no',
+					num_history: 0,
+					num_collection: 0
+				},
+			}
+		},
+		onLoad() {
+			setTimeout(function() {
+				uni.setNavigationBarColor({
+					frontColor: '#ffffff',
+					backgroundColor: '#00000000',
+					animation: {
+						duration: 400,
+						timingFunc: 'easeIn'
+					}
+				})
+			}, 200);
+		},
+		onShow() {
+			this.loadData();
+		},
+		methods: {
+			onBack() {},
+			chkSel() {
+				if (this.sel == 1) {
+					this.sel = 0;
+				} else {
+					this.sel = 1;
+				}
+			},
+			loadData() {
+				console.log("this.globalData", getApp().globalData);
+				let obj2 = {
+					is_first: 0
+				}
+				const postData = Object.assign({}, getApp().globalData.postHeader, obj2);
+
+				console.log(postData);
+
+				uni.request({
+					url: this.$apiHost + '/Gushi/getmyinfo', //仅为示例，并非真实接口地址。
+					data: postData,
+					method: 'POST',
+					header: {
+						'content-type': 'application/json', //自定义请求头信息
+						'Access-Control-Allow-Origin': '*'
+					},
+					success: (res) => {
+						console.log('data:', res.data);
+						this.myinfo = res.data;
+					}
+				});
+
+
+
+			},
+			EditNickname() {
+				let that = this;
+				this.$refs['DialogBox'].confirm({
+					title: '更改昵称',
+					placeholder: '请输入修改的昵称',
+					value: that.myinfo.nickname,
+					DialogType: 'input',
+					animation: 0
+				}).then((res) => {
+					if (res.value.length < 1) {
+						uni.showToast({
+							title: "请输入有效的昵称",
+							icon: 'none'
+						});
+						return;
+					}
+					that.myinfo.nickname = res.value;
+					let obj2 = {
+						nickname: res.value
+					}
+					const postData = Object.assign({}, getApp().globalData.postHeader, obj2);
+					uni.request({
+						url: that.$apiHost + '/Gushi/editinfo', //检测是否已绑定
+						data: postData,
+						method: 'POST',
+						header: {
+							'content-type': 'application/json', //自定义请求头信息
+							'Access-Control-Allow-Origin': '*'
+						},
+						success: (res) => {
+							uni.showToast({
+								title: res.data.str,
+								icon: 'none'
+							});
+						}
+					});
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import 'article.scss';
+</style>

pages/my/M_coin.scss

@@ -0,0 +1,135 @@
+
+page {
+	background-color: #161616;
+}
+.page {
+	background-color: #161616;
+}
+.topbg {
+}
+.topBody {
+	width:750rpx;
+}
+.header {
+	display: flex;flex-direction: row;justify-content: space-between;align-items: center;color:$title;
+
+	.title {
+		font-size: 34rpx;
+	}
+}
+.thread {
+	height:210rpx;
+	padding:50rpx;font-size: 52rpx;color:#6E6A6A;padding-top: 80rpx;
+}
+.myinfo {
+	width: 690rpx;display:flex;flex-direction: column;margin:30rpx 30rpx 60rpx;justify-content: flex-start;
+	
+	
+	.numlist {
+		display: flex;flex-direction: row;justify-content: space-around;align-items: center;
+		position: relative;
+		height: 176rpx;
+		background: #28292D;
+		border-radius: 24rpx 24rpx 24rpx 24rpx;
+		.left {
+			display: flex;justify-content: center;padding:20rpx;
+			border-radius: 38rpx;
+			.icon {
+			}
+			image {
+				width:64rpx;
+			}
+			.num {
+				font-weight: bold;
+				font-size: 40rpx;
+				color: #FFFFFF;
+				text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
+				.name {
+					font-size: 28rpx;color: #999999;margin-top: 12rpx;font-weight: normal;
+				}
+
+			}
+		}
+		.right{
+			.buyBtn{
+				width: 202rpx;
+				height: 72rpx;
+				background: linear-gradient( 149deg, #FF5967 0%, #FF2A95 100%);
+				border-radius: 16rpx 16rpx 16rpx 16rpx;
+				text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
+				font-weight: bold;
+				font-size: 28rpx;
+				color: #FFFFFF;
+			}
+		}
+		.icon{
+			height: 176rpx;
+			position: absolute;
+			left: 260rpx;
+		}
+	}
+	.mingxiList {
+		display: flex;flex-direction: row;justify-content: space-between;align-items: center;
+		position: relative;
+		.left {
+			display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+			padding-left:40rpx;
+			padding-top: 20rpx;
+			.icon{
+				padding-left:5rpx;
+				height: 36rpx;
+			}
+		}
+		.right{
+			display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+			padding-right:40rpx;
+			padding-top: 20rpx;
+			.icon{
+				padding-left:5rpx;
+				height: 36rpx;
+			}
+		}
+
+	}
+	.numlist2 {
+		.item {
+			display: flex;flex-direction: row;justify-content: space-between;align-items: center;
+			height: 148rpx;
+			background: #28292D;
+			border-radius: 24rpx 24rpx 24rpx 24rpx;
+			margin-top: 24rpx;
+			
+			.left {
+				display: flex;justify-content: center;padding:50rpx;
+				.num {
+					text-align: left;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
+					font-size: 40rpx;
+					color: #FFFFFF;
+
+					
+					.data {
+						font-size: 28rpx;color: #999999;margin-top: 12rpx;font-weight: normal;
+					}
+			
+				}
+			}
+			.right{
+				height: 40%;
+				display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;
+				.num1{
+					padding-right:50rpx;
+					text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
+					font-weight: bold;
+					font-size: 36rpx;
+					color: #FE2D56;
+				}
+				.num2{
+					color: #FFFFFF;
+				}
+			}
+		}
+	}
+}
+.blankHeight {
+	height:100rpx;
+}

pages/my/M_coin.vue

@@ -0,0 +1,191 @@
+<template>
+	<view class="page">
+		<view class="topBody">
+			<view class="header">
+			</view>
+			<view class="myinfo">
+				<view class="line"></view>
+				<view class="numlist">
+					<view class="left">
+						<view class="num">
+							<text >{{M_coinInfo.myMcoin}}</text>
+							<view class="name">M币数量</view>
+						</view>
+					</view>
+					<view class="right">
+						<view class="buyBtn">
+							<text >立即充值</text>
+						</view>
+					</view>
+					<image class="icon" src="../../static/me/M_coin_bg1.png" mode="heightFix" />
+				</view>
+				<view style="padding-top: 20rpx;margin-left: 40rpx;" class="jinchu">
+					<text style="color:#FFFFFF;font-size: 32rpx;">进出明细</text>
+				</view>
+
+				
+				<view class="mingxiList">
+					<view class="left">
+						<text style="font-size: 28rpx;color: #999999;">明细类型</text>
+						<image class="icon" src="../../static/me/arrow_down_gray.png" mode="heightFix" />
+					</view>
+					<view class="right">
+						<text style="font-size: 28rpx;color: #999999;">开始时间-结束时间</text>
+						<image class="icon" src="../../static/me/arrow_down_gray.png" mode="heightFix" />
+					</view>
+				</view>
+
+				<view class="numlist2">
+					<view class="item" v-for="(item, index) in historyInfo" :key="index">
+						<view class="left">
+							<view class="num">
+								<text>{{ item.reason }}</text>
+								<view class="data">2023-1-12 15：00</view>
+							</view>
+						</view>
+						<view class="right">
+							<view v-if="item.value>0" class="num1">
+								<text>+{{ item.value }}</text>
+							</view>
+							<view v-else class="num1 num2">
+								<text>{{ item.value }}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+
+			</view>
+
+
+			<view class="blankHeight"></view>
+		</view>
+
+
+		<!-- 提示框 -->
+		<DialogBox ref="DialogBox"></DialogBox>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				title: '',
+				sel: 1,
+				M_coinInfo: {
+					
+					myMcoin: 0
+
+				},
+				historyInfo:{
+					"0":{
+						reason :"M币充值",
+						value:100
+					},
+					"1":{
+						reason :"M币充值",
+						value:200
+					},
+					"2":{
+						reason :"赠送礼物",
+						value:-100
+					}
+				}
+			}
+		},
+		onLoad() {
+				setTimeout(function() {
+					uni.setNavigationBarColor({
+						frontColor: '#ffffff',
+						backgroundColor: '#00000000',
+						animation: {
+							duration: 400,
+							timingFunc: 'easeIn'
+						}
+					})
+				}, 200);
+			},
+			onShow() {
+				this.loadData();
+			},
+			methods: {
+				onBack() {},
+				chkSel() {
+					if (this.sel == 1) {
+						this.sel = 0;
+					} else {
+						this.sel = 1;
+					}
+				},
+				loadData() {
+					console.log("this.globalData", getApp().globalData);
+					let obj2 = {
+						is_first: 0
+					}
+					const postData = Object.assign({}, getApp().globalData.postHeader, obj2);
+		
+					console.log(postData);
+		
+					uni.request({
+						url: this.$apiHost + '/Gushi/getmyinfo', //仅为示例，并非真实接口地址。
+						data: postData,
+						method: 'POST',
+						header: {
+							'content-type': 'application/json', //自定义请求头信息
+							'Access-Control-Allow-Origin': '*'
+						},
+						success: (res) => {
+							console.log('data:', res.data);
+							this.myinfo = res.data;
+						}
+					});
+		
+		
+		
+				},
+				EditNickname() {
+					let that = this;
+					this.$refs['DialogBox'].confirm({
+						title: '更改昵称',
+						placeholder: '请输入修改的昵称',
+						value: that.myinfo.nickname,
+						DialogType: 'input',
+						animation: 0
+					}).then((res) => {
+						if (res.value.length < 1) {
+							uni.showToast({
+								title: "请输入有效的昵称",
+								icon: 'none'
+							});
+							return;
+						}
+						that.myinfo.nickname = res.value;
+						let obj2 = {
+							nickname: res.value
+						}
+						const postData = Object.assign({}, getApp().globalData.postHeader, obj2);
+						uni.request({
+							url: that.$apiHost + '/Gushi/editinfo', //检测是否已绑定
+							data: postData,
+							method: 'POST',
+							header: {
+								'content-type': 'application/json', //自定义请求头信息
+								'Access-Control-Allow-Origin': '*'
+							},
+							success: (res) => {
+								uni.showToast({
+									title: res.data.str,
+									icon: 'none'
+								});
+							}
+						});
+					})
+				},
+			}
+		}
+</script>
+
+<style scoped lang="scss">
+	@import 'M_coin.scss';
+</style>