刘文博 / gulu-vue

Download as
Browse Code »

Commit d495801abedc7d8eab28f34c0704c1bd97013574

Authored by 尹聃
2 parents cce344b20d 93e6a26508
Exists in master

Merge branch 'master' of 121.40.31.31:jp/gulu-vue

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

3.42 KB
src/static/easy-loadimage/loading.gif
Diff comments   View file @d495801

16.9 KB
src/store/modules/index.js
Diff comments   View file @d495801
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { 4 const {
5 category, 5 category,
6 shopList, 6 shopList,
7 search, 7 search,
8 } = urlAlias; 8 } = urlAlias;
9 9
10 const state = { 10 const state = {
11 categoryList: [], 11 categoryList: [],
12 list: [], 12 list: []
13 }; 13 };
14 14
15 const mutations = { 15 const mutations = {
16 LIST: (state, list) => { 16 LIST: (state, list) => {
17 state.list = list; 17 state.list = list;
18 }, 18 },
19 CATEGORY: (state, categoryList) => { 19 CATEGORY: (state, categoryList) => {
20 state.categoryList = categoryList; 20 state.categoryList = categoryList;
21 }, 21 }
22 }; 22 };
23 23
24 const actions = { 24 const actions = {
25 category({ commit }, param) { 25 category({ commit }, param) {
26 request({ 26 request({
27 url: category, 27 url: category,
28 success: (res) => { 28 success: (res) => {
29 console.log('category', res); 29 console.log('category', res);
30 let data = res.data.data; 30 let data = res.data.data;
31 for(let i = 0; i<=data.length; i++) { 31 for(let i = 0; i<=data.length; i++) {
32 if(data[i] && data[i].type !== 'filter'){ 32 if(data[i] && data[i].type !== 'filter'){
33 data[i].type = 'hierarchy'; 33 data[i].type = 'hierarchy';
34 } 34 }
35 } 35 }
36 data.unshift({ 36 data.unshift({
37 type: "hierarchy", 37 type: "hierarchy",
38 name: "全部", 38 name: "全部",
39 value: "all", 39 value: "all",
40 isNoPull: true, 40 isNoPull: true,
41 }); 41 });
42 commit('CATEGORY', data); 42 commit('CATEGORY', data);
43 }, 43 },
44 fail: (res) => { 44 fail: (res) => {
45 console.log("fail status === > ", res); 45 console.log("fail status === > ", res);
46 }, 46 },
47 complete: (res) => { 47 complete: (res) => {
48 console.log("complete status === > ", res); 48 console.log("complete status === > ", res);
49 }, 49 },
50 }) 50 })
51 }, 51 },
52 list({ commit }, param) { 52 list({ commit }, param) {
53 request({ 53 request({
54 url: shopList, 54 url: shopList,
55 success: (res) => { 55 success: (res) => {
56 commit('LIST', res.data.data) 56 commit('LIST', res.data.data)
57 }, 57 },
58 fail: (res) => { 58 fail: (res) => {
59 console.log("fail status === > ", res); 59 console.log("fail status === > ", res);
60 }, 60 },
61 complete: (res) => { 61 complete: (res) => {
62 console.log("complete status === > ", res); 62 console.log("complete status === > ", res);
63 }, 63 },
64 }) 64 })
65 }, 65 },
66 search({ commit }, { params, keyword }) { 66 search({ commit }, { params, keyword }) {
67 const uid = uni.getStorageSync('uid'); 67 const uid = uni.getStorageSync('uid');
68 console.log("params",params, keyword); 68 console.log("params",params, keyword);
69 request({ 69 request({
70 url: search, 70 url: search,
71 data: { 71 data: {
72 params: JSON.stringify(params), 72 params: JSON.stringify(params),
73 uid, 73 uid,
74 way: 1, 74 way: 1,
75 keyword, 75 keyword,
76 }, 76 },
77 success: (res) => { 77 success: (res) => {
78 commit('LIST', res.data.data); 78 commit('LIST', res.data.data);
79 }, 79 },
80 fail: (res) => { 80 fail: (res) => {
81 console.log("fail status === > ", res); 81 console.log("fail status === > ", res);
82 }, 82 },
83 complete: (res) => { 83 complete: (res) => {
84 console.log("complete status === > ", res); 84 console.log("complete status === > ", res);
85 }, 85 },
86 }) 86 })
87 } 87 },
88 }; 88 };
89 89
90 export default { 90 export default {
91 namespaced: true, 91 namespaced: true,
92 state, 92 state,
93 mutations, 93 mutations,
94 actions, 94 actions,
95 }; 95 };
96 96
src/store/modules/userRecommand.js
Diff comments   View file @d495801
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { 4 const {
5 recommandList 5 recommandList
6 } = urlAlias 6 } = urlAlias
7 7
8 const state = { 8 const state = {
9 recommandList: [] 9 recommandList: []
10 } 10 }
11 11
12 const mutations = { 12 const mutations = {
13 INIT: (state, list) => { 13 INIT: (state, list) => {
14 state.recommandList = list 14 state.recommandList = list
15 } 15 }
16 } 16 }
17 17
18 let goodsList = [] 18 let goodsList = []
19 19
20 const actions = { 20 const actions = {
21 getRecommandList({ commit }, param) { 21 getRecommandList({ commit }, param) {
22 request({ 22 request({
23 url: recommandList, 23 url: recommandList,
24 data: param, 24 data: param,
25 success: (res) => { 25 success: (res) => {
26 console.log(res.data.data) 26 console.log('ReccomandList请求结果',res.data)
27 // console.log(res.data.data)
27 // const Res={...res.data.data.list,...data.data.list} 28 // const Res={...res.data.data.list,...data.data.list}
28 const data = res.data.data 29 const data = res.data.data
29 for (let index = 0; index < data.length; index++) { 30 for (let index = 0; index < data.length; index++) {
30 goodsList = [...goodsList, ...data[index].list] 31 goodsList = [...goodsList, ...data[index].list]
31 } 32 }
32 commit('INIT', goodsList) 33 commit('INIT', goodsList)
33 }, 34 },
34 fail: (res) => { 35 fail: (res) => {
35 uni.showToast({ 36 uni.showToast({
36 title: '数据加载完了', 37 title: '数据加载完了',
37 icon: 'none' 38 icon: 'none'
38 }) 39 })
39 console.log('fail status === > ', res) 40 console.log('fail status === > ', res)
40 }, 41 },
41 complete: (res) => { 42 complete: (res) => {
42 console.log('complete status === > ', res) 43 console.log('complete status === > ', res)
43 } 44 }
44 }) 45 })
45 } 46 }
46 } 47 }
47 48
48 export default { 49 export default {
49 namespaced: true, 50 namespaced: true,
50 state, 51 state,
51 mutations, 52 mutations,
52 actions 53 actions
53 } 54 }
54 55