Просмотр исходного кода

1.更换测试环境
2.添加首页视频功能
3.添加详情页图片视频轮播功能

306132416@qq.com лет назад: 5
Родитель
Сommit
9c3ce10ee7
3 измененных файлов с 77 добавлено и 31 удалено
  1. 2 2
      App.vue
  2. 37 2
      pages/index/detailPage/index.vue
  3. 38 27
      pages/index/index.vue

+ 2 - 2
App.vue

@@ -2,8 +2,8 @@
 	var md5 = require("./common/md5.js");
 	export default {
 		globalData: {  //https://stock.xazhima.com/
-		    shareUrl:'https://f.xazhima.com/api/api.php',
-			//shareUrl: 'https://fenxiao.xazhima.com/api/api.php', //开发环境全局接口域名 线上:https://f.xazhima.com/api/api.php
+		    //shareUrl:'https://f.xazhima.com/api/api.php',
+			shareUrl: 'https://fenxiao.xazhima.com/api/api.php', //开发环境全局接口域名 线上:https://f.xazhima.com/api/api.php
 			globalTimestamp: (Date.now()).toString(),
 			user_id: '',
 			open_id:'',

+ 37 - 2
pages/index/detailPage/index.vue

@@ -1,7 +1,19 @@
 
 <template>
 	<view class="content">
-		<image class="logo" :src="detailObj.picture" mode='aspectFill'></image>
+		<!-- <image class="logo" :src="detailObj.picture" mode='aspectFill'></image> -->
+		<view class="page-section-spacing" style="width: 100%;">
+		 	<swiper class="swiper" 
+		 		indicator-dots="true" 
+		 		duration="1500"	>
+				<swiper-item>
+							<video :src="detailObj.video" id="myVideo" controls='true' ></video>
+				</swiper-item>
+		 		<swiper-item v-for="(item , index) in detailObj.picture" :key="index">
+		 			<image :src="item" mode="aspectFill" style="width: 100%;height: 100%;"></image>
+		 		</swiper-item>
+		 	</swiper>
+		 </view>
 		<view class="detail-title" @longpress="copyTitle">
 			<text class="detail-font">{{detailObj.desc || '-'}}</text>
 		    <text class="price-style">¥{{detailObj.money || '-'}}</text> 
@@ -70,6 +82,14 @@
 		data() {
 			return {
 				title: 'Hello',
+				homeSlide: [
+					{
+						img:'https://f.xazhima.com/userfiles/upload/indexpic/202005251006524535.jpg'
+					},
+					{
+						img:'https://f.xazhima.com/userfiles/upload/indexpic/202005251007104506.jpg'
+					},
+				], // 定义值接收轮播图数据
 				detailObj:{},
 				shareContent:'',
 				shareCode:'',
@@ -252,7 +272,7 @@
 		justify-content: center;
 		align-items: center;
 		width: 80%;
-		height: 300upx;
+		min-height: 300upx;
 		border: 1px dashed red;
 		background: #fff;
 		font-size: 28rpx;
@@ -362,4 +382,19 @@
 		color: #666;
 		font-size: 30rpx;
 	}
+	.swiper{
+		height: 400upx;
+	}
+	
+	.swiper-item image{
+		width: 100%;
+		height: 400upx;
+	}
+	#myVideo {
+		width: 100%;
+		height: 400rpx;
+	/* 	height: 360rpx;
+		margin-bottom: 20rpx;
+		border-radius: 10rpx; */
+	}
 </style>

+ 38 - 27
pages/index/index.vue

@@ -1,7 +1,11 @@
 <template>
 	<view class="content">
 		<image class="logo" :src="pageInfo.picture" mode="widthFix"></image>
-		<view class="share-box">
+	
+	  
+	   <video :src="pageInfo.video" id="myVideo" controls='true' ></video>
+	 
+	   <view class="share-box">
 			<!-- <view>分销商分享给好友,好友购买产品成功后即可获</view>
 			<view>得分享奖励</view>
 			<view>单笔最高可赚¥200.00</view>
@@ -80,33 +84,21 @@
 			return {
 				title: 'Hello',
 				pageInfo:{},
+				homeSlide: [
+					{
+						img:'https://f.xazhima.com/userfiles/upload/indexpic/202005251006524535.jpg'
+					},
+					{
+						img:'https://f.xazhima.com/userfiles/upload/indexpic/202005251007104506.jpg'
+					},
+				], // 定义值接收轮播图数据
+				indicatorDots: true,
+				autoplay: true,
+				interval: 2000,
+				duration: 500,	
 				isAuth:getApp().globalData.isAuth,
 				isAuthPhone:getApp().globalData.user_phone,
 				productList:[
-					// {   
-					// 	id:'1',
-					// 	imgUrl:'/static/bed-bg.png',
-					// 	productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
-					// 	price:'13999'
-					// },
-					// {   
-					// 	id:'2',
-					// 	imgUrl:'/static/bed2-bg.png',
-					// 	productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
-					// 	price:'15999'
-					// },
-					// {   
-					// 	id:'3',
-					// 	imgUrl:'/static/bed-bg.png',
-					// 	productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
-					// 	price:'16999'
-					// },
-					// {   
-					// 	id:'4',
-					// 	imgUrl:'/static/bed2-bg.png',
-					// 	productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
-					// 	price:'18999'
-					// }
 				]
 			}
 		},
@@ -128,6 +120,18 @@
 			    }
 		},
 		methods: {
+			 changeIndicatorDots(e) {
+			            this.indicatorDots = !this.indicatorDots
+			        },
+			changeAutoplay(e) {
+			            this.autoplay = !this.autoplay
+			        },
+			intervalChange(e) {
+			            this.interval = e.target.value
+			        },
+			durationChange(e) {
+			            this.duration = e.target.value
+			        },
 			getShareInfo(uid){
 				uni.request({
 					url: getApp().globalData.shareUrl, //需要设置为全局
@@ -364,8 +368,8 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		width: 80%;
-		height: 300upx;
+		width: 88%;
+		min-height: 300upx;
 		border: 1px dashed red;
 		background: #fff;
 		font-size: 28rpx;
@@ -485,5 +489,12 @@
 		color: #666;
 		font-size: 30rpx;
 	}
+	#myVideo {
+		width: 91%;
+		height: 360rpx;
+		margin-bottom: 20rpx;
+		border-radius: 10rpx;
+
+	}
 </style>