高投修改已交付申请售后不展示，对比不展示，客服二维码

config/modules/pre.js

@@ -1,5 +1,5 @@
 module.exports = {
 	env: 'pre',
-	baseUrl: 'http://preseafood.mashangyl.com',
+	baseUrl: 'https://videotest.9jodia.net/weapi',
 	appid: 'wx32a0607fd20c6c16'
 }

config/modules/prod.js

@@ -1,5 +1,5 @@
 module.exports = {
 	env: 'prod',
-	baseUrl: 'http://seafood.boxingyu.com',
+	baseUrl: 'https://videotest.9jodia.net/weapi',
 	appid: 'wx32a0607fd20c6c16'
 }

manifest.json

@@ -50,7 +50,7 @@
 	"quickapp": {},
 	/* 小程序特有相关 */
 	"mp-weixin": {
-		"appid": "",
+		"appid": "wx1f60f120e9c9a009",
 		"setting": {
 			"urlCheck": false
 		},

pages/index/index.vue

@@ -35,14 +35,14 @@
 				<!-- 套餐tabs -->
 				<view class="tab_menus flex jcsb aic">
 					<view class="tab-menu-item flex aic" v-for="(item, index) in tabLists" :key="index"
-						@click="changeTabs(item,index)">
+						@click="changeTabs(item, index)">
 						<text :class="tabIndex == index ? 'now_menu' : ''">{{ item }}</text>
 						<image v-if="index == tabIndex" :src="biaoqianImg"></image>
 					</view>
 				</view>
 
 				<!-- 套餐内容 -->
-				<view class="menu_con" :class="tabIndex == 0 ? 'bg1' : tabIndex == 1 ? 'bg2' : 'bg3'">
+				<view v-if="setData" class="menu_con" :class="tabIndex == 0 ? 'bg1' : tabIndex == 1 ? 'bg2' : 'bg3'">
 					<view class="cons">
 						<view class="menu_title">
 							<text class="metit">{{ setData.packageName }}</text>
@@ -58,7 +58,7 @@
 									<text class="num">{{ setData.currentPrice }}</text>
 									<text class="unit">/条</text>
 								</view>
-								<view class="limit">限时</view>
+								<view v-if="setData.isLimited" class="limit">限时</view>
 							</view>
 							<view class="past flex aic">
 								<text class="past_text fs28">原价</text>
@@ -67,15 +67,15 @@
 						</view>
 						<view class="choose">
 							<view v-for="(item, index) in setData.descriptions" :key="index"
-								class="choose_item-box flex aic jcsb">
+								class="choose_item-box flex aic">
 								<view class="choose_item flex aic">
 									<image :src="guoxuanImg"></image>
 									<text>{{ item }}</text>
 								</view>
-								<view v-if="index == 0" class="choose_item-more flex aic" @click="showMoreCase">
+								<!-- <view v-if="index == 0" class="choose_item-more flex aic" @click="showMoreCase">
 									<text>查看更多</text>
-									<image :src="!isList?moreImg:more_maxdown"></image>
-								</view>
+									<image :src="!isList ? moreImg : more_maxdown"></image>
+								</view> -->
 							</view>
 							<!-- <view class="choose_item flex aic">
                 <image :src="guoxuanImg"></image>
@@ -94,27 +94,24 @@
 				</view>
 
 				<!-- 三大套餐对比 -->
-				<view v-if="isList" class="menu_tmps" id="caseMore">
+				<!-- <view v-if="isList" class="menu_tmps" id="caseMore">
 					<view class="tips">
 						<view class="tips-title">
 							<text class="title-text">三大套餐所有内容对比</text>
 							<image :src="lineBg" class="line" mode="widthFix"></image>
 						</view>
-						<!-- <view class="tips-content">适用于TikTok、亚马逊、YouTub、INS</view> -->
 					</view>
 					<view class="menu_table">
 						<view class="table-prop flex jcsb aic">
 							<view class="table-prop-item">内容板块</view>
 							<view v-for="item in tabLists" :key="item" class="table-prop-item">{{ item }}</view>
-							<!-- <view class="table-prop-item">B类套餐</view>
-              <view class="table-prop-item">C类套餐</view> -->
 						</view>
 						<view v-for="(item, index) in configs" :key="index" class="table-item">
 							<view class="table-title flex aic jcsb">
 								<text class="ttitle">{{ item.name }}</text>
-								<view class="cutout flex aic" @click="item.flag=!item.flag">
+								<view class="cutout flex aic" @click="item.flag = !item.flag">
 									<text>{{ !item.flag ? '展开' : '收起' }}</text>
-									<image :src="!item.flag?more_mindown:more_minup"></image>
+									<image :src="!item.flag ? more_mindown : more_minup"></image>
 								</view>
 							</view>
 							<view v-if="item.flag" v-for="(items, indexs) in item.data" :key="indexs"
@@ -123,7 +120,7 @@
 									<view class="row_name">
 										<text>{{ items.name }}</text>
 									</view>
-									<view v-for="(itm,inx) in items.data" :key="inx" class="row_value">
+									<view v-for="(itm, inx) in items.data" :key="inx" class="row_value">
 										<image v-if="!itm || itm == ''" :src="emptyImg" class="row_empty"></image>
 										<text v-else>{{ itm }}</text>
 									</view>
@@ -131,14 +128,14 @@
 							</view>
 						</view>
 					</view>
-				</view>
+				</view> -->
 			</view>
 		</view>
 
-		<view class="btom bg1">
+		<view v-if="setData" class="btom bg1">
 			<view class="btn" :style="{ background: 'url(' + buybtnBg + ')' }" @click="toBuy()">立即购买</view>
 		</view>
-		<u-popup mode="center" :show="caseVisible" :closeOnClickOverlay="true" @close="caseVisible=false">
+		<u-popup mode="center" :show="caseVisible" :closeOnClickOverlay="true" @close="caseVisible = false">
 			<view class="video-list">
 				<u-swiper height='400' :list="videoList" indicator indicatorMode="line" circular keyName="url"
 					:autoplay="false"></u-swiper>
@@ -152,490 +149,504 @@
 </template>
 
 <script>
-	import {
-		home
-	} from '@/apis/index'
-
-
-	export default {
-		data() {
-			return {
-				logoImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_logo.png',
-				lineBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_line.png',
-				biaoqianImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_biaoqian.png',
-				playImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_play.png',
-				guoxuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuan.png',
-				moreImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more.png',
-				more_minup: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_minup.png',
-				more_mindown: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_mindown.png',
-				more_maxdown: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_maxdown.png',
-				emptyImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_empty.png',
-				buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
-				tabStatus: 0, // 成片/素材
-				tabIndex: 0, // 套餐tabs角标
-				tabLists: [], // 套餐tabs列表
-				packagesEntity: [],
-				setData: {},
-				isList: false,
-				configs: [],
-				caseVisible: false,
-				videoList:[]
+import {
+	home
+} from '@/apis/index'
+
+
+export default {
+	data() {
+		return {
+			logoImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_logo.png',
+			lineBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_line.png',
+			biaoqianImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_biaoqian.png',
+			playImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_play.png',
+			guoxuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuan.png',
+			moreImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more.png',
+			more_minup: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_minup.png',
+			more_mindown: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_mindown.png',
+			more_maxdown: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_maxdown.png',
+			emptyImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_empty.png',
+			buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
+			tabStatus: 0, // 成片/素材
+			tabIndex: 0, // 套餐tabs角标
+			tabLists: [], // 套餐tabs列表
+			packagesEntity: [],
+			setData: {},
+			isList: false,
+			configs: [],
+			caseVisible: false,
+			videoList: []
+		}
+	},
+	onLoad() {
+
+		this.getData()
+
+	},
+	onShow() {
+		this.changeTabbar()
+	},
+	methods: {
+		showCase(item) {
+			this.videoList = item.videoUrls
+			this.caseVisible = true
+		},
+		// 跳转到购买详情页
+		toBuy() {
+
+			uni.navigateTo({
+				url: '/pages/order/order_confirm?id=' + this.setData.packageId + '&strip=' + this.setData
+					.count + '&type=' + this.tabStatus
+			})
+		},
+		showMoreCase() {
+			this.isList = !this.isList
+			if (this.isList) {
+				uni.createSelectorQuery().select('#caseMore').boundingClientRect(data => {
+					if (data) {
+						uni.pageScrollTo({
+							scrollTop: data.top + uni.getSystemInfoSync().scrollTop + 100,
+							duration: 300
+						});
+					}
+				}).exec(result => {
+				});
+
 			}
 		},
-		onLoad() {
 
+		// 成片/素材
+		tabStatusChange(num) {
+			this.tabStatus = num
+			this.tabIndex = 0
 			this.getData()
-
 		},
-		onShow() {
-			this.changeTabbar()
+		// 套餐tabs角标
+		changeTabs(data, num) {
+			this.tabIndex = num
+			this.setData = this.packagesEntity.find(item => item.packageName === data)
 		},
-		methods: {
-			showCase(item) {
-				this.videoList=item.videoUrls
-				this.caseVisible = true
-			},
-			// 跳转到购买详情页
-			toBuy() {
-				
-				uni.navigateTo({
-					url: '/pages/order/order_confirm?id=' + this.setData.packageId + '&strip=' + this.setData
-						.count + '&type=' + this.tabStatus
-				})
-			},
-			showMoreCase() {
-				this.isList = !this.isList
-				if (this.isList) {
-					uni.createSelectorQuery().select('#caseMore').boundingClientRect(data => {
-						if (data) {
-							uni.pageScrollTo({
-								scrollTop: data.top + uni.getSystemInfoSync().scrollTop + 100,
-								duration: 300
-							});
-						}
-					}).exec(result=>{
-						console.log('滚动',result);
-					});
-					
-				}
-			},
-
-			// 成片/素材
-			tabStatusChange(num) {
-				this.tabStatus = num
-				this.getData()
-			},
-			// 套餐tabs角标
-			changeTabs(data, num) {
-				this.tabIndex = num
-				this.setData = this.packagesEntity.find(item => item.packageName === data)
-			},
-			// 获取列表
-			getData() {
-				home({
-					type: this.tabStatus
-				}).then(res => {
-					this.tabLists = res.packages
-					this.packagesEntity = res.packagesEntity
-					this.setData = this.packagesEntity[0]
-					this.configs = res.configs
-
-				})
-			},
-
-			// tabbar样式
-			changeTabbar() {
-				uni.setTabBarStyle({
-					color: '#9EA3B1',
-					selectedColor: '#FFFFFF',
-					backgroundColor: '#0D121A'
-				})
-			}
+		// 获取列表
+		getData() {
+			home({
+				type: this.tabStatus
+			}).then(res => {
+				this.tabLists = res.packages
+				this.packagesEntity = res.packagesEntity || []
+				this.setData = this.packagesEntity[0]
+				this.configs = res.configs
+			})
+		},
+
+		// tabbar样式
+		changeTabbar() {
+			uni.setTabBarStyle({
+				color: '#9EA3B1',
+				selectedColor: '#FFFFFF',
+				backgroundColor: '#0D121A'
+			})
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
+.title {
+	font-weight: 600 !important;
+}
+
+.content {
+	width: 100%;
+	// min-height: 100vh;
+	background-color: #0D121A;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	display: flex;
+	flex-direction: column;
+
+	.all {
+		flex: 1;
+		overflow: auto;
+		padding: 0 24rpx 24rpx;
+
+	}
+
 	.title {
-		font-weight: 600 !important;
+		padding: 16rpx 8rpx;
+		font-weight: normal;
+		font-size: 32rpx;
+		color: #FFFFFF;
+
+		.logo {
+			height: 56rpx;
+		}
 	}
 
-	.content {
-		width: 100%;
-		// min-height: 100vh;
-		background-color: #0D121A;
-		position: absolute;
-		top: 0;
-		bottom: 0;
+	.tips {
 		display: flex;
 		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: 96rpx;
 
-		.all {
-			flex: 1;
-			overflow: auto;
-			padding: 0 24rpx 24rpx;
+		.tips-title {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
 
+			.title-text {
+				font-weight: bold;
+				font-size: 40rpx;
+				color: transparent;
+				background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
+				-webkit-background-clip: text;
+			}
+
+			.line {
+				width: 112rpx;
+			}
 		}
 
-		.title {
-			padding: 16rpx 8rpx;
-			font-weight: normal;
+		.tips-content {
 			font-size: 32rpx;
-			color: #FFFFFF;
+			color: #F8FAFF;
+			margin-top: 28rpx;
 
-			.logo {
-				height: 56rpx;
+			.cantant {
+				font-weight: 400;
+				font-size: 32rpx;
+				color: #00ECFF;
+				background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
+				-webkit-background-clip: text;
+				text-decoration: underline;
+				margin-left: 8rpx;
 			}
 		}
+	}
 
-		.tips {
+	.tabs-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-top: 52rpx;
+
+		.tabs {
 			display: flex;
-			flex-direction: column;
 			justify-content: center;
-			align-items: center;
-			margin-top: 96rpx;
+			width: 368rpx;
+			height: 72rpx;
+			background: rgba($color: #FFF, $alpha: 0.1);
+			border-radius: 36rpx;
 
-			.tips-title {
+			.tab-item {
 				display: flex;
-				flex-direction: column;
-				align-items: flex-end;
-
-				.title-text {
-					font-weight: bold;
-					font-size: 40rpx;
-					color: transparent;
-					background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
-					-webkit-background-clip: text;
-				}
-
-				.line {
-					width: 112rpx;
-				}
+				justify-content: center;
+				align-items: center;
+				font-size: 28rpx;
+				width: 50%;
+				height: 64rpx;
+				color: #F6F8FF;
 			}
+		}
 
-			.tips-content {
-				font-size: 32rpx;
-				color: #F8FAFF;
-				margin-top: 28rpx;
-
-				.cantant {
-					font-weight: 400;
-					font-size: 32rpx;
-					color: #00ECFF;
-					background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
-					-webkit-background-clip: text;
-					text-decoration: underline;
-					margin-left: 8rpx;
-				}
-			}
+		.select {
+			background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
+			border-radius: 32rpx;
+			color: #0D121A !important;
 		}
 
-		.tabs-wrapper {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			margin-top: 52rpx;
+		.tab_menus {
+			padding: 64rpx 40rpx 56rpx;
+			width: 100%;
 
-			.tabs {
-				display: flex;
-				justify-content: center;
-				width: 368rpx;
-				height: 72rpx;
-				background: rgba($color: #FFF, $alpha: 0.1);
-				border-radius: 36rpx;
+			.tab-menu-item {
+				color: #9EA3B1;
+				font-size: 28rpx;
 
-				.tab-item {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					font-size: 28rpx;
-					width: 50%;
-					height: 64rpx;
-					color: #F6F8FF;
+				.now_menu {
+					font-size: 36rpx;
+					color: #F8FAFF !important;
+					margin-right: 10rpx;
 				}
-			}
 
-			.select {
-				background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
-				border-radius: 32rpx;
-				color: #0D121A !important;
+				image {
+					width: 36rpx;
+					height: 36rpx;
+				}
 			}
 
-			.tab_menus {
-				padding: 64rpx 40rpx 56rpx;
-				width: 100%;
+		}
 
-				.tab-menu-item {
-					color: #9EA3B1;
-					font-size: 28rpx;
 
-					.now_menu {
-						font-size: 36rpx;
-						color: #F8FAFF !important;
-						margin-right: 10rpx;
-					}
-
-					image {
-						width: 36rpx;
-						height: 36rpx;
-					}
-				}
+		.menu_con {
+			width: 100%;
+			border-radius: 24rpx;
+			border: 2rpx solid rgba(255, 255, 255, 0.12);
+			margin: 0 24rpx;
+			padding: 56rpx 32rpx 48rpx;
 
+			.cons {
+				padding: 0 16rpx;
 			}
 
+			.menu_title {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
 
-			.menu_con {
-				width: 100%;
-				border-radius: 24rpx;
-				border: 2rpx solid rgba(255, 255, 255, 0.12);
-				margin: 0 24rpx;
-				padding: 56rpx 32rpx 48rpx;
-
-				.cons {
-					padding: 0 16rpx;
+				.metit {
+					font-size: 44px;
+					color: #F8FAFF;
 				}
 
-				.menu_title {
+				.exmple {
+					width: 156rpx;
+					height: 64rpx;
+					background: #0D121A;
+					border-radius: 12rpx;
 					display: flex;
-					justify-content: space-between;
 					align-items: center;
+					justify-content: center;
+					font-size: 28rpx;
+					color: #FFFFFF;
 
-					.metit {
-						font-size: 44px;
-						color: #F8FAFF;
-					}
-
-					.exmple {
-						width: 156rpx;
-						height: 64rpx;
-						background: #0D121A;
-						border-radius: 12rpx;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						font-size: 28rpx;
-						color: #FFFFFF;
-
-						.play {
-							width: 32rpx;
-							height: 32rpx;
-							margin-right: 12rpx;
-						}
+					.play {
+						width: 32rpx;
+						height: 32rpx;
+						margin-right: 12rpx;
 					}
 				}
+			}
 
-				.amounts {
-					margin-top: 72rpx;
-
-					.now {
-						.money {
-							font-size: 32rpx;
-							color: #FFFFFF;
+			.amounts {
+				margin-top: 72rpx;
 
-							.dw {
-								line-height: 40rpx;
-							}
+				.now {
+					.money {
+						font-size: 32rpx;
+						color: #FFFFFF;
 
-							.num {
-								font-size: 72rpx;
-								line-height: 56rpx;
-							}
+						.dw {
+							line-height: 40rpx;
+						}
 
-							.unit {
-								margin-left: 24rpx;
-							}
+						.num {
+							font-size: 72rpx;
+							line-height: 56rpx;
 						}
 
-						.limit {
-							margin-left: 24px;
-							width: 72rpx;
-							height: 40rpx;
-							background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
-							border-radius: 8rpx;
-							font-weight: 500;
-							font-size: 24rpx;
-							color: #0D121A;
-							text-align: center;
-							line-height: 40rpx;
+						.unit {
+							margin-left: 24rpx;
 						}
 					}
 
-					.past {
-						color: #BCC0C5;
-						margin-top: 34rpx;
+					.limit {
+						margin-left: 24px;
+						width: 72rpx;
+						height: 40rpx;
+						background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
+						border-radius: 8rpx;
+						font-weight: 500;
+						font-size: 24rpx;
+						color: #0D121A;
+						text-align: center;
+						line-height: 40rpx;
+					}
+				}
+
+				.past {
+					color: #BCC0C5;
+					margin-top: 34rpx;
 
-						.past_text {
-							margin-right: 8rpx;
-						}
+					.past_text {
+						margin-right: 8rpx;
 					}
 				}
+			}
 
-				.choose {
-					margin-top: 64rpx;
+			.choose {
+				margin-top: 64rpx;
+				flex-wrap: wrap;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
 
-					.choose_item-box {
-						margin-top: 16rpx;
+				.choose_item-box {
+					height: 70rpx;
+					white-space: nowrap;
 
-						image {
-							width: 48rpx;
-							height: 48rpx;
-							margin-right: 24rpx;
-						}
+					image {
+						width: 48rpx;
+						height: 48rpx;
+						margin-right: 24rpx;
+					}
 
-						text {
-							color: #F8FAFF;
-							font-size: 28rpx;
-						}
+					text {
+						color: #F8FAFF;
+						font-size: 28rpx;
+						white-space: nowrap;
 					}
 
-					.choose_item-more {
+					.choose_item {
+						flex-wrap: nowrap;
+
 						text {
-							font-size: 28rpx;
-							background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
-							color: transparent;
-							-webkit-background-clip: text;
+							white-space: nowrap;
 						}
+					}
+				}
 
-						image {
-							width: 32rpx;
-							height: 32rpx;
-							margin-left: 12rpx;
-						}
+				.choose_item-more {
+					text {
+						font-size: 28rpx;
+						background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
+						color: transparent;
+						-webkit-background-clip: text;
 					}
 
-					.choose_item-box:nth-child(1) {
-						margin-top: 0;
+					image {
+						width: 32rpx;
+						height: 32rpx;
+						margin-left: 12rpx;
 					}
 				}
+
+				.choose_item-box:nth-child(1) {
+					margin-top: 0;
+
+				}
 			}
+		}
 
-			.menu_tmps {
-				width: 100%;
+		.menu_tmps {
+			width: 100%;
 
-				.menu_table {
-					background: linear-gradient(180deg, rgba(9, 155, 255, 0.12) 0%, rgba(66, 121, 192, 0.08) 100%);
-					border-radius: 24rpx;
-					border: 2rpx solid #003849;
-					margin-top: 48px;
+			.menu_table {
+				background: linear-gradient(180deg, rgba(9, 155, 255, 0.12) 0%, rgba(66, 121, 192, 0.08) 100%);
+				border-radius: 24rpx;
+				border: 2rpx solid #003849;
+				margin-top: 48px;
+
+				.table-prop {
+					padding: 36rpx 40rpx;
+					color: #F8FAFF;
+					font-size: 24rpx;
+					border-bottom: #1D3A4A 2rpx solid;
+				}
 
-					.table-prop {
-						padding: 36rpx 40rpx;
-						color: #F8FAFF;
-						font-size: 24rpx;
-						border-bottom: #1D3A4A 2rpx solid;
-					}
+				.table-item {
+					padding: 40rpx;
+					font-size: 24rpx;
+					border-bottom: #1D3A4A 2rpx solid;
 
-					.table-item {
-						padding: 40rpx;
-						font-size: 24rpx;
-						border-bottom: #1D3A4A 2rpx solid;
+					.table-title {
+						.ttitle {
+							background: linear-gradient(311.670791165708deg, #00C1FF 0%, #2FFFFC 100%);
+							-webkit-background-clip: text;
+							color: transparent;
+						}
 
-						.table-title {
-							.ttitle {
-								background: linear-gradient(311.670791165708deg, #00C1FF 0%, #2FFFFC 100%);
+						.cutout {
+							text {
+								background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
 								-webkit-background-clip: text;
 								color: transparent;
 							}
 
-							.cutout {
-								text {
-									background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
-									-webkit-background-clip: text;
-									color: transparent;
-								}
-
-								image {
-									width: 32rpx;
-									height: 32rpx;
-									margin-left: 8rpx;
-								}
+							image {
+								width: 32rpx;
+								height: 32rpx;
+								margin-left: 8rpx;
 							}
 						}
+					}
 
-						.table-content {
+					.table-content {
+						margin-top: 40rpx;
+						color: #FFFFFF;
+
+						.row {
 							margin-top: 40rpx;
-							color: #FFFFFF;
-
-							.row {
-								margin-top: 40rpx;
-								width: 100%;
-
-								.row_name {
-									white-space: nowrap;
-									width: 15%;
-									display: flex;
-									flex-direction: column;
-
-									text:nth-child(2) {
-										font-size: 20rpx;
-										text-align: center;
-									}
-								}
+							width: 100%;
 
-								.row_value {
-									width: 15%;
+							.row_name {
+								// white-space: nowrap;
+								width: 20%;
+								display: flex;
+								flex-direction: column;
+
+								text:nth-child(2) {
+									font-size: 20rpx;
 									text-align: center;
-									display: flex;
-									justify-content: center;
 								}
+							}
 
-								.row_empty {
-									width: 32rpx;
-									height: 32rpx;
-								}
+							.row_value {
+								width: 15%;
+								text-align: center;
+								display: flex;
+								justify-content: center;
 							}
 
-							.row:nth-child(1) {
-								margin-top: 0;
+							.row_empty {
+								width: 32rpx;
+								height: 32rpx;
 							}
 						}
-					}
 
-					.table-item:last-child {
-						border: none;
+						.row:nth-child(1) {
+							margin-top: 0;
+						}
 					}
 				}
-			}
-		}
-
-		.bg1 {
-			background: linear-gradient(180deg, rgba(99, 113, 235, 0.2) 0%, rgba(94, 108, 228, 0.08) 100%);
-		}
 
-		.bg2 {
-			background: linear-gradient(180deg, rgba(31, 113, 227, 0.2) 0%, rgba(31, 113, 227, 0.08) 100%);
-		}
-
-		.bg3 {
-			background: linear-gradient(180deg, rgba(0, 161, 205, 0.2) 0%, rgba(0, 161, 205, 0.08) 100%);
+				.table-item:last-child {
+					border: none;
+				}
+			}
 		}
+	}
 
-		.btom {
-			flex-shrink: 1;
-			padding: 24rpx 32rpx;
+	.bg1 {
+		background: linear-gradient(180deg, rgba(99, 113, 235, 0.2) 0%, rgba(94, 108, 228, 0.08) 100%);
+	}
 
-			.btn {
-				background-size: 100% 100% !important;
-				width: 100%;
-				height: 84rpx;
-				text-align: center;
-				line-height: 84rpx;
-				font-weight: bold;
-				font-size: 32rpx;
-				color: #0D121A;
-			}
-		}
+	.bg2 {
+		background: linear-gradient(180deg, rgba(31, 113, 227, 0.2) 0%, rgba(31, 113, 227, 0.08) 100%);
 	}
 
-	.u-popup {
-		flex: 0;
-		z-index: 999;
+	.bg3 {
+		background: linear-gradient(180deg, rgba(0, 161, 205, 0.2) 0%, rgba(0, 161, 205, 0.08) 100%);
 	}
 
-	.video-list {
-		margin: 0rpx auto;
-		height: 800rpx;
-		width: 600rpx;
-		background-color: #000;
+	.btom {
+		flex-shrink: 1;
+		padding: 24rpx 32rpx;
+
+		.btn {
+			background-size: 100% 100% !important;
+			width: 100%;
+			height: 84rpx;
+			text-align: center;
+			line-height: 84rpx;
+			font-weight: bold;
+			font-size: 32rpx;
+			color: #0D121A;
+		}
 	}
+}
+
+.u-popup {
+	flex: 0;
+	z-index: 999;
+}
+
+.video-list {
+	margin: 0rpx auto;
+	height: 800rpx;
+	width: 600rpx;
+	background-color: #000;
+}
 </style>

pages/order/index.vue

@@ -2,30 +2,31 @@
 <template>
   <view class="order">
     <view class="tabs">
-      <u-tabs :list="tabLists" lineWidth="40" :current="current" lineHeight="8" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
-                color: '#0D121A',
-                fontSize: '32rpx',
-                fontWeight: 'bold',
-                transform: 'scale(1.05)'
-            }" :inactiveStyle="{
-                color: '#9EA3B1',
-                fontSize: '28rpx',
-                transform: 'scale(1)'
-            }" itemStyle="padding-left: 18px; padding-right: 18px; height: 56px;" @click="tabsChange">
+      <u-tabs :list="tabLists" lineWidth="40" :current="current" lineHeight="8" :lineColor="`url(${lineBg}) 100% 100%`"
+        :activeStyle="{
+          color: '#0D121A',
+          fontSize: '32rpx',
+          fontWeight: 'bold',
+          transform: 'scale(1.05)'
+        }" :inactiveStyle="{
+          color: '#9EA3B1',
+          fontSize: '28rpx',
+          transform: 'scale(1)'
+        }" itemStyle="padding-left: 18px; padding-right: 18px; height: 56px;" @click="tabsChange">
       </u-tabs>
     </view>
     <view class="content">
       <mescroll-body :height="`calc(100% - 24rpx)`" class="custom-height" ref="mescrollRef" @down="downCallback"
-                     :up="upOption" @up="upCallback">
+        :up="upOption" @up="upCallback">
         <view class="order-list" v-if="arrList && arrList.length">
           <view class="tab-content" v-for="(item, index) in arrList" :key="index" @click="goOrderDetail(item)">
             <view class="order-top flex-start">
               <text class="name">{{ item.packageName }}({{ item.quantity }}条视频)</text>
-              <text v-if="item.paymentStatus==='CANCELLED'" class="status cancel">{{
-                  item.paymentStatus | orderStatus
-                }}
+              <text v-if="item.paymentStatus === 'CANCELLED'" class="status cancel">{{
+                item.paymentStatus | orderStatus
+              }}
               </text>
-              <text v-else-if="item.paymentStatus==='REFUNDED'" class="status cancel">
+              <text v-else-if="item.paymentStatus === 'REFUNDED'" class="status cancel">
                 {{ item.paymentStatus | orderStatus }}
               </text>
               <text v-else class="status color">{{ item.paymentStatus | orderStatus }}</text>
@@ -33,27 +34,27 @@
             <view class="order-middle flex-between-no-center">
               <view class="order-middle-left">
                 <view class="fs28 mt-4 fw400" v-for="(content, contentIndex) in item.packageContents"
-                      :key="contentIndex">{{ content }}
+                  :key="contentIndex">{{ content }}
                 </view>
               </view>
-              <view class="order-middle-right flex-start" v-if="item.paymentStatus==='WAIT_PAYMENT'">
+              <view class="order-middle-right flex-start" v-if="item.paymentStatus === 'WAIT_PAYMENT'">
                 <view class="right-label fs24">应付款：</view>
                 <view class="fs28 fw ml-6"> ¥{{ item.totalAmount }}</view>
               </view>
-              <view class="order-middle-right" v-if="item.paymentStatus==='SHOOTING'">
+              <view class="order-middle-right" v-if="item.paymentStatus === 'SHOOTING'">
                 <view class="progress-bar">
-                  <view class="progress" :style="{ width: (item.completedQuantity/item.quantity)*100+ '%' }">
-                    {{ item.completedQuantity }}/{{item.quantity}}
+                  <view class="progress" :style="{ width: (item.completedQuantity / item.quantity) * 100 + '%' }">
+                    {{ item.completedQuantity }}/{{ item.quantity }}
                   </view>
                 </view>
                 <!--                <view class="progress-container">{{item.completedQuantity}}/{{item.quantity}}</view>-->
               </view>
-              <view class="order-middle-right cancel flex-start" v-if="item.paymentStatus==='REFUNDED'">
+              <view class="order-middle-right cancel flex-start" v-if="item.paymentStatus === 'REFUNDED'">
                 <view class="right-label fs24 ">已退款</view>
                 <view class="fs28 fw ml-6"> ¥{{ item.totalAmount }}</view>
               </view>
             </view>
-            <view v-if="item.paymentStatus==='WAIT_PAYMENT'" class="order-bottom flex-between">
+            <view v-if="item.paymentStatus === 'WAIT_PAYMENT'" class="order-bottom flex-between">
               <view class="order-bottom-left">
               </view>
               <view class="order-bottom-right flex">
@@ -68,36 +69,47 @@
                 <view class="fs28 fw ml-6"> ¥{{ item.totalAmount }}</view>
               </view>
               <view class="order-bottom-right flex">
-                <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_PAYMENT'" @click.stop="cancelOrder(item.orderId)">
+                <view class="btn btn1 p2" v-if="item.paymentStatus === 'WAIT_PAYMENT'"
+                  @click.stop="cancelOrder(item.orderId)">
                   取消
                 </view>
-                <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_SEND'" @click.stop="cancelOrder(item.orderId)">
+                <view class="btn btn1 p2" v-if="item.paymentStatus === 'WAIT_SEND'"
+                  @click.stop="cancelOrder(item.orderId)">
                   取消
                 </view>
-                <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_ORDER'" @click.stop="cancelOrder(item.orderId)">
+                <view class="btn btn1 p2" v-if="item.paymentStatus === 'WAIT_ORDER'"
+                  @click.stop="cancelOrder(item.orderId)">
                   取消
                 </view>
-               <!-- <view v-if="item.paymentStatus==='WAIT_SEND'" class="btn btn1 p2 ml-6 btn-theme">寄样</view> -->
-                <view class="btn btn1 p2" v-if="item.paymentStatus==='SHOOTING'" @click.stop="aftermarketOrder(item.orderId)">申请售后
+                <!-- <view v-if="item.paymentStatus==='WAIT_SEND'" class="btn btn1 p2 ml-6 btn-theme">寄样</view> -->
+                <view class="btn btn1 p2" v-if="item.paymentStatus === 'SHOOTING'"
+                  @click.stop="applyAfterSales(item.orderId)">申请售后
                 </view>
-                <view class="btn btn1 p2" v-if="item.paymentStatus==='DELIVERED'"
+                <!-- <view class="btn btn1 p2" v-if="item.paymentStatus==='DELIVERED'"
                       @click.stop="aftermarketOrder(item.orderId)">申请售后
+                </view> -->
+                <view class="btn btn1 p2" v-if="item.paymentStatus === 'WAIT_CHECK'"
+                  @click.stop="applyAfterSales(item.orderId)">申请售后
                 </view>
-                <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_CHECK'"
-                      @click.stop="aftermarketOrder(item.orderId)">申请售后
-                </view>
-                <view class="btn btn1 p2" v-if="item.paymentStatus==='AFTER_SALE'"
-                      @click.stopk="cancelAftermarketOrder(item.orderId)">撤回申请
+                <view class="btn btn1 p2" v-if="item.paymentStatus === 'AFTER_SALE'"
+                  @click.stopk="cancelAftermarketOrder(item.orderId)">撤回申请
                 </view>
-                <view class="btn btn1 p2 ml-6 btn-theme" v-if="item.paymentStatus==='WAIT_CHECK'"
-                      @click.stop="checkOrder(item.orderId)">确认验收
+                <view class="btn btn1 p2 ml-6 btn-theme" v-if="item.paymentStatus === 'WAIT_CHECK'"
+                  @click.stop="checkOrder(item.orderId)">确认验收
                 </view>
               </view>
             </view>
           </view>
         </view>
-        <no-data  :top="230" :statusType="1" @buttonHandle="buttonHandle" tipsText="暂无记录" v-if="!isInit && !arrList.length"></no-data>
+        <no-data :top="230" :statusType="1" @buttonHandle="buttonHandle" tipsText="暂无记录"
+          v-if="!isInit && !arrList.length"></no-data>
       </mescroll-body>
+      <u-modal :show="serviceVisible" title="申请售后" :closeOnClickOverlay="false" :showCancelButton="true"
+        @cancel="cancelAfterSales" @confirm="confirmAfterSales">
+        <view class="service-box">
+          <u--textarea v-model="aftermarketReason" placeholder="售后原因" :focus="true" count maxlength="200"></u--textarea>
+        </view>
+      </u-modal>
     </view>
 
   </view>
@@ -114,7 +126,7 @@ import {
   getOrderListPage,
   updateOrder
 } from "../../apis/order";
-import {submitOrder} from "../../apis";
+import { submitOrder } from "../../apis";
 
 export default {
   mixins: [MescrollMixin],
@@ -123,6 +135,9 @@ export default {
   },
   data() {
     return {
+      aftermarketReason: "",
+      orderId:"",
+      serviceVisible: false,
       current: 0,
       page: 1,
       limit: 10,
@@ -143,16 +158,16 @@ export default {
       },
       paymentStatus: '',
       tabLists: [
-        {name: '全部', value: ''},
-        {name: '待付款', value: 'WAIT_PAYMENT'},
-        {name: '待接单', value: 'WAIT_ORDER'},
+        { name: '全部', value: '' },
+        { name: '待付款', value: 'WAIT_PAYMENT' },
+        { name: '待接单', value: 'WAIT_ORDER' },
         // {name: '待寄样', value: 'WAIT_SEND'},
-        {name: '拍摄中', value: 'SHOOTING'},
-        {name: '待验收', value: 'WAIT_CHECK'},
-        {name: '已交付', value: 'DELIVERED'},
-        {name: '售后中', value: 'AFTER_SALE'},
-        {name: '已取消', value: 'CANCELLED'},
-        {name: '已退款', value: 'REFUNDED'}]
+        { name: '拍摄中', value: 'SHOOTING' },
+        { name: '待验收', value: 'WAIT_CHECK' },
+        { name: '已交付', value: 'DELIVERED' },
+        { name: '售后中', value: 'AFTER_SALE' },
+        { name: '已取消', value: 'CANCELLED' },
+        { name: '已退款', value: 'REFUNDED' }]
 
     };
   },
@@ -166,14 +181,14 @@ export default {
     }
   },
   onLoad(options) {
-    if(options.status) this.paymentStatus = options.status 
-    if(options.current) this.current = options.current
+    if (options.status) this.paymentStatus = options.status
+    if (options.current) this.current = options.current
     // this.getOrderListPage()
   },
   methods: {
-    goOrderDetail(item){
+    goOrderDetail(item) {
       uni.navigateTo({
-        url: '/pages/order/orderDetail?orderId='+item.orderId
+        url: '/pages/order/orderDetail?orderId=' + item.orderId
       })
     },
     submitOrder(params) {
@@ -201,45 +216,45 @@ export default {
     },
     invokePayment(rePayInfo) {
       WeixinJSBridge.invoke(
-          'getBrandWCPayRequest',
-          {
-            appId: rePayInfo.appid,
-            timeStamp: rePayInfo.timeStamp,
-            nonceStr: rePayInfo.nonceStr,
-            package: rePayInfo.packages,
-            signType: rePayInfo.signType,
-            paySign: rePayInfo.sign
-          },
-          (res) => {
-            if (res.err_msg === 'get_brand_wcpay_request:ok') {
-              uni.navigateTo({
-                url: '/pages/order/success?orderId=' + rePayInfo.orderId
-              })
-            } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
-              uni.showToast({
-                title: '用户取消了支付',
-                icon: 'none'
-              })
-            } else {
-              console.error('支付失败', res.errMsg);
-              // 处理支付失败的逻辑
-            }
+        'getBrandWCPayRequest',
+        {
+          appId: rePayInfo.appid,
+          timeStamp: rePayInfo.timeStamp,
+          nonceStr: rePayInfo.nonceStr,
+          package: rePayInfo.packages,
+          signType: rePayInfo.signType,
+          paySign: rePayInfo.sign
+        },
+        (res) => {
+          if (res.err_msg === 'get_brand_wcpay_request:ok') {
+            uni.navigateTo({
+              url: '/pages/order/success?orderId=' + rePayInfo.orderId
+            })
+          } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
+            uni.showToast({
+              title: '用户取消了支付',
+              icon: 'none'
+            })
+          } else {
+            console.error('支付失败', res.errMsg);
+            // 处理支付失败的逻辑
           }
+        }
       );
     },
     tabsChange(item) {
-      if(this.paymentStatus == item.value) return
-        this.paymentStatus = item.value
-        this.mescroll.resetUpScroll()
-        this.mescroll.scrollTo(0, 300)
+      if (this.paymentStatus == item.value) return
+      this.paymentStatus = item.value
+      this.mescroll.resetUpScroll()
+      this.mescroll.scrollTo(0, 300)
     },
     // upCallback(){
     //     console.log('123456');
     // },
 
     buttonHandle() {
-        this.mescroll.resetUpScroll()
-        this.mescroll.scrollTo(0, 300)
+      this.mescroll.resetUpScroll()
+      this.mescroll.scrollTo(0, 300)
     },
     upCallback(page) {
       getOrderListPage({
@@ -248,16 +263,16 @@ export default {
         limit: page.size,
       }).then(res => {
         // this.arrList = res.list
-        if(res){
-            if (page.num == 1) { //如果是第一页需手动制空列表
-                this.arrList = res.list
-            } else {
-                this.arrList = this.arrList.concat(res.list) //追加新数据
-            }
-            this.mescroll.endSuccess(res.list.length, res.total > this.arrList.length) // 参考https://www.mescroll.com/uni.html#mescrolluni
-
-        }else{
-            this.mescroll.endErr()
+        if (res) {
+          if (page.num == 1) { //如果是第一页需手动制空列表
+            this.arrList = res.list
+          } else {
+            this.arrList = this.arrList.concat(res.list) //追加新数据
+          }
+          this.mescroll.endSuccess(res.list.length, res.total > this.arrList.length) // 参考https://www.mescroll.com/uni.html#mescrolluni
+
+        } else {
+          this.mescroll.endErr()
         }
         this.isInit = false
       })
@@ -326,25 +341,24 @@ export default {
         }
       });
     },
-    aftermarketOrder(orderId) {
+    applyAfterSales(orderId) {
+      this.serviceVisible = true
+      this.orderId = Number(orderId)
+    },
+    cancelAfterSales() {
+      this.serviceVisible = false
+      this.aftermarketReason = ""
+    },
+    confirmAfterSales(orderId) {
       const that = this
-      uni.showModal({
-        title: '提示',
-        content: '你确定要申请售后吗？',
-        success: function (res) {
-          if (res.confirm) {
-            aftermarketOrder({
-              orderId: Number(orderId)
-            }).then(() => {
-              that.mescroll.resetUpScroll()
-              that.mescroll.scrollTo(0, 300)
-            })
-          } else if (res.cancel) {
-            console.log('用户点击取消');
-          }
-        }
-      });
-
+      aftermarketOrder({
+        orderId: this.orderId,
+        aftermarketReason: this.aftermarketReason
+      }).then(() => {
+        this.serviceVisible = false
+        that.mescroll.resetUpScroll()
+        that.mescroll.scrollTo(0, 300)
+      })
     },
     cancelAftermarketOrder(orderId) {
       const that = this
@@ -441,8 +455,7 @@ export default {
           color: #9EA3B1;
         }
 
-        .order-middle-right {
-        }
+        .order-middle-right {}
       }
 
       .order-bottom {
@@ -497,19 +510,31 @@ export default {
 }
 
 .progress-container {
-  width: 40rpx; /* 可按需调整宽度 */
-  height: 20rpx; /* 可按需调整高度 */
-  background-color: #f26522; /* 橙色，类似图中颜色，可按需调整 */
-  border-radius: 20px; /* 圆角，让边角变圆润 */
+  width: 40rpx;
+  /* 可按需调整宽度 */
+  height: 20rpx;
+  /* 可按需调整高度 */
+  background-color: #f26522;
+  /* 橙色，类似图中颜色，可按需调整 */
+  border-radius: 20px;
+  /* 圆角，让边角变圆润 */
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 20rpx; /* 文字大小，可按需调整 */
-  color: white; /* 文字颜色 */
-  font-weight: bold; /* 文字加粗 */
+  font-size: 20rpx;
+  /* 文字大小，可按需调整 */
+  color: white;
+  /* 文字颜色 */
+  font-weight: bold;
+  /* 文字加粗 */
 }
-.btn{
+
+.btn {
   border-radius: 36rpx;
 }
 
+.service-box {
+  width: 100%;
+  display: flex;
+}
 </style>

pages/order/orderDetail.vue

@@ -88,9 +88,9 @@
 				<view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='SHOOTING'"
 					@click.stop="handleAftermarketOrder(orderInfo.orderId)">申请售后
 				</view>
-				<view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='DELIVERED'"
+				<!-- <view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='DELIVERED'"
 					@click.stop="handleAftermarketOrder(orderInfo.orderId)">申请售后
-				</view>
+				</view> -->
 				<view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='WAIT_CHECK'"
 					@click.stop="handleAftermarketOrder(orderInfo.orderId)">申请售后
 				</view>

pages/user/index.vue

@@ -43,10 +43,10 @@
       </view>
       <!-- <view v-if="realName" class="outline" @click="outLogin()">退出登录</view> -->
     </view>
-    <u-modal :show="serviceVisible" title="联系客服" :closeOnClickOverlay="true" @confirm="serviceVisible=false">
+    <u-modal :show="serviceVisible" title="联系客服" :closeOnClickOverlay="true" :showConfirmButton="false" @close="serviceVisible=false">
       <view class="slot-content">
         <view class="flex-center service-box">
-          <img src="" alt="">
+          <img :src="wxchatImg" alt="">
         </view>
       </view>
     </u-modal>
@@ -63,6 +63,7 @@ export default {
       serviceVisible: false,
       realName: uni.getStorageSync('realName'),
       token: uni.getStorageSync('token'),
+      wxchatImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_kefu.png",
       bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
       logoImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_logo%403x.png",
       tongzhi: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_tongzhi%403x.png",
@@ -343,6 +344,6 @@ export default {
 
 .service-box img {
   width: 300rpx;
-  height: 300rpx;
+  // height: 300rpx;
 }
 </style>