补提交图片

components/imgsBanner-tag/imgsBanner-tag.vue

@@ -0,0 +1,155 @@
+<template name='imgsBanner'>
+		<view class="imgsBannerBox">
+			<swiper class="imgsBanner_swiper" :autoplay='autoplay' :interval='Number(interval)' :duration='Number(duration)' :current='comCurrentImg' @change='changCurrent'>
+				<swiper-item v-for="(item,index) in imgList" :key='index'>
+					<image :src="getItemUrl(item)" mode="aspectFill"></image>
+				</swiper-item>
+			</swiper>
+			<!-- 图片位置 -->
+			<view class="imgLength">{{(comCurrentImg+1)+'/'+(imgList.length)}}</view>
+			<scroll-view scroll-x="true" class="scrollImgBox" :scroll-left='scrollImgList' scroll-with-animation v-if="isShowSmallImgs">
+				<view class="scrollImgList">
+					<image :src="getItemUrl(item)" mode="aspectFill" v-for="(item,index) in imgList" :key='index' :class="comCurrentImg==index?'activeImageItem':''" @click="onClickImg(index)" :id="'item'+index"></image>
+				</view>
+			</scroll-view>
+		</view>
+</template>
+
+<script>
+	export default {
+		name:'imgsBanner-tag',
+		props:{
+			imgList:{
+				type:Array,
+				default:()=>[]
+			},
+			currentImg:{
+				type:Number,
+				default:0
+			},
+			isShowSmallImgs:{	//是否需要展示小图
+				type:Boolean,
+				default:true
+			},
+			customizeDisplayField:{			//自定义展示字段
+				type:String,
+				default:''
+			},
+			// 是否循环
+			autoplay:{
+				type:Boolean,
+				default:false
+			},
+			// 自动切换时间间隔
+			interval:{
+				type:[Number,String],
+				default:5000
+			},
+			// 滑动动画时长
+			duration:{
+				type:[Number,String],
+				default:500
+			},
+		},
+		data() {
+			return {
+				comCurrentImg:0,
+				scrollImgList:0,
+				imgLeftList:[]
+			};
+		},
+		created() {
+			this.comCurrentImg = this.currentImg;
+			
+		},
+		mounted() {
+			uni.getSystemInfo({
+			    success: (res)=> {
+					this.imgList.forEach((i,v)=>{
+						let info = uni.createSelectorQuery().in(this);
+						info.select("#item"+v).boundingClientRect((res)=>{
+						    this.imgLeftList.push(res.left)
+						}).exec()
+					})
+					this.imgListScroll(this.comCurrentImg)
+			    }
+			});
+		},
+		methods:{
+			getItemUrl(item){
+				let {customizeDisplayField} = this
+				if(customizeDisplayField){
+					return customizeDisplayField.split('.').reduce((v, k) => v[k], item)
+				}else{
+					return item
+				}
+			},
+			onClickImg(index){
+				this.comCurrentImg = index
+				this.imgListScroll(index)
+			},
+			changCurrent(e){
+				this.comCurrentImg = e.target.current
+				this.imgListScroll(e.target.current)
+				this.$emit('change',this.imgList[e.target.current],e.target.current)
+			},
+			// 图片滑动
+			imgListScroll(index){
+				if(index>=2){
+					this.scrollImgList = this.imgLeftList[index-2]
+				}else{
+					this.scrollImgList = 0
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+.imgsBannerBox{
+	position: relative;
+}
+.imgLength{
+	position: absolute;
+	top: 694rpx;
+	right: 24rpx;
+	background:rgba(0,0,0,0.34);
+	padding: 0 12rpx;
+	line-height: 32rpx;
+	font-size: 22rpx;
+	border-radius: 16rpx;
+	color: #fff;
+}
+.imgsBanner_swiper{
+	width: 750rpx;
+	height: 750rpx;
+	margin-bottom: 24rpx;
+	swiper-item{
+		width: 750rpx;
+		height: 100%;
+		image{
+			width: 750rpx;
+			height: 750rpx;
+		}
+	}
+}
+.scrollImgBox{
+	.scrollImgList{
+		white-space: nowrap;
+		image{
+			width: 132rpx;
+			height: 132rpx;
+			margin-right: 16rpx;
+			display: inline-block;
+			border: 6rpx solid #fff;
+		}
+		image:last-child{
+			margin-right: 0;
+		}
+		.activeImageItem{
+			border: 6rpx solid #F57341;
+		}
+	}
+}
+
+</style>

pages/makedetail/makeMusicDetail.scss

@@ -205,7 +205,7 @@
   }
 
   .content {
-    flex: 1; 
+    flex: 1;
 
     .input-section {
       margin-bottom: 20rpx;
@@ -287,33 +287,118 @@
         display: block;
         color: #2b2b2b;
       }
+
+      .tab-nav {
+        display: flex;
+        justify-content: flex-start;
+        padding: 20rpx 20rpx;
+        box-sizing: border-box;
+        background: #ffffff;
+
+        .tab-item {
+          padding: 10rpx 38rpx;
+          color: #1f1f1f;
+          font-size: 28rpx;
+          background: #f2f6f2;
+          margin-right: 20rpx;
+          border-radius: 30rpx;
+          position: relative;
+          left: 0;
+          top: 0;
+          .indicator-triangle {
+            position: absolute;
+            bottom: -10rpx;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 10rpx solid transparent;
+            border-right: 10rpx solid transparent;
+            border-top: 10rpx solid #acf934;
+            display: none;
+          }
+          &.active {
+            background: #acf934;
+            font-family: "CustomFont" !important;
+            .indicator-triangle {
+              display: block;
+            }
+          }
+        }
+      }
+      .tab-nav {
+        display: flex;
+        justify-content: flex-start;
+        padding: 20rpx 20rpx;
+        box-sizing: border-box;
+        background: #ffffff;
+
+        .tab-item {
+          padding: 10rpx 38rpx;
+          color: #1f1f1f;
+          font-size: 28rpx;
+          background: #f2f6f2;
+          margin-right: 20rpx;
+          border-radius: 30rpx;
+          position: relative;
+          left: 0;
+          top: 0;
+          .indicator-triangle {
+            position: absolute;
+            bottom: -10rpx;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 10rpx solid transparent;
+            border-right: 10rpx solid transparent;
+            border-top: 10rpx solid #acf934;
+            display: none;
+          }
+          &.active {
+            background: #acf934;
+            font-family: "CustomFont" !important;
+            .indicator-triangle {
+              display: block;
+            }
+          }
+        }
+      }
       .tabs {
         display: flex;
-        gap: 40rpx;
-        margin-bottom: 30rpx;
-        border-bottom: 2rpx solid #f0f0f0;
-        padding-bottom: 15rpx;
+        justify-content: flex-start;
+        padding: 20rpx 20rpx;
+        box-sizing: border-box;
+        background: #ffffff;
 
         text {
+          padding: 10rpx 38rpx;
+          color: #1f1f1f;
           font-size: 28rpx;
-          color: #666;
+          background: #f2f6f2;
+          margin-right: 20rpx;
+          border-radius: 30rpx;
           position: relative;
-          padding-bottom: 15rpx;
-          transition: all 0.3s ease;
-
+          left: 0;
+          top: 0;
+
+          .indicator-triangle {
+            position: absolute;
+            bottom: -10rpx;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 10rpx solid transparent;
+            border-right: 10rpx solid transparent;
+            border-top: 10rpx solid #acf934;
+            display: none;
+          }
           &.active {
-            color: #007aff;
-            font-weight: 600;
-
-            &:after {
-              content: "";
-              position: absolute;
-              bottom: -17rpx;
-              left: 0;
-              width: 100%;
-              height: 4rpx;
-              background: #007aff;
-              border-radius: 4rpx;
+            background: #acf934;
+            font-family: "CustomFont" !important;
+            .indicator-triangle {
+              display: block;
             }
           }
         }
@@ -322,32 +407,38 @@
       .tags {
         display: flex;
         flex-wrap: wrap;
-        gap: 20rpx;
+        gap: 10rpx;
 
         .tag {
-          padding: 12rpx 30rpx;
-          background: #f5f5f5;
-          border-radius: 40rpx;
-          font-size: 28rpx;
-          transition: all 0.3s ease;
-          border: 2rpx solid transparent;
-
-          &.active {
-            background: rgba(0, 122, 255, 0.1);
-            color: #007aff;
-            border-color: #007aff;
-          }
+          padding: 10rpx 25rpx 8rpx 25rpx;
+          background: #f5f7fa;
+          border-radius: 12rpx;
+          font-size: 24rpx;
+          color: #666;
+          transition: all 0.3s;
+          border: 1rpx solid transparent;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
+          border: 2rpx solid #e6e6e6;
+          background: #ffffff;
 
           &:active {
-            transform: scale(0.98);
+            // background: #e3f2fd;
+            // color: #2b85e4;
+            // border-color: #2b85e4;
+            background: #f7ffea;
+            border-radius: 12rpx;
+            border: 2rpx solid #7ebc00;
+          }
+          &.active {
+            background: #f7ffea;
+            border-radius: 12rpx;
+            border: 2rpx solid #7ebc00;
           }
         }
       }
     }
   }
 
- 
-
   .bottom-section {
     padding: 40rpx 30rpx;
     background: rgba(255, 255, 255, 0.95);
@@ -425,9 +516,8 @@
         overflow: hidden;
         box-shadow: none;
         border: 0rpx solid transparent;
-        transform: none;margin: 0 auto;
-        
-
+        transform: none;
+        margin: 0 auto;
       }
       &:active {
         transform: scale(0.98);

pages/makedetail/makeMusicDetail.vue

@@ -95,10 +95,26 @@
 			<view class="style-section">
 				<text class="label">音乐风格</text>
 				<view class="tabs">
-					<text :class="{ 'active': selectedTab === 'emotion' }" @click="selectTab('emotion')">情感</text>
-					<text :class="{ 'active': selectedTab === 'genre' }" @click="selectTab('genre')">流派</text>
-					<text :class="{ 'active': selectedTab === 'era' }" @click="selectTab('era')">年代</text>
-					<text :class="{ 'active': selectedTab === 'instrument' }" @click="selectTab('instrument')">乐器</text>
+					<text :class="{ 'active': selectedTab === 'emotion' }" @click="selectTab('emotion')">
+						情感
+						<view class="indicator-triangle">
+						</view>
+					</text>
+					<text :class="{ 'active': selectedTab === 'genre' }" @click="selectTab('genre')">
+						流派
+						<view class="indicator-triangle">
+						</view>
+					</text>
+					<text :class="{ 'active': selectedTab === 'era' }" @click="selectTab('era')">
+						年代
+						<view class="indicator-triangle">
+						</view>
+					</text>
+					<text :class="{ 'active': selectedTab === 'instrument' }" @click="selectTab('instrument')">
+						乐器
+						<view class="indicator-triangle">
+						</view>
+					</text>
 				</view>
 				<view class="tags">
 					<text v-for="(tag, index) in currentTags" :key="index"
@@ -109,23 +125,16 @@
 			</view>
 		</view>
 
-		<!-- 底部按钮 -->
-		// <view class="bottom-section" v-if="!inQueue">
-			// <button class="submit-btn" @click="generateMusic">立即生成<text class="small">(需消耗10枚豆)</text></button>
-			// <view class="promotion-text">
-				// <text class="link-text">即刻开通订阅，我取各种福利</text>
-				// </view>
-			// </view>
+		 
 
 		<!-- 底部按钮 -->
 		<view class="bottom-button">
-			<button v-if="!doYouWantToEdit" class="generate-btn" @click="generateMusic">立即生成
+			<button v-if="doYouWantToEdit" class="generate-btn" @click="generateMusic">立即生成
 				<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
 				10
 			</button>
 
-			<view v-else class="generate-btn prohibit">生成中
-			</view>
+			<view v-else class="generate-btn prohibit">生成中 </view>
 
 
 			<view class="promotion-link">
@@ -159,8 +168,8 @@ export default {
 				era: ['80年代', '90年代', '00年代', '10年代', '20年代'],
 				instrument: ['钢琴', '吉他', '贝斯', '鼓', '小提琴', '萨克斯', '电子合成器']
 			},
-			inQueue: true,//是否创作中
-			queuing: true,//是否排队中
+			inQueue: false,//是否创作中
+			queuing: false,//是否排队中
 			queueMessage: '',
 			myinfo: {}
 		}