小程序角色页面

pages.json

@@ -103,6 +103,14 @@
 				"navigationBarTitleText" : "",
 				"enablePullDownRefresh" : false
 			}
+		},
+		{
+			"path" : "practice/practice",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"enablePullDownRefresh" : false
+			}
 		}]
 	}],
 	"globalStyle": {

pages/my/my.vue

@@ -4,7 +4,7 @@
 	  <view class="mainwrap2">
 	    <view class="perinfo"> <span class="type-name"><img :src="avatarUrl"></img></span>
 	      <view class="dycd"> <span class="myname">{{name}}</span>
-	        <view class="myitem"> <span>勋章：2<i></i></span> <span>挑战历史：3</span> </view>
+	        <view class="myitem"> <span @click="showMedal()">勋章：{{medalNum}}<i></i></span> <span>挑战历史：3</span> </view>
 	      </view>
 	    </view>
 	    <view class="banbox_sec perinfo">

subpkg/address/address.vue

@@ -2,7 +2,7 @@
   <view class="cart-container">
     <!-- 选择收货地址的盒子 -->
     <view class="address-choose-box">
-      <button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+</button>
+      <button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">新增地址+</button>
     </view>
 
     <!-- 底部的边框线 -->

subpkg/list/list.vue

@@ -22,7 +22,7 @@
 		<!-- 场景区域 -->
 		<view class="nav-list">
 		  <view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)">
-		    <image :src="item" class="nav-img"></image>
+		    <image :src="item.uploadPath" class="nav-img"></image>
 		  </view>
 		</view>
 		
@@ -68,7 +68,7 @@
 				this.sceneList = []
 				res.data.forEach(item=>{
 					item.uploadPath = uni.$http.baseUrl +item.uploadPath
-					this.sceneList.push(item.uploadPath)
+					this.sceneList.push(item)
 				})
 				
 				uni.$showMsg('数据请求成功！')
@@ -83,7 +83,7 @@
 			navClickHandler(item) {
 				if(item !== ""){
 					uni.navigateTo({
-					   url:'/subpkg/role/role'
+					  url: '/subpkg/role/role?guid=' + item.guid+'&name='+item.name
 					})
 				}
 			},

subpkg/practice/practice.vue

