Adam / gulu-vue

Download as
Browse Code »

Commit 156736a2ed42c5fae720139ea7bad579134d9479

Authored by yr
1 parent b38a27f3ec
Exists in master

样式修改

Showing 12 changed files with 94 additions and 72 deletions   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @156736a
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 <image 6 <image
7 mode="widthFix" 7 mode="widthFix"
8 :src="goods.imgurl?goods.imgurl:goods.pic" 8 :src="goods.imgurl?goods.imgurl:goods.pic"
9 ></image> 9 ></image>
10 <view class="name">{{goods.name?goods.name:goods.p_name}}</view> 10 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
11 <view class="info"> 11 <view class="info">
12 <view class="priceBox"> 12 <view class="priceBox">
13 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view> 13 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>
14 <view class="originCost"> 14 <view class="originCost">
15 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} --> 15 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->
16 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}} 16 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
17 </view> 17 </view>
18 </view> 18 </view>
19 <view class="trade_num">{{goods.trade_num}}人购买</view> 19 <view class="trade_num">{{goods.trade_num}}人购买</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </template> 22 </template>
23 23
24 <script> 24 <script>
25 export default { 25 export default {
26 props: { 26 props: {
27 /** 27 /**
28 * 商品数据 28 * 商品数据
29 */ 29 */
30 goods: { 30 goods: {
31 id: Number, 31 id: Number,
32 imgurl: String, 32 imgurl: String,
33 name: String, 33 name: String,
34 rsSon: Object, 34 rsSon: Object,
35 originCost: String, 35 originCost: String,
36 price: String, 36 price: String,
37 trade_num: String, 37 trade_num: String,
38 goodType: String, 38 goodType: String,
39 }, 39 },
40 40
41 }, 41 },
42 created () { 42 created () {
43 }, 43 },
44 data () { 44 data () {
45 return { 45 return {
46 46
47 } 47 }
48 }, 48 },
49 methods: { 49 methods: {
50 toGoods (id, skId) { 50 toGoods (id, skId) {
51 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) 51 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId)
52 uni.navigateTo({ 52 uni.navigateTo({
53 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId, 53 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId,
54 success: res => {}, 54 success: res => {},
55 fail: () => {}, 55 fail: () => {},
56 complete: () => {}, 56 complete: () => {},
57 }) 57 })
58 }, 58 },
59 }, 59 },
60 } 60 }
61 </script> 61 </script>
62 62
63 <style lang="scss"> 63 <style lang="scss">
64 image { 64 image {
65 width: 100%; 65 width: 100%;
66 height: 120rpx; 66 height: 120rpx;
67 } 67 }
68 .name { 68 .name {
69 width: 92%; 69 width: 92%;
70 height: 54rpx; 70 height: 54rpx;
71 padding: 5px 4%; 71 padding: 5px 4%;
72 display: -webkit-box; 72 display: -webkit-box;
73 -webkit-box-orient: vertical; 73 -webkit-box-orient: vertical;
74 -webkit-line-clamp: 2; 74 -webkit-line-clamp: 2;
75 text-align: justify; 75 text-align: justify;
76 overflow: hidden; 76 overflow: hidden;
77 font-size: 24rpx; 77 font-size: 26rpx;
78 color: #333333; 78 color: #333333;
79 } 79 }
80 .info { 80 .info {
81 display: flex; 81 display: flex;
82 justify-content: space-between; 82 justify-content: space-between;
83 align-items: center; 83 align-items: center;
84 width: 92%; 84 width: 92%;
85 padding: 5px 4% 5px 4%; 85 padding: 5px 4% 5px 4%;
86 .priceBox { 86 .priceBox {
87 display: flex; 87 display: flex;
88 justify-content: space-between; 88 justify-content: space-between;
89 align-items: center; 89 align-items: center;
90 .price { 90 .price {
91 color: #eb5d3b; 91 color: #eb5d3b;
92 font-size: 28rpx; 92 font-size: 28rpx;
93 font-weight: 600; 93 font-weight: 600;
94 margin-right: 10rpx; 94 margin-right: 10rpx;
95 } 95 }
96 .originCost { 96 .originCost {
97 text-decoration: line-through; 97 text-decoration: line-through;
98 color: #999999; 98 color: #999999;
99 font-size: 20rpx; 99 font-size: 20rpx;
100 } 100 }
101 } 101 }
102 .trade_num { 102 .trade_num {
103 color: #999999; 103 color: #999999;
104 font-size: 20rpx; 104 font-size: 20rpx;
105 } 105 }
106 } 106 }
107 </style> 107 </style>
108 108
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @156736a
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
Diff comments   View file @156736a
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
Diff comments   View file @156736a
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
Diff comments   View file @156736a
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 <view class="goods-list"> 87 <view class="goods-list">
88 <view class="product-list"> 88 <view class="product-list">
89 <view 89 <view
90 class="product" 90 class="product"
91 v-for="(goods) in goodsList" 91 v-for="(goods) in goodsList"
92 :key="goods.id" 92 :key="goods.id"
93 > 93 >
94 <Card :goods="goods"></Card> 94 <Card :goods="goods"></Card>
95 </view> 95 </view>
96 </view> 96 </view>
97 <view class="loading-text">{{loadingText}}</view> 97 <view class="loading-text">{{loadingText}}</view>
98 </view> 98 </view>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 </template> 102 </template>
103 103
104 <script> 104 <script>
105 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' 105 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
106 import Card from '@/components/CommodityCard/CommodityCard.vue' 106 import Card from '@/components/CommodityCard/CommodityCard.vue'
107 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' 107 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
108 import store from '@/store' 108 import store from '@/store'
109 109
110 export default { 110 export default {
111 components: { 111 components: {
112 UniDrawer: UniDrawer, 112 UniDrawer: UniDrawer,
113 HMfilterDropdown: HMfilterDropdown, 113 HMfilterDropdown: HMfilterDropdown,
114 Card: Card 114 Card: Card,
115 }, 115 },
116 data () { 116 data () {
117 return { 117 return {
118 indexArr: '', 118 indexArr: '',
119 valueArr: '', 119 valueArr: '',
120 loadingText: '~~到底了~~', 120 loadingText: '~~到底了~~',
121 filterDropdownValue: [], 121 filterDropdownValue: [],
122 filterData: [], 122 filterData: [],
123 searchText: '' 123 searchText: '',
124 } 124 }
125 }, 125 },
126 computed: { 126 computed: {
127 goodsList () { 127 goodsList () {
128 // 也可以从 getters 获取 128 // 也可以从 getters 获取
129 // console.log('index-list=====>',this.$store.state.index.list) 129 // console.log('index-list=====>',this.$store.state.index.list)
130 return this.$store.state.index.list 130 return this.$store.state.index.list
131 }, 131 },
132 categoryList () { 132 categoryList () {
133 return this.$store.state.index.categoryList 133 return this.$store.state.index.categoryList
134 } 134 },
135 }, 135 },
136 filters: { 136 filters: {
137 outData (value) { 137 outData (value) {
138 return JSON.stringify(value) 138 return JSON.stringify(value)
139 } 139 },
140 }, 140 },
141 onLoad () { 141 onLoad () {
142 store.dispatch('index/category') 142 store.dispatch('index/category')
143 // this.getList(); 143 // this.getList();
144 store.dispatch('index/list') 144 store.dispatch('index/list')
145 }, 145 },
146 methods: { 146 methods: {
147 showDrawer (e) { 147 showDrawer (e) {
148 this.$refs[e].open() 148 this.$refs[e].open()
149 }, 149 },
150 getList () { 150 getList () {
151 store.dispatch('index/list') 151 store.dispatch('index/list')
152 }, 152 },
153 // search(params) { 153 // search(params) {
154 // this.$store.index. 154 // this.$store.index.
155 // }, 155 // },
156 closeDrawer (e) { 156 closeDrawer (e) {
157 this.$refs[e].close() 157 this.$refs[e].close()
158 }, 158 },
159 change (e, type) { 159 change (e, type) {
160 this[type] = e 160 this[type] = e
161 }, 161 },
162 onClickItem (e) { 162 onClickItem (e) {
163 if (this.current !== e) { 163 if (this.current !== e) {
164 this.current = e 164 this.current = e
165 } 165 }
166 }, 166 },
167 dropDown () { 167 dropDown () {
168 console.log('下拉') 168 console.log('下拉')
169 }, 169 },
170 searchKey (e) { 170 searchKey (e) {
171 const { value: keyword } = e.detail 171 const { value: keyword } = e.detail
172 this.keyWords = keyword 172 this.keyWords = keyword
173 store.dispatch('index/search', { 173 store.dispatch('index/search', {
174 params: {}, 174 params: {},
175 keyword 175 keyword,
176 }) 176 })
177 }, 177 },
178 // 接收菜单结果 178 // 接收菜单结果
179 search (e) { 179 search (e) {
180 const { on, value, selectedData } = e 180 const { on, value, selectedData } = e
181 let params = {} 181 let params = {}
182 const selectedPayload = {} 182 const selectedPayload = {}
183 for (const key in selectedData) { 183 for (const key in selectedData) {
184 if (Object.prototype.hasOwnProperty.call(selectedData, key)) { 184 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
185 selectedPayload[key] = selectedData[key].toString() 185 selectedPayload[key] = selectedData[key].toString()
186 } 186 }
187 } 187 }
188 if (on[0] === 1) { 188 if (on[0] === 1) {
189 // 若点击全部 189 // 若点击全部
190 this.searchText = '' 190 this.searchText = ''
191 store.dispatch('index/list') 191 store.dispatch('index/list')
192 } else { 192 } else {
193 for (let i = 1; i <= on.length; i++) { // on[0]是全部 193 for (let i = 1; i <= on.length; i++) { // on[0]是全部
194 if (on[i] === 1) { // 若该选项被选中 194 if (on[i] === 1) { // 若该选项被选中
195 if (this.categoryList[i].value === 'filter') { 195 if (this.categoryList[i].value === 'filter') {
196 params = { 196 params = {
197 ...selectedPayload, 197 ...selectedPayload,
198 ...params 198 ...params,
199 } 199 }
200 } else { 200 } else {
201 params[`${this.categoryList[i].value}`] = value[i][0] 201 params[`${this.categoryList[i].value}`] = value[i][0]
202 } 202 }
203 } 203 }
204 } 204 }
205 store.dispatch('index/search', { 205 store.dispatch('index/search', {
206 params, 206 params,
207 keyword: this.keyWords 207 keyword: this.keyWords,
208 }) 208 })
209 } 209 }
210 } 210 }
211 } 211 }
212 212
213 } 213 }
214 </script> 214 </script>
215 215
216 <style lang="scss"> 216 <style lang="scss">
217 .content { 217 .content {
218 display: flex; 218 display: flex;
219 flex-direction: column; 219 flex-direction: column;
220 align-items: center; 220 align-items: center;
221 justify-content: center; 221 justify-content: center;
222 background-color: #f7f6f6; 222 background-color: #f7f6f6;
223 } 223 }
224 .header { 224 .header {
225 display: flex; 225 display: flex;
226 flex-direction: column; 226 flex-direction: column;
227 align-items: center; 227 align-items: center;
228 justify-content: center; 228 justify-content: center;
229 background-color: #f7f6f6; 229 background-color: #f7f6f6;
230 height: 178rpx; 230 height: 178rpx;
231 width: 100%; 231 width: 100%;
232 z-index: 999; 232 z-index: 999;
233 position: fixed; 233 position: fixed;
234 top: 0; 234 top: 0;
235 left: 0; 235 left: 0;
236 } 236 }
237 .searchBar { 237 .searchBar {
238 width: 670rpx; 238 width: 670rpx;
239 display: flex; 239 display: flex;
240 justify-content: center; 240 justify-content: center;
241 align-items: center; 241 align-items: center;
242 box-sizing: border-box; 242 box-sizing: border-box;
243 padding: 0rpx 16rpx; 243 padding: 0rpx 16rpx;
244 border: 1px solid #ff6b4a; 244 border: 1px solid #ff6b4a;
245 border-radius: 8rpx; 245 border-radius: 8rpx;
246 background-color: #ffffff; 246 background-color: #ffffff;
247 } 247 }
248 248
249 .searchIpt { 249 .searchIpt {
250 height: 68rpx; 250 height: 68rpx;
251 width: 670rpx; 251 width: 670rpx;
252 padding: 16rpx; 252 padding: 16rpx;
253 font-size: 28rpx; 253 font-size: 28rpx;
254 box-sizing: border-box; 254 box-sizing: border-box;
255 } 255 }
256 .screenBar { 256 .screenBar {
257 width: 670rpx; 257 width: 670rpx;
258 height: 110rpx; 258 height: 110rpx;
259 display: flex; 259 display: flex;
260 flex-direction: row; 260 flex-direction: row;
261 justify-content: space-between; 261 justify-content: space-between;
262 align-items: center; 262 align-items: center;
263 color: #333333; 263 color: #333333;
264 font-size: 32rpx; 264 font-size: 32rpx;
265 } 265 }
266 .active { 266 .active {
267 color: #ff6b4a; 267 color: #ff6b4a;
268 } 268 }
269 .screenItem { 269 .screenItem {
270 display: flex; 270 display: flex;
271 justify-content: center; 271 justify-content: center;
272 align-items: center; 272 align-items: center;
273 } 273 }
274 .content-wrap { 274 .content-wrap {
275 width: 100%; 275 width: 100%;
276 background-color: #ffffff; 276 background-color: #ffffff;
277 } 277 }
278 278
279 .HMfilterDropdown { 279 .HMfilterDropdown {
280 top: 178rpx !important; 280 top: 178rpx !important;
281 } 281 }
282 282
283 .goods-list { 283 .goods-list {
284 padding-top: 286rpx; 284 padding-top: 286rpx;
285 .loading-text { 285 .loading-text {
286 width: 100%; 286 width: 100%;
287 display: flex; 287 display: flex;
288 justify-content: center; 288 justify-content: center;
289 align-items: center; 289 align-items: center;
290 height: 30px; 290 height: 30px;
291 color: #979797; 291 color: #979797;
292 font-size: 12px; 292 font-size: 12px;
293 } 293 }
294 .product-list { 294 .product-list {
295 width: 92%; 295 width: 92%;
296 padding: 0 4% 3vw 4%; 296 padding: 0 4% 3vw 4%;
297 display: flex; 297 display: flex;
298 justify-content: space-between; 298 justify-content: space-between;
299 flex-wrap: wrap; 299 flex-wrap: wrap;
300 .product { 300 .product {
301 width: 48%; 301 width: 48%;
302 margin: 0 0 20rpx 0; 302 margin: 0 0 20rpx 0;
303 background: #ffffff; 303 background: #ffffff;
304 border: 1px solid #f2f2f2; 304 border: 1px solid #f2f2f2;
305 } 305 }
306 } 306 }
307 } 307 }
308 </style> 308 </style>
309 309
src/pages/user/user.vue
Diff comments   View file @156736a
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 <view 39 <view
40 v-if="isAuth" 40 v-if="isAuth"
41 class="content" 41 class="content"
42 > 42 >
43 <view class="userInfo"> 43 <view class="userInfo">
44 <view class="info"> 44 <view class="info">
45 <image 45 <image
46 :src="headerphoto" 46 :src="headerphoto"
47 mode="aspectFill" 47 mode="aspectFill"
48 ></image> 48 ></image>
49 <view class="infoText"> 49 <view class="infoText">
50 <text class="userName">{{nickName}}</text> 50 <text class="userName">{{nickName}}</text>
51 </view> 51 </view>
52 </view> 52 </view>
53 <!-- <view class="service"> 53 <!-- <view class="service">
54 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 54 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
55 </view> --> 55 </view> -->
56 </view> 56 </view>
57 <view 57 <view
58 class="myOpticsData" 58 class="myOpticsData"
59 @tap="toOpticsData" 59 @tap="toOpticsData"
60 > 60 >
61 <view class="left"> 61 <view class="left">
62 <image 62 <image
63 src="../../static/img/user/dataWrite.png" 63 src="../../static/img/user/dataWrite.png"
64 mode="aspectFit" 64 mode="aspectFit"
65 ></image> 65 ></image>
66 <text>验光数据</text> 66 <text>验光数据</text>
67 </view> 67 </view>
68 <image 68 <image
69 src="../../static/right.png" 69 src="../../static/right.png"
70 mode="aspectFit" 70 mode="aspectFit"
71 ></image> 71 ></image>
72 </view> 72 </view>
73 <view class="myOrder"> 73 <view class="myOrder">
74 <view class="orderHeader"> 74 <view class="orderHeader">
75 <text>全部订单</text> 75 <text>我的订单</text>
76 <view 76 <view
77 class="btn" 77 class="btn"
78 @click="toMyOrder('10')" 78 @click="toMyOrder('10')"
79 > 79 >
80 全部 80 全部
81 <image 81 <image
82 src="../../static/right.png" 82 src="../../static/right.png"
83 mode="aspectFit" 83 mode="aspectFit"
84 ></image> 84 ></image>
85 </view> 85 </view>
86 </view> 86 </view>
87 <view class="orderBody"> 87 <view class="orderBody">
88 <view 88 <view
89 class="item waitPay" 89 class="item waitPay"
90 @click="toMyOrder('0')" 90 @click="toMyOrder('0')"
91 > 91 >
92 <image 92 <image
93 src="../../static/img/user/waitDeliver.png" 93 src="../../static/img/user/waitDeliver.png"
94 mode="aspectFit" 94 mode="aspectFit"
95 ></image> 95 ></image>
96 <text>待付款</text> 96 <text>待付款</text>
97 </view> 97 </view>
98 <view 98 <view
99 class="item waitDeliver" 99 class="item waitDeliver"
100 @click="toMyOrder('1')" 100 @click="toMyOrder('1')"
101 > 101 >
102 <image 102 <image
103 src="../../static/img/user/waitPay.png" 103 src="../../static/img/user/waitPay.png"
104 mode="aspectFit" 104 mode="aspectFit"
105 ></image> 105 ></image>
106 <text>待收货</text> 106 <text>待收货</text>
107 </view> 107 </view>
108 <view 108 <view
109 class="item waitReceive" 109 class="item waitReceive"
110 @click="toMyOrder('2')" 110 @click="toMyOrder('2')"
111 > 111 >
112 <image 112 <image
113 src="../../static/img/user/waitReceive.png" 113 src="../../static/img/user/waitReceive.png"
114 mode="aspectFit" 114 mode="aspectFit"
115 ></image> 115 ></image>
116 <text>已完成</text> 116 <text>已完成</text>
117 </view> 117 </view>
118 <!-- <view class="item service" @click="toMyOrder('3')"> 118 <!-- <view class="item service" @click="toMyOrder('3')">
119 <image src="../../static/img/user/refound.png" mode="aspectFit"></image> 119 <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
120 <text>已评价</text> 120 <text>已评价</text>
121 </view> --> 121 </view> -->
122 </view> 122 </view>
123 </view> 123 </view>
124 <view class="someItem"> 124 <view class="someItem">
125 <!-- <view class="item"> 125 <!-- <view class="item">
126 <view class="left"> 126 <view class="left">
127 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> 127 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
128 <text>推广记录与收益</text> 128 <text>推广记录与收益</text>
129 </view> 129 </view>
130 <image src="../../static/right.png" mode="aspectFit"></image> 130 <image src="../../static/right.png" mode="aspectFit"></image>
131 </view> --> 131 </view> -->
132 <view class="item"> 132 <view class="item">
133 <image
134 src="../../static/address-icon.png"
135 mode="aspectFit"
136 ></image>
133 <view class="left"> 137 <view class="left">
138 <text @tap="toAddress">地址管理</text>
134 <image 139 <image
135 src="../../static/address-icon.png" 140 class="image2"
141 src="../../static/right.png"
136 mode="aspectFit" 142 mode="aspectFit"
137 ></image> 143 ></image>
138 <text @tap="toAddress">地址管理</text>
139 </view> 144 </view>
145
146 </view>
147 <view class="item">
140 <image 148 <image
141 src="../../static/right.png" 149 src="../../static/img/user/introduce.png"
142 mode="aspectFit" 150 mode="aspectFit"
143 ></image> 151 ></image>
144 </view>
145 <view class="item">
146 <view class="left"> 152 <view class="left">
153 <text @tap="introduce">系统介绍</text>
147 <image 154 <image
148 src="../../static/img/user/introduce.png" 155 src="../../static/right.png"
149 mode="aspectFit" 156 mode="aspectFit"
150 ></image> 157 ></image>
151 <text @tap="introduce">系统介绍</text>
152 </view> 158 </view>
159 </view>
160 <view class="item">
153 <image 161 <image
154 src="../../static/right.png" 162 src="../../static/img/user/joinUs.png"
155 mode="aspectFit" 163 mode="aspectFit"
156 ></image> 164 ></image>
157 </view>
158 <view class="item">
159 <view class="left"> 165 <view class="left">
166 <text @tap="joinUs">加入我们</text>
160 <image 167 <image
161 src="../../static/img/user/joinUs.png" 168 src="../../static/right.png"
162 mode="aspectFit" 169 mode="aspectFit"
163 ></image> 170 ></image>
164 <text @tap="joinUs">加入我们</text>
165 </view> 171 </view>
172 </view>
173 <view class="item">
166 <image 174 <image
167 src="../../static/right.png" 175 src="../../static/img/user/service.png"
168 mode="aspectFit" 176 mode="aspectFit"
169 ></image> 177 ></image>
170 </view> 178 <view class="left lastLeft">
171 <view class="item"> 179 <text>联系客服</text>
172 <view class="left">
173 <image 180 <image
174 src="../../static/img/user/service.png" 181 src="../../static/right.png"
175 mode="aspectFit" 182 mode="aspectFit"
176 ></image> 183 ></image>
177 <text>联系客服</text>
178 </view> 184 </view>
179 <image
180 src="../../static/right.png"
181 mode="aspectFit"
182 ></image>
183 </view> 185 </view>
184 </view> 186 </view>
185 <view class="recommend"> 187 <view class="recommend">
186 <view class="title"> 188 <view class="title">
187 <view class="line"></view> 189 <view class="line"></view>
188 <view class="text">精选推荐</view> 190 <view class="text">精选推荐</view>
189 <view class="line"></view> 191 <view class="line"></view>
190 </view> 192 </view>
191 <!-- 商品列表 --> 193 <!-- 商品列表 -->
192 <view class="goods-list"> 194 <view class="goods-list">
193 <scroll-view 195 <scroll-view
194 enable-flex 196 enable-flex
195 @scrolltolower="handleScrolltolower" 197 @scrolltolower="handleScrolltolower"
196 scroll-y 198 scroll-y
197 class="product-list" 199 class="product-list"
198 > 200 >
199 <view 201 <view
200 class="product" 202 class="product"
201 v-for="(item, index) in userRecommandList" 203 v-for="(item, index) in userRecommandList"
202 :key="index" 204 :key="index"
203 > 205 >
204 <Card :goods="item"></Card> 206 <Card :goods="item"></Card>
205 </view> 207 </view>
206 </scroll-view> 208 </scroll-view>
207 <view class="loading-text">{{loadingText}}</view> 209 <view class="loading-text">{{loadingText}}</view>
208 </view> 210 </view>
209 </view> 211 </view>
210 </view> 212 </view>
211 <view 213 <view
212 v-else 214 v-else
213 class="auth" 215 class="auth"
214 > 216 >
215 <view class="icon"></view> 217 <view class="icon"></view>
216 <view class="divider"></view> 218 <view class="divider"></view>
217 <view class="title">申请获取以下权限</view> 219 <view class="title">申请获取以下权限</view>
218 <view class="text">获得您的公开信息(昵称、头像等)</view> 220 <view class="text">获得您的公开信息(昵称、头像等)</view>
219 <button 221 <button
220 type="primary" 222 type="primary"
221 open-type="getUserInfo" 223 open-type="getUserInfo"
222 @getuserinfo="onGotUserInfo" 224 @getuserinfo="onGotUserInfo"
223 >授权登陆</button> 225 >授权登陆</button>
224 </view> 226 </view>
225 </view> 227 </view>
226 </template> 228 </template>
227 229
228 <script> 230 <script>
229 import Card from '@/components/CommodityCard/CommodityCard.vue' 231 import Card from '@/components/CommodityCard/CommodityCard.vue'
230 import store from '@/store' 232 import store from '@/store'
231 import UniPopup from '@/components/UniPopup/uni-popup.vue' 233 import UniPopup from '@/components/UniPopup/uni-popup.vue'
232 234
233 export default { 235 export default {
234 components: { 236 components: {
235 Card, 237 Card,
236 UniPopup 238 UniPopup
237 }, 239 },
238 data() { 240 data() {
239 return { 241 return {
240 isAuth: true, // 是否显示授权页面, 242 isAuth: true, // 是否显示授权页面,
241 pagesnum: 1, // 分页请求初始值 243 pagesnum: 1, // 分页请求初始值
242 whichTap: 0 // 弹窗渲染选择条件 244 whichTap: 0 // 弹窗渲染选择条件
243 } 245 }
244 }, 246 },
245 onLoad() { 247 onLoad() {
246 // 判断是否授权 248 // 判断是否授权
247 uni.getSetting({ 249 uni.getSetting({
248 success(res) { 250 success(res) {
249 console.log('authSetting', res.authSetting) 251 console.log('authSetting', res.authSetting)
250 if (res.authSetting['scope.userInfo'] === true) { 252 if (res.authSetting['scope.userInfo'] === true) {
251 this.isAuth = true 253 this.isAuth = true
252 } else { 254 } else {
253 this.isAuth = false 255 this.isAuth = false
254 } 256 }
255 } 257 }
256 }) 258 })
257 store.dispatch('userRecommand/getRecommandList', { 259 store.dispatch('userRecommand/getRecommandList', {
258 uid: this.$store.state.user.userInfo.uid, 260 uid: this.$store.state.user.userInfo.uid,
259 openid: this.$store.state.user.userInfo.openid, 261 openid: this.$store.state.user.userInfo.openid,
260 page: this.pagesnum 262 page: this.pagesnum
261 }) 263 })
262 }, 264 },
263 computed: { 265 computed: {
264 nickName() { 266 nickName() {
265 return this.$store.state.user.userInfo.nickName 267 return this.$store.state.user.userInfo.nickName
266 }, 268 },
267 headerphoto() { 269 headerphoto() {
268 return this.$store.state.user.userInfo.headerphoto 270 return this.$store.state.user.userInfo.headerphoto
269 }, 271 },
270 userRecommandList() { 272 userRecommandList() {
271 console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList) 273 console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList)
272 return this.$store.state.userRecommand.recommandList 274 return this.$store.state.userRecommand.recommandList
273 } 275 }
274 }, 276 },
275 methods: { 277 methods: {
276 // 弹窗 278 // 弹窗
277 changeTap(item) { 279 changeTap(item) {
278 this.whichTap = item 280 this.whichTap = item
279 this.$refs.popup.open() 281 this.$refs.popup.open()
280 }, 282 },
281 chatOur(item) { 283 chatOur(item) {
282 if (item === 1) { 284 if (item === 1) {
283 uni.makePhoneCall({ 285 uni.makePhoneCall({
284 phoneNumber: 13376189297 // 客服1 电话 286 phoneNumber: 13376189297 // 客服1 电话
285 }) 287 })
286 } else { 288 } else {
287 uni.makePhoneCall({ 289 uni.makePhoneCall({
288 phoneNumber: 18014995101 // 客服2 电话 290 phoneNumber: 18014995101 // 客服2 电话
289 }) 291 })
290 } 292 }
291 }, 293 },
292 // 授权 294 // 授权
293 onGotUserInfo(e) { 295 onGotUserInfo(e) {
294 if (e.detail.errMsg === 'getUserInfo:ok') { 296 if (e.detail.errMsg === 'getUserInfo:ok') {
295 const { fromInfo } = this.$store.state.user 297 const { fromInfo } = this.$store.state.user
296 // 用户授权成功 298 // 用户授权成功
297 store.dispatch('user/getUserInfo', fromInfo) 299 store.dispatch('user/getUserInfo', fromInfo)
298 this.isAuth = true 300 this.isAuth = true
299 } 301 }
300 }, 302 },
301 toAddress() { 303 toAddress() {
302 uni.navigateTo({ 304 uni.navigateTo({
303 url: '../address/addressList', 305 url: '../address/addressList',
304 success: res => {}, 306 success: res => {},
305 fail: () => {}, 307 fail: () => {},
306 complete: () => {} 308 complete: () => {}
307 }) 309 })
308 }, 310 },
309 introduce() { 311 introduce() {
310 uni.showModal({ 312 uni.showModal({
311 content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。', 313 content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。',
312 showCancel: false 314 showCancel: false
313 }) 315 })
314 }, 316 },
315 joinUs() { 317 joinUs() {
316 uni.showModal({ 318 uni.showModal({
317 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', 319 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
318 showCancel: false 320 showCancel: false
319 }) 321 })
320 }, 322 },
321 toMyOrder(status) { 323 toMyOrder(status) {
322 uni.navigateTo({ 324 uni.navigateTo({
323 url: `../myOrder/myOrder?status=${status}`, 325 url: `../myOrder/myOrder?status=${status}`,
324 success: res => {}, 326 success: res => {},
325 fail: () => {}, 327 fail: () => {},
326 complete: () => {} 328 complete: () => {}
327 }) 329 })
328 }, 330 },
329 toOpticsData() { 331 toOpticsData() {
330 uni.navigateTo({ 332 uni.navigateTo({
331 url: '../addOpticsData/addOpticsData' 333 url: '../addOpticsData/addOpticsData'
332 }) 334 })
333 }, 335 },
334 handleScrolltolower() { 336 handleScrolltolower() {
335 // console.log('usr-my',this.$store.state.user.userInfo) 337 // console.log('usr-my',this.$store.state.user.userInfo)
336 this.pagesnum++ 338 this.pagesnum++
337 store.dispatch('userRecommand/getRecommandList', { 339 store.dispatch('userRecommand/getRecommandList', {
338 uid: this.$store.state.user.userInfo.uid, 340 uid: this.$store.state.user.userInfo.uid,
339 openid: this.$store.state.user.userInfo.openid, 341 openid: this.$store.state.user.userInfo.openid,
340 page: this.pagesnum 342 page: this.pagesnum
341 }) 343 })
342 } 344 }
343 } 345 }
344 } 346 }
345 </script> 347 </script>
346 348
347 <style lang="scss"> 349 <style lang="scss">
348 .warp { 350 .warp {
349 font-size: 24rpx; 351 font-size: 24rpx;
350 background-color: #f2f2f2; 352 background-color: #f2f2f2;
351 height: 100vh; 353 height: 100vh;
352 } 354 }
353 .content { 355 .content {
354 display: flex; 356 display: flex;
355 flex-direction: column; 357 flex-direction: column;
356 align-items: center; 358 align-items: center;
357 justify-content: center; 359 justify-content: center;
358 background-color: #f2f2f2; 360 background-color: #f2f2f2;
359 } 361 }
360 .userInfo { 362 .userInfo {
361 background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); 363 background-image: linear-gradient(270deg, #f79067 0%, #FF5F3B 66%);
362 width: 100%; 364 width: 100%;
363 height: 240rpx; 365 height: 240rpx;
364 color: #ffffff; 366 color: #ffffff;
365 padding: 60rpx 82rpx 80rpx 44rpx; 367 padding: 60rpx 82rpx 80rpx 44rpx;
366 box-sizing: border-box; 368 box-sizing: border-box;
367 display: flex; 369 display: flex;
368 flex-direction: row; 370 flex-direction: row;
369 justify-content: space-between; 371 justify-content: space-between;
370 align-items: flex-start; 372 align-items: flex-start;
371 .info { 373 .info {
372 display: flex; 374 display: flex;
373 flex-direction: row; 375 flex-direction: row;
374 justify-content: space-between; 376 justify-content: space-between;
375 align-items: center; 377 align-items: center;
376 image { 378 image {
377 border-radius: 50rpx; 379 border-radius: 50rpx;
378 height: 100rpx; 380 height: 100rpx;
379 width: 100rpx; 381 width: 100rpx;
380 margin-right: 40rpx; 382 margin-right: 40rpx;
381 } 383 }
382 .infoText { 384 .infoText {
383 display: flex; 385 display: flex;
384 flex-direction: column; 386 flex-direction: column;
385 justify-content: space-between; 387 justify-content: space-between;
386 align-items: flex-scetart; 388 align-items: flex-scetart;
387 .userName { 389 .userName {
388 font-size: 18px; 390 font-size: 18px;
389 color: #ffffff; 391 color: #ffffff;
390 margin-bottom: 8rpx; 392 margin-bottom: 8rpx;
391 } 393 }
392 .nickName { 394 .nickName {
393 font-size: 12px; 395 font-size: 12px;
394 color: #ffffff; 396 color: #ffffff;
395 } 397 }
396 } 398 }
397 } 399 }
398 // .service { 400 // .service {
399 // margin-top: 20rpx; 401 // margin-top: 20rpx;
400 // image { 402 // image {
401 // height: 36rpx; 403 // height: 36rpx;
402 // width: 36rpx; 404 // width: 36rpx;
403 // } 405 // }
404 // } 406 // }
405 } 407 }
406 .myOpticsData { 408 .myOpticsData {
407 width: 670rpx; 409 width: 670rpx;
408 height: 120rpx; 410 height: 120rpx;
409 background-color: #ffffff; 411 background-color: #ffffff;
410 border-radius: 6px; 412 border-radius: 6px;
411 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); 413 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1);
412 position: relative; 414 position: relative;
413 bottom: 44rpx; 415 bottom: 44rpx;
414 padding: 40rpx; 416 padding: 40rpx;
415 box-sizing: border-box; 417 box-sizing: border-box;
416 display: flex; 418 display: flex;
417 justify-content: space-between; 419 justify-content: space-between;
418 align-items: center; 420 align-items: center;
419 .left { 421 .left {
420 font-size: 14px; 422 font-size: 14px;
421 color: #333333; 423 color: #333333;
422 display: flex; 424 display: flex;
423 align-items: center; 425 align-items: center;
424 image { 426 image {
425 margin-right: 32rpx; 427 margin-right: 32rpx;
426 width: 30rpx; 428 width: 40rpx;
427 height: 34rpx; 429 height: 44rpx;
428 } 430 }
429 } 431 }
430 image { 432 image {
431 height: 16px; 433 height: 16px;
432 width: 8px; 434 width: 8px;
433 } 435 }
434 } 436 }
435 .myOrder { 437 .myOrder {
436 width: 100%; 438 width: 100%;
437 height: 296rpx; 439 height: 296rpx;
438 // margin-top: 116rpx; 440 // margin-top: 116rpx;
439 margin-bottom: 20rpx; 441 margin-bottom: 20rpx;
440 padding: 0 40rpx; 442 padding: 0 40rpx;
441 box-sizing: border-box; 443 box-sizing: border-box;
442 background: #ffffff; 444 background: #ffffff;
443 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 445 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
444 border-radius: 6px; 446 border-radius: 6px;
445 border-radius: 6px; 447 border-radius: 6px;
446 display: flex; 448 display: flex;
447 flex-direction: column; 449 flex-direction: column;
448 justify-content: space-around; 450 justify-content: space-around;
449 align-items: center; 451 align-items: center;
450 .orderHeader { 452 .orderHeader {
451 width: 100%; 453 width: 100%;
452 height: 100rpx; 454 height: 100rpx;
453 display: flex; 455 display: flex;
454 flex-direction: row; 456 flex-direction: row;
455 justify-content: space-between; 457 justify-content: space-between;
456 align-items: center; 458 align-items: center;
457 border-bottom: 1px solid #e9e9e9; 459 border-bottom: 1px solid #F5F5F5;
458 font-weight: bold; 460 font-weight: bold;
459 font-size: 18px; 461 font-size: 18px;
460 color: #333333; 462 color: #333333;
461 .btn { 463 .btn {
462 font-size: 12px; 464 font-size: 12px;
463 color: #999999; 465 color: #999999;
464 display: flex; 466 display: flex;
465 align-items: center; 467 align-items: center;
466 image { 468 image {
467 margin-left: 20rpx; 469 margin-left: 20rpx;
468 height: 32rpx; 470 height: 32rpx;
469 width: 16rpx; 471 width: 16rpx;
470 } 472 }
471 } 473 }
472 } 474 }
473 .orderBody { 475 .orderBody {
474 width: 100%; 476 width: 100%;
475 display: flex; 477 display: flex;
476 flex-direction: row; 478 flex-direction: row;
477 justify-content: space-around; 479 justify-content: space-around;
478 align-items: center; 480 align-items: center;
479 .item { 481 .item {
480 display: flex; 482 display: flex;
481 flex-direction: column; 483 flex-direction: column;
482 align-items: center; 484 align-items: center;
483 image { 485 image {
484 width: 62rpx; 486 width: 62rpx;
485 height: 46rpx; 487 height: 46rpx;
486 } 488 }
487 text { 489 text {
488 margin-top: 24rpx; 490 margin-top: 24rpx;
489 font-size: 12px; 491 font-size: 12px;
490 color: #333333; 492 color: #333333;
491 } 493 }
492 } 494 }
493 } 495 }
494 } 496 }
495 .someItem { 497 .someItem {
496 width: 100%; 498 width: 100%;
497 height: 336rpx; 499 height: 336rpx;
498 background: #ffffff; 500 background: #ffffff;
499 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 501 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
500 border-radius: 6px; 502 border-radius: 6px;
501 border-radius: 6px; 503 border-radius: 6px;
502 margin-bottom: 18rpx; 504 margin-bottom: 18rpx;
503 box-sizing: border-box; 505 box-sizing: border-box;
504 padding: 21rpx 48rpx 21rpx 42rpx; 506 padding: 21rpx 48rpx 21rpx 42rpx;
505 box-sizing: border-box; 507 box-sizing: border-box;
506 display: flex; 508 display: flex;
507 flex-direction: column; 509 flex-direction: column;
508 justify-content: space-between; 510 justify-content: space-between;
509 align-items: center; 511 align-items: center;
510 .item { 512 .item {
511 display: flex; 513 display: grid;
512 justify-content: space-between; 514 grid-template-columns: 10% 90%;
513 border-bottom: 1px solid #f2f2f2;
514 align-items: center; 515 align-items: center;
515 height: 72rpx; 516 height: 72rpx;
516 width: 100%; 517 width: 100%;
517 .left { 518 .left {
518 font-size: 14px; 519 font-size: 14px;
519 color: #333333; 520 color: #333333;
520 display: flex; 521 display: flex;
521 align-items: center; 522 align-items: center;
523 justify-content: space-between;
524 height: 72rpx;
525 border-bottom: 1px solid #F2F2F2;
522 image { 526 image {
523 margin-right: 32rpx; 527 margin-right: 0;
524 width: 30rpx; 528 height: 16px;
525 height: 34rpx; 529 width: 8px;
526 } 530 }
527 } 531 }
528 image { 532 image {
529 height: 16px; 533 margin-right: 32rpx;
530 width: 8px; 534 width: 40rpx;
535 height: 44rpx;
531 } 536 }
537 .lastLeft{
538 border-bottom: none;
539 }
532 } 540 }
533 } 541 }
534 .recommend { 542 .recommend {
535 background: #ffffff; 543 background: #ffffff;
536 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 544 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
537 border-radius: 6px; 545 border-radius: 6px;
538 border-radius: 6px; 546 border-radius: 6px;
539 width: 100%; 547 width: 100%;
540 .title { 548 .title {
541 display: flex; 549 display: flex;
542 flex-direction: row; 550 flex-direction: row;
543 align-items: center; 551 align-items: center;
544 justify-content: space-between; 552 justify-content: space-between;
545 padding: 20rpx 40rpx; 553 padding: 20rpx 40rpx;
546 .line { 554 .line {
547 width: 264rpx; 555 width: 264rpx;
548 height: 1rpx; 556 height: 1rpx;
549 border-bottom: 1px solid #eaeaea; 557 border-bottom: 1px solid #eaeaea;
550 } 558 }
551 .text { 559 .text {
552 font-family: PingFangSC-Medium; 560 font-family: PingFangSC-Medium;
553 font-size: 14px; 561 font-size: 14px;
554 color: #333333; 562 color: #333333;
555 letter-spacing: -0.26px; 563 letter-spacing: -0.26px;
556 text-align: justify; 564 text-align: justify;
557 line-height: 24px; 565 line-height: 24px;
558 } 566 }
559 } 567 }
560 .goods-list { 568 .goods-list {
561 .loading-text { 569 .loading-text {
562 width: 100%; 570 width: 100%;
563 display: flex; 571 display: flex;
564 justify-content: center; 572 justify-content: center;
565 align-items: center; 573 align-items: center;
566 height: 30px; 574 height: 30px;
567 color: #979797; 575 color: #979797;
568 font-size: 12px; 576 font-size: 12px;
569 } 577 }
570 .product-list { 578 .product-list {
571 width: 92%; 579 width: 92%;
572 padding: 0 4% 3vw 4%; 580 padding: 0 4% 3vw 4%;
573 display: flex; 581 display: flex;
574 justify-content: space-between; 582 justify-content: space-between;
575 flex-wrap: wrap; 583 flex-wrap: wrap;
576 height: 400px; 584 height: 400px;
577 .product { 585 .product {
578 width: 48%; 586 width: 48%;
579 margin: 0 0 20rpx 0; 587 margin: 0 0 20rpx 0;
580 background: #ffffff; 588 background: #ffffff;
581 border: 1px solid #f2f2f2; 589 border: 1px solid #f2f2f2;
582 } 590 }
583 } 591 }
584 } 592 }
585 } 593 }
586 .auth { 594 .auth {
587 height: 100vh; 595 height: 100vh;
588 display: flex; 596 display: flex;
589 flex-direction: column; 597 flex-direction: column;
590 align-items: center; 598 align-items: center;
591 .icon { 599 .icon {
592 width: 140rpx; 600 width: 140rpx;
593 height: 140rpx; 601 height: 140rpx;
594 border-radius: 50%; 602 border-radius: 50%;
595 margin-top: 100rpx; 603 margin-top: 100rpx;
596 background-color: grey; 604 background-color: grey;
597 } 605 }
598 .divider { 606 .divider {
599 height: 1rpx; 607 height: 1rpx;
600 width: 600rpx; 608 width: 600rpx;
601 margin-top: 80rpx; 609 margin-top: 80rpx;
602 background-color: #e6e3e3; 610 background-color: #e6e3e3;
603 } 611 }
604 .title { 612 .title {
605 width: 600rpx; 613 width: 600rpx;
606 margin-top: 50rpx; 614 margin-top: 50rpx;
607 text-align: left; 615 text-align: left;
608 } 616 }
609 .text { 617 .text {
610 width: 600rpx; 618 width: 600rpx;
611 margin-top: 30rpx; 619 margin-top: 30rpx;
612 text-align: left; 620 text-align: left;
613 color: #e6e3e3; 621 color: #e6e3e3;
614 } 622 }
615 button { 623 button {
616 width: 450rpx; 624 width: 450rpx;
617 height: 80rpx; 625 height: 80rpx;
618 line-height: 80rpx; 626 line-height: 80rpx;
src/static/chat_logo.png
Diff comments   View file @156736a

3.92 KB
src/static/icon-data.png
Diff comments   View file @156736a

1.01 KB | W: | H:

1.09 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/static/img/user/dataWrite.png
Diff comments   View file @156736a

382 Bytes | W: | H:

515 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/static/img/user/introduce.png
Diff comments   View file @156736a

488 Bytes | W: | H:

618 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/static/img/user/joinUs.png
Diff comments   View file @156736a

1.97 KB | W: | H:

2.07 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/static/joinUs (2).png
Diff comments   View file @156736a

488 Bytes | W: | H:

618 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin