提交

甲情_甲意/miniprogram/pages/zhifujiemian/zhifujiemian.acss

@@ -0,0 +1,61 @@
+.all{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.box{
+  width: 90%;
+  height: 180px;
+  display: flex;
+  border: 1px solid #9fa1a3;
+  border-radius: 20px;
+  margin-top: 20rpx;
+  flex-direction: column;
+  overflow: hidden;
+}
+.image{
+  width: 80px;
+  height: 80px;
+  border-radius: 10px;
+}
+.xinxi{
+  width: 100%;
+  height: 100px;
+  display: flex;
+  margin-left: 20rpx
+}
+.juzhong{
+  display:flex;
+  align-items:center
+}
+.biaoti{
+  width: 249px;
+  margin-left: 10rpx;
+}
+.text{
+  font-size: 18px;
+  font-weight: bold;
+}
+.form{
+  width: 100%;
+  height: 200px;
+}
+.xian{
+  width: 100%;
+  height: 1px;
+  background-color: #9fa1a3;
+  
+}
+.zhifu{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  height: 50px;
+  background-color: #ee8d97;
+  border-radius: 40px;
+  position: fixed;
+  bottom: 40rpx;
+}

甲情_甲意/miniprogram/pages/zhifujiemian/zhifujiemian.axml

@@ -0,0 +1,37 @@
+<view class="all">
+  <!-- 商品框 -->
+  <view class="box" a:for="{{ dingdan }}" >
+    <view class="xinxi">
+      <view class="juzhong">
+        <image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" />
+      </view>
+      <view class="biaoti">
+        <view style="margin-top:30rpx">
+          <text class="text">{{item.commoditiesName}}</text>
+        <view style="margin-top:5rpx">
+          <text>￥{{item.commoditiesPrice*item.quantity}}</text> 
+        </view>
+        <view style="margin-top:5rpx">
+          <text style="color:#898c90">共{{item.quantity}}件</text>
+        </view>
+        </view>
+      </view>
+    </view>
+    <view class="xian"></view>
+    <view>
+      <view style="display:flex;justify-content:space-between;margin-top:20rpx">
+        <text style="font-size:19px;margin-left:30rpx">商品总价</text>
+        <text style="margin-right:50rpx">￥{{item.commoditiesPrice*item.quantity}}</text>
+      </view>
+      <view class="xian" style="margin-top: 10rpx;"></view>
+      <view style="display:flex;justify-content:space-between;margin-top:20rpx">
+        <text style="font-size:19px;margin-left:30rpx">蚂蚁积分</text>
+        <text style="margin-right:30rpx;color:#a3abb2">暂不可用</text>
+      </view>
+      <text></text>
+    </view>
+  </view>
+  <view class="zhifu">
+    <text style="color:white">支付 ￥{{prices}}</text>
+  </view>
+</view>

甲情_甲意/miniprogram/pages/zhifujiemian/zhifujiemian.js

@@ -0,0 +1,16 @@
+Page({
+  data:{
+    dingdan:[],
+    prices:'',
+  },
+  onLoad(options) {
+    const arrStr = decodeURIComponent(options.products);
+    const arr = JSON.parse(arrStr);
+    const prices = decodeURIComponent(options.prices);
+    console.log(arr,'传过来的');
+    this.setData({
+      dingdan:arr,
+      prices:prices
+    })
+  },
+});

甲情_甲意/miniprogram/pages/zhifujiemian/zhifujiemian.json

@@ -0,0 +1,5 @@
+{
+  "defaultTitle": "支付界面",
+  "usingComponents": {},
+  "styleIsolation": "apply-shared"
+}