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>
|