vue + vant + jq 实际项目开发

最新推荐文章于 2024-04-05 09:47:13 发布

羽下佳人

最新推荐文章于 2024-04-05 09:47:13 发布

阅读量1k

点赞数

分类专栏： js框架 - Vue

本文链接：https://blog.csdn.net/zjl199303/article/details/105812870

版权

js框架 - Vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

项目结构：

1、html页面
2、js 当前页面主要逻辑
3、common.js  公共逻辑， jq写法
   ① 过滤器
   ② 公共方法
4、component.js  公共组件

1、html页面：index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
		<title>vue</title>
		<link rel="stylesheet" href="../css/vant.min.css">
		<link rel="stylesheet" href="../css/style.css">
	</head>
	<body>
		<div id="app" class="home index">
			<img src="../images/index/image_image.png" class="banner">
			<van-grid column-num="3" square>
				<van-grid-item icon="../images/index/icon-xm_45.png" :info="xmgl_info" text="协同项目管理" url="project/db_index.html" v-if="authLimit.xmgl"></van-grid-item>
				<van-grid-item icon="../images/index/icon-xmcx.png" text="协同项目查询" url="project/xmcx.html" v-if="authLimit.xmcx"></van-grid-item>
				<van-grid-item icon="../images/index/icon_xsj.png" text="项目全景视图" url="project/panorama.html" v-if="authLimit.xmt"></van-grid-item>
				<van-grid-item icon="../images/index/icon_kh.png" :info="khgl_info" text="战略客户管理" url="customer/db_index.html" v-if="authLimit.yhgl"></van-grid-item>
				<van-grid-item icon="../images/index/icon_khcx.png" text="战略客户查询" url="customer/khcx.html" v-if="authLimit.yhcx"></van-grid-item>
				<van-grid-item icon="../images/index/icon_ksj.png" text="客户全景视图" url="customer/panorama.html" v-if="authLimit.yht"></van-grid-item>
			</van-grid>
			<no-content src="../images/no_cont.png" classname="banner_bot_no_content" 
				v-if="!authLimit.xmgl && !authLimit.xmcx && !authLimit.xmt && !authLimit.yhgl && !authLimit.yhcx && !authLimit.yht" />
		</div>

		<script src="../js/common/jquery.min.js"></script>
		<script src="../js/common/vue.js"></script>
		<script src="../js/common/vant.min.js"></script>
		<script src="../js/common/common.js"></script>
		<script src="../js/common/component.js"></script>
		<script src="../js/index.js"></script>
	</body>
</html>

2、当前页面js逻辑 index.js

new Vue({
	el: '#app',
	data() {
		return {
			xmgl_info: 0,
			khgl_info: 0,
			khgl_db: {},
			authLimit: {}
		};
	},
	methods: {
		
	},
	mounted() {
		this.authLimit = getAuthListByUserIdApp(this);
		if(this.authLimit.xmgl){
			getFq(this);
			getLx(this);
			getJz(this);
			getJx(this);
			// 单独处理：其他方法精确到人，此方法精确到部门 需判断是否有此权限
			if(this.authLimit.xmfq_lx) getLcLx(this);
			this.xmgl_info = xmgl_info == 0 ? '' : xmgl_info;
		}
		if(this.authLimit.yhgl){
			getXx(this);    // 客户录入
			getFw(this);    // 客户服务
			getLxr(this);    // 客户联系人变更
			this.khgl_info = khgl_info == 0 ? '' : khgl_info;
		}
		
	}
});

3、common.js

$(function(){
	// 解决手机端返回上一页后，页面不刷新问题
	window.addEventListener('pageshow', function(event) {
		// alert(event.persisted + "-" + JSON.stringify(window.performance)  + " - " + window.performance.navigation.type);
		if (event.persisted || window.performance &&  window.performance.navigation.type == 2) {
			//如果检测到页面是从“往返缓存”中读取的，刷新页面
			window.location.reload(); 
		}
	});
	
	// 校验用户登录状态
	if(location.href.indexOf("/login.html") == -1 && location.href.indexOf("/psd.html") == -1) getUser();
});

// vue filters - 项目类型
Vue.filter('projectType', function(value,type){
	var types = getProjectTypes();
	var desp = [];
	for(var d in types){
		if(value == types[d].id){
			desp[0] = types[d].name;
			break;
		}
	}
	return type == "str" ? desp[0] : desp;
});

// vue filters - 项目类型
Vue.filter('projectType', function(value,type){
	var types = getProjectTypes();
	var desp = [];
	for(var d in types){
		if(value == types[d].id){
			desp[0] = types[d].name;
			break;
		}
	}
	return type == "str" ? desp[0] : desp;
});


// 获取项目类型
function getProjectTypes(){
	var types = [];
	$.ajax({
		type:"POST",
		url: "/scabcmp/protype/getAllType",
		dataType: "json",
		data: {
			code: "xmlx"
		},
		async: false,
		success:function(result){
			if(result.ret.succeed){
				for(var d in result.list){
					var d = {
						id : result.list[d].id,
						name : result.list[d].name
					}
					types.push(d);
				}
			}else {
				this.$toast(result.ret.retMsg);
			}
		}
	});
	return types;
}

4、component.js

① foot 组件：