@@ -0,0 +1,49 @@
+<template>
+	<view>
+		<view class="video-wrapper" id="video-container">
+		</view>
+		<sVideo jsonId="6215c8757e8947c8aae0fd0b3d2d503b"></sVideo>
+
+		<tabbar :page="page"></tabbar>
+	</view>
+</template>
+
+<script>
+	import tabbar from "@/components/tabbar/tabbar.vue";
+	import sVideo from "@/components/s-video/s-video.vue";
+	export default {
+
+		data() {
+			return {
+				page: "",
+			};
+		},
+		onReady() {
+			this.QR();
+		},
+		onShow() {
+			this.page = "scan"
+		},
+		methods: {
+			QR() {
+				// uni.scanCode({
+				// 	onlyFromCamera: true,
+				// 	success: (res) => {
+				// 		console.log('扫描二维码成功,结果:' + res.result);
+				// 	},
+				// 	error: (res) => {
+				// 		console.log('扫描二维码出现错误')
+				// 	}
+				// })
+			},
+		},
+		components: {
+			tabbar,
+			sVideo
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

subpkg/role/role.vue

@@ -1,49 +1,274 @@
 <template>
-	<view>
-		<view class="video-wrapper" id="video-container">
-		</view>
-		<sVideo jsonId="6215c8757e8947c8aae0fd0b3d2d503b"></sVideo>
-
-		<tabbar :page="page"></tabbar>
+<view class="role-container">
+	<view class="wrap">
+	    <view class="secbar"> <span class="back" onclick="location='scene.html'"></span></view>
+	    <view class="mainwrap3"> 
+	      <img src="/static/images/bg_role.jpg" alt="" />
+	      <view class="role_wrap">
+	        <view class="<strong>contit</strong>">请选择您在“<block style="color:#fd6d1f;">{{sceneName}}</block>”演练中的角色：</view>
+	        <view class="role_box"> 
+			   <block class="role-item" v-for="(item,i) in roleList" :key="i">
+				<span>{{item.name}}</span>
+			   </block>
+			</view>
+	        <view class="more_role" @click="showMoreRole()"><a>更多角色</a></view>
+	      </view>
+	    
+	       <view class="startbtn"><image src="/static/images/btn_start.png"></image><a @click="startPractice()">开始演练</a></view> 
+	    </view>
+	  
+	      <view class="cnote">题目来源：深圳市******有限公司</view>  
 	</view>
+	
+	<view class="maskbox"></view>
+	<view class="popbox"  v-if="this.showMore == 1">
+	   <view class="poptit">选择角色<a class="closea"></a></view>
+	   <view class="subsearch">
+	        <input class="msearchbox" placeholder="搜索角色" name="keyword" id="" onclick="">
+	   </view>
+	   <view class="role_cont">
+	       <h5>角色分类一</h5>
+	       <view class="role_item">
+	       <span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
+	       <span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
+	       <span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
+	       </view>
+	       <h5>角色分类二</h5>
+	       <view class="role_item">
+	       <span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
+	       <span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
+	       <span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
+	       </view>
+	       <h5>角色分类三</h5>
+	       <view class="role_item">
+	       <span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
+	       <span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
+	       <span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
+	       </view>
+	   </view>
+	   <view class="onebtn">确定</view>
+	</view>  
+</view>
+	<!-- <view>
+		<view class="role-list">
+			<view class="role-item" v-for="(item,i) in roleList" :key="i"  @click="navClickHandler(item)">
+				<image :src="item" class="scene-img"></image>
+			</view>
+		</view>
+	</view> -->
 </template>
 
 <script>
-	import tabbar from "@/components/tabbar/tabbar.vue";
-	import sVideo from "@/components/s-video/s-video.vue";
 	export default {
 
 		data() {
 			return {
-				page: "",
+			   showMore: 0,
+			   sceneId:"",
+			   sceneName:"",
+			   roleId:"",
+			   roleList:[]
 			};
 		},
-		onReady() {
-			this.QR();
-		},
-		onShow() {
-			this.page = "scan"
+		onLoad(options) {
+		  this.sceneId = options.guid
+		  this.sceneName = options.name
+		  this.getSwiperList();
 		},
 		methods: {
-			QR() {
-				// uni.scanCode({
-				// 	onlyFromCamera: true,
-				// 	success: (res) => {
-				// 		console.log('扫描二维码成功,结果:' + res.result);
-				// 	},
-				// 	error: (res) => {
-				// 		console.log('扫描二维码出现错误')
-				// 	}
-				// })
+			showMoreRole(){
+				this.showMore = 1
 			},
-		},
-		components: {
-			tabbar,
-			sVideo
+			async getSwiperList() {
+			    
+				const {
+					data: res
+				} = await uni.$http.post('/small/project/role/listAll',{sceneId: this.sceneId})
+				if (!res.success) return uni.$showMsg()
+			
+				this.roleList = res.data
+				//uni.$showMsg('数据请求成功！')
+			},
+			startPractice(item) {
+			  uni.navigateTo({
+			    url: '/subpkg/practice/practice?roleId='+this.roleId
+			  })
+			}
 		}
 	}
 </script>
 
 <style lang="scss">
+	
+.mainwrap3 {
+	height: calc(100% - 70px);
+	overflow: hidden;
+}
+
+.mainwrap3 > img {
+	width: 100%;
+	height: 1000rpx;
+	border-radius: 0;
+}
+
+.role_wrap {
+	position: absolute;
+	top: 47.5%;
+	width: 100%;
+}
+
+.role_box {
+	margin: 1% 0 2% 4%;
+	width: 96%;
+}
+
+.role_box span {
+	display: inline-block;
+	margin: 1% 0 0 3%;
+	padding: 1.5% 4.5%;
+	border: 1px solid #1367fe;
+	border-radius: 8px;
+	color: #1367fe;
+}
+
+.role_box span.seled {
+	background: #1367fe;
+	color: #fff;
+}
+
+.more_role {
+	margin: 5% 0;
+	width: 100%;
+	height: 3rem;
+	border-bottom: 1px dotted #7eaafb;
+	text-align: center;
+}
+
+.more_role a {
+	display: inline-block;
+	margin: 0 auto;
+	padding: 2% 8% 2% 3%;
+	background: #a6c5fd url(/static/images/arrow-b.png) no-repeat right 10% center;
+	background-size: auto 40%;
+	border-radius: 8px;
+	color: #2e6ddd;
+}
+
+.startbtn {
+	position: relative;
+	z-index: 1;
+	bottom: 35%;
+	width: 100%;
+	height: 30%;
+	background:no-repeat 47.5% center;
+	background-size: 60% auto;
+	text-align: center;
+	opacity: .5;
+}
+
+.startbtn.active {
+	opacity: 1;
+}
+
+.startbtn a {
+	display: inline-block;
+	position: relative;
+	top: 15%;
+	width: 30%;
+	height: 40%;
+	line-height: 30rem;
+	overflow: hidden;
+}
+
+.cnote {
+	position: absolute;
+	bottom: 2%;
+	width: 100%;
+	color: rgba(255, 255, 255, .6);
+	font-size: 0.75rem;
+	text-align: center;
+}
+
+.maskbox {
+	display: none;
+	position: absolute;
+	z-index: 10000;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, .5);
+}
+
+.popbox {
+	display: none;
+	position: absolute;
+	z-index: 10001;
+	bottom: 0;
+	width: 100%;
+	max-height: 80%;
+	min-height: 50%;
+	background: #fff;
+	border-radius: 20px 20px 0 0;
+}
+
+.poptit {
+	position: relative;
+	width: 100%;
+	height: 3rem;
+	line-height: 2.5;
+	text-align: center;
+	font-size: 1.1rem;
+	font-weight: 600;
+	border-bottom: 1px solid #f3f4f5;
+}
+
+.poptit a.closea {
+	position: absolute;
+	top: 20%;
+	right: 1rem;
+	width: 1.75rem;
+	height: 1.75rem;
+	background: url(/static/images/icon_60add.png) no-repeat;
+	background-size: 100%;
+	transform: rotateZ(45deg);
+}
+
+.role_cont h5 {
+	margin: 0 3% 2%;
+	font-size: 1.0rem;
+}
+
+.role_item {
+	margin: 1% 0 5% 0;
+}
+
+.role_item span {
+	display: inline-block;
+	margin: 1% 0 2% 3%;
+	padding: 1.5% 3.5%;
+	background: #f2f3f4;
+	border: 0;
+	border-radius: 8px;
+	color: #4c4c4c;
+}
+
+.role_item span.selrole {
+	background: #e9f2fb;
+	color: #1367fe;
+}
+
+.popbox .onebtn {
+	position: relative;
+	bottom: 1vw;
+	background: #1367fe;
+	width: 94%;
+	border-radius: 30px;
+	color: #fff;
+	text-align: center;
+	margin: 3% 3%;
+	line-height: 3.0;
+	letter-spacing: 2px;
+}
 
 </style>