浏览代码

母婴产品加入轮播图

梁沛聪 6 年前
父节点
当前提交
ae054f28e6

+ 23
- 1
miniapp/app/pages/goodsList/index.js 查看文件

4
     data: {
4
     data: {
5
         tabs: [],
5
         tabs: [],
6
         goods: [],
6
         goods: [],
7
-        selected: 0
7
+        selected: 0,
8
+        list: []
8
     },
9
     },
9
     onLoad() {
10
     onLoad() {
10
         this.init();
11
         this.init();
11
     },
12
     },
12
     init() {
13
     init() {
14
+        $.request('product/home', 'GET', {}).then((res) => {
15
+            const list = res.top;
16
+            if (list && list.length > 0) {
17
+                this.setData({
18
+                    list
19
+                });
20
+            }
21
+        });
13
         $.request('products', 'GET', {}).then((res) => {
22
         $.request('products', 'GET', {}).then((res) => {
14
             if (res.data) {
23
             if (res.data) {
15
                 const tabs = [];
24
                 const tabs = [];
45
         }
54
         }
46
     },
55
     },
47
     toDetail(e) {
56
     toDetail(e) {
57
+        const {
58
+            id
59
+        } = e.target.dataset;
60
+        if (id) {
61
+            $.router.goto({
62
+                path: `/pages/detail/index`,
63
+                query: {
64
+                    id
65
+                }
66
+            });
67
+        }
68
+    },
69
+    toProduct(e) {
48
         const {
70
         const {
49
             id
71
             id
50
         } = e.currentTarget.dataset;
72
         } = e.currentTarget.dataset;

+ 23
- 11
miniapp/app/pages/goodsList/index.wxml 查看文件

1
 <view class="page">
1
 <view class="page">
2
+    <view class="page-hd">
3
+        <swiper indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#00a0e9" autoplay="true"
4
+            interval="5000" duration="500">
5
+            <block wx:for="{{list}}">
6
+                <swiper-item>
7
+                    <image src="{{item.photo}}" class="slide-image" data-id="{{item.id}}" bindtap="toDetail" />
8
+                </swiper-item>
9
+            </block>
10
+        </swiper>
11
+    </view>
2
     <view class="page-bd">
12
     <view class="page-bd">
3
         <view class="goods">
13
         <view class="goods">
4
             <view class="tabs" bindtap="changeTab">
14
             <view class="tabs" bindtap="changeTab">
5
                 <view class="tab {{selected === index ? 'active' : ''}}" data-name="{{item}}" wx:for="{{tabs}}">{{item}}</view>
15
                 <view class="tab {{selected === index ? 'active' : ''}}" data-name="{{item}}" wx:for="{{tabs}}">{{item}}</view>
6
             </view>
16
             </view>
7
             <view class="details">
17
             <view class="details">
8
-                <view class="cards">
9
-                    <view class="card" wx:for="{{goods}}" bindtap="toDetail" data-id="{{item.id}}">
10
-                        <image class="goods-img" src="{{item.photo}}"></image>
11
-                        <view class="card-name">{{item.name}}</view>
12
-                        <view class="price">¥{{item.price}}</view>
18
+                <scroll-view scroll-y scroll-with-animation="true" style="height:{{systemInfo.windowHeight*systemInfo.pixelRatio - 300}}rpx">
19
+                    <view class="cards">
20
+                        <view class="card" wx:for="{{goods}}" bindtap="toProduct" data-id="{{item.id}}">
21
+                            <image class="goods-img" src="{{item.photo}}"></image>
22
+                            <view class="card-name">{{item.name}}</view>
23
+                            <view class="price">¥{{item.price}}</view>
24
+                        </view>
25
+                        <!-- <view class="card">
26
+                            <image class="goods-img" src="/img/demo/order-img.png"></image>
27
+                            <view class="card-name">婴儿抱娃神器</view>
28
+                            <view class="price">¥79.00</view>
29
+                        </view> -->
13
                     </view>
30
                     </view>
14
-                    <!-- <view class="card">
15
-                        <image class="goods-img" src="/img/demo/order-img.png"></image>
16
-                        <view class="card-name">婴儿抱娃神器</view>
17
-                        <view class="price">¥79.00</view>
18
-                    </view> -->
19
-                </view>
31
+                </scroll-view>
20
             </view>
32
             </view>
21
         </view>
33
         </view>
22
     </view>
34
     </view>

+ 16
- 3
miniapp/app/pages/goodsList/index.wxss 查看文件

2
     background-color: #fff;
2
     background-color: #fff;
3
 }
3
 }
4
 
4
 
5
+.page-hd {
6
+    position: relative;
7
+    z-index: 9;
8
+}
9
+
5
 .tabs {
10
 .tabs {
6
-    position: fixed;
11
+    position: absolute;
7
     left: 0;
12
     left: 0;
8
     width: 226rpx;
13
     width: 226rpx;
9
-    top: 0;
14
+    top: 300rpx;
10
     bottom: 0;
15
     bottom: 0;
11
     background-color: #f6f6f8;
16
     background-color: #f6f6f8;
12
     padding-top: 20rpx;
17
     padding-top: 20rpx;
29
 
34
 
30
 .details {
35
 .details {
31
     padding-left: 226rpx;
36
     padding-left: 226rpx;
37
+}
38
+
39
+.cards {
32
     padding-top: 20rpx;
40
     padding-top: 20rpx;
33
     padding-bottom: 20rpx;
41
     padding-bottom: 20rpx;
34
 }
42
 }
40
     margin-top: 18rpx;
48
     margin-top: 18rpx;
41
     padding-bottom: 14rpx;
49
     padding-bottom: 14rpx;
42
     border-radius: 4rpx;
50
     border-radius: 4rpx;
43
-    border:solid 2rpx #efefef;
51
+    border: solid 2rpx #efefef;
44
 }
52
 }
45
 
53
 
46
 .goods-img {
54
 .goods-img {
59
     color: #fe2e48;
67
     color: #fe2e48;
60
     padding-left: 14rpx;
68
     padding-left: 14rpx;
61
     margin-top: 10rpx;
69
     margin-top: 10rpx;
70
+}
71
+
72
+.slide-image {
73
+    width: 100%;
74
+    height: 300rpx;
62
 }
75
 }

+ 6
- 2
miniapp/app/pages/service/index.js 查看文件

5
 
5
 
6
     },
6
     },
7
     toPay() {
7
     toPay() {
8
+        $.wx.showToast({
9
+            title: '加载中'
10
+        }, 'loading');
8
         $.request('reward', 'POST', {}).then((res) => {
11
         $.request('reward', 'POST', {}).then((res) => {
9
             const {
12
             const {
10
                 timestamp,
13
                 timestamp,
11
                 paySign,
14
                 paySign,
12
-                nonceStr
15
+                nonceStr,
16
+                signType
13
             } = res.msg;
17
             } = res.msg;
14
             const pck = res.msg.package;
18
             const pck = res.msg.package;
15
             wx.requestPayment({
19
             wx.requestPayment({
16
                 timeStamp: timestamp + '',
20
                 timeStamp: timestamp + '',
17
                 nonceStr,
21
                 nonceStr,
18
                 package: pck,
22
                 package: pck,
19
-                signType: 'MD5',
23
+                signType,
20
                 paySign,
24
                 paySign,
21
                 success(res) {
25
                 success(res) {
22
                     $.wx.showToast({
26
                     $.wx.showToast({

Loading…
取消
保存