216 lines
5.1 KiB
Vue
216 lines
5.1 KiB
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>
|