吉鹏 / gulu-vue

Download as
Browse Code »

Commit fa7712dcc0162c3b33a4583bb143c126dc37ad48

Authored by 喻鹏
2 parents 967ce241af 156736a2ed
Exists in master

修改冲突

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

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

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 @fa7712d

382 Bytes | W: | H:

515 Bytes | W: | H:

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

488 Bytes | W: | H:

618 Bytes | W: | H:

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

1.97 KB | W: | H:

2.07 KB | W: | H:

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

488 Bytes | W: | H:

618 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin