From 03ad470b447f34b3ed31967e44739d9d4dc90fa1 Mon Sep 17 00:00:00 2001
From: b2894lxlx <517289602@qq.com>
Date: Wed, 31 Jan 2024 18:06:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/goods/detail.vue    |   10 +-
 pages/user/shop/order.vue | 1178 +++++++++++++++++++------------------
 2 files changed, 615 insertions(+), 573 deletions(-)

diff --git a/pages/goods/detail.vue b/pages/goods/detail.vue
index 46e6bba..7919f38 100644
--- a/pages/goods/detail.vue
+++ b/pages/goods/detail.vue
@@ -6,7 +6,7 @@
                     style="position: fixed;z-index: 98;width: 100%;background-color: #fff;padding: 10rpx 0;"
                     :style="{opacity : !headerClass? 0 : 1}">
                     <gui-switch-navigation
-                        :items="[{id:1,name:'商品'},{id:2,name:'购买须知'},{id:4,name:'详情'},{id:5,name:'推荐'}]"
+                        :items="[{id:1,name:'商品'},{id:2,name:'购买须知'},{id:3,name:'评论'},{id:4,name:'详情'},{id:5,name:'推荐'}]"
                         @change="navchange" :currentIndex="navIndex" textAlign="center" :isCenter="true"
                         activeLineBg="linear-gradient(to right, #9E1A91, #4D0868)" activeDirection="center" :size="0"
                         :margin="10" padding="30rpx"
@@ -121,7 +121,7 @@
                                     </view>
                                     <view style="height: 20rpx;"></view>
                                 </view>
-                                <view class="mainitems">
+                                <view class="mainitems" id="comment">
                                     <view style="border-radius: 10rpx;background-color: #fff;">
                                         <Comment v-if="!isLoading" :goods-id="goodsId" :limit="2"/>
                                     </view>
@@ -394,10 +394,14 @@ export default {
                 }
                     break;
                 case 2 : {
-                    which = 'detail'
+                    which = 'comment'
                 }
                     break;
                 case 3 : {
+                    which = 'detail'
+                }
+                    break;
+                case 4 : {
                     which = 'recommended'
                 }
                     break;
diff --git a/pages/user/shop/order.vue b/pages/user/shop/order.vue
index 24c46bc..7e63bbb 100644
--- a/pages/user/shop/order.vue
+++ b/pages/user/shop/order.vue
@@ -1,578 +1,616 @@
 <template>
