fix: 修复我的页面背景bug

components/Container/Container.vue

@@ -158,6 +158,9 @@ defineExpose({
 
 <template>
   <view class="container" :style="{ background: bgColor }">
+    <div class="bg">
+      <slot name="bg"></slot>
+    </div>
     <view
       class="title"
       :style="{
@@ -232,6 +235,11 @@ defineExpose({
   z-index: 9999;
 }
 
+.bg {
+  position: absolute;
+  top: 0;
+}
+
 .empty {
   display: flex;
   align-items: center;

components/Tree/Tree.vue

@@ -116,7 +116,7 @@ const emit = defineEmits(["onChnage", "onClickButton"]);
     font-family: "PingFang SC, PingFang SC";
     font-weight: 500;
     font-size: 28rpx;
-    color: #002fa7;
+    color: $primary;
     border-radius: 4rpx;
   }
 

pages/user/index.vue

@@ -1,400 +1,421 @@
 <template>
-  <Container
-    title="我的"
-    :scrollStyle="{
-      padding: 0,
-    }"
-    :showBack="false"
-    bgColor="linear-gradient(to right, rgb(33, 147, 176), rgb(109, 213, 237))"
-  >
-    <view>
-      <view class="user_box">
-        <view class="box_left">
-          <navigator url="/pages/user/settings">
-            <image class="user_image" :src="userInfo.userpic"></image>
-          </navigator>
-        </view>
-        <view class="box_center">
-          <view class="user_name" v-if="is_login">{{ userInfo.username }} {{userInfo.vip_info !=null ? 'VIP':''}}</view>
-          <navigator class="user_name" url="/pages/login/index" v-if="!is_login"
-            >请登录</navigator
-          >
-          <view class="user_info" v-if="userInfo.vip_info !=null ">有效期：{{ userInfo.vip_info.vip_end_time}}</view>
-        </view>
-        <view class="box_right">
-          <navigator
-            url="/pages/user/settings"
-            class="setting_page"
-            v-if="is_login"
-          >
-            <uni-icons type="gear" size="30"></uni-icons>
-          </navigator>
-        </view>
-      </view>
-      <view class="navigator_list">
-        <navigator class="navigator_item" url="/" v-if="false">
-          <view class="navigator_title_vip">VIP展示信息</view>
-        </navigator>
-        <navigator class="navigator_item" url="/pages/recharge/index" v-else>
-          <view class="navigator_title_vip">充值VIP中心banner入口</view>
-        </navigator>
-        <navigator class="navigator_item" url="/pages/order/index">
-          <view class="navigator_title">订单记录</view>
-          <view class="navigator_title_ico"
-            ><uni-icons type="right" size="20"></uni-icons
-          ></view>
-        </navigator>
-        <navigator class="navigator_item" url="/pages/user/share">
-          <view class="navigator_title">分享有礼</view>
-          <view class="navigator_title_ico"
-            ><uni-icons type="right" size="20"></uni-icons
-          ></view>
-        </navigator>
-        <navigator class="navigator_item" url="/pages/user/invited">
-          <view class="navigator_title">邀请记录</view>
-          <view class="navigator_title_ico"
-            ><uni-icons type="right" size="20"></uni-icons
-          ></view>
-        </navigator>
-      </view>
-      <view class="packet_content" v-if="show_packet">
-        <view class="close_btn" @click="closePacket"> X </view>
-        <image
-          src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/red_packet.gif"
-          class="red_packet"
-          @click="_getredpacket"
-        />
-      </view>
-    </view>
-    <view class="service">
-      <CustomerService>联系客服</CustomerService>
-    </view>
-  </Container>
+	<Container
+		title="我的"
+		:scrollStyle="{
+			padding: 0
+		}"
+		:showBack="false"
+		bgColor="#f8f8f8"
+	>
+	<template #bg>
+		<image
+			src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/bHbLzGDSB07Gc0tqCVCI3NLUx4sbUU4KHKSolvBq.png"
+			mode="scaleToFill"
+			class="bg"
+		/>
+	</template>
+		<view>
+			<view class="user_box">
+				<view class="box_left">
+					<navigator url="/pages/user/settings">
+						<image class="user_image" :src="userInfo.userpic"></image>
+					</navigator>
+				</view>
+				<view class="box_center">
+					<view class="user_name" v-if="is_login">{{ userInfo.username }} {{ userInfo.vip_info != null ? 'VIP' : '' }}</view>
+					<navigator class="user_name" url="/pages/login/index" v-if="!is_login">请登录</navigator>
+					<view class="user_info" v-if="userInfo.vip_info != null">有效期：{{ userInfo.vip_info.vip_end_time }}</view>
+				</view>
+				<view class="box_right">
+					<navigator url="/pages/user/settings" class="setting_page" v-if="is_login">
+						<uni-icons type="gear" size="30"></uni-icons>
+					</navigator>
+				</view>
+			</view>
+			<view class="page_content">
+				<view class="navigator_list">
+					<view class="navigator_list_vip">
+						<navigator class="navigator_item_banner" url="/pages/recharge/index">
+							<view class="navigator_title_vip_banner">
+								<image
+									class="vip-banner-image"
+									src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/PVwRdwglRHKrCFFAG6gQWiBDZDLdDa1zuPg9wnj4.png"
+									mode="aspectFill"
+								></image>
+							</view>
+						</navigator>
+					</view>
+					<view class="navigator_list_other">
+						<navigator class="navigator_item_one" url="/pages/order/index">
+							<view class="navigator_title">订单记录</view>
+							<view class="navigator_title_ico"><uni-icons type="right" size="20"></uni-icons></view>
+						</navigator>
+						<navigator class="navigator_item_two" url="/pages/user/share">
+							<view class="navigator_title">分享有礼</view>
+							<view class="navigator_title_ico"><uni-icons type="right" size="20"></uni-icons></view>
+						</navigator>
+						<navigator class="navigator_item_three" url="/pages/user/invited">
+							<view class="navigator_title">邀请有礼</view>
+							<view class="navigator_title_ico"><uni-icons type="right" size="20"></uni-icons></view>
+						</navigator>
+					</view>
+				</view>
+				<view class="packet_content" v-if="show_packet">
+					<view class="close_btn" @click="closePacket">X</view>
+					<image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/red_packet.gif" class="red_packet" @click="_getredpacket" />
+				</view>
+			</view>
+		</view>
+		<view class="service">
+			<CustomerService>联系客服</CustomerService>
+		</view>
+	</Container>
 </template>
 
 <script>
-import Container from "../../components/Container/Container.vue";
-import CustomerService from "@/components/CustomerService/CustomerService.vue";
+import Container from '../../components/Container/Container.vue';
+import CustomerService from '@/components/CustomerService/CustomerService.vue';
 
 export default {
-  data() {
-    return {
-      userInfo: {
-        username: "请登录",
-        userpic:
-          "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png",
-        phone: "kailin",
-        status: 0,
-        city_id: 0,
-      },
-      is_login: 0,
-      packetList: [],
-      show_packet: false,
-    };
-  },
-  onLoad(param) {
-    // 存储分享标识
-    if (param.share_uid) {
-      uni.setStorageSync("share_uid", param.share_uid);
-      console.log("share_uid", param.share_uid);
-    }
-    // #ifdef MP-WEIXIN
-    //分享按钮
-    uni.showShareMenu({
-      withShareTicket: true,
-      menus: ["shareAppMessage", "shareTimeline"],
-    });
-    // #endif
-  },
-  onShareAppMessage(obj) {
-    // 店铺ID
-    let shopId = uni.getStorageSync("shopId");
-    //获取当前用户信息
-    let userInfo = uni.getStorageSync("userInfo");
-    let param = "?shop_id" + shopId;
-    if (userInfo.uid) {
-      param = "&share_uid=" + userInfo.uid;
-    }
-    // 获取分享信息
-    let shareList = getApp().globalData.shareList;
-    // 获取分享信息
-    let shareObj = {
-      title: "999智控终端平台\n药优惠 得积分 兑豪礼",
-      //path: '/pages/score/lottery',
-      path: "/pages/user/index",
-      imageUrl: "",
-    };
-    // 循环列表
-    for (let i in shareList) {
-      if (shareList[i].pages == "pages/user/index") {
-        shareObj.path = shareList[i].path ? shareList[i].path : shareObj.path;
-        shareObj.title = shareList[i].title
-          ? `999智控终端平台\n${shareList[i].title}`
-          : shareObj.title;
-        shareObj.imageUrl = shareList[i].image_url
-          ? shareList[i].image_url
-          : shareObj.imageUrl;
-      }
-    }
-    if (param) {
-      shareObj.path += param;
-    }
-    // 返回分享信息
-    return shareObj;
-  },
-  onShow() {
-    // 登录提示
-    this.is_login = this.$checkAccess.checkLogin();
-    // 未登录不请求
-    if (!this.is_login) {
-      this.userInfo = {
-        username: "请登录",
-        userpic:
-          "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png",
-        phone: "kailin",
-        status: 0,
-        city_id: 0,
-        is_video_vip: 0,
-        amount: 0.0,
-        transfer_amount: 0.0,
-      };
-      return;
-    }
-    // 判断数据
-    this.$http.request("api/question_bank/question_reception/custom/get_info").then((callback) => {
-      if (callback.code == "success") {
-        if (!callback.data.userpic)
-          callback.data.userpic =
-            "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png";
-        // 赋值
-        this.userInfo = callback.data;
-        // 存储登录标识
-        uni.setStorageSync("userInfo", callback.data);
-      }
-    });
-    this._getPacketNum();
-  },
-  methods: {
-    _getredpacket() {
-      let url = "/pages/redpacket/list";
-      if (this.packetList.length == 1) {
-        url = `/pages/redpacket/index?packet_id=${this.packetList[0].custom_redpacket_id}`;
-      }
-      uni.navigateTo({
-        url: url,
-      });
-    },
-    _goWithdraw() {
-      uni.navigateTo({
-        url: "/pages/user/withdraw",
-      });
-    },
-    _goBalance() {
-      uni.navigateTo({
-        url: "/pages/balance/index",
-      });
-    },
-    closePacket() {
-      this.show_packet = false;
-    },
-    onChange(e) {
-      console.log(e);
-    },
-  },
+	data() {
+		return {
+			userInfo: {
+				username: '请登录',
+				userpic: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png',
+				phone: 'kailin',
+				status: 0,
+				city_id: 0
+			},
+			is_login: 0,
+			packetList: [],
+			show_packet: false,
+			windowHeight: 0
+		};
+	},
+	onLoad(param) {
+		// 存储分享标识
+		if (param.share_uid) {
+			uni.setStorageSync('share_uid', param.share_uid);
+			console.log('share_uid', param.share_uid);
+		}
+		// #ifdef MP-WEIXIN
+		//分享按钮
+		uni.showShareMenu({
+			withShareTicket: true,
+			menus: ['shareAppMessage', 'shareTimeline']
+		});
+		// #endif
+	},
+	mounted() {
+		this.updateWindowHeight();
+		// 监听窗口变化（H5、小程序生效，App需用 onWindowResize）
+		uni.onWindowResize((res) => {
+			this.windowHeight = res.size.windowHeight;
+		});
+		console.log(this.windowHeight);
+	},
+	onShareAppMessage(obj) {
+		// 店铺ID
+		let shopId = uni.getStorageSync('shopId');
+		//获取当前用户信息
+		let userInfo = uni.getStorageSync('userInfo');
+		let param = '?shop_id' + shopId;
+		if (userInfo.uid) {
+			param = '&share_uid=' + userInfo.uid;
+		}
+		// 获取分享信息
+		let shareList = getApp().globalData.shareList;
+		// 获取分享信息
+		let shareObj = {
+			title: '999智控终端平台\n药优惠 得积分 兑豪礼',
+			//path: '/pages/score/lottery',
+			path: '/pages/user/index',
+			imageUrl: ''
+		};
+		// 循环列表
+		for (let i in shareList) {
+			if (shareList[i].pages == 'pages/user/index') {
+				shareObj.path = shareList[i].path ? shareList[i].path : shareObj.path;
+				shareObj.title = shareList[i].title ? `999智控终端平台\n${shareList[i].title}` : shareObj.title;
+				shareObj.imageUrl = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl;
+			}
+		}
+		if (param) {
+			shareObj.path += param;
+		}
+		// 返回分享信息
+		return shareObj;
+	},
+	onShow() {
+		// 登录提示
+		this.is_login = this.$checkAccess.checkLogin();
+		// 未登录不请求
+		if (!this.is_login) {
+			this.userInfo = {
+				username: '请登录',
+				userpic: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png',
+				phone: 'kailin',
+				status: 0,
+				city_id: 0,
+				is_video_vip: 0,
+				amount: 0.0,
+				transfer_amount: 0.0
+			};
+			return;
+		}
+		// 判断数据
+		this.$http.request('api/question_bank/question_reception/custom/get_info').then((callback) => {
+			if (callback.code == 'success') {
+				if (!callback.data.userpic) callback.data.userpic = 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png';
+				// 赋值
+				this.userInfo = callback.data;
+				// 存储登录标识
+				uni.setStorageSync('userInfo', callback.data);
+			}
+		});
+		this._getPacketNum();
+	},
+	methods: {
+		updateWindowHeight() {
+			const systemInfo = uni.getSystemInfoSync();
+			this.windowHeight = systemInfo.windowHeight;
+			console.log(this.windowHeight);
+		},
+		_getredpacket() {
+			let url = '/pages/redpacket/list';
+			if (this.packetList.length == 1) {
+				url = `/pages/redpacket/index?packet_id=${this.packetList[0].custom_redpacket_id}`;
+			}
+			uni.navigateTo({
+				url: url
+			});
+		},
+		_goWithdraw() {
+			uni.navigateTo({
+				url: '/pages/user/withdraw'
+			});
+		},
+		_goBalance() {
+			uni.navigateTo({
+				url: '/pages/balance/index'
+			});
+		},
+		closePacket() {
+			this.show_packet = false;
+		},
+		onChange(e) {
+			console.log(e);
+		}
+	}
 };
 </script>
 
 <style lang="scss" scoped>
-@import "@/uni.scss"; // 引入全局scss变量
+@import '@/uni.scss'; // 引入全局scss变量
+.page_content {
+	background: #f8f8f8;
+}
+
+.bg {
+	width: 750rpx;
+	height: 456rpx;
+}
 .user_box {
-  width: 680rpx;
-  height: 180rpx;
-  overflow: hidden;
-  background: #ffffff;
-  padding: 10rpx 35rpx;
-  .box_left {
-    float: left;
-    display: block;
-    width: 140rpx;
-    height: 140rpx;
-    .user_image {
-      display: block;
-      width: 120rpx;
-      height: 120rpx;
-      border-radius: 50%;
-      margin: 10rpx auto;
-    }
-  }
-  .box_center {
-    float: left;
-    width: 300rpx;
-    height: 140rpx;
-    margin-left: 35rpx;
-    .user_name {
-      font-size: 30rpx;
-      line-height: 80rpx;
-    }
-    .user_info {
-      color: #999999;
-      font-size: 24rpx;
-      line-height: 60rpx;
-    }
-  }
-  .box_right {
-    float: right;
-    width: 140rpx;
-    height: 140rpx;
-    font-size: 20rpx;
-    line-height: 140rpx;
-    .setting_page {
-      width: 140rpx;
-      height: 140rpx;
-      display: block;
-      overflow: hidden;
-      .setting_icon {
-        width: 60rpx;
-        height: 60rpx;
-        display: block;
-        margin: 40rpx auto;
-      }
-    }
-    .company_text {
-      color: #e03519;
-      width: 140rpx;
-      height: 140rpx;
-      font-size: 20rpx;
-      text-align: center;
-      line-height: 140rpx;
-    }
-  }
+	width: 680rpx;
+	height: 180rpx;
+	overflow: hidden;
+	padding: 10rpx 35rpx;
+	.box_left {
+		float: left;
+		display: block;
+		width: 140rpx;
+		height: 140rpx;
+		.user_image {
+			display: block;
+			width: 120rpx;
+			height: 120rpx;
+			border-radius: 50%;
+			margin: 10rpx auto;
+		}
+	}
+	.box_center {
+		float: left;
+		width: 300rpx;
+		height: 140rpx;
+		margin-left: 35rpx;
+		.user_name {
+			font-size: 30rpx;
+			line-height: 80rpx;
+		}
+		.user_info {
+			color: #999999;
+			font-size: 24rpx;
+			line-height: 60rpx;
+		}
+	}
+	.box_right {
+		float: right;
+		width: 140rpx;
+		height: 140rpx;
+		font-size: 20rpx;
+		line-height: 140rpx;
+		.setting_page {
+			width: 140rpx;
+			height: 140rpx;
+			display: block;
+			overflow: hidden;
+			.setting_icon {
+				width: 60rpx;
+				height: 60rpx;
+				display: block;
+				margin: 40rpx auto;
+			}
+		}
+		.company_text {
+			color: #e03519;
+			width: 140rpx;
+			height: 140rpx;
+			font-size: 20rpx;
+			text-align: center;
+			line-height: 140rpx;
+		}
+	}
+}
+.navigator_list_vip {
+	height: 108rpx;
+	border-radius: 30rpx;
+	background: #ffffff;
+	margin-bottom: 50rpx;
+}
+.navigator_list_other {
+	background: #ffffff;
+	margin-bottom: 50rpx;
+	height: 296rpx;
+}
+.navigator_title_vip_banner {
+	width: 100%;
+	display: block;
+	height: 108rpx;
+	font-size: 30rpx;
+	.vip-banner-image {
+		width: 100%;
+		height: 108rpx;
+		display: block;
+	}
 }
 .navigator_list {
-  background: #ffffff;
-  border-top: 1rpx solid #eeeeee;
-  .navigator_item {
-    position: relative;
-    .navigator_title_ico {
-      position: absolute;
-      right: 30rpx;
-      top: 17rpx;
-    }
-	  position: relative;
-	.navigator_title_ico{
+	border-top: 1rpx solid #eeeeee;
+	height: 505rpx;
+	margin: 30rpx;
+	border-radius: 30rpx;
+	.navigator_item_one {
+		background: #ffffff;
+		position: relative;
+		border-radius: 30rpx 30rpx 0rpx 0rpx;
+	}
+	.navigator_item_two {
+		background: #ffffff;
+		position: relative;
+	}
+	.navigator_item_three {
+		background: #ffffff;
+		position: relative;
+		border-radius: 0rpx 0rpx 30rpx 30rpx;
+	}
+	.navigator_title_ico {
 		position: absolute;
 		right: 30rpx;
-		top: 20rpx;
+		top: 25rpx;
 	}
-    .navigator_title {
-      width: 100%;
-      display: block;
-      font-size: 30rpx;
-      line-height: 40rpx;
-      padding: 20rpx 30rpx;
-      border-bottom: 1rpx solid #eeeeee;
-	  padding: 25rpx 30rpx;
-	  border-bottom: 1rpx solid #eeeeee;
-    }
-    .navigator_title_vip {
-      width: 100%;
-      display: block;
-      font-size: 30rpx;
-      line-height: 40rpx;
-      padding: 30rpx 60rpx;
-      border-bottom: 1rpx solid #eeeeee;
-      font-size: 30rpx;
-    }
-	.navigator_title_vip{
-		width: 100%;
+	.navigator_title {
 		display: block;
 		font-size: 30rpx;
 		line-height: 40rpx;
-		padding: 35rpx 60rpx;
 		border-bottom: 1rpx solid #eeeeee;
-		font-size: 30rpx;
+		padding: 30rpx 30rpx;
 	}
-  }
 }
 
 .alter_info {
-  display: block;
-  color: #e03519;
-  font-size: 20rpx;
-  overflow: hidden;
-  margin: 20rpx auto;
-  background: #ffffff;
-  line-height: 40rpx;
-  padding: 35rpx 35rpx;
+	display: block;
+	color: #e03519;
+	font-size: 20rpx;
+	overflow: hidden;
+	margin: 20rpx auto;
+	background: #ffffff;
+	line-height: 40rpx;
+	padding: 35rpx 35rpx;
 }
 .balance_content {
-  margin: 20rpx;
-  padding: 35rpx;
-  background-color: #fff;
-  box-sizing: border-box;
-  .balance_content_main {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 36rpx;
-    .price_content {
-      display: flex;
-      flex-direction: column;
-      > .title {
-        font-size: 24rpx;
-        margin-bottom: 15rpx;
-      }
-    }
-    .withdraw_btn {
-      color: #ffffff;
-      background-color: #169bd5;
-      border-radius: 60rpx;
-      padding: 10rpx 20rpx;
-      width: 90rpx;
-      text-align: center;
-      line-height: 40rpx;
-    }
-  }
-  .balance_content_detail {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-top: 2rpx solid #f3f3f3;
-    font-size: 24rpx;
-    padding-top: 18rpx;
-  }
+	margin: 20rpx;
+	padding: 35rpx;
+	background-color: #fff;
+	box-sizing: border-box;
+	.balance_content_main {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 36rpx;
+		.price_content {
+			display: flex;
+			flex-direction: column;
+			> .title {
+				font-size: 24rpx;
+				margin-bottom: 15rpx;
+			}
+		}
+		.withdraw_btn {
+			color: #ffffff;
+			background-color: #169bd5;
+			border-radius: 60rpx;
+			padding: 10rpx 20rpx;
+			width: 90rpx;
+			text-align: center;
+			line-height: 40rpx;
+		}
+	}
+	.balance_content_detail {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-top: 2rpx solid #f3f3f3;
+		font-size: 24rpx;
+		padding-top: 18rpx;
+	}
 }
 .packet_content {
-  position: absolute;
-  right: 0;
-  bottom: 15%;
-  width: 160rpx;
-  height: 160rpx;
-  .red_packet {
-    width: 100%;
-    height: 100%;
-  }
-  .close_btn {
-    width: 40rpx;
-    height: 40rpx;
-    font-size: 24rpx;
-    line-height: 40rpx;
-    border-radius: 50%;
-    border: 1rpx solid #ddd;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 5rpx;
-    left: 0;
-  }
+	position: absolute;
+	right: 0;
+	bottom: 15%;
+	width: 160rpx;
+	height: 160rpx;
+	.red_packet {
+		width: 100%;
+		height: 100%;
+	}
+	.close_btn {
+		width: 40rpx;
+		height: 40rpx;
+		font-size: 24rpx;
+		line-height: 40rpx;
+		border-radius: 50%;
+		border: 1rpx solid #ddd;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		top: 5rpx;
+		left: 0;
+	}
 }
 
 .service {
-  position: absolute;
-  bottom: 20%;
-  right: 5%;
-  color: $uni-primary;
-  font-size: 28rpx;
-  margin-bottom: 40rpx;
-  text-align: right;
+	position: absolute;
+	bottom: 20%;
+	right: 5%;
+	color: $uni-primary;
+	font-size: 28rpx;
+	margin-bottom: 40rpx;
+	text-align: right;
 }
 </style>