吉鹏 / gulu-vue

Merge Request #4

0 up

0 down

← To merge requests From adam:master into jp:master

Merged

Created by

Adam 2020-05-03 10:54:02 UTC

Master

合并尹的代码上传

Commits (2)

4506eedf6 ss Browse Code »

Adam
2020-05-03 18:53:33 +0800
e170f84b8 待付款 Browse Code »

尹聃
2020-05-03 18:14:55 +0800

1 participants

Showing 5 changed files Show diff stats

src/components/uni-drawer/uni-drawer.vue

Diff comments Edit View file @4506eed

1	<template>	1	<template>
2	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">	2	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
3	<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />	3	<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
4	<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">	4	<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
5	<slot />	5	<slot />
6	</view>	6	</view>
7	</view>	7	</view>
8	</template>	8	</template>
9		9
10	<script>	10	<script>
11	/**	11	/**
12	* Drawer 抽屉	12	* Drawer 抽屉
13	* @description 抽屉侧滑菜单	13	* @description 抽屉侧滑菜单
14	* @tutorial https://ext.dcloud.net.cn/plugin?id=26	14	* @tutorial https://ext.dcloud.net.cn/plugin?id=26
15	* @property {Boolean} mask = [true \| false] 是否显示遮罩	15	* @property {Boolean} mask = [true \| false] 是否显示遮罩
16	* @property {Boolean} maskClick = [true \| false] 点击遮罩是否关闭	16	* @property {Boolean} maskClick = [true \| false] 点击遮罩是否关闭
17	* @property {Boolean} mode = [left \| right] Drawer 滑出位置	17	* @property {Boolean} mode = [left \| right] Drawer 滑出位置
18	* @value left 从左侧滑出	18	* @value left 从左侧滑出
19	* @value right 从右侧侧滑出	19	* @value right 从右侧侧滑出
20	* @property {Number} width 抽屉的宽度，仅 vue 页面生效	20	* @property {Number} width 抽屉的宽度，仅 vue 页面生效
21	* @event {Function} close 组件关闭时触发事件	21	* @event {Function} close 组件关闭时触发事件
22	*/	22	*/
23	export default {	23	export default {
24	name: 'UniDrawer',	24	name: 'UniDrawer',
25	props: {	25	props: {
26	/**	26	/**
27	* 显示模式（左、右），只在初始化生效	27	* 显示模式（左、右），只在初始化生效
28	*/	28	*/
29	mode: {	29	mode: {
30	type: String,	30	type: String,
31	default: ''	31	default: ''
32	},	32	},
33	/**	33	/**
34	* 蒙层显示状态	34	* 蒙层显示状态
35	*/	35	*/
36	mask: {	36	mask: {
37	type: Boolean,	37	type: Boolean,
38	default: true	38	default: true
39	},	39	},
40	/**	40	/**
41	* 遮罩是否可点击关闭	41	* 遮罩是否可点击关闭
42	*/	42	*/
43	maskClick:{	43	maskClick:{
44	type: Boolean,	44	type: Boolean,
45	default: true	45	default: true
46	},	46	},
47	/**	47	/**
48	* 抽屉宽度	48	* 抽屉宽度
49	*/	49	*/
50	width: {	50	width: {
51	type: Number,	51	type: Number,
52	default: 220	52	default: 220
53	}	53	}
54	},	54	},
55	data() {	55	data() {
56	return {	56	return {
57	visibleSync: false,	57	visibleSync: false,
58	showDrawer: false,	58	showDrawer: false,
59	rightMode: false,	59	rightMode: false,
60	watchTimer: null,	60	watchTimer: null,
61	drawerWidth: 220	61	drawerWidth: 220
62	}	62	}
63	},	63	},
64	created() {	64	created() {
65	// #ifndef APP-NVUE	65	// #ifndef APP-NVUE
66	this.drawerWidth = this.width	66	this.drawerWidth = this.width
67	// #endif	67	// #endif
68	this.rightMode = this.mode === 'right'	68	this.rightMode = this.mode === 'right'
69	},	69	},
70	methods: {	70	methods: {
71	clear(){},	71	clear(){},
72	close(type) {	72	close(type) {
73	// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑	73	// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
74	if((type === 'mask' && !this.maskClick) \|\| !this.visibleSync) return	74	if((type === 'mask' && !this.maskClick) \|\| !this.visibleSync) return
75	this._change('showDrawer', 'visibleSync', false)	75	this._change('showDrawer', 'visibleSync', false)
76	},	76	},
77	open() {	77	open() {
78	// fixed by mehaotian 处理重复点击打开的事件	78	// fixed by mehaotian 处理重复点击打开的事件
79	if(this.visibleSync) return	79	if(this.visibleSync) return
80	this._change('visibleSync', 'showDrawer', true)	80	this._change('visibleSync', 'showDrawer', true)
81	},	81	},
82	_change(param1, param2, status) {	82	_change(param1, param2, status) {
83	this[param1] = status	83	this[param1] = status
84	if (this.watchTimer) {	84	if (this.watchTimer) {
85	clearTimeout(this.watchTimer)	85	clearTimeout(this.watchTimer)
86	}	86	}
87	this.watchTimer = setTimeout(() => {	87	this.watchTimer = setTimeout(() => {
88	this[param2] = status	88	this[param2] = status
89	this.$emit('change',status)	89	this.$emit('change',status)
90	}, status ? 50 : 300)	90	}, status ? 50 : 300)
91	}	91	}
92	}	92	}
93	}	93	}
94	</script>	94	</script>
95		95
96	<style lang="scss" scoped>	96	<style lang="scss" scoped>
97	// 抽屉宽度	97	// 抽屉宽度
98	$drawer-width: 220px;	98	$drawer-width: 220px;
99		99
100	.uni-drawer {	100	.uni-drawer {
101	/* #ifndef APP-NVUE */	101	/* #ifndef APP-NVUE */
102	display: block;	102	display: block;
103	/* #endif */	103	/* #endif */
104	position: fixed;	104	position: fixed;
105	top: 0;	105	top: 0;
106	left: 0;	106	left: 0;
107	right: 0;	107	right: 0;
108	bottom: 0;	108	bottom: 0;
109	overflow: hidden;	109	overflow: hidden;
110	z-index: 999;	110	z-index: 999;
111	}	111	}
112		112
113	.uni-drawer__content {	113	.uni-drawer__content {
114	/* #ifndef APP-NVUE */	114	/* #ifndef APP-NVUE */
115	display: block;	115	display: block;
116	/* #endif */	116	/* #endif */
117	position: absolute;	117	position: absolute;
118	top: 0;	118	top: 0;
119	width: $drawer-width;	119	width: $drawer-width;
120	bottom: 0;	120	bottom: 0;
121	background-color: $uni-bg-color;	121	background-color: $uni-bg-color;
122	transition: transform 0.3s ease;	122	transition: transform 0.3s ease;
123	}	123	}
124		124
125	.uni-drawer--left {	125	.uni-drawer--left {
126	left: 0;	126	left: 0;
127	/* #ifdef APP-NVUE */	127	/* #ifdef APP-NVUE */
128	transform: translateX(-$drawer-width);	128	transform: translateX(-$drawer-width);
129	/* #endif */	129	/* #endif */
130	/* #ifndef APP-NVUE */	130	/* #ifndef APP-NVUE */
131	transform: translateX(-100%);	131	transform: translateX(-100%);
132	/* #endif */	132	/* #endif */
133	}	133	}
134		134
135	.uni-drawer--right {	135	.uni-drawer--right {
136	right: 0;	136	right: 0;
137	/* #ifdef APP-NVUE */	137	/* #ifdef APP-NVUE */
138	transform: translateX($drawer-width);	138	transform: translateX($drawer-width);
139	/* #endif */	139	/* #endif */
140	/* #ifndef APP-NVUE */	140	/* #ifndef APP-NVUE */
141	transform: translateX(100%);	141	transform: translateX(100%);
142	/* #endif */	142	/* #endif */
143	}	143	}
144		144
145	.uni-drawer__content--visible {	145	.uni-drawer__content--visible {
146	transform: translateX(0px);	146	transform: translateX(0px);
147	}	147	}
148		148
149		149
150	.uni-drawer__mask {	150	.uni-drawer__mask {
151	/* #ifndef APP-NVUE */	151	/* #ifndef APP-NVUE */
152	display: block;	152	display: block;
153	/* #endif */	153	/* #endif */
154	opacity: 0;	154	opacity: 0;
155	position: absolute;	155	position: absolute;
156	top: 0;	156	top: 0;
157	left: 0;	157	left: 0;
158	bottom: 0;	158	bottom: 0;
159	right: 0;	159	right: 0;
160	background-color: $uni-bg-color-mask;	160	background-color: $uni-bg-color-mask;
161	transition: opacity 0.3s;	161	transition: opacity 0.3s;
162	}	162	}
163		163
164	.uni-drawer__mask--visible {	164	.uni-drawer__mask--visible {
165	/* #ifndef APP-NVUE */	165	/* #ifndef APP-NVUE */
166	display: block;	166	display: block;
167	/* #endif */	167	/* #endif */
168	opacity: 1;	168	opacity: 1;
169	}	169	}
170	</style>	170	</style>
171		171