-	<gui-page>
-		<view slot="gBody">
-
-			<view>
-
-				<view class="container" :style="appThemeStyle">
-					<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }"
-						@down="downCallback" :up="upOption" @up="upCallback">
-						<!-- tab栏 -->
-						<u-tabs :list="tabs" font-size="26" :is-scroll="false" :current="curTab"
-							:active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" />
-						<!-- 订单列表 -->
-						<view class="order-list">
-							<view class="order-item" v-for="(item, index) in list.data" :key="index">
-								<view class="item-top">
-									<view class="item-top-left">
-										<!-- <text class="order-time">{{ item.create_time }}</text> -->
-										<text class="order-time"
-											style="font-weight: bold;">{{item.goods[0].goods_name}}</text>
-									</view>
-									<view class="item-top-right" style="display: flex;">
-										<text class="state-texts">{{ item.state_text }} </text>
-									</view>
-								</view>
-								<!-- 商品列表 -->
-								<view class="goods-list">
-									<view class="goods-item" v-for="(goods, idx) in item.goods" :key="idx">
-										<!-- 商品图片 -->
-										<view class="goods-image">
-											<image class="image" :src="goods.goods_image" mode="scaleToFill"></image>
-										</view>
-										<!-- 商品信息 -->
-										<view class="goods-content">
-											<view class="goods-title"><text
-													class="oneline-hide">下单时间：{{ item.create_time }}</text></view>
-											<view class="goods-title"><text
-													class="oneline-hide">数量：{{ goods.total_num }}</text></view>
-											<view class="goods-title"><text class="oneline-hide">需付款：<text
-														class="unit">￥</text>{{ item.pay_price }}</text></view>
-										</view>
-										<!-- 交易信息 -->
-										<!-- <view class="goods-trade">
-											<view class="goods-price">
-												<text class="unit">￥</text>
-												<text
-													class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text>
-											</view>
-											<view class="goods-num">
-												<text>×{{ goods.total_num }}</text>
-											</view>
-										</view> -->
-									</view>
-								</view>
-								<!-- 订单操作 -->
-								<view v-if="item.order_status != OrderStatusEnum.CANCELLED.value" class="order-handle">
-									<view class="btn-group clearfix">
-
-										<view class="f-28 col-8" style="font-size: 25rpx;line-height: 50rpx;">
-											下单用户:{{item.extract.linkman}}({{item.extract.phone}})</view>
-									</view>
-									<view class="btn-group clearfix">
-										<!-- 订单评价 -->
-										<block v-if="item.order_status == 21">
-											<view class="btn-item" @click="onCancel(item.order_id)">同意</view>
-											<view class="btn-item" @click="showReject(item.order_id)">拒绝</view>
-										</block>
-
-									</view>
-								</view>
-							</view>
-						</view>
-					</mescroll-body>
-					<!-- 核销二维码弹窗 -->
-					<u-popup v-model="showQRCodePopup" mode="center" border-radius="26" :closeable="true">
-						<view class="qrcode-popup">
-							<view class="title">核销二维码</view>
-							<view class="pop-content">
-								<image v-if="qrcodeImage" class="image" :src="qrcodeImage"></image>
-							</view>
-						</view>
-					</u-popup>
-					<!-- 核销二维码弹窗 -->
-					<u-popup v-model="showRejectPopup" mode="center" border-radius="26" :closeable="true">
-						<view class="qrcode-popup" style="width: 700rpx;">
-							<view class="title">拒绝理由</view>
-							<view>
-								<input class="input" type="text" v-model="reason" placeholder="请输入" />
-							</view>
-							<view style="padding: 50rpx 30rpx;">
-								<view class="btn-item" @click="onReject()">确认</view>
-							</view>
-						</view>
-					</u-popup>
-				</view>
-			</view>
-		</view>
-	</gui-page>
+    <gui-page>
+        <view slot="gBody">
+
+            <view>
+
+                <view class="container" :style="appThemeStyle">
+                    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }"
+                                   @down="downCallback" :up="upOption" @up="upCallback">
+                        <!-- tab栏 -->
+                        <u-tabs :list="tabs" font-size="26" :is-scroll="false" :current="curTab"
+                                :active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab"/>
+                        <!-- 订单列表 -->
+                        <view class="order-list">
+                            <view class="order-item" v-for="(item, index) in list.data" :key="index">
+                                <view class="item-top">
+                                    <view class="item-top-left">
+                                        <!-- <text class="order-time">{{ item.create_time }}</text> -->
+                                        <text class="order-time"
+                                              style="font-weight: bold;">{{ item.goods[0].goods_name }}
+                                        </text>
+                                    </view>
+                                    <view class="item-top-right" style="display: flex;">
+                                        <text class="state-texts">{{ item.state_text === '已取消' ? '客户已申请退款' : item.state_text }}</text>
+                                    </view>
+                                </view>
+                                <!-- 商品列表 -->
+                                <view class="goods-list">
+                                    <view class="goods-item" v-for="(goods, idx) in item.goods" :key="idx">
+                                        <!-- 商品图片 -->
+                                        <view class="goods-image">
+                                            <image class="image" :src="goods.goods_image" mode="scaleToFill"></image>
+                                        </view>
+                                        <!-- 商品信息 -->
+                                        <view class="goods-content">
+                                            <view class="goods-title">
+                                                <text
+                                                    class="oneline-hide">下单时间：{{ item.create_time }}
+                                                </text>
+                                            </view>
+                                            <view class="goods-title">
+                                                <text
+                                                    class="oneline-hide">数量：{{ goods.total_num }}
+                                                </text>
+                                            </view>
+                                            <view class="goods-title">
+                                                <text class="oneline-hide">需付款：
+                                                    <text
+                                                        class="unit">￥
+                                                    </text>
+                                                    {{ item.pay_price }}
+                                                </text>
+                                            </view>
+                                        </view>
+                                        <!-- 交易信息 -->
+                                        <!-- <view class="goods-trade">
+                                            <view class="goods-price">
+                                                <text class="unit">￥</text>
+                                                <text
+                                                    class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text>
+                                            </view>
+                                            <view class="goods-num">
+                                                <text>×{{ goods.total_num }}</text>
+                                            </view>
+                                        </view> -->
+                                    </view>
+                                </view>
+                                <!-- 订单操作 -->
+                                <view v-if="item.order_status != OrderStatusEnum.CANCELLED.value" class="order-handle">
+                                    <view class="btn-group clearfix">
+
+                                        <view class="f-28 col-8" style="font-size: 25rpx;line-height: 50rpx;">
+                                            下单用户:{{ item.extract.linkman }}({{ item.extract.phone }})
+                                        </view>
+                                    </view>
+                                    <view class="btn-group clearfix">
+                                        <!-- 订单评价 -->
+                                        <view class="refund-view" v-if="item.order_status == 21">
+                                            <text class="refund-tips">客户已发起申请退款</text>
+                                            <view class="refund-view-btns">
+                                                <view class="btn-item" @click="onCancel(item.order_id)">同意</view>
+                                                <view class="btn-item" @click="showReject(item.order_id)">拒绝</view>
+                                            </view>
+                                        </view>
+
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </mescroll-body>
+                    <!-- 核销二维码弹窗 -->
+                    <u-popup v-model="showQRCodePopup" mode="center" border-radius="26" :closeable="true">
+                        <view class="qrcode-popup">
+                            <view class="title">核销二维码</view>
+                            <view class="pop-content">
+                                <image v-if="qrcodeImage" class="image" :src="qrcodeImage"></image>
+                            </view>
+                        </view>
+                    </u-popup>
+                    <!-- 核销二维码弹窗 -->
+                    <u-popup v-model="showRejectPopup" mode="center" border-radius="26" :closeable="true">
+                        <view class="qrcode-popup" style="width: 700rpx;">
+                            <view class="title">拒绝理由</view>
+                            <view>
+                                <input class="input" type="text" v-model="reason" placeholder="请输入"/>
+                            </view>
+                            <view style="padding: 50rpx 30rpx;">
+                                <view class="btn-item" @click="onReject()">确认</view>
+                            </view>
+                        </view>
+                    </u-popup>
+                </view>
+            </view>
+        </view>
+    </gui-page>
 </template>
 
 <script>
