刘文博 / gulu-vue

Download as
Browse Code »

Commit 1f68348bd2509a21280d4b361b7aa9b727af9578

Authored by Adam
2 parents 987972474c 4506eedf6d
Exists in master

Merge branch 'master' into 'master' 

Master

合并尹的代码上传

See merge request !4
Showing 5 changed files   Show diff stats
src/components/uni-drawer/uni-drawer.vue
Diff comments   View file @1f68348
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   View file @1f68348
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   View file @1f68348
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   View file @1f68348
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   View file @1f68348

55.5 KB