刘文博 / gulu-vue

Download as
Browse Code »

Commit 4de4be34430c007481653237984e174c6954d18c

Authored by 喻鹏
1 parent 4506eedf6d
Exists in master

客服在线和我的订单-待付款

Showing 17 changed files with 610 additions and 4 deletions   Show diff stats
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path" : "pages/myOrder/myOrder", 4 "path" : "pages/myOrder/myOrder",
5 "style" : { 5 "style" : {
6 "navigationBarTitleText": "我的订单"} 6 "navigationBarTitleText": "我的订单"}
7 }, 7 },
8 { 8 {
9 "path": "pages/index/index", 9 "path": "pages/index/index",
10 "style": { 10 "style": {
11 "navigationBarTitleText": "商城一览" 11 "navigationBarTitleText": "商城一览"
12 // "enablePullDownRefresh":true 12 // "enablePullDownRefresh":true
13 } 13 }
14 }, 14 },
15 { 15 {
16 "path": "pages/addArddess/addArddess", 16 "path": "pages/addArddess/addArddess",
17 "style": { 17 "style": {
18 "navigationBarTitleText": "新增地址" 18 "navigationBarTitleText": "新增地址"
19 } 19 }
20 }, 20 },
21 { 21 {
22 "path" : "pages/confirmOrder/confirmOrder", 22 "path" : "pages/confirmOrder/confirmOrder",
23 "style" : { 23 "style" : {
24 "navigationBarTitleText": "确认订单"} 24 "navigationBarTitleText": "确认订单"}
25 }, 25 },
26 { 26 {
27 "path": "pages/cart/cart", 27 "path": "pages/cart/cart",
28 "style": { 28 "style": {
29 "navigationBarTitleText": "购物车" 29 "navigationBarTitleText": "购物车"
30 } 30 }
31 }, 31 },
32 { 32 {
33 "path": "pages/user/user", 33 "path": "pages/user/user",
34 "style": { 34 "style": {
35 "navigationBarTitleText": "我的" 35 "navigationBarTitleText": "我的"
36 } 36 }
37 }, 37 },
38 { 38 {
39 "path": "pages/details-3/details-3" 39 "path": "pages/details-3/details-3"
40 }, 40 },
41 { 41 {
42 "path": "pages/customerService/customerService"
43 },
44 {
45 "path": "pages/myorder-paying/myorder-paying"
46 },
47 {
42 "path": "pages/detail/detail" 48 "path": "pages/detail/detail"
43 } 49 }
44 ], 50 ],
45 "globalStyle": { 51 "globalStyle": {
46 "navigationBarTextStyle": "black", 52 "navigationBarTextStyle": "black",
47 "navigationBarTitleText": "uni-app", 53 "navigationBarTitleText": "uni-app",
48 "navigationBarBackgroundColor": "#F8F8F8", 54 "navigationBarBackgroundColor": "#F8F8F8",
49 "backgroundColor": "#F8F8F8" 55 "backgroundColor": "#F8F8F8"
50 }, 56 },
51 "tabBar": { 57 "tabBar": {
52 "color": "#C0C4CC", 58 "color": "#C0C4CC",
53 "selectedColor": "#fa436a", 59 "selectedColor": "#fa436a",
54 "borderStyle": "black", 60 "borderStyle": "black",
55 "backgroundColor": "#ffffff", 61 "backgroundColor": "#ffffff",
56 "list": [{ 62 "list": [{
57 "pagePath": "pages/index/index", 63 "pagePath": "pages/index/index",
58 "iconPath": "static/tab-home.png", 64 "iconPath": "static/tab-home.png",
59 "selectedIconPath": "static/tab-home-current.png", 65 "selectedIconPath": "static/tab-home-current.png",
60 "text": "首页" 66 "text": "首页"
61 }, 67 },
62 { 68 {
63 "pagePath": "pages/cart/cart", 69 "pagePath": "pages/cart/cart",
64 "iconPath": "static/tab-cart.png", 70 "iconPath": "static/tab-cart.png",
65 "selectedIconPath": "static/tab-cart-current.png", 71 "selectedIconPath": "static/tab-cart-current.png",
66 "text": "购物车" 72 "text": "购物车"
67 }, 73 },
68 { 74 {
69 "pagePath": "pages/user/user", 75 "pagePath": "pages/user/user",
70 "iconPath": "static/tab-my.png", 76 "iconPath": "static/tab-my.png",
71 "selectedIconPath": "static/tab-my-current.png", 77 "selectedIconPath": "static/tab-my-current.png",
72 "text": "我的" 78 "text": "我的"
73 } 79 }
74 ] 80 ]
75 } 81 }
76 } 82 }
77 83
src/pages/addArddess/addArddess.vue
Diff comments   View file @4de4be3
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view class="content"> 3 <view class="content">
4 <view class="item,name" > 4 <view class="item,name" >
5 <text class="itemText">姓名</text> 5 <text class="itemText">姓名</text>
6 <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/> 6 <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/>
7 </view> 7 </view>
8 <view class="item,phone"> 8 <view class="item,phone">
9 <text class="itemText">电话</text> 9 <text class="itemText">电话</text>
10 <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/> 10 <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/>
11 </view> 11 </view>
12 <view class="item,area" > 12 <view class="item,area" >
13 <text class="itemText">地区</text> 13 <text class="itemText">地区</text>
14 <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view> 14 <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view>
15 <view class="btn" v-else @tap="openAddres">{{pickerText}}</view> 15 <view class="btn" v-else @tap="openAddres">{{pickerText}}</view>
16 <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address> 16 <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
17 </view> 17 </view>
18 <view class="item,address" > 18 <view class="item,address" >
19 <text class="itemText">详细地址</text> 19 <text class="itemText">详细地址</text>
20 <input placeholder="街道、小区门牌等详细地址"/> 20 <input placeholder="街道、小区门牌等详细地址"/>
21 </view> 21 </view>
22 <view class="item,check" > 22 <view class="item,check" >
23 <text class="itemText">设为默认地址</text> 23 <text class="itemText">设为默认地址</text>
24 <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" /> 24 <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" />
25 </view> 25 </view>
26 <input /> 26 <input />
27 </view> 27 </view>
28 <view class="button">保存并使用</view> 28 <view class="button">保存并使用</view>
29 </view> 29 </view>
30 </template> 30 </template>
31 31
32 <script> 32 <script>
33 import simpleAddress from '@/components/Simple-address/Simple-address.vue'; 33 import simpleAddress from '@/components/Simple-address/simple-address.vue';
34 export default { 34 export default {
35 data() { 35 data() {
36 return { 36 return {
37 cityPickerValueDefault: [0, 0, 1], 37 cityPickerValueDefault: [0, 0, 1],
38 pickerText: '', 38 pickerText: '',
39 isDefalutAddress:true 39 isDefalutAddress:true
40 40
41 }; 41 };
42 }, 42 },
43 components: { 43 components: {
44 simpleAddress 44 simpleAddress
45 }, 45 },
46 methods: { 46 methods: {
47 openAddres() { 47 openAddres() {
48 this.cityPickerValueDefault = [0,0,1] 48 this.cityPickerValueDefault = [0,0,1]
49 this.$refs.simpleAddress.open(); 49 this.$refs.simpleAddress.open();
50 }, 50 },
51 onConfirm(e) { 51 onConfirm(e) {
52 this.pickerText = e.label; 52 this.pickerText = e.label;
53 }, 53 },
54 changeDefalutAddress(e){ 54 changeDefalutAddress(e){
55 this.isDefalutAddress = e.target.value 55 this.isDefalutAddress = e.target.value
56 } 56 }
57 } 57 }
58 } 58 }
59 </script> 59 </script>
60 60
61 <style lang="scss"> 61 <style lang="scss">
62 .wrap{ 62 .wrap{
63 height: 100vh; 63 height: 100vh;
64 background-color:#F2F2F2 ; 64 background-color:#F2F2F2 ;
65 font-family: PingFangSC-Regular; 65 font-family: PingFangSC-Regular;
66 letter-spacing: -0.23px; 66 letter-spacing: -0.23px;
67 padding-top: 19rpx; 67 padding-top: 19rpx;
68 } 68 }
69 .content{ 69 .content{
70 background-color: #FFFFFF; 70 background-color: #FFFFFF;
71 border-radius: 8px; 71 border-radius: 8px;
72 border-radius: 8px; 72 border-radius: 8px;
73 padding: 40rpx 56rpx; 73 padding: 40rpx 56rpx;
74 margin-left: 40rpx; 74 margin-left: 40rpx;
75 width: 670rpx; 75 width: 670rpx;
76 box-sizing: border-box; 76 box-sizing: border-box;
77 .item{ 77 .item{
78 display: flex; 78 display: flex;
79 justify-content: flex-start; 79 justify-content: flex-start;
80 font-size: 14px; 80 font-size: 14px;
81 align-items: center; 81 align-items: center;
82 height: 112rpx; 82 height: 112rpx;
83 border-bottom: 1rpx solid #E9E9E9; 83 border-bottom: 1rpx solid #E9E9E9;
84 .itemText{ 84 .itemText{
85 width: 162rpx; 85 width: 162rpx;
86 font-family: PingFangSC-Regular; 86 font-family: PingFangSC-Regular;
87 letter-spacing: -0.26px; 87 letter-spacing: -0.26px;
88 } 88 }
89 .btn{ 89 .btn{
90 color: #333333 !important; 90 color: #333333 !important;
91 } 91 }
92 } 92 }
93 .check{ 93 .check{
94 justify-content: space-between; 94 justify-content: space-between;
95 } 95 }
96 } 96 }
97 .button{ 97 .button{
98 position: fixed; 98 position: fixed;
99 bottom: 0; 99 bottom: 0;
100 left: 0; 100 left: 0;
101 height: 112rpx; 101 height: 112rpx;
102 width: 100%; 102 width: 100%;
103 background: #FF6B4A; 103 background: #FF6B4A;
104 display: flex; 104 display: flex;
105 justify-content: center; 105 justify-content: center;
106 align-items: center; 106 align-items: center;
107 font-size: 16px; 107 font-size: 16px;
108 color: #FFFFFF; 108 color: #FFFFFF;
109 letter-spacing: -0.3px; 109 letter-spacing: -0.3px;
110 } 110 }
111 </style> 111 </style>
112 112
src/pages/customerService/customerService.vue
Diff comments   View file @4de4be3
File was created 1 <template>
2 <view class="content">
3 <view class="header">
4 <view class="header-name">
5 <navigator open-type="navigateBack" hover-class="navigator-hover">
6 <image src="/static/back.png"></image>
7 </navigator>
8 <text>在线客服</text>
9 </view>
10 </view>
11 <view class="hr"></view>
12 <!-- <scroll-view scroll-y class="srcollview"> -->
13 <view class="customer">
14 <template>
15 <view class="talk-time">
16 <text>2020-10-22 12:34:58</text>
17 </view>
18 <view class="servicer"><image src="../../static/customerService-pic.png"></image><text>亲，请问有什么需要？</text></view>
19 <view class="user"><image src="../../static/customerService-pic.png"></image><text>我想问下我买的货发了么</text></view>
20 <view class="servicer"><image src="../../static/customerService-pic.png"></image><text>请问是昨天晚上下单的吗？</text></view>
21 <view class="user"><image src="../../static/customerService-pic.png"></image><text>嗯嗯,对,是的</text></view>
22 </template>
23
24 </view>
25 <!-- </scroll-view> -->
26 <view class="bottom-input">
27 <image src="../../static/customerService-horn.png" class="img1"></image>
28 <input />
29 <image src="../../static/customerService-simle.png" class="img2"></image>
30 <image src="../../static/customerService-btn.png" class="img3"></image>
31 </view>
32 </view>
33 </template>
34
35 <script>
36 export default {
37 data() {
38 return {
39
40 }
41 },
42 methods: {
43
44 }
45 }
46 </script>
47
48 <style lang="scss">
49 .content {
50 display: flex;
51 flex-direction: column;
52 justify-content: center;
53 align-items: center;
54
55 }
56
57 .header{
58 display: flex;
59 flex-direction: column;
60 align-items: center;
61 justify-content: center;
62 width: 100%;
63 height: 44px;
64 position: fixed;
65 top: 0;
66 z-index: 999;
67 background-color: #fff;
68 .header-name{
69 display: flex;
70 align-items: center;
71 width: 670rpx;
72 image {
73 width: 11px;
74 height: 18px;
75 }
76 text {
77 // font-family: "PingFangSC-Regular";
78 font-size: 36rpx;
79 color: #333333;
80 letter-spacing: -0.34px;
81 margin: 0 0 10rpx 54rpx;
82 }
83 }
84 }
85 .hr {
86 width: 100%;
87 border-bottom: 1px solid #E9E9E9;
88 }
89 .customer {
90 width: 100%;
91 min-height: 1335rpx;
92 background-color: #f2f2f2;
93 box-sizing: border-box;
94 padding: 0 40rpx;
95 .talk-time{
96 display: flex;
97 align-items: center;
98 justify-content: center;
99 margin-top: 54rpx;
100 margin-bottom: 2rpx;
101 text{
102 // font-family: PingFangSC-Regular;
103 font-size: 12px;
104 color: #999999;
105 letter-spacing: -0.23px;
106 }
107 }
108 .user {
109 display: flex;
110 flex-direction: row-reverse;
111 align-items: center;
112 margin-top: 48rpx;
113 image{
114 width: 30px;
115 height: 30px;
116 margin-top: -14rpx;
117 margin-left: 16rpx;
118 }
119 text{
120 min-height: 80rpx;
121 max-width: 512rpx;
122 box-sizing: border-box;
123 padding: 22rpx 36rpx 22rpx 38rpx;
124 margin-top: 14rpx;
125 // ont-family: PingFangSC-Regular;
126 font-size: 12px;
127 color: #333333;
128 letter-spacing: -0.23px;
129 background: #FFFFFF;
130 border: 1px solid #E9E9E9;
131 border-radius: 16rpx 0 16rpx 16rpx;
132 }
133 }
134 .servicer {
135 display: flex;
136 flex-direction: row;
137 align-items: center;
138 margin-top: 42rpx;
139 image{
140 width: 30px;
141 height: 30px;
142 margin-top: -14rpx;
143 margin-right: 16rpx;
144 }
145 text{
146 min-height: 80rpx;
147 max-width: 512rpx;
148 box-sizing: border-box;
149 padding: 22rpx 36rpx 22rpx 38rpx;
150 margin-top: 14rpx;
151 // font-family: PingFangSC-Regular;
152 font-size: 12px;
153 color: #FFFFFF;
154 letter-spacing: -0.23px;
155 background: #FF6B4A;
156 border-radius: 0 16rpx 16rpx 16rpx;
157 }
158 }
159 }
160
161 // .srcollview {
162 // // min-height: 1335rpx;
163 // background-color: #f2f2f2;
164 // }
165 .bottom-input {
166 width: 100%;
167 height: 112rpx;
168 background: #F7F7F7;
169 box-shadow: 0 -2px 3px 0 rgba(0,0,0,0.06);
170 position: fixed;
171 bottom: 0;
172 z-index: 999;
173 display: flex;
174 align-items: center;
175 box-sizing: border-box;
176 padding: 19rpx 40rpx 15rpx 40rpx;
177 .img1{
178 width: 19px;
179 height: 28px;
180 margin-right: 10px;
181 }
182 input {
183 width: 536rpx;
184 min-height: 78rpx;
185 background: #FFFFFF;
186 border: 1px solid #999999;
187 border-radius: 4px;
188 box-sizing: border-box;
189 padding-right: 30px;
190 }
191 .img2 {
192 width: 21px;
193 height: 21px;
194 margin-left: -30px;
195 margin-right: 19px;
196 }
197 .img3{
198 width: 28px;
199 height: 28px;
200 }
201 }
202
203 </style>
204
src/pages/details-3/details-3.vue
Diff comments   View file @4de4be3
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <view class="header-name"> 4 <view class="header-name">
5 <navigator open-type="navigateBack" hover-class="navigator-hover"> 5 <navigator open-type="navigateBack" hover-class="navigator-hover">
6 <image src="/static/back.png"></image> 6 <image src="/static/back.png"></image>
7 </navigator> 7 </navigator>
8 <text>{{name}}</text> 8 <text>{{name}}</text>
9 </view> 9 </view>
10 </view> 10 </view>
11 <scroll-view scroll-y class="sroll-view"> 11 <scroll-view scroll-y class="sroll-view">
12 <view class="goods-details"> 12 <view class="goods-details">
13 <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" > 13 <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
14 <swiper-item v-for="(item) in infos" :key="item.goods_id"> 14 <swiper-item v-for="(item) in infos" :key="item.goods_id">
15 <image :src="item.img" mode="scaleToFill"></image> 15 <image :src="item.img" mode="scaleToFill"></image>
16 </swiper-item> 16 </swiper-item>
17 </swiper> 17 </swiper>
18 <view class="goods-price"> 18 <view class="goods-price">
19 <text class="now-price">￥120</text> 19 <text class="now-price">￥120</text>
20 <text class="old-price">￥198</text> 20 <text class="old-price">￥198</text>
21 <text class="buy-num">349人购买过</text> 21 <text class="buy-num">349人购买过</text>
22 </view> 22 </view>
23 <view class="goods-name"> 23 <view class="goods-name">
24 <text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text> 24 <text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text>
25 </view> 25 </view>
26 <view class="goods-courier"> 26 <view class="goods-courier">
27 <text>支持7天无理由退货</text> 27 <text>支持7天无理由退货</text>
28 <text class="courier-support">顺丰发货</text> 28 <text class="courier-support">顺丰发货</text>
29 </view> 29 </view>
30 </view> 30 </view>
31 <view class="goods-form"> 31 <view class="goods-form">
32 <text class="p1">填写验光数据</text> 32 <text class="p1">填写验光数据</text>
33 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 33 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
34 <view class="choice-use"> 34 <view class="choice-use">
35 <text class="p3">您一般用眼镜:</text> 35 <text class="p3">您一般用眼镜:</text>
36 <image :src="tablist.read ? tabicon[0] : tabicon[1]" @click="changeRead"></image> 36 <image :src="tablist.read ? tabicon[0] : tabicon[1]" @click="changeRead"></image>
37 <text class="p4">阅读</text> 37 <text class="p4">阅读</text>
38 <image :src="tablist.seeLong ? tabicon[0] : tabicon[1]" @click="changeSeeLong"></image> 38 <image :src="tablist.seeLong ? tabicon[0] : tabicon[1]" @click="changeSeeLong"></image>
39 <text class="p5">看远处</text> 39 <text class="p5">看远处</text>
40 </view> 40 </view>
41 <view class="picker" > 41 <view class="picker" >
42 <view class="picker-choice"> 42 <view class="picker-choice">
43 <view class="choice-left"> 43 <view class="choice-left">
44 <text class="p11">{{pickerInfoList[0].nameC}}</text> 44 <text class="p11">{{pickerInfoList[0].nameC}}</text>
45 <text class="p12">{{pickerInfoList[0].nameE}}</text> 45 <text class="p12">{{pickerInfoList[0].nameE}}</text>
46 </view> 46 </view>
47 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 47 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
48 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 48 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
49 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 49 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
50 <image src="../../static/detail-tabicon.png" ></image> 50 <image src="../../static/detail-tabicon.png" ></image>
51 </picker> 51 </picker>
52 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 52 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
53 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 53 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
54 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 54 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
55 <image src="../../static/detail-tabicon.png" ></image> 55 <image src="../../static/detail-tabicon.png" ></image>
56 </picker> 56 </picker>
57 </view> 57 </view>
58 </view> 58 </view>
59 <view class="picker" > 59 <view class="picker" >
60 <view class="picker-choice"> 60 <view class="picker-choice">
61 <view class="choice-left"> 61 <view class="choice-left">
62 <text class="p11">{{pickerInfoList[1].nameC}}</text> 62 <text class="p11">{{pickerInfoList[1].nameC}}</text>
63 <text class="p12">{{pickerInfoList[1].nameE}}</text> 63 <text class="p12">{{pickerInfoList[1].nameE}}</text>
64 </view> 64 </view>
65 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 65 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
66 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 66 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
67 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 67 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
68 <image src="../../static/detail-tabicon.png" ></image> 68 <image src="../../static/detail-tabicon.png" ></image>
69 </picker> 69 </picker>
70 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 70 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
71 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 71 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
72 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 72 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
73 <image src="../../static/detail-tabicon.png" ></image> 73 <image src="../../static/detail-tabicon.png" ></image>
74 </picker> 74 </picker>
75 </view> 75 </view>
76 </view> 76 </view>
77 <view class="picker" > 77 <view class="picker" >
78 <view class="picker-choice"> 78 <view class="picker-choice">
79 <view class="choice-left"> 79 <view class="choice-left">
80 <text class="p11">{{pickerInfoList[2].nameC}}</text> 80 <text class="p11">{{pickerInfoList[2].nameC}}</text>
81 <text class="p12">{{pickerInfoList[2].nameE}}</text> 81 <text class="p12">{{pickerInfoList[2].nameE}}</text>
82 </view> 82 </view>
83 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 83 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
84 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 84 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
85 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 85 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
86 <image src="../../static/detail-tabicon.png" ></image> 86 <image src="../../static/detail-tabicon.png" ></image>
87 </picker> 87 </picker>
88 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 88 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
89 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 89 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
90 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 90 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
91 <image src="../../static/detail-tabicon.png" ></image> 91 <image src="../../static/detail-tabicon.png" ></image>
92 </picker> 92 </picker>
93 </view> 93 </view>
94 </view> 94 </view>
95 <view class="picker" > 95 <view class="picker" >
96 <view class="picker-choice"> 96 <view class="picker-choice">
97 <view class="choice-left"> 97 <view class="choice-left">
98 <text class="p11">{{pickerInfoList[3].nameC}}</text> 98 <text class="p11">{{pickerInfoList[3].nameC}}</text>
99 <text class="p12">{{pickerInfoList[3].nameE}}</text> 99 <text class="p12">{{pickerInfoList[3].nameE}}</text>
100 </view> 100 </view>
101 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 101 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
102 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 102 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
103 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 103 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
104 <image src="../../static/detail-tabicon.png" ></image> 104 <image src="../../static/detail-tabicon.png" ></image>
105 </picker> 105 </picker>
106 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 106 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
107 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 107 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
108 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 108 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
109 <image src="../../static/detail-tabicon.png" ></image> 109 <image src="../../static/detail-tabicon.png" ></image>
110 </picker> 110 </picker>
111 </view> 111 </view>
112 </view> 112 </view>
113 <view class="picker" > 113 <view class="picker" >
114 <view class="picker-choice"> 114 <view class="picker-choice">
115 <view class="choice-left"> 115 <view class="choice-left">
116 <text class="p11">{{pickerInfoList[4].nameC}}</text> 116 <text class="p11">{{pickerInfoList[4].nameC}}</text>
117 </view> 117 </view>
118 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 118 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
119 <text class="p14">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 119 <text class="p14">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
120 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> 120 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
121 <image src="../../static/detail-tabicon.png" ></image> 121 <image src="../../static/detail-tabicon.png" ></image>
122 </picker> 122 </picker>
123 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 123 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
124 <text class="p14">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 124 <text class="p14">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
125 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> 125 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
126 <image src="../../static/detail-tabicon.png" ></image> 126 <image src="../../static/detail-tabicon.png" ></image>
127 </picker> 127 </picker>
128 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 128 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
129 <text class="p14">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 129 <text class="p14">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
130 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> 130 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
131 <image src="../../static/detail-tabicon.png" ></image> 131 <image src="../../static/detail-tabicon.png" ></image>
132 </picker> 132 </picker>
133 </view> 133 </view>
134 </view> 134 </view>
135 <view class="confirm"> 135 <view class="confirm">
136 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 136 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
137 <text>确认以上输入信息来源于我的验光数据!</text> 137 <text>确认以上输入信息来源于我的验光数据!</text>
138 </view> 138 </view>
139 </view> 139 </view>
140 </scroll-view> 140 </scroll-view>
141 <view class="goods-submit"> 141 <view class="goods-submit">
142 <button>下一步</button> 142 <button>下一步</button>
143 </view> 143 </view>
144 </view> 144 </view>
145 </template> 145 </template>
146 146
147 <script> 147 <script>
148 148
149 export default { 149 export default {
150 components: { 150 components: {
151 151
152 }, 152 },
153 data() { 153 data() {
154 return { 154 return {
155 name: '眼镜名称名称', 155 name: '眼镜名称名称',
156 infos: [ 156 infos: [
157 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 157 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
158 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 158 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
159 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 159 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
160 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 160 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
161 ], 161 ],
162 tablist: { 162 tablist: {
163 read: true, 163 read: true,
164 seeLong: false, 164 seeLong: false,
165 confirm: false 165 confirm: false
166 }, 166 },
167 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 167 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
168 // 度数相关数据 168 // 度数相关数据
169 pickerInfoList:[ 169 pickerInfoList:[
170 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, 170 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
171 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, 171 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
172 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, 172 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
173 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, 173 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
174 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} 174 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
175 ], 175 ],
176 } 176 }
177 }, 177 },
178 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 178 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
179 179
180 }, 180 },
181 methods: { 181 methods: {
182 changeRead() { 182 changeRead() {
183 this.tablist.read = !this.tablist.read 183 this.tablist.read = !this.tablist.read
184 // this.current = e.detail.current; 184 // this.current = e.detail.current;
185 }, 185 },
186 changeSeeLong() { 186 changeSeeLong() {
187 this.tablist.seeLong = !this.tablist.seeLong 187 this.tablist.seeLong = !this.tablist.seeLong
188 }, 188 },
189 changeConfirm() { 189 changeConfirm() {
190 this.tablist.confirm = !this.tablist.confirm 190 this.tablist.confirm = !this.tablist.confirm
191 }, 191 },
192 192
193 bindPickerChange01: function(e) { 193 bindPickerChange01: function(e) {
194 this.pickerInfoList[0].nameIndex1 = e.target.value 194 this.pickerInfoList[0].nameIndex1 = e.target.value
195 }, 195 },
196 bindPickerChange02: function(e) { 196 bindPickerChange02: function(e) {
197 this.pickerInfoList[0].nameIndex2 = e.target.value 197 this.pickerInfoList[0].nameIndex2 = e.target.value
198 }, 198 },
199 199
200 bindPickerChange11: function(e) { 200 bindPickerChange11: function(e) {
201 this.pickerInfoList[1].nameIndex1 = e.target.value 201 this.pickerInfoList[1].nameIndex1 = e.target.value
202 }, 202 },
203 bindPickerChange12: function(e) { 203 bindPickerChange12: function(e) {
204 this.pickerInfoList[1].nameIndex2 = e.target.value 204 this.pickerInfoList[1].nameIndex2 = e.target.value
205 }, 205 },
206 206
207 bindPickerChange21: function(e) { 207 bindPickerChange21: function(e) {
208 this.pickerInfoList[2].nameIndex1 = e.target.value 208 this.pickerInfoList[2].nameIndex1 = e.target.value
209 }, 209 },
210 bindPickerChange22: function(e) { 210 bindPickerChange22: function(e) {
211 this.pickerInfoList[2].nameIndex2 = e.target.value 211 this.pickerInfoList[2].nameIndex2 = e.target.value
212 }, 212 },
213 213
214 bindPickerChange31: function(e) { 214 bindPickerChange31: function(e) {
215 this.pickerInfoList[3].nameIndex1 = e.target.value 215 this.pickerInfoList[3].nameIndex1 = e.target.value
216 }, 216 },
217 bindPickerChange32: function(e) { 217 bindPickerChange32: function(e) {
218 this.pickerInfoList[3].nameIndex2 = e.target.value 218 this.pickerInfoList[3].nameIndex2 = e.target.value
219 }, 219 },
220 220
221 bindPickerChange41: function(e) { 221 bindPickerChange41: function(e) {
222 this.pickerInfoList[4].nameIndex1 = e.target.value 222 this.pickerInfoList[4].nameIndex1 = e.target.value
223 }, 223 },
224 bindPickerChange42: function(e) { 224 bindPickerChange42: function(e) {
225 this.pickerInfoList[4].nameIndex2 = e.target.value 225 this.pickerInfoList[4].nameIndex2 = e.target.value
226 }, 226 },
227 bindPickerChange43: function(e) { 227 bindPickerChange43: function(e) {
228 this.pickerInfoList[4].nameIndex3 = e.target.value 228 this.pickerInfoList[4].nameIndex3 = e.target.value
229 }, 229 },
230 } 230 }
231 } 231 }
232 </script> 232 </script>
233 233
234 <style lang="scss"> 234 <style lang="scss" scoped>
235 .content { 235 .content {
236 display: flex; 236 display: flex;
237 flex-direction: column; 237 flex-direction: column;
238 align-items: center; 238 align-items: center;
239 justify-content: center; 239 justify-content: center;
240 240
241 } 241 }
242 .header{ 242 .header{
243 display: flex; 243 display: flex;
244 flex-direction: column; 244 flex-direction: column;
245 align-items: center; 245 align-items: center;
246 background-color: #fff; 246 background-color: #fff;
247 width: 100%; 247 width: 100%;
248 height: 64rpx; 248 height: 64rpx;
249 z-index: 999; 249 z-index: 999;
250 position: fixed; 250 position: fixed;
251 top: 0; 251 top: 0;
252 .header-name { 252 .header-name {
253 display: flex; 253 display: flex;
254 width: 684rpx; 254 width: 684rpx;
255 text { 255 text {
256 font-size: 36rpx; 256 font-size: 36rpx;
257 color: #333333; 257 color: #333333;
258 letter-spacing: -0.34px; 258 letter-spacing: -0.34px;
259 margin-left: 54rpx; 259 margin-left: 54rpx;
260 } 260 }
261 image { 261 image {
262 width: 11px; 262 width: 11px;
263 height: 18px; 263 height: 18px;
264 border-radius: 16px; 264 border-radius: 16px;
265 } 265 }
266 } 266 }
267 267
268 } 268 }
269 269
270 .sroll-view{ 270 .sroll-view{
271 height: 1760rpx; 271 height: 1760rpx;
272 } 272 }
273 273
274 .goods-details{ 274 .goods-details{
275 display: flex; 275 display: flex;
276 flex-direction: column; 276 flex-direction: column;
277 align-items: center; 277 align-items: center;
278 justify-content: center; 278 justify-content: center;
279 background-color: #fff; 279 background-color: #fff;
280 margin-bottom: 40rpx; 280 margin-bottom: 40rpx;
281 .swiper { 281 .swiper {
282 width: 684rpx; 282 width: 684rpx;
283 height: 512rpx; 283 height: 512rpx;
284 image { 284 image {
285 width: 100%; 285 width: 100%;
286 height: 100%; 286 height: 100%;
287 border-radius: 16rpx; 287 border-radius: 16rpx;
288 } 288 }
289 } 289 }
290 .goods-price { 290 .goods-price {
291 display: flex; 291 display: flex;
292 justify-content: space-between; 292 justify-content: space-between;
293 padding: 40rpx 0 30rpx 0; 293 padding: 40rpx 0 30rpx 0;
294 align-items: center; 294 align-items: center;
295 width: 684rpx; 295 width: 684rpx;
296 .now-price { 296 .now-price {
297 font-size: 18px; 297 font-size: 18px;
298 color: #EB5D3B; 298 color: #EB5D3B;
299 } 299 }
300 .old-price { 300 .old-price {
301 font-size: 14px; 301 font-size: 14px;
302 color: #999999; 302 color: #999999;
303 letter-spacing: -0.26px; 303 letter-spacing: -0.26px;
304 margin-left: -156px; 304 margin-left: -156px;
305 text-decoration: line-through; 305 text-decoration: line-through;
306 } 306 }
307 .buy-num { 307 .buy-num {
308 font-size: 14px; 308 font-size: 14px;
309 color: #999999; 309 color: #999999;
310 letter-spacing: -0.26px; 310 letter-spacing: -0.26px;
311 text-align: justify; 311 text-align: justify;
312 } 312 }
313 } 313 }
314 .goods-name { 314 .goods-name {
315 font-size: 16px; 315 font-size: 16px;
316 color: #333333; 316 color: #333333;
317 letter-spacing: -0.3px; 317 letter-spacing: -0.3px;
318 text-align: justify; 318 text-align: justify;
319 width: 684rpx; 319 width: 684rpx;
320 } 320 }
321 .goods-courier { 321 .goods-courier {
322 width: 684rpx; 322 width: 684rpx;
323 font-size: 10px; 323 font-size: 10px;
324 color: #999999; 324 color: #999999;
325 letter-spacing: -0.19px; 325 letter-spacing: -0.19px;
326 padding: 10rpx 0; 326 padding: 10rpx 0;
327 .courier-support { 327 .courier-support {
328 padding-left: 20rpx; 328 padding-left: 20rpx;
329 } 329 }
330 } 330 }
331 331
332 } 332 }
333 .goods-form { 333 .goods-form {
334 display: flex; 334 display: flex;
335 flex-direction: column; 335 flex-direction: column;
336 align-items: center; 336 align-items: center;
337 justify-content: center; 337 justify-content: center;
338 background-color: #fff; 338 background-color: #fff;
339 width: 100%; 339 width: 100%;
340 .choice-use{ 340 .choice-use{
341 display: flex; 341 display: flex;
342 margin-bottom: 40rpx; 342 margin-bottom: 40rpx;
343 width: 684rpx; 343 width: 684rpx;
344 align-items: center; 344 align-items: center;
345 .p3 { 345 .p3 {
346 font-size: 14px; 346 font-size: 14px;
347 color: #333333; 347 color: #333333;
348 letter-spacing: -0.26px; 348 letter-spacing: -0.26px;
349 text-align: justify; 349 text-align: justify;
350 line-height: 24px; 350 line-height: 24px;
351 width: 164px; 351 width: 164px;
352 } 352 }
353 .p4 { 353 .p4 {
354 font-size: 14px; 354 font-size: 14px;
355 color: #666666; 355 color: #666666;
356 letter-spacing: -0.26px; 356 letter-spacing: -0.26px;
357 margin: 0 71rpx 0 24rpx ; 357 margin: 0 71rpx 0 24rpx ;
358 } 358 }
359 .p5 { 359 .p5 {
360 font-size: 14px; 360 font-size: 14px;
361 color: #666666; 361 color: #666666;
362 letter-spacing: -0.26px; 362 letter-spacing: -0.26px;
363 margin-left: 24rpx; 363 margin-left: 24rpx;
364 } 364 }
365 } 365 }
366 .p1 { 366 .p1 {
367 font-size: 16px; 367 font-size: 16px;
368 color: #333333; 368 color: #333333;
369 letter-spacing: -0.3px; 369 letter-spacing: -0.3px;
370 text-align: justify; 370 text-align: justify;
371 line-height: 24px; 371 line-height: 24px;
372 margin: 4px 0; 372 margin: 4px 0;
373 373
374 } 374 }
375 .p2 { 375 .p2 {
376 font-size: 12px; 376 font-size: 12px;
377 color: #999999; 377 color: #999999;
378 letter-spacing: -0.23px; 378 letter-spacing: -0.23px;
379 margin-bottom: 18rpx; 379 margin-bottom: 18rpx;
380 } 380 }
381 image{ 381 image{
382 width: 28rpx; 382 width: 28rpx;
383 height: 26rpx; 383 height: 26rpx;
384 } 384 }
385 .confirm { 385 .confirm {
386 display: flex; 386 display: flex;
387 align-items: center; 387 align-items: center;
388 font-size: 12px; 388 font-size: 12px;
389 color: #666666; 389 color: #666666;
390 letter-spacing: -0.23px; 390 letter-spacing: -0.23px;
391 width: 684rpx; 391 width: 684rpx;
392 image{ 392 image{
393 margin-right:25rpx; 393 margin-right:25rpx;
394 } 394 }
395 } 395 }
396 .picker{ 396 .picker{
397 display: flex; 397 display: flex;
398 flex-direction: column; 398 flex-direction: column;
399 justify-content: center; 399 justify-content: center;
400 align-items: center; 400 align-items: center;
401 width: 100%; 401 width: 100%;
402 image{ 402 image{
403 width: 10px; 403 width: 10px;
404 height: 10px; 404 height: 10px;
405 margin-right: 5px; 405 margin-right: 5px;
406 } 406 }
407 .picker-choice{ 407 .picker-choice{
408 display: flex; 408 display: flex;
409 width: 684rpx; 409 width: 684rpx;
410 align-items: center; 410 align-items: center;
411 margin-bottom: 40rpx; 411 margin-bottom: 40rpx;
412 .choice-left{ 412 .choice-left{
413 width: 210rpx; 413 width: 210rpx;
414 .p11 { 414 .p11 {
415 font-size: 14px; 415 font-size: 14px;
416 color: #333333; 416 color: #333333;
417 letter-spacing: -0.26px; 417 letter-spacing: -0.26px;
418 text-align: justify; 418 text-align: justify;
419 line-height: 24px; 419 line-height: 24px;
420 margin-right: 10px; 420 margin-right: 10px;
421 } 421 }
422 .p12 { 422 .p12 {
423 font-size: 10px; 423 font-size: 10px;
424 color: #3F3F3F; 424 color: #3F3F3F;
425 letter-spacing: -0.19px; 425 letter-spacing: -0.19px;
426 text-align: justify; 426 text-align: justify;
427 line-height: 24px; 427 line-height: 24px;
428 } 428 }
429 429
430 430
431 } 431 }
432 .p13 { 432 .p13 {
433 font-size: 10px; 433 font-size: 10px;
434 color: #999999; 434 color: #999999;
435 letter-spacing: -0.19px; 435 letter-spacing: -0.19px;
436 margin-right: 10px; 436 margin-right: 10px;
437 } 437 }
438 .p13-date { 438 .p13-date {
439 font-size: 10px; 439 font-size: 10px;
440 color: #999999; 440 color: #999999;
441 letter-spacing: -0.19px; 441 letter-spacing: -0.19px;
442 margin-right: 5px; 442 margin-right: 5px;
443 } 443 }
444 .p14 { 444 .p14 {
445 font-size: 14px; 445 font-size: 14px;
446 color: #666666; 446 color: #666666;
447 letter-spacing: -0.26px; 447 letter-spacing: -0.26px;
448 text-align: center; 448 text-align: center;
449 width: 124rpx; 449 width: 124rpx;
450 border-bottom: 1px solid #CFCFCF; 450 border-bottom: 1px solid #CFCFCF;
451 } 451 }
452 452
453 } 453 }
454 } 454 }
455 } 455 }
456 .goods-submit{ 456 .goods-submit{
457 display: flex; 457 display: flex;
458 flex-direction: column; 458 flex-direction: column;
459 align-items: center; 459 align-items: center;
460 justify-content: center; 460 justify-content: center;
461 position: fixed; 461 position: fixed;
462 bottom: 0; 462 bottom: 0;
463 z-index: 999; 463 z-index: 999;
464 width: 100%; 464 width: 100%;
465 height: 120rpx; 465 height: 120rpx;
466 background-color: #fff; 466 background-color: #fff;
467 button{ 467 button{
468 width: 540rpx; 468 width: 540rpx;
469 height: 80rpx; 469 height: 80rpx;
470 font-size: 32rpx; 470 font-size: 32rpx;
471 color: #fff; 471 color: #fff;
472 background: #FF6B4A; 472 background: #FF6B4A;
473 border-radius: 20px; 473 border-radius: 20px;
474 border-radius: 20px; 474 border-radius: 20px;
475 } 475 }
476 } 476 }
477 477
478 </style> 478 </style>
src/pages/index/index.vue
Diff comments   View file @4de4be3
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 9
10 <!-- 筛选栏--> 10 <!-- 筛选栏-->
11 <view class="screenBar"> 11 <view class="screenBar">
12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > 12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
13 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown"> 13 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">
14 {{ item.text }}<icon type="info" size="14"></icon> 14 {{ item.text }}<icon type="info" size="14"></icon>
15 </view> 15 </view>
16 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> 16 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')">
17 {{ item.text }}<icon type="info" size="14"></icon> 17 {{ item.text }}<icon type="info" size="14"></icon>
18 </view> 18 </view>
19 <view v-if="item.current !== 2&&item.current!==4"> 19 <view v-if="item.current !== 2&&item.current!==4">
20 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 20 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
21 </view> 21 </view>
22 </view> 22 </view>
23 </view> 23 </view>
24 </view> 24 </view>
25 <Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> 25 <Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">
26 <view class="close"> 26 <view class="close">
27 <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> 27 <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
28 </view> 28 </view>
29 </Uni-drawer> 29 </Uni-drawer>
30 30
31 31
32 32
33 <!-- 筛选菜单--> 33 <!-- 筛选菜单-->
34 <view class="content-wrap"> 34 <view class="content-wrap">
35 <view> 35 <view>
36 <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> 36 <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
37 <!-- 商品列表 --> 37 <!-- 商品列表 -->
38 <view class="goods-list"> 38 <view class="goods-list">
39 <view class="product-list"> 39 <view class="product-list">
40 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > 40 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
41 <Card :goods = "goods"></Card> 41 <Card :goods = "goods"></Card>
42 </view> 42 </view>
43 </view> 43 </view>
44 <view class="loading-text">{{loadingText}}</view> 44 <view class="loading-text">{{loadingText}}</view>
45 </view> 45 </view>
46 46
47 </view> 47 </view>
48 </view> 48 </view>
49 </view> 49 </view>
50 </template> 50 </template>
51 51
52 <script> 52 <script>
53 import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue"; 53 import UniDrawer from "@/components/uni-drawer/uni-drawer.vue";
54 import Card from "../../components/Card/Card.vue" 54 import Card from "../../components/Card/Card.vue"
55 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; 55 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
56 import data from '@/common/data.js';//筛选菜单数据 56 import data from '@/common/data.js';//筛选菜单数据
57 export default { 57 export default {
58 components: { 58 components: {
59 'UniDrawer':UniDrawer, 59 'UniDrawer':UniDrawer,
60 'HMfilterDropdown':HMfilterDropdown, 60 'HMfilterDropdown':HMfilterDropdown,
61 'Card':Card 61 'Card':Card
62 }, 62 },
63 data() { 63 data() {
64 return { 64 return {
65 screenItems: [ 65 screenItems: [
66 {current:0,text:'全部',hasIcon:false}, 66 {current:0,text:'全部',hasIcon:false},
67 {current:1,text:'销量',hasIcon:false}, 67 {current:1,text:'销量',hasIcon:false},
68 {current:2,text:'价格',hasIcon:true}, 68 {current:2,text:'价格',hasIcon:true},
69 {current:3,text:'折扣',hasIcon:false}, 69 {current:3,text:'折扣',hasIcon:false},
70 {current:4,text:'筛选',hasIcon:true}, 70 {current:4,text:'筛选',hasIcon:true},
71 ], 71 ],
72 current: 0, 72 current: 0,
73 showRight: false, 73 showRight: false,
74 indexArr:'', 74 indexArr:'',
75 valueArr:'', 75 valueArr:'',
76 //商品数据 76 //商品数据
77 goodsList:[ 77 goodsList:[
78 { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 78 { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
79 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 79 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
80 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 80 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
81 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 81 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
82 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 82 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
83 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 83 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
84 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 84 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
85 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 85 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
86 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 86 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
87 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } 87 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
88 ], 88 ],
89 loadingText:"正在加载...", 89 loadingText:"正在加载...",
90 filterDropdownValue:[], 90 filterDropdownValue:[],
91 filterData:[] 91 filterData:[]
92 } 92 }
93 }, 93 },
94 filters: { 94 filters: {
95 　　outData(value) { 95 　　outData(value) {
96 　　　　return JSON.stringify(value); 96 　　　　return JSON.stringify(value);
97 　　} 97 　　}
98 }, 98 },
99 onLoad: function () { 99 onLoad: function () {
100 //定时器模拟ajax异步请求数据 100 //定时器模拟ajax异步请求数据
101 // setTimeout(()=>{ 101 // setTimeout(()=>{
102 // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null 102 // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
103 // this.filterDropdownValue = [ 103 // this.filterDropdownValue = [
104 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 104 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
105 // [null,null], //第1个菜单选中 都不选中 105 // [null,null], //第1个菜单选中 都不选中
106 // [1], //第2个菜单选中 一级菜单的第1项 106 // [1], //第2个菜单选中 一级菜单的第1项
107 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 107 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
108 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 108 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
109 // ]; 109 // ];
110 this.filterData = data; 110 this.filterData = data;
111 // },100); 111 // },100);
112 // 模拟ajax请求子菜单数据。 112 // 模拟ajax请求子菜单数据。
113 // setTimeout(()=>{ 113 // setTimeout(()=>{
114 // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; 114 // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
115 // },5000) 115 // },5000)
116 }, 116 },
117 methods: { 117 methods: {
118 showDrawer(e) { 118 showDrawer(e) {
119 this.$refs[e].open() 119 this.$refs[e].open()
120 }, 120 },
121 closeDrawer(e) { 121 closeDrawer(e) {
122 this.$refs[e].close() 122 this.$refs[e].close()
123 }, 123 },
124 change(e, type) { 124 change(e, type) {
125 this[type] = e 125 this[type] = e
126 }, 126 },
127 onClickItem(e) { 127 onClickItem(e) {
128 if (this.current !== e) { 128 if (this.current !== e) {
129 this.current = e; 129 this.current = e;
130 } 130 }
131 }, 131 },
132 dropDown(){ 132 dropDown(){
133 console.log('下拉') 133 console.log('下拉')
134 }, 134 },
135 //接收菜单结果 135 //接收菜单结果
136 confirm(e){ 136 confirm(e){
137 this.indexArr = e.index; 137 this.indexArr = e.index;
138 this.valueArr = e.value; 138 this.valueArr = e.value;
139 return; 139 return;
140 console.log('修改菜单'); 140 console.log('修改菜单');
141 this.filterData[4].submenu[1] = { 141 this.filterData[4].submenu[1] = {
142 "name": "项目2", 142 "name": "项目2",
143 "submenu": [ 143 "submenu": [
144 144
145 ] 145 ]
146 } 146 }
147 } 147 }
148 }, 148 },
149 onNavigationBarButtonTap(e) { 149 onNavigationBarButtonTap(e) {
150 this.showRight = !this.showRight 150 this.showRight = !this.showRight
151 }, 151 },
152 //上拉加载， 152 //上拉加载，
153 onReachBottom(){ 153 onReachBottom(){
154 console.log('到底加载') 154 console.log('到底加载')
155 let len = this.goodsList.length; 155 let len = this.goodsList.length;
156 if(len>=30){ 156 if(len>=30){
157 this.loadingText="~~到底了~~"; 157 this.loadingText="~~到底了~~";
158 return false; 158 return false;
159 }else{ 159 }else{
160 this.loadingText="正在加载..."; 160 this.loadingText="正在加载...";
161 } 161 }
162 let end_goods_id = this.goodsList[len-1].goods_id; 162 let end_goods_id = this.goodsList[len-1].goods_id;
163 for(let i=1;i<=10;i++){ 163 for(let i=1;i<=10;i++){
164 let goods_id = end_goods_id+i; 164 let goods_id = end_goods_id+i;
165 let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' }; 165 let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' };
166 this.goodsList.push(p); 166 this.goodsList.push(p);
167 } 167 }
168 }, 168 },
169 } 169 }
170 </script> 170 </script>
171 171
172 <style lang="scss"> 172 <style lang="scss">
173 .content { 173 .content {
174 display: flex; 174 display: flex;
175 flex-direction: column; 175 flex-direction: column;
176 align-items: center; 176 align-items: center;
177 justify-content: center; 177 justify-content: center;
178 background-color: #F7F6F6; 178 background-color: #F7F6F6;
179 } 179 }
180 .header{ 180 .header{
181 display: flex; 181 display: flex;
182 flex-direction: column; 182 flex-direction: column;
183 align-items: center; 183 align-items: center;
184 justify-content: center; 184 justify-content: center;
185 background-color: #F7F6F6; 185 background-color: #F7F6F6;
186 height:178rpx ; 186 height:178rpx ;
187 width: 100%; 187 width: 100%;
188 z-index: 999; 188 z-index: 999;
189 position: fixed; 189 position: fixed;
190 top: 0; 190 top: 0;
191 left: 0; 191 left: 0;
192 } 192 }
193 .searchBar { 193 .searchBar {
194 width: 670rpx; 194 width: 670rpx;
195 display: flex; 195 display: flex;
196 justify-content: center; 196 justify-content: center;
197 align-items: center; 197 align-items: center;
198 box-sizing: border-box; 198 box-sizing: border-box;
199 padding: 0rpx 16rpx; 199 padding: 0rpx 16rpx;
200 border: 1px solid #FF6B4A; 200 border: 1px solid #FF6B4A;
201 border-radius: 8rpx; 201 border-radius: 8rpx;
202 background-color: #ffffff; 202 background-color: #ffffff;
203 } 203 }
204 204
205 .searchIpt { 205 .searchIpt {
206 height: 68rpx; 206 height: 68rpx;
207 width: 670rpx; 207 width: 670rpx;
208 padding: 16rpx; 208 padding: 16rpx;
209 font-size: 28rpx; 209 font-size: 28rpx;
210 box-sizing: border-box; 210 box-sizing: border-box;
211 } 211 }
212 .screenBar{ 212 .screenBar{
213 width: 670rpx; 213 width: 670rpx;
214 height: 110rpx; 214 height: 110rpx;
215 display: flex; 215 display: flex;
216 flex-direction: row; 216 flex-direction: row;
217 justify-content: space-between; 217 justify-content: space-between;
218 align-items: center; 218 align-items: center;
219 color: #333333; 219 color: #333333;
220 font-size: 32rpx; 220 font-size: 32rpx;
221 } 221 }
222 .active{ 222 .active{
223 color: #FF6B4A; 223 color: #FF6B4A;
224 } 224 }
225 .screenItem{ 225 .screenItem{
226 display: flex; 226 display: flex;
227 justify-content: center; 227 justify-content: center;
228 align-items: center; 228 align-items: center;
229 } 229 }
230 .content-wrap{ 230 .content-wrap{
231 width: 100%; 231 width: 100%;
232 background-color: #FFFFFF; 232 background-color: #FFFFFF;
233 } 233 }
234 234
235 .HMfilterDropdown{ 235 .HMfilterDropdown{
236 top: 178rpx !important; 236 top: 178rpx !important;
237 } 237 }
238 238
239 .goods-list{ 239 .goods-list{
240 padding-top: 286rpx; 240 padding-top: 286rpx;
241 .loading-text{ 241 .loading-text{
242 width: 100%; 242 width: 100%;
243 display: flex; 243 display: flex;
244 justify-content: center; 244 justify-content: center;
245 align-items: center; 245 align-items: center;
246 height: 30px; 246 height: 30px;
247 color: #979797; 247 color: #979797;
248 font-size: 12px; 248 font-size: 12px;
249 } 249 }
250 .product-list{ 250 .product-list{
251 width: 92%; 251 width: 92%;
252 padding: 0 4% 3vw 4%; 252 padding: 0 4% 3vw 4%;
253 display: flex; 253 display: flex;
254 justify-content: space-between; 254 justify-content: space-between;
255 flex-wrap: wrap; 255 flex-wrap: wrap;
256 .product{ 256 .product{
257 width: 48%; 257 width: 48%;
258 margin: 0 0 20rpx 0; 258 margin: 0 0 20rpx 0;
259 background: #FFFFFF; 259 background: #FFFFFF;
260 border: 1px solid #F2F2F2; 260 border: 1px solid #F2F2F2;
261 } 261 }
262 } 262 }
263 } 263 }
264 264
265 </style> 265 </style>
266 266
src/pages/myOrder/myOrder.vue
Diff comments   View file @4de4be3
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-paying/myorder-paying.vue
Diff comments   View file @4de4be3
File was created 1 <template>
2 <view class="content">
3 <view class="header">
4 <view class="header-name">
5 <navigator open-type="navigateBack" hover-class="navigator-hover">
6 <image src="/static/back.png"></image>
7 </navigator>
8 <text>我的订单</text>
9 </view>
10 </view>
11 <scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }">
12 <view class="order-hr"></view>
13 <view class="order-time">
14 <text>请在</text>
15 <text class="p2">00:59:58 </text>
16 <text>内完成付款</text>
17 </view>
18 <view class="order-user">
19 <view class="order-user-head">
20 <text class="p1">钱大大</text>
21 <text class="p2">18823749843</text>
22 </view>
23 <view class="order-user-body">
24 <image src="../../static/myorder-paying-location.png"></image>
25 <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text>
26 </view>
27 </view>
28 <view class="order-info">
29 <view class="order-info-head">
30 <image src="../../static/myorder-paying-pic.png"></image>
31 <view class="order-info-head-r">
32 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
33 <text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text>
34 <text class="p3">￥180</text>
35 </view>
36 </view>
37 <view class="order-info-goodsnum">
38 <text>X1</text>
39 </view>
40 <text class="order-info-freight">
41 <text class="p1">运费</text>
42 <text class="p2">0.00</text>
43 </text>
44 <text class="order-info-discount">
45 <text class="p1">优惠</text>
46 <text class="p2">-￥70.00</text>
47 </text>
48 <text class="order-info-price">
49 <text class="p1">实付</text>
50 <text class="p2">￥110</text>
51 </text>
52 <text class="order-info-num">
53 <text>订单号：203486795859605849</text>
54 </text>
55 <text class="order-info-time">
56 <text>下单时间：2020-10-22 14:32:42</text>
57 </text>
58 <view class="order-info-hr"></view>
59 <view class="order-info-contact">
60 <image src="../../static/myorder-paying-contact.png"></image>
61 <text>联系客服</text>
62 </view>
63 </view>
64 </scroll-view>
65 <view class="order-confim">
66 <button class="b1">取消订单</button>
67 <button class="b2">立即支付</button>
68 </view>
69 </view>
70 </template>
71
72 <script>
73 export default {
74 data() {
75 return {
76 scrollHeight: false,
77 }
78 },
79 methods: {
80
81 }
82 }
83 </script>
84
85 <style lang="scss" scoped>
86 .content{
87 display: flex;
88 flex-direction: column;
89 justify-content: center;
90 align-items: center;
91 }
92
93 .header{
94 display: flex;
95 flex-direction: column;
96 align-items: center;
97 justify-content: center;
98 width: 100%;
99 height: 44px;
100 position: fixed;
101 top: 0;
102 z-index: 999;
103 background-color: #fff;
104 .header-name{
105 display: flex;
106 align-items: center;
107 width: 670rpx;
108 image {
109 width: 11px;
110 height: 18px;
111 }
112 text {
113 // font-family: PingFangSC-Regular;
114 font-size: 36rpx;
115 color: #333333;
116 letter-spacing: -0.34px;
117 margin: 0 0 10rpx 54rpx;
118 }
119 }
120 }
121
122 .scroll-view {
123 // height: 1760rpx; // 测试
124 background: #F2F2F2;
125 }
126 .order-hr {
127 width: 100%;
128 height: 1px;
129 background-color: #E9E9E9;
130 }
131 .order-time {
132 width: 100%;
133 height: 140rpx;
134 background-color: #fff;
135 display: flex;
136 justify-content: center;
137 text {
138 // font-family: PingFangSC-Regular;
139 margin-top: 48rpx;
140 font-size: 14px;
141 color: #333333;
142 letter-spacing: -0.26px;
143 }
144 .p2 {
145 // font-family: DINAlternate-Bold;
146 margin: 42rpx 20rpx 0 20rpx;
147 font-size: 18px;
148 color: #EC5D3B;
149 letter-spacing: -0.34px;
150 }
151 }
152
153 .order-user {
154 width: 670rpx;
155 height: 228rpx;
156 background: #FFFFFF;
157 border-radius: 14rpx;
158 margin: 0 auto;
159 margin-top: 20rpx;
160 margin-bottom: 20rpx;
161 .order-user-head {
162 display: flex;
163 height: 108rpx;
164 width: 100%;
165 align-items: center;
166 margin-left: 126rpx;
167 .p1 {
168 // font-family: PingFangSC-Regular;
169 font-size: 14px;
170 color: #333333;
171 letter-spacing: -0.26px;
172 margin-right: 20rpx;
173 }
174 .p2 {
175 // font-family: PingFangSC-Regular;
176 font-size: 14px;
177 color: #999999;
178 letter-spacing: -0.26px;
179 }
180 }
181 .order-user-body {
182 display: flex;
183 width: 100%;
184 image{
185 width: 24px;
186 height: 26px;
187 margin: 12rpx 32rpx 0 40rpx;
188 }
189 .p3 {
190 // font-family: PingFangSC-Semibold;
191 font-size: 14px;
192 color: #333333;
193 letter-spacing: -0.26px;
194 }
195 }
196 }
197
198 .order-info {
199 width: 670rpx;
200 background-color: #fff;
201 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
202 border-radius: 16rpx;
203 margin: 0 auto;
204 view{
205 margin-left: 40rpx;
206 }
207 text{
208 font-size: 14px;
209 }
210 .order-info-head {
211 display: flex;
212 padding-top: 40rpx;
213 image{
214 height: 188rpx;
215 width: 188rpx;
216 }
217 .order-info-head-r{
218 margin: 0;
219 width: 368rpx;
220 margin-left: 24rpx;
221 // margin-top: 40rpx;
222 text{
223 display: block;
224 }
225 .p1 {
226 height: 40px;
227 // font-family: PingFangSC-Regular;
228 font-size: 14px;
229 color: #333333;
230 letter-spacing: -0.26px;
231 line-height: 18px;
232 // line-height: 20px;
233 }
234 .p2 {
235 height: 34px;
236 padding: 1px 0 3px 0;
237 // font-family: PingFangSC-Regular;
238 font-size: 12px;
239 color: #999999;
240 letter-spacing: -0.23px;
241 }
242 .p3 {
243 height: 20px;
244 // font-family: PingFangSC-Regular;
245 font-size: 14px;
246 color: #FF6B4A;
247 letter-spacing: -0.26px;
248 }
249 }
250
251 }
252 .order-info-goodsnum {
253 display: flex;
254 align-items: center;
255 justify-content: flex-end;
256 text {
257 margin-right: 44rpx;
258 // ont-family: PingFangSC-Regular;
259 font-size: 12px;
260 color: #999999;
261 letter-spacing: -0.23px;
262 }
263 }
264 .order-info-freight {
265 display: block;
266 margin-left: 40rpx;
267 margin-top: 22rpx;
268 .p1{
269 // font-family: PingFangSC-Regular;
270 font-size: 14px;
271 color: #333333;
272 letter-spacing: -0.26px;
273 line-height: 18px;
274 margin-right: 24px;
275 }
276 .p2 {
277 // font-family: PingFangSC-Regular;
278 font-size: 14px;
279 color: #FF6B4A;
280 letter-spacing: -0.26px;
281 }
282 }
283 .order-info-discount {
284 display: block;
285 margin-left: 40rpx;
286 margin-top: 24rpx;
287 .p1 {
288 // font-family: PingFangSC-Regular;
289 font-size: 14px;
290 color: #333333;
291 letter-spacing: -0.26px;
292 line-height: 18px;
293 margin-right: 24px;
294 }
295 .p2 {
296 // font-family: PingFangSC-Regular;
297 font-size: 14px;
298 color: #FF6B4A;
299 letter-spacing: -0.26px;
300 }
301 }
302 .order-info-price {
303 display: block;
304 margin-left: 40rpx;
305 margin-top: 24rpx;
306 .p1 {
307 // font-family: PingFangSC-Semibold;
308 font-size: 14px;
309 color: #333333;
310 letter-spacing: -0.26px;
311 line-height: 18px;
312 margin-right: 24px;
313 }
314 .p2 {
315 // font-family: PingFangSC-Semibold;
316 font-size: 14px;
317 color: #FF6B4A;
318 letter-spacing: -0.26px;
319 }
320 }
321 .order-info-num{
322 display: block;
323 margin-left: 40rpx;
324 margin-top: 44rpx;
325 text{
326 // font-family: PingFangSC-Regular;
327 font-size: 12px;
328 color: #999999;
329 letter-spacing: -0.23px;
330 }
331 }
332 .order-info-time {
333 display: block;
334 margin: 8rpx 0 48rpx 40rpx;
335 text{
336 // font-family: PingFangSC-Regular;
337 font-size: 12px;
338 color: #999999;
339 letter-spacing: -0.23px;
340 }
341 }
342 .order-info-hr{
343 width: 520rpx;
344 height: 1px;
345 background-color: #E9E9E9;
346 margin-bottom: 20rpx;
347 }
348 .order-info-contact {
349 display: flex;
350 padding-bottom: 28rpx;
351 image{
352 width: 19px;
353 height: 16px;
354 }
355 text {
356 // font-family: PingFangSC-Regular;
357 margin-left: 20rpx;
358 font-size: 14px;
359 color: #333333;
360 letter-spacing: -0.26px;
361 line-height: 18px;
362 }
363 }
364 }
365
366 .order-confim {
367 display: flex;
368 align-items: center;
369 z-index: 999;
370 width: 100%;
371 height: 112rpx;
372 position: fixed;
373 bottom: 0;
374 background: #FFFFFF;
375 button {
376 width: 204rpx;
377 height: 80rpx;
378 border: 1px solid #FF6B4A;
379 border-radius: 40rpx;
380 font-size: 32rpx;
381 letter-spacing: -0.3px;
382 margin-right: 0;
383 }
384 .b1 {
385 // font-family: PingFangSC-Regular;
386 color: #FF6B4A;
387
388 }
389 .b2 {
390 // font-family: PingFangSC-Regular;
391 background-color: #FF6B4A;
392 color: #FFFFFF;
393 margin: 0 26rpx 0 20rpx;
394 }
395 }
396
397 </style>
398
src/static/back.png
Diff comments   View file @4de4be3

1.82 KB
src/static/customerService-btn.png
Diff comments   View file @4de4be3

1.86 KB
src/static/customerService-horn.png
Diff comments   View file @4de4be3

2.14 KB
src/static/customerService-pic.png
Diff comments   View file @4de4be3

7.29 KB
src/static/customerService-simle.png
Diff comments   View file @4de4be3

1.93 KB
src/static/img/goods/p11.png
Diff comments   View file @4de4be3

121 KB
src/static/img/goods/p12.png
Diff comments   View file @4de4be3

115 KB
src/static/myorder-paying-contact.png
Diff comments   View file @4de4be3

2.5 KB
src/static/myorder-paying-location.png
Diff comments   View file @4de4be3

2.07 KB
src/static/myorder-paying-pic.png
Diff comments   View file @4de4be3

64.7 KB