-	import CountDown from '@/components/countdown'
-	import {
-		DeliveryStatusEnum,
-		DeliveryTypeEnum,
-		OrderStatusEnum,
-		PayStatusEnum,
-		PayTypeEnum,
-		ReceiptStatusEnum
-	} from '@/common/enum/order'
-	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
-	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
-	import {
-		getEmptyPaginateObj,
-		getMoreListData
-	} from '@/core/app'
-	import * as OrderApi from '@/api/order'
-	import {
-		wxPayment
-	} from '@/core/app'
-
-	// 每页记录数量
-	const pageSize = 15
-
-	// tab栏数据
-	const tabs = [{
-		name: `全部`,
-		value: 'all'
-	}, {
-		name: `待使用`,
-		value: 'delivery'
-	}, {
-		name: `已完成`,
-		value: 'comment'
-	}, {
-		name: `退款/售后`,
-		value: 'dqx'
-	}]
-
-	export default {
-		components: {
-			MescrollBody,
-			CountDown
-		},
-		mixins: [MescrollMixin],
-		data() {
-			return {
-				showRejectPopup: false,
-				// 枚举类
-				DeliveryStatusEnum,
-				DeliveryTypeEnum,
-				OrderStatusEnum,
-				PayStatusEnum,
-				PayTypeEnum,
-				ReceiptStatusEnum,
-
-				// 当前页面参数
-				options: {
-					dataType: 'all'
-				},
-				// tab栏数据
-				tabs,
-				// 当前标签索引
-				curTab: 0,
-				// 订单列表数据
-				list: getEmptyPaginateObj(),
-				reason: '',
-
-				// 上拉加载配置
-				upOption: {
-					// 首次自动执行
-					auto: true,
-					// 每页数据的数量; 默认10
-					page: {
-						size: pageSize
-					},
-					// 数量要大于4条才显示无更多数据
-					noMoreSize: 4,
-					// 空布局
-					empty: {
-						tip: '亲，暂无订单记录'
-					}
-				},
-				// 控制首次触发onShow事件时不刷新列表
-				canReset: false,
-				// 核销二维码弹窗
-				showQRCodePopup: false,
-				// 核销二维码图片url (通过后端获取)
-				qrcodeImage: '',
-				orderId: ''
-			}
-		},
-
-		/**
-		 * 生命周期函数--监听页面加载
-		 */
-		onLoad(options) {
-			// 初始化当前选中的标签
-			this.initCurTab(options)
-		},
-
-		/**
-		 * 生命周期函数--监听页面显示
-		 */
-		onShow() {
-			this.canReset && this.onRefreshList()
-			this.canReset = true
-		},
-
-		methods: {
-			showReject(orderId) {
-
-				this.showRejectPopup = true
-				this.orderId = orderId
-
-
-			},
-			fanhui() {
-				uni.navigateBack()
-			},
-
-			// 初始化当前选中的标签
-			initCurTab(options) {
-				const app = this
-				if (options.dataType) {
-					const index = app.tabs.findIndex(item => item.value == options.dataType)
-					app.curTab = index > -1 ? index : 0
-				}
-			},
-
-			/**
-			 * 上拉加载的回调 (页面初始化时也会执行一次)
-			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
-			 * @param {Object} page
-			 */
-			upCallback(page) {
-				const app = this
-				// 设置列表数据
-				app.getOrderList(page.num)
-					.then(list => {
-						const curPageLen = list.data.length
-						const totalSize = list.data.total
-						app.mescroll.endBySize(curPageLen, totalSize)
-					})
-					.catch(() => app.mescroll.endErr())
-			},
-
-			// 获取订单列表
-			getOrderList(pageNo = 1) {
-				const app = this
-				return new Promise((resolve, reject) => {
-					OrderApi.shoplist({
-							dataType: app.getTabValue(),
-							page: pageNo
-						}, {
-							load: false
-						})
-						.then(result => {
-							// 合并新数据
-							const newList = app.initList(result.data.list)
-							app.list.data = getMoreListData(newList, app.list, pageNo)
-							resolve(newList)
-						})
-				})
-			},
-
-			// 初始化订单列表数据
-			initList(newList) {
-				newList.data.forEach(item => {
-					item.total_num = 0
-					item.goods.forEach(goods => {
-						item.total_num += goods.total_num
-					})
-				})
-				return newList
-			},
-
-			// 获取当前标签项的值
-			getTabValue() {
-				return this.tabs[this.curTab].value
-			},
-
-			// 切换标签项
-			onChangeTab(index) {
-				const app = this
-				// 设置当前选中的标签
-				if (index < 5) {
-					app.curTab = index
-
-					// 刷新订单列表
-					app.onRefreshList()
-				} else {
-					uni.navigateTo({
-						url: '/pages/refund/index'
-					})
-				}
-
-			},
-
-			// 刷新订单列表
-			onRefreshList() {
-				this.list = getEmptyPaginateObj()
-				setTimeout(() => {
-					this.mescroll.resetUpScroll()
-				}, 120)
-			},
-
-			// 取消订单
-			onCancel(orderId) {
-				const app = this
-				uni.showModal({
-					title: '友情提示',
-					content: '确认要取消该订单吗？',
-					success(o) {
-						if (o.confirm) {
-							OrderApi.shopcancel(orderId)
-								.then(result => {
-									// 显示成功信息
-									app.$toast(result.message)
-									// 刷新订单列表
-									app.onRefreshList()
-								})
-						}
-					}
-				});
-			},
-
-			onReject() {
-				let app = this
-				
-				let form={}
-				form.orderId=app.orderId
-				form.reason=app.reason
-				
-				OrderApi.shopReject(app.orderId,form)
-					.then(result => {
-						// 显示成功信息
-						app.$toast(result.message)
-						app.showRejectPopup=false
-						app.reason=''
-						// 刷新订单列表
-						app.onRefreshList()
-					})
-					
-			},
-
-
-			// 确认收货
-			onReceipt(orderId) {
-				const app = this
-				uni.showModal({
-					title: '友情提示',
-					content: '确认收到商品了吗？',
-					success(o) {
-						if (o.confirm) {
-							OrderApi.receipt(orderId)
-								.then(result => {
-									// 显示成功信息
-									app.$success(result.message)
-									// 刷新订单列表
-									app.onRefreshList()
-								})
-						}
-					}
-				});
-			},
-
-			// 获取核销二维码
-			onExtractQRCode(orderId) {
-				const app = this
-				OrderApi.extractQrcode(orderId, {
-						channel: app.platform
-					})
-					.then(result => {
-						app.qrcodeImage = result.data.qrcode
-						app.showQRCodePopup = true
-					})
-			},
-
-			// 点击去支付
-			onPay(orderId) {
-				this.$navTo('pages/checkout/cashier/index', {
-					orderId
-				})
-			},
-
-			// 跳转到订单详情页
-			handleTargetDetail(orderId) {
-				this.$navTo('pages/order/detail', {
-					orderId
-				})
-			},
-
-			// 跳转到订单评价页
-			handleTargetComment(orderId) {
-				this.$navTo('pages/order/comment/index', {
-					orderId
-				})
-			}
-
-		},
-
-	}
+import CountDown from '@/components/countdown'
+import {
+    DeliveryStatusEnum,
+    DeliveryTypeEnum,
+    OrderStatusEnum,
+    PayStatusEnum,
+    PayTypeEnum,
+    ReceiptStatusEnum
+} from '@/common/enum/order'
+import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
+import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
+import {
+    getEmptyPaginateObj,
+    getMoreListData
+} from '@/core/app'
+import * as OrderApi from '@/api/order'
+import {
+    wxPayment
+} from '@/core/app'
+
+// 每页记录数量
+const pageSize = 15
+
+// tab栏数据
+const tabs = [{
+    name: `全部`,
+    value: 'all'
+}, {
+    name: `待使用`,
+    value: 'delivery'
+}, {
+    name: `已完成`,
+    value: 'comment'
+}, {
+    name: `退款/售后`,
+    value: 'dqx'
+}]
+
+export default {
+    components: {
+        MescrollBody,
+        CountDown
+    },
+    mixins: [MescrollMixin],
+    data() {
+        return {
+            showRejectPopup: false,
+            // 枚举类
+            DeliveryStatusEnum,
+            DeliveryTypeEnum,
+            OrderStatusEnum,
+            PayStatusEnum,
+            PayTypeEnum,
+            ReceiptStatusEnum,
+
+            // 当前页面参数
+            options: {
+                dataType: 'all'
+            },
+            // tab栏数据
+            tabs,
+            // 当前标签索引
+            curTab: 0,
+            // 订单列表数据
+            list: getEmptyPaginateObj(),
+            reason: '',
+
+            // 上拉加载配置
+            upOption: {
+                // 首次自动执行
+                auto: true,
+                // 每页数据的数量; 默认10
+                page: {
+                    size: pageSize
+                },
+                // 数量要大于4条才显示无更多数据
+                noMoreSize: 4,
+                // 空布局
+                empty: {
+                    tip: '亲，暂无订单记录'
+                }
+            },
+            // 控制首次触发onShow事件时不刷新列表
+            canReset: false,
+            // 核销二维码弹窗
+            showQRCodePopup: false,
+            // 核销二维码图片url (通过后端获取)
+            qrcodeImage: '',
+            orderId: ''
+        }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        // 初始化当前选中的标签
+        this.initCurTab(options)
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+        this.canReset && this.onRefreshList()
+        this.canReset = true
+    },
+
+    methods: {
+        showReject(orderId) {
+
+            this.showRejectPopup = true
+            this.orderId = orderId
+
+
+        },
+        fanhui() {
+            uni.navigateBack()
+        },
+
+        // 初始化当前选中的标签
+        initCurTab(options) {
+            const app = this
+            if (options.dataType) {
+                const index = app.tabs.findIndex(item => item.value == options.dataType)
+                app.curTab = index > -1 ? index : 0
+            }
+        },
+
+        /**
+         * 上拉加载的回调 (页面初始化时也会执行一次)
+         * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
+         * @param {Object} page
+         */
+        upCallback(page) {
+            const app = this
+            // 设置列表数据
+            app.getOrderList(page.num)
+                .then(list => {
+                    const curPageLen = list.data.length
+                    const totalSize = list.data.total
+                    app.mescroll.endBySize(curPageLen, totalSize)
+                })
+                .catch(() => app.mescroll.endErr())
+        },
+
+        // 获取订单列表
+        getOrderList(pageNo = 1) {
+            const app = this
+            return new Promise((resolve, reject) => {
+                OrderApi.shoplist({
+                    dataType: app.getTabValue(),
+                    page: pageNo
+                }, {
+                    load: false
+                })
+                    .then(result => {
+                        // 合并新数据
+                        const newList = app.initList(result.data.list)
+                        app.list.data = getMoreListData(newList, app.list, pageNo)
+                        resolve(newList)
+                    })
+            })
+        },
+
+        // 初始化订单列表数据
+        initList(newList) {
+            newList.data.forEach(item => {
+                item.total_num = 0
+                item.goods.forEach(goods => {
+                    item.total_num += goods.total_num
+                })
+            })
+            return newList
+        },
+
+        // 获取当前标签项的值
+        getTabValue() {
+            return this.tabs[this.curTab].value
+        },
+
+        // 切换标签项
+        onChangeTab(index) {
+            const app = this
+            // 设置当前选中的标签
+            if (index < 5) {
+                app.curTab = index
+
+                // 刷新订单列表
+                app.onRefreshList()
+            } else {
+                uni.navigateTo({
+                    url: '/pages/refund/index'
+                })
+            }
+
+        },
+
+        // 刷新订单列表
+        onRefreshList() {
+            this.list = getEmptyPaginateObj()
+            setTimeout(() => {
+                this.mescroll.resetUpScroll()
+            }, 120)
+        },
+
+        // 取消订单
+        onCancel(orderId) {
+            const app = this
+            uni.showModal({
+                title: '友情提示',
+                content: '确认要取消该订单吗？',
+                success(o) {
+                    if (o.confirm) {
+                        OrderApi.shopcancel(orderId)
+                            .then(result => {
+                                // 显示成功信息
+                                app.$toast(result.message)
+                                // 刷新订单列表
+                                app.onRefreshList()
+                            })
+                    }
+                }
+            });
+        },
+
+        onReject() {
+            let app = this
+
+            let form = {}
+            form.orderId = app.orderId
+            form.reason = app.reason
+
+            OrderApi.shopReject(app.orderId, form)
+                .then(result => {
+                    // 显示成功信息
+                    app.$toast(result.message)
+                    app.showRejectPopup = false
+                    app.reason = ''
+                    // 刷新订单列表
+                    app.onRefreshList()
+                })
+
+        },
+
+
+        // 确认收货
+        onReceipt(orderId) {
+            const app = this
+            uni.showModal({
+                title: '友情提示',
+                content: '确认收到商品了吗？',
+                success(o) {
+                    if (o.confirm) {
+                        OrderApi.receipt(orderId)
+                            .then(result => {
+                                // 显示成功信息
+                                app.$success(result.message)
+                                // 刷新订单列表
+                                app.onRefreshList()
+                            })
+                    }
+                }
+            });
+        },
+
+        // 获取核销二维码
+        onExtractQRCode(orderId) {
+            const app = this
+            OrderApi.extractQrcode(orderId, {
+                channel: app.platform
+            })
+                .then(result => {
+                    app.qrcodeImage = result.data.qrcode
+                    app.showQRCodePopup = true
+                })
+        },
+
+        // 点击去支付
+        onPay(orderId) {
+            this.$navTo('pages/checkout/cashier/index', {
+                orderId
+            })
+        },
+
+        // 跳转到订单详情页
+        handleTargetDetail(orderId) {
+            this.$navTo('pages/order/detail', {
+                orderId
+            })
+        },
+
+        // 跳转到订单评价页
+        handleTargetComment(orderId) {
+            this.$navTo('pages/order/comment/index', {
+                orderId
+            })
+        }
+
+    },
+
+}
 </script>
 
 <style lang="scss" scoped>
