first commit
This commit is contained in:
云泽网
@@ -0,0 +1,788 @@
|
||||
// +---------------------------------------------------------------------- // |
|
||||
likeshop开源商城系统 //
|
||||
+---------------------------------------------------------------------- // |
|
||||
欢迎阅读学习系统程序代码，建议反馈是我们前进的动力 // |
|
||||
gitee下载：https://gitee.com/likeshop_gitee // |
|
||||
github下载：https://github.com/likeshop-github // |
|
||||
访问官网：https://www.likeshop.cn // | 访问社区：https://home.likeshop.cn // |
|
||||
访问手册：http://doc.likeshop.cn // | 微信公众号：likeshop技术社区 // |
|
||||
likeshop系列产品在gitee、github等公开渠道开源版本可免费商用，未经许可不能去除前后端官方版权标识
|
||||
// |
|
||||
likeshop系列产品收费版本务必购买商业授权，购买去版权授权后，方可去除前后端官方版权标识
|
||||
// | 禁止对系统程序代码以任何目的，任何形式的再发布 // |
|
||||
likeshop团队版权所有并拥有最终解释权 //
|
||||
+---------------------------------------------------------------------- // |
|
||||
author: likeshop.cn.team //
|
||||
+----------------------------------------------------------------------
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<navbar title="订单详情"></navbar>
|
||||
<view class="order-details">
|
||||
<view class="header-bg"></view>
|
||||
<view class="main">
|
||||
<view class="header">
|
||||
<view class="item" v-if="orderDetail.order_status == 0">
|
||||
<view class="white lg mb10">等待买家付款</view>
|
||||
<view
|
||||
class="white sm row"
|
||||
style="line-height: 26rpx"
|
||||
v-if="cancelTime > 0"
|
||||
>支付剩余
|
||||
<u-count-down
|
||||
separator="zh"
|
||||
:timestamp="cancelTime"
|
||||
separator-color="#fff"
|
||||
color="#fff"
|
||||
:separator-size="26"
|
||||
:font-size="26"
|
||||
bg-color="transparent"
|
||||
></u-count-down>
|
||||
自动关闭</view
|
||||
>
|
||||
</view>
|
||||
<template v-if="orderDetail.delivery_type == 1">
|
||||
<view class="item" v-if="orderDetail.order_status == 1">
|
||||
<view class="white lg mb10">等待商家发货</view>
|
||||
<view class="white sm">您的商品正在打包中，请耐心等待…</view>
|
||||
</view>
|
||||
<view class="item" v-if="orderDetail.order_status == 2">
|
||||
<view class="white lg mb10">已发货</view>
|
||||
<view class="white sm">您的商品正在路中，请耐心等待…</view>
|
||||
</view>
|
||||
<view class="item" v-if="orderDetail.order_status == 3">
|
||||
<view class="white lg mb10">已完成</view>
|
||||
<view class="white sm">商品已签收，期待再次购买！</view>
|
||||
</view>
|
||||
<view class="item" v-if="orderDetail.order_status == 4">
|
||||
<view class="white lg mb10">订单已关闭</view>
|
||||
<!-- <view class="white sm">原因：超时未支付</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="orderDetail.delivery_type == 2">
|
||||
<view class="item" v-if="orderDetail.order_status == 1">
|
||||
<view class="white lg mb10">待取货</view>
|
||||
<view class="white sm">请前往指定门店取货</view>
|
||||
</view>
|
||||
<view class="item" v-if="orderDetail.order_status == 3">
|
||||
<view class="white lg mb10">已完成</view>
|
||||
<view class="white sm">交易已完成，感谢您的购买！</view>
|
||||
</view>
|
||||
<view class="item" v-if="orderDetail.order_status == 4">
|
||||
<view class="white lg mb10">订单已关闭</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 快递配送 -->
|
||||
<view
|
||||
v-if="orderDetail.delivery_type == 1"
|
||||
class="receiving-card contain"
|
||||
@click="onAddressExpress"
|
||||
>
|
||||
<u-image
|
||||
class="icon-md mr20"
|
||||
width="44"
|
||||
height="44"
|
||||
src="/static/images/icon_address.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="receiving-content">
|
||||
<view class="md black bold">
|
||||
<text>{{ orderDetail.consignee }}</text>
|
||||
<text class="ml10">{{ orderDetail.mobile }}</text>
|
||||
</view>
|
||||
<view class="xs black mt10">{{
|
||||
orderDetail.delivery_address
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 门店自提 -->
|
||||
<view
|
||||
v-if="orderDetail.delivery_type == 2"
|
||||
class="receiving-card contain"
|
||||
>
|
||||
<u-image
|
||||
class="icon-md mr20"
|
||||
width="44"
|
||||
height="44"
|
||||
src="/static/images/icon_address.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="receiving-content">
|
||||
<text class="md black bold">{{
|
||||
orderDetail.selffetch_shop.name
|
||||
}}</text>
|
||||
<text class="xs black mt10">{{
|
||||
orderDetail.selffetch_shop.shop_address
|
||||
}}</text>
|
||||
<text class="xs muted mt10">
|
||||
<text>营业时间：</text>
|
||||
<text
|
||||
>{{ orderDetail.selffetch_shop.business_start_time }} -
|
||||
{{ orderDetail.selffetch_shop.business_end_time }}</text
|
||||
>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 扫码收货 -->
|
||||
<view v-if="orderDetail.delivery_type == 2" class="contain receive">
|
||||
<view v-if="orderDetail.verification_status" class="delivery--die">
|
||||
<u-image
|
||||
src="/static/images/delivery_die.png"
|
||||
width="134"
|
||||
height="98"
|
||||
mode="scaleFill"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="receive-qr" v-if="showQRSelffetch">
|
||||
<text class="xs lighter">请凭二维码取货</text>
|
||||
<view
|
||||
class="mt20 qr-contain"
|
||||
:class="{ 'qr-contain--die': orderDetail.verification_status }"
|
||||
ref="qr-image"
|
||||
>
|
||||
<tki-qrcode
|
||||
ref="qrcode"
|
||||
uni="px"
|
||||
:val="orderDetail.pickup_code"
|
||||
:size="118 * 2"
|
||||
:showLoading="false"
|
||||
/>
|
||||
</view>
|
||||
<view class="mt30 xs black qr-code"
|
||||
>提货码：{{ orderDetail.pickup_code }}</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="nr receive-info">
|
||||
<view class="receive-info-item">
|
||||
<text class="normal">提货人</text>
|
||||
<text class="black">{{ orderDetail.consignee }}</text>
|
||||
</view>
|
||||
<view class="receive-info-item">
|
||||
<text class="normal">联系方式</text>
|
||||
<text class="black">{{ orderDetail.mobile }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods contain" style="margin-bottom: 0">
|
||||
<view class="status row-between" v-if="team.status != null">
|
||||
<view>拼团状态</view>
|
||||
<view
|
||||
:style="
|
||||
'padding: 6rpx 26rpx; ' +
|
||||
(team.status == 2 && 'background-color: #d7d7d7')
|
||||
"
|
||||
class="bg-primary br60 white sm"
|
||||
>
|
||||
{{ teamStatus(team.status) }}
|
||||
</view>
|
||||
</view>
|
||||
<order-goods
|
||||
:team="team"
|
||||
:link="true"
|
||||
:list="orderDetail.order_goods"
|
||||
:order_type="orderDetail.order_type"
|
||||
></order-goods>
|
||||
</view>
|
||||
|
||||
<view class="price contain" style="border-radius: 0rpx 14rpx">
|
||||
<view class="row-between" v-if="priceShow">
|
||||
<view>商品总价</view>
|
||||
<view class="black">
|
||||
<price-format :price="orderDetail.goods_price"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row-between" v-if="priceShow">
|
||||
<view>运费</view>
|
||||
<view class="black"
|
||||
>+
|
||||
<price-format :price="orderDetail.shipping_price"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="orderDetail.discount_amount != 0 && priceShow"
|
||||
class="row-between"
|
||||
>
|
||||
<view>优惠券</view>
|
||||
<view class="primary"
|
||||
>-
|
||||
<price-format :price="orderDetail.discount_amount"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="orderDetail.integral_amount != 0 && priceShow"
|
||||
class="row-between"
|
||||
>
|
||||
<view>积分抵扣</view>
|
||||
<view class="primary"
|
||||
>-
|
||||
<price-format :price="orderDetail.integral_amount"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row-between">
|
||||
<view class="">
|
||||
<text v-if="orderDetail.order_status === 0">需</text>
|
||||
<text v-else>实</text>
|
||||
付款：
|
||||
</view>
|
||||
<view class="primary xl">
|
||||
<price-format
|
||||
:first-size="34"
|
||||
:second-size="34"
|
||||
:price="orderDetail.order_amount"
|
||||
>
|
||||
</price-format>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="row-center muted"
|
||||
style="padding: 40rpx 0"
|
||||
@click="priceShow = !priceShow"
|
||||
>
|
||||
<view>
|
||||
<text class="mr10" v-if="priceShow"> 收起 </text>
|
||||
<text class="mr10" v-else> 查看更多 </text>
|
||||
|
||||
<u-icon name="arrow-up" v-if="priceShow" />
|
||||
<u-icon name="arrow-down" v-else />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-info contain">
|
||||
<view class="item row" style="align-items: flex-start">
|
||||
<view class="title">买家留言</view>
|
||||
<view class="black">{{ orderDetail.user_remark || "无" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-info contain">
|
||||
<view class="item row">
|
||||
<view class="title">订单编号</view>
|
||||
<view class="black">{{ orderDetail.order_sn }}</view>
|
||||
</view>
|
||||
<view class="item row">
|
||||
<view class="title">订单类型</view>
|
||||
<view class="black">{{ orderDetail.order_type_desc }}</view>
|
||||
</view>
|
||||
<view class="item row">
|
||||
<view class="title">支付方式</view>
|
||||
<view class="black">{{ orderDetail.pay_way_text }}</view>
|
||||
</view>
|
||||
<view class="item row">
|
||||
<view class="title">下单时间</view>
|
||||
<view class="black">{{ orderDetail.create_time }}</view>
|
||||
</view>
|
||||
<view v-if="orderDetail.pay_time" class="item row">
|
||||
<view class="title">付款时间</view>
|
||||
<view class="black">{{ orderDetail.pay_time }}</view>
|
||||
</view>
|
||||
<view v-if="orderDetail.shipping_time" class="item row">
|
||||
<view class="title">发货时间</view>
|
||||
<view class="black">{{ orderDetail.shipping_time }}</view>
|
||||
</view>
|
||||
<view v-if="orderDetail.confirm_take_time" class="item row">
|
||||
<view class="title">成交时间</view>
|
||||
<view class="black">{{ orderDetail.confirm_take_time }}</view>
|
||||
</view>
|
||||
<view v-if="orderDetail.cancel_time" class="item row">
|
||||
<view class="title">关闭时间</view>
|
||||
<view class="black">{{ orderDetail.cancel_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="footer bg-white row fixed"
|
||||
v-if="
|
||||
orderDetail.cancel_btn ||
|
||||
orderDetail.delivery_btn ||
|
||||
orderDetail.take_btn ||
|
||||
orderDetail.del_btn ||
|
||||
orderDetail.pay_btn
|
||||
"
|
||||
>
|
||||
<view style="flex: 1"></view>
|
||||
<view v-if="orderDetail.cancel_btn">
|
||||
<button
|
||||
size="sm"
|
||||
class="plain br60"
|
||||
hover-class="none"
|
||||
@tap="cancelOrder"
|
||||
>
|
||||
取消订单
|
||||
</button>
|
||||
</view>
|
||||
<navigator
|
||||
v-if="orderDetail.delivery_btn"
|
||||
hover-class="none"
|
||||
:url="
|
||||
'/bundle/pages/goods_logistics/goods_logistics?id=' +
|
||||
orderDetail.id
|
||||
"
|
||||
>
|
||||
<button size="sm" class="plain br60" hover-class="none">
|
||||
查看物流
|
||||
</button>
|
||||
</navigator>
|
||||
<view v-if="orderDetail.take_btn" class="ml20">
|
||||
<button
|
||||
size="sm"
|
||||
class="plain br60 primary red"
|
||||
hover-class="none"
|
||||
@tap.stop="comfirmOrder"
|
||||
>
|
||||
确认收货
|
||||
</button>
|
||||
</view>
|
||||
<view v-if="orderDetail.del_btn">
|
||||
<button
|
||||
size="sm"
|
||||
class="plain br60"
|
||||
hover-class="none"
|
||||
@tap="delOrder"
|
||||
>
|
||||
删除订单
|
||||
</button>
|
||||
</view>
|
||||
<view class="ml20" v-if="orderDetail.pay_btn">
|
||||
<button size="sm" class="bg-primary br60 white" @tap="payNow">
|
||||
立即付款
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<loading-view v-if="isFirstLoading"></loading-view>
|
||||
<order-dialog
|
||||
ref="orderDialog"
|
||||
:orderId="orderDetail.id"
|
||||
:type="type"
|
||||
@refresh="onRefresh"
|
||||
></order-dialog>
|
||||
<loading-view
|
||||
v-if="showLoading"
|
||||
background-color="transparent"
|
||||
:size="50"
|
||||
></loading-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getOrderDetail,
|
||||
getwechatSyncCheck,
|
||||
getwxReceiveDetail,
|
||||
confirmOrder,
|
||||
} from "@/api/order";
|
||||
import { compareWeChatVersion } from "@/utils/tools";
|
||||
|
||||
import { prepay } from "@/api/app";
|
||||
import { wxpay, alipay } from "@/utils/pay";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderDetail: {},
|
||||
team: {},
|
||||
isFirstLoading: true,
|
||||
type: 0,
|
||||
cancelTime: 0,
|
||||
showCancel: "",
|
||||
showLoading: false,
|
||||
imageQR: "",
|
||||
priceShow: false,
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {},
|
||||
|
||||
onLoad: function (options) {
|
||||
this.id = options.id;
|
||||
this.getOrderDetailFun();
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
uni.$off("payment");
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.getOrderDetailFun();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRefresh() {
|
||||
uni.$emit("refreshorder");
|
||||
const { type } = this;
|
||||
if ([0, 2].includes(type)) {
|
||||
this.getOrderDetailFun();
|
||||
} else if (type == 1) {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
orderDialog() {
|
||||
this.$refs.orderDialog.open();
|
||||
},
|
||||
|
||||
delOrder() {
|
||||
this.type = 1;
|
||||
this.$nextTick(async () => {
|
||||
this.orderDialog();
|
||||
});
|
||||
},
|
||||
// 小程序确认收货
|
||||
comfirmReceive(transaction_id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.openBusinessView({
|
||||
businessType: "weappOrderConfirm",
|
||||
extraData: {
|
||||
transaction_id,
|
||||
},
|
||||
success({ extraData }) {
|
||||
if (extraData.status == "success") {
|
||||
resolve("确认收货");
|
||||
} else {
|
||||
resolve("取消收货");
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
//查询是否收货成功
|
||||
querycomfirmReceive(id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getwechatSyncCheck({ id })
|
||||
.then(({ data }) => {
|
||||
if (data.order.order_state === 4) {
|
||||
resolve("已确认收货");
|
||||
} else {
|
||||
reject("未确认收货");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
comfirmOrder() {
|
||||
this.type = 2;
|
||||
this.$nextTick(async () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
let res = {};
|
||||
if (this.orderDetail.pay_way === 1) {
|
||||
res = await getwechatSyncCheck({ id: this.id });
|
||||
console.log(res);
|
||||
}
|
||||
if (
|
||||
compareWeChatVersion("2.6.0") === 1 &&
|
||||
wx.openBusinessView &&
|
||||
this.orderDetail.pay_way === 1 &&
|
||||
res.data.order.order_state !== 1
|
||||
) {
|
||||
try {
|
||||
const { data } = await getwxReceiveDetail({
|
||||
order_id: this.id,
|
||||
});
|
||||
await this.comfirmReceive(data.transaction_id);
|
||||
await this.querycomfirmReceive(this.id);
|
||||
await confirmOrder(this.id);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
this.getOrderDetailFun();
|
||||
} else {
|
||||
this.orderDialog();
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
this.orderDialog();
|
||||
// #endif
|
||||
});
|
||||
},
|
||||
|
||||
cancelOrder() {
|
||||
this.type = 0;
|
||||
this.$nextTick(() => {
|
||||
this.orderDialog();
|
||||
});
|
||||
},
|
||||
|
||||
payNow() {
|
||||
uni.$on("payment", (params) => {
|
||||
setTimeout(() => {
|
||||
if (params.result) {
|
||||
this.$toast({
|
||||
title: "支付成功",
|
||||
});
|
||||
this.getOrderDetailFun();
|
||||
uni.$emit("refreshorder");
|
||||
} else {
|
||||
this.$toast({
|
||||
title: "支付失败",
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/payment/payment?from=${"order"}&order_id=${this.id}`,
|
||||
});
|
||||
},
|
||||
|
||||
getOrderDetailFun() {
|
||||
getOrderDetail(this.id)
|
||||
.then((res) => {
|
||||
if (res.code == 1) {
|
||||
this.cancelTime = res.data.order_cancel_time - Date.now() / 1000;
|
||||
this.orderDetail = res.data;
|
||||
this.team = res.data.team || {};
|
||||
this.$nextTick(() => {
|
||||
this.isFirstLoading = false;
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => uni.navigateBack(), 1500);
|
||||
}
|
||||
return res.data;
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.delivery_type === 2) {
|
||||
// 提货码
|
||||
this.$nextTick(function () {
|
||||
const refQR = this.$refs["qrcode"];
|
||||
refQR._makeCode();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
showQRSelffetch() {
|
||||
let result = false;
|
||||
|
||||
if (this.orderDetail.order_status) {
|
||||
result = true;
|
||||
}
|
||||
|
||||
if (this.orderDetail.order_type == 2) {
|
||||
this.orderDetail.team_status == 1 ? (result = true) : (result = false);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
teamStatus() {
|
||||
return (status) => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return "拼团中";
|
||||
case 1:
|
||||
return "拼团成功";
|
||||
case 2:
|
||||
return "拼团失败";
|
||||
}
|
||||
};
|
||||
},
|
||||
getOrderType() {
|
||||
return (type) => {
|
||||
switch (type) {
|
||||
case 0:
|
||||
return "普通订单";
|
||||
case 1:
|
||||
return "秒杀订单";
|
||||
case 2:
|
||||
return "拼团订单";
|
||||
case 3:
|
||||
return "砍价订单";
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.order-details {
|
||||
position: relative;
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.order-details .header-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background-color: $-color-primary;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.order-details .goods .status {
|
||||
height: 88rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.order-details .main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.order-details .contain {
|
||||
margin: 0 20rpx 20rpx;
|
||||
border-radius: 14rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.order-details .header {
|
||||
padding: 24rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.order-details .img-line {
|
||||
height: 1.5px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.order-details .address-wrap {
|
||||
height: 164rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.order-details .order-info {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
|
||||
.order-details .order-info .item {
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.order-details .order-info .item .title {
|
||||
width: 180rpx;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.order-details .price > view {
|
||||
height: 60rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.order-details .footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: content-box;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.footer .plain {
|
||||
border: 1px solid #bbbbbb;
|
||||
}
|
||||
|
||||
.footer .plain.red {
|
||||
border: 1px solid $-color-primary;
|
||||
}
|
||||
|
||||
.tips-dialog {
|
||||
height: 230rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.order-details .invite-btn {
|
||||
background: linear-gradient(270deg, #ff2c3c 0%, #f95f2f 100%);
|
||||
margin: 30rpx 26rpx 40rpx;
|
||||
}
|
||||
|
||||
.receiving-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 160rpx;
|
||||
padding: 20rpx;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.receiving-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.receive {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.delivery--die {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.receive-qr {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 460rpx;
|
||||
}
|
||||
|
||||
.qr-contain {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding: 8px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.qr-contain--die {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qr-contain--die::before {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
content: "";
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
padding: 8rpx 30rpx;
|
||||
border-radius: 60px;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.receive-info {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.receive-info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.receive-info-item:nth-child(n + 2) {
|
||||
border-top: $-dashed-border;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user