123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507 |
- <template>
- <view class="success" :style="{ background: `url(${bgImg}) #F4F5F9` }">
- <view class="success_status">
- <view class="status flex aic">
- <view class="status_text">{{ orderInfo.paymentStatus | orderStatus }}</view>
- </view>
- </view>
- <view class="success_content">
- <view class="success_info">
- <view class="">
- <view class="success_item flex jcsb aic">
- <view class="flex aic">
- <view class="label">收件地址</view>
- <text class="bold">{{ orderInfo.email }}</text>
- </view>
- <!-- <view class="success_btn" @click="copyText()">复制</view>-->
- </view>
- <view class="success_item flex aic">
- <view class="label">收件人</view>
- <text>{{ orderInfo.recipientName }}({{ orderInfo.contactPhone }})</text>
- </view>
- <view v-if="orderInfo.completedLink" class="success_item flex aic">
- <view class="label">拍摄视频地址</view>
- <u-link :href="baiduLink" text="百度云盘链接" @click="click"></u-link>
- <view class="copy" @click="copyText(orderInfo.completedLink)">复制</view>
- </view>
- </view>
- </view>
- <view class="line" :style="{ background: `url(${successImg}) no-repeat` }">
- <view class="line-circle"></view>
- </view>
- <view class="detail">
- <view class="detail_item flex aic jcsb">
- <text>订单金额</text>
- <view class="datas flex">
- <text>{{ orderInfo.totalAmount }}元</text>
- </view>
- </view>
- <view class="detail_item flex aic jcsb" @click="goCase">
- <text>套餐名称</text>
- <view class="datas flex">
- <text>{{ orderInfo.packageName }}</text>
- <!-- <view class="copy">详情</view> -->
- </view>
- </view>
- <view class="detail_item flex aic jcsb">
- <text>套餐内容</text>
- <view class="datas flex">
- <text>{{ orderInfo.quantity }}条</text>
- </view>
- </view>
- <view class="detail_item flex aic jcsb" v-if="orderInfo.paymentStatus!=='WAIT_PAYMENT'">
- <text>支付方式</text>
- <view class="datas flex">
- <text>微信支付</text>
- </view>
- </view>
- <view class="detail_item flex aic jcsb">
- <text>订单编号</text>
- <view class="datas flex">
- <text>{{ orderInfo.orderNumber }}</text>
- <view class="copy" @click="copyText(orderInfo.orderNumber)">复制</view>
- </view>
- </view>
- <view class="detail_item flex aic jcsb">
- <text>订单时间</text>
- <view class="datas flex">
- <text>{{ orderInfo.createDate }}</text>
- </view>
- </view>
- </view>
- </view>
- <view class="btns">
- <view v-if="orderInfo.paymentStatus==='WAIT_PAYMENT'" class="order-bottom-right flex">
- <view class="btn btn1 p2" @click.stop="handleCancelOrder(orderInfo.orderId)">取消</view>
- <view class="btn btn2 p1" @click.stop="submitOrder(orderInfo)">支付</view>
- </view>
- <view v-else class="order-bottom-right flex">
- <view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='WAIT_SEND'"
- @click.stop="handleCancelOrder(orderInfo.orderId)">
- 取消
- </view>
- <view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='WAIT_ORDER'"
- @click.stop="handleCancelOrder(orderInfo.orderId)">
- 取消
- </view>
- <view v-if="orderInfo.paymentStatus==='WAIT_SEND'" class="btn btn1 p2 ml-6 btn-theme">寄样</view>
- <view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='SHOOTING'"
- @click.stop="handleAftermarketOrder(orderInfo.orderId)">申请售后
- </view>
- <view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='DELIVERED'"
- @click.stop="handleAftermarketOrder(orderInfo.orderId)">申请售后
- </view>
- <view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='WAIT_CHECK'"
- @click.stop="handleAftermarketOrder(orderInfo.orderId)">申请售后
- </view>
- <view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='AFTER_SALE'"
- @click.stop="handleCancelAftermarketOrder(orderInfo.orderId)">撤回申请
- </view>
- <view class="btn btn1 p2 ml-6 btn-theme" v-if="orderInfo.paymentStatus==='WAIT_CHECK'"
- @click.stop="handleCheckOrder(orderInfo.orderId)">确认验收
- </view>
- </view>
- <view class="back" @click="goHome">返回首页</view>
- </view>
- </view>
- </template>
- <script>
- import {
- copy
- } from "@/utils/utils";
- import {
- aftermarketOrder,
- cancelAftermarketOrder,
- cancelOrder,
- checkOrder,
- getOrderDetail,
- updateOrder
- } from "../../apis/order";
- import {
- goHome
- } from "../../utils/utils";
- import {
- submitOrder
- } from "../../apis";
- export default {
- components: {},
- data() {
- return {
- orderId: '',
- orderInfo: {
- completedLink: '',
- paymentStatus: '',
- packageName: "",
- createDate: "",
- orderNumber: '',
- shootingRequirements: '',
- email: '',
- },
- bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
- payImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_paysuccess.png",
- successImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_quekou.png'
- };
- },
- onLoad(options) {
- if (options.orderId) {
- this.orderId = options.orderId;
- }
- this.getData();
- },
- computed: {
- baiduLink() {
- const linkRegex = /链接:\s*(https:\/\/pan.baidu.com\/s\/\S+)/;
- const codeRegex = /提取码:\s*(\w+)/;
- const linkMatch = this.orderInfo.completedLink.match(linkRegex);
- const codeMatch = this.orderInfo.completedLink.match(codeRegex);
- let link = "";
- let accessCode = "";
- if (linkMatch && linkMatch.length > 1) {
- link = linkMatch[1];
- }
- if (codeMatch && codeMatch.length > 1) {
- accessCode = codeMatch[1];
- }
-
- return link +'?pwd='+ accessCode
- }
- },
- watch: {
- // 可以在这里添加监听器,例如监听订单状态变化后更新页面显示
- },
- methods: {
- getData() {
- getOrderDetail({
- orderId: this.orderId
- }).then(res => {
- this.orderInfo = res;
- });
- },
- goCase() {
- uni.navigateTo({
- url: '/pages/index/detail?type=1'
- });
- },
- goHome() {
- goHome();
- },
- // 复制
- copyText(text) {
- copy(text);
- },
- // 处理取消订单逻辑
- handleCancelOrder(orderId) {
- this.showConfirmModal('你确定要取消订单吗?', () => {
- cancelOrder({
- orderId: Number(orderId)
- }).then(() => {
- uni.navigateBack();
- });
- });
- },
- // 处理更新订单逻辑
- handleUpdateOrder(orderId) {
- this.showConfirmModal('你确定要取消订单吗?', () => {
- updateOrder({
- orderId: Number(orderId),
- }).then(() => {
- uni.navigateBack();
- });
- });
- },
- // 处理确认验收逻辑
- handleCheckOrder(orderId) {
- this.showConfirmModal('你确定要验收该订单吗?', () => {
- checkOrder({
- orderId: Number(orderId),
- }).then(() => {
- uni.navigateBack();
- });
- });
- },
- // 处理申请售后逻辑
- handleAftermarketOrder(orderId) {
- this.showConfirmModal('你确定要申请售后吗?', () => {
- aftermarketOrder({
- orderId: Number(orderId)
- }).then(() => {
- uni.navigateBack();
- });
- });
- },
- // 处理撤销售后逻辑
- handleCancelAftermarketOrder(orderId) {
- this.showConfirmModal('你确定要撤销售后吗?', () => {
- cancelAftermarketOrder({
- orderId: Number(orderId)
- }).then(() => {
- uni.navigateBack();
- });
- });
- },
- // 显示确认模态框的通用函数
- showConfirmModal(content, confirmCallback) {
- uni.showModal({
- title: '提示',
- content: content,
- success: function(res) {
- if (res.confirm) {
- confirmCallback();
- } else if (res.cancel) {
- console.log('用户点击取消');
- }
- }
- });
- },
- submitOrder(params) {
- submitOrder({
- ...params
- }).then((res) => {
- // 检查是否在微信浏览器中
- if (typeof WeixinJSBridge === 'undefined') {
- if (document.addEventListener) {
- document.addEventListener('WeixinJSBridgeReady', () => {
- this.invokePayment(res);
- }, false);
- } else if (document.attachEvent) {
- document.attachEvent('WeixinJSBridgeReady', () => {
- this.invokePayment(res);
- });
- document.attachEvent('onWeixinJSBridgeReady', () => {
- this.invokePayment(res);
- });
- }
- } else {
- this.invokePayment(res);
- }
- });
- },
- invokePayment(rePayInfo) {
- WeixinJSBridge.invoke(
- 'getBrandWCPayRequest', {
- appId: rePayInfo.appid,
- timeStamp: rePayInfo.timeStamp,
- nonceStr: rePayInfo.nonceStr,
- package: rePayInfo.packages,
- signType: rePayInfo.signType,
- paySign: rePayInfo.sign
- },
- (res) => {
- if (res.err_msg === 'get_brand_wcpay_request:ok') {
- this.getData();
- } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
- uni.showToast({
- title: '用户取消了支付',
- icon: 'none'
- });
- } else {
- console.error('支付失败', res.err_msg);
- // 处理支付失败的逻辑
- }
- }
- );
- },
- },
- created() {
- // 可以在这里添加组件创建时的初始化逻辑
- },
- mounted() {
- // 可以在这里添加组件挂载后的逻辑,例如绑定一些事件监听器等
- },
- };
- </script>
- <style lang='scss' scoped>
- .success {
- width: 100%;
- position: absolute;
- top: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- background-size: contain !important;
- background-repeat: no-repeat !important;
- background-position: top;
- padding: 0 24rpx;
- .success_status {
- margin-top: 64rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- .pay_img {
- width: 48rpx;
- height: 48rpx;
- margin-left: 16rpx;
- }
- .status_text {
- font-weight: 500;
- font-size: 40rpx;
- color: #0D121A;
- }
- .status_tip {
- font-weight: 400;
- font-size: 28rpx;
- color: #9EA3B1;
- margin-top: 20rpx;
- }
- }
- .success_content {
- border-radius: 32rpx;
- overflow: hidden;
- margin-top: 64rpx;
- .success_info {
- background-color: #fff;
- padding: 36rpx 32rpx 8rpx;
- .success_item {
- margin-bottom: 20rpx;
- .label {
- min-width: 120rpx;
- font-weight: 400;
- font-size: 28rpx;
- color: #9EA3B1;
- margin-right: 16rpx;
- }
- text {
- font-size: 32rpx;
- color: #0D121A;
- }
- }
- }
- .success_btn {
- width: 80rpx;
- height: 40rpx;
- font-weight: 500;
- background: #F4F5F9;
- border-radius: 48rpx;
- font-size: 24rpx;
- color: #0D121A;
- text-align: center;
- line-height: 40rpx;
- }
- .line {
- width: 100%;
- height: 40rpx;
- background-size: cover !important;
- padding: 0 32rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- .line-circle {
- width: 100%;
- border: 2rpx dashed #EDEDED;
- height: 2rpx;
- }
- }
- .detail {
- background-color: #fff;
- padding: 32rpx 32rpx 40rpx;
- .detail_item {
- margin-bottom: 36rpx;
- text {
- white-space: nowrap;
- font-weight: 400;
- font-size: 28rpx;
- color: #0D121A;
- }
- .datas {
- .copy {
- width: 80rpx;
- height: 40rpx;
- background: #F4F5F9;
- border-radius: 48rpx;
- font-weight: 500;
- font-size: 24rpx;
- color: #061714;
- text-align: center;
- line-height: 40rpx;
- margin-left: 16rpx;
- }
- }
- }
- .detail_item:nth-last-child(1) {
- margin-bottom: 0;
- }
- }
- .success_title {
- color: #9DA3A2;
- }
- }
- .btns {
- padding: 96rpx 32rpx;
- view {
- width: 100%;
- height: 84rpx;
- // border-radius: 48rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 32rpx;
- }
- .bind {
- color: #061714;
- margin-bottom: 32rpx;
- font-weight: 500rpx;
- background: linear-gradient(140deg, #246AF1 0%, #2F98EF 100%);
- }
- .back {
- font-weight: bold;
- background: #FFFFFF;
- // border: 4rpx solid #E7EAEA;
- color: #061714;
- }
- }
- .ml16 {
- margin-left: 16rpx;
- }
- }
- .order-bottom-right {
- margin-bottom: 36rpx;
- }
- .copy {
- width: 80rpx;
- height: 40rpx;
- background: #F4F5F9;
- border-radius: 48rpx;
- font-weight: 500;
- font-size: 24rpx;
- color: #061714;
- text-align: center;
- line-height: 40rpx;
- margin-left: 16rpx;
- }
- </style>
|