From 877c92743693f645bbf86cfbfe8d28c7f1196575 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期二, 03 六月 2025 20:34:18 +0800 Subject: [PATCH] 视频主页-个人信息修改 --- pages/video/home-page-edit.vue | 278 ++++++++++++++++++++++++++++++++++++++++++++++ pages/tabbar/video/video.vue | 12 +- pages.json | 7 + api/user.js | 14 ++ pages/video/video-play.vue | 3 pages/video/home-page.vue | 26 +-- 6 files changed, 319 insertions(+), 21 deletions(-) diff --git a/api/user.js b/api/user.js index 5dc926a..627e334 100644 --- a/api/user.js +++ b/api/user.js @@ -49,3 +49,17 @@ }); } +/** + * 淇濆瓨瑙嗛涓婚〉淇℃伅缂栬緫 + * + * @param params + */ + export function saveVideoHomeInfo(data) { + return http.request({ + url: "/lmk/video/home-page-info-edit", + method: Method.POST, + needToken: true, + data: data + }); +} + diff --git a/pages.json b/pages.json index b16de38..9bbcf07 100644 --- a/pages.json +++ b/pages.json @@ -813,6 +813,13 @@ { "navigationBarTitleText" : "" } + }, + { + "path" : "home-page-edit", + "style" : + { + "navigationBarTitleText" : "涓婚〉淇℃伅淇敼" + } } ] }, diff --git a/pages/tabbar/video/video.vue b/pages/tabbar/video/video.vue index 103a3ff..cc04f4e 100644 --- a/pages/tabbar/video/video.vue +++ b/pages/tabbar/video/video.vue @@ -20,7 +20,7 @@ </view> <view class="video-actions"> <u-button type="error" size="mini" @click="reUpload">閲嶆柊涓婁紶</u-button> - <u-button type="primary" size="mini" @click="chooseCover" v-if="videoInfo.url">閫夋嫨灏侀潰</u-button> + <u-button type="primary" size="mini" @click="chooseCover" v-if="videoInfo.url">{{formData.cover ? '鏇存崲灏侀潰' : '璇烽�夋嫨灏侀潰'}}</u-button> </view> </view> </view> @@ -57,7 +57,7 @@ :key="index" :text="tag.tagName" :index="index" - type="error" + type="success" @close="removeTag(index)" /> </view> @@ -74,7 +74,7 @@ :key="index" :text="tag.tagName" :index="index" - type="primary" + type="success" :closeable="false" @click="selectTopic(index)" /> @@ -178,7 +178,8 @@ import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue'; import USearch from '@/uview-components/uview-ui/components/u-search/u-search.vue'; import UPopup from '@/uview-components/uview-ui/components/u-popup/u-popup.vue'; -import MyTag from "@/components/my-tag.vue" +import MyTag from '@/components/my-tag.vue' + import { getSTSToken, getFilePreviewUrl } from "@/api/common.js"; import { publish } from "@/api/video.js"; import { getRecommendTag3 } from "@/api/video-tag.js"; @@ -239,7 +240,7 @@ }, computed: { canPublish() { - return this.formData.videoFileKey && this.formData.title; + return this.formData.videoFileKey && this.formData.title && this.formData.cover; }, filteredGoods() { if (!this.goodsSearch) return this.goodsList; @@ -272,7 +273,6 @@ }, // 鍒濆鍖栬吘璁簯cos瀹㈡埛绔� initCOS() { - console.log("鎵ц浜�"); // 璋冪敤鍚庣鑾峰彇sts涓存椂璁块棶鍑瘉 getSTSToken().then(res => { const COS = require('@/lib/cos-wx-sdk-v5.js'); // 寮�鍙戞椂浣跨敤 diff --git a/pages/video/home-page-edit.vue b/pages/video/home-page-edit.vue new file mode 100644 index 0000000..97deb45 --- /dev/null +++ b/pages/video/home-page-edit.vue @@ -0,0 +1,278 @@ +<template> + <view class="edit-profile-container"> + <!-- 澶撮儴鏍囬 --> + <view class="header"> + <text class="title">缂栬緫璧勬枡</text> + </view> + + <!-- 琛ㄥ崟鍖哄煙 --> + <view class="form-container"> + <!-- 澶村儚涓婁紶 --> + <view class="form-item"> + <text class="label">澶村儚</text> + <view class="avatar-upload" @click="chooseAvatar"> + <image class="avatar" :src="formData.avatar" mode="aspectFill"></image> + <view class="upload-tip">鐐瑰嚮淇敼</view> + </view> + </view> + + <!-- 鏄电О --> + <view class="form-item"> + <text class="label">鏄电О</text> + <input + class="input" + type="nickname" + v-model="formData.nickName" + placeholder="璇疯緭鍏ユ樀绉�" + @blur="validateNickname" + /> + </view> + + <!-- 绛惧悕 --> + <view class="form-item"> + <text class="label">绛惧悕</text> + <textarea + class="textarea" + v-model="formData.motto" + placeholder="浠嬬粛涓�涓嬭嚜宸卞惂~" + maxlength="50" + auto-height + /> + <text class="word-count">{{ formData.motto.length }}/50</text> + </view> + </view> + + <!-- 淇濆瓨鎸夐挳 --> + <view class="btn-container"> + <button + class="save-btn" + :disabled="isSaving" + @click="saveInfo" + > + {{ isSaving ? '淇濆瓨涓�...' : '淇濆瓨淇敼' }} + </button> + </view> + </view> +</template> + +<script> +import { getSTSToken, getFilePreviewUrl } from "@/api/common.js"; +import { saveVideoHomeInfo } from "@/api/user.js"; +import { getFileKey } from "@/utils/file.js"; +export default { + data() { + return { + formData: { + avatar: '', + nickName: '', + motto: '', + authorId: '' + }, + isSaving: false, + bucket: '', + region: '', + cosClient: null + } + }, + onShow() { + this.initCOS(); + }, + onLoad(option) { + this.formData.authorId = option.authorId; + this.formData.avatar = option.avatar; + this.formData.nickName = option.nickName; + this.formData.motto = option.motto ? option.motto : ''; + }, + methods: { + initCOS() { + // 璋冪敤鍚庣鑾峰彇sts涓存椂璁块棶鍑瘉 + getSTSToken().then(res => { + const COS = require('@/lib/cos-wx-sdk-v5.js'); // 寮�鍙戞椂浣跨敤 + // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 涓婄嚎鏃朵娇鐢ㄥ帇缂╁寘 + + // console.log(COS.version); sdk 鐗堟湰闇�瑕佷笉浣庝簬 1.7.2 + this.cosClient = new COS({ + SecretId: res.data.data.tmpSecretId, // sts 鏈嶅姟涓嬪彂鐨勪复鏃� secretId + SecretKey: res.data.data.tmpSecretKey, // sts 鏈嶅姟涓嬪彂鐨勪复鏃� secretKey + SecurityToken: res.data.data.sessionToken, // sts 鏈嶅姟涓嬪彂鐨勪复鏃� SessionToken + StartTime: res.data.data.stsStartTime, // 寤鸿浼犲叆鏈嶅姟绔椂闂达紝鍙伩鍏嶅鎴风鏃堕棿涓嶅噯瀵艰嚧鐨勭鍚嶉敊璇� + ExpiredTime: res.data.data.stsEndTime, // 涓存椂瀵嗛挜杩囨湡鏃堕棿 + SimpleUploadMethod: 'putObject', // 寮虹儓寤鸿锛岄珮绾т笂浼犮�佹壒閲忎笂浼犲唴閮ㄥ灏忔枃浠跺仛绠�鍗曚笂浼犳椂浣跨敤 putObject,sdk 鐗堟湰鑷冲皯闇�瑕乿1.3.0 + }); + this.bucket = res.data.data.bucket + this.region = res.data.data.region + }) + }, + // 閫夋嫨澶村儚 + chooseAvatar() { + uni.chooseImage({ + count: 1, + sizeType: ['compressed'], + sourceType: ['album', 'camera'], + success: (res) => { + const tempPath = res.tempFilePaths[0]; + // 鑾峰彇鏂囦欢鍚� + let fileName = tempPath.substring(tempPath.lastIndexOf('/') + 1); + // 澶勭悊瀹夊崜鍙兘鐨刄RI缂栫爜 + if(fileName.indexOf('%') > -1) { + fileName = decodeURIComponent(fileName); + } + const fileKey = getFileKey(fileName); + this.cosClient.uploadFile({ + Bucket: this.bucket, + Region: this.region, + Key: fileKey, + FilePath: tempPath, + SliceSize: 1024 * 1024 * 5, /* 瑙﹀彂鍒嗗潡涓婁紶鐨勯槇鍊�,5M */ + }, (err, data) => { + if (err) { + console.log('涓婁紶澶辫触', err); + this.formData.avatar = '' + uni.showToast({ + title: '鍥剧墖涓婁紶澶辫触', + icon: 'none' + }); + } else { + getFilePreviewUrl(fileKey).then(res => { + this.formData.avatar = res.data.data + }) + } + }); + }, + fail: (err) => { + console.error('閫夋嫨鍥剧墖澶辫触:', err); + uni.showToast({ + title: '閫夋嫨鍥剧墖澶辫触', + icon: 'none' + }); + } + }); + }, + // 楠岃瘉鏄电О + validateNickname() { + if (!this.formData.nickName.trim()) { + uni.showToast({ title: '鏄电О涓嶈兘涓虹┖', icon: 'none' }); + return false; + } + if (this.formData.nickName.length > 12) { + uni.showToast({ title: '鏄电О涓嶈兘瓒呰繃12涓瓧绗�', icon: 'none' }); + return false; + } + return true; + }, + + // 淇濆瓨涓汉淇℃伅 + async saveInfo() { + this.isSaving = true; + if(this.validateNickname()) { + saveVideoHomeInfo(this.formData).then(res => { + uni.showToast({ + title: '淇濆瓨鎴愬姛', + icon: 'success' + }); + // 杩斿洖涓婄骇椤甸潰 + uni.navigateBack({ + delta: 1 + }); + }) + } + } + } +} +</script> + +<style lang="scss" scoped> +.edit-profile-container { + padding: 20rpx 30rpx; + min-height: 100vh; + background-color: #f7f7f7; +} + +.header { + padding: 30rpx 0; + .title { + font-size: 36rpx; + font-weight: bold; + color: #333; + } +} + +.form-container { + background-color: #fff; + border-radius: 16rpx; + padding: 0 30rpx; + margin-bottom: 40rpx; +} + +.form-item { + padding: 30rpx 0; + border-bottom: 1rpx solid #f2f2f2; + display: flex; + flex-direction: column; + + &:last-child { + border-bottom: none; + } + + .label { + font-size: 30rpx; + color: #333; + margin-bottom: 20rpx; + } +} + +.avatar-upload { + display: flex; + align-items: center; + + .avatar { + width: 120rpx; + height: 120rpx; + border-radius: 50%; + margin-right: 30rpx; + } + + .upload-tip { + color: #999; + font-size: 26rpx; + } +} + +.input { + height: 80rpx; + font-size: 28rpx; + color: #333; +} + +.textarea { + width: 100%; + min-height: 120rpx; + font-size: 28rpx; + color: #333; + padding: 10rpx 0; +} + +.word-count { + align-self: flex-end; + font-size: 24rpx; + color: #999; + margin-top: 10rpx; +} + +.btn-container { + padding: 0 30rpx; + + .save-btn { + background-color: #07c160; + color: #fff; + border-radius: 50rpx; + font-size: 32rpx; + + &[disabled] { + background-color: #cccccc; + color: #fff; + opacity: 0.7; + } + } +} +</style> diff --git a/pages/video/home-page.vue b/pages/video/home-page.vue index 11cc980..10be23c 100644 --- a/pages/video/home-page.vue +++ b/pages/video/home-page.vue @@ -4,9 +4,6 @@ <view class="user-header"> <view class="user-avatar-container"> <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image> - <view class="edit-icon" @click="editProfile" v-if="isSelf"> - <uni-icons type="compose" size="20" color="#666"></uni-icons> - </view> </view> <view class="user-info"> <view class="user-name">{{userInfo.nickName}}</view> @@ -38,6 +35,10 @@ {{userInfo.hasSub ? '鍙栨秷鍏虫敞' : '鍏虫敞'}} </button> </view> + + <view class="edit-icon" @click="editInfo" v-if="userInfo.self"> + <uni-icons type="compose" size="20" color="#666"></uni-icons>缂栬緫涓婚〉淇℃伅 + </view> </view> <!-- 浣滃搧/鍠滄鍒囨崲 --> @@ -148,6 +149,9 @@ nomoreVideo: false, nomoreCollectVideo: false } + }, + onShow() { + this.getAuthorInfo(); }, onLoad(option) { this.authorId = option.authorId; @@ -294,9 +298,9 @@ }); }, // 缂栬緫涓汉璧勬枡 - editProfile() { + editInfo() { uni.navigateTo({ - url: '/pages/user/edit' + url: `/pages/video/home-page-edit?authorId=${this.authorId}&avatar=${this.userInfo.avatar}&motto=${this.userInfo.motto || ''}&nickName=${this.userInfo.nickName}` }); }, @@ -351,16 +355,13 @@ .edit-icon { position: absolute; - right: 0; - bottom: 0; + right: 30rpx; + top: 30rpx; background-color: #fff; - border-radius: 50%; - width: 40rpx; height: 40rpx; display: flex; justify-content: center; align-items: center; - box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); } .user-info { @@ -539,11 +540,6 @@ background-color: #f5f5f5; color: #666; } -} - -/* 濡傛灉鏄嚜宸辩殑涓婚〉锛岄殣钘忓叧娉ㄦ寜閽� */ -.user-header { - position: relative; } .video-container { diff --git a/pages/video/video-play.vue b/pages/video/video-play.vue index eddd394..d98f74e 100644 --- a/pages/video/video-play.vue +++ b/pages/video/video-play.vue @@ -246,6 +246,9 @@ onHide() { this.startHidenTime = Date.now() }, + onUnload() { + uni.removeStorageSync("playInfo"); + }, onLoad(option) { const playInfo = uni.getStorageSync("playInfo", playInfo); if(playInfo) { -- Gitblit v1.8.0