lilishop-uniapp/pages/order/fillorder.vue

1036 lines
26 KiB
Vue

<template>
<div class="wrapper">
<!-- 选择地址 -->
<div class="address-box" @click="clickToAddress()">
<div class="user-box flex">
<div class="flex-8">
<div v-if="!address.id">请选择地址</div>
<div v-else>
<div class="user-address">
<!-- 省市区 -->
<div class="flex flex-a-c">
<span class="default" v-if="address.isDefault">默认</span>
<div
class="address-list"
v-if="address.consigneeAddressPath.length != 0"
>
<span
class="address-item"
v-for="(item, index) in address.consigneeAddressPath"
:key="index"
>
{{ item }}
</span>
</div>
</div>
<!-- 详细地址 -->
<div class="user-address-detail wes-2">
{{ address.detail }}
</div>
<!-- 姓名 手机号 -->
<div>
<span>{{ address.name }}</span>
<span class="mobile">{{ address.mobile | secrecyMobile }}</span>
</div>
</div>
</div>
</div>
<u-icon name="arrow-right" style="color: #bababa"></u-icon>
</div>
<!-- 背景 -->
<div class="bar"></div>
</div>
<!-- 开团信息 -->
<view class="group-box" v-if="isAssemble">
<view class="group-title">
<span v-if="pintuanFlage">你正在开团购买</span>
<span v-else
>为你加入仅差<span>{{ routerVal.parentOrder.toBeGroupedNum }}</span
>人的团购买</span
>
</view>
<view class="group">
<view>
<u-image
borderRadius="50%"
shape="square"
class="head-img"
width="81rpx"
height="81rpx"
:src="masterWay.face || '/static/missing-face.png'"
></u-image>
<view class="btn-one">团长</view>
</view>
<view class="line"> </view>
<view>
<!-- 如果有最后一名,显示最后一名,没有最后一名,显示等待参团 -->
<u-image
class="head-img"
v-if="endWay.face"
:src="endWay.face"
borderRadius="50%"
shape="square"
width="81rpx"
height="81rpx"
>
<view slot="loading"></view>
</u-image>
<u-image
class="head-img"
borderRadius="50%"
shape="square"
v-else
width="81rpx"
height="81rpx"
:src="endWay.face || '/static/missing-face.png'"
></u-image>
<view class="wait">{{ endWay.nickname || "等待参团" }}</view>
</view>
</view>
</view>
<!-- 店铺商品信息 -->
<div
class="box box2"
v-for="(item, index) in orderMessage.cartList"
:key="index"
>
<div v-if="item.checked">
<div @click="navigateToStore(item)">
<div class="store-name">
<span>{{ item.storeName }}</span>
</div>
</div>
<div class="promotionNotice">{{ item.promotionNotice || "" }}</div>
<div
class="flex goods-item"
v-for="(val, i) in item.checkedSkuList"
:key="i"
>
<div
class="goods-image"
@click="
navigateTo(
'/pages/product/goods?id=' +
val.goodsSku.id +
'&goodsId=' +
val.goodsSku.goodsId
)
"
:span="3"
>
<u-image
borderRadius="10rpx"
width="200rpx"
height="200rpx"
:src="val.goodsSku.thumbnail"
alt
/>
</div>
<div
@click="
navigateTo(
'/pages/product/goods?id=' +
val.goodsSku.id +
'&goodsId=' +
val.goodsSku.goodsId
)
"
class="goods-detail"
>
<div class="flex">
<p class="goods-name">{{ val.goodsSku.goodsName }}</p>
<span class="nums">x{{ val.num }}</span>
</div>
<p class="goods-prices">
<span>¥</span>
<span class="goods-price">{{
$options.filters.goodsFormatPrice(val.goodsSku.price)[0]
}}</span>
<span>.{{ $options.filters.goodsFormatPrice(val.goodsSku.price)[1] }}</span>
</p>
</div>
</div>
<u-row>
<u-col :offset="0" :span="4">发票信息</u-col>
<u-col
:span="8"
class="tipsColor"
textAlign="right"
@click.native="invoice()"
>
<span v-if="receiptList"
>{{ receiptList.receiptTitle }} -
{{ receiptList.receiptContent }}</span
>
<span v-else>不开发票</span>
</u-col>
</u-row>
<u-row>
<u-col
v-if="orderMessage.cartTypeEnum != 'VIRTUAL'"
:offset="0"
:span="9"
@click="shippingFlag = true"
>配送
</u-col>
<u-col
v-if="orderMessage.cartTypeEnum != 'VIRTUAL'"
:span="3"
textAlign="right"
@click="shippingFlag = true"
>
{{
shippingMethod.find((e) => {
return e.value == shippingText;
}).label
}}
</u-col>
</u-row>
<u-row>
<u-col :offset="0" :span="4" class="tl" style="text-align: left"
>备注信息</u-col
>
<u-col :span="8" textAlign="right">
<u-input
style="text-align: right"
class="uinput"
v-model="remarkVal[index].remark"
/>
</u-col>
</u-row>
</div>
</div>
<!-- 发票信息 -->
<invoices
:res="receiptList"
@callbackInvoice="callbackInvoice"
v-if="invoiceFlag"
/>
<u-select v-model="shippingFlag" :list="shippingMethod"></u-select>
<div class="box box5" v-if="orderMessage.priceDetailDTO">
<div>
<u-row>
<u-col :span="9">商品合计</u-col>
<u-col :span="3" textAlign="right">
<span
>¥{{ orderMessage.priceDetailDTO.goodsPrice | unitPrice }}</span
>
</u-col>
</u-row>
</div>
<div>
<u-row>
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="7"
>运费</u-col
>
<u-col
v-if="orderMessage.cartTypeEnum != 'VIRTUAL'"
:span="5"
class="tr tipsColor"
textAlign="right"
>
<span v-if="orderMessage.priceDetailDTO.freightPrice == 0"
>包邮</span
>
<span v-else
>¥{{
orderMessage.priceDetailDTO.freightPrice | unitPrice
}}</span
>
</u-col>
</u-row>
</div>
<u-row>
<u-col :offset="0" :span="9" @click="GET_Discount()">优惠券</u-col>
<u-col
:span="3"
v-if="
orderMessage.priceDetailDTO &&
orderMessage.priceDetailDTO.couponPrice
"
textAlign="right"
@click="GET_Discount()"
>
<span class="main-color"
>-¥{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</span
>
</u-col>
<!-- orderMessage.priceDetailDTO.couponPrice | unitPrice -->
<u-col :span="3" v-else textAlign="right" @click="GET_Discount()">
{{ orderMessage.canUseCoupons.length || "0" }} 张可用
<u-icon name="arrow-right"></u-icon>
</u-col>
</u-row>
<div>
<u-row>
<u-col :span="9">优惠金额</u-col>
<u-col
:span="3"
textAlign="right"
v-if="orderMessage.priceDetailDTO.couponPrice"
>
<span class="main-color">
-¥{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</span
></u-col
>
<u-col :span="3" textAlign="right" v-else>0.00</u-col>
</u-row>
</div>
<div>
<u-row>
<u-col :span="6"></u-col>
<u-col :span="6" class="tr tipsColor" textAlign="right">
<span v-if="orderMessage.priceDetailDTO.discountPrice"
>-¥{{
orderMessage.priceDetailDTO.discountPrice | unitPrice
}}</span
>
<span v-else>0.00</span>
</u-col>
</u-row>
</div>
</div>
<!-- 配送地区没有提示 -->
<div class="notSupportFreight" v-if="notSupportFreight.length != 0">
<u-notice-bar
style="width: 100%"
:volume-icon="false"
mode="horizontal"
:list="notSupportFreightGoodsList"
>
</u-notice-bar>
</div>
<!-- 结账 -->
<div class="box6 mp-iphonex-bottom" v-if="orderMessage.priceDetailDTO">
<div class="tabbar-left">
<div v-if="!orderMessage.priceDetailDTO.payPoint" class="number">
<span>¥</span>
<span class="price">{{
$options.filters.goodsFormatPrice(orderMessage.priceDetailDTO.flowPrice)[0]
}}</span>
<span
>.{{ $options.filters.goodsFormatPrice(orderMessage.priceDetailDTO.flowPrice)[1] }}
</span>
</div>
<span v-else class="number"
><span style="margin-right: 10rpx">{{
orderMessage.priceDetailDTO.payPoint | unitPrice
}}</span
>积分</span
>
</div>
<div class="navRiv" @click="createTradeFun()">
<!-- #ifndef MP-WEIXIN -->
<div class="tabbar-right">提交订单</div>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<div class="tabbar-right">微信支付</div>
<!-- #endif -->
</div>
</div>
</div>
</template>
<script>
import * as API_Trade from "@/api/trade";
import * as API_Address from "@/api/address";
import * as API_Order from "@/api/order";
import invoices from "@/pages/order/invoice/setInvoice";
import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
export default {
onLoad: function (val) {
this.routerVal = val;
},
components: {
invoices,
},
watch: {},
data() {
return {
invoiceFlag: false, //开票开关
shippingText: "LOGISTICS",
shippingFlag: false,
shippingMethod: [
{
value: "LOGISTICS",
label: "物流",
},
],
isAssemble: false, //是否拼团
couponNums: "", //结算页面优惠券数量
selectAddressId: "",
routerVal: "",
params: {},
// 优惠劵
couponList: "",
// 已选地址
address: "",
// 发票信息
receiptList: "",
// 店铺信息
orderMessage: "",
data: "",
// 存储备注
remarkVal: [],
detail: "", //返回的所有数据
endWay: "", //最后一个参团人
masterWay: "", //团长信息
pintuanFlage: true, //是开团还是拼团
notSupportFreight: [], //不支持运费
notSupportFreightGoodsList: ["以下商品超出配送范围:"],
};
},
filters: {
/**
* 发票收据类型
*/
receiptType(type) {
switch (type) {
case "VATORDINARY":
return "增值税普通发票";
case "ELECTRO":
return "电子普通发票";
case "VATOSPECIAL":
return "增值税专用发票";
default:
return "不开发票";
}
},
},
/**
* 监听返回
*/
onBackPress(e) {
if (e.from == "backbutton") {
let routes = getCurrentPages();
let curRoute = routes[routes.length - 1].options;
routes.forEach((item) => {
if (
item.route == "pages/tabbar/cart/cartList" ||
item.route.indexOf("pages/product/goods") != -1
) {
uni.redirectTo({
url: item.route,
});
}
});
if (curRoute.addId) {
uni.reLaunch({
url: "/pages/tabbar/cart/cartList",
});
} else {
uni.navigateBack();
}
return true; //阻止默认返回行为
}
},
onShow() {
uni.showLoading({
mask: true,
});
this.getOrderList();
uni.hideLoading();
if (this.routerVal.way == "PINTUAN") {
this.isAssemble = true;
this.routerVal.parentOrder = JSON.parse(
decodeURIComponent(this.routerVal.parentOrder)
);
this.pintuanWay();
}
},
mounted() {},
methods: {
//发票回调 选择发票之后刷新购物车
async callbackInvoice(val) {
this.invoiceFlag = false;
this.receiptList = val;
if (val) {
let submit = {
way: this.routerVal.way,
...this.receiptList,
};
let receipt = await API_Order.getReceipt(submit);
if (receipt.data.success) {
this.shippingFlag = false;
this.getOrderList();
}
}
},
// 跳转到店铺
navigateToStore(val) {
uni.navigateTo({
url: "/pages/product/shopPage?id=" + val.storeId,
});
},
// 点击跳转地址
clickToAddress() {
this.navigateTo(
`/pages/mine/address/address?from=cart&way=${
this.routerVal.way
}&parentOrder=${encodeURIComponent(
JSON.stringify(this.routerVal.parentOrder)
)}`
);
},
// 判断团长以及团员信息
pintuanWay() {
const { memberId } = this.routerVal.parentOrder;
const userInfo = this.$options.filters.isLogin();
if (memberId) {
this.endWay = userInfo;
this.masterWay = this.routerVal.parentOrder;
this.pintuanFlage = false;
} else {
this.pintuanFlage = true;
this.masterWay = userInfo;
}
},
// 判断发票
invoice() {
this.invoiceFlag = true;
},
// 领取优惠券
GET_Discount() {
// 循环店铺id,商品id获取优惠券
let store = [];
let skus = [];
let selectedCoupon = [];
if (this.orderMessage.platformCoupon)
selectedCoupon.push(this.orderMessage.platformCoupon.memberCoupon.id);
if (
this.orderMessage.storeCoupons &&
Object.keys(this.orderMessage.storeCoupons)[0]
) {
let storeMemberCouponsId = Object.keys(
this.orderMessage.storeCoupons
)[0];
let storeCouponId =
this.orderMessage.storeCoupons[storeMemberCouponsId].memberCoupon.id;
selectedCoupon.push(storeCouponId);
}
this.orderMessage.cartList.forEach((item) => {
item.skuList.forEach((sku) => {
store.push(sku.storeId);
skus.push(sku.goodsSku.id);
});
});
store = Array.from(new Set(store));
skus = Array.from(new Set(skus));
uni.setStorage({
key: "totalPrice",
data: this.orderMessage.priceDetailDTO.goodsPrice,
});
this.navigateTo(
`/pages/cart/coupon/index?way=${this.routerVal.way}&storeId=${store}&skuId=${skus}&selectedCoupon=${selectedCoupon}`
);
},
/**
* 跳转
*/
navigateTo(url) {
uni.navigateTo({
url,
});
},
/**
* 提交订单准备支付
*/
// 创建订单
createTradeFun() {
// 防抖
this.$u.throttle(() => {
if (!this.address.id) {
uni.showToast({
title: "请选择地址",
duration: 2000,
icon: "none",
});
return false;
}
// 创建订单
let client;
// #ifdef H5
client = "H5";
// #endif
// #ifdef MP-WEIXIN
client = "WECHAT_MP";
// #endif
// #ifdef APP-PLUS
client = "APP";
// #endif
let submit = {
client,
way: this.routerVal.way,
remark: this.remarkVal,
parentOrderSn: "",
};
// 如果是拼团并且当前用户不是团长
this.routerVal.parentOrder && this.routerVal.parentOrder.orderSn
? (submit.parentOrderSn = this.routerVal.parentOrder.orderSn)
: delete submit.parentOrderSn;
/**
* 创建订单
*/
API_Trade.createTrade(submit).then((res) => {
if (res.data.success) {
uni.showToast({
title: "创建订单成功!",
duration: 2000,
icon: "none",
});
// 如果当前价格为0跳转到订单列表
if (this.orderMessage.priceDetailDTO.billPrice == 0) {
uni.redirectTo({
url: "/pages/order/myOrder?status=0",
});
} else {
// #ifdef MP-WEIXIN
// 微信小程序中点击创建订单直接开始支付
this.pay(res.data.result.sn);
// #endif
// #ifndef MP-WEIXIN
this.navigateTo(
`/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
);
// #endif
}
} else {
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
});
}
});
}, 3000);
},
/**
* 微信小程序中直接支付
*/
async pay(sn) {
new LiLiWXPay({
sn: sn,
price: this.orderMessage.priceDetailDTO.billPrice,
}).pay();
},
/**
* 获取用户地址
*/
getUserAddress() {
// 如果没有商品选择地址的话 则选择 默认地址
API_Address.getAddressDefault().then((res) => {
if (res.data.result) {
res.data.result.consigneeAddressPath =
res.data.result.consigneeAddressPath.split(",");
this.address = res.data.result;
}
});
},
// 获取结算参数
getOrderList() {
this.notSupportFreight = [];
// 获取结算参数
API_Trade.getCheckoutParams(this.routerVal.way).then((res) => {
if (
!res.data.result.checkedSkuList ||
res.data.result.checkedSkuList.length === 0
) {
uni.switchTab({
url: "/pages/tabbar/cart/cartList",
});
}
if (res.data.result.skuList.length <= 0) {
uni.redirectTo({
url: "/pages/order/myOrder?status=0",
});
}
res.data.result.cartList.forEach((item, index) => {
this.remarkVal[index] = {
remark: item.remark,
storeId: item.storeId,
};
});
this.orderMessage = res.data.result;
/**
* 为了避免路径传值在h5中超出限制问题
* 这块将可用的优惠券以及不可用的优惠券放入到vuex里面进行存储
*/
this.$store.state.canUseCoupons = res.data.result.canUseCoupons;
this.$store.state.cantUseCoupons = res.data.result.cantUseCoupons;
if (!res.data.result.memberAddress.id) {
// 获取会员默认地址
this.getUserAddress();
} else {
this.address = res.data.result.memberAddress;
res.data.result.memberAddress.consigneeAddressPath =
res.data.result.memberAddress.consigneeAddressPath.split(",");
}
if (
res.data.result.notSupportFreight &&
res.data.result.notSupportFreight.length != 0
) {
this.notSupportFreight = res.data.result.notSupportFreight;
res.data.result.notSupportFreight.forEach((item) => {
this.notSupportFreightGoodsList[0] += item.goodsSku.goodsName;
});
}
});
},
//
},
};
</script>
<style scoped>
page {
background: #ededed !important;
}
</style>
<style scoped lang="scss">
.flex-8 {
flex: 8;
}
.main-color {
font-weight: bold;
}
.uinput {
/deep/ input {
text-align: right;
}
}
.promotionNotice {
font-size: 24rpx;
margin: 20rpx 0;
color: $aider-light-color;
}
.nums {
flex: 2;
color: $light-color;
text-align: center;
}
.wait {
font-size: 22rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
color: #cccccc;
text-align: center;
}
.line {
margin-left: 14rpx;
margin-right: 14rpx;
margin-bottom: 50rpx;
width: 143rpx;
border-bottom: 2px dotted #999;
}
.tabbar-left {
margin-left: 32rpx;
}
.btn-one,
.wait {
margin-top: 14rpx;
}
.btn-one {
width: 100rpx;
height: 40rpx;
background: $light-color;
border-radius: 20rpx;
font-size: 22rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: left;
color: #ffffff;
text-align: center;
line-height: 40rpx;
}
.head-img {
width: 81rpx;
height: 81rpx;
margin: 0 auto;
}
.group-title {
text-align: center;
font-size: 28rpx;
font-weight: 400;
color: $light-color;
}
.group-box {
height: 242rpx;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #fff;
}
.group {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.tr {
text-align: right;
}
.tl {
text-align: left;
}
/deep/ .u-col-3 {
text-align: right;
}
.bar {
height: 4rpx;
overflow: hidden;
width: 100%;
background: url("@/pages/order/imgs/line.png") no-repeat;
}
.box2 {
margin-top: 20rpx;
}
.notSupportFreight {
position: fixed;
bottom: calc(100rpx + env(safe-area-inset-bottom));
// #ifdef H5
bottom: 100rpx;
// #endif
display: flex;
align-items: center;
left: 0;
background: #fdf6ec;
height: 100rpx;
width: 100%;
transition: 0.35s;
> .tips {
margin: 0 32rpx;
}
}
/deep/ .u-notice-bar-wrap {
width: 100% !important;
}
.box6 {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
overflow: hidden;
line-height: 100rpx;
margin-bottom: 0px !important;
background: #fff;
color: #333;
display: flex;
justify-content: space-between;
}
.tabbar-right {
margin-top: 10rpx;
height: 80rpx;
color: #fff;
line-height: 80rpx;
background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
padding: 0 44rpx;
text-align: center;
border-radius: 400px;
margin-right: 32rpx;
}
.sp_tag {
display: inline;
background: #f2f2f2;
padding: 0 20rpx 0 10rpx;
height: 20rpx;
line-height: 20rpx;
font-size: 24rpx;
color: #262626;
border-radius: 0.4em;
}
.goods-promotion {
float: left;
width: 75%;
margin: 4rpx 0;
}
.sp_tag_plain {
margin-left: 8rpx;
padding: 0 6rpx 0 6rpx;
background: #fff;
border: 1px solid $main-color;
font-size: 24rpx;
color: $main-color;
border-radius: 50px;
}
.sp_tag_plain:nth-of-type(1) {
margin-left: 0;
}
.goods-name {
flex: 8;
font-size: 28rpx;
}
.sp_type {
color: $u-tips-color;
padding: 8rpx 0;
font-size: 24rpx;
}
.number {
color: $main-color;
font-size: 26rpx;
font-weight: bold;
> span {
font-size: 36rpx;
}
}
.goods-prices {
margin: 10rpx 0;
color: $main-color;
font-size: 28rpx;
font-weight: bold;
> .goods-price {
font-size: 38rpx;
padding: 0 2rpx;
}
}
.box {
border-radius: 40rpx;
overflow: hidden;
background: #fff;
margin-bottom: 20rpx;
color: #666;
padding: 0 32rpx;
}
.wrapper {
height: auto;
background: #f7f7f7;
padding-bottom: 200rpx;
overflow: auto !important;
}
.store-name {
margin-top: 32rpx;
font-weight: 400;
color: #333333;
}
/deep/ .u-col {
padding: 36rpx 0 !important;
}
/deep/ .u-col-3,
.tipsColor {
color: #333;
}
.goods-image {
text-align: left;
overflow: hidden;
}
.default {
background: $main-color;
font-size: 24rpx;
border-radius: 8rpx;
padding: 0rpx 12rpx;
color: #fff;
margin-right: 20rpx;
}
.address-box {
border-radius: 40rpx;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
overflow: hidden;
background: #fff;
margin-bottom: 20rpx;
color: #666;
}
.address-item {
font-weight: normal;
letter-spacing: 1rpx;
}
.user-box {
padding: 32rpx;
}
.user-address-detail {
color: #333;
font-size: 38rpx;
font-weight: bold;
margin: 20rpx 0;
letter-spacing: 1rpx;
}
.mobile {
margin-left: 20rpx;
}
.price {
font-size: 50rpx !important;
margin: 0 2rpx;
}
.goods-detail {
display: flex;
flex-direction: column;
justify-content: center;
flex: 8;
margin-left: 20rpx !important;
> p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.goods-item {
margin: 20rpx 0;
}
</style>