wx/pages/shopp/components/orderForm.vue

<template>
  <view class="box">
    <!-- 选择收货地址 -->
    <view class="location">
      <view class="location-up">
        <view class="location-left">
          <view><uni-icons type="location" size="20"></uni-icons></view>
          <view>请选择收货地址</view>
        </view>
        <view class="location-right">
          <view>切换</view>
          <view><uni-icons type="right" size="20"></uni-icons></view>
        </view>
      </view>
      <view class="location-bottom">
        <view>配送方式</view>
        <view>送货上门</view>
      </view>
    </view>
    <!-- 商品详情 -->
    <view class="commodity">
      <view class="commodity-text">
        <view class="commodity-text-img">
          <image class="image" src="@/static/logo.png"></image>
        </view>
        <view class="commodity-text-text">
          <view style="font-size: 1.1rem; font-weight: 700; width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ order.orderName }}</view>
          <view class="commodity-text-price">
            <view>￥{{ order.orderPrice }}</view>
            <view>×1</view>
          </view>
        </view>
      </view>
      <view class="commodity-freight">
        <view class="">运费</view>
        <view class="">免运费</view>
      </view>
      <view class="commodity-price">
        <view class="">商品小计</view>
        <view class="">￥9899.00</view>
      </view>
    </view>
    <!-- 订单 -->
    <view class="remark">
      <view style="margin-left: 1rem">备注</view>
      <input style="margin-left: 0.2rem" type="text" placeholder="请填写备注信息" />
    </view>
    <!-- 提交订单 -->
    <view class="buttom">
      <view class="buttom-box">
        <view style="font-size: 0.8rem">
          实付款:
          <text style="color: #2b9939">￥</text>
          <text style="font-size: 1.2rem; color: #2b9939">9899.00</text>
        </view>
        <view @click="orderForm" class="buttom-box-bt">提交订单</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { APIPostCreateOrder, APIGetpayment } from '@/api/order/index.js';
uni.getStorage({
  key: 'storage_uid',
  success(res) {
    order.value.uid = res.data;
  }
});
//获取数据
const order = ref({
  orderName: '',
  orderPrice: '',
  orderNum: '1',
  odAddress: '哈尔滨绥化',
  uid: ''
});
//生成订单
const orderForm = async () => {
  const res = await APIPostCreateOrder(order.value);
  Getpayment(res.data.oderNo);
};
// 支付订单
const Getpayment = async (oderNo) => {
  const res = await APIGetpayment(oderNo);
  wx(res.data);
};
// 微信支付
const wx = async (data) => {
  // 仅作为示例，非真实参数信息。
  uni.requestPayment({
    provider: 'wxpay',
    timeStamp: String(data.timeStamp),
    nonceStr: data.nonceStr,
    package: data.packageValue,
    signType: 'RSA',
    paySign: data.paySign,
    success: function (res) {
      console.log('success:' + JSON.stringify(res));
    },
    fail: function (err) {
      console.log('fail:' + JSON.stringify(err));
    }
  });
};
onLoad((option) => {
  order.value.orderName = option.name;
  order.value.orderPrice = option.price;
});
</script>

<style lang="scss">
.box {
  height: 90vh;
}
.location {
  width: 83%;
  margin: 0.5rem auto;
  padding: 0.5rem 0.8rem;
  background-color: #fff;
  border-radius: 0.5rem;

  .location-up {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #000;
    padding-bottom: 0.8rem;
    .location-left {
      display: flex;
    }
    .location-right {
      display: flex;
    }
  }
  .location-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
  }
}
.commodity {
  width: 83%;
  margin: 0 auto;
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  .commodity-text {
    display: flex;
    align-items: flex-start;
    .commodity-text-img {
      .image {
        width: 5rem;
        height: 5rem;
      }
    }
    .commodity-text-text {
      margin-left: 0.8rem;
      .commodity-text-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 2rem;
        width: 14rem;
      }
    }
  }
  .commodity-freight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
  }
  .commodity-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
  }
}
.remark {
  width: 92%;
  background-color: #fff;
  margin: 0.5rem auto;
  padding: 0.8rem 0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
}
.buttom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 4rem;
  background-color: #fff;
  line-height: 4rem;
  .buttom-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .buttom-box-bt {
    background-color: #2b9939;
    color: #fff;
    height: 2rem;
    line-height: 2rem;
    padding: 0.2rem 1.2rem;
    border-radius: 3rem;
  }
}
</style>