.hbuilderx/launch.json

@@ -0,0 +1,9 @@
+{
+    "version" : "1.0",
+    "configurations" : [
+        {
+            "playground" : "standard",
+            "type" : "uni-app:app-ios"
+        }
+    ]
+}

pages.json

@@ -151,37 +151,43 @@
 		{
 			"path": "pages/activateVIP/index",
 			"style": {
-				"navigationBarTitleText": "开通会员"
+				// "navigationBarTitleText": "开通会员"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/setting/index",
 			"style": {
-				"navigationBarTitleText": "系统设置"
+				// "navigationBarTitleText": "系统设置"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/setting/accountSecurity",
 			"style": {
-				"navigationBarTitleText": "账户安全"
+				// "navigationBarTitleText": "账户安全"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/setting/changePassword",
 			"style": {
-				"navigationBarTitleText": "修改密码"
+				// "navigationBarTitleText": "修改密码"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/setting/retrievePassword",
 			"style": {
-				"navigationBarTitleText": "找回密码"
+				// "navigationBarTitleText": "找回密码"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/index/notice",
 			"style": {
-				"navigationBarTitleText": "公告"
+				// "navigationBarTitleText": "公告"
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -208,19 +214,22 @@
 		{
 			"path": "pages/index/gettingStarted",
 			"style": {
-				"navigationBarTitleText": "新手入门"
+				// "navigationBarTitleText": "新手入门"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/index/startedDetails",
 			"style": {
-				"navigationBarTitleText": "详情"
+				// "navigationBarTitleText": "详情"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/index/popularBounty",
 			"style": {
-				"navigationBarTitleText": "热门悬赏"
+				// "navigationBarTitleText": "热门悬赏"
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -271,13 +280,13 @@
 				"text": "首页",
 				"pagePath": "pages/index/index",
 				"iconPath": "/static/tabbar/home.png",
-				"selectedIconPath": "/static/tabbar/homeCheck.png"
+				"selectedIconPath": "/static/tabbar/home_check.png"
 			},
 			{
-				"text": "我的",
+				"text": "个人中心",
 				"pagePath": "pages/my/index",
 				"iconPath": "/static/tabbar/my.png",
-				"selectedIconPath": "/static/tabbar/myCheck.png"
+				"selectedIconPath": "/static/tabbar/my_check.png"
 			}
 		]
 	},

pages/activateVIP/index.vue

@@ -1,25 +1,280 @@
 <template>
-	<view class="content">
-		开通会员
-	</view>
+  <view class="content pdx-48">
+    <view class="top_bg pdx-48">
+      <view class="w h-88 flex ai_center jc_center mgt-88 p-rel">
+        <image
+          @click="$navBack()"
+          class="w-48 h-48 abs_left"
+          src="/static/image/common/left_arrow_icon.png"
+          mode="scaleToFill"
+        />
+        <view class="text-36 text-500 text-070202">开通会员</view>
+      </view>
+
+      <view class="head" @click="$navTo('/pages/personalProfile/index')">
+        <view class="flex fd_c">
+          <view class="text-36 text-070202 text-500">用户名称用户名称</view>
+          <!-- <view class="vip_year_bg"> lv.1年 </view> -->
+          <view class="vip_bg">普通会员</view>
+        </view>
+        <!-- 
+			未登录时头像
+			/static/image/my/no_login_avatar.png 
+		  -->
+        <image
+          class="image"
+          src="/static/image/my/my_default_avatar.png"
+        ></image>
+      </view>
+
+      <view class="w h-96 flex ai_center mgt-42">
+        <view
+          v-for="(item, index) in menuList"
+          :key="item"
+          class="menu"
+          :class="menuIndex === index ? 'check_menu' : 'default_menu'"
+          @click="handleMenu(index)"
+        >
+          <view>{{ item }}</view>
+          <view
+            class="menu_line"
+            :style="{
+              backgroundColor:
+                menuIndex === index ? ' #fe6505' : ' transparent',
+            }"
+          ></view>
+        </view>
+      </view>
+    </view>
+
+    <view style="width: 100vw; padding: 0 32rpx; margin-top: -62rpx">
+      <view class="rights">
+        <view class="title text-28 text-500 text-white">开通权益</view>
+        <view class="rights_box w flex jc_between">
+          <view
+            class="rights_item flex fd_c w-128"
+            v-for="item in rightsList"
+            :key="item.icon"
+          >
+            <image class="w-72 h-72" :src="item.icon" mode="scaleToFill" />
+            <view
+              class="text text-20 text-400 text-7E7E7E"
+              v-html="item.content"
+            >
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <button class="btn">立即开通</button>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
+export default {
+  data() {
+    return {
+      menuList: ["月度会员", "季度会员", "年度会员"],
+      menuIndex: 0,
+      rightsList: [
+        {
+          icon: "/static/image/vip/publish_tasks_icon.png",
+          content: `
+			发布任务<br>
+			服务费<text class="text-500 text-FF9F38">13%</text>`,
+        },
+        {
+          icon: "/static/image/vip/tools_use_icon.png",
+          content: `
+			工具使用优惠<br>
+			折扣<text class="text-500 text-FF9F38">9折</text>`,
+        },
+        {
+          icon: "/static/image/vip/give_icon.png",
+          content: `
+			赠送<text class="text-500 text-FF9F38">2小时</text>
+			<br>置顶`,
+        },
+        {
+          icon: "/static/image/vip/edit_tasks_icon.png",
+          content: `
+			发布/修改任务<br>
+			数量限制<text class="text-500 text-FF9F38">10次</text>`,
+        },
+        {
+          icon: "/static/image/vip/give_icon.png",
+          content: `
+			可发布类型:<br>
+			<text class="text-500 text-FF9F38">高价悬赏</text>`,
+        },
+      ],
+    };
+  },
+  computed: {},
+  onLoad() {},
+  methods: {
+    handleMenu(index) {
+      this.menuIndex = index;
+    },
+  },
+};
 </script>
 
-<style scoped lang="scss">
-	
+<style lang="scss" scope>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.top_bg {
+  width: 100vw;
+  height: 568rpx;
+  flex-shrink: 0;
+  // background: linear-gradient(to bottom, #ffd8bf, #ffffff);
+  background: linear-gradient(180deg, #ffd8bf 10%, #fff 65%);
+
+  .head {
+    margin-top: 32rpx;
+    height: 144rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .vip_icon {
+      margin-top: 16rpx;
+      width: 112rpx;
+      height: 44rpx;
+    }
+    .image {
+      width: 144rpx;
+      height: 144rpx;
+      border-radius: 50%;
+    }
+  }
+}
+
+.vip_year_bg {
+  margin-top: 16rpx;
+  width: 112rpx;
+  height: 44rpx;
+  background: url("/static//image/my/vip_year_bg.png");
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+  font-family: "MiSans VF";
+  font-size: 22rpx;
+  font-weight: 500;
+  letter-spacing: 0.66rpx;
+  padding-left: 42rpx;
+}
+
+.vip_bg {
+  margin-top: 16rpx;
+  width: 144rpx;
+  height: 48rpx;
+  line-height: 40rpx;
+  background: url("/static//image/my/vip_bg.png");
+  background-size: cover;
+  padding-left: 42rpx;
+  color: #ffffff;
+  font-family: "MiSans VF";
+  font-size: 22rpx;
+  font-weight: 500;
+  letter-spacing: -0.66rpx;
+}
+
+.check_menu {
+  color: #070202;
+  font-size: 36rpx;
+  font-weight: 600;
+}
+
+.default_menu {
+  color: #7e7e7e;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+
+.menu_line {
+  margin-top: 8rpx;
+  width: 32rpx;
+  height: 10rpx;
+}
+
+.menu {
+  margin-right: 48rpx;
+  text-align: center;
+  font-family: "MiSans VF";
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.rights {
+  width: 100%;
+  height: 322rpx;
+  border-radius: 24rpx 24rpx 0 0;
+  background: linear-gradient(180deg, #ff6606 0%, #ff9a5c 100%);
+  //   background: url("/static//image/vip/rights_bg.png");
+  //   background-size: cover;
+  //   padding:  20rpx 24rpx 40rpx 24rpx;
+  position: relative;
+
+  .title {
+    position: absolute;
+    top: 20rpx;
+    left: 24rpx;
+  }
+  .rights_box {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 244rpx;
+    border-radius: 24rpx 24rpx 0 0;
+    background: linear-gradient(180deg, #fff 0%, #ffffffe6 100%);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 7rpx;
+
+    .rights_item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .text {
+        margin-top: 28rpx;
+        text-align: center;
+        letter-spacing: -0.66rpx;
+        line-height: 1.4;
+      }
+    }
+  }
+}
+
+.btn {
+  position: absolute;
+  left: 50%;
+  bottom: 262rpx;
+  transform: translateX(-50%);
+  width: 88%;
+  height: 96rpx;
+  line-height: 96rpx;
+  flex-shrink: 0;
+  border-radius: 64rpx;
+  background: #fe6505;
+  color: #ffffff;
+  text-align: center;
+  font-family: "MiSans VF";
+  font-size: 36rpx;
+  font-weight: 500;
+}
 </style>

pages/login/forget.vue

@@ -1,218 +1,327 @@
 <template>
-	<view class="content">
-		<view class="top_bg">
-			<image class="top_close" @click="$navBack()" src="/static/image/login/close_icon.png" mode="scaleToFill" />
-			<view class="top_text">
-				<view>忘记密码</view>
-				<image
-					class="top_icon"
-					src="/static//image/login/dot_icon.png"
-					mode="scaleToFill"
-				/>
-			</view>
-		</view>
-
-		<view class="w pdx-40 main">
-			<u--input class="h-112" v-model="loginParam.phone" placeholder="请输入手机号码" border="bottom"
-				clearable></u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.code" placeholder="请输入验证码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-code :seconds="seconds" @end="end" @start="start" change-text="xs" ref="uCode"
-						:keep-running="true" @change="codeChange"></u-code>
-					<u-button :disabled="!isShowCode" @tap="sliderVerify" class="code_btn">{{ tips }}</u-button>
-				</template>
-			</u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.password" :password="!isViewPassword" placeholder="请输入密码"
-				border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewPassword = !isViewPassword" :name="isViewPassword ? 'eye-fill' : 'eye-off'"
-						color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.confirmPwd" :password="!isViewConfirmPwd"
-				placeholder="请确认密码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewConfirmPwd = !isViewConfirmPwd"
-						:name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'" color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-
-			<u-button :disabled="!isSubmit" class="login" @tap="submit">提交</u-button>
-		</view>
-		<zmm-slider-verify ref="sliderVerify" @success="successHandle" @error="errorHandle"
-			@close="closeHandle"></zmm-slider-verify>
-	</view>
+  <view class="content">
+    <view class="top_bg">
+      <image
+        class="top_close"
+        @click="$navBack()"
+        src="/static/image/login/close_icon.png"
+        mode="scaleToFill"
+      />
+      <view class="top_text">
+        <view>忘记密码</view>
+        <image
+          class="top_icon"
+          src="/static//image/login/dot_icon.png"
+          mode="scaleToFill"
+        />
+      </view>
+    </view>
+
+    <view class="w pdx-40 main">
+      <u--input
+        class="h-112"
+        v-model="loginParam.phone"
+        placeholder="请输入手机号码"
+        border="bottom"
+        clearable
+      ></u--input>
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.code"
+        placeholder="请输入验证码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.code"
+          placeholder="请输入验证码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+
+          <template slot="suffix">
+            <u-code
+              :seconds="seconds"
+              @end="end"
+              @start="start"
+              change-text="xs"
+              ref="uCode"
+              :keep-running="true"
+              @change="codeChange"
+            ></u-code>
+            <u-button
+              :disabled="!isShowCode"
+              @tap="sliderVerify"
+              class="code_btn"
+              >{{ tips }}</u-button
+            >
+          </template>
+
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.password"
+        :password="!isViewPassword"
+        placeholder="请输入密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.password"
+          :password="!isViewPassword"
+          placeholder="请输入密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewPassword = !isViewPassword"
+              :name="isViewPassword ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.confirmPwd"
+        :password="!isViewConfirmPwd"
+        placeholder="请确认密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.confirmPwd"
+          :password="!isViewConfirmPwd"
+          placeholder="请确认密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewConfirmPwd = !isViewConfirmPwd"
+              :name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <u-button :disabled="!isSubmit" class="login" @tap="submit"
+        >提交</u-button
+      >
+    </view>
+    <zmm-slider-verify
+      ref="sliderVerify"
+      @success="successHandle"
+      @error="errorHandle"
+      @close="closeHandle"
+    ></zmm-slider-verify>
+  </view>
 </template>
 
 <script>
-import { isValidPhone, isValidPassword } from '@/utils/index'
+import { isValidPhone, isValidPassword } from "@/utils/index";
 export default {
-	data() {
-		return {
-			isViewPassword: false,
-			isViewConfirmPwd: false,
-			isCode: false,//验证码按钮状态
-			tips: '',// 验证码提示文字
-			seconds: 60,//验证码秒数
-			loginParam: {
-				phone: undefined,
-				code: undefined,
-				password: undefined,
-				confirmPwd: undefined,
-			},
-		}
-	},
-	computed: {
-		isShowCode() {
-			return this.loginParam.phone && !this.isCode
-		},
-		isSubmit() {
-			return this.loginParam.phone && this.loginParam.code &&
-				this.loginParam.password && this.loginParam.confirmPwd
-		}
-
-	},
-	watch: {
-
-	},
-	onLoad() {
-
-	},
-	methods: {
-		//显示验证组件
-		sliderVerify() {
-			if(isValidPhone(this.loginParam.phone)) {
-				this.$refs['sliderVerify'].show()
-			} else {
-				uni.$u.toast('请输入正确手机号');
-			}
-		},
-		//验证通过回调
-		successHandle(e) {
-			console.log(e)
-			this.getCode()
-		},
-		//验证失败回调
-		errorHandle(e) {
-			console.log(e)
-		},
-		//组件关闭回调
-		closeHandle(e) {
-			console.log(e)
-		},
-		codeChange(text) {
-			this.tips = text;
-		},
-		getCode() {
-			if (this.$refs.uCode.canGetCode) {
-				// 模拟向后端请求验证码
-				uni.showLoading({
-					title: '正在获取验证码'
-				})
-				setTimeout(() => {
-					uni.hideLoading();
-					// 这里此提示会被this.start()方法中的提示覆盖
-					uni.$u.toast('验证码已发送');
-					// 通知验证码组件内部开始倒计时
-					this.$refs.uCode.start();
-				}, 2000);
-			} else {
-				uni.$u.toast('倒计时结束后再发送');
-			}
-		},
-		end() {
-			// uni.$u.toast('倒计时结束');
-			this.isCode = false
-		},
-		start() {
-			// uni.$u.toast('倒计时开始');
-			this.isCode = true
-		},
-		submit() {
-			console.log('提交参数 :===>>', this.loginParam);
-		}
-	}
-}
+  data() {
+    return {
+      isViewPassword: false,
+      isViewConfirmPwd: false,
+      isCode: false, //验证码按钮状态
+      tips: "", // 验证码提示文字
+      seconds: 60, //验证码秒数
+      loginParam: {
+        phone: undefined,
+        code: undefined,
+        password: undefined,
+        confirmPwd: undefined,
+      },
+    };
+  },
+  computed: {
+    isShowCode() {
+      return this.loginParam.phone && !this.isCode;
+    },
+    isSubmit() {
+      return (
+        this.loginParam.phone &&
+        this.loginParam.code &&
+        this.loginParam.password &&
+        this.loginParam.confirmPwd
+      );
+    },
+  },
+  watch: {},
+  onLoad() {},
+  methods: {
+    //显示验证组件
+    sliderVerify() {
+      if (isValidPhone(this.loginParam.phone)) {
+        this.$refs["sliderVerify"].show();
+      } else {
+        uni.$u.toast("请输入正确手机号");
+      }
+    },
+    //验证通过回调
+    successHandle(e) {
+      console.log(e);
+      this.getCode();
+    },
+    //验证失败回调
+    errorHandle(e) {
+      console.log(e);
+    },
+    //组件关闭回调
+    closeHandle(e) {
+      console.log(e);
+    },
+    codeChange(text) {
+      this.tips = text;
+    },
+    getCode() {
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: "正在获取验证码",
+        });
+        setTimeout(() => {
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          uni.$u.toast("验证码已发送");
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start();
+        }, 2000);
+      } else {
+        uni.$u.toast("倒计时结束后再发送");
+      }
+    },
+    end() {
+      // uni.$u.toast('倒计时结束');
+      this.isCode = false;
+    },
+    start() {
+      // uni.$u.toast('倒计时开始');
+      this.isCode = true;
+    },
+    submit() {
+      console.log("提交参数 :===>>", this.loginParam);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .content {
-	width: 100vw;
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	position: relative;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
 
 .top_bg {
-	position: relative;
-	width: 100vw;
-	height: 568rpx;
-	flex-shrink: 0;
-	background: linear-gradient(to bottom, #ffd8bf, #ffffff);
-
-	.top_close {
-		position: absolute;
-		top: 128rpx;
-		left: 40rpx;
-		width: 48rpx;
-		height: 48rpx;
-	}
-
-	.top_text {
-		position: absolute;
-		top: 224rpx;
-		left: 64rpx;
-		display: flex;
-		color: #070602;
-		font-family: "MiSans VF";
-		font-size: 52rpx;
-		font-style: normal;
-		font-weight: 600;
-		line-height: normal;
-		letter-spacing: 0.66rpx;
-		text-transform: uppercase;
-	}
-
-	.top_icon {
-		margin-top: -10rpx;
-		margin-left: 8rpx;
-		width: 24rpx;
-		height: 24rpx;
-	}
+  position: relative;
+  width: 100vw;
+  height: 568rpx;
+  flex-shrink: 0;
+  background: linear-gradient(to bottom, #ffd8bf, #ffffff);
+
+  .top_close {
+    position: absolute;
+    top: 128rpx;
+    left: 40rpx;
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  .top_text {
+    position: absolute;
+    top: 224rpx;
+    left: 64rpx;
+    display: flex;
+    color: #070602;
+    font-family: "MiSans VF";
+    font-size: 52rpx;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: 0.66rpx;
+    text-transform: uppercase;
+  }
+
+  .top_icon {
+    margin-top: -10rpx;
+    margin-left: 8rpx;
+    width: 24rpx;
+    height: 24rpx;
+  }
 }
 
 .main {
-	margin-top: -72rpx;
-
-	.login {
-		margin-top: 240rpx;
-		height: 96rpx;
-		width: 100%;
-		flex-shrink: 0;
-		border-radius: 64rpx;
-		background: #FE6505;
-		color: #ffffff;
-		text-align: center;
-		font-family: "MiSans VF";
-		font-size: 36rpx;
-		font-style: normal;
-		font-weight: 500;
-	}
-
-	.code_btn {
-		padding: 0rpx 24rpx;
-		height: 60rpx;
-		border-radius: 32rpx;
-		font-size: 24rpx;
-		color: #fff;
-		font-weight: 400;
-		background: linear-gradient(0deg, #FE6505 0%, #FE6505 100%), #141111;
-	}
-
-	.code_btn_off {
-		background: #fe65054d;
-	}
+  margin-top: -72rpx;
+
+  .login {
+    margin-top: 240rpx;
+    height: 96rpx;
+    width: 100%;
+    flex-shrink: 0;
+    border-radius: 64rpx;
+    background: #fe6505;
+    color: #ffffff;
+    text-align: center;
+    font-family: "MiSans VF";
+    font-size: 36rpx;
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  .code_btn {
+    padding: 0rpx 24rpx;
+    height: 60rpx;
+    border-radius: 32rpx;
+    font-size: 24rpx;
+    color: #fff;
+    font-weight: 400;
+    background: linear-gradient(0deg, #fe6505 0%, #fe6505 100%), #141111;
+  }
+
+  .code_btn_off {
+    background: #fe65054d;
+  }
 }
 </style>

pages/login/index.vue

@@ -1,229 +1,326 @@
 <template>
-	<view class="content">
-		<view class="top_bg">
-			<image class="top_close" @click="$navTo('/pages/my/index','tabbar')" src="/static/image/login/close_icon.png" mode="scaleToFill" />
-			<view class="top_text">
-				<view>欢迎来到众酬帮</view>
-				<image
-					class="top_icon"
-					src="/static//image/login/dot_icon.png"
-					mode="scaleToFill"
-				/>
-			</view>
-		</view>
-
-		<view class="w pdx-40 main">
-			<u--input class="h-112" v-model="loginParam.phone" placeholder="请输入手机号码" border="bottom"
-				clearable></u--input>
-			<u--input v-if="loginParam.loginWay === 'password'" class="h-112 mgt-16" v-model="loginParam.password"
-				:password="!isViewPassword" placeholder="请输入密码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewPassword = !isViewPassword" :name="isViewPassword ? 'eye-fill' : 'eye-off'"
-						color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-			<u--input v-else class="h-112 mgt-16" v-model="loginParam.code" placeholder="请输入验证码" border="bottom"
-				clearable>
-				<template slot="suffix">
-					<u-code :seconds="seconds" @end="end" @start="start" change-text="xs" ref="uCode"
-						:keep-running="true" @change="codeChange"></u-code>
-					<u-button :disabled="!isShowCode" @tap="sliderVerify" class="code_btn">{{ tips }}</u-button>
-				</template>
-			</u--input>
-			<view class="flex jc_between mgt-32">
-				<view v-if="loginParam.loginWay === 'password'" @click="loginParam.loginWay = 'code'"
-					class="text-24 text-500 text-303030">验证码登录</view>
-				<view v-else @click="loginParam.loginWay = 'password'" class="text-24 text-500 text-303030">密码登录</view>
-				<view class="text-24 text-500 text-303030" @click="$navTo('/pages/login/register')">注册</view>
-			</view>
-
-			<button class="login" @tap="submit">登录</button>
-			<view class="mgt-32 text-24 text-500 text-303030 text-center" @click="$navTo('/pages/login/forget')">忘记密码</view>
-			<view class="mgt-130">
-				<u-divider text="快捷登录"></u-divider>
-			</view>
-			<view class="w flex jc_center mgt-30">
-				<image class="w-80 h-80 " src="/static/image/login/weinxin_icon.png" mode="scaleToFill" />
-			</view>
-
-			<view class="mgt-72 text-24 text-7E7E7E text-500">
-				登录即代表同意
-				<text class="text-303030">《用户协议》</text>和
-				<text class="text-303030">《隐私政策》</text>
-			</view>
-		</view>
-		<zmm-slider-verify ref="sliderVerify" @success="successHandle" @error="errorHandle"
-			@close="closeHandle"></zmm-slider-verify>
-	</view>
+  <view class="content">
+    <view class="top_bg">
+      <image
+        class="top_close"
+        @click="$navTo('/pages/my/index', 'tabbar')"
+        src="/static/image/login/close_icon.png"
+        mode="scaleToFill"
+      />
+      <view class="top_text">
+        <view>欢迎来到众酬帮</view>
+        <image
+          class="top_icon"
+          src="/static//image/login/dot_icon.png"
+          mode="scaleToFill"
+        />
+      </view>
+    </view>
+
+    <view class="w pdx-40 main">
+      <u--input
+        class="h-112"
+        v-model="loginParam.phone"
+        placeholder="请输入手机号码"
+        border="bottom"
+        clearable
+      ></u--input>
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        v-if="loginParam.loginWay === 'password'"
+        class="h-112 mgt-16"
+        v-model="loginParam.password"
+        :password="!isViewPassword"
+        placeholder="请输入密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          v-if="loginParam.loginWay === 'password'"
+          class="h-112 mgt-16"
+          v-model="loginParam.password"
+          :password="!isViewPassword"
+          placeholder="请输入密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewPassword = !isViewPassword"
+              :name="isViewPassword ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        v-else
+        class="h-112 mgt-16"
+        v-model="loginParam.code"
+        placeholder="请输入验证码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          v-else
+          class="h-112 mgt-16"
+          v-model="loginParam.code"
+          placeholder="请输入验证码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-code
+              :seconds="seconds"
+              @end="end"
+              @start="start"
+              change-text="xs"
+              ref="uCode"
+              :keep-running="true"
+              @change="codeChange"
+            ></u-code>
+            <u-button
+              :disabled="!isShowCode"
+              @tap="sliderVerify"
+              class="code_btn"
+              >{{ tips }}</u-button
+            >
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <view class="flex jc_between mgt-32">
+        <view
+          v-if="loginParam.loginWay === 'password'"
+          @click="loginParam.loginWay = 'code'"
+          class="text-24 text-500 text-303030"
+          >验证码登录</view
+        >
+        <view
+          v-else
+          @click="loginParam.loginWay = 'password'"
+          class="text-24 text-500 text-303030"
+          >密码登录</view
+        >
+        <view
+          class="text-24 text-500 text-303030"
+          @click="$navTo('/pages/login/register')"
+          >注册</view
+        >
+      </view>
+
+      <button class="login" @tap="submit">登录</button>
+      <view
+        class="mgt-32 text-24 text-500 text-303030 text-center"
+        @click="$navTo('/pages/login/forget')"
+        >忘记密码</view
+      >
+      <view class="mgt-130">
+        <u-divider text="快捷登录"></u-divider>
+      </view>
+      <view class="w flex jc_center mgt-30">
+        <image
+          class="w-80 h-80"
+          src="/static/image/login/weinxin_icon.png"
+          mode="scaleToFill"
+        />
+      </view>
+
+      <view class="mgt-72 text-24 text-7E7E7E text-500">
+        登录即代表同意
+        <text class="text-303030">《用户协议》</text>和
+        <text class="text-303030">《隐私政策》</text>
+      </view>
+    </view>
+    <zmm-slider-verify
+      ref="sliderVerify"
+      @success="successHandle"
+      @error="errorHandle"
+      @close="closeHandle"
+    ></zmm-slider-verify>
+  </view>
 </template>
 
 <script>
-import { isValidPhone, isValidPassword } from '@/utils/index'
+import { isValidPhone, isValidPassword } from "@/utils/index";
 export default {
-	data() {
-		return {
-			isViewPassword: false,
-			isCode: false,//验证码按钮状态
-			tips: '',// 验证码提示文字
-			seconds: 60,//验证码秒数
-			loginParam: {
-				phone: undefined,
-				password: undefined,
-				code: undefined,
-				loginWay: 'password'
-			},
-		}
-	},
-	computed: {
-		isShowCode() {
-			return this.loginParam.phone && !this.isCode
-		}
-
-	},
-	watch: {
-
-	},
-	onLoad() {
-
-	},
-	methods: {
-		//显示验证组件
-		sliderVerify() {
-			if(isValidPhone(this.loginParam.phone)) {
-				this.$refs['sliderVerify'].show()
-			} else {
-				uni.$u.toast('请输入正确手机号');
-			}
-		},
-		//验证通过回调
-		successHandle(e) {
-			console.log(e)
-			this.getCode()
-		},
-		//验证失败回调
-		errorHandle(e) {
-			console.log(e)
-		},
-		//组件关闭回调
-		closeHandle(e) {
-			console.log(e)
-		},
-		codeChange(text) {
-			this.tips = text;
-		},
-		getCode() {
-			if (this.$refs.uCode.canGetCode) {
-				// 模拟向后端请求验证码
-				uni.showLoading({
-					title: '正在获取验证码'
-				})
-				setTimeout(() => {
-					uni.hideLoading();
-					// 这里此提示会被this.start()方法中的提示覆盖
-					uni.$u.toast('验证码已发送');
-					// 通知验证码组件内部开始倒计时
-					this.$refs.uCode.start();
-				}, 2000);
-			} else {
-				uni.$u.toast('倒计时结束后再发送');
-			}
-		},
-		end() {
-			// uni.$u.toast('倒计时结束');
-			this.isCode = false
-		},
-		start() {
-			// uni.$u.toast('倒计时开始');
-			this.isCode = true
-		},
-		submit() {
-			console.log('提交参数 :===>>', this.loginParam);
-			//todo 请求后端接口 
-			// 通过后跳转到个人中心
-			this.$navTo('/pages/my/index','redirect')
-		}
-	}
-}
+  data() {
+    return {
+      isViewPassword: false,
+      isCode: false, //验证码按钮状态
+      tips: "", // 验证码提示文字
+      seconds: 60, //验证码秒数
+      loginParam: {
+        phone: undefined,
+        password: undefined,
+        code: undefined,
+        loginWay: "password",
+      },
+    };
+  },
+  computed: {
+    isShowCode() {
+      return this.loginParam.phone && !this.isCode;
+    },
+  },
+  watch: {},
+  onLoad() {},
+  methods: {
+    //显示验证组件
+    sliderVerify() {
+      if (isValidPhone(this.loginParam.phone)) {
+        this.$refs["sliderVerify"].show();
+      } else {
+        uni.$u.toast("请输入正确手机号");
+      }
+    },
+    //验证通过回调
+    successHandle(e) {
+      console.log(e);
+      this.getCode();
+    },
+    //验证失败回调
+    errorHandle(e) {
+      console.log(e);
+    },
+    //组件关闭回调
+    closeHandle(e) {
+      console.log(e);
+    },
+    codeChange(text) {
+      this.tips = text;
+    },
+    getCode() {
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: "正在获取验证码",
+        });
+        setTimeout(() => {
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          uni.$u.toast("验证码已发送");
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start();
+        }, 2000);
+      } else {
+        uni.$u.toast("倒计时结束后再发送");
+      }
+    },
+    end() {
+      // uni.$u.toast('倒计时结束');
+      this.isCode = false;
+    },
+    start() {
+      // uni.$u.toast('倒计时开始');
+      this.isCode = true;
+    },
+    submit() {
+      console.log("提交参数 :===>>", this.loginParam);
+      //todo 请求后端接口
+      // 通过后跳转到个人中心
+      this.$navTo("/pages/my/index", "redirect");
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .content {
-	width: 100vw;
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	position: relative;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
 
 .top_bg {
-	position: relative;
-	width: 100vw;
-	height: 568rpx;
-	flex-shrink: 0;
-	background: linear-gradient(to bottom, #ffd8bf, #ffffff);
-
-	.top_close {
-		position: absolute;
-		top: 128rpx;
-		left: 40rpx;
-		width: 48rpx;
-		height: 48rpx;
-	}
-
-	.top_text {
-		position: absolute;
-		top: 224rpx;
-		left: 64rpx;
-		display: flex;
-		color: #070602;
-		font-family: "MiSans VF";
-		font-size: 52rpx;
-		font-style: normal;
-		font-weight: 600;
-		line-height: normal;
-		letter-spacing: 0.66rpx;
-		text-transform: uppercase;
-	}
-
-	.top_icon {
-		margin-top: -10rpx;
-		margin-left: 8rpx;
-		width: 24rpx;
-		height: 24rpx;
-	}
+  position: relative;
+  width: 100vw;
+  height: 568rpx;
+  flex-shrink: 0;
+  background: linear-gradient(to bottom, #ffd8bf, #ffffff);
+
+  .top_close {
+    position: absolute;
+    top: 128rpx;
+    left: 40rpx;
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  .top_text {
+    position: absolute;
+    top: 224rpx;
+    left: 64rpx;
+    display: flex;
+    color: #070602;
+    font-family: "MiSans VF";
+    font-size: 52rpx;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: 0.66rpx;
+    text-transform: uppercase;
+  }
+
+  .top_icon {
+    margin-top: -10rpx;
+    margin-left: 8rpx;
+    width: 24rpx;
+    height: 24rpx;
+  }
 }
 
 .main {
-	margin-top: -72rpx;
-
-	.login {
-		margin-top: 136rpx;
-		height: 96rpx;
-		width: 100%;
-		flex-shrink: 0;
-		border-radius: 64rpx;
-		background: #FE6505;
-		color: #ffffff;
-		text-align: center;
-		font-family: "MiSans VF";
-		font-size: 36rpx;
-		font-style: normal;
-		font-weight: 500;
-	}
-
-	.code_btn {
-		padding: 0rpx 24rpx;
-		height: 60rpx;
-		border-radius: 32rpx;
-		font-size: 24rpx;
-		color: #fff;
-		font-weight: 400;
-		background: linear-gradient(0deg, #FE6505 0%, #FE6505 100%), #141111;
-	}
-
-	.code_btn_off {
-		background: #fe65054d;
-	}
+  margin-top: -72rpx;
+
+  .login {
+    margin-top: 136rpx;
+    height: 96rpx;
+    width: 100%;
+    flex-shrink: 0;
+    border-radius: 64rpx;
+    background: #fe6505;
+    color: #ffffff;
+    text-align: center;
+    font-family: "MiSans VF";
+    font-size: 36rpx;
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  .code_btn {
+    padding: 0rpx 24rpx;
+    height: 60rpx;
+    border-radius: 32rpx;
+    font-size: 24rpx;
+    color: #fff;
+    font-weight: 400;
+    background: linear-gradient(0deg, #fe6505 0%, #fe6505 100%), #141111;
+  }
+
+  .code_btn_off {
+    background: #fe65054d;
+  }
 }
 </style>

pages/login/register.vue

@@ -1,235 +1,350 @@
 <template>
-	<view class="content">
-		<view class="top_bg">
-			<image class="top_close" @click="$navBack()" src="/static/image/login/close_icon.png" mode="scaleToFill" />
-			<view class="top_text">
-				<view>注册众酬帮</view>
-				<image
-					class="top_icon"
-					src="/static//image/login/dot_icon.png"
-					mode="scaleToFill"
-				/>
-			</view>
-		</view>
-
-		<view class="w pdx-40 main">
-			<u--input class="h-112" v-model="loginParam.inviteCode" placeholder="请输入邀请码" border="bottom"
-				clearable></u--input>
-			<u--input class="h-112" v-model="loginParam.phone" placeholder="请输入手机号码" border="bottom"
-				clearable></u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.code" placeholder="请输入验证码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-code :seconds="seconds" @end="end" @start="start" change-text="xs" ref="uCode"
-						:keep-running="true" @change="codeChange"></u-code>
-					<u-button :disabled="!isShowCode" @tap="sliderVerify" class="code_btn">{{ tips }}</u-button>
-				</template>
-			</u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.password" :password="!isViewPassword" placeholder="请输入密码"
-				border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewPassword = !isViewPassword" :name="isViewPassword ? 'eye-fill' : 'eye-off'"
-						color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.confirmPwd" :password="!isViewConfirmPwd"
-				placeholder="请确认密码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewConfirmPwd = !isViewConfirmPwd"
-						:name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'" color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-
-			<u-button :disabled="!isSubmit" class="login" @tap="submit">提交</u-button>
-
-			<view class="mgt-48 text-24 text-7E7E7E text-500">
-				登录即代表同意
-				<text class="text-303030">《用户协议》</text>和
-				<text class="text-303030">《隐私政策》</text>
-			</view>
-		</view>
-		<zmm-slider-verify ref="sliderVerify" @success="successHandle" @error="errorHandle"
-			@close="closeHandle"></zmm-slider-verify>
-	</view>
+  <view class="content">
+    <view class="top_bg">
+      <image
+        class="top_close"
+        @click="$navBack()"
+        src="/static/image/login/close_icon.png"
+        mode="scaleToFill"
+      />
+      <view class="top_text">
+        <view>注册众酬帮</view>
+        <image
+          class="top_icon"
+          src="/static//image/login/dot_icon.png"
+          mode="scaleToFill"
+        />
+      </view>
+    </view>
+
+    <view class="w pdx-40 main">
+      <u--input
+        class="h-112"
+        v-model="loginParam.inviteCode"
+        placeholder="请输入邀请码"
+        border="bottom"
+        clearable
+      ></u--input>
+
+      <u--input
+        class="h-112"
+        v-model="loginParam.phone"
+        placeholder="请输入手机号码"
+        border="bottom"
+        clearable
+      ></u--input>
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.code"
+        placeholder="请输入验证码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.code"
+          placeholder="请输入验证码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-code
+              :seconds="seconds"
+              @end="end"
+              @start="start"
+              change-text="xs"
+              ref="uCode"
+              :keep-running="true"
+              @change="codeChange"
+            ></u-code>
+            <u-button
+              :disabled="!isShowCode"
+              @tap="sliderVerify"
+              class="code_btn"
+              >{{ tips }}</u-button
+            >
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.password"
+        :password="!isViewPassword"
+        placeholder="请输入密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.password"
+          :password="!isViewPassword"
+          placeholder="请输入密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewPassword = !isViewPassword"
+              :name="isViewPassword ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.confirmPwd"
+        :password="!isViewConfirmPwd"
+        placeholder="请确认密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.confirmPwd"
+          :password="!isViewConfirmPwd"
+          placeholder="请确认密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewConfirmPwd = !isViewConfirmPwd"
+              :name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <u-button :disabled="!isSubmit" class="login" @tap="submit"
+        >提交</u-button
+      >
+
+      <view class="mgt-48 text-24 text-7E7E7E text-500">
+        登录即代表同意
+        <text class="text-303030">《用户协议》</text>和
+        <text class="text-303030">《隐私政策》</text>
+      </view>
+    </view>
+    <zmm-slider-verify
+      ref="sliderVerify"
+      @success="successHandle"
+      @error="errorHandle"
+      @close="closeHandle"
+    ></zmm-slider-verify>
+  </view>
 </template>
 
 <script>
-import { isValidPhone, isValidPassword } from '@/utils/index'
+import { isValidPhone, isValidPassword } from "@/utils/index";
 export default {
-	data() {
-		return {
-			isViewPassword: false,
-			isViewConfirmPwd: false,
-			isCode: false,//验证码按钮状态
-			tips: '',// 验证码提示文字
-			seconds: 60,//验证码秒数
-			loginParam: {
-				inviteCode: undefined,
-				phone: undefined,
-				code: undefined,
-				password: undefined,
-				confirmPwd: undefined,
-			},
-		}
-	},
-	computed: {
-		isShowCode() {
-			return this.loginParam.phone && !this.isCode
-		},
-		isSubmit() {
-			return this.loginParam.phone && this.loginParam.code &&
-				this.loginParam.password && this.loginParam.confirmPwd
-		}
-
-	},
-	watch: {
-
-	},
-	onLoad() {
-
-	},
-	methods: {
-		//显示验证组件
-		sliderVerify() {
-			if(isValidPhone(this.loginParam.phone)) {
-				this.$refs['sliderVerify'].show()
-			} else {
-				uni.$u.toast('请输入正确手机号');
-			}
-		},
-		//验证通过回调
-		successHandle(e) {
-			console.log(e)
-			this.getCode()
-		},
-		//验证失败回调
-		errorHandle(e) {
-			console.log(e)
-		},
-		//组件关闭回调
-		closeHandle(e) {
-			console.log(e)
-		},
-		codeChange(text) {
-			this.tips = text;
-		},
-		getCode() {
-			if (this.$refs.uCode.canGetCode) {
-				// 模拟向后端请求验证码
-				uni.showLoading({
-					title: '正在获取验证码'
-				})
-				setTimeout(() => {
-					uni.hideLoading();
-					// 这里此提示会被this.start()方法中的提示覆盖
-					uni.$u.toast('验证码已发送');
-					// 通知验证码组件内部开始倒计时
-					this.$refs.uCode.start();
-				}, 2000);
-			} else {
-				uni.$u.toast('倒计时结束后再发送');
-			}
-		},
-		end() {
-			// uni.$u.toast('倒计时结束');
-			this.isCode = false
-		},
-		start() {
-			// uni.$u.toast('倒计时开始');
-			this.isCode = true
-		},
-		submit() {
-			if(isValidPhone(this.loginParam.phone)) return uni.$u.toast('请输入正确手机号');
-			if(isValidPassword(this.loginParam.password)) {
-				if(this.loginParam.password !== this.loginParam.confirmPwd) return uni.$u.toast('两次输入的密码不一致');
-				console.log('提交参数 :===>>', this.loginParam);
-				//todo 请求后端接口 
-
-				// 通过后跳转到个人中心
-				this.$navTo('/pages/my/index','redirect')
-			}
-		}
-	}
-}
+  data() {
+    return {
+      isViewPassword: false,
+      isViewConfirmPwd: false,
+      isCode: false, //验证码按钮状态
+      tips: "", // 验证码提示文字
+      seconds: 60, //验证码秒数
+      loginParam: {
+        inviteCode: undefined,
+        phone: undefined,
+        code: undefined,
+        password: undefined,
+        confirmPwd: undefined,
+      },
+    };
+  },
+  computed: {
+    isShowCode() {
+      return this.loginParam.phone && !this.isCode;
+    },
+    isSubmit() {
+      return (
+        this.loginParam.phone &&
+        this.loginParam.code &&
+        this.loginParam.password &&
+        this.loginParam.confirmPwd
+      );
+    },
+  },
+  watch: {},
+  onLoad() {},
+  methods: {
+    //显示验证组件
+    sliderVerify() {
+      if (isValidPhone(this.loginParam.phone)) {
+        this.$refs["sliderVerify"].show();
+      } else {
+        uni.$u.toast("请输入正确手机号");
+      }
+    },
+    //验证通过回调
+    successHandle(e) {
+      console.log(e);
+      this.getCode();
+    },
+    //验证失败回调
+    errorHandle(e) {
+      console.log(e);
+    },
+    //组件关闭回调
+    closeHandle(e) {
+      console.log(e);
+    },
+    codeChange(text) {
+      this.tips = text;
+    },
+    getCode() {
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: "正在获取验证码",
+        });
+        setTimeout(() => {
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          uni.$u.toast("验证码已发送");
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start();
+        }, 2000);
+      } else {
+        uni.$u.toast("倒计时结束后再发送");
+      }
+    },
+    end() {
+      // uni.$u.toast('倒计时结束');
+      this.isCode = false;
+    },
+    start() {
+      // uni.$u.toast('倒计时开始');
+      this.isCode = true;
+    },
+    submit() {
+      if (isValidPhone(this.loginParam.phone))
+        return uni.$u.toast("请输入正确手机号");
+      if (isValidPassword(this.loginParam.password)) {
+        if (this.loginParam.password !== this.loginParam.confirmPwd)
+          return uni.$u.toast("两次输入的密码不一致");
+        console.log("提交参数 :===>>", this.loginParam);
+        //todo 请求后端接口
+
+        // 通过后跳转到个人中心
+        this.$navTo("/pages/my/index", "redirect");
+      }
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .content {
-	width: 100vw;
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	position: relative;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
 
 .top_bg {
-	position: relative;
-	width: 100vw;
-	height: 568rpx;
-	flex-shrink: 0;
-	background: linear-gradient(to bottom, #ffd8bf, #ffffff);
-
-	.top_close {
-		position: absolute;
-		top: 128rpx;
-		left: 40rpx;
-		width: 48rpx;
-		height: 48rpx;
-	}
-
-	.top_text {
-		position: absolute;
-		top: 224rpx;
-		left: 64rpx;
-		display: flex;
-		color: #070602;
-		font-family: "MiSans VF";
-		font-size: 52rpx;
-		font-style: normal;
-		font-weight: 600;
-		line-height: normal;
-		letter-spacing: 0.66rpx;
-		text-transform: uppercase;
-	}
-
-	.top_icon {
-		margin-top: -10rpx;
-		margin-left: 8rpx;
-		width: 24rpx;
-		height: 24rpx;
-	}
+  position: relative;
+  width: 100vw;
+  height: 568rpx;
+  flex-shrink: 0;
+  background: linear-gradient(to bottom, #ffd8bf, #ffffff);
+
+  .top_close {
+    position: absolute;
+    top: 128rpx;
+    left: 40rpx;
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  .top_text {
+    position: absolute;
+    top: 224rpx;
+    left: 64rpx;
+    display: flex;
+    color: #070602;
+    font-family: "MiSans VF";
+    font-size: 52rpx;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: 0.66rpx;
+    text-transform: uppercase;
+  }
+
+  .top_icon {
+    margin-top: -10rpx;
+    margin-left: 8rpx;
+    width: 24rpx;
+    height: 24rpx;
+  }
 }
 
 .main {
-	margin-top: -72rpx;
-
-	.login {
-		margin-top: 112rpx;
-		height: 96rpx;
-		width: 100%;
-		flex-shrink: 0;
-		border-radius: 64rpx;
-		background: #FE6505;
-		color: #ffffff;
-		text-align: center;
-		font-family: "MiSans VF";
-		font-size: 36rpx;
-		font-style: normal;
-		font-weight: 500;
-	}
-
-	.code_btn {
-		padding: 0rpx 24rpx;
-		height: 60rpx;
-		border-radius: 32rpx;
-		font-size: 24rpx;
-		color: #fff;
-		font-weight: 400;
-		background: linear-gradient(0deg, #FE6505 0%, #FE6505 100%), #141111;
-	}
-
-	.code_btn_off {
-		background: #fe65054d;
-	}
+  margin-top: -72rpx;
+
+  .login {
+    margin-top: 112rpx;
+    height: 96rpx;
+    width: 100%;
+    flex-shrink: 0;
+    border-radius: 64rpx;
+    background: #fe6505;
+    color: #ffffff;
+    text-align: center;
+    font-family: "MiSans VF";
+    font-size: 36rpx;
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  .code_btn {
+    padding: 0rpx 24rpx;
+    height: 60rpx;
+    border-radius: 32rpx;
+    font-size: 24rpx;
+    color: #fff;
+    font-weight: 400;
+    background: linear-gradient(0deg, #fe6505 0%, #fe6505 100%), #141111;
+  }
+
+  .code_btn_off {
+    background: #fe65054d;
+  }
 }
 </style>

pages/my/index.vue

@@ -4,29 +4,45 @@
       <view class="head" @click="$navTo('/pages/personalProfile/index')">
         <view class="flex fd_c">
           <view class="text-36 text-070202 text-500">用户名称用户名称</view>
-          <image class="vip_icon" src="/static/logo.png"></image>
+          <view class="vip_year_bg"> lv.1年 </view>
+          <!-- <view class="vip_bg">普通会员</view> -->
         </view>
-        <image class="image" src="/static/logo.png"></image>
+        <!-- 
+          未登录时头像
+          /static/image/my/no_login_avatar.png 
+        -->
+        <image
+          class="image"
+          src="/static/image/my/my_default_avatar.png"
+        ></image>
       </view>
 
       <view class="info">
-        <view class="info_item">
-          <view class="text-40 text-400 text-070202">1322</view>
+        <view class="info_item" @click="$navTo('/pages/myTakeOrder/index')">
+          <view class="text-40 text-400 text-070202">
+            {{ tagList.takeOrders || 0 }}
+          </view>
           <view class="text-24 text-500 text-C8C9C6 mgt-8">我的接单</view>
         </view>
         <view class="line"></view>
-        <view class="info_item">
-          <view class="text-40 text-400 text-070202">322</view>
+        <view class="info_item" @click="$navTo('/pages/myBounty/index')">
+          <view class="text-40 text-400 text-070202">
+            {{ tagList.myBounty || 0 }}
+          </view>
           <view class="text-24 text-500 text-C8C9C6 mgt-8">我的悬赏</view>
         </view>
         <view class="line"></view>
-        <view class="info_item">
-          <view class="text-40 text-400 text-070202">32</view>
+        <view class="info_item" @click="$navTo('/pages/activateVIP/index')">
+          <view class="text-40 text-400 text-070202">
+            {{ tagList.myVip || 0 }}
+          </view>
           <view class="text-24 text-500 text-C8C9C6 mgt-8">开通会员</view>
         </view>
         <view class="line"></view>
-        <view class="info_item">
-          <view class="text-40 text-400 text-070202">22</view>
+        <view class="info_item" @click="$navTo('/pages/inviteFriends/index')">
+          <view class="text-40 text-400 text-070202">
+            {{ tagList.invite || 0 }}
+          </view>
           <view class="text-24 text-500 text-C8C9C6 mgt-8">邀请好友</view>
         </view>
       </view>
@@ -46,12 +62,38 @@
       </view>
     </view>
 
-    <image class="radio-16 h-128 w mgt-24" src="/static/logo.png"></image>
-    <image class="radio-16 h-144 w mgt-24" src="/static/logo.png"></image>
+    <view class="new_hand">
+      <view class="top">
+        <view class="flex ai_center">
+          <view class="lv">V1</view>
+          <view class="mgl-12 text-white text-24 text-400">新手上路</view>
+        </view>
+        <view class="btn"> 查看攻略 </view>
+      </view>
+      <view class="bottom">
+        <view class="progress_bg flex1">
+          <view
+            class="progress_bar"
+            :style="{
+              width: `${progressBar * 100}%`,
+              borderRadius: progressBar === 1 ? '64rpx' : '64rpx 0 0 64rpx',
+            }"
+          ></view>
+        </view>
+        <view class="mgl-16 text-18 text-400 text-white"
+          >等级越高赚钱越多
+        </view>
+      </view>
+    </view>
+
+    <image
+      class="radio-16 h-144 w mgt-24"
+      src="/static/image/my/post_reward.png"
+    ></image>
 
     <view class="w mgt-24 pdb-30">
       <view
-        class="w h-96 flex jc_between ai_center mgt-8 menu_item"
+        class="w h-96 flex jc_between ai_center mgt-8 border-bottom-F2F2F7"
         v-for="item in menuList"
         :key="item.name"
         @click="$navTo(item.pagePath)"
@@ -61,9 +103,15 @@
           <view class="mgl-20 text-28 text-400 text-303030">
             {{ item.name }}
           </view>
-          <view v-if="item.name === '我的消息'" class="badge">99+</view>
+          <view v-if="item.badge" class="badge">{{
+            badgeNum(item.badge)
+          }}</view>
         </view>
-        <image class="w-48 h-48" src="/static/logo.png" mode="scaleToFill" />
+        <image
+          class="w-48 h-48"
+          src="/static/image/common/right_arrow_icon.png"
+          mode="scaleToFill"
+        />
       </view>
     </view>
   </view>
@@ -74,64 +122,57 @@ export default {
   data() {
     return {
       title: "我的",
-      tagList: [
-        {
-          icon: "/static/logo.png",
-          name: "我的接单",
-          pagePath: "/pages/myTakeOrder/index",
-        },
-        {
-          icon: "/static/logo.png",
-          name: "我的悬赏",
-          pagePath: "/pages/myBounty/index",
-        },
-        {
-          icon: "/static/logo.png",
-          name: "开通会员",
-          pagePath: "/pages/activateVIP/index",
-        },
-        {
-          icon: "/static/logo.png",
-          name: "邀请好友",
-          pagePath: "/pages/inviteFriends/index",
-        },
-      ],
+      progressBar: 0.2, //新手上路 进度条%
+      tagList: {
+        takeOrders: 1322, //我的接单
+        myBounty: 322, //我的悬赏
+        myVip: 32, //开通会员
+        invite: 22, //邀请好友
+      },
+
       menuList: [
         {
-          icon: "/static/logo.png",
+          icon: "/static/image/my/tools_icon.png",
           name: "我的工具包",
           pagePath: "/pages/myTools/index",
         },
         {
-          icon: "/static/logo.png",
+          icon: "/static/image/my/message_icon.png",
           name: "我的消息",
           pagePath: "/pages/myMessage/index",
+          badge: 100,
         },
         {
-          icon: "/static/logo.png",
+          icon: "/static/image/my/safeguard_rights_icon.png",
           name: "维权",
           pagePath: "/pages/safeguardRights/index",
         },
         {
-          icon: "/static/logo.png",
+          icon: "/static/image/my/earnings_icon.png",
           name: "收益统计",
           pagePath: "/pages/statisticsEarnings/index",
         },
         {
-          icon: "/static/logo.png",
+          icon: "/static/image/my/shop_icon.png",
           name: "我的店铺",
           pagePath: "/pages/myShop/index",
+          badge: 10,
         },
         {
-          icon: "/static/logo.png",
+          icon: "/static/image/my/setting_icon.png",
           name: "系统设置",
           pagePath: "/pages/setting/index",
         },
       ],
     };
   },
+  computed: {},
   onLoad() {},
-  methods: {},
+  methods: {
+    badgeNum(num) {
+      return num > 99 ? "99+" : num;
+    },
+  },
 };
 </script>
 
@@ -147,8 +188,8 @@ export default {
   width: 100vw;
   height: 568rpx;
   flex-shrink: 0;
-//   background: linear-gradient(to bottom, #ffd8bf, #ffffff);
-  background:  linear-gradient(180deg, #ffd8bf 10%, #fff 65%);
+  //   background: linear-gradient(to bottom, #ffd8bf, #ffffff);
+  background: linear-gradient(180deg, #ffd8bf 10%, #fff 65%);
 
   .head {
     margin-top: 134rpx;
@@ -228,10 +269,6 @@ export default {
   }
 }
 
-.menu_item {
-  border-bottom: 2rpx solid #f2f2f7;
-}
-
 .badge {
   display: inline-flex;
   height: 40rpx;
@@ -250,4 +287,106 @@ export default {
   left: 188rpx;
   top: -20rpx;
 }
+
+.vip_year_bg {
+  margin-top: 16rpx;
+  width: 112rpx;
+  height: 44rpx;
+  background: url("/static//image/my/vip_year_bg.png");
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+  font-family: "MiSans VF";
+  font-size: 22rpx;
+  font-weight: 500;
+  letter-spacing: 0.66rpx;
+  padding-left: 42rpx;
+}
+
+.vip_bg {
+  margin-top: 16rpx;
+  width: 144rpx;
+  height: 48rpx;
+  line-height: 40rpx;
+  background: url("/static//image/my/vip_bg.png");
+  background-size: cover;
+  padding-left: 42rpx;
+  color: #ffffff;
+  font-family: "MiSans VF";
+  font-size: 22rpx;
+  font-weight: 500;
+  letter-spacing: -0.66rpx;
+}
+
+.new_hand {
+  margin-top: 24rpx;
+  width: 100%;
+  height: 128rpx;
+  background: url("/static//image/my/new_hand_bg.png");
+  background-size: cover;
+  padding-top: 24rpx;
+  padding-left: 22rpx;
+
+  .top {
+    height: 48rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .lv {
+      width: 68rpx;
+      height: 38rpx;
+      background: url("/static//image/my/grade_bg.png");
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      font-size: 14rpx;
+      color: #fff;
+      padding-left: 24rpx;
+    }
+
+    .btn {
+      width: 132rpx;
+      height: 48rpx;
+      line-height: 48rpx;
+      flex-shrink: 0;
+      border-radius: 24rpx 0 0 24rpx;
+      background: linear-gradient(90deg, #ffffffcc 0%, #ffffff66 100%);
+      box-shadow: 0 8rpx 24rpx 0 #d07b1780;
+
+      color: #cc730d;
+      text-align: center;
+      font-family: "Source Han Sans CN";
+      font-size: 24rpx;
+      font-weight: 400;
+    }
+  }
+
+  .bottom {
+    display: flex;
+    align-items: center;
+    margin-top: 14rpx;
+
+    .progress_bg {
+      height: 12rpx;
+      flex-shrink: 0;
+      border-radius: 64rpx;
+      background: #ffcc91;
+    }
+
+    .progress_bar {
+      // width: 62rpx;
+      width: 0;
+      height: 12rpx;
+      // flex-shrink: 0;
+      border-radius: 64rpx 0 0 64rpx;
+      background: #cc730d;
+    }
+
+    .full_bar {
+      border-radius: 64rpx;
+    }
+  }
+}
 </style>

pages/myMessage/chat.vue

@@ -5,7 +5,7 @@
         @click="$navBack()"
         class="w-48 h-48 abs_left"
         style="left: 32rpx"
-         src="/static/image/common/left_arrow_icon.png"
+        src="/static/image/common/left_arrow_icon.png"
         mode="scaleToFill"
       />
       <view class="text-36 text-500 text-070202">用户昵称123</view>
@@ -61,16 +61,39 @@
       </view>
     </view>
 
-    <view class="input_box">
-      <u--input class="input" placeholder="请输入消息内容">
-        <template slot="suffix">
-          <image
-            class="w-48 h-48 radio-circle"
-            src="/static/image/my/emoji_icon.png"
-            mode="scaleToFill"
-          />
-        </template>
-      </u--input>
+    <view class="input_box" :style="{ bottom: bottomVal }">
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="input"
+        placeholder="请输入消息内容"
+        :adjustPosition="false"
+        @focus="inputBindFocus"
+        @blur="inputBindBlur"
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="input"
+          placeholder="请输入消息内容"
+          :adjustPosition="false"
+          @focus="inputBindFocus"
+          @blur="inputBindBlur"
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <image
+              class="w-48 h-48 radio-circle"
+              src="/static/image/my/emoji_icon.png"
+              mode="scaleToFill"
+            />
+          </template>
+
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
     </view>
   </view>
 </template>
@@ -78,10 +101,33 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      bottomVal: "",
+    };
   },
   onLoad() {},
-  methods: {},
+  onReady() {
+    uni.onKeyboardHeightChange((res) => {
+      this.bottomVal = res.height + "px";
+      console.log("监听到键盘高度：", res.height);
+    });
+  },
+  methods: {
+    inputBindFocus(e) {
+      // 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值
+      // 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 px
+      // this.$emit("changeBottomVal", e.detail.height + "px");
+      // console.log("e :===>>", e);
+      // this.bottomVal = e.detail.height + "px";
+      // console.log(" inputBindFocus:===>>", this.bottomVal);
+    },
+    inputBindBlur() {
+      // input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0
+      // this.$emit("changeBottomVal", 0);
+      this.bottomVal = 0;
+      console.log(" inputBindBlur:===>>", this.bottomVal);
+    },
+  },
 };
 </script>
 
@@ -133,11 +179,14 @@ export default {
 }
 
 .input_box {
-  width: 100vw;
-  padding: 0 32rpx;
-  padding-top: 16rpx;
-  padding-bottom: 84rpx;
-  background-color: #fff;
+  position: absolute; // input 所在盒子设置绝对定位
+  flex-shrink: 0;
+  width: 100%;
+  left: 0;
+  bottom: 0; // 默认 0
+  z-index: 199;
+  padding: 16rpx 32rpx calc(env(safe-area-inset-bottom) + 24rpx);
+  background: #ffffff;
   box-shadow: 0 -12rpx 24rpx 0 #0000000a;
 
   .input {

static/css/fui.css

@@ -492,6 +492,9 @@ image {
 .text-70 {
 	font-size: 70rpx;
 }
+.text-88 {
+	font-size: 88rpx;
+}
 
 .text-underline {
 	text-decoration: underline;

utils/index.js

@@ -56,4 +56,35 @@ export function isValidPassword(password) {
 	}
 
 	return true;
-}
+}
+
+/**
+ * 手机号脱敏
+ * @param {*} phone 手机号
+ * @returns 
+ */
+export function phonePrivacy(phone) {
+	if (phone) {
+		return String(phone).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+	} else {
+		return '';
+	}
+}
+
+/**
+ * 安全区距离
+ * @returns 顶部和底部安全距离
+ */
+export function getSafeArea() {
+	const info = uni.getSystemInfoSync()
+  
+	// 顶部安全距离（状态栏高度）
+	const top = info.statusBarHeight || 0
+  
+	// 底部安全距离（iOS 刘海屏有值，安卓一般为 0）
+	const bottom = info.safeArea
+	  ? info.screenHeight - info.safeArea.bottom
+	  : 0
+  
+	return { top, bottom }
+  }