-	.input {
-		background-color: #f9f9f9;
-		// height: 70rpx;
-		padding: 16rpx 20rpx;
-		font-size: 28rpx;
-	}
-
-	// 项目内容
-	.order-item {
-		margin: 20rpx auto 20rpx auto;
-		padding: 30rpx 30rpx;
-		width: 94%;
-		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
-		border-radius: 16rpx;
-		background: #fff;
-	}
-
-	// 项目顶部
-	.item-top {
-		display: flex;
-		justify-content: space-between;
-		font-size: 26rpx;
-		margin-bottom: 40rpx;
-
-		.state-text {
-			color: $main-bg;
-		}
-
-		.state-texts {
-			color: rgba(132, 132, 132, 1);
-		}
-	}
-
-	// 商品列表
-	.goods-list {
-
-		// 商品项
-		.goods-item {
-			display: flex;
-			margin-bottom: 40rpx;
-
-			// 商品图片
-			.goods-image {
-				width: 100rpx;
-				height: 100rpx;
-
-				.image {
-					display: block;
-					width: 100%;
-					height: 100%;
-					border-radius: 8rpx;
-				}
-			}
-
-			// 商品内容
-			.goods-content {
-				flex: 1;
-				padding-left: 16rpx;
-				color: rgba(132, 132, 132, 1);
-				font-weight: bold;
-
-				.goods-title {
-					font-size: 26rpx;
-					max-height: 76rpx;
-				}
-
-				.goods-props {
-					margin-top: 14rpx;
-					height: 40rpx;
-					color: #ababab;
-					font-size: 24rpx;
-					overflow: hidden;
-
-					.goods-props-item {
-						display: inline-block;
-						margin-right: 14rpx;
-						padding: 4rpx 16rpx;
-						border-radius: 12rpx;
-						background-color: #F5F5F5;
-						width: auto;
-					}
-				}
-
-
-			}
-
-			// 交易信息
-			.goods-trade {
-				padding-top: 16rpx;
-				width: 150rpx;
-				text-align: right;
-				color: $uni-text-color-grey;
-				font-size: 26rpx;
-
-				.goods-price {
-					vertical-align: bottom;
-					margin-bottom: 16rpx;
-
-					.unit {
-						margin-right: -2rpx;
-						font-size: 24rpx;
-					}
-				}
-			}
-
-		}
-
-	}
-
-	// 订单合计
-	.order-total {
-		font-size: 26rpx;
-		vertical-align: bottom;
-		text-align: right;
-		height: 40rpx;
-		margin-bottom: 30rpx;
-
-		.unit {
-			margin-left: 8rpx;
-			margin-right: -2rpx;
-			font-size: 26rpx;
-		}
-
-		.money {
-			font-size: 28rpx;
-		}
-	}
-
-	// 订单操作
-	.btn-item {
-		padding: 6rpx 25rpx;
-		margin-left: 20rpx;
-		font-size: 28rpx;
-		border-radius: 10rpx;
-		float: right;
-		color: #fff;
-		background: linear-gradient(to top, #4D0868, #9E1A91);
-
-		&:last-child {
-			margin-left: 0;
-		}
-
-		&.active {
-			color: $main-bg;
-			border: 2px solid $main-bg;
-		}
-	}
-
-	// 弹出层 - 核销二维码
-	.qrcode-popup {
-		padding: 36rpx 30rpx;
-
-		.title {
-			font-size: 30rpx;
-			margin-bottom: 26rpx;
-			font-weight: bold;
-			text-align: center;
-		}
-
-		.pop-content {
-			min-height: 260rpx;
-			padding: 0 10rpx;
-
-			.image {
-				display: block;
-				width: 510rpx;
-				height: 510rpx;
-			}
-
-		}
-	}
+.input {
+    background-color: #f9f9f9;
+    // height: 70rpx;
+    padding: 16rpx 20rpx;
+    font-size: 28rpx;
+}
+
+// 项目内容
+.order-item {
+    margin: 20rpx auto 20rpx auto;
+    padding: 30rpx 30rpx;
+    width: 94%;
+    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
+    border-radius: 16rpx;
+    background: #fff;
+}
+
+// 项目顶部
+.item-top {
+    display: flex;
+    justify-content: space-between;
+    font-size: 26rpx;
+    margin-bottom: 40rpx;
+
+    .state-text {
+        color: $main-bg;
+    }
+
+    .state-texts {
+        color: rgba(132, 132, 132, 1);
+    }
+}
+
+// 商品列表
+.goods-list {
+
+    // 商品项
+    .goods-item {
+        display: flex;
+        margin-bottom: 40rpx;
+
+        // 商品图片
+        .goods-image {
+            width: 100rpx;
+            height: 100rpx;
+
+            .image {
+                display: block;
+                width: 100%;
+                height: 100%;
+                border-radius: 8rpx;
+            }
+        }
+
+        // 商品内容
+        .goods-content {
+            flex: 1;
+            padding-left: 16rpx;
+            color: rgba(132, 132, 132, 1);
+            font-weight: bold;
+
+            .goods-title {
+                font-size: 26rpx;
+                max-height: 76rpx;
+            }
+
+            .goods-props {
+                margin-top: 14rpx;
+                height: 40rpx;
+                color: #ababab;
+                font-size: 24rpx;
+                overflow: hidden;
+
+                .goods-props-item {
+                    display: inline-block;
+                    margin-right: 14rpx;
+                    padding: 4rpx 16rpx;
+                    border-radius: 12rpx;
+                    background-color: #F5F5F5;
+                    width: auto;
+                }
+            }
+
+
+        }
+
+        // 交易信息
+        .goods-trade {
+            padding-top: 16rpx;
+            width: 150rpx;
+            text-align: right;
+            color: $uni-text-color-grey;
+            font-size: 26rpx;
+
+            .goods-price {
+                vertical-align: bottom;
+                margin-bottom: 16rpx;
+
+                .unit {
+                    margin-right: -2rpx;
+                    font-size: 24rpx;
+                }
+            }
+        }
+
+    }
+
+}
+
+// 订单合计
+.order-total {
+    font-size: 26rpx;
+    vertical-align: bottom;
+    text-align: right;
+    height: 40rpx;
+    margin-bottom: 30rpx;
+
+    .unit {
+        margin-left: 8rpx;
+        margin-right: -2rpx;
+        font-size: 26rpx;
+    }
+
+    .money {
+        font-size: 28rpx;
+    }
+}
+
+// 订单操作
+.btn-item {
+    padding: 6rpx 25rpx;
+    margin-left: 20rpx;
+    font-size: 28rpx;
+    border-radius: 10rpx;
+    float: right;
+    color: #fff;
+    background: linear-gradient(to top, #4D0868, #9E1A91);
+
+    &:last-child {
+        margin-left: 0;
+    }
+
+    &.active {
+        color: $main-bg;
+        border: 2px solid $main-bg;
+    }
+}
+
+// 弹出层 - 核销二维码
+.qrcode-popup {
+    padding: 36rpx 30rpx;
+
+    .title {
+        font-size: 30rpx;
+        margin-bottom: 26rpx;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    .pop-content {
+        min-height: 260rpx;
+        padding: 0 10rpx;
+
+        .image {
+            display: block;
+            width: 510rpx;
+            height: 510rpx;
+        }
+
+    }
+}
+
+.refund-view {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .refund-tips{
+        font-size: 28rpx;
+        color: #4D0868;
+    }
+
+    .refund-view-btns {
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+
+        :last-child{
+            margin-left: 15rpx;
+        }
+    }
+}
 </style>
\ No newline at end of file