Adam / gulu-vue

Download as
Browse Code »

Commit f3a9eefcf7fb25866129b5c110c98cfd6b706b56

Authored by BigBoss
2 parents 46e5b6c99c 1f68348bd2
Exists in master

修改错误

Showing 5 changed files   Show diff stats
src/components/uni-drawer/uni-drawer.vue
Diff comments   View file @f3a9eef
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 @f3a9eef
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 @f3a9eef
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 <view class="orderList" > 15 <view class="orderList" >
16 <view v-for="(order) in orderList" :key="orderId"> 16 <view v-for="(order) in orderList" :key="orderId">
17 <OrderCard :order = "order" :current="current"></OrderCard> 17 <OrderCard :order = "order" :current="current"></OrderCard>
18 </view> 18 </view>
19 </view> 19 </view>
20 <view class="footer">已显示全部</view> 20 <view class="footer">已显示全部</view>
21 </view> 21 </view>
22 </template> 22 </template>
23 23 <script>
24 <script> 24 import OrderCard from './OrderCard.vue'
25 import OrderCard from './OrderCard.vue' 25 export default {
26 export default { 26 components:{
27 components:{ 27 'OrderCard':OrderCard
28 'OrderCard':OrderCard 28 },
29 }, 29 data() {
30 data() { 30 return {
31 return { 31 screenItems: [
32 screenItems: [ 32 {current:0,text:'全部'},
33 {current:0,text:'全部'}, 33 {current:1,text:'待付款'},
34 {current:1,text:'待付款'}, 34 {current:2,text:'待发货'},
35 {current:2,text:'待发货'}, 35 {current:3,text:'待收货'},
36 {current:3,text:'待收货'}, 36 {current:4,text:'退款售后'},
37 {current:4,text:'退款售后'}, 37 ],
38 ], 38 current: 0,
39 current: 0, 39 //订单数据
40 //订单数据 40 orderList:[
41 orderList:[ 41 { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
42 { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, 42 { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
43 { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, 43 { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
44 { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1}, 44 { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
45 { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, 45 { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
46 { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, 46 { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
47 { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, 47 { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
48 { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, 48 { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
49 { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}, 49 { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
50 { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1} 50 ],
51 ], 51
52 }; 52 };
53 }, 53 },
54 methods:{ 54 methods:{
55 onClickItem(e) { 55 onClickItem(e) {
56 if (this.current !== e) { 56 if (this.current !== e) {
57 this.current = e; 57 this.current = e;
58 } 58 }
59 } 59 }
60 } 60 }
61 } 61 }
62 </script> 62 </script>
63 63
64 <style lang="scss"> 64 <style lang="scss">
65 .content { 65 .content {
66 display: flex; 66 display: flex;
67 flex-direction: column; 67 flex-direction: column;
68 align-items: center; 68 align-items: center;
69 background-color: #F7F6F6; 69 background-color: #F7F6F6;
70 min-height: 100vh; 70 min-height: 100vh;
71 .header{ 71 .header{
72 background-color: #ffffff; 72 background-color: #ffffff;
73 width: 100%; 73 width: 100%;
74 height: 232rpx; 74 height: 232rpx;
75 padding: 40rpx 40rpx 36rpx 40rpx; 75 padding: 40rpx 40rpx 36rpx 40rpx;
76 box-sizing: border-box; 76 box-sizing: border-box;
77 position: fixed; 77 position: fixed;
78 top: 0; 78 top: 0;
79 left: 0; 79 left: 0;
80 .searchBar { 80 .searchBar {
81 width: 670rpx; 81 width: 670rpx;
82 display: flex; 82 display: flex;
83 justify-content: center; 83 justify-content: center;
84 align-items: center; 84 align-items: center;
85 box-sizing: border-box; 85 box-sizing: border-box;
86 padding: 0rpx 16rpx; 86 padding: 0rpx 16rpx;
87 border: 1px solid #FF6B4A; 87 border: 1px solid #FF6B4A;
88 border-radius: 8rpx; 88 border-radius: 8rpx;
89 background-color: #ffffff; 89 background-color: #ffffff;
90 } 90 }
91 91
92 .screenBar{ 92 .screenBar{
93 width: 670rpx; 93 width: 670rpx;
94 height: 110rpx; 94 height: 110rpx;
95 display: flex; 95 display: flex;
96 flex-direction: row; 96 flex-direction: row;
97 justify-content: space-between; 97 justify-content: space-between;
98 align-items: center; 98 align-items: center;
99 color: #333333; 99 color: #333333;
100 font-size: 32rpx; 100 font-size: 32rpx;
101 } 101 }
102 .screenItem{ 102 .screenItem{
103 height: 50rpx; 103 height: 50rpx;
104 font-size: 32rpx; 104 font-size: 32rpx;
105 color: #333333; 105 color: #333333;
106 display: flex; 106 display: flex;
107 justify-content: center; 107 justify-content: center;
108 align-items: center; 108 align-items: center;
109 transition:all 0.2s; 109 transition:all 0.2s;
110 } 110 }
111 .active{ 111 .active{
112 // font-size: 34rpx; 112 // font-size: 34rpx;
113 color: #EC5D3B; 113 color: #EC5D3B;
114 } 114 }
115 .searchIpt { 115 .searchIpt {
116 height: 68rpx; 116 height: 68rpx;
117 width: 670rpx; 117 width: 670rpx;
118 padding: 16rpx; 118 padding: 16rpx;
119 font-size: 28rpx; 119 font-size: 28rpx;
120 box-sizing: border-box; 120 box-sizing: border-box;
121 } 121 }
122 } 122 }
123 .orderList{ 123 .orderList{
124 margin-top: 232rpx; 124 margin-top: 232rpx;
125 } 125 }
126 .footer{ 126 .footer{
127 font-size: 14px; 127 font-size: 14px;
128 color: #B8B8B8; 128 color: #B8B8B8;
129 margin: 40rpx 0; 129 margin: 40rpx 0;
130 } 130 }
131 } 131 }
132 </style> 132 </style>
133 133
src/pages/myOrder/orderCard.vue
Diff comments   View file @f3a9eef
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="card" v-if="current === order.orderType" > 3 <view class="card" v-if="current === order.orderType" >
4 <view class="cardHeader"> 4 <view class="cardHeader">
5 <text class="orderId">订单号：{{order.orderId}}</text> 5 <text class="orderId">订单号：{{order.orderId}}</text>
6 <text class="orderType" v-if="order.orderType===1">待付款</text> 6 <text class="orderType" v-if="order.orderType===1">待付款</text>
7 <text class="orderType" v-if="order.orderType===2">待发货</text> 7 <text class="orderType" v-if="order.orderType===2">待发货</text>
8 <text class="orderType" v-if="order.orderType === 3">待收货</text> 8 <text class="orderType" v-if="order.orderType === 3">待收货</text>
9 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 9 <text class="orderType" v-if="order.orderType === 4">退款售后</text>
10 <text class="orderType" v-if="order.orderType === 5">已完成</text> 10 <text class="orderType" v-if="order.orderType === 5">已完成</text>
11 </view> 11 </view>
12 <view class="orderCardInfo"> 12 <view class="orderCardInfo">
13 <image :src="order.img" mode="aspectFill"></image> 13 <image :src="order.img" mode="aspectFill"></image>
14 <view class="infoText"> 14 <view class="infoText">
15 <view class="orderName">{{order.name}}</view> 15 <view class="orderName">{{order.name}}</view>
16 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 16 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
17 <view class="infoText-bottom"> 17 <view class="infoText-bottom">
18 <view class="markPrice">{{order.price}}</view> 18 <view class="markPrice">{{order.price}}</view>
19 <view class="buy-num">X{{order.buyNum}}</view> 19 <view class="buy-num">X{{order.buyNum}}</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 23 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
24 <view class="btns" v-if="order.orderType === 1"> 24 <view class="btns" v-if="order.orderType === 1">
25 <view class="btn-type1">申请退款</view> 25 <view class="btn-type1">申请退款</view>
26 <view class="btn-type2">去支付</view> 26 <view class="btn-type2">去支付</view>
27 </view> 27 </view>
28 <view class="btns" v-if="order.orderType === 0"> 28 <view class="btns" v-if="order.orderType === 0">
29 <view class="btn-type1">再次购买</view> 29 <view class="btn-type1">再次购买</view>
30 </view> 30 </view>
31 </view> 31 </view>
32 <view class="card" v-if="current === 0" > 32 <view class="card" v-if="current === 0" >
33 <view class="cardHeader"> 33 <view class="cardHeader">
34 <text class="orderId">订单号：{{order.orderId}}</text> 34 <text class="orderId">订单号：{{order.orderId}}</text>
35 <text class="orderType" v-if="order.orderType===1">待付款</text> 35 <text class="orderType" v-if="order.orderType===1">待付款</text>
36 <text class="orderType" v-if="order.orderType===2">待发货</text> 36 <text class="orderType" v-if="order.orderType===2">待发货</text>
37 <text class="orderType" v-if="order.orderType === 3">待收货</text> 37 <text class="orderType" v-if="order.orderType === 3">待收货</text>
38 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 38 <text class="orderType" v-if="order.orderType === 4">退款售后</text>
39 </view> 39 </view>
40 <view class="orderCardInfo"> 40 <view class="orderCardInfo">
41 <image :src="order.img" mode="aspectFill"></image> 41 <image :src="order.img" mode="aspectFill"></image>
42 <view class="infoText"> 42 <view class="infoText">
43 <view class="orderName">{{order.name}}</view> 43 <view class="orderName">{{order.name}}</view>
44 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 44 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
45 <view class="infoText-bottom"> 45 <view class="infoText-bottom">
46 <view class="markPrice">{{order.price}}</view> 46 <view class="markPrice">{{order.price}}</view>
47 <view class="buy-num">X{{order.buyNum}}</view> 47 <view class="buy-num">X{{order.buyNum}}</view>
48 </view> 48 </view>
49 </view> 49 </view>
50 </view> 50 </view>
51 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 51 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
52 <view class="btns" v-if="order.orderType === 1"> 52 <view class="btns" v-if="order.orderType === 1">
53 <view class="btn-type1">申请退款</view> 53 <view class="btn-type1">申请退款</view>
54 <view class="btn-type2">去支付</view> 54 <view class="btn-type2">去支付</view>
55 </view> 55 </view>
56 <view class="btns" v-if="order.orderType === 0"> 56 <view class="btns" v-if="order.orderType === 0">
57 <view class="btn-type1">再次购买</view> 57 <view class="btn-type1">再次购买</view>
58 </view> 58 </view>
59 </view> 59 </view>
60 </view> 60 </view>
61 </template> 61 </template>
62 62
63 <script> 63 <script>
64 export default { 64 export default {
65 props: { 65 props: {
66 /** 66 /**
67 * 订单数据 67 * 订单数据
68 */ 68 */
69 order: { 69 order: {
70 orderId: Number, 70 orderId: Number,
71 img: String, 71 img: String,
72 name: String, 72 name: String,
73 originCost:String, 73 originCost:String,
74 price: String, 74 price: String,
75 orderType:Number, 75 orderType:Number,
76 buyNum:Number 76 buyNum:Number
77 }, 77 },
78 /** 78 /**
79 * 当前选择 79 * 当前选择
80 */ 80 */
81 current:Number 81 current:Number
82 82
83 }, 83 },
84 data() { 84 data() {
85 return { 85 return {
86 }; 86 };
87 } 87 }
88 } 88 }
89 </script> 89 </script>
90 90
91 <style lang="scss"> 91 <style lang="scss">
92 .card{ 92 .card{
93 width: 670rpx; 93 width: 670rpx;
94 height: 478rpx; 94 height: 478rpx;
95 background: #FFFFFF; 95 background: #FFFFFF;
96 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); 96 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
97 border-radius: 8px; 97 border-radius: 8px;
98 border-radius: 8px; 98 border-radius: 8px;
99 margin-top: 20rpx; 99 margin-top: 20rpx;
100 padding: 40rpx; 100 padding: 40rpx;
101 box-sizing: border-box; 101 box-sizing: border-box;
102 .cardHeader{ 102 .cardHeader{
103 width: 100%; 103 width: 100%;
104 height: 40rpx; 104 height: 40rpx;
105 display: flex; 105 display: flex;
106 justify-content: space-between; 106 justify-content: space-between;
107 align-items: center; 107 align-items: center;
108 .orderId{ 108 .orderId{
109 font-size: 12px; 109 font-size: 12px;
110 color: #999999; 110 color: #999999;
111 } 111 }
112 .orderType{ 112 .orderType{
113 font-size: 14px; 113 font-size: 14px;
114 color: #FF6B4A; 114 color: #FF6B4A;
115 } 115 }
116 } 116 }
117 .orderCardInfo{ 117 .orderCardInfo{
118 width: 100%; 118 width: 100%;
119 height: 188rpx; 119 height: 188rpx;
120 display: flex; 120 display: flex;
121 flex-direction: row; 121 flex-direction: row;
122 justify-content: space-between; 122 justify-content: space-between;
123 align-items: center; 123 align-items: center;
124 margin-top: 40rpx; 124 margin-top: 40rpx;
125 image{ 125 image{
126 height: 188rpx; 126 height: 188rpx;
127 width: 188rpx; 127 width: 188rpx;
128 margin-right: 24rpx; 128 margin-right: 24rpx;
129 } 129 }
130 .infoText{ 130 .infoText{
131 display: flex; 131 display: flex;
132 flex-direction: column; 132 flex-direction: column;
133 justify-content: space-between; 133 justify-content: space-between;
134 align-items: flex-start; 134 align-items: flex-start;
135 height: 188rpx; 135 height: 188rpx;
136 } 136 }
137 .orderName{ 137 .orderName{
138 font-size: 14px; 138 font-size: 14px;
139 color: #333333; 139 color: #333333;
140 } 140 }
141 .orderDescrib{ 141 .orderDescrib{
142 font-size: 12px; 142 font-size: 12px;
143 color: #999999; 143 color: #999999;
144 } 144 }
145 .infoText-bottom{ 145 .infoText-bottom{
146 display: flex; 146 display: flex;
147 flex-direction: row; 147 flex-direction: row;
148 justify-content: space-between; 148 justify-content: space-between;
149 align-items: center; 149 align-items: center;
150 width: 100%; 150 width: 100%;
151 .markPrice{ 151 .markPrice{
152 font-size: 14px; 152 font-size: 14px;
153 color: #FF6B4A; 153 color: #FF6B4A;
154 } 154 }
155 .buy-num{ 155 .buy-num{
156 font-size: 12px; 156 font-size: 12px;
157 color: #999999; 157 color: #999999;
158 } 158 }
159 } 159 }
160 } 160 }
161 .payPrice{ 161 .payPrice{
162 text-align: right; 162 text-align: right;
163 margin: 20rpx 0; 163 margin: 20rpx 0;
164 font-size: 14px; 164 font-size: 14px;
165 color: #333333; 165 color: #333333;
166 .priceNum{ 166 .priceNum{
167 font-size: 14px; 167 font-size: 14px;
168 color: #FF6B4A; 168 color: #FF6B4A;
169 } 169 }
170 } 170 }
171 .btns{ 171 .btns{
172 display: flex; 172 display: flex;
173 justify-content: flex-end; 173 justify-content: flex-end;
174 align-items: center; 174 align-items: center;
175 .btn-type1{ 175 .btn-type1{
176 height: 48rpx; 176 height: 48rpx;
177 width: 156rpx; 177 width: 156rpx;
178 border: 1px solid #FF6B4A; 178 border: 1px solid #FF6B4A;
179 border-radius: 12px; 179 border-radius: 12px;
180 border-radius: 12px; 180 border-radius: 12px;
181 text-align: center; 181 text-align: center;
182 line-height: 48rpx; 182 line-height: 48rpx;
183 font-size: 12px; 183 font-size: 12px;
184 color: #FF6B4A; 184 color: #FF6B4A;
185 } 185 }
186 .btn-type2{ 186 .btn-type2{
187 height: 48rpx; 187 height: 48rpx;
188 width: 140rpx; 188 width: 140rpx;
189 background: #FF6B4A; 189 background: #FF6B4A;
190 border-radius: 12px; 190 border-radius: 12px;
191 border-radius: 12px; 191 border-radius: 12px;
192 text-align: center; 192 text-align: center;
193 line-height: 48rpx; 193 line-height: 48rpx;
194 font-size: 12px; 194 font-size: 12px;
195 color: #FFFFFF; 195 color: #FFFFFF;
196 margin-left: 20rpx; 196 margin-left: 20rpx;
197 } 197 }
198 } 198 }
199 } 199 }
200 </style> 200 </style>
201 201
src/static/img/detail/delivery.png
Diff comments   View file @f3a9eef

55.5 KB