// 底部导航栏
Vue.component("foot", {
	props: ["index"],
	data() {
		return {
			footType: "",   // 项目：1； 客户：2
			authLimit: {},
			xtgl_db: {},
			xtgl_lc: {},
			xtgl_db_totle: 0,
			xtgl_lc_totle: 0,
			khgl_db: {},
			khgl_lc: {},
			khgl_db_totle: 0,
			khgl_lc_totle: 0
		}
	},
	template: '<div class="footer">\
				<van-row>\
					<van-col span="8" :class="{active: index==1}">\
						<a href="db_index.html">\
							<van-icon name="../../images/foot/icon_db_selected.png" size="20" v-if="index==1" :info="footType==1 ? xtgl_db_totle : khgl_db_totle"/>\
							<van-icon name="../../images/foot/icon_db_normal.png" size="20" v-else :info="footType==1 ? xtgl_db_totle : khgl_db_totle"/>\
							<p>待办事项</p>\
						</a>\
					</van-col>\
					<van-col span="8" :class="{active: index==2}">\
						<a href="lc_index.html">\
							<van-icon name="../../images/foot/icon_lc_selected.png" size="20" v-if="index==2" :info="footType==1 ? xtgl_lc_totle : khgl_lc_totle"/>\
							<van-icon name="../../images/foot/icon_lc_normal.png" size="20" v-else :info="footType==1 ? xtgl_lc_totle : khgl_lc_totle"/>\
							<p>流程发起</p>\
						</a>\
					</van-col>\
					<van-col span="8" :class="{active: index==3}">\
						<a href="ck_index.html">\
							<van-icon name="../../images/foot/icon_sx_selected.png" size="20" v-if="index==3"/>\
							<van-icon name="../../images/foot/icon_sx_normal.png" size="20" v-else/>\
							<p>事项查看</p>\
						</a>\
					</van-col>\
				</van-row>\
			</div>',
	methods: {
		
	},
	mounted() {
		this.authLimit = getAuthListByUserIdApp(this);
		if(location.href.indexOf("/project/") != -1){
			this.footType = 1;
			getProjectAll(this, this.authLimit);
		}else if(location.href.indexOf("/customer/") != -1){
			this.footType = 2;
			getCustomerAll(this, this.authLimit);
		}
	}
});

② 审批模块：

// approve
Vue.component("approve", {
	props: ["id"],
	data() {
		return {
			result: 1,
			content: ''
		}
	},
	template: '<div class="approve" v-if="id">\
				<p class="title">审批意见</p>\
				<ul>\
					<li :class="{active: result==1}" @click="setopinion(1)">同意</li>\
					<li :class="{active: result==2}" @click="setopinion(2)">不同意</li>\
					<li :class="{active: result==3}" @click="setopinion(3)">退回</li>\
				</ul>\
				<van-cell-group >\
					<van-field v-model="content" rows="4" autosize type="textarea" show-word-limit placeholder="请填写理由"/>\
				</van-cell-group>\
			</div>',
	methods: {
		setopinion: function(index){
			this.result = index;
		},
	}
});

③ 流程状态：

// flow state log
Vue.component("statelog", {
	props: [],
	data() {
		return {
			id: '',
			stateList: [],
			pid: 0,
			workflowType: 0
		}
	},
	template: '<van-steps direction="vertical" :active="-1">\
				<van-list v-for="(item, index) in stateList" :key="item.id">\
					<van-step>\
						<p class="team">{{ stateList.length-index }}. {{ item.worknode_name }}</p>\
						<a class="step" href="javascript:;">\
							<p>操作人：{{ item.name }}</p>\
							<p>状态：{{ item.worknode_status }}</p>\
							<p>接收时间：{{ item.create_time }}</p>\
							<p>操作时间：{{ item.time }}</p>\
							<p>操作耗时：{{ item.spend_time }}</p>\
						</a>\
					</van-step>\
				</van-list>\
			</van-steps>',
	methods: {
		getState: function(){
			if((this.pid > 0) && (this.workflowType > 0)){
				var _this = this;
				$.ajax({
					type:"POST",
					url:"../../../project/getApproveRecords",
					dataType: "json",
					data:{
						projectId: _this.pid,
						workflowType : _this.workflowType
					},
					success:function(result){
						if(result.ret.succeed){
							_this.stateList = result.approveList;
						} else {
							_this.$toast(result.ret.retMsg);
							_this.error = true;
						}
					}
				});
			}
		}
	},
	mounted() {
		this.pid = jQuery.url.param("id");
		this.workflowType = jQuery.url.param("workflowType");
		this.getState(this.id);
	}
});

html页面中调用common.js的过滤器：

<div class="list_one" v-for="(item, index) in list" :key="item.id">
	<a :href="`ck_xxlr_detail.html?id=${item.id}&workflowType=5`" class="xmcx">
		<van-cell-group>
			<img src="../../images/customer/ck/icon_kh-96y.png" class="img_l" />
			<p class="title">{{ item.customer_full_name }}</p>
			<p>第一联系人：{{ item.first_user_id | userList("str") }}</p>
			<p>支持部门：{{ item.department_id | depart("str") }}</p>
		</van-cell-group>
	</a>
</div>

羽下佳人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue + vant + jq 实际项目开发

项目结构：1、html页面2、js 当前页面主要逻辑3、common.js 公共逻辑， jq写法 ① 过滤器 ② 公共方法4、component.js 公共组件1、html页面：index.html<!DOCTYPE html><html> <head> <meta http-equiv="Content-...
复制链接

扫一扫