306 lines
6.9 KiB
Vue
306 lines
6.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="titleWrap">后勤保障服务清单与能力需求</view>
|
||
|
||
<view class="main">
|
||
<view v-for="(item,index) in kinds">
|
||
<view class="moduleTitle">{{getChinese(index+1)}}、{{item.name}}</view>
|
||
<view v-for="(subItem,subIndex) in item.subSelectorList">
|
||
<view class="levelWrap" v-for="(levelItem,levelIndex) in subItem.levelList">
|
||
<view class="prodctionTitle">{{subIndex+1}}. {{subItem.name}}-{{levelItem.name}}</view>
|
||
<view class="uni-list prodsList" v-if="levelItem.name != '跳过'">
|
||
<checkbox-group style="word-break: keep-all;">
|
||
<label class="produnctionWrap" v-for="(prodItem,prodIndex) in levelItem.prods" :key="item.value">
|
||
<checkbox disabled="true" class="productionCheckbox" :value="prodItem.value" :checked="prodItem.isChecked==1?true:false" />{{prodItem.name}}
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
<view class="uni-list skipWrap" v-if="levelItem.name == '跳过'">
|
||
暂未选择产品
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="mid_view">
|
||
<view class="tab_left">
|
||
姓 名：<!-- <text style="color: red;position: absolute;">*</text> -->
|
||
</view>
|
||
<view class="tab_rig">
|
||
<input class="tab_text" v-model="userName" placeholder="请填写姓名" maxlength="10" />
|
||
</view>
|
||
</view>
|
||
<view class="mid_view">
|
||
<view class="tab_left">
|
||
手机号：<!-- <text style="color: red;position: absolute;">*</text> -->
|
||
</view>
|
||
<view class="tab_rig">
|
||
<input class="tab_text" v-model="userPhone" type="number" placeholder="请填写手机号码" maxlength="11"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="footer-box left" @click="goBack()">
|
||
<text>上一步</text>
|
||
</view>
|
||
<view class="footer-box right" @click="wxShare()">
|
||
<text>确认</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { wechatJsSdk2,getChoosedProdunctions } from '@/common/api.js';
|
||
import { callbackRequest, alertTip, sureAlterTip, getStorage ,setStorage,transformNum2Chinese,devEnv} from '@/common/util.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
kinds:[],
|
||
choosedLevelIdList:[],
|
||
choosedLevelIds:[],
|
||
userId:'',
|
||
userName:'',
|
||
userPhone:'',
|
||
applyId:'',
|
||
}
|
||
},
|
||
onLoad:function (option) { //option为object类型，会序列化上个页面传递的参数
|
||
let self = this;
|
||
self.applyId = option.applyId;
|
||
self.getChoosedProdunctions();
|
||
|
||
if(!devEnv){
|
||
self.getWechatJsSdk();
|
||
}
|
||
else{
|
||
this.locationDetail='安徽省合肥市蜀山区';
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
//获取微信sdk
|
||
getWechatJsSdk(){
|
||
let url = window.location.href.split("#")[0]; // 这里务必编码
|
||
let data = {
|
||
method:wechatJsSdk2,
|
||
data:{
|
||
url:url
|
||
}
|
||
}
|
||
callbackRequest(data)
|
||
.then(res => {
|
||
|
||
if(res.data.returnCode == 1){
|
||
let e = res.data.returnData;
|
||
this.init(e);
|
||
|
||
}
|
||
console.log("---end get location---")
|
||
})
|
||
},
|
||
//分享信息
|
||
wxShare(){
|
||
var self = this;
|
||
self.$wx.onMenuShareTimeline({
|
||
title: '1', // 分享标题
|
||
// desc: '2', // 分享描述
|
||
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
||
imgUrl: '', // 分享图标
|
||
// type:'',
|
||
// dataUrl:'',
|
||
success:function(locationRes){
|
||
console.log("分享成功")
|
||
},
|
||
fail:function(){
|
||
console.log("分享失败")
|
||
}
|
||
})
|
||
},
|
||
init(e){
|
||
let _this = this;
|
||
this.$wx.config({
|
||
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
||
appId: e.appId, // 必填，公众号的唯一标识
|
||
timestamp: e.timestamp, // 必填，生成签名的时间戳
|
||
nonceStr: e.noncestr, // 必填，生成签名的随机串
|
||
signature: e.signature,// 必填，签名
|
||
jsApiList: ["onMenuShareTimeline"
|
||
] // 必填，需要使用的JS接口列表
|
||
});
|
||
this.$wx.ready(function(){
|
||
console.log("验证通过")
|
||
_this.$wx.checkJsApi({
|
||
jsApiList:["onMenuShareTimeline"
|
||
] , // 需要检测的JS接口列表，所有JS接口列表见附录2,
|
||
success: function(res) {
|
||
console.log(res);
|
||
|
||
|
||
},
|
||
fail:function(e){
|
||
console.log(e);
|
||
|
||
}
|
||
});
|
||
});
|
||
this.$wx.error(function(res){
|
||
console.log("验证失败")
|
||
|
||
});
|
||
|
||
},
|
||
getChoosedProdunctions(){
|
||
let self = this;
|
||
let data = {
|
||
method: getChoosedProdunctions,
|
||
data: {
|
||
applyId: self.applyId
|
||
}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
let result = res.data.returnData;
|
||
this.kinds = result.list;
|
||
console.log(this.kinds);
|
||
|
||
|
||
if(result){
|
||
this.userId=result.userId;
|
||
this.userName=result.userName;
|
||
this.userPhone=result.userPhone;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
goBack(){
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
getChinese(value){
|
||
return transformNum2Chinese(value);
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
uni-checkbox-group uni-label{
|
||
width: 33% !important;
|
||
display: inline-flex;
|
||
padding:20upx 0;
|
||
text-align: left;
|
||
line-height: 46upx;
|
||
display:inline-block;
|
||
}
|
||
|
||
.container {
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
background: #f8f8f8;
|
||
|
||
.produnctionWrap{
|
||
font-size: 24upx;
|
||
text-align: center;
|
||
}
|
||
.productionCheckbox{
|
||
transform:scale(0.7);
|
||
}
|
||
|
||
.titleWrap{
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 36upx;
|
||
padding:20upx 0upx;
|
||
border-bottom: solid #CFCFCF 1px;
|
||
}
|
||
|
||
.main {
|
||
position: absolute;
|
||
// margin: 42upx 40upx 0;
|
||
width: 100%;
|
||
height:100%;
|
||
}
|
||
|
||
.moduleTitle{
|
||
text-align: center;
|
||
margin: 24upx 0;
|
||
}
|
||
|
||
.prodctionTitle{
|
||
text-align: left;
|
||
margin-left: 30upx;
|
||
font-size: 30upx;
|
||
margin-top: 20upx;
|
||
}
|
||
|
||
.levelWrap{
|
||
border-bottom:1px solid #eee;
|
||
}
|
||
|
||
.skipWrap{
|
||
text-align: center;
|
||
font-size: 30upx;
|
||
margin:20upx 0;
|
||
}
|
||
|
||
.right{
|
||
right:20upx;
|
||
}
|
||
|
||
.left{
|
||
left:20upx;
|
||
}
|
||
|
||
.footer-box {
|
||
position: fixed;
|
||
bottom: 5upx;
|
||
border-radius: 10upx;
|
||
width: 45%;
|
||
height: 80upx;
|
||
background: #348ff1;
|
||
text-align: center;
|
||
line-height: 80upx;
|
||
|
||
text {
|
||
font-size: 30upx;
|
||
color: #fff;
|
||
vertical-align: middle;
|
||
padding-left: 10upx;
|
||
}
|
||
}
|
||
|
||
.mid_view {
|
||
padding: 3vw 0;
|
||
display: flex;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 26upx;
|
||
}
|
||
|
||
.tab_left {
|
||
width: 25vw;
|
||
text-align: right;
|
||
margin-right: 3vw;
|
||
line-height:50rpx;
|
||
}
|
||
|
||
.tab_rig {
|
||
width: 55vw;
|
||
line-height:50rpx;
|
||
input{
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.tab_text{
|
||
font-size:26upx;
|
||
}
|
||
}
|
||
</style>
|