新增页面

src/pages/mine/subs/profile/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <view class='content'>
+    <view class='top-card-view'>
+      <image class='bg-image' :src='assetsUrl("test_bg.png")' />
+      <image class='avatar-image' :src='assetsUrl("test_bg.png")' />
+      <text>设计小仙女</text>
+      <text>会员卡</text>
+    </view>
+
+    <view class='basic-info-view c-flex-column'>
+      <view class='c-flex-row'>
+        <text>头像</text>
+        <view class='avatar-view'>
+          <image class='avatar-image' :src='assetsUrl("test_bg.png")' />
+          <button class='avatar-btn' open-type='chooseAvatar' />
+        </view>
+      </view>
+
+      <view class='c-flex-row'>
+        <text class='nickname'>姓名</text>
+        <input placeholder='请输入姓名' type='nickname' />
+      </view>
+
+      <view class='divider' />
+      <view class='c-flex-row'>
+        <text>手机号</text>
+        <input placeholder='15523653265' />
+      </view>
+
+      <view class='divider' />
+      <view class='c-flex-row'>
+        <text>性别</text>
+        <view class='c-flex-row' @click.stop='changeGender(0)'>
+          <image class='gender-image'
+                 :src='assetsUrl(currentGender==0?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
+          <text class='gender-text'>男</text>
+        </view>
+        <view class='c-flex-row' @click.stop='changeGender(1)'>
+          <image class='gender-image'
+                 :src='assetsUrl(currentGender==1?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
+          <text class='gender-text'>女</text>
+        </view>
+      </view>
+
+      <view class='divider' />
+      <view class='c-flex-row'>
+        <text>生日</text>
+        <picker mode='date' @change='changeDate'>
+          <text>请选择生日</text>
+        </picker>
+      </view>
+    </view>
+
+    <button class='primary-button'>保存</button>
+  </view>
+</template>
+
+<script lang='ts' setup>
+import { assetsUrl } from '@/utils/assets';
+
+const currentGender = ref<number>(0);
+
+const changeGender = (index: number) => {
+  currentGender.value = index;
+};
+
+const changeDate = (e: any) => {
+  console.log(e);
+};
+
+</script>
+
+<style lang='scss' scoped>
+.top-card-view {
+  display: flex;
+  height: 338rpx;
+  position: relative;
+  margin: 30rpx;
+
+  .bg-image {
+    width: 100%;
+    height: 100%;
+    border-radius: 30rpx;
+    position: absolute;
+  }
+
+  .avatar-image {
+    width: 95rpx;
+    height: 95rpx;
+    margin-left: 36rpx;
+    margin-top: 60rpx;
+    background: #FFFFFF;
+    border: 1rpx solid #707070;
+    position: relative;
+    border-radius: 50%;
+  }
+
+  text:nth-of-type(1) {
+    font-size: 30rpx;
+    font-weight: 800;
+    color: #FFFFFF;
+    position: absolute;
+    top: 64rpx;
+    left: 158rpx;
+  }
+
+  text:nth-of-type(2) {
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #FFFFFF;
+    position: absolute;
+    top: 116rpx;
+    left: 158rpx;
+  }
+}
+
+.basic-info-view {
+  margin: 0 30rpx 30rpx 30rpx;
+
+  .avatar-view {
+    display: flex;
+    position: relative;
+
+    .avatar-image {
+      width: 110rpx;
+      height: 110rpx;
+      border-radius: 50%;
+    }
+
+    .avatar-btn {
+      @extend .avatar-image;
+      position: absolute;
+      border: none;
+      background: #00000000;
+    }
+  }
+
+  input {
+    font-size: 30rpx;
+    font-weight: 400;
+    color: #333333;
+  }
+
+  view:not(.divider):nth-of-type(n+1) {
+    padding: 0 20rpx;
+    height: 120rpx;
+
+    .gender-image {
+      width: 37rpx;
+      height: 37rpx;
+    }
+
+    .gender-text {
+      width: 80rpx;
+      color: #333333;
+      font-size: 30rpx;
+      margin-left: 10rpx;
+    }
+
+    text:not(.gender-text):nth-of-type(1) {
+      font-size: 30rpx;
+      width: 120rpx;
+      font-weight: 400;
+      color: #7E7E7E;
+    }
+
+    .nickname:before {
+      content: '*';
+      color: #F32B2B;
+    }
+  }
+}
+</style>