|
|
@@ -1,22 +1,288 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
+ <view class="birthday-page">
|
|
|
+ <div class="birthday-container">
|
|
|
+ <!-- 类型选择 -->
|
|
|
+ <div class="birthday-section">
|
|
|
+ <div class="section-title">类型</div>
|
|
|
+ <div class="type-buttons">
|
|
|
+ <button
|
|
|
+ class="admin-button-com middle"
|
|
|
+ :class="[lunar == 0 ? 'blue' : 'default']"
|
|
|
+ @click="lunar = 0"
|
|
|
+ >公历</button>
|
|
|
+ <button
|
|
|
+ class="admin-button-com middle"
|
|
|
+ :class="[lunar == 1 ? 'blue' : 'default']"
|
|
|
+ @click="lunar = 1"
|
|
|
+ >农历</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 月份选择 -->
|
|
|
+ <div class="birthday-section">
|
|
|
+ <div class="section-title">月份</div>
|
|
|
+ <div class="month-buttons">
|
|
|
+ <button
|
|
|
+ v-for="(month, index) in [1,2,3,4,5,6,7,8,9,10,11,12]"
|
|
|
+ :key="index"
|
|
|
+ class="month-button"
|
|
|
+ :class="{ active: birthdayMonth == month }"
|
|
|
+ @click="birthdayMonth = month"
|
|
|
+ >{{ month }}</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 日期选择 (数字按钮形式) -->
|
|
|
+ <div class="birthday-section">
|
|
|
+ <div class="section-title">日期</div>
|
|
|
+ <div class="date-buttons-container">
|
|
|
+ <!-- 使用固定高度的容器和绝对定位的滚动视图 -->
|
|
|
+ <view class="date-buttons-wrapper">
|
|
|
+ <scroll-view
|
|
|
+ scroll-y="true"
|
|
|
+ class="date-buttons-scroll"
|
|
|
+ enhanced="true"
|
|
|
+ show-scrollbar="true"
|
|
|
+ always-bounce-vertical="true"
|
|
|
+ >
|
|
|
+ <div class="date-buttons">
|
|
|
+ <button
|
|
|
+ v-for="(date, index) in dateArray"
|
|
|
+ :key="index"
|
|
|
+ class="date-button"
|
|
|
+ :class="{ active: birthdayDate == date }"
|
|
|
+ @click="birthdayDate = date"
|
|
|
+ >{{ date }}</button>
|
|
|
+ </div>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- </view>
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <div class="action-buttons">
|
|
|
+ <button class="admin-button-com middle default" @click="cancel">取消</button>
|
|
|
+ <button class="admin-button-com middle blue" @click="confirm">确认</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { modifyBirthday } from "@/api/user"
|
|
|
export default {
|
|
|
- name: 'birthday',
|
|
|
- components: {
|
|
|
- TuiListCell
|
|
|
+ name: 'birthday',
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ lunar: 0, // 0公历 1农历
|
|
|
+ birthdayMonth: '', // 选择的月份
|
|
|
+ birthdayDate: '', // 选择的日期
|
|
|
+ dateArray: Array.from({length: 31}, (_, i) => i + 1), // 1-31的数组
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ //返回上一页时刷新
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ let prevPage = pages[ pages.length - 2 ];
|
|
|
+ prevPage.$vm.pageAction = {refresh:1}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(){
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {},
|
|
|
- methods: {
|
|
|
- }
|
|
|
+ cancel() {
|
|
|
+ // 取消操作
|
|
|
+ uni.navigateBack();
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ // 确认操作
|
|
|
+ if (!this.birthdayMonth || !this.birthdayDate) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择月份和日期',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 返回选中的数据
|
|
|
+ const params = {
|
|
|
+ lunar: this.lunar,
|
|
|
+ birthdayMonth: this.birthdayMonth,
|
|
|
+ birthdayDate: this.birthdayDate
|
|
|
+ };
|
|
|
+ this.$util.confirmModal({content:'确认修改？提交后将不能再修改'},() => {
|
|
|
+ modifyBirthday(params).then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ this.$msg('已修改')
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateBack()
|
|
|
+ }, 900);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.birthday-page {
|
|
|
+ padding: 30upx;
|
|
|
+ background: #fff;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.birthday-container {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.birthday-section {
|
|
|
+ margin-bottom: 30upx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .type-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 20upx;
|
|
|
+
|
|
|
+ button {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .month-buttons {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .month-button {
|
|
|
+ width: calc(25% - 10upx);
|
|
|
+ height: 80upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border: 2upx solid #e9ecef;
|
|
|
+ border-radius: 8upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10upx;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #e8f5ff;
|
|
|
+ border-color: #3385FF;
|
|
|
+ color: #3385FF;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #e8f5ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-buttons-container {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-buttons-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 340upx; /* 固定高度，显示4行 */
|
|
|
+ background: #f8f9fa;
|
|
|
+ border: 2upx solid #e9ecef;
|
|
|
+ border-radius: 8upx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-buttons-scroll {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-buttons {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-button {
|
|
|
+ width: calc(25% - 8upx);
|
|
|
+ height: 80upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 2upx solid #e9ecef;
|
|
|
+ border-radius: 8upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #e8f5ff;
|
|
|
+ border-color: #3385FF;
|
|
|
+ color: #3385FF;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #e8f5ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons {
|
|
|
+ margin-top: 50upx;
|
|
|
+ display: flex;
|
|
|
+ gap: 20upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+
|
|
|
+ button {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 按钮基础样式 */
|
|
|
+.admin-button-com {
|
|
|
+ height: 80upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+
|
|
|
+ &.middle {
|
|
|
+ height: 80upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.default {
|
|
|
+ background: #f8f9fa;
|
|
|
+ color: #333;
|
|
|
+ border: 2upx solid #e9ecef;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ background: #3385FF;
|
|
|
+ color: #fff;
|
|
|
+ border: 2upx solid #3385FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
