cyzh-SoundOfMusic-H5/pages/activityList/mine/myMusic.vue

<template>
	<view>
		<view v-if="data.cover" class="bg-img flex align-center" :style="[{backgroundImage:'url('+ data.cover +')'}]" style="height: 450upx;" @click="selectShow = true"></view>
		<view v-else class="flex justify-center align-center"  style="height: 450upx;background-color: #5a3ee8;">
			<view class="text-white" @click="chooseAvatar">
				<text class="cuIcon-add " style="font-size: 120rpx;"></text>
				<view>上传封面</view>
			</view>
		</view>
		<u-action-sheet :list="list1" @click="changeCover" v-model="selectShow"></u-action-sheet>
		<view class="head">
			<view class="cu-avatar avatar round" :style="[{backgroundImage:'url('+ data.avatar +')'}]"></view>
			<view style="margin: 0 30upx 30upx 70upx;">
				<view class="flex align-center">
					<view class="text-black text-bold text-xl padding-right">{{data.nickName}}</view>
					<image src="/static/icon-vip.png" style="width: 30upx;height: 34upx;"></image>
				</view>
				<view class="padding-tb-sm">
					
				</view>
				<view class="flex align-center">
					<view>
						<text class="text-sm">共获热力</text>
						<text class="cuIcon-hotfill padding-lr-xs"></text>
						<text class="text-lg text-bold">{{data.totalHot}}</text>
					</view>
					<view style="height: 20upx;border: #dadada 1px solid; margin: 0 30upx;"></view>
					<view>
						<text class="text-sm">总值</text>
						<text class="padding-left-xs">￥</text>
						<text class="text-lg text-bold">{{data.totalCost}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top bg-white">
			<view class="padding-sm flex justify-between align-center">
				<view class="margin-left-sm text-lg text-black text-bold">我的作品</view>
				<button class="cu-btn theme-bg-color round text-white margin-right" @click="onTap">添加作品</button>
			</view>
		</view>
		<block v-for="(item, index) in list" :key="index">
			<view class="flex bg-white" style="padding: 10upx 70upx 30upx 70upx;" @click="detail(item.id)">
				<image v-if="item.urlsType==0" :src="item.urls" style="width: 120upx;height: 120upx;margin-right: 20upx;"></image>
				<image v-if="item.urlsType==1" :src="item.cover" style="width: 120upx;height: 120upx;margin-right: 20upx;"></image>
				<view style="width: 75%;">
					<view class="flex justify-between">
						<view class="music">
							<view class="name">{{item.title}}</view>
							<view class="author">{{item.personName}}[{{item.personType}}]</view>
						</view>
						<view>
							<view class="text-black">
								<text class="cuIcon-hotfill padding-right-xs"></text>
								<text class="text-lg text-bold">{{item.hotValue}}</text>
							</view>
							<view class="music-rank">NO.{{item.loginWebVO.rank}}</view>
						</view>
					</view>
					<view class="margin-top-sm"><u-line color="#cacaca"></u-line> </view>
				</view>
			</view>
		</block>
		<u-loadmore :status="status" v-if="list.length>4"/>
		<view class="padding-top">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityId: '',
				userId:'',
				applyEndTime: '',
				data:{},
				list:[],
				status: 'loadmore',
				current:1,
				selectShow: false,
				list1: [{
					text: '查看原图'
				}, {
					text: '更换封面'
				}],
			}
		},
		onLoad(options) {
			this.activityId = options.activityId
			this.getActivityDetail(options.activityId);
			this.userId = uni.getStorageSync("userId");
			if (!this.userId) {
				this.$u.toast('用户未登录')
				return
			}
			this.init()
		},
		onReachBottom() {
			if (!this.userId) {
				this.$u.toast('用户未登录')
				return
			}
			 if(this.list.length<this.current*10){
				this.status = 'nomore';
				return
			 }else{
				 this.status = 'loading';
				 this.current = ++ this.current;
				 this.fetchList()
			}
		 },
		 created() {
		 	uni.$on('uAvatarCropper', path => {
		 		// 可以在此上传到服务端
		 		uni.uploadFile({
		 			url: `https://yyzs.nanyue6688.com/ldt/api/putObject`, //仅为示例，非真实的接口地址
		 			filePath: path,
		 			name: 'file',
		 			success: (uploadFileRes) => {
		 				this.data.cover = JSON.parse(uploadFileRes.data).data;
						this.$u.api.user.submit({
							id: uni.getStorageSync("userId"),
							cover: JSON.parse(uploadFileRes.data).data
						}).then(res=>{
							this.fetchMineData()
						})
		 			}
		 		});
		 	})
		 },
		methods: {
			init(){
				if (!this.userId) {
					this.$u.toast('用户未登录')
					return
				}
				this.fetchMineData()
				this.fetchList()
			},
			fetchList() {
				let params={
					userId:this.userId,
					current:this.current
				}
				this.$u.api.production.list(params).then(res=>{
					this.list = [...this.list,...res.records]
				})
			},
			fetchMineData() {
				this.$u.api.user.mineData({userId:this.userId}).then(res=>{
					this.data=res
				})
			},
			chooseAvatar() {
				console.log("触发裁剪方法");
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 300,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			uploadCover() {
				this.$mpi.uploadFile().then(res=>{
					let obj = JSON.parse(res)
					let params = {
						id:this.userId,
						cover:obj.data
					}
					this.$u.api.user.submit(params).then(res=>{
						this.fetchMineData()
					})
				})
			},
			getActivityDetail(id) {
				this.$u.api.activity.detail({id: id}).then(res => {
					this.applyEndTime = res.applyEndTime;
				})
			},
			onTap() {
				let changeTime = new Date() - Date.parse(this.applyEndTime.replace(/-/g, '/'));//时间戳差值
				if (changeTime > 0) { //检查活动是否已经停止报名
					uni.showToast({
						icon: "none",
						title: "报名已结束"
					})
					return;
				} else {
					uni.navigateTo({
						url: "/pages/activityList/activity/signUp?activityId=" + this.activityId
					})
				}
			},
			detail(id) {
				uni.navigateTo({
					url: "/pages/activityList/mine/introduction?id=" + id 
				})
			},
			changeCover(index) {
				if (index == 0) {
					uni.previewImage({
						urls: [this.data.cover]
					})
				} else {
					this.chooseAvatar();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		background-color: #ffffff;
		margin-top: -26upx;
		height: 280upx;
		border-radius: 26upx 26upx 0 0;
	}
	.avatar {
		width: 130upx;
		height: 130upx;
		margin: -60upx 0 30upx 80upx;
	}
	.rank {
		display: flex;
		justify-content: center;
		background-color: #583be6;
		width: 40%;
		color: #ffffff;
		border-radius: 16upx;
		line-height: 60upx;
	}
	.music {
		.name {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			padding-bottom: 20upx;
		}
		.author {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #9A9A9A;
		}
	}
	.music-rank {
		display: flex;
		margin-top: 18upx;
		line-height: 40upx;
		justify-content: center;
		border: #9d9d9d 1px solid;
		color: #9d9d9d;
		border-radius: 50upx;
		font-style: italic;
	}
</style>