You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/order/submit.vue

269 lines
5.7 KiB

3 years ago
<!--
* @Author: ch
* @Date: 2022-03-20 14:14:53
* @LastEditors: ch
3 years ago
* @LastEditTime: 2022-03-31 14:21:15
3 years ago
* @Description: file content
-->
<template>
<view>
<u-cell class="address" :title="addres.title" :label="addres.label"
:border="false" isLink @click="$Router.push('/addressList')">
<image class="address--icon" slot="icon" src="@/static/common/dz.png" />
</u-cell>
<view class="goods-group">
3 years ago
<view class="goods-group--item" v-for="item in orderInfo.products" :key="item.productId">
<image class="goods-group--item-image" mode="widthFix" :src="item.productImageUrl" />
<view >
<view class="goods-group--item-con">
3 years ago
<text class="goods-group--item-title">{{item.productName}}</text>
<text class="goods-group--item-pirce">{{item.productPrice}}</text>
</view>
<view class="goods-group--item-desc">
3 years ago
<text>{{item.skuDescribe}}</text>
<text class="goods-group--item-num">x{{item.quantity}}</text>
</view>
</view>
</view>
</view>
<view class="service">
<UiCell class="service--cell" title="配送方式" value="快递配送" :rightIcon="false"></UiCell>
<UiCell class="service--cell service--cell__last" title="买家留言" value="快递配送" :rightIcon="false">
<textarea slot="value" class="service--remark" auto-height v-model="userMessage"
maxlength="50" placeholder="填写您想要备注的信息50字以内" />
</UiCell>
</view>
<view class="play">
<text class="play--title">支付方式</text>
<radio-group>
<u-cell title="微信支付" :border="false">
<image class="play--icon" slot="icon" src="@/static/order/wx.png"/>
<radio class="play--radio" slot="right-icon" color="#FF875B"></radio>
</u-cell>
<u-cell title="支付宝支付" :border="false">
<image class="play--icon" slot="icon" src="@/static/order/zfb.png"/>
<radio class="play--radio" slot="right-icon" color="#FF875B"></radio>
</u-cell>
</radio-group>
</view>
<view class="amount">
3 years ago
<u-cell title="商品总额" :value="`¥${orderInfo.totalAmount}`" :border="false"></u-cell>
<u-cell title="运费" :value="`¥${orderInfo.shippingAmount}`" :border="false"></u-cell>
</view>
<view class="footer">
<view class="footer--total">
<text>合计</text>
3 years ago
<text class="footer--amount">{{orderInfo.payAmount}}</text>
</view>
<UiButton class="footer--btn" type="solid" @click="submit"></UiButton>
</view>
</view>
3 years ago
</template>
<script>
import UiCell from '@/components/UiCell';
3 years ago
import {ApiPostSubmitOrder, ApiPostWxPay, ApiGetBeforeOrder} from '@/common/api/order';
import UiButton from '@/components/UiButton.vue';
export default {
components : {UiCell, UiButton },
data(){
return {
addres : {
title : '选择收货地址',
label : '陈先生 189****6782'
},
userMessage : '',
3 years ago
orderInfo : {}
}
},
3 years ago
onLoad(){
this.getBeforeOrder();
},
methods:{
/**
* 获取预订单信息将要提交的订单信息
*/
3 years ago
async getBeforeOrder(){
const query = this.$Route.query;
let apiParams = {};
// 购物车结算
if(query.mode === 'cart'){
apiParams.productIds = query.ids;
}
// 立即购买
if(query.mode === 'buyNow'){
apiParams.productSkuId = parseInt(query.skuId);
apiParams.quantity = query.num;
}
const {error, result} = await ApiGetBeforeOrder(apiParams);
if(error){
uni.$u.toast(error.message);
return false;
}
this.orderInfo = result;
},
/**
* 提交订单
*/
async submit(){
const {error, result} = await ApiPostSubmitOrder({
orderSource : 2,
recipientAddressId : 1,
products : this.goodsData.map(i => ({
productId : i.productId,
productSkuId : i.productSkuId,
quantity : i.quantity
})),
userMessage : this.userMessage
});
if(error){
uni.$u.totas(error.message);
return false;
}
this.wxpay(result.orderId);
},
async wxpay(orderId){
const {error, result} = await ApiPostWxPay({orderId});
}
}
}
3 years ago
</script>
<style lang="scss" scoped>
page{
background: #f8f8f8;
padding-bottom: 140rpx;
}
.address{
background: #fff;
&--icon{
width: 34rpx;
height: 34rpx;
margin-right: 30rpx;
}
}
.goods-group{
background: #fff;
margin: 20rpx 0;
&--item{
display: flex;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1px solid #eee;
&-image{
width: 180rpx;
height: 180rpx;
margin-right: 30rpx;
}
&-con{
width: 510rpx;
display: flex;
justify-content: space-between;
font-size: 28rpx;
color: #333;
line-height: 39rpx;
}
&-title{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
&-pirce{
font-size: 22rpx;
margin-left: 60rpx;
}
&-desc{
width: 510rpx;
font-size: 24rpx;
color: #999;
margin-top: 20rpx;
line-height: 39rpx;
display: flex;
justify-content: space-between;
}
&-num{
font-size: 28rpx;
margin-left: 60rpx;
}
}
}
.service{
background: #fff;
margin: 20rpx 0;
&--cell{
padding: 0 30rpx;
&__last{
border: 0;
}
}
&--remark{
font-size: 28rpx;
width: 500rpx;
text-align: right;
}
}
.play{
background: #fff;
margin: 20rpx 0;
&--title{
font-size: 28rpx;
padding: 30rpx;
display: block;
}
&--icon{
width: 39rpx;
height: 39rpx;
margin-right: 20rpx;
}
&--radio{
transform: scale(70%);
}
}
.amount{
background: #fff;
}
.footer{
display: flex;
align-items: center;
justify-content: space-between;
height: 120rpx;
background: #fff;
padding: 0 30rpx;
position: fixed;
bottom: 0;
right: 0;
left: 0;
&--total{
color: #666;
font-size: 24rpx;
display: flex;
align-items: center;
}
&--amount{
font-size: 32rpx;
color: #FF512B;
margin-left: 10rpx;
}
&--btn{
margin: 0;
}
}
3 years ago
</style>