kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更多角色样式

h5_css
yanyan 3 years ago
parent
174be43a83
commit
a0cf278743
1 changed files with 36 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      subpkg/role/role.vue

74
subpkg/role/role.vue
View File

@ -8,56 +8,37 @@
<view class="<strong>contit</strong>">请选择您在“<font style="color:#fd6d1f;">{{sceneName}}</font>”演练中的角色：</view> <view class="<strong>contit</strong>">请选择您在“<font style="color:#fd6d1f;">{{sceneName}}</font>”演练中的角色：</view>
<view class="role_box"> <view class="role_box">
<block class="role-item" v-for="(item,i) in roleList" :key="i"> <block class="role-item" v-for="(item,i) in roleList" :key="i">
<span :class="item.choose === 'true' ? 'change_color':''" @click="chooseRole(item)">{{item.name}}</span> <span :class="item.choose === 'true' ? 'change_color':''" @click="chooseRole(item)" v-if="i<3">{{item.name}}</span>
<!-- <span class="spanitem" @click="chooseRole(item)">{{item.name}}</span> --> <!-- <span class="spanitem" @click="chooseRole(item)">{{item.name}}</span> -->
</block> </block>
</view> </view>
<view class="more_role" @click="showMoreRole()"><a>更多角色</a></view> <view class="more_role" @click="showMoreRole()" v-if="showButton"><a>更多角色</a></view>
</view> </view>
<!-- <view class="startbtn"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view> --> <!-- <view class="startbtn"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view> -->
<view :class="practice"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view> <view :class="practice"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view>
</view> </view>
<view class="cnote">题目来源：深圳市******有限公司</view> <view class="cnote">题目来源：深圳市******有限公司</view>
</view> </view>
<view class="maskbox"></view> <view class="maskbox"></view>
<view class="popbox" v-if="this.showMore == 1"> <view class="popbox" v-if="showMore==1">
<view class="poptit">选择角色<a class="closea"></a></view> <view class="poptit">选择角色<a class="closea"></a></view>
<view class="subsearch"> <view class="subsearch">
<input class="msearchbox" placeholder="搜索角色" name="keyword" id="" onclick=""> <!-- <uni-search-bar class="msearchbox" @confirm="search" @input="input" cancel-button="none"></uni-search-bar> -->
<input class="msearchbox" placeholder="搜索角色" v-model="roleName" id="" onclick="" @input="input()">
</view> </view>
<view class="role_cont"> <view class="role_cont">
<h5>角色分类一</h5> <!-- <h5>角色分类一</h5> -->
<view class="role_item"> <view class="role_item">
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span> <block v-for="(item,i) in roleList" :key="i">
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span> <span :class="item.choose === 'true' ? 'change_color':''" @click="chooseRole(item)">{{item.name}}</span>
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span> </block>
</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> </view>
<view class="onebtn">确定</view> <view class="onebtn" @click="close()">确定</view>
</view> </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> </template>
<script> <script>
@ -65,9 +46,11 @@
data() { data() {
return { return {
showButton: false,
showMore: 0, showMore: 0,
sceneId:"", sceneId:"",
sceneName:"", sceneName:"",
roleName:"",
roleId:"", roleId:"",
roleList:[], roleList:[],
practice:"startbtn" practice:"startbtn"
@ -76,19 +59,19 @@
onLoad(options) { onLoad(options) {
this.sceneId = options.guid this.sceneId = options.guid
this.sceneName = options.name this.sceneName = options.name
this.getSwiperList(); this.getRoleList();
}, },
methods: { methods: {
showMoreRole(){ async getRoleList() {
this.showMore = 1
},
async getSwiperList() {
const { const {
data: res data: res
} = await uni.$http.post('/small/project/role/listAll',{sceneId: this.sceneId}) } = await uni.$http.post('/small/project/role/listAll',{sceneId: this.sceneId,name:this.roleName})
if (!res.success) return uni.$showMsg() if (!res.success) return uni.$showMsg()
if (res.data.length > 3) {
this.showButton = true
}
res.data.forEach(item=>{ res.data.forEach(item=>{
this.$set(item, 'choose', 'false') this.$set(item, 'choose', 'false')
}) })
@ -121,6 +104,21 @@
delta:1,//返回层数，2则上上页 delta:1,//返回层数，2则上上页
}) })
}, },
showMoreRole(){
this.showMore = 1
this.getRoleList()
},
close() {
this.showMore = 0
this.roleName = ""
},
input(){
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.getRoleList()
}, 500)
},
} }
} }
</script> </script>
@ -177,7 +175,7 @@
} }
.more_role { .more_role {
margin: 5% 3%; margin: 2% 3%;
width: 94%; width: 94%;
height: 3rem; height: 3rem;
border-bottom: 1px dotted #96b9fb; border-bottom: 1px dotted #96b9fb;
@ -241,7 +239,7 @@
} }
.popbox { .popbox {
display: none; // display: none;
position: absolute; position: absolute;
z-index: 10001; z-index: 10001;
bottom: 0; bottom: 0;

Write Preview
Loading…
Cancel
Save