src/pages/Predelivery/Predelivery.vue

Diff comments Edit View file @4506eed

File was created	1	<template>
	2	<view class="container">
	3	<view v-for="(items) in form" :key="items.key" class="order">
	4	<view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
	5	<view class="order_detail">
	6	<view class="detail_img"><image v-bind:src="items.img"></image></view>
	7	<view class="detail_zi">
	8	<view class="zi_name">{{items.name}}</view>
	9	<view class="zi_standard">规格：{{items.standard}}</view>
	10	<view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
	11	</view>
	12	</view>
	13	<view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
	14	<view class="clear"></view>
	15	<view class="button">
	16	<view class="button1">申请退款</view>
	17	<view class="button2">提醒发货</view>
	18	</view>
	19	</view>
	20	</view>
	21	</template>
	22
	23	<script>
	24	export default {
	25	data(){
	26	return{
	27	form:[
	28	{
	29	key: 0,
	30	name:'商品名称',
	31	standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
	32	img: '/static/img/detail/delivery.png',
	33	preprice: 180,
	34	number:1,
	35	orderNum: 2034867958596334,
	36	nowprice: 110,
	37	}
	38	]
	39
	40	}
	41	}
	42	}
	43	</script>
	44
	45	<style lang="scss">
	46	.container{
	47	width: 100%;
	48	height: 100%;
	49	background: #F2F2F2;
	50	height: 700px;
	51	//要获取屏幕大小
	52	}
	53	.order{
	54	background: #FFFFFF;
	55	width: 90%;
	56	height: 450rpx;
	57	margin: 0 auto;
	58	padding: 40rpx;
	59	box-sizing: border-box;
	60	border-radius: 5px;
	61	}
	62	.order_number{
	63	color: #999999;
	64	font-size: 12px;
	65	font-family: "PingFangSC-Regular";
	66	span{
	67	font-family: PingFangSC-Regular;
	68	font-size: 14px;
	69	color: #FF6B4A;
	70	letter-spacing: -0.26px;
	71	line-height: 18px;
	72	float: right;
	73	}
	74	}
	75	.order_detail{
	76	display: flex;
	77	justify-content: space-around;
	78	margin-top: 12px;
	79	}
	80	.detail_img image{
	81	width: 188rpx;
	82	height: 188rpx;
	83	}
	84	.detail_zi{
	85	font-family: PingFangSC-Regular;
	86	width: 55%;
	87	height: 100%;
	88	view{
	89	margin-bottom: 20rpx;
	90	}
	91	.zi_name{
	92	font-size: 14px;
	93	color: #333333;
	94	letter-spacing: -0.26px;
	95	line-height: 18px;
	96	}
	97	.zi_standard{
	98	font-size: 12px;
	99	color: #999999 ;
	100	}
	101	.zi_preprice{
	102	font-size: 14px;
	103	color: #FF6B4A;
	104	span{
	105	float: right;
	106	font-size: 12px;
	107	color: #999999;
	108	}
	109	}
	110	}
	111	.now_price{
	112	font-size: 14px;
	113	color: #333333;
	114	float: right;
	115	span{
	116	font-size: 14px;
	117	color: #FF6B4A ;
	118	}
	119	}
	120	.clear{
	121	clear: both;
	122	}
	123	.button{
	124	display: flex;
	125	justify-content: flex-end;
	126	margin-top: 14px;
	127	view{
	128	width: 156rpx;
	129	height: 48rpx;
	130	border-radius: 12px;
	131	font-size: 12px;
	132	text-align: center;
	133	line-height: 20px;
	134	}
	135	.button1{
	136	border: 1px solid #FF6B4A;
	137	font-family: PingFangSC-Regular;
	138	color: #FF6B4A;
	139	letter-spacing: -0.23px;
	140	margin-right: 30rpx;
	141	}
	142	.button2{
	143	border: 1px solid #FF6B4A;
	144	background: #FF6B4A;
	145	font-family: PingFangSC-Regular;
	146	color: #FFFFFF;
	147	letter-spacing: -0.23px;
	148
	149	}
	150	}
	151	</style>

