Commit fa7712dcc0162c3b33a4583bb143c126dc37ad48
Exists in
master
修改冲突
Showing
12 changed files
Show diff stats
src/components/CommodityCard/CommodityCard.vue
1 | <template> | 1 | <template> |
2 | <view | 2 | <view |
3 | class="card" | 3 | class="card" |
4 | @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" | 4 | @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" |
5 | > | 5 | > |
6 | <easy-loadimage mode="widthFix" | 6 | <easy-loadimage mode="widthFix" |
7 | :scroll-top="scrollTop" | 7 | :scroll-top="scrollTop" |
8 | :image-src="goods.imgurl?goods.imgurl:goods.pic" | 8 | :image-src="goods.imgurl?goods.imgurl:goods.pic" |
9 | :viewHeight="viewHeight"></easy-loadimage> | 9 | :viewHeight="viewHeight"></easy-loadimage> |
10 | <!-- <image | 10 | <!-- <image |
11 | mode="widthFix" | 11 | mode="widthFix" |
12 | :src="goods.imgurl?goods.imgurl:goods.pic" | 12 | :src="goods.imgurl?goods.imgurl:goods.pic" |
13 | ></image> --> | 13 | ></image> --> |
14 | <view class="name">{{goods.name?goods.name:goods.p_name}}</view> | 14 | <view class="name">{{goods.name?goods.name:goods.p_name}}</view> |
15 | <view class="info"> | 15 | <view class="info"> |
16 | <view class="priceBox"> | 16 | <view class="priceBox"> |
17 | <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view> | 17 | <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view> |
18 | <view class="originCost"> | 18 | <view class="originCost"> |
19 | <!-- {{goods.price !== undefined?goods.price:goods.real_price}} --> | 19 | <!-- {{goods.price !== undefined?goods.price:goods.real_price}} --> |
20 | {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}} | 20 | {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}} |
21 | </view> | 21 | </view> |
22 | </view> | 22 | </view> |
23 | <view class="trade_num">{{goods.trade_num}}人购买</view> | 23 | <view class="trade_num">{{goods.trade_num}}人购买</view> |
24 | </view> | 24 | </view> |
25 | </view> | 25 | </view> |
26 | </template> | 26 | </template> |
27 | 27 | ||
28 | <script> | 28 | <script> |
29 | import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue' | 29 | import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue' |
30 | // const MockData = require('@/static/easy-loadimage/mock-data.json') | 30 | // const MockData = require('@/static/easy-loadimage/mock-data.json') |
31 | export default { | 31 | export default { |
32 | components:{easyLoadimage}, | 32 | components:{easyLoadimage}, |
33 | props: { | 33 | props: { |
34 | /** | 34 | /** |
35 | * 商品数据 | 35 | * 商品数据 |
36 | */ | 36 | */ |
37 | goods: { | 37 | goods: { |
38 | id: Number, | 38 | id: Number, |
39 | imgurl: String, | 39 | imgurl: String, |
40 | name: String, | 40 | name: String, |
41 | rsSon: Object, | 41 | rsSon: Object, |
42 | originCost: String, | 42 | originCost: String, |
43 | price: String, | 43 | price: String, |
44 | trade_num: String, | 44 | trade_num: String, |
45 | goodType: String, | 45 | goodType: String, |
46 | }, | 46 | }, |
47 | scrollTop:Number, | 47 | scrollTop:Number, |
48 | viewHeight:Number, | 48 | viewHeight:Number, |
49 | }, | 49 | }, |
50 | created () { | 50 | created () { |
51 | }, | 51 | }, |
52 | data () { | 52 | data () { |
53 | return { | 53 | return { |
54 | 54 | ||
55 | } | 55 | } |
56 | }, | 56 | }, |
57 | 57 | ||
58 | methods: { | 58 | methods: { |
59 | toGoods (id, skId) { | 59 | toGoods (id, skId) { |
60 | console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) | 60 | console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) |
61 | uni.navigateTo({ | 61 | uni.navigateTo({ |
62 | url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId, | 62 | url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId, |
63 | success: res => {}, | 63 | success: res => {}, |
64 | fail: () => {}, | 64 | fail: () => {}, |
65 | complete: () => {}, | 65 | complete: () => {}, |
66 | }) | 66 | }) |
67 | }, | 67 | }, |
68 | }, | 68 | }, |
69 | } | 69 | } |
70 | </script> | 70 | </script> |
71 | 71 | ||
72 | <style lang="scss"> | 72 | <style lang="scss"> |
73 | 73 | ||
74 | image { | 74 | image { |
75 | width: 100%; | 75 | width: 100%; |
76 | height: 120rpx; | 76 | height: 120rpx; |
77 | } | 77 | } |
78 | .name { | 78 | .name { |
79 | width: 92%; | 79 | width: 92%; |
80 | height: 54rpx; | 80 | height: 54rpx; |
81 | padding: 5px 4%; | 81 | padding: 5px 4%; |
82 | display: -webkit-box; | 82 | display: -webkit-box; |
83 | -webkit-box-orient: vertical; | 83 | -webkit-box-orient: vertical; |
84 | -webkit-line-clamp: 2; | 84 | -webkit-line-clamp: 2; |
85 | text-align: justify; | 85 | text-align: justify; |
86 | overflow: hidden; | 86 | overflow: hidden; |
87 | font-size: 24rpx; | 87 | font-size: 26rpx; |
88 | color: #333333; | 88 | color: #333333; |
89 | } | 89 | } |
90 | .info { | 90 | .info { |
91 | display: flex; | 91 | display: flex; |
92 | justify-content: space-between; | 92 | justify-content: space-between; |
93 | align-items: center; | 93 | align-items: center; |
94 | width: 92%; | 94 | width: 92%; |
95 | padding: 5px 4% 5px 4%; | 95 | padding: 5px 4% 5px 4%; |
96 | .priceBox { | 96 | .priceBox { |
97 | display: flex; | 97 | display: flex; |
98 | justify-content: space-between; | 98 | justify-content: space-between; |
99 | align-items: center; | 99 | align-items: center; |
100 | .price { | 100 | .price { |
101 | color: #eb5d3b; | 101 | color: #eb5d3b; |
102 | font-size: 28rpx; | 102 | font-size: 28rpx; |
103 | font-weight: 600; | 103 | font-weight: 600; |
104 | margin-right: 10rpx; | 104 | margin-right: 10rpx; |
105 | } | 105 | } |
106 | .originCost { | 106 | .originCost { |
107 | text-decoration: line-through; | 107 | text-decoration: line-through; |
108 | color: #999999; | 108 | color: #999999; |
109 | font-size: 20rpx; | 109 | font-size: 20rpx; |
110 | } | 110 | } |
111 | } | 111 | } |
112 | .trade_num { | 112 | .trade_num { |
113 | color: #999999; | 113 | color: #999999; |
114 | font-size: 20rpx; | 114 | font-size: 20rpx; |
115 | } | 115 | } |
116 | } | 116 | } |
117 | </style> | 117 | </style> |
118 | 118 |
src/pages/addOpticsData/addOpticsData.vue
1 | <template> | 1 | <template> |
2 | <view class="wrap"> | 2 | <view class="wrap"> |
3 | <!-- 弹窗 --> | 3 | <!-- 弹窗 --> |
4 | <uni-popup ref="popup" type="center"> | 4 | <uni-popup ref="popup" type="center"> |
5 | <!-- 给一个左边弹窗的样式 --> | 5 | <!-- 给一个左边弹窗的样式 --> |
6 | <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}"> | 6 | <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}"> |
7 | <!-- 关闭弹窗按钮 --> | 7 | <!-- 关闭弹窗按钮 --> |
8 | <view class="closeBtn" @click="this.$refs.popup.close()"></view> | 8 | <view class="closeBtn" @click="this.$refs.popup.close()"></view> |
9 | <!-- 左 --> | 9 | <!-- 左 --> |
10 | <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> | 10 | <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> |
11 | <!-- 右 --> | 11 | <!-- 右 --> |
12 | <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> | 12 | <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> |
13 | </view> | 13 | </view> |
14 | </uni-popup> | 14 | </uni-popup> |
15 | <!-- 点击弹窗部分 --> | 15 | <!-- 点击弹窗部分 --> |
16 | <view class="header"> | 16 | <view class="header"> |
17 | <view class="headerLeft" @click=changeTap(0)> | 17 | <view class="headerLeft" @click=changeTap(1)> |
18 | <text>如何查看验光单?</text> | 18 | <text>如何查看验光单?</text> |
19 | <image src="../../static/dataLook.png" mode="aspectFit"></image> | 19 | <image src="../../static/dataLook.png" mode="aspectFit"></image> |
20 | </view> | 20 | </view> |
21 | <view class="headerRight" @click=changeTap(1)> | 21 | <view class="headerRight" @click=changeTap(0)> |
22 | <text>如何查看眼镜框架?</text> | 22 | <text>如何查看眼镜框架?</text> |
23 | <image src="../../static/glassLook.png" mode="aspectFit"></image> | 23 | <image src="../../static/glassLook.png" mode="aspectFit"></image> |
24 | </view> | 24 | </view> |
25 | </view> | 25 | </view> |
26 | <!-- 数据展示部分 --> | 26 | <!-- 数据展示部分 --> |
27 | <view class="dataMenu"> | 27 | <view class="dataMenu"> |
28 | <uni-collapse accordion="true"> | 28 | <uni-collapse accordion="true"> |
29 | <view class="item" v-for="(loveItem,index) in loveList" :key="index" > | 29 | <view class="item" v-for="(loveItem,index) in loveList" :key="index" > |
30 | <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'> | 30 | <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'> |
31 | <view class="loveDataInfo" @click="toNewData(2,index)"> | 31 | <view class="loveDataInfo" @click="toNewData(2,index)"> |
32 | <view class="dataInfoItem"> | 32 | <view class="dataInfoItem"> |
33 | <text>度数(SPH):</text><text>左:{{loveItem.leftSph}}</text><text>右:{{loveItem.rightSph}}</text> | 33 | <text>度数(SPH):</text><text>左:{{loveItem.leftSph}}</text><text>右:{{loveItem.rightSph}}</text> |
34 | </view> | 34 | </view> |
35 | <view class="dataInfoItem"> | 35 | <view class="dataInfoItem"> |
36 | <text>散光(CYL):</text><text>左:{{loveItem.leftCyl}}</text><text>右:{{loveItem.rightCyl}}</text> | 36 | <text>散光(CYL):</text><text>左:{{loveItem.leftCyl}}</text><text>右:{{loveItem.rightCyl}}</text> |
37 | </view> | 37 | </view> |
38 | <view class="dataInfoItem"> | 38 | <view class="dataInfoItem"> |
39 | <text>轴位(AXI):</text><text>左:{{loveItem.leftAxi}}</text><text>右:{{loveItem.rightAxi}}</text> | 39 | <text>轴位(AXI):</text><text>左:{{loveItem.leftAxi}}</text><text>右:{{loveItem.rightAxi}}</text> |
40 | </view> | 40 | </view> |
41 | <view class="dataInfoItem"> | 41 | <view class="dataInfoItem"> |
42 | <text>瞳距(PD):</text><text>{{loveItem.pd}}</text> | 42 | <text>瞳距(PD):</text><text>{{loveItem.pd}}</text> |
43 | </view> | 43 | </view> |
44 | </view> | 44 | </view> |
45 | </uni-collapse-item> | 45 | </uni-collapse-item> |
46 | </view> | 46 | </view> |
47 | </uni-collapse> | 47 | </uni-collapse> |
48 | </view> | 48 | </view> |
49 | <view class="footer"> | 49 | <view class="footer"> |
50 | <button class="btn" type="default" @click="toNewData(1)">新建验光单</button> | 50 | <button class="btn" type="default" @click="toNewData(1)">新建验光单</button> |
51 | </view> | 51 | </view> |
52 | </view> | 52 | </view> |
53 | </template> | 53 | </template> |
54 | 54 | ||
55 | <script> | 55 | <script> |
56 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 56 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
57 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 57 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
58 | import UniPopup from '@/components/UniPopup/uni-popup.vue' | 58 | import UniPopup from '@/components/UniPopup/uni-popup.vue' |
59 | import store from '@/store'; | 59 | import store from '@/store'; |
60 | export default { | 60 | export default { |
61 | components: {UniCollapse,UniCollapseItem,UniPopup}, | 61 | components: {UniCollapse,UniCollapseItem,UniPopup}, |
62 | data() { | 62 | data() { |
63 | return { | 63 | return { |
64 | whichTap:0 | 64 | whichTap:0 |
65 | }; | 65 | }; |
66 | }, | 66 | }, |
67 | onLoad: function(option) { | 67 | onLoad: function(option) { |
68 | //获取关心的人列表 | 68 | //获取关心的人列表 |
69 | store.dispatch('myLoveList/getLoveList', { | 69 | store.dispatch('myLoveList/getLoveList', { |
70 | uid: this.$store.state.user.userInfo.uid, | 70 | uid: this.$store.state.user.userInfo.uid, |
71 | }); | 71 | }); |
72 | }, | 72 | }, |
73 | computed:{ | 73 | computed:{ |
74 | loveList() { | 74 | loveList() { |
75 | console.log(this.$store.state.myLoveList.loveList) | 75 | console.log(this.$store.state.myLoveList.loveList) |
76 | return this.$store.state.myLoveList.loveList || [] | 76 | return this.$store.state.myLoveList.loveList || [] |
77 | }, | 77 | }, |
78 | }, | 78 | }, |
79 | methods:{ | 79 | methods:{ |
80 | changeTap(item){ | 80 | changeTap(item){ |
81 | this.whichTap = item | 81 | this.whichTap = item |
82 | this.$refs.popup.open() | 82 | this.$refs.popup.open() |
83 | }, | 83 | }, |
84 | //给时间搞一个nice的格式 | 84 | //给时间搞一个nice的格式 |
85 | getRightTime(time){ | 85 | getRightTime(time){ |
86 | //如果小于10 则返回'0'+m | 86 | //如果小于10 则返回'0'+m |
87 | // function add(m){return m<10?'0'+m:m} | 87 | // function add(m){return m<10?'0'+m:m} |
88 | //传给我的带有时分秒,想去除一下,但是完事IOS显示NaN,暂时不用吧 | 88 | //传给我的带有时分秒,想去除一下,但是完事IOS显示NaN,暂时不用吧 |
89 | // const oldTime = (new Date(time)).getTime() | 89 | // const oldTime = (new Date(time)).getTime() |
90 | // const year = new Date(oldTime).getFullYear() | 90 | // const year = new Date(oldTime).getFullYear() |
91 | // const month = new Date(oldTime).getMonth()+1 | 91 | // const month = new Date(oldTime).getMonth()+1 |
92 | // const day = new Date(oldTime).getDate() | 92 | // const day = new Date(oldTime).getDate() |
93 | // const newTime = add(year)+'-'+add(month)+'-'+add(day) | 93 | // const newTime = add(year)+'-'+add(month)+'-'+add(day) |
94 | 94 | ||
95 | // console.log(newTime) | 95 | // console.log(newTime) |
96 | // return newTime.replace(/-/g, '/') | 96 | // return newTime.replace(/-/g, '/') |
97 | return time | 97 | return time |
98 | }, | 98 | }, |
99 | getFirstName(name){ | 99 | getFirstName(name){ |
100 | return name.substring(0,1) | 100 | return name.substring(0,1) |
101 | }, | 101 | }, |
102 | toNewData(item,index){ | 102 | toNewData(item,index){ |
103 | // const args={ | 103 | // const args={ |
104 | // name:loveItem.name, | 104 | // name:loveItem.name, |
105 | // pd:loveItem.pd, | 105 | // pd:loveItem.pd, |
106 | // leftSph:loveItem.leftSph, | 106 | // leftSph:loveItem.leftSph, |
107 | // rightSph:loveItem.rightSph, | 107 | // rightSph:loveItem.rightSph, |
108 | // leftCyl:loveItem.leftCyl, | 108 | // leftCyl:loveItem.leftCyl, |
109 | // rightCyl:loveItem.rightCyl, | 109 | // rightCyl:loveItem.rightCyl, |
110 | // leftAxi:loveItem.leftAxi, | 110 | // leftAxi:loveItem.leftAxi, |
111 | // rightAxi:loveItem.rightAxi | 111 | // rightAxi:loveItem.rightAxi |
112 | // } | 112 | // } |
113 | uni.navigateTo({ | 113 | uni.navigateTo({ |
114 | // kinds 参数为 1 表示添加新的验光单, 2 表示更新验光单 | 114 | // kinds 参数为 1 表示添加新的验光单, 2 表示更新验光单 |
115 | // name 表示修改的人名儿,pd瞳距 | 115 | // name 表示修改的人名儿,pd瞳距 |
116 | url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index | 116 | url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index |
117 | }) | 117 | }) |
118 | } | 118 | } |
119 | } | 119 | } |
120 | } | 120 | } |
121 | </script> | 121 | </script> |
122 | 122 | ||
123 | <style lang="scss"> | 123 | <style lang="scss"> |
124 | .wrap{ | 124 | .wrap{ |
125 | min-height: 100vh; | 125 | min-height: 100vh; |
126 | width: 100%; | 126 | width: 100%; |
127 | background-color: #F2F2F2; | 127 | background-color: #F2F2F2; |
128 | .header{ | 128 | .header{ |
129 | height: 304rpx; | 129 | height: 304rpx; |
130 | width: 100%; | 130 | width: 100%; |
131 | background-color: #FFFFFF; | 131 | background-color: #FFFFFF; |
132 | display: flex; | 132 | display: flex; |
133 | justify-content: space-around; | 133 | justify-content: space-around; |
134 | align-items: center; | 134 | align-items: center; |
135 | view{ | 135 | view{ |
136 | height: 210rpx; | 136 | height: 210rpx; |
137 | width: 304rpx; | 137 | width: 304rpx; |
138 | background: #FDF7F5; | 138 | background: #FDF7F5; |
139 | border-radius: 4px; | 139 | border-radius: 4px; |
140 | border-radius: 4px; | 140 | border-radius: 4px; |
141 | display: flex; | 141 | display: flex; |
142 | flex-direction: column; | 142 | flex-direction: column; |
143 | align-items: center; | 143 | align-items: center; |
144 | justify-content: center; | 144 | justify-content: center; |
145 | text{ | 145 | text{ |
146 | font-size: 12px; | 146 | font-size: 12px; |
147 | color: #333333; | 147 | color: #333333; |
148 | } | 148 | } |
149 | image{ | 149 | image{ |
150 | height: 144rpx; | 150 | height: 144rpx; |
151 | width: 144rpx; | 151 | width: 144rpx; |
152 | } | 152 | } |
153 | } | 153 | } |
154 | } | 154 | } |
155 | .dataMenu{ | 155 | .dataMenu{ |
156 | margin-top: 20rpx; | 156 | margin-top: 20rpx; |
157 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 157 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
158 | width: 100%; | 158 | width: 100%; |
159 | background-color: #FFFFFF; | 159 | background-color: #FFFFFF; |
160 | margin-bottom: 120rpx; | 160 | margin-bottom: 120rpx; |
161 | .item{ | 161 | .item{ |
162 | padding: 0 40rpx; | 162 | padding: 0 40rpx; |
163 | .loveDataInfo{ | 163 | .loveDataInfo{ |
164 | padding: 0 44rpx 0 70rpx; | 164 | padding: 0 44rpx 0 70rpx; |
165 | display: flex; | 165 | display: flex; |
166 | justify-content: space-around; | 166 | justify-content: space-around; |
167 | flex-direction: column; | 167 | flex-direction: column; |
168 | align-items: flex-start; | 168 | align-items: flex-start; |
169 | .dataInfoItem{ | 169 | .dataInfoItem{ |
170 | font-size: 12px; | 170 | font-size: 12px; |
171 | color: #333333; | 171 | color: #333333; |
172 | margin-bottom: 34rpx; | 172 | margin-bottom: 34rpx; |
173 | text{ | 173 | text{ |
174 | font-size: 12px; | 174 | font-size: 12px; |
175 | color: #2A2A2A; | 175 | color: #2A2A2A; |
176 | margin-right: 20rpx; | 176 | margin-right: 20rpx; |
177 | } | 177 | } |
178 | } | 178 | } |
179 | } | 179 | } |
180 | } | 180 | } |
181 | } | 181 | } |
182 | .footer{ | 182 | .footer{ |
183 | width: 100%; | 183 | width: 100%; |
184 | position: fixed; | 184 | position: fixed; |
185 | bottom: 0; | 185 | bottom: 0; |
186 | left: 0; | 186 | left: 0; |
187 | .btn{ | 187 | .btn{ |
188 | width: 100%; | 188 | width: 100%; |
189 | height: 112rpx; | 189 | height: 112rpx; |
190 | line-height: 112rpx; | 190 | line-height: 112rpx; |
191 | background: #FF6B4A; | 191 | background: #FF6B4A; |
192 | font-size: 16px; | 192 | font-size: 16px; |
193 | color: #FFFFFF; | 193 | color: #FFFFFF; |
194 | } | 194 | } |
195 | } | 195 | } |
196 | } | 196 | } |
197 | .popUpWrap{ | 197 | .popUpWrap{ |
198 | height: 850rpx; | 198 | height: 850rpx; |
199 | width: 542rpx; | 199 | width: 542rpx; |
200 | background-color: #FFFFFF; | 200 | background-color: #FFFFFF; |
201 | border-radius: 4px; | 201 | border-radius: 4px; |
202 | border: 1px solid #979797; | 202 | border: 1px solid #979797; |
203 | .closeBtn{ | 203 | .closeBtn{ |
204 | height: 28rpx; | 204 | height: 28rpx; |
205 | width: 28rpx; | 205 | width: 28rpx; |
206 | // border: 1px solid red; | 206 | // border: 1px solid red; |
207 | position: absolute; | 207 | position: absolute; |
208 | top: 20rpx; | 208 | top: 20rpx; |
209 | right: 20rpx; | 209 | right: 20rpx; |
210 | } | 210 | } |
211 | .glassInfo{ | 211 | .glassInfo{ |
212 | height: 474rpx; | 212 | height: 474rpx; |
213 | width: 528rpx; | 213 | width: 528rpx; |
214 | } | 214 | } |
215 | .dataInfo{ | 215 | .dataInfo{ |
216 | height: 850rpx; | 216 | height: 850rpx; |
217 | width: 542rpx; | 217 | width: 542rpx; |
218 | } | 218 | } |
219 | } | 219 | } |
220 | .popUpWrap1{ | 220 | .popUpWrap1{ |
221 | height: 474rpx; | 221 | height: 474rpx; |
222 | width: 528rpx; | 222 | width: 528rpx; |
223 | border-radius: 4px; | 223 | border-radius: 4px; |
224 | border: 1px solid #979797; | 224 | border: 1px solid #979797; |
225 | } | 225 | } |
226 | 226 | ||
227 | </style> | 227 | </style> |
228 | 228 |
src/pages/address/addressList.vue
1 | <template> | 1 | <template> |
2 | <view class="content"> | 2 | <view class="content"> |
3 | <view | 3 | <view |
4 | v-if="addressList.length !== 0" | 4 | v-if="addressList.length !== 0" |
5 | class="list" | 5 | class="list" |
6 | > | 6 | > |
7 | <view | 7 | <view |
8 | v-for="(item, index) in addressList" | 8 | v-for="(item, index) in addressList" |
9 | :key="index" | 9 | :key="index" |
10 | class="order-user" | 10 | class="order-user" |
11 | @tap="toOrder(item.add_id)" | 11 | @tap="toOrder(item.add_id)" |
12 | > | 12 | > |
13 | <view class="order-user-head"> | 13 | <view class="order-user-head"> |
14 | <view class="name"> | 14 | <view class="name"> |
15 | <view | 15 | <view |
16 | v-if="item.default === '1'" | 16 | v-if="item.default === '1'" |
17 | class="default" | 17 | class="default" |
18 | ><text>默认</text></view>{{item.name}} | 18 | ><text>默认</text></view>{{item.name}} |
19 | </view> | 19 | </view> |
20 | <text class="mobile">{{item.mobile}}</text> | 20 | <text class="mobile">{{item.mobile}}</text> |
21 | </view> | 21 | </view> |
22 | <view class="order-user-body"> | 22 | <view class="order-user-body"> |
23 | <image src="../../static/myorder-paying-location.png"></image> | 23 | <image src="../../static/myorder-paying-location.png"></image> |
24 | <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> | 24 | <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> |
25 | </view> | 25 | </view> |
26 | <image | 26 | <image |
27 | @tap="toEditAddress(item.add_id)" | 27 | @tap="toEditAddress(item.add_id)" |
28 | v-if="item.default === '1'" | 28 | v-if="item.default === '1'" |
29 | class="arrow" | 29 | class="arrow" |
30 | src="../../static/right.png" | 30 | src="../../static/right.png" |
31 | ></image> | 31 | ></image> |
32 | <image | 32 | <image |
33 | @tap="toEditAddress(item.add_id)" | 33 | @tap="toEditAddress(item.add_id)" |
34 | v-else | 34 | v-else |
35 | class="arrow pen" | 35 | class="arrow pen" |
36 | src="../../static/icon-pen.png" | 36 | src="../../static/icon-pen.png" |
37 | ></image> | 37 | ></image> |
38 | </view> | 38 | </view> |
39 | </view> | 39 | </view> |
40 | <view | 40 | <view |
41 | v-else | 41 | v-else |
42 | class="empty" | 42 | class="empty" |
43 | > | 43 | > |
44 | 暂无收货地址 | 44 | 暂无收货地址 |
45 | </view> | 45 | </view> |
46 | <button @tap="toAddAddress" class="add">新建收货地址</button> | 46 | <button @tap="toAddAddress" class="add">新建收货地址</button> |
47 | </view> | 47 | </view> |
48 | </template> | 48 | </template> |
49 | 49 | ||
50 | <script> | 50 | <script> |
51 | import store from '@/store' | 51 | import store from '@/store' |
52 | export default { | 52 | export default { |
53 | data () { | 53 | data () { |
54 | return {} | 54 | return {} |
55 | }, | 55 | }, |
56 | computed: { | 56 | computed: { |
57 | addressList () { | 57 | addressList () { |
58 | return this.$store.state.address.list | 58 | return this.$store.state.address.list |
59 | } | 59 | } |
60 | }, | 60 | }, |
61 | onLoad ({ edit }) { | 61 | onLoad ({ edit }) { |
62 | if (edit) { | 62 | if (edit) { |
63 | this.edit = true | 63 | this.edit = true |
64 | } | 64 | } |
65 | store.dispatch('address/list') | 65 | store.dispatch('address/list') |
66 | }, | 66 | }, |
67 | methods: { | 67 | methods: { |
68 | toAddAddress() { | 68 | toAddAddress() { |
69 | console.log('aaaaa-a') | 69 | console.log('aaaaa-a') |
70 | uni.navigateTo({ | 70 | uni.navigateTo({ |
71 | url: 'addAddress', | 71 | url: 'addAddress', |
72 | fail: (error) => { | 72 | fail: (error) => { |
73 | console.error('跳转出现错误', error) | 73 | console.error('跳转出现错误', error) |
74 | } | 74 | } |
75 | }) | 75 | }) |
76 | }, | 76 | }, |
77 | toEditAddress (addId) { | 77 | toEditAddress (addId) { |
78 | console.log('addId', addId) | 78 | console.log('addId', addId) |
79 | uni.navigateTo({ | 79 | uni.navigateTo({ |
80 | url: `addAddress?addId=${addId}`, | 80 | url: `addAddress?addId=${addId}`, |
81 | fail: (error) => { | 81 | fail: (error) => { |
82 | console.error('跳转出现错误', error) | 82 | console.error('跳转出现错误', error) |
83 | } | 83 | } |
84 | }) | 84 | }) |
85 | }, | 85 | }, |
86 | toOrder (addId) { | 86 | toOrder (addId) { |
87 | if (this.edit) { | 87 | if (this.edit) { |
88 | uni.navigateTo({ | 88 | uni.navigateTo({ |
89 | url: `../confirmOrder/confirmOrder?addressId=${addId}`, | 89 | url: `../confirmOrder/confirmOrder?addressId=${addId}`, |
90 | fail: (error) => { | 90 | fail: (error) => { |
91 | console.error('跳转出现错误', error) | 91 | console.error('跳转出现错误', error) |
92 | } | 92 | } |
93 | }) | 93 | }) |
94 | } | 94 | } |
95 | } | 95 | } |
96 | } | 96 | } |
97 | } | 97 | } |
98 | </script> | 98 | </script> |
99 | 99 | ||
100 | <style lang="scss"> | 100 | <style lang="scss"> |
101 | .content { | 101 | .content { |
102 | min-height: 100vh; | 102 | min-height: 100vh; |
103 | background-color: #f2f2f2; | 103 | background-color: #f2f2f2; |
104 | padding-top: 20rpx; | 104 | padding-top: 20rpx; |
105 | padding-bottom: 112rpx; | 105 | padding-bottom: 112rpx; |
106 | .order-user { | 106 | .order-user { |
107 | width: 670rpx; | 107 | width: 670rpx; |
108 | height: 228rpx; | 108 | height: 228rpx; |
109 | background: #ffffff; | 109 | background: #ffffff; |
110 | border-radius: 14rpx; | 110 | border-radius: 14rpx; |
111 | margin: 0 auto; | 111 | margin: 0 auto; |
112 | margin-bottom: 20rpx; | 112 | margin-bottom: 20rpx; |
113 | position: relative; | 113 | position: relative; |
114 | .order-user-head { | 114 | .order-user-head { |
115 | display: flex; | 115 | display: flex; |
116 | height: 108rpx; | 116 | height: 108rpx; |
117 | width: 100%; | 117 | width: 100%; |
118 | align-items: center; | 118 | align-items: center; |
119 | margin-left: 126rpx; | 119 | margin-left: 126rpx; |
120 | .name { | 120 | .name { |
121 | display: flex; | 121 | display: flex; |
122 | justify-content: space-between; | 122 | justify-content: space-between; |
123 | font-size: 14px; | 123 | font-size: 14px; |
124 | color: #333333; | 124 | color: #333333; |
125 | letter-spacing: -0.26px; | 125 | letter-spacing: -0.26px; |
126 | margin-right: 20rpx; | 126 | margin-right: 20rpx; |
127 | .default { | 127 | .default { |
128 | height: 40rpx; | 128 | height: 40rpx; |
129 | width: 80rpx; | 129 | width: 80rpx; |
130 | background-color: #4a90e2; | 130 | background-color: #4a90e2; |
131 | border-radius: 13px; | 131 | border-radius: 13px; |
132 | border-radius: 13px; | 132 | border-radius: 13px; |
133 | text-align: center; | 133 | text-align: center; |
134 | margin-right: 20rpx; | 134 | margin-right: 20rpx; |
135 | text { | 135 | text { |
136 | display: flex; | ||
137 | justify-content: center; | ||
138 | align-items: center; | ||
136 | font-size: 12px; | 139 | font-size: 12px; |
137 | color: #ffffff; | 140 | color: #ffffff; |
138 | letter-spacing: -0.23px; | 141 | letter-spacing: -0.23px; |
139 | } | 142 | } |
140 | } | 143 | } |
141 | } | 144 | } |
142 | .mobile { | 145 | .mobile { |
143 | font-size: 14px; | 146 | font-size: 14px; |
144 | color: #999999; | 147 | color: #999999; |
145 | letter-spacing: -0.26px; | 148 | letter-spacing: -0.26px; |
146 | } | 149 | } |
147 | } | 150 | } |
148 | .order-user-body { | 151 | .order-user-body { |
149 | display: flex; | 152 | display: flex; |
150 | width: 100%; | 153 | width: 100%; |
151 | image { | 154 | image { |
152 | width: 24px; | 155 | width: 24px; |
153 | height: 26px; | 156 | height: 26px; |
154 | margin: 12rpx 32rpx 0 40rpx; | 157 | margin: 12rpx 32rpx 0 40rpx; |
155 | } | 158 | } |
156 | .address { | 159 | .address { |
157 | font-weight: bold; | 160 | font-weight: bold; |
158 | font-size: 14px; | 161 | font-size: 14px; |
159 | color: #333333; | 162 | color: #333333; |
160 | letter-spacing: -0.26px; | 163 | letter-spacing: -0.26px; |
161 | } | 164 | } |
162 | } | 165 | } |
163 | .arrow { | 166 | .arrow { |
164 | width: 6px; | 167 | width: 12px; |
165 | height: 12px; | 168 | height: 12px; |
166 | position: absolute; | 169 | position: absolute; |
167 | right: 40rpx; | 170 | right: 40rpx; |
168 | bottom: 104rpx; | 171 | bottom: 104rpx; |
169 | } | 172 | } |
170 | } | 173 | } |
171 | .empty { | 174 | .empty { |
172 | color: #666; | 175 | color: #666; |
173 | font-size: 16px; | 176 | font-size: 16px; |
174 | text-align: center; | 177 | text-align: center; |
175 | padding-top: 30vh; | 178 | padding-top: 30vh; |
176 | } | 179 | } |
177 | .add { | 180 | .add { |
178 | position: fixed; | 181 | position: fixed; |
179 | bottom: 0; | 182 | bottom: 0; |
180 | left: 0; | 183 | left: 0; |
181 | height: 112rpx; | 184 | height: 112rpx; |
182 | width: 100%; | 185 | width: 100%; |
183 | background-color: #ff6b4a; | 186 | background-color: #ff6b4a; |
184 | display: flex; | 187 | display: flex; |
185 | justify-content: center; | 188 | justify-content: center; |
186 | align-items: center; | 189 | align-items: center; |
187 | font-size: 16px; | 190 | font-size: 16px; |
188 | color: #ffffff; | 191 | color: #ffffff; |
189 | letter-spacing: -0.3px; | 192 | letter-spacing: -0.3px; |
190 | } | 193 | } |
191 | } | 194 | } |
192 | </style> | 195 | </style> |
193 | 196 |
src/pages/confirmOrder/confirmOrder.vue
1 | <template> | 1 | <template> |
2 | <view class="wrap"> | 2 | <view class="wrap"> |
3 | <view></view> | 3 | <view></view> |
4 | <view | 4 | <view |
5 | class="addAddress" | 5 | class="addAddress" |
6 | @tap="toaddAddress" | 6 | @tap="toaddAddress" |
7 | v-if="this.showAddress" | 7 | v-if="this.showAddress" |
8 | > | 8 | > |
9 | <view class="addIcon"> | 9 | <view class="addIcon"> |
10 | <image | 10 | <image |
11 | src="../../static/add.png" | 11 | src="../../static/add.png" |
12 | mode="aspectFill" | 12 | mode="aspectFill" |
13 | ></image> | 13 | ></image> |
14 | </view> | 14 | </view> |
15 | <view class="addressText">{{addAddress}}</view> | 15 | <view class="addressText">{{addAddress}}</view> |
16 | <image | 16 | <image |
17 | src="../../static/right.png" | 17 | src="../../static/right.png" |
18 | mode="aspectFill" | 18 | mode="aspectFill" |
19 | ></image> | 19 | ></image> |
20 | </view> | 20 | </view> |
21 | <view | 21 | <view |
22 | v-else | 22 | v-else |
23 | @tap="toaddAddress" | 23 | @tap="toaddAddress" |
24 | class="list order-user" | 24 | class="list order-user" |
25 | > | 25 | > |
26 | <view class="order-user-head"> | 26 | <view class="order-user-head"> |
27 | <view class="name"> | 27 | <view class="name"> |
28 | <view | 28 | <view |
29 | v-if="addressInfo.default === '1'" | 29 | v-if="addressInfo.default === '1'" |
30 | class="default" | 30 | class="default" |
31 | ><text>默认</text></view>{{addressInfo.name}} | 31 | ><text>默认</text></view>{{addressInfo.name}} |
32 | </view> | 32 | </view> |
33 | <text class="mobile">{{addressInfo.mobile}}</text> | 33 | <text class="mobile">{{addressInfo.mobile}}</text> |
34 | </view> | 34 | </view> |
35 | <view class="order-user-body"> | 35 | <view class="order-user-body"> |
36 | <image src="../../static/myorder-paying-location.png"></image> | 36 | <image src="../../static/myorder-paying-location.png"></image> |
37 | <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text> | 37 | <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text> |
38 | </view> | 38 | </view> |
39 | <image | 39 | <image |
40 | class="arrow" | 40 | class="arrow" |
41 | src="../../static/right.png" | 41 | src="../../static/right.png" |
42 | mode="aspectFill" | ||
42 | ></image> | 43 | ></image> |
43 | </view> | 44 | </view> |
44 | <view class="content"> | 45 | <view class="content"> |
45 | <view class="orderInfo"> | 46 | <view class="orderInfo"> |
46 | <view class="title"> | 47 | <view class="title"> |
47 | <image | 48 | <image |
48 | src="../../static/store.png" | 49 | src="../../static/store.png" |
49 | mode="aspectFill" | 50 | mode="aspectFill" |
50 | style="width: 40rpx;height: 40rpx;" | 51 | style="width: 40rpx;height: 40rpx;" |
51 | ></image> | 52 | ></image> |
52 | <text>非常戴镜</text> | 53 | <text>非常戴镜</text> |
53 | </view> | 54 | </view> |
54 | <view class="infoBox"> | 55 | <view class="infoBox"> |
55 | <view class="infoTop"> | 56 | <view class="infoTop"> |
56 | <image | 57 | <image |
57 | :src="goodInfo.img_index_url" | 58 | :src="goodInfo.img_index_url" |
58 | mode="aspectFill" | 59 | mode="aspectFill" |
59 | ></image> | 60 | ></image> |
60 | <view class="infoRight"> | 61 | <view class="infoRight"> |
61 | <text class="goodName">商品名称商品名称商品名称名称名称</text> | 62 | <text class="goodName">商品名称商品名称商品名称名称名称</text> |
62 | <text class="remarks">支持7天无理由退货 顺丰发货</text> | 63 | <text class="remarks">支持7天无理由退货 顺丰发货</text> |
63 | <view class="priceBox"> | 64 | <view class="priceBox"> |
64 | <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost"> | 65 | <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost"> |
65 | ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}} | 66 | ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}} |
66 | </text></view> | 67 | </text></view> |
67 | <view class="counter"> | 68 | <view class="counter"> |
68 | <view | 69 | <view |
69 | class="btn" | 70 | class="btn" |
70 | disabled="this.disabled" | 71 | disabled="this.disabled" |
71 | type="default" | 72 | type="default" |
72 | @click="counter(false)" | 73 | @click="counter(false)" |
73 | >-</view> | 74 | >-</view> |
74 | <text>{{count}}</text> | 75 | <text>{{count}}</text> |
75 | <view | 76 | <view |
76 | class="btn" | 77 | class="btn" |
77 | type="default" | 78 | type="default" |
78 | @click="counter(true)" | 79 | @click="counter(true)" |
79 | >+</view> | 80 | >+</view> |
80 | </view> | 81 | </view> |
81 | </view> | 82 | </view> |
82 | </view> | 83 | </view> |
83 | </view> | 84 | </view> |
84 | <view class="infoBottom"> | 85 | <view class="infoBottom"> |
85 | <view class="norm">规格 <text> | 86 | <view class="norm">规格 <text> |
86 | <!-- 长度超出变省略号未做 --> | 87 | <!-- 长度超出变省略号未做 --> |
87 | <block | 88 | <block |
88 | v-for="(item, index) in current" | 89 | v-for="(item, index) in current" |
89 | :key="index" | 90 | :key="index" |
90 | >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block> | 91 | >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block> |
91 | </block> | 92 | </block> |
92 | </text></view> | 93 | </text></view> |
93 | <view class="shippingMethod">配送方式 <text>快递</text></view> | 94 | <view class="shippingMethod">配送方式 <text>快递</text></view> |
94 | <view class="message">买家留言 | 95 | <view class="message">买家留言 |
95 | <input | 96 | <input |
96 | type="text" | 97 | type="text" |
97 | :value="note" | 98 | :value="note" |
98 | placeholder="建议提前协商(50字以内)" | 99 | placeholder="建议提前协商(50字以内)" |
99 | /> | 100 | /> |
100 | </view> | 101 | </view> |
101 | </view> | 102 | </view> |
102 | </view> | 103 | </view> |
103 | </view> | 104 | </view> |
104 | <view class="payWay"> | 105 | <view class="payWay"> |
105 | <view class="item"> | 106 | <view class="item"> |
106 | <text>支付方式</text> | 107 | <text>支付方式</text> |
107 | <view class="itemRight"> | 108 | <view class="itemRight"> |
108 | <view class="rightText"> | 109 | <view class="rightText"> |
109 | <view class="choosePayWay"> | 110 | <view class="choosePayWay"> |
110 | <image | 111 | <image |
111 | src="../../static/store.png" | 112 | src="../../static/chat_logo.png" |
112 | mode="aspectFill" | 113 | mode="aspectFill" |
113 | ></image> | 114 | ></image> |
114 | <text>微信支付</text> | 115 | <text>微信支付</text> |
115 | </view> | 116 | </view> |
116 | <!-- <view class="randomSubstraction">最高随机立减¥99</view> --> | 117 | <!-- <view class="randomSubstraction">最高随机立减¥99</view> --> |
117 | </view> | 118 | </view> |
118 | <!-- <image | 119 | <!-- <image |
119 | src="../../static/right.png" | 120 | src="../../static/right.png" |
120 | mode="aspectFill" | 121 | mode="aspectFill" |
121 | ></image> --> | 122 | ></image> --> |
122 | </view> | 123 | </view> |
123 | </view> | 124 | </view> |
124 | <!-- <view class="item"> | 125 | <!-- <view class="item"> |
125 | <text>优惠券</text> | 126 | <text>优惠券</text> |
126 | <view class="itemRight"> | 127 | <view class="itemRight"> |
127 | <view class="rightText"> | 128 | <view class="rightText"> |
128 | <view class="chooseOffers"> | 129 | <view class="chooseOffers"> |
129 | <text>-¥70.00</text> | 130 | <text>-¥70.00</text> |
130 | </view> | 131 | </view> |
131 | <view class="preferentialWay">最大优惠</view> | 132 | <view class="preferentialWay">最大优惠</view> |
132 | </view> | 133 | </view> |
133 | <image | 134 | <image |
134 | src="../../static/right.png" | 135 | src="../../static/right.png" |
135 | mode="aspectFill" | 136 | mode="aspectFill" |
136 | ></image> | 137 | ></image> |
137 | </view> | 138 | </view> |
138 | </view> --> | 139 | </view> --> |
139 | <view class="item"> | 140 | <view class="item"> |
140 | <text>运费</text> | 141 | <text>运费</text> |
141 | <view class="itemRight"> | 142 | <view class="itemRight"> |
142 | <view class="freight">免运费</view> | 143 | <view class="freight">免运费</view> |
143 | </view> | 144 | </view> |
144 | </view> | 145 | </view> |
145 | <view class="item"> | 146 | <view class="item"> |
146 | <text>合计</text> | 147 | <text>合计</text> |
147 | <view class="itemRight"> | 148 | <view class="itemRight"> |
148 | <view class="total">¥{{Number(skuInfo.real_price) * count}}</view> | 149 | <view class="total">¥{{Number(skuInfo.real_price) * count}}</view> |
149 | </view> | 150 | </view> |
150 | </view> | 151 | </view> |
151 | </view> | 152 | </view> |
152 | <!-- | 153 | <!-- |
153 | <view class="checkBox"> | 154 | <view class="checkBox"> |
154 | <checkbox-group> | 155 | <checkbox-group> |
155 | <label> | 156 | <label> |
156 | <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 | 157 | <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 |
157 | </label> | 158 | </label> |
158 | </checkbox-group> | 159 | </checkbox-group> |
159 | </view> --> | 160 | </view> --> |
160 | </view> | 161 | </view> |
162 | <view class="last_zhanwei"></view> | ||
161 | <view class="footer"> | 163 | <view class="footer"> |
162 | <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view> | 164 | <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view> |
163 | <view class="footerRight"> | 165 | <view class="footerRight"> |
164 | <view | 166 | <view |
165 | class="paybtn" | 167 | class="paybtn" |
166 | @tap="orderBuild" | 168 | @tap="orderBuild" |
167 | >立即支付</view> | 169 | >立即支付</view> |
168 | </view> | 170 | </view> |
169 | </view> | 171 | </view> |
170 | </view> | 172 | </view> |
171 | </template> | 173 | </template> |
172 | 174 | ||
173 | <script> | 175 | <script> |
174 | import store from '@/store' | 176 | import store from '@/store' |
175 | import MD5Util from '../../utils/md5' | 177 | import MD5Util from '../../utils/md5' |
176 | 178 | ||
177 | export default { | 179 | export default { |
178 | data() { | 180 | data() { |
179 | return { | 181 | return { |
180 | addAddress: '添加收货地址', | 182 | addAddress: '添加收货地址', |
181 | count: 1, | 183 | count: 1, |
182 | pid: 0, | 184 | pid: 0, |
183 | disabled: false, | 185 | disabled: false, |
184 | freight: 0.0, | 186 | freight: 0.0, |
185 | showAddress: false, | 187 | showAddress: false, |
186 | note: '', | 188 | note: '', |
187 | addressInfo: { | 189 | addressInfo: { |
188 | address: '', | 190 | address: '', |
189 | }, | 191 | }, |
190 | // isAnonymous: | 192 | // isAnonymous: |
191 | } | 193 | } |
192 | }, | 194 | }, |
193 | onLoad({ pid, addressId, isCart }) { | 195 | onLoad({ pid, addressId, isCart }) { |
194 | this.pid = pid | 196 | this.pid = pid |
195 | // 若已经选择地址 | 197 | // 若已经选择地址 |
196 | if (addressId) { | 198 | if (addressId) { |
197 | store | 199 | store |
198 | .dispatch('address/details', { | 200 | .dispatch('address/details', { |
199 | add_id: addressId, | 201 | add_id: addressId, |
200 | }) | 202 | }) |
201 | .then(({ code, data }) => { | 203 | .then(({ code, data }) => { |
202 | if (code === 1) { | 204 | if (code === 1) { |
203 | console.log('code', code, data) | 205 | console.log('code', code, data) |
204 | this.showAddress = true | 206 | this.showAddress = true |
205 | this.addressInfo = data | 207 | this.addressInfo = data |
206 | } | 208 | } |
207 | }) | 209 | }) |
208 | } else { | 210 | } else { |
209 | store.dispatch('address/default').then(({ code, data }) => { | 211 | store.dispatch('address/default').then(({ code, data }) => { |
210 | if (code === 1) { | 212 | if (code === 1) { |
211 | console.log('code', code, data) | 213 | console.log('code', code, data) |
212 | this.showAddress = true | 214 | this.showAddress = true |
213 | this.addressInfo = data | 215 | this.addressInfo = data |
214 | } | 216 | } |
215 | }) | 217 | }) |
216 | } | 218 | } |
217 | store.dispatch('read/fetch', { | 219 | store.dispatch('read/fetch', { |
218 | pid, | 220 | pid, |
219 | }) | 221 | }) |
220 | }, | 222 | }, |
221 | computed: { | 223 | computed: { |
222 | goodInfo() { | 224 | goodInfo() { |
223 | console.log('state', this.$store.state) | 225 | console.log('state', this.$store.state) |
224 | return this.$store.state.read.goodInfo | 226 | return this.$store.state.read.goodInfo |
225 | }, | 227 | }, |
226 | skuInfo() { | 228 | skuInfo() { |
227 | return this.$store.state.order.param.sk_id_arr | 229 | return this.$store.state.order.param.sk_id_arr |
228 | }, | 230 | }, |
229 | attrList() { | 231 | attrList() { |
230 | return this.$store.state.order.param.attrList | 232 | return this.$store.state.order.param.attrList |
231 | }, | 233 | }, |
232 | current() { | 234 | current() { |
233 | return this.$store.state.order.param.current | 235 | return this.$store.state.order.param.current |
234 | }, | 236 | }, |
235 | }, | 237 | }, |
236 | methods: { | 238 | methods: { |
237 | counter(isadd) { | 239 | counter(isadd) { |
238 | if (isadd) { | 240 | if (isadd) { |
239 | this.count++ | 241 | this.count++ |
240 | } else { | 242 | } else { |
241 | this.count <= 1 ? (this.disabled = true) : this.count-- | 243 | this.count <= 1 ? (this.disabled = true) : this.count-- |
242 | } | 244 | } |
243 | }, | 245 | }, |
244 | // 跳转添加地址页面 | 246 | // 跳转添加地址页面 |
245 | toaddAddress() { | 247 | toaddAddress() { |
246 | uni.navigateTo({ | 248 | uni.navigateTo({ |
247 | url: `../address/addressList?edit=${1}`, | 249 | url: `../address/addressList?edit=${1}`, |
248 | success: res => {}, | 250 | success: res => {}, |
249 | fail: error => { | 251 | fail: error => { |
250 | console.log('跳转到地址列表页面失败====>', error) | 252 | console.log('跳转到地址列表页面失败====>', error) |
251 | }, | 253 | }, |
252 | complete: () => {}, | 254 | complete: () => {}, |
253 | }) | 255 | }) |
254 | }, | 256 | }, |
255 | // 下单 | 257 | // 下单 |
256 | orderBuild() { | 258 | orderBuild() { |
257 | uni.showLoading({ | 259 | uni.showLoading({ |
258 | title: '支付中', | 260 | title: '支付中', |
259 | }) | 261 | }) |
260 | console.log('this', this.$store.state) | 262 | console.log('this', this.$store.state) |
261 | const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param | 263 | const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param |
262 | store.dispatch('order/buyNow', { | 264 | store.dispatch('order/buyNow', { |
263 | pid: skId.pid, | 265 | pid: skId.pid, |
264 | sk_id: skId.sk_id, | 266 | sk_id: skId.sk_id, |
265 | number: this.count, | 267 | number: this.count, |
266 | mp_id: mpId, | 268 | mp_id: mpId, |
267 | address: JSON.stringify(this.addressInfo), | 269 | address: JSON.stringify(this.addressInfo), |
268 | totalPrice: Number(this.skuInfo.real_price) * this.count * 100, | 270 | totalPrice: Number(this.skuInfo.real_price) * this.count * 100, |
269 | liuyan: this.note, | 271 | liuyan: this.note, |
270 | dir: 1, | 272 | dir: 1, |
271 | }).then((res) => { | 273 | }).then((res) => { |
272 | this.pay(res.data) | 274 | this.pay(res.data) |
273 | }) | 275 | }) |
274 | }, | 276 | }, |
275 | // 支付 | 277 | // 支付 |
276 | pay(res) { | 278 | pay(res) { |
277 | console.log('pay', res) | 279 | console.log('pay', res) |
278 | const { data, exKeyName: keyName } = res | 280 | const { data, exKeyName: keyName } = res |
279 | const uid = uni.getStorageSync('uid') | 281 | const uid = uni.getStorageSync('uid') |
280 | const timeStamp = new Date().getTime().toString() | 282 | const timeStamp = new Date().getTime().toString() |
281 | const nonceStr = 'asfafasfasfasfasf' | 283 | const nonceStr = 'asfafasfasfasfasf' |
282 | // 支付参数 | 284 | // 支付参数 |
283 | const fieldSet = { | 285 | const fieldSet = { |
284 | openid: this.$store.state.user.userInfo.openid, | 286 | openid: this.$store.state.user.userInfo.openid, |
285 | uid: this.$store.state.user.userInfo.uid, | 287 | uid: this.$store.state.user.userInfo.uid, |
286 | shopid: 0, | 288 | shopid: 0, |
287 | payCate: 2020, | 289 | payCate: 2020, |
288 | payMoney: Number(this.skuInfo.real_price) * this.count * 100, | 290 | payMoney: Number(this.skuInfo.real_price) * this.count * 100, |
289 | payWoodId: `fcdj-${uid}-${keyName}`, | 291 | payWoodId: `fcdj-${uid}-${keyName}`, |
290 | payWoodDesc: '在【非常戴镜】的微信付款凭证', | 292 | payWoodDesc: '在【非常戴镜】的微信付款凭证', |
291 | nonceStr, | 293 | nonceStr, |
292 | signType: 'MD5', | 294 | signType: 'MD5', |
293 | app_uid: 2020, | 295 | app_uid: 2020, |
294 | timeStamp, | 296 | timeStamp, |
295 | keyname: keyName, | 297 | keyname: keyName, |
296 | billInfo: JSON.stringify(data), | 298 | billInfo: JSON.stringify(data), |
297 | } | 299 | } |
298 | // 请求后台支付接口 | 300 | // 请求后台支付接口 |
299 | store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { | 301 | store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { |
300 | if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { | 302 | if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { |
301 | const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` | 303 | const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` |
302 | const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' | 304 | const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' |
303 | 305 | ||
304 | // 微信支付接口 | 306 | // 微信支付接口 |
305 | uni.requestPayment({ | 307 | uni.requestPayment({ |
306 | appId: data.appid, | 308 | appId: data.appid, |
307 | timeStamp, | 309 | timeStamp, |
308 | nonceStr, | 310 | nonceStr, |
309 | total_fee: Number(this.skuInfo.real_price) * this.count * 100, | 311 | total_fee: Number(this.skuInfo.real_price) * this.count * 100, |
310 | package: `prepay_id=${data.prepay_id}`, | 312 | package: `prepay_id=${data.prepay_id}`, |
311 | signType: 'MD5', | 313 | signType: 'MD5', |
312 | paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), | 314 | paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), |
313 | success: (res) => { | 315 | success: (res) => { |
314 | // 支付成功 | 316 | // 支付成功 |
315 | uni.showModal({ | 317 | uni.showModal({ |
316 | content: '支付成功', | 318 | content: '支付成功', |
317 | showCancel: false, | 319 | showCancel: false, |
318 | }) | 320 | }) |
319 | // 跳转订单详情页->状态 待收货 | 321 | // 跳转订单详情页->状态 待收货 |
320 | uni.reLaunch({ | 322 | uni.reLaunch({ |
321 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`, | 323 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`, |
322 | }) | 324 | }) |
323 | }, | 325 | }, |
324 | fail: (res) => { | 326 | fail: (res) => { |
325 | // 支付失败 | 327 | // 支付失败 |
326 | uni.showModal({ | 328 | uni.showModal({ |
327 | content: '支付失败', | 329 | content: '支付失败', |
328 | showCancel: false, | 330 | showCancel: false, |
329 | }) | 331 | }) |
330 | // 跳转订单详情页->状态 待付款 | 332 | // 跳转订单详情页->状态 待付款 |
331 | uni.reLaunch({ | 333 | uni.reLaunch({ |
332 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`, | 334 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`, |
333 | }) | 335 | }) |
334 | }, | 336 | }, |
335 | complete: () => { | 337 | complete: () => { |
336 | uni.hideLoading() | 338 | uni.hideLoading() |
337 | }, | 339 | }, |
338 | }) | 340 | }) |
339 | } else { | 341 | } else { |
340 | uni.showModal({ | 342 | uni.showModal({ |
341 | content: '支付失败', | 343 | content: '支付失败', |
342 | showCancel: false, | 344 | showCancel: false, |
343 | }) | 345 | }) |
344 | console.log('支付失败') | 346 | console.log('支付失败') |
345 | uni.hideLoading() | 347 | uni.hideLoading() |
346 | } | 348 | } |
347 | }) | 349 | }) |
348 | }, | 350 | }, |
349 | }, | 351 | }, |
350 | } | 352 | } |
351 | </script> | 353 | </script> |
352 | 354 | ||
353 | <style lang="scss"> | 355 | <style lang="scss"> |
354 | .wrap { | 356 | .wrap { |
355 | height: 100vh; | 357 | height: 100vh; |
356 | background-color: #f2f2f2; | 358 | background-color: #f2f2f2; |
357 | font-family: PingFangSC-Regular; | 359 | font-family: PingFangSC-Regular; |
358 | letter-spacing: -0.23px; | 360 | letter-spacing: -0.23px; |
359 | position: absolute; | 361 | position: absolute; |
360 | } | 362 | } |
361 | .addAddress { | 363 | .addAddress { |
362 | background-color: #ffffff; | 364 | background-color: #ffffff; |
363 | box-sizing: border-box; | 365 | box-sizing: border-box; |
364 | height: 124rpx; | 366 | height: 124rpx; |
365 | width: 100%; | 367 | width: 100%; |
366 | display: flex; | 368 | display: flex; |
367 | align-items: center; | 369 | align-items: center; |
368 | padding: 0 40rpx; | 370 | padding: 0 40rpx; |
369 | .addIcon { | 371 | .addIcon { |
370 | background-color: #f2f2f2; | 372 | background-color: #f2f2f2; |
371 | height: 56rpx; | 373 | height: 56rpx; |
372 | width: 60rpx; | 374 | width: 60rpx; |
373 | border-radius: 4rpx; | 375 | border-radius: 4rpx; |
374 | display: flex; | 376 | display: flex; |
375 | justify-content: center; | 377 | justify-content: center; |
376 | align-items: center; | 378 | align-items: center; |
377 | margin-right: 40rpx; | 379 | margin-right: 40rpx; |
378 | } | 380 | } |
379 | image { | 381 | image { |
380 | height: 28rpx; | 382 | height: 28rpx; |
381 | width: 28rpx; | 383 | width: 30rpx; |
382 | } | 384 | } |
383 | .addressText { | 385 | .addressText { |
384 | font-size: 28rpx; | 386 | font-size: 28rpx; |
385 | color: #333333; | 387 | color: #333333; |
386 | margin-right: 364rpx; | 388 | margin-right: 364rpx; |
387 | } | 389 | } |
388 | } | 390 | } |
389 | .content { | 391 | .content { |
390 | background-color: #f2f2f2; | 392 | background-color: #f2f2f2; |
391 | width: 100%; | 393 | width: 100%; |
392 | display: flex; | 394 | display: flex; |
393 | flex-direction: column; | 395 | flex-direction: column; |
394 | justify-content: center; | 396 | justify-content: center; |
395 | align-items: center; | 397 | align-items: center; |
396 | padding: 40rpx; | 398 | padding: 40rpx; |
397 | box-sizing: border-box; | 399 | box-sizing: border-box; |
398 | .orderInfo { | 400 | .orderInfo { |
399 | width: 670rpx; | 401 | width: 670rpx; |
400 | height: 488rpx; | 402 | height: 488rpx; |
401 | background-color: #ffffff; | 403 | background-color: #ffffff; |
402 | border-radius: 20rpx; | 404 | border-radius: 20rpx; |
403 | box-sizing: border-box; | 405 | box-sizing: border-box; |
404 | padding: 0 40rpx 40rpx 40rpx; | 406 | padding: 0 40rpx 40rpx 40rpx; |
405 | .title { | 407 | .title { |
406 | display: flex; | 408 | display: flex; |
407 | align-items: center; | 409 | align-items: center; |
408 | font-size: 28rpx; | 410 | font-size: 28rpx; |
409 | color: #333333; | 411 | color: #333333; |
410 | height: 60rpx; | 412 | height: 60rpx; |
411 | line-height: 40rpx; | 413 | line-height: 40rpx; |
412 | padding: 10rpx 10rpx 10rpx 0rpx; | 414 | padding: 10rpx 10rpx 10rpx 0rpx; |
413 | image { | 415 | image { |
414 | margin-right: 20rpx; | 416 | margin-right: 20rpx; |
415 | } | 417 | } |
416 | } | 418 | } |
417 | .infoBox { | 419 | .infoBox { |
418 | margin-top: 42rpx; | 420 | margin-top: 42rpx; |
419 | .infoTop { | 421 | .infoTop { |
420 | display: flex; | 422 | display: flex; |
421 | flex-direction: row; | 423 | flex-direction: row; |
422 | image { | 424 | image { |
423 | height: 188rpx; | 425 | height: 188rpx; |
424 | width: 188rpx; | 426 | width: 188rpx; |
425 | margin-right: 24rpx; | 427 | margin-right: 24rpx; |
426 | } | 428 | } |
427 | .infoRight { | 429 | .infoRight { |
428 | width: 374rpx; | 430 | width: 374rpx; |
429 | display: flex; | 431 | display: flex; |
430 | flex-direction: column; | 432 | flex-direction: column; |
431 | align-items: flex-start; | 433 | align-items: flex-start; |
432 | justify-content: space-between; | 434 | justify-content: space-between; |
433 | .goodName { | 435 | .goodName { |
434 | font-size: 28rpx; | 436 | font-size: 28rpx; |
435 | color: #333333; | 437 | color: #333333; |
436 | } | 438 | } |
437 | .remarks { | 439 | .remarks { |
438 | font-size: 20rpx; | 440 | font-size: 20rpx; |
439 | color: #999999; | 441 | color: #999999; |
440 | } | 442 | } |
441 | .priceBox { | 443 | .priceBox { |
442 | display: flex; | 444 | display: flex; |
443 | justify-content: space-between; | 445 | justify-content: space-between; |
444 | align-items: center; | 446 | align-items: center; |
445 | width: 100%; | 447 | width: 100%; |
446 | .price { | 448 | .price { |
447 | color: #ff6b4a; | 449 | color: #ff6b4a; |
448 | font-size: 28rpx; | 450 | font-size: 28rpx; |
449 | } | 451 | } |
450 | .originCost { | 452 | .originCost { |
451 | text-decoration: line-through; | 453 | text-decoration: line-through; |
452 | color: #999999; | 454 | color: #999999; |
453 | font-size: 20rpx; | 455 | font-size: 20rpx; |
454 | } | 456 | } |
455 | .counter { | 457 | .counter { |
456 | display: flex; | 458 | display: flex; |
457 | flex-direction: row; | 459 | flex-direction: row; |
458 | justify-content: space-between; | 460 | justify-content: space-between; |
459 | font-size: 28rpx; | 461 | font-size: 28rpx; |
460 | color: #333333; | 462 | color: #333333; |
461 | width: 122rpx; | 463 | width: 122rpx; |
462 | .btn { | 464 | .btn { |
463 | display: flex; | 465 | display: flex; |
464 | justify-content: center; | 466 | justify-content: center; |
465 | line-height: 32rpx; | 467 | line-height: 32rpx; |
466 | height: 32rpx; | 468 | height: 32rpx; |
467 | width: 32rpx; | 469 | width: 32rpx; |
468 | background-color: #f2f2f2; | 470 | background-color: #f2f2f2; |
469 | color: #cfcfcf; | 471 | color: #cfcfcf; |
470 | } | 472 | } |
471 | } | 473 | } |
472 | } | 474 | } |
473 | } | 475 | } |
474 | } | 476 | } |
475 | .infoBottom { | 477 | .infoBottom { |
476 | display: flex; | 478 | display: flex; |
477 | flex-direction: column; | 479 | flex-direction: column; |
478 | justify-content: flex-start; | 480 | justify-content: flex-start; |
479 | font-size: 24rpx; | 481 | font-size: 24rpx; |
480 | color: #333333; | 482 | color: #333333; |
481 | text { | 483 | text { |
482 | color: #999999; | 484 | color: #999999; |
483 | margin-left: 20rpx; | 485 | margin-left: 20rpx; |
484 | } | 486 | } |
485 | 487 | ||
486 | .norm { | 488 | .norm { |
487 | margin-top: 28rpx; | 489 | margin-top: 28rpx; |
488 | } | 490 | } |
489 | .shippingMethod { | 491 | .shippingMethod { |
490 | margin-top: 12rpx; | 492 | margin-top: 12rpx; |
491 | } | 493 | } |
492 | .message { | 494 | .message { |
493 | display: flex; | 495 | display: flex; |
494 | flex-direction: row; | 496 | flex-direction: row; |
495 | align-items: center; | 497 | align-items: center; |
496 | margin-top: 18rpx; | 498 | margin-top: 18rpx; |
497 | input { | 499 | input { |
498 | margin-left: 20rpx; | 500 | margin-left: 20rpx; |
499 | width: 75%; | 501 | width: 75%; |
500 | } | 502 | } |
501 | } | 503 | } |
502 | } | 504 | } |
503 | } | 505 | } |
504 | } | 506 | } |
505 | .payWay { | 507 | .payWay { |
506 | height: 464rpx; | 508 | height: 464rpx; |
507 | width: 670rpx; | 509 | width: 670rpx; |
508 | background-color: #ffffff; | 510 | background-color: #ffffff; |
509 | color: #333333; | 511 | color: #333333; |
510 | font-size: 24rpx; | 512 | font-size: 24rpx; |
511 | border-radius: 20rpx; | 513 | border-radius: 20rpx; |
512 | box-sizing: border-box; | 514 | box-sizing: border-box; |
513 | padding: 0 52rpx 0rpx 40rpx; | 515 | padding: 0 52rpx 0rpx 40rpx; |
514 | margin-top: 20rpx; | 516 | margin-top: 20rpx; |
515 | display: flex; | 517 | display: flex; |
516 | flex-direction: column; | 518 | flex-direction: column; |
517 | justify-content: center; | 519 | justify-content: center; |
518 | align-items: flex-start; | 520 | align-items: flex-start; |
519 | .item { | 521 | .item { |
520 | display: flex; | 522 | display: flex; |
521 | flex-direction: row; | 523 | flex-direction: row; |
522 | justify-content: space-between; | 524 | justify-content: space-between; |
523 | align-items: center; | 525 | align-items: center; |
524 | width: 100%; | 526 | width: 100%; |
525 | height: 115rpx; | 527 | height: 115rpx; |
526 | .itemRight { | 528 | .itemRight { |
527 | display: flex; | 529 | display: flex; |
528 | flex-direction: row; | 530 | flex-direction: row; |
529 | justify-content: space-between; | 531 | justify-content: space-between; |
530 | align-items: center; | 532 | align-items: center; |
531 | image { | 533 | image { |
532 | height: 24rpx; | 534 | height: 24rpx; |
533 | width: 12rpx; | 535 | width: 12rpx; |
534 | } | 536 | } |
535 | .rightText { | 537 | .rightText { |
536 | margin-right: 20rpx; | 538 | margin-right: 20rpx; |
537 | text-align: right; | 539 | text-align: right; |
538 | .choosePayWay { | 540 | .choosePayWay { |
541 | display: flex; | ||
542 | align-items: center; | ||
539 | text { | 543 | text { |
540 | color: #333333; | 544 | color: #333333; |
541 | } | 545 | } |
542 | image { | 546 | image { |
543 | height: 26rpx; | 547 | height: 36rpx; |
544 | width: 30rpx; | 548 | width: 40rpx; |
545 | margin-right: 20px; | 549 | margin-right: 8px; |
546 | } | 550 | } |
547 | } | 551 | } |
548 | .randomSubstraction { | 552 | .randomSubstraction { |
549 | color: #ff6b4a; | 553 | color: #ff6b4a; |
550 | } | 554 | } |
551 | .preferentialWay { | 555 | .preferentialWay { |
552 | color: #999999; | 556 | color: #999999; |
553 | } | 557 | } |
554 | } | 558 | } |
555 | .freight, | 559 | .freight, |
556 | .total { | 560 | .total { |
557 | margin-right: 32rpx; | 561 | margin-right: 32rpx; |
558 | } | 562 | } |
559 | text { | 563 | text { |
560 | color: #ff6b4a; | 564 | color: #ff6b4a; |
561 | } | 565 | } |
562 | } | 566 | } |
563 | } | 567 | } |
564 | } | 568 | } |
565 | // .checkBox { | 569 | // .checkBox { |
566 | // height: 58rpx; | 570 | // height: 58rpx; |
567 | // line-height: 58rpx; | 571 | // line-height: 58rpx; |
568 | // width: 100%; | 572 | // width: 100%; |
569 | // margin-top: 36rpx; | 573 | // margin-top: 36rpx; |
570 | // margin-left: 40rpx; | 574 | // margin-left: 40rpx; |
571 | // font-size: 12px; | 575 | // font-size: 12px; |
572 | // color: #999999; | 576 | // color: #999999; |
573 | // } | 577 | // } |
574 | } | 578 | } |
575 | .footer { | 579 | .footer { |
576 | height: 112rpx; | 580 | height: 112rpx; |
577 | width: 100%; | 581 | width: 100%; |
578 | background-color: #fff; | 582 | background-color: #fff; |
579 | font-size: 16px; | 583 | font-size: 16px; |
580 | display: flex; | 584 | display: flex; |
581 | justify-content: space-between; | 585 | justify-content: space-between; |
582 | align-items: center; | 586 | align-items: center; |
583 | position: fixed; | 587 | position: fixed; |
584 | bottom: 0; | 588 | bottom: 0; |
585 | .footerLeft { | 589 | .footerLeft { |
586 | display: flex; | 590 | display: flex; |
587 | justify-content: center; | 591 | justify-content: center; |
588 | align-items: center; | 592 | align-items: center; |
589 | width: 50%; | 593 | width: 50%; |
590 | color: #333333; | 594 | color: #333333; |
591 | text { | 595 | text { |
592 | color: #ff6b4a; | 596 | color: #ff6b4a; |
593 | } | 597 | } |
594 | } | 598 | } |
595 | .footerRight { | 599 | .footerRight { |
596 | display: flex; | 600 | display: flex; |
597 | justify-content: flex-end; | 601 | justify-content: flex-end; |
598 | align-items: center; | 602 | align-items: center; |
599 | width: 50%; | 603 | width: 50%; |
600 | margin-right: 26rpx; | 604 | margin-right: 26rpx; |
601 | .paybtn { | 605 | .paybtn { |
602 | display: flex; | 606 | display: flex; |
603 | justify-content: center; | 607 | justify-content: center; |
604 | align-items: center; | 608 | align-items: center; |
605 | background: #ff6b4a; | 609 | background: #ff6b4a; |
606 | border-radius: 20px; | 610 | border-radius: 20px; |
607 | border-radius: 20px; | 611 | border-radius: 20px; |
608 | color: #ffffff; | 612 | color: #ffffff; |
609 | width: 204rpx; | 613 | width: 204rpx; |
610 | height: 80rpx; | 614 | height: 80rpx; |
611 | } | 615 | } |
612 | } | 616 | } |
613 | } | 617 | } |
614 | // 地址信息样式 | 618 | // 地址信息样式 |
615 | .order-user { | 619 | .order-user { |
616 | width: 670rpx; | 620 | width: 670rpx; |
617 | height: 228rpx; | 621 | height: 228rpx; |
618 | background: #ffffff; | 622 | background: #ffffff; |
619 | border-radius: 14rpx; | 623 | border-radius: 14rpx; |
620 | margin: 0 auto; | 624 | margin: 0 auto; |
621 | margin-top: 20rpx; | 625 | margin-top: 20rpx; |
622 | position: relative; | 626 | position: relative; |
623 | .order-user-head { | 627 | .order-user-head { |
624 | display: flex; | 628 | display: flex; |
625 | height: 108rpx; | 629 | height: 108rpx; |
626 | width: 100%; | 630 | width: 100%; |
627 | align-items: center; | 631 | align-items: center; |
628 | margin-left: 126rpx; | 632 | margin-left: 126rpx; |
629 | .name { | 633 | .name { |
630 | display: flex; | 634 | display: flex; |
631 | justify-content: space-between; | 635 | justify-content: space-between; |
632 | font-size: 14px; | 636 | font-size: 14px; |
633 | color: #333333; | 637 | color: #333333; |
634 | letter-spacing: -0.26px; | 638 | letter-spacing: -0.26px; |
635 | margin-right: 20rpx; | 639 | margin-right: 20rpx; |
636 | .default { | 640 | .default { |
637 | height: 40rpx; | 641 | height: 40rpx; |
638 | width: 80rpx; | 642 | width: 80rpx; |
639 | background-color: #4a90e2; | 643 | background-color: #4a90e2; |
640 | border-radius: 13px; | 644 | border-radius: 13px; |
641 | border-radius: 13px; | 645 | border-radius: 13px; |
642 | text-align: center; | 646 | text-align: center; |
643 | margin-right: 20rpx; | 647 | margin-right: 20rpx; |
644 | text { | 648 | text { |
649 | display: flex; | ||
650 | justify-content: center; | ||
651 | align-items: center; | ||
645 | font-size: 12px; | 652 | font-size: 12px; |
646 | color: #ffffff; | 653 | color: #ffffff; |
647 | letter-spacing: -0.23px; | 654 | letter-spacing: -0.23px; |
648 | } | 655 | } |
649 | } | 656 | } |
650 | } | 657 | } |
651 | .mobile { | 658 | .mobile { |
652 | font-size: 14px; | 659 | font-size: 14px; |
653 | color: #999999; | 660 | color: #999999; |
654 | letter-spacing: -0.26px; | 661 | letter-spacing: -0.26px; |
655 | } | 662 | } |
656 | } | 663 | } |
657 | .order-user-body { | 664 | .order-user-body { |
658 | display: flex; | 665 | display: flex; |
659 | width: 100%; | 666 | width: 100%; |
660 | image { | 667 | image { |
661 | width: 24px; | 668 | width: 24px; |
662 | height: 26px; | 669 | height: 28px; |
663 | margin: 12rpx 32rpx 0 40rpx; | 670 | margin: 12rpx 32rpx 0 40rpx; |
664 | } | 671 | } |
665 | .address { | 672 | .address { |
666 | font-weight: bold; | 673 | font-weight: bold; |
667 | font-size: 14px; | 674 | font-size: 14px; |
668 | color: #333333; | 675 | color: #333333; |
669 | letter-spacing: -0.26px; | 676 | letter-spacing: -0.26px; |
670 | } | 677 | } |
671 | } | 678 | } |
672 | .arrow { | 679 | .arrow { |
673 | width: 6px; | 680 | width: 12px; |
674 | height: 12px; | 681 | height: 12px; |
675 | position: absolute; | 682 | position: absolute; |
676 | right: 40rpx; | 683 | right: 40rpx; |
677 | bottom: 104rpx; | 684 | bottom: 104rpx; |
678 | } | 685 | } |
679 | } | 686 | } |
687 | .last_zhanwei{ | ||
688 | background: #f2f2f2; | ||
689 | height: 60px; | ||
690 | } | ||
680 | </style> | 691 | </style> |
681 | 692 |
src/pages/index/index.vue
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 | 6 | <icon |
7 | class="searchIcon" | 7 | class="searchIcon" |
8 | type="search" | 8 | type="search" |
9 | size="14" | 9 | size="14" |
10 | ></icon> | 10 | ></icon> |
11 | <input | 11 | <input |
12 | v-model="searchText" | 12 | v-model="searchText" |
13 | class="searchIpt" | 13 | class="searchIpt" |
14 | placeholder="老花镜" | 14 | placeholder="老花镜" |
15 | confirm-type="search" | 15 | confirm-type="search" |
16 | @blur="searchKey" | 16 | @blur="searchKey" |
17 | /> | 17 | /> |
18 | </view> | 18 | </view> |
19 | 19 | ||
20 | <!-- 筛选栏--> | 20 | <!-- 筛选栏--> |
21 | <!-- <view class="screenBar"> | 21 | <!-- <view class="screenBar"> |
22 | <view | 22 | <view |
23 | v-for="item in screenItems" | 23 | v-for="item in screenItems" |
24 | :key="item.current" | 24 | :key="item.current" |
25 | @click="onClickItem(item.current)" | 25 | @click="onClickItem(item.current)" |
26 | > | 26 | > |
27 | <view | 27 | <view |
28 | class="screenItem" | 28 | class="screenItem" |
29 | v-bind:class="{ active: current === item.current }" | 29 | v-bind:class="{ active: current === item.current }" |
30 | v-if="item.current === 2" | 30 | v-if="item.current === 2" |
31 | @click="dropDown" | 31 | @click="dropDown" |
32 | > | 32 | > |
33 | {{ item.text }} | 33 | {{ item.text }} |
34 | <icon | 34 | <icon |
35 | type="info" | 35 | type="info" |
36 | size="14" | 36 | size="14" |
37 | ></icon> | 37 | ></icon> |
38 | </view> | 38 | </view> |
39 | <view | 39 | <view |
40 | class="screenItem" | 40 | class="screenItem" |
41 | v-bind:class="{ active: current === item.current }" | 41 | v-bind:class="{ active: current === item.current }" |
42 | v-if="item.current === 4" | 42 | v-if="item.current === 4" |
43 | @click="showDrawer('showRight')" | 43 | @click="showDrawer('showRight')" |
44 | > | 44 | > |
45 | {{ item.text }} | 45 | {{ item.text }} |
46 | <icon | 46 | <icon |
47 | type="info" | 47 | type="info" |
48 | size="14" | 48 | size="14" |
49 | ></icon> | 49 | ></icon> |
50 | </view> | 50 | </view> |
51 | <view v-if="item.current !== 2&&item.current!==4"> | 51 | <view v-if="item.current !== 2&&item.current!==4"> |
52 | <view | 52 | <view |
53 | class="screenItem" | 53 | class="screenItem" |
54 | v-bind:class="{ active: current === item.current }" | 54 | v-bind:class="{ active: current === item.current }" |
55 | >{{ item.text }}</view> | 55 | >{{ item.text }}</view> |
56 | </view> | 56 | </view> |
57 | </view> | 57 | </view> |
58 | </view> --> | 58 | </view> --> |
59 | </view> | 59 | </view> |
60 | <Uni-drawer | 60 | <Uni-drawer |
61 | ref="showRight" | 61 | ref="showRight" |
62 | mask="true" | 62 | mask="true" |
63 | maskClick="true" | 63 | maskClick="true" |
64 | mode="right" | 64 | mode="right" |
65 | :width="320" | 65 | :width="320" |
66 | @change="change($event,'showRight')" | 66 | @change="change($event,'showRight')" |
67 | > | 67 | > |
68 | <view class="close"> | 68 | <view class="close"> |
69 | <view @click="closeDrawer('showRight')"> | 69 | <view @click="closeDrawer('showRight')"> |
70 | <text class="word-btn-white">关闭</text> | 70 | <text class="word-btn-white">关闭</text> |
71 | </view> | 71 | </view> |
72 | </view> | 72 | </view> |
73 | </Uni-drawer> | 73 | </Uni-drawer> |
74 | 74 | ||
75 | <!-- 筛选菜单--> | 75 | <!-- 筛选菜单--> |
76 | <view class="content-wrap"> | 76 | <view class="content-wrap"> |
77 | <view> | 77 | <view> |
78 | <HMfilterDropdown | 78 | <HMfilterDropdown |
79 | :filterData="categoryList" | 79 | :filterData="categoryList" |
80 | :defaultSelected="filterDropdownValue" | 80 | :defaultSelected="filterDropdownValue" |
81 | :updateMenuName="true" | 81 | :updateMenuName="true" |
82 | @search="search" | 82 | @search="search" |
83 | @getList="getList" | 83 | @getList="getList" |
84 | data-format="Object" | 84 | data-format="Object" |
85 | ></HMfilterDropdown> | 85 | ></HMfilterDropdown> |
86 | <!-- 商品列表 --> | 86 | <!-- 商品列表 --> |
87 | <!-- <scroll-view | 87 | <!-- <scroll-view |
88 | enable-flex | 88 | enable-flex |
89 | @scrolltolower="handleScrolltolower" | 89 | @scrolltolower="handleScrolltolower" |
90 | scroll-y | 90 | scroll-y |
91 | style="height: 1000px;margin-bottom: 20px;" | 91 | style="height: 1000px;margin-bottom: 20px;" |
92 | > --> | 92 | > --> |
93 | <view class="goods-list"> | 93 | <view class="goods-list"> |
94 | <view class="product-list"> | 94 | <view class="product-list"> |
95 | <view | 95 | <view |
96 | class="product" | 96 | class="product" |
97 | v-for="(goods) in goodsList" | 97 | v-for="(goods) in goodsList" |
98 | :key="goods.id" | 98 | :key="goods.id" |
99 | > | 99 | > |
100 | <Card :goods="goods" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> | 100 | <Card :goods="goods" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> |
101 | </view> | 101 | </view> |
102 | </view> | 102 | </view> |
103 | <view class="loading-text">{{loadingText}}</view> | 103 | <view class="loading-text">{{loadingText}}</view> |
104 | </view> | 104 | </view> |
105 | <!-- </scroll-view> --> | 105 | <!-- </scroll-view> --> |
106 | </view> | 106 | </view> |
107 | </view> | 107 | </view> |
108 | </view> | 108 | </view> |
109 | </template> | 109 | </template> |
110 | 110 | ||
111 | <script> | 111 | <script> |
112 | import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' | 112 | import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' |
113 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 113 | import Card from '@/components/CommodityCard/CommodityCard.vue' |
114 | import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' | 114 | import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' |
115 | import store from '@/store' | 115 | import store from '@/store' |
116 | 116 | ||
117 | export default { | 117 | export default { |
118 | components: { | 118 | components: { |
119 | UniDrawer: UniDrawer, | 119 | UniDrawer: UniDrawer, |
120 | HMfilterDropdown: HMfilterDropdown, | 120 | HMfilterDropdown: HMfilterDropdown, |
121 | Card: Card | 121 | Card: Card, |
122 | }, | 122 | }, |
123 | data () { | 123 | data () { |
124 | return { | 124 | return { |
125 | indexArr: '', | 125 | indexArr: '', |
126 | valueArr: '', | 126 | valueArr: '', |
127 | loadingText: '~~到底了~~', | 127 | loadingText: '~~到底了~~', |
128 | filterDropdownValue: [], | 128 | filterDropdownValue: [], |
129 | filterData: [], | 129 | filterData: [], |
130 | searchText: '', | 130 | searchText: '', |
131 | scrollTop: 0, | 131 | scrollTop: 0, |
132 | viewHeight: uni.getSystemInfoSync().windowHeight, | 132 | viewHeight: uni.getSystemInfoSync().windowHeight, |
133 | } | 133 | } |
134 | }, | 134 | }, |
135 | onPageScroll({scrollTop}) { | 135 | onPageScroll({scrollTop}) { |
136 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 | 136 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 |
137 | 137 | ||
138 | this.scrollTop = scrollTop; | 138 | this.scrollTop = scrollTop; |
139 | console.log('pagescroll====>',this.viewHeight) | 139 | console.log('pagescroll====>',this.viewHeight) |
140 | }, | 140 | }, |
141 | computed: { | 141 | computed: { |
142 | goodsList () { | 142 | goodsList () { |
143 | // 也可以从 getters 获取 | 143 | // 也可以从 getters 获取 |
144 | // console.log('index-list=====>',this.$store.state.index.pageList) | 144 | // console.log('index-list=====>',this.$store.state.index.list) |
145 | 145 | return this.$store.state.index.list | |
146 | return this.$store.state.index.list | 146 | }, |
147 | }, | 147 | categoryList () { |
148 | categoryList () { | 148 | return this.$store.state.index.categoryList |
149 | return this.$store.state.index.categoryList | 149 | }, |
150 | } | 150 | }, |
151 | }, | 151 | filters: { |
152 | filters: { | 152 | outData (value) { |
153 | outData (value) { | 153 | return JSON.stringify(value) |
154 | return JSON.stringify(value) | 154 | }, |
155 | } | 155 | }, |
156 | }, | 156 | onLoad () { |
157 | onLoad () { | 157 | store.dispatch('index/category') |
158 | store.dispatch('index/category') | 158 | // this.getList(); |
159 | // this.getList(); | 159 | store.dispatch('index/list') |
160 | store.dispatch('index/list') | 160 | }, |
161 | }, | 161 | methods: { |
162 | methods: { | 162 | showDrawer (e) { |
163 | showDrawer (e) { | 163 | this.$refs[e].open() |
164 | this.$refs[e].open() | 164 | }, |
165 | }, | 165 | getList () { |
166 | getList () { | 166 | store.dispatch('index/list') |
167 | store.dispatch('index/list') | 167 | }, |
168 | }, | 168 | // search(params) { |
169 | // search(params) { | 169 | // this.$store.index. |
170 | // this.$store.index. | 170 | // }, |
171 | // }, | 171 | closeDrawer (e) { |
172 | closeDrawer (e) { | 172 | this.$refs[e].close() |
173 | this.$refs[e].close() | 173 | }, |
174 | }, | 174 | change (e, type) { |
175 | change (e, type) { | 175 | this[type] = e |
176 | this[type] = e | 176 | }, |
177 | }, | 177 | onClickItem (e) { |
178 | onClickItem (e) { | 178 | if (this.current !== e) { |
179 | if (this.current !== e) { | 179 | this.current = e |
180 | this.current = e | 180 | } |
181 | } | 181 | }, |
182 | }, | 182 | dropDown () { |
183 | dropDown () { | 183 | console.log('下拉') |
184 | console.log('下拉') | 184 | }, |
185 | }, | 185 | searchKey (e) { |
186 | searchKey (e) { | 186 | const { value: keyword } = e.detail |
187 | const { value: keyword } = e.detail | 187 | this.keyWords = keyword |
188 | this.keyWords = keyword | 188 | store.dispatch('index/search', { |
189 | store.dispatch('index/search', { | 189 | params: {}, |
190 | params: {}, | 190 | keyword, |
191 | keyword | 191 | }) |
192 | }) | 192 | }, |
193 | }, | 193 | // 接收菜单结果 |
194 | // 接收菜单结果 | 194 | search (e) { |
195 | search (e) { | 195 | const { on, value, selectedData } = e |
196 | const { on, value, selectedData } = e | 196 | let params = {} |
197 | let params = {} | 197 | const selectedPayload = {} |
198 | const selectedPayload = {} | 198 | for (const key in selectedData) { |
199 | for (const key in selectedData) { | 199 | if (Object.prototype.hasOwnProperty.call(selectedData, key)) { |
200 | if (Object.prototype.hasOwnProperty.call(selectedData, key)) { | 200 | selectedPayload[key] = selectedData[key].toString() |
201 | selectedPayload[key] = selectedData[key].toString() | 201 | } |
202 | } | 202 | } |
203 | } | 203 | if (on[0] === 1) { |
204 | if (on[0] === 1) { | 204 | // 若点击全部 |
205 | // 若点击全部 | 205 | this.searchText = '' |
206 | this.searchText = '' | 206 | store.dispatch('index/list') |
207 | store.dispatch('index/list') | 207 | } else { |
208 | } else { | 208 | for (let i = 1; i <= on.length; i++) { // on[0]是全部 |
209 | for (let i = 1; i <= on.length; i++) { // on[0]是全部 | 209 | if (on[i] === 1) { // 若该选项被选中 |
210 | if (on[i] === 1) { // 若该选项被选中 | 210 | if (this.categoryList[i].value === 'filter') { |
211 | if (this.categoryList[i].value === 'filter') { | 211 | params = { |
212 | params = { | 212 | ...selectedPayload, |
213 | ...selectedPayload, | 213 | ...params, |
214 | ...params | 214 | } |
215 | } | 215 | } else { |
216 | } else { | 216 | params[`${this.categoryList[i].value}`] = value[i][0] |
217 | params[`${this.categoryList[i].value}`] = value[i][0] | 217 | } |
218 | } | 218 | } |
219 | } | 219 | } |
220 | } | 220 | store.dispatch('index/search', { |
221 | store.dispatch('index/search', { | 221 | params, |
222 | params, | 222 | keyword: this.keyWords, |
223 | keyword: this.keyWords | 223 | }) |
224 | }) | 224 | } |
225 | } | 225 | } |
226 | } | 226 | } |
227 | } | 227 | |
228 | 228 | } | |
229 | } | 229 | </script> |
230 | </script> | 230 | |
231 | 231 | <style lang="scss"> | |
232 | <style lang="scss"> | 232 | .content { |
233 | .content { | 233 | display: flex; |
234 | display: flex; | 234 | flex-direction: column; |
235 | flex-direction: column; | 235 | align-items: center; |
236 | align-items: center; | 236 | justify-content: center; |
237 | justify-content: center; | 237 | background-color: #f7f6f6; |
238 | background-color: #f7f6f6; | 238 | } |
239 | } | 239 | .header { |
240 | .header { | 240 | display: flex; |
241 | display: flex; | 241 | flex-direction: column; |
242 | flex-direction: column; | 242 | align-items: center; |
243 | align-items: center; | 243 | justify-content: center; |
244 | justify-content: center; | 244 | background-color: #f7f6f6; |
245 | background-color: #f7f6f6; | 245 | height: 178rpx; |
246 | height: 178rpx; | 246 | width: 100%; |
247 | width: 100%; | 247 | z-index: 999; |
248 | z-index: 999; | 248 | position: fixed; |
249 | position: fixed; | 249 | top: 0; |
250 | top: 0; | 250 | left: 0; |
251 | left: 0; | 251 | } |
252 | } | 252 | .searchBar { |
253 | .searchBar { | 253 | width: 670rpx; |
254 | width: 670rpx; | 254 | display: flex; |
255 | display: flex; | 255 | justify-content: center; |
256 | justify-content: center; | 256 | align-items: center; |
257 | align-items: center; | 257 | box-sizing: border-box; |
258 | box-sizing: border-box; | 258 | padding: 0rpx 16rpx; |
259 | padding: 0rpx 16rpx; | 259 | border: 1px solid #ff6b4a; |
260 | border: 1px solid #ff6b4a; | 260 | border-radius: 8rpx; |
261 | border-radius: 8rpx; | 261 | background-color: #ffffff; |
262 | background-color: #ffffff; | 262 | } |
263 | } | 263 | |
264 | 264 | .searchIpt { | |
265 | .searchIpt { | 265 | height: 68rpx; |
266 | height: 68rpx; | 266 | width: 670rpx; |
267 | width: 670rpx; | 267 | padding: 16rpx; |
268 | padding: 16rpx; | 268 | font-size: 28rpx; |
269 | font-size: 28rpx; | 269 | box-sizing: border-box; |
270 | box-sizing: border-box; | 270 | } |
271 | } | 271 | .screenBar { |
272 | .screenBar { | 272 | width: 670rpx; |
273 | width: 670rpx; | 273 | height: 110rpx; |
274 | height: 110rpx; | 274 | display: flex; |
275 | display: flex; | 275 | flex-direction: row; |
276 | flex-direction: row; | 276 | justify-content: space-between; |
277 | justify-content: space-between; | 277 | align-items: center; |
278 | align-items: center; | 278 | color: #333333; |
279 | color: #333333; | 279 | font-size: 32rpx; |
280 | font-size: 32rpx; | 280 | } |
281 | } | 281 | .active { |
282 | .active { | 282 | color: #ff6b4a; |
283 | color: #ff6b4a; | 283 | } |
284 | } | 284 | .screenItem { |
285 | .screenItem { | 285 | display: flex; |
286 | display: flex; | 286 | justify-content: center; |
287 | justify-content: center; | 287 | align-items: center; |
288 | align-items: center; | 288 | } |
289 | } | 289 | .content-wrap { |
290 | .content-wrap { | 290 | width: 100%; |
291 | width: 100%; | 291 | background-color: #ffffff; |
292 | background-color: #ffffff; | 292 | } |
293 | } | 293 | |
294 | 294 | .HMfilterDropdown { | |
295 | .HMfilterDropdown { | 295 | top: 178rpx !important; |
296 | top: 178rpx !important; | 296 | } |
297 | } | 297 | |
298 | 298 | .goods-list { | |
299 | .goods-list { | 299 | padding-top: 286rpx; |
300 | padding-top: 286rpx; | 300 | .loading-text { |
301 | .loading-text { | 301 | width: 100%; |
302 | width: 100%; | 302 | display: flex; |
303 | display: flex; | 303 | justify-content: center; |
304 | justify-content: center; | 304 | align-items: center; |
305 | align-items: center; | 305 | height: 30px; |
306 | height: 30px; | 306 | color: #979797; |
307 | color: #979797; | 307 | font-size: 12px; |
308 | font-size: 12px; | 308 | } |
309 | } | 309 | .product-list { |
310 | .product-list { | 310 | width: 92%; |
311 | width: 92%; | 311 | padding: 0 4% 3vw 4%; |
312 | padding: 0 4% 3vw 4%; | 312 | display: flex; |
313 | display: flex; | 313 | justify-content: space-between; |
314 | justify-content: space-between; | 314 | flex-wrap: wrap; |
315 | flex-wrap: wrap; | 315 | .product { |
316 | .product { | 316 | width: 48%; |
317 | width: 48%; | 317 | margin: 0 0 20rpx 0; |
318 | margin: 0 0 20rpx 0; | 318 | background: #ffffff; |
319 | background: #ffffff; | 319 | border: 1px solid #f2f2f2; |
320 | border: 1px solid #f2f2f2; | 320 | } |
321 | } | 321 | } |
322 | } | 322 | } |
323 | } | 323 | </style> |
324 | </style> | 324 | |
325 |
src/pages/user/user.vue
1 | <template> | 1 | <template> |
2 | <view class="wrap"> | 2 | <view class="wrap"> |
3 | <!-- 弹窗 --> | 3 | <!-- 弹窗 --> |
4 | <uni-popup | 4 | <uni-popup |
5 | ref="popup" | 5 | ref="popup" |
6 | type="center" | 6 | type="center" |
7 | > | 7 | > |
8 | <!-- 给一个左边弹窗的样式 --> | 8 | <!-- 给一个左边弹窗的样式 --> |
9 | <!-- 关闭弹窗按钮 --> | 9 | <!-- 关闭弹窗按钮 --> |
10 | <view | 10 | <view |
11 | class="closeBtn" | 11 | class="closeBtn" |
12 | @tap="this.$refs.popup.close()" | 12 | @tap="this.$refs.popup.close()" |
13 | >x</view> | 13 | >x</view> |
14 | <view | 14 | <view |
15 | class="popUpWrap" | 15 | class="popUpWrap" |
16 | v-if="whichTap==0" | 16 | v-if="whichTap==0" |
17 | > | 17 | > |
18 | <text>这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入驻。</text> | 18 | <text>这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入驻。</text> |
19 | 19 | ||
20 | <!-- 左 --> | 20 | <!-- 左 --> |
21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> | 21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> |
22 | <!-- 右 --> | 22 | <!-- 右 --> |
23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> | 23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> |
24 | </view> | 24 | </view> |
25 | <view | 25 | <view |
26 | class="popUpWrap" | 26 | class="popUpWrap" |
27 | v-if="whichTap==1" | 27 | v-if="whichTap==1" |
28 | > | 28 | > |
29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> | 29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> |
30 | </view> | 30 | </view> |
31 | <view | 31 | <view |
32 | class="popUpWrap" | 32 | class="popUpWrap" |
33 | v-if="whichTap==2" | 33 | v-if="whichTap==2" |
34 | > | 34 | > |
35 | <button @tap="chatOur(1)">客服1</button> | 35 | <button @tap="chatOur(1)">客服1</button> |
36 | <button @tap="chatOur(2)">客服2</button> | 36 | <button @tap="chatOur(2)">客服2</button> |
37 | </view> | 37 | </view> |
38 | </uni-popup> | 38 | </uni-popup> |
39 | <!-- <scroll-view | 39 | <!-- <scroll-view |
40 | enable-flex | 40 | enable-flex |
41 | @scrolltolower="handleScrolltolower" | 41 | @scrolltolower="handleScrolltolower" |
42 | scroll-y | 42 | scroll-y |
43 | style="height: 1000px;" | 43 | style="height: 1000px;" |
44 | > --> | 44 | > --> |
45 | <view | 45 | <view |
46 | v-if="isAuth" | 46 | v-if="isAuth" |
47 | class="content" | 47 | class="content" |
48 | > | 48 | > |
49 | <view class="userInfo"> | 49 | <view class="userInfo"> |
50 | <view class="info"> | 50 | <view class="info"> |
51 | <image | 51 | <image |
52 | :src="headerphoto" | 52 | :src="headerphoto" |
53 | mode="aspectFill" | 53 | mode="aspectFill" |
54 | ></image> | 54 | ></image> |
55 | <view class="infoText"> | 55 | <view class="infoText"> |
56 | <text class="userName">{{nickName}}</text> | 56 | <text class="userName">{{nickName}}</text> |
57 | </view> | 57 | </view> |
58 | </view> | 58 | </view> |
59 | <!-- <view class="service"> | 59 | <!-- <view class="service"> |
60 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 60 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
61 | </view> --> | 61 | </view> --> |
62 | </view> | 62 | </view> |
63 | <view | 63 | <view |
64 | class="myOpticsData" | 64 | class="myOpticsData" |
65 | @tap="toOpticsData" | 65 | @tap="toOpticsData" |
66 | > | 66 | > |
67 | <view class="left"> | 67 | <view class="left"> |
68 | <image | 68 | <image |
69 | src="../../static/img/user/dataWrite.png" | 69 | src="../../static/img/user/dataWrite.png" |
70 | mode="aspectFit" | 70 | mode="aspectFit" |
71 | ></image> | 71 | ></image> |
72 | <text>验光数据</text> | 72 | <text>验光数据</text> |
73 | </view> | 73 | </view> |
74 | <image | 74 | <image |
75 | src="../../static/right.png" | 75 | src="../../static/right.png" |
76 | mode="aspectFit" | 76 | mode="aspectFit" |
77 | ></image> | 77 | ></image> |
78 | </view> | 78 | </view> |
79 | <view class="myOrder"> | 79 | <view class="myOrder"> |
80 | <view class="orderHeader"> | 80 | <view class="orderHeader"> |
81 | <text>全部订单</text> | 81 | <text>我的订单</text> |
82 | <view | 82 | <view |
83 | class="btn" | 83 | class="btn" |
84 | @click="toMyOrder('10')" | 84 | @click="toMyOrder('10')" |
85 | > | 85 | > |
86 | 全部 | 86 | 全部 |
87 | <image | 87 | <image |
88 | src="../../static/right.png" | 88 | src="../../static/right.png" |
89 | mode="aspectFit" | 89 | mode="aspectFit" |
90 | ></image> | 90 | ></image> |
91 | </view> | 91 | </view> |
92 | </view> | 92 | </view> |
93 | <view class="orderBody"> | 93 | <view class="orderBody"> |
94 | <view | 94 | <view |
95 | class="item waitPay" | 95 | class="item waitPay" |
96 | @click="toMyOrder('0')" | 96 | @click="toMyOrder('0')" |
97 | > | 97 | > |
98 | <image | 98 | <image |
99 | src="../../static/img/user/waitDeliver.png" | 99 | src="../../static/img/user/waitDeliver.png" |
100 | mode="aspectFit" | 100 | mode="aspectFit" |
101 | ></image> | 101 | ></image> |
102 | <text>待付款</text> | 102 | <text>待付款</text> |
103 | </view> | 103 | </view> |
104 | <view | 104 | <view |
105 | class="item waitDeliver" | 105 | class="item waitDeliver" |
106 | @click="toMyOrder('1')" | 106 | @click="toMyOrder('1')" |
107 | > | 107 | > |
108 | <image | 108 | <image |
109 | src="../../static/img/user/waitPay.png" | 109 | src="../../static/img/user/waitPay.png" |
110 | mode="aspectFit" | 110 | mode="aspectFit" |
111 | ></image> | 111 | ></image> |
112 | <text>待收货</text> | 112 | <text>待收货</text> |
113 | </view> | 113 | </view> |
114 | <view | 114 | <view |
115 | class="item waitReceive" | 115 | class="item waitReceive" |
116 | @click="toMyOrder('2')" | 116 | @click="toMyOrder('2')" |
117 | > | 117 | > |
118 | <image | 118 | <image |
119 | src="../../static/img/user/waitReceive.png" | 119 | src="../../static/img/user/waitReceive.png" |
120 | mode="aspectFit" | 120 | mode="aspectFit" |
121 | ></image> | 121 | ></image> |
122 | <text>已完成</text> | 122 | <text>已完成</text> |
123 | </view> | 123 | </view> |
124 | <!-- <view class="item service" @click="toMyOrder('3')"> | 124 | <!-- <view class="item service" @click="toMyOrder('3')"> |
125 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> | 125 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> |
126 | <text>已评价</text> | 126 | <text>已评价</text> |
127 | </view> --> | 127 | </view> --> |
128 | </view> | 128 | </view> |
129 | </view> | 129 | </view> |
130 | <view class="someItem"> | 130 | <view class="someItem"> |
131 | <!-- <view class="item"> | 131 | <!-- <view class="item"> |
132 | <view class="left"> | 132 | <view class="left"> |
133 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> | ||
134 | <text>推广记录与收益</text> | ||
135 | </view> | ||
136 | <image src="../../static/right.png" mode="aspectFit"></image> | ||
133 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> | 137 | </view> --> |
138 | <view class="item"> | ||
134 | <text>推广记录与收益</text> | 139 | <image |
135 | </view> | 140 | src="../../static/address-icon.png" |
141 | mode="aspectFit" | ||
136 | <image src="../../static/right.png" mode="aspectFit"></image> | 142 | ></image> |
137 | </view> --> | 143 | <view class="left"> |
138 | <view class="item"> | ||
139 | <view class="left"> | 144 | <text @tap="toAddress">地址管理</text> |
145 | <image | ||
146 | class="image2" | ||
147 | src="../../static/right.png" | ||
140 | <image | 148 | mode="aspectFit" |
141 | src="../../static/address-icon.png" | 149 | ></image> |
142 | mode="aspectFit" | 150 | </view> |
143 | ></image> | 151 | |
144 | <text @tap="toAddress">地址管理</text> | ||
145 | </view> | ||
146 | <image | 152 | </view> |
153 | <view class="item"> | ||
147 | src="../../static/right.png" | 154 | <image |
148 | mode="aspectFit" | 155 | src="../../static/img/user/introduce.png" |
149 | ></image> | 156 | mode="aspectFit" |
150 | </view> | 157 | ></image> |
151 | <view class="item"> | ||
152 | <view class="left"> | 158 | <view class="left"> |
159 | <text @tap="introduce">系统介绍</text> | ||
160 | <image | ||
153 | <image | 161 | src="../../static/right.png" |
154 | src="../../static/img/user/introduce.png" | 162 | mode="aspectFit" |
155 | mode="aspectFit" | 163 | ></image> |
156 | ></image> | 164 | </view> |
157 | <text @tap="introduce">系统介绍</text> | ||
158 | </view> | ||
159 | <image | 165 | </view> |
166 | <view class="item"> | ||
160 | src="../../static/right.png" | 167 | <image |
161 | mode="aspectFit" | 168 | src="../../static/img/user/joinUs.png" |
162 | ></image> | 169 | mode="aspectFit" |
163 | </view> | 170 | ></image> |
164 | <view class="item"> | ||
165 | <view class="left"> | 171 | <view class="left"> |
172 | <text @tap="joinUs">加入我们</text> | ||
173 | <image | ||
166 | <image | 174 | src="../../static/right.png" |
167 | src="../../static/img/user/joinUs.png" | 175 | mode="aspectFit" |
168 | mode="aspectFit" | 176 | ></image> |
169 | ></image> | 177 | </view> |
170 | <text @tap="joinUs">加入我们</text> | 178 | </view> |
171 | </view> | 179 | <view class="item"> |
172 | <image | ||
173 | src="../../static/right.png" | 180 | <image |
174 | mode="aspectFit" | 181 | src="../../static/img/user/service.png" |
175 | ></image> | 182 | mode="aspectFit" |
176 | </view> | 183 | ></image> |
177 | <view class="item"> | ||
178 | <view class="left"> | 184 | <view class="left lastLeft"> |
179 | <image | ||
180 | src="../../static/img/user/service.png" | ||
181 | mode="aspectFit" | ||
182 | ></image> | ||
183 | <text>联系客服</text> | 185 | <text>联系客服</text> |
184 | </view> | 186 | <image |
185 | <image | 187 | src="../../static/right.png" |
186 | src="../../static/right.png" | 188 | mode="aspectFit" |
187 | mode="aspectFit" | 189 | ></image> |
188 | ></image> | 190 | </view> |
189 | </view> | 191 | </view> |
190 | </view> | 192 | </view> |
191 | <view class="recommend"> | 193 | <view class="recommend"> |
192 | <view class="title"> | 194 | <view class="title"> |
193 | <view class="line"></view> | 195 | <view class="line"></view> |
194 | <view class="text">精选推荐</view> | 196 | <view class="text">精选推荐</view> |
195 | <view class="line"></view> | 197 | <view class="line"></view> |
196 | </view> | 198 | </view> |
197 | <!-- 商品列表 --> | 199 | <!-- 商品列表 --> |
198 | <view class="goods-list"> | 200 | <view class="goods-list"> |
199 | <!-- <scroll-view | 201 | <!-- <scroll-view |
200 | enable-flex | 202 | enable-flex |
201 | @scrolltolower="handleScrolltolower" | 203 | @scrolltolower="handleScrolltolower" |
202 | scroll-y | 204 | scroll-y |
203 | class="product-list" | 205 | class="product-list" |
204 | > --> | 206 | > --> |
205 | <view class="product-list"> | 207 | <view class="product-list"> |
206 | <view | 208 | <view |
207 | class="product" | 209 | class="product" |
208 | v-for="(item, index) in userRecommandList" | 210 | v-for="(item, index) in userRecommandList" |
209 | :key="index" | 211 | :key="index" |
210 | > | 212 | > |
211 | <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> | 213 | <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> |
212 | </view> | 214 | </view> |
213 | </view> | 215 | </view> |
214 | <!-- </scroll-view> --> | 216 | <!-- </scroll-view> --> |
215 | <view class="loading-text">{{loadingText}}</view> | 217 | <view class="loading-text">{{loadingText}}</view> |
216 | </view> | 218 | </view> |
217 | </view> | 219 | </view> |
218 | </view> | 220 | </view> |
219 | <view | 221 | <view |
220 | v-else | 222 | v-else |
221 | class="auth" | 223 | class="auth" |
222 | > | 224 | > |
223 | <view class="icon"></view> | 225 | <view class="icon"></view> |
224 | <view class="divider"></view> | 226 | <view class="divider"></view> |
225 | <view class="title">申请获取以下权限</view> | 227 | <view class="title">申请获取以下权限</view> |
226 | <view class="text">获得您的公开信息(昵称、头像等)</view> | 228 | <view class="text">获得您的公开信息(昵称、头像等)</view> |
227 | <button | 229 | <button |
228 | type="primary" | 230 | type="primary" |
229 | open-type="getUserInfo" | 231 | open-type="getUserInfo" |
230 | @getuserinfo="onGotUserInfo" | 232 | @getuserinfo="onGotUserInfo" |
231 | >授权登陆</button> | 233 | >授权登陆</button> |
232 | </view> | 234 | </view> |
233 | <!-- </scroll-view> --> | 235 | <!-- </scroll-view> --> |
234 | </view> | 236 | </view> |
235 | </template> | 237 | </template> |
236 | 238 | ||
237 | <script> | 239 | <script> |
238 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 240 | import Card from '@/components/CommodityCard/CommodityCard.vue' |
239 | import store from '@/store' | 241 | import store from '@/store' |
240 | import UniPopup from '@/components/UniPopup/uni-popup.vue' | 242 | import UniPopup from '@/components/UniPopup/uni-popup.vue' |
241 | 243 | ||
242 | export default { | 244 | export default { |
243 | components: { | 245 | components: { |
244 | Card, | 246 | Card, |
245 | UniPopup | 247 | UniPopup |
246 | }, | 248 | }, |
247 | data() { | 249 | data() { |
248 | return { | 250 | return { |
249 | isAuth: true, // 是否显示授权页面, | 251 | isAuth: true, // 是否显示授权页面, |
250 | pagesnum: 1, // 分页请求初始值 | 252 | pagesnum: 1, // 分页请求初始值 |
251 | whichTap: 0 ,// 弹窗渲染选择条件 | 253 | whichTap: 0 ,// 弹窗渲染选择条件 |
252 | loadingText: '到底了', | 254 | loadingText: '到底了', |
253 | scrollTop: 0, | 255 | scrollTop: 0, |
254 | viewHeight: uni.getSystemInfoSync().windowHeight, | 256 | viewHeight: uni.getSystemInfoSync().windowHeight, |
255 | } | 257 | } |
256 | }, | 258 | }, |
257 | onPageScroll({scrollTop}) { | 259 | onPageScroll({scrollTop}) { |
258 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 | 260 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 |
259 | this.scrollTop = scrollTop; | 261 | this.scrollTop = scrollTop; |
260 | }, | 262 | }, |
261 | onLoad() { | 263 | onLoad() { |
262 | // 判断是否授权 | 264 | // 判断是否授权 |
263 | uni.getSetting({ | 265 | uni.getSetting({ |
264 | success(res) { | 266 | success(res) { |
265 | console.log('authSetting', res.authSetting) | 267 | console.log('authSetting', res.authSetting) |
266 | if (res.authSetting['scope.userInfo'] === true) { | 268 | if (res.authSetting['scope.userInfo'] === true) { |
267 | this.isAuth = true | 269 | this.isAuth = true |
268 | } else { | 270 | } else { |
269 | this.isAuth = false | 271 | this.isAuth = false |
270 | } | 272 | } |
271 | } | 273 | } |
272 | }) | 274 | }) |
273 | store.dispatch('userRecommand/getRecommandList', { | 275 | store.dispatch('userRecommand/getRecommandList', { |
274 | uid: this.$store.state.user.userInfo.uid, | 276 | uid: this.$store.state.user.userInfo.uid, |
275 | openid: this.$store.state.user.userInfo.openid, | 277 | openid: this.$store.state.user.userInfo.openid, |
276 | page: this.pagesnum | 278 | page: this.pagesnum |
277 | }) | 279 | }) |
278 | }, | 280 | }, |
279 | onReachBottom() { | 281 | onReachBottom() { |
280 | // console.log('usr-my',this.$store.state.user.userInfo) | 282 | // console.log('usr-my',this.$store.state.user.userInfo) |
281 | this.pagesnum++ | 283 | this.pagesnum++ |
282 | store.dispatch('userRecommand/getRecommandList', { | 284 | store.dispatch('userRecommand/getRecommandList', { |
283 | uid: this.$store.state.user.userInfo.uid, | 285 | uid: this.$store.state.user.userInfo.uid, |
284 | openid: this.$store.state.user.userInfo.openid, | 286 | openid: this.$store.state.user.userInfo.openid, |
285 | page: this.pagesnum | 287 | page: this.pagesnum |
286 | }) | 288 | }) |
287 | }, | 289 | }, |
288 | computed: { | 290 | computed: { |
289 | nickName() { | 291 | nickName() { |
290 | return this.$store.state.user.userInfo.nickName | 292 | return this.$store.state.user.userInfo.nickName |
291 | }, | 293 | }, |
292 | headerphoto() { | 294 | headerphoto() { |
293 | return this.$store.state.user.userInfo.headerphoto | 295 | return this.$store.state.user.userInfo.headerphoto |
294 | }, | 296 | }, |
295 | userRecommandList() { | 297 | userRecommandList() { |
296 | console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList) | 298 | console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList) |
297 | return this.$store.state.userRecommand.recommandList | 299 | return this.$store.state.userRecommand.recommandList |
298 | } | 300 | } |
299 | }, | 301 | }, |
300 | methods: { | 302 | methods: { |
301 | // 弹窗 | 303 | // 弹窗 |
302 | changeTap(item) { | 304 | changeTap(item) { |
303 | this.whichTap = item | 305 | this.whichTap = item |
304 | this.$refs.popup.open() | 306 | this.$refs.popup.open() |
305 | }, | 307 | }, |
306 | chatOur(item) { | 308 | chatOur(item) { |
307 | if (item === 1) { | 309 | if (item === 1) { |
308 | uni.makePhoneCall({ | 310 | uni.makePhoneCall({ |
309 | phoneNumber: 13376189297 // 客服1 电话 | 311 | phoneNumber: 13376189297 // 客服1 电话 |
310 | }) | 312 | }) |
311 | } else { | 313 | } else { |
312 | uni.makePhoneCall({ | 314 | uni.makePhoneCall({ |
313 | phoneNumber: 18014995101 // 客服2 电话 | 315 | phoneNumber: 18014995101 // 客服2 电话 |
314 | }) | 316 | }) |
315 | } | 317 | } |
316 | }, | 318 | }, |
317 | // 授权 | 319 | // 授权 |
318 | onGotUserInfo(e) { | 320 | onGotUserInfo(e) { |
319 | if (e.detail.errMsg === 'getUserInfo:ok') { | 321 | if (e.detail.errMsg === 'getUserInfo:ok') { |
320 | const { fromInfo } = this.$store.state.user | 322 | const { fromInfo } = this.$store.state.user |
321 | // 用户授权成功 | 323 | // 用户授权成功 |
322 | store.dispatch('user/getUserInfo', fromInfo) | 324 | store.dispatch('user/getUserInfo', fromInfo) |
323 | this.isAuth = true | 325 | this.isAuth = true |
324 | } | 326 | } |
325 | }, | 327 | }, |
326 | toAddress() { | 328 | toAddress() { |
327 | uni.navigateTo({ | 329 | uni.navigateTo({ |
328 | url: '../address/addressList', | 330 | url: '../address/addressList', |
329 | success: res => {}, | 331 | success: res => {}, |
330 | fail: () => {}, | 332 | fail: () => {}, |
331 | complete: () => {} | 333 | complete: () => {} |
332 | }) | 334 | }) |
333 | }, | 335 | }, |
334 | introduce() { | 336 | introduce() { |
335 | uni.showModal({ | 337 | uni.showModal({ |
336 | content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', | 338 | content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', |
337 | showCancel: false | 339 | showCancel: false |
338 | }) | 340 | }) |
339 | }, | 341 | }, |
340 | joinUs() { | 342 | joinUs() { |
341 | uni.showModal({ | 343 | uni.showModal({ |
342 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', | 344 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', |
343 | showCancel: false | 345 | showCancel: false |
344 | }) | 346 | }) |
345 | }, | 347 | }, |
346 | toMyOrder(status) { | 348 | toMyOrder(status) { |
347 | uni.navigateTo({ | 349 | uni.navigateTo({ |
348 | url: `../myOrder/myOrder?status=${status}`, | 350 | url: `../myOrder/myOrder?status=${status}`, |
349 | success: res => {}, | 351 | success: res => {}, |
350 | fail: () => {}, | 352 | fail: () => {}, |
351 | complete: () => {} | 353 | complete: () => {} |
352 | }) | 354 | }) |
353 | }, | 355 | }, |
354 | toOpticsData() { | 356 | toOpticsData() { |
355 | uni.navigateTo({ | 357 | uni.navigateTo({ |
356 | url: '../addOpticsData/addOpticsData' | 358 | url: '../addOpticsData/addOpticsData' |
357 | }) | 359 | }) |
358 | } | 360 | } |
359 | } | 361 | } |
360 | } | 362 | } |
361 | </script> | 363 | </script> |
362 | 364 | ||
363 | <style lang="scss"> | 365 | <style lang="scss"> |
364 | .warp { | 366 | .warp { |
365 | font-size: 24rpx; | 367 | font-size: 24rpx; |
366 | background-color: #f2f2f2; | 368 | background-color: #f2f2f2; |
367 | height: 100vh; | 369 | height: 100vh; |
368 | } | 370 | } |
369 | .content { | 371 | .content { |
370 | display: flex; | 372 | display: flex; |
371 | flex-direction: column; | 373 | flex-direction: column; |
372 | align-items: center; | 374 | align-items: center; |
373 | justify-content: center; | 375 | justify-content: center; |
374 | background-color: #f2f2f2; | 376 | background-color: #f2f2f2; |
375 | } | 377 | } |
376 | .userInfo { | 378 | .userInfo { |
377 | background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); | 379 | background-image: linear-gradient(270deg, #f79067 0%, #FF5F3B 66%); |
378 | width: 100%; | 380 | width: 100%; |
379 | height: 240rpx; | 381 | height: 240rpx; |
380 | color: #ffffff; | 382 | color: #ffffff; |
381 | padding: 60rpx 82rpx 80rpx 44rpx; | 383 | padding: 60rpx 82rpx 80rpx 44rpx; |
382 | box-sizing: border-box; | 384 | box-sizing: border-box; |
383 | display: flex; | 385 | display: flex; |
384 | flex-direction: row; | 386 | flex-direction: row; |
385 | justify-content: space-between; | 387 | justify-content: space-between; |
386 | align-items: flex-start; | 388 | align-items: flex-start; |
387 | .info { | 389 | .info { |
388 | display: flex; | 390 | display: flex; |
389 | flex-direction: row; | 391 | flex-direction: row; |
390 | justify-content: space-between; | 392 | justify-content: space-between; |
391 | align-items: center; | 393 | align-items: center; |
392 | image { | 394 | image { |
393 | border-radius: 50rpx; | 395 | border-radius: 50rpx; |
394 | height: 100rpx; | 396 | height: 100rpx; |
395 | width: 100rpx; | 397 | width: 100rpx; |
396 | margin-right: 40rpx; | 398 | margin-right: 40rpx; |
397 | } | 399 | } |
398 | .infoText { | 400 | .infoText { |
399 | display: flex; | 401 | display: flex; |
400 | flex-direction: column; | 402 | flex-direction: column; |
401 | justify-content: space-between; | 403 | justify-content: space-between; |
402 | align-items: flex-scetart; | 404 | align-items: flex-scetart; |
403 | .userName { | 405 | .userName { |
404 | font-size: 18px; | 406 | font-size: 18px; |
405 | color: #ffffff; | 407 | color: #ffffff; |
406 | margin-bottom: 8rpx; | 408 | margin-bottom: 8rpx; |
407 | } | 409 | } |
408 | .nickName { | 410 | .nickName { |
409 | font-size: 12px; | 411 | font-size: 12px; |
410 | color: #ffffff; | 412 | color: #ffffff; |
411 | } | 413 | } |
412 | } | 414 | } |
413 | } | 415 | } |
414 | // .service { | 416 | // .service { |
415 | // margin-top: 20rpx; | 417 | // margin-top: 20rpx; |
416 | // image { | 418 | // image { |
417 | // height: 36rpx; | 419 | // height: 36rpx; |
418 | // width: 36rpx; | 420 | // width: 36rpx; |
419 | // } | 421 | // } |
420 | // } | 422 | // } |
421 | } | 423 | } |
422 | .myOpticsData { | 424 | .myOpticsData { |
423 | width: 670rpx; | 425 | width: 670rpx; |
424 | height: 120rpx; | 426 | height: 120rpx; |
425 | background-color: #ffffff; | 427 | background-color: #ffffff; |
426 | border-radius: 6px; | 428 | border-radius: 6px; |
427 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); | 429 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); |
428 | position: relative; | 430 | position: relative; |
429 | bottom: 44rpx; | 431 | bottom: 44rpx; |
430 | padding: 40rpx; | 432 | padding: 40rpx; |
431 | box-sizing: border-box; | 433 | box-sizing: border-box; |
432 | display: flex; | 434 | display: flex; |
433 | justify-content: space-between; | 435 | justify-content: space-between; |
434 | align-items: center; | 436 | align-items: center; |
435 | .left { | 437 | .left { |
436 | font-size: 14px; | 438 | font-size: 14px; |
437 | color: #333333; | 439 | color: #333333; |
438 | display: flex; | 440 | display: flex; |
439 | align-items: center; | 441 | align-items: center; |
440 | image { | 442 | image { |
441 | margin-right: 32rpx; | 443 | margin-right: 32rpx; |
442 | width: 30rpx; | 444 | width: 40rpx; |
443 | height: 34rpx; | 445 | height: 44rpx; |
444 | } | 446 | } |
445 | } | 447 | } |
446 | image { | 448 | image { |
447 | height: 16px; | 449 | height: 16px; |
448 | width: 8px; | 450 | width: 8px; |
449 | } | 451 | } |
450 | } | 452 | } |
451 | .myOrder { | 453 | .myOrder { |
452 | width: 100%; | 454 | width: 100%; |
453 | height: 296rpx; | 455 | height: 296rpx; |
454 | // margin-top: 116rpx; | 456 | // margin-top: 116rpx; |
455 | margin-bottom: 20rpx; | 457 | margin-bottom: 20rpx; |
456 | padding: 0 40rpx; | 458 | padding: 0 40rpx; |
457 | box-sizing: border-box; | 459 | box-sizing: border-box; |
458 | background: #ffffff; | 460 | background: #ffffff; |
459 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 461 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
460 | border-radius: 6px; | 462 | border-radius: 6px; |
461 | border-radius: 6px; | 463 | border-radius: 6px; |
462 | display: flex; | 464 | display: flex; |
463 | flex-direction: column; | 465 | flex-direction: column; |
464 | justify-content: space-around; | 466 | justify-content: space-around; |
465 | align-items: center; | 467 | align-items: center; |
466 | .orderHeader { | 468 | .orderHeader { |
467 | width: 100%; | 469 | width: 100%; |
468 | height: 100rpx; | 470 | height: 100rpx; |
469 | display: flex; | 471 | display: flex; |
470 | flex-direction: row; | 472 | flex-direction: row; |
471 | justify-content: space-between; | 473 | justify-content: space-between; |
472 | align-items: center; | 474 | align-items: center; |
473 | border-bottom: 1px solid #e9e9e9; | 475 | border-bottom: 1px solid #F5F5F5; |
474 | font-weight: bold; | 476 | font-weight: bold; |
475 | font-size: 18px; | 477 | font-size: 18px; |
476 | color: #333333; | 478 | color: #333333; |
477 | .btn { | 479 | .btn { |
478 | font-size: 12px; | 480 | font-size: 12px; |
479 | color: #999999; | 481 | color: #999999; |
480 | display: flex; | 482 | display: flex; |
481 | align-items: center; | 483 | align-items: center; |
482 | image { | 484 | image { |
483 | margin-left: 20rpx; | 485 | margin-left: 20rpx; |
484 | height: 32rpx; | 486 | height: 32rpx; |
485 | width: 16rpx; | 487 | width: 16rpx; |
486 | } | 488 | } |
487 | } | 489 | } |
488 | } | 490 | } |
489 | .orderBody { | 491 | .orderBody { |
490 | width: 100%; | 492 | width: 100%; |
491 | display: flex; | 493 | display: flex; |
492 | flex-direction: row; | 494 | flex-direction: row; |
493 | justify-content: space-around; | 495 | justify-content: space-around; |
494 | align-items: center; | 496 | align-items: center; |
495 | .item { | 497 | .item { |
496 | display: flex; | 498 | display: flex; |
497 | flex-direction: column; | 499 | flex-direction: column; |
498 | align-items: center; | 500 | align-items: center; |
499 | image { | 501 | image { |
500 | width: 62rpx; | 502 | width: 62rpx; |
501 | height: 46rpx; | 503 | height: 46rpx; |
502 | } | 504 | } |
503 | text { | 505 | text { |
504 | margin-top: 24rpx; | 506 | margin-top: 24rpx; |
505 | font-size: 12px; | 507 | font-size: 12px; |
506 | color: #333333; | 508 | color: #333333; |
507 | } | 509 | } |
508 | } | 510 | } |
509 | } | 511 | } |
510 | } | 512 | } |
511 | .someItem { | 513 | .someItem { |
512 | width: 100%; | 514 | width: 100%; |
513 | height: 336rpx; | ||
514 | background: #ffffff; | 515 | height: 336rpx; |
515 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 516 | background: #ffffff; |
516 | border-radius: 6px; | 517 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
517 | border-radius: 6px; | 518 | border-radius: 6px; |
518 | margin-bottom: 18rpx; | 519 | border-radius: 6px; |
519 | box-sizing: border-box; | 520 | margin-bottom: 18rpx; |
520 | padding: 21rpx 48rpx 21rpx 42rpx; | 521 | box-sizing: border-box; |
521 | box-sizing: border-box; | 522 | padding: 21rpx 48rpx 21rpx 42rpx; |
523 | box-sizing: border-box; | ||
524 | display: flex; | ||
525 | flex-direction: column; | ||
522 | display: flex; | 526 | justify-content: space-between; |
523 | flex-direction: column; | 527 | align-items: center; |
524 | justify-content: space-between; | 528 | .item { |
525 | align-items: center; | 529 | display: grid; |
526 | .item { | 530 | grid-template-columns: 10% 90%; |
527 | display: flex; | 531 | align-items: center; |
528 | justify-content: space-between; | 532 | height: 72rpx; |
529 | border-bottom: 1px solid #f2f2f2; | 533 | width: 100%; |
530 | align-items: center; | 534 | .left { |
535 | font-size: 14px; | ||
531 | height: 72rpx; | 536 | color: #333333; |
537 | display: flex; | ||
538 | align-items: center; | ||
539 | justify-content: space-between; | ||
532 | width: 100%; | 540 | height: 72rpx; |
533 | .left { | 541 | border-bottom: 1px solid #F2F2F2; |
534 | font-size: 14px; | 542 | image { |
535 | color: #333333; | 543 | margin-right: 0; |
536 | display: flex; | 544 | height: 16px; |
537 | align-items: center; | 545 | width: 8px; |
538 | image { | 546 | } |
539 | margin-right: 32rpx; | 547 | } |
540 | width: 30rpx; | 548 | image { |
541 | height: 34rpx; | 549 | margin-right: 32rpx; |
542 | } | 550 | width: 40rpx; |
543 | } | 551 | height: 44rpx; |
544 | image { | 552 | } |
545 | height: 16px; | 553 | .lastLeft{ |
546 | width: 8px; | 554 | border-bottom: none; |
547 | } | 555 | } |
548 | } | 556 | } |
549 | } | 557 | } |
550 | .recommend { | 558 | .recommend { |
551 | background: #ffffff; | 559 | background: #ffffff; |
552 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 560 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
553 | border-radius: 6px; | 561 | border-radius: 6px; |
554 | border-radius: 6px; | 562 | border-radius: 6px; |
555 | width: 100%; | 563 | width: 100%; |
556 | .title { | 564 | .title { |
557 | display: flex; | 565 | display: flex; |
558 | flex-direction: row; | 566 | flex-direction: row; |
559 | align-items: center; | 567 | align-items: center; |
560 | justify-content: space-between; | 568 | justify-content: space-between; |
561 | padding: 20rpx 40rpx; | 569 | padding: 20rpx 40rpx; |
562 | .line { | 570 | .line { |
563 | width: 264rpx; | 571 | width: 264rpx; |
564 | height: 1rpx; | 572 | height: 1rpx; |
565 | border-bottom: 1px solid #eaeaea; | 573 | border-bottom: 1px solid #eaeaea; |
566 | } | 574 | } |
567 | .text { | 575 | .text { |
568 | font-family: PingFangSC-Medium; | 576 | font-family: PingFangSC-Medium; |
569 | font-size: 14px; | 577 | font-size: 14px; |
570 | color: #333333; | 578 | color: #333333; |
571 | letter-spacing: -0.26px; | 579 | letter-spacing: -0.26px; |
572 | text-align: justify; | 580 | text-align: justify; |
573 | line-height: 24px; | 581 | line-height: 24px; |
574 | } | 582 | } |
575 | } | 583 | } |
576 | .goods-list { | 584 | .goods-list { |
577 | .loading-text { | 585 | .loading-text { |
578 | width: 100%; | 586 | width: 100%; |
579 | display: flex; | 587 | display: flex; |
580 | justify-content: center; | 588 | justify-content: center; |
581 | align-items: center; | 589 | align-items: center; |
582 | height: 30px; | 590 | height: 30px; |
583 | color: #979797; | 591 | color: #979797; |
584 | font-size: 12px; | 592 | font-size: 12px; |
585 | } | 593 | } |
586 | .product-list { | 594 | .product-list { |
587 | width: 92%; | 595 | width: 92%; |
588 | padding: 0 4% 3vw 4%; | 596 | padding: 0 4% 3vw 4%; |
589 | display: flex; | 597 | display: flex; |
590 | justify-content: space-between; | 598 | justify-content: space-between; |
591 | flex-wrap: wrap; | 599 | flex-wrap: wrap; |
592 | .product { | 600 | .product { |
593 | width: 48%; | 601 | width: 48%; |
594 | margin: 0 0 20rpx 0; | 602 | margin: 0 0 20rpx 0; |
595 | background: #ffffff; | 603 | background: #ffffff; |
596 | border: 1px solid #f2f2f2; | 604 | border: 1px solid #f2f2f2; |
597 | } | 605 | } |
598 | } | 606 | } |
599 | } | 607 | } |
600 | } | 608 | } |
601 | .auth { | 609 | .auth { |
602 | height: 100vh; | 610 | height: 100vh; |
603 | display: flex; | 611 | display: flex; |
604 | flex-direction: column; | 612 | flex-direction: column; |
605 | align-items: center; | 613 | align-items: center; |
606 | .icon { | 614 | .icon { |
607 | width: 140rpx; | 615 | width: 140rpx; |
608 | height: 140rpx; | 616 | height: 140rpx; |
609 | border-radius: 50%; | 617 | border-radius: 50%; |
610 | margin-top: 100rpx; | 618 | margin-top: 100rpx; |
611 | background-color: grey; | 619 | background-color: grey; |
612 | } | 620 | } |
613 | .divider { | 621 | .divider { |
614 | height: 1rpx; | 622 | height: 1rpx; |
615 | width: 600rpx; | 623 | width: 600rpx; |
616 | margin-top: 80rpx; | 624 | margin-top: 80rpx; |
617 | background-color: #e6e3e3; | 625 | background-color: #e6e3e3; |
618 | } | 626 | } |
619 | .title { | 627 | .title { |
620 | width: 600rpx; | 628 | width: 600rpx; |
621 | margin-top: 50rpx; | 629 | margin-top: 50rpx; |
622 | text-align: left; | 630 | text-align: left; |
623 | } | 631 | } |
624 | .text { | 632 | .text { |
625 | width: 600rpx; | 633 | width: 600rpx; |
626 | margin-top: 30rpx; | 634 | margin-top: 30rpx; |
627 | text-align: left; | 635 | text-align: left; |
628 | color: #e6e3e3; | 636 | color: #e6e3e3; |
629 | } | 637 | } |
630 | button { | 638 | button { |
631 | width: 450rpx; | 639 | width: 450rpx; |
632 | height: 80rpx; | 640 | height: 80rpx; |
633 | line-height: 80rpx; | 641 | line-height: 80rpx; |
src/static/chat_logo.png
3.92 KB
src/static/icon-data.png
src/static/img/user/dataWrite.png
src/static/img/user/introduce.png
src/static/img/user/joinUs.png
src/static/joinUs (2).png