开发

pages/commodity/index.js

@@ -1,14 +1,36 @@
-// pages/commodity/index.js
-Page({
+import {
+    getProducts,
+} from '~/api/global'
+import event from '~/mixins/event'
 
-    /**
-     * 页面的初始数据
-     */
+Page({
+    behaviors: [event],
     data: {
+        products: [],
+        product: {},
         mask: false
     },
     onShow() {
-
+        this.getProducts()
+    },
+    async getProducts() {
+        let {
+            productList: products,
+        } = await getProducts()
+        this.setData({
+            products,
+            active: products[0].id,
+            product: products[0]
+        })
+    },
+    selected({
+        currentTarget
+    }) {
+        console.log(currentTarget.dataset.product);
+        this.setData({
+            active: currentTarget.dataset.product.id,
+            product: currentTarget.dataset.product
+        })
     },
     closeMask() {
         this.setData({

pages/commodity/index.less

@@ -5,6 +5,85 @@
     background: url('http://reader-wx.ai160.com/images/reader/v3/bg.jpg') no-repeat;
     background-size: 100% 100%;
 
+    .commoditys {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 360rpx auto;
+        padding: 54rpx 24rpx 54rpx 34rpx;
+        width: 676rpx;
+        height: 313rpx;
+        box-sizing: border-box;
+        border-radius: 20rpx;
+
+        .commodity {
+            position: relative;
+            width: 192rpx;
+            height: 192rpx;
+            border-radius: 10rpx;
+        }
+
+        .active {
+            position: absolute;
+            width: 54rpx;
+            height: 36rpx;
+            right: 0;
+            bottom: 0;
+        }
+
+        .aborder {
+            border-color: #ff935e;
+        }
+
+        .c-1 {
+            background: url('http://reader-wx.ai160.com/images/reader/v3/299.png') no-repeat;
+            background-size: contain;
+        }
+
+        .c-2 {
+            background: url('http://reader-wx.ai160.com/images/reader/v3/99.png') no-repeat;
+            background-size: contain;
+        }
+
+        .c-3 {
+            background: url('http://reader-wx.ai160.com/images/reader/v3/15.png') no-repeat;
+            background-size: contain;
+        }
+
+    }
+
+    .payBox {
+        position: fixed;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        padding: 34rpx 38rpx;
+        background: white;
+
+        .left {
+            font-size: 38rpx;
+        }
+
+        .price {
+            color: #ff9108;
+            font-size: 48rpx;
+            font-weight: bold;
+        }
+
+        .pay {
+            padding:14rpx 50rpx;
+            background: #ff9108;
+            color: white;
+            font-weight: 500;
+            font-size: 36rpx;
+            border-radius: 45rpx;
+        }
+    }
+
     .mask {
         position: fixed;
         display: flex;

pages/commodity/index.wxml

@@ -1,4 +1,29 @@
 <view id="container">
+    <view class="commoditys" wx:if="{{products.length>0}}">
+        <view class="['commodity c-1', {{active==products[0].id?'aborder':''}}]" bindtap="selected"
+            data-product="{{products[0]}}">
+            <image src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active"
+                wx:if="{{active==products[0].id}}" />
+        </view>
+        <view class="['commodity c-2', {{active==products[2].id?'aborder':''}}]" bindtap="selected"
+            data-product="{{products[2]}}">
+            <image src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active"
+                wx:if="{{active==products[2].id}}" />
+        </view>
+        <view class="['commodity c-3', {{active==products[1].id?'aborder':''}}]" bindtap="selected"
+            data-product="{{products[1]}}">
+            <image src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active"
+                wx:if="{{active==products[1].id}}" />
+        </view>
+    </view>
+    <view class="payBox" wx:if="{{active!=''}}">
+        <view class="left">
+            {{product.title}}
+            <span class="price">{{product.price/100}}</span>
+            元
+        </view>
+        <view class="pay" bindtap="pay">立即支付</view>
+    </view>
     <view class="mask" wx:if="{{mask}}">
         <view class="payTips">
             <image src="https://reader-wx.ai160.com/images/reader/v3/right.webp" class="simg" />

pages/commodity/index.wxss

@@ -5,6 +5,73 @@
   background: url('http://reader-wx.ai160.com/images/reader/v3/bg.jpg') no-repeat;
   background-size: 100% 100%;
 }
+#container .commoditys {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 360rpx auto;
+  padding: 54rpx 24rpx 54rpx 34rpx;
+  width: 676rpx;
+  height: 313rpx;
+  box-sizing: border-box;
+  border-radius: 20rpx;
+}
+#container .commoditys .commodity {
+  position: relative;
+  width: 192rpx;
+  height: 192rpx;
+  border-radius: 10rpx;
+}
+#container .commoditys .active {
+  position: absolute;
+  width: 54rpx;
+  height: 36rpx;
+  right: 0;
+  bottom: 0;
+}
+#container .commoditys .aborder {
+  border-color: #ff935e;
+}
+#container .commoditys .c-1 {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/299.png') no-repeat;
+  background-size: contain;
+}
+#container .commoditys .c-2 {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/99.png') no-repeat;
+  background-size: contain;
+}
+#container .commoditys .c-3 {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/15.png') no-repeat;
+  background-size: contain;
+}
+#container .payBox {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 34rpx 38rpx;
+  background: white;
+}
+#container .payBox .left {
+  font-size: 38rpx;
+}
+#container .payBox .price {
+  color: #ff9108;
+  font-size: 48rpx;
+  font-weight: bold;
+}
+#container .payBox .pay {
+  padding: 14rpx 50rpx;
+  background: #ff9108;
+  color: white;
+  font-weight: 500;
+  font-size: 36rpx;
+  border-radius: 45rpx;
+}
 #container .mask {
   position: fixed;
   display: flex;