src/pages/myOrder/myOrder.vue

Diff comments Edit View file @4506eed

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<view class="header">	3	<view class="header">
4	<!-- 搜索-->	4	<!-- 搜索-->
5	<view class="searchBar">	5	<view class="searchBar">
6	<icon class="searchIcon" type="search" size="14"></icon>	6	<icon class="searchIcon" type="search" size="14"></icon>
7	<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>	7	<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
8	</view>	8	</view>
9	<view class="screenBar">	9	<view class="screenBar">
10	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >	10	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
11	<view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>	11	<view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
12	</view>	12	</view>
13	</view>	13	</view>
14	</view>	14	</view>
15	<OrderCard></OrderCard>	15	<OrderCard></OrderCard>
16		16
17	</view>	17	</view>
18	</template>	18	</template>
19		19
20	<script>	20	<script>
21	import OrderCard from './OrderCard.vue'	21	import OrderCard from './OrderCard.vue'
22	export default {	22	export default {
23	components:{	23	components:{
24	'OrderCard':OrderCard	24	'OrderCard':OrderCard
25	},	25	},
26	data() {	26	data() {
27	return {	27	return {
28	screenItems: [	28	screenItems: [
29	{current:0,text:'全部'},	29	{current:0,text:'全部'},
30	{current:1,text:'待付款'},	30	{current:1,text:'待付款'},
31	{current:2,text:'待发货'},	31	{current:2,text:'待发货'},
32	{current:3,text:'待收货'},	32	{current:3,text:'待收货'},
33	{current:4,text:'退款售后'},	33	{current:4,text:'退款售后'},
34	],	34	],
35	current: 0,	35	current: 0,
36		36
37	};	37	};
38	},	38	},
39	methods:{	39	methods:{
40	onClickItem(e) {	40	onClickItem(e) {
41	if (this.current !== e) {	41	if (this.current !== e) {
42	this.current = e;	42	this.current = e;
43	}	43	}
44	}	44	}
45	}	45	}
46	}	46	}
47	</script>	47	</script>
48		48
49	<style lang="scss">	49	<style lang="scss">
50	.content {	50	.content {
51	display: flex;	51	display: flex;
52	flex-direction: column;	52	flex-direction: column;
53	align-items: center;	53	align-items: center;
54	background-color: #F7F6F6;	54	background-color: #F7F6F6;
55	height: 100vh;	55	height: 100vh;
56	}	56	}
57	.header{	57	.header{
58	background-color: #ffffff;	58	background-color: #ffffff;
59	width: 100%;	59	width: 100%;
60	height: 232rpx;	60	height: 232rpx;
61	padding: 40rpx 40rpx 36rpx 40rpx;	61	padding: 40rpx 40rpx 36rpx 40rpx;
62	box-sizing: border-box;	62	box-sizing: border-box;
63	.searchBar {	63	.searchBar {
64	width: 670rpx;	64	width: 670rpx;
65	display: flex;	65	display: flex;
66	justify-content: center;	66	justify-content: center;
67	align-items: center;	67	align-items: center;
68	box-sizing: border-box;	68	box-sizing: border-box;
69	padding: 0rpx 16rpx;	69	padding: 0rpx 16rpx;
70	border: 1px solid #FF6B4A;	70	border: 1px solid #FF6B4A;
71	border-radius: 8rpx;	71	border-radius: 8rpx;
72	background-color: #ffffff;	72	background-color: #ffffff;
73	}	73	}
74		74
75	.screenBar{	75	.screenBar{
76	width: 670rpx;	76	width: 670rpx;
77	height: 110rpx;	77	height: 110rpx;
78	display: flex;	78	display: flex;
79	flex-direction: row;	79	flex-direction: row;
80	justify-content: space-between;	80	justify-content: space-between;
81	align-items: center;	81	align-items: center;
82	color: #333333;	82	color: #333333;
83	font-size: 32rpx;	83	font-size: 32rpx;
84	}	84	}
85	.screenItem{	85	.screenItem{
86	height: 50rpx;	86	height: 50rpx;
87	font-size: 32rpx;	87	font-size: 32rpx;
88	color: #333333;	88	color: #333333;
89	display: flex;	89	display: flex;
90	justify-content: center;	90	justify-content: center;
91	align-items: center;	91	align-items: center;
92	transition:all 0.2s;	92	transition:all 0.2s;
93	}	93	}
94	.active{	94	.active{
95	// font-size: 34rpx;	95	// font-size: 34rpx;
96	color: #EC5D3B;	96	color: #EC5D3B;
97	}	97	}
98	.searchIpt {	98	.searchIpt {
99	height: 68rpx;	99	height: 68rpx;
100	width: 670rpx;	100	width: 670rpx;
101	padding: 16rpx;	101	padding: 16rpx;
102	font-size: 28rpx;	102	font-size: 28rpx;
103	box-sizing: border-box;	103	box-sizing: border-box;
104	}	104	}
105	}	105	}
106	</style>	106	</style>
107		107

src/pages/myOrder/orderCard.vue

Diff comments Edit View file @4506eed

1	<template>	1	<template>
2	<view class="card">	2	<view class="card">
3		3
4	</view>	4	</view>
5	</template>	5	</template>
6		6
7	<script>	7	<script>
8	export default {	8	export default {
9	data() {	9	data() {
10	return {	10	return {
11		11
12	};	12	};
13	}	13	}
14	}	14	}
15	</script>	15	</script>
16		16
17	<style lang="scss">	17	<style lang="scss">
18	.card{	18	.card{
19	width: 670rpx;	19	width: 670rpx;
20	height: 478rpx;	20	height: 478rpx;
21	background: #FFFFFF;	21	background: #FFFFFF;
22	box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);	22	box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
23	border-radius: 8px;	23	border-radius: 8px;
24	border-radius: 8px;	24	border-radius: 8px;
25	margin-top: 20rpx;	25	margin-top: 20rpx;
26	}	26	}
27	</style>	27	</style>
28		28

src/static/img/detail/delivery.png

Diff comments Edit View file @4506eed

55.5 KB

GITLAB

吉鹏 / gulu-vue

Merge Request #4

Master

Merged by Adam 2020-05-03 10:54:11 UTC

Merge Request #4

How to merge

Master

Merged by Adam 2020-05-03 10:54:11 UTC $('.time_ago').timeago().tooltip()

Merged by Adam 2020-05-03 10:54:11 UTC