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.
1396 lines
40 KiB
1396 lines
40 KiB
<!-- 订单详情-->
|
|
<template>
|
|
<div class="wrapper_1200 order_details">
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-if="orderData.order_status_name == `待审核` && orderData.order_status == 1">待发货</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-else>{{ orderData.order_status_name }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<!-- 订单信息 -->
|
|
<div class="cont">
|
|
<div class="table">
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#FAFAFA' }"
|
|
>
|
|
<el-table-column prop="name" label="商品" align="center" width="320">
|
|
<template slot-scope="scope">
|
|
<div class="good_info">
|
|
<div class="l">
|
|
<img :src="imgUrl + scope.row.sku_image" alt />
|
|
</div>
|
|
<div class="r">
|
|
<p>{{ scope.row.goods_name }}</p>
|
|
<!-- <span>商品编号：a0001 规格：10g/袋</span>
|
|
<span>产地：北京</span>-->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="order_no"
|
|
label="订单编号"
|
|
align="center"
|
|
width="200"
|
|
></el-table-column>
|
|
<el-table-column
|
|
v-if="integralGoods == 0"
|
|
prop="real_goods_money"
|
|
label="金额"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
v-if="integralGoods == 1"
|
|
prop="moeny"
|
|
label="商品总价"
|
|
align="center"
|
|
>
|
|
<template>
|
|
<div style="color: #ff7d02">2000积分</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
prop="num"
|
|
label="订货数量"
|
|
align="center"
|
|
width="80"
|
|
></el-table-column>
|
|
<el-table-column
|
|
v-if="integralGoods == 0"
|
|
prop="price"
|
|
label="单价"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="delivery_status_name"
|
|
label="订单状态"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="buyer_messag"
|
|
label="备注"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="infoBoxF" v-if="orderType != -1">
|
|
<div class="leftInfo">
|
|
<div class="item" v-if="integralGoods == 1">
|
|
<div class="l">服务</div>
|
|
<div class="r">不支持退换</div>
|
|
</div>
|
|
<div
|
|
class="item"
|
|
v-if="
|
|
(orderType == 1 ||
|
|
orderType == 2 ||
|
|
orderType == 3 ||
|
|
orderType == 4 ||
|
|
orderType == 5) &&
|
|
integralGoods == 0
|
|
"
|
|
>
|
|
<div class="l">商品金额</div>
|
|
<div class="r">¥{{ payInfo.total_money }}</div>
|
|
</div>
|
|
|
|
<div
|
|
class="item"
|
|
v-if="
|
|
(orderType == 1 ||
|
|
orderType == 2 ||
|
|
orderType == 3 ||
|
|
orderType == 4 ||
|
|
orderType == 5) &&
|
|
integralGoods == 0
|
|
"
|
|
>
|
|
<div class="l">已付金额</div>
|
|
<div class="r">¥{{ payInfo.received_money }}</div>
|
|
</div>
|
|
<div
|
|
class="item"
|
|
v-if="
|
|
(orderType == 1 ||
|
|
orderType == 2 ||
|
|
orderType == 3 ||
|
|
orderType == 4 ||
|
|
orderType == 5) &&
|
|
integralGoods == 0
|
|
"
|
|
>
|
|
<div class="l">未付金额</div>
|
|
<div class="r">¥{{ payInfo.pay_money }}</div>
|
|
</div>
|
|
|
|
|
|
<div
|
|
class="item"
|
|
v-if="
|
|
(orderType == 1 ||
|
|
orderType == 2 ||
|
|
orderType == 3 ||
|
|
orderType == 4 ||
|
|
orderType == 5) &&
|
|
integralGoods == 0
|
|
"
|
|
>
|
|
<div class="l">优惠券</div>
|
|
<div class="r red">-¥{{ orderData.coupon_money }}</div>
|
|
</div>
|
|
<div
|
|
class="item"
|
|
v-if="
|
|
orderType == 1 ||
|
|
orderType == 2 ||
|
|
orderType == 3 ||
|
|
orderType == 4 ||
|
|
orderType == 5
|
|
"
|
|
>
|
|
<div class="l">运费</div>
|
|
<div class="r red">¥{{ orderData.delivery_money }}</div>
|
|
</div>
|
|
|
|
<div
|
|
class="item"
|
|
v-if="
|
|
(orderType == 1 ||
|
|
orderType == 2 ||
|
|
orderType == 3 ||
|
|
orderType == 4 ||
|
|
orderType == 5) &&
|
|
integralGoods == 0
|
|
"
|
|
>
|
|
<div class="l">总计金额</div>
|
|
<div class="r red">¥{{ orderData.order_money }}</div>
|
|
</div>
|
|
|
|
<div
|
|
class="item"
|
|
v-if="(orderData.pay_type_name || false)"
|
|
>
|
|
<div class="l">支付方式</div>
|
|
<div class="r ">{{orderData.pay_type_name}}</div>
|
|
</div>
|
|
|
|
<div
|
|
class="item"
|
|
v-if="(orderData.delivery_type_name || false)"
|
|
>
|
|
<div class="l">配送方式</div>
|
|
<div class="r ">{{orderData.delivery_type_name}}</div>
|
|
</div>
|
|
|
|
<div class="item" v-if="orderType == 3 && payInfo.pay_status == 0">
|
|
<div class="l">等待付款</div>
|
|
<div class="r qx">
|
|
剩余时间
|
|
<span class="red">{{ min }}分钟 {{ sec }}秒</span>自动关闭
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item" v-if="integralGoods == 1">
|
|
<div class="l">商品总价</div>
|
|
<div class="r red">2000积分</div>
|
|
</div>
|
|
<div class="item" v-if="integralGoods == 1">
|
|
<div class="l">实付</div>
|
|
<div class="r red">2000积分</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="l">收货地址</div>
|
|
<div class="r address">
|
|
<p>{{ orderData.name }} {{ orderData.mobile }}</p>
|
|
<span>{{ orderData.full_address }}{{ orderData.address }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rightInfo" v-if="integralGoods == 1">
|
|
<div class="title">凭证信息</div>
|
|
<div class="item">
|
|
<div class="l">凭证</div>
|
|
<div class="r">
|
|
<p>03945858</p>
|
|
<div class="tm"></div>
|
|
<div class="code"></div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="l">服务内容</div>
|
|
<div class="r">商城优惠券100元</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="l">可用数量</div>
|
|
<div class="r">
|
|
可使用
|
|
<span>1</span>张/共2
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="l">有效期</div>
|
|
<div class="r">2022-12-21至2023-01-19</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btns" v-if="orderType != -1">
|
|
|
|
<!--审核情况展示"申请售后"按钮|待支付 or 全款支付时 && 订单状态=[待发货,已发货,已收货]-->
|
|
<!-- <div class="hs" v-if="orderType == 1 && integralGoods == 0" @click="clickSpsh">申请售后</div>-->
|
|
<div class="hs" v-if="[1,3,4].includes(orderData.order_status) && [0,2].includes(payInfo.pay_status) && integralGoods == 0" @click="clickSpsh">申请售后</div>
|
|
|
|
<div class="gl" v-if="orderType == 1" @click="clickQrsh">确定收货</div>
|
|
<!-- <div class="hs" v-if="orderType == 2" @click="clickGhdz">更换地址</div> -->
|
|
|
|
<!--根据要求，暂时去掉提醒发货按钮-->
|
|
<!-- <div class="gl" v-if="orderType == 2" @click="clickTxfh">提醒发货</div>-->
|
|
<!-- <div class="hs" v-if="orderType == 3 && integralGoods == 0" @click="clickDdqx">取消订单</div> -->
|
|
|
|
|
|
<!--展示该按钮的情况[pay.pay_status=0],不展示按钮的情况[订单锁定的is_lock=1,order.order_status=-1] -->
|
|
<div class="gl" v-if="payInfo.pay_status == 0 && payInfo.pay_money > 0 && orderData.order_status != -1" @click="clickJxfk">
|
|
继续付款
|
|
</div>
|
|
|
|
|
|
<div class="gl" v-if="orderType == 4 && integralGoods == 0" @click="clickScdd">
|
|
删除订单
|
|
</div>
|
|
<div
|
|
class="bs"
|
|
v-if="
|
|
(!(orderType == 3) && integralGoods == 0) ||
|
|
(orderData.is_invoice == 1 && orderData.invoice_status == 1)
|
|
"
|
|
@click="clickSqkp"
|
|
>
|
|
申请开票
|
|
</div>
|
|
<!-- <div class="hs" v-if="orderType == 5 && integralGoods == 0" @click="clickSpsh">-->
|
|
<!-- 申请售后-->
|
|
<!-- </div>-->
|
|
<div class="gl" v-if="orderType == 5 && integralGoods == 0" @click="clickQpj">
|
|
去评价
|
|
</div>
|
|
<div
|
|
class="gl"
|
|
v-if="(orderType == 5 || orderType == 4) && integralGoods == 1"
|
|
@click="clickZcdh"
|
|
>
|
|
再次兑换
|
|
</div>
|
|
<div class="hs" v-if="orderType == 3 && integralGoods == 1" @click="clickQxdh">
|
|
取消兑换
|
|
</div>
|
|
<div class="gl" v-if="orderType == 3 && integralGoods == 1" @click="clickJxdh">
|
|
继续兑换
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 物流信息 -->
|
|
<div class="playInfo" v-if="orderType != -1">
|
|
<div class="left">
|
|
<div class="item">
|
|
<div class="l">物流信息</div>
|
|
<div class="r" v-if="!(orderType == 2) && !(orderType == 3)">
|
|
<p v-if="logisticsData.trace">{{ logisticsData.trace.reason }}</p>
|
|
</div>
|
|
<div class="r" v-if="orderType == 2">等待发货</div>
|
|
<div class="r" v-if="orderType == 3">暂无</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="item">
|
|
<div class="l">订单信息</div>
|
|
<div class="r">
|
|
<p>
|
|
订单编号：{{ orderData.order_no }} |
|
|
<span @click="playCopy(orderData.order_no)">复制</span>
|
|
</p>
|
|
<p>
|
|
下单时间：{{
|
|
$dayjs(orderData.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
|
|
}}
|
|
</p>
|
|
|
|
<p v-if="!(orderType == 3)">
|
|
付款时间：{{
|
|
$dayjs(orderData.pay_time * 1000).format("YYYY-MM-DD HH:mm:ss")
|
|
}}
|
|
</p>
|
|
|
|
<p v-if="!(orderType == 2) && !(orderType == 3)">
|
|
发货时间：{{
|
|
$dayjs(logisticsData.delivery_time * 1000).format("YYYY-MM-DD HH:mm:ss")
|
|
}}
|
|
</p>
|
|
<p v-if="orderType == 5">
|
|
收货时间：{{
|
|
$dayjs(logisticsData.delivery_time * 1000).format("YYYY-MM-DD HH:mm:ss")
|
|
}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 为你推荐 -->
|
|
<!-- <Guess v-if="orderType == 1"></Guess> -->
|
|
|
|
<!-- 提示弹框 -->
|
|
<Dialog
|
|
ref="dialog"
|
|
:confirmText="dialogCon.confirmText"
|
|
:tipsText="dialogCon.tipsText"
|
|
:contentText="dialogCon.contentText"
|
|
:cancelText="dialogCon.cancelText"
|
|
@clickConfirm="submit()"
|
|
></Dialog>
|
|
|
|
<!-- 插槽弹框 -->
|
|
<DialogSlot
|
|
:dialogSlotShow.sync="dialogSlotCon.dialogSlotShow"
|
|
:tipsText="dialogSlotCon.tipsText"
|
|
:cancelText="dialogSlotCon.cancelText"
|
|
:confirmText="dialogSlotCon.confirmText"
|
|
:confirmBtnShow="dialogSlotCon.confirmBtnShow"
|
|
:titleShow="dialogSlotCon.titleShow"
|
|
@clickCancel="clickCancel"
|
|
@clickConfirm="clickConfirm"
|
|
>
|
|
<!-- 内容插槽 -->
|
|
<template v-slot:contentSlot>
|
|
<!-- 跟换地址 -->
|
|
<div class="ghdz" v-if="dialogSlotType == 'ghdz'">
|
|
<div class="dz">
|
|
<el-radio v-model="addressType" :label="1">
|
|
<div class="radio">
|
|
<p>李三 19293984987</p>
|
|
<span>四川省攀枝花市盐边县哈雷路胡同34号</span>
|
|
</div>
|
|
</el-radio>
|
|
</div>
|
|
<div class="dz">
|
|
<el-radio v-model="addressType" :label="2">
|
|
<div class="radio">
|
|
<p>罗爱拉 13456987568</p>
|
|
<span>福建省厦门市集美区李冰大道500号</span>
|
|
</div>
|
|
</el-radio>
|
|
</div>
|
|
<div class="dz">
|
|
<el-radio v-model="addressType" :label="3">
|
|
<div class="radio">
|
|
<p>罗杰 19293984987</p>
|
|
<span>西藏自治区拉萨市堆龙德庆县兴业街961号</span>
|
|
</div>
|
|
</el-radio>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单取消 -->
|
|
<div class="ddqx" v-if="dialogSlotType == 'ddqx'">
|
|
<span>您确认要取消订单吗？取消订单后，订单不能恢复。</span>
|
|
<div class="slec">
|
|
<p>请选择取消订单原因：</p>
|
|
<el-select style="width: 100%" v-model="clecanReason" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in clecanReasonOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 继续支付 -->
|
|
<div class="jxfk" v-if="dialogSlotType == 'jxfk'">
|
|
<el-form
|
|
:model="paymentForm"
|
|
ref="paymentForm"
|
|
label-width="120px"
|
|
hide-required-asterisk
|
|
v-if="payState == 1"
|
|
>
|
|
<el-radio-group v-model="isBalance" class="czText" @change="paidChange">
|
|
<el-radio :label="false">待支付金额：￥{{ payInfo.pay_money }}</el-radio>
|
|
<el-radio :label="true"
|
|
>预存款支付（当前余额{{ userInfo.balance }}，本次抵扣{{
|
|
payInfo.pay_money
|
|
}}）</el-radio
|
|
>
|
|
</el-radio-group>
|
|
|
|
<el-form-item label="还需支付">
|
|
<el-input
|
|
v-model="paymentForm.payment_money"
|
|
size="small"
|
|
:placeholder="Tobepaid ? payInfo.pay_money : Tobepaid"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="请选择支付方式"
|
|
prop="moneryType"
|
|
v-if="!paymentForm.is_balance"
|
|
>
|
|
<!-- <div class="zf" style="margin-top: 8px">
|
|
<div class="l">
|
|
<el-radio v-model="paymentForm.payType" :label="1">
|
|
<div class="radio">
|
|
<img src="~assets/images/wxpay.png" alt />
|
|
<p>微信</p>
|
|
</div>
|
|
</el-radio>
|
|
</div>
|
|
<span class="rr">
|
|
<span>使用微信扫描二维码即可付款</span>
|
|
</span>
|
|
</div> -->
|
|
<div class="zf" style="margin-top: 20px">
|
|
<div class="l">
|
|
<el-radio v-model="paymentForm.payType" :label="2">
|
|
<div class="radio">
|
|
<img src="~assets/images/AlipayTag.png" alt />
|
|
<p>支付宝</p>
|
|
</div>
|
|
</el-radio>
|
|
</div>
|
|
<span class="rr">使用手机支付宝扫描二维码付款</span>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div v-if="payState == 2" class="smzf">
|
|
<div class="code">
|
|
<img src="~assets/images/code.png" alt />
|
|
</div>
|
|
<p>请使用微信“扫一扫”扫描二维码支付</p>
|
|
</div>
|
|
<div v-if="payState == 3" class="zfcg">
|
|
<div class="code">
|
|
<img src="~assets/images/paySuccess.png" alt />
|
|
</div>
|
|
<p>充值成功</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 去评价 -->
|
|
<div class="qpj" v-if="dialogSlotType == 'qpj'">
|
|
<el-radio-group v-model="pjForm.radio" style="margin: 10px 0 20px">
|
|
<el-radio :label="1">好评</el-radio>
|
|
<el-radio :label="2">中评</el-radio>
|
|
<el-radio :label="3">差评</el-radio>
|
|
</el-radio-group>
|
|
<el-input
|
|
type="textarea"
|
|
:rows="4"
|
|
placeholder="请输入内容"
|
|
v-model="pjForm.textarea"
|
|
></el-input>
|
|
<div class="tj">
|
|
<p>添加图片</p>
|
|
<UploadImage1
|
|
@input="uploadSccess($event, '1')"
|
|
:value="pjForm.license"
|
|
:limit="9"
|
|
>
|
|
<template v-slot:upload>
|
|
<div class="upload">
|
|
<img src="~assets/images/downloadIMG.png" />
|
|
|
|
<span>上传照片</span>
|
|
</div>
|
|
</template>
|
|
</UploadImage1>
|
|
</div>
|
|
</div>
|
|
<!-- 申请发票 -->
|
|
<div class="sqkp" v-if="dialogSlotType == 'sqkp'">
|
|
<el-form
|
|
v-if="!sqscussess"
|
|
label-position="right"
|
|
label-width="85px"
|
|
:model="kpForm"
|
|
>
|
|
<el-form-item label="发票类型：">
|
|
<el-select
|
|
style="width: 100%"
|
|
v-model="kpForm.value"
|
|
placeholder="请选择发票类型"
|
|
>
|
|
<el-option
|
|
v-for="item in optionsType"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="抬头类型：">
|
|
<el-input v-model="kpForm.type" placeholder="确认要删除吗？"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="发票抬头：">
|
|
<el-input
|
|
v-model="kpForm.type"
|
|
placeholder="请填写需要开具发票的企业名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="税号：">
|
|
<el-input v-model="kpForm.type" placeholder="纳税人识别号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="开户银行：">
|
|
<el-input v-model="kpForm.type" placeholder="请填写开户银行"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="银行帐号：">
|
|
<el-input v-model="kpForm.type" placeholder="请填写银行帐号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="企业地址：">
|
|
<el-input v-model="kpForm.type" placeholder="请填写企业地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="企业电话：">
|
|
<el-input v-model="kpForm.type" placeholder="请填写企业电话"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱地址：">
|
|
<el-input v-model="kpForm.type" placeholder="请填写邮箱地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="开票金额：">
|
|
<el-input v-model="kpForm.type" placeholder="请填写开票金额"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div v-else class="zfcg">
|
|
<div class="code">
|
|
<img src="~assets/images/paySuccess.png" alt />
|
|
</div>
|
|
<p>申请成功</p>
|
|
</div>
|
|
</div>
|
|
<!-- 兑换 -->
|
|
<div class="dh" v-if="dialogSlotType == 'dh'">
|
|
<div class="zfcg">
|
|
<div class="code">
|
|
<img src="~assets/images/paySuccess.png" alt />
|
|
</div>
|
|
<p>兑换成功</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 选择插槽 -->
|
|
<template v-slot:seleSlot v-if="!sqscussess && dialogSlotType == 'sqkp'">
|
|
<el-checkbox v-model="kpForm.checked">设为默认抬头</el-checkbox>
|
|
</template>
|
|
</DialogSlot>
|
|
|
|
<!-- 申请开票 -->
|
|
<Dialog
|
|
ref="billDialog"
|
|
:contentText="contentText"
|
|
@clickConfirm="billBtn"
|
|
:cancelText="'返回'"
|
|
></Dialog>
|
|
|
|
<!-- 申请售后 -->
|
|
<DialogOrderAfterSale
|
|
:dialogOrderAfterSaleData="orderData"
|
|
:DialogOrderAfterSaleVisible="DialogOrderAfterSaleVisible"
|
|
v-if="DialogOrderAfterSaleVisible"
|
|
:DialogOrderAfterSaleloading="DialogOrderAfterSaleloading"
|
|
@closrDialogOrderAfterSale="closrDialogOrderAfterSale"
|
|
></DialogOrderAfterSale>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Setting from "~/setting";
|
|
import Guess from "@/components/guess.vue";
|
|
import DialogOrderAfterSale from "@/components/dialogOrderAfterSale.vue";
|
|
|
|
export default {
|
|
name: "order_details",
|
|
auth: false,
|
|
//import引入的组件需要注入到对象中才能使用
|
|
components: {
|
|
Guess,
|
|
DialogOrderAfterSale,
|
|
},
|
|
data() {
|
|
//这里存放数据
|
|
return {
|
|
userInfo: JSON.parse(localStorage.getItem("userInfo")),
|
|
imgUrl: Setting.uplodBaseURL,
|
|
orderData: {},
|
|
payInfo: {},//订单支付信息
|
|
// 提示弹框配置
|
|
dialogCon: {},
|
|
dialogType: "", //弹框当前打开的弹框
|
|
// ---------------------------------
|
|
// 插槽配置
|
|
dialogSlotCon: {},
|
|
dialogSlotType: "", //弹框插槽当前打开的弹框
|
|
payState: 1,
|
|
|
|
// ---------------------------------
|
|
//申请售后相关
|
|
DialogOrderAfterSaleVisible: false,//是否展示
|
|
DialogOrderAfterSaleloading: false,//是否加载完毕
|
|
|
|
// ---------------------------------
|
|
addressType: "1", //选中的地址
|
|
paymentForm: {
|
|
is_balance: false,
|
|
}, //继续支付
|
|
isBalance: false,
|
|
Tobepaid: "",
|
|
pjForm: {}, //评价
|
|
kpForm: {
|
|
checked: false,
|
|
}, //申请开票
|
|
sqscussess: false, //申请成功
|
|
integralGoods: 0, //0-非积分兑换的商品 1-积分兑换的商品
|
|
|
|
orderType: 3, //1-待收货 2-待发货 3-待付款 4-取消订单 5-已完成
|
|
titleType: "已完成",
|
|
tableData: [],
|
|
clecanReasonOption: [],
|
|
clecanReason: "", //取消原因
|
|
// 发票类型
|
|
optionsType: [
|
|
{
|
|
value: "选项1",
|
|
label: "黄金糕",
|
|
},
|
|
{
|
|
value: "选项2",
|
|
label: "双皮奶",
|
|
},
|
|
],
|
|
min: "",
|
|
sec: "",
|
|
order_create_time: "",
|
|
logisticsData: {},
|
|
contentText: "",
|
|
};
|
|
},
|
|
//监听属性 类似于data概念
|
|
computed: {},
|
|
//监控data中的数据变化
|
|
watch: {},
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
created() {
|
|
this.getOrderData();
|
|
},
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
mounted() {
|
|
// this.countdown();
|
|
},
|
|
//方法集合
|
|
methods: {
|
|
getOrderData() {
|
|
let id = this.$route.query.order_id;
|
|
let obj = {
|
|
order_id: id,
|
|
};
|
|
this.$axios
|
|
.post(`/order/detail`, obj)
|
|
.then((res) => {
|
|
console.log(res.data);
|
|
this.orderData = res.data;
|
|
this.payInfo = res.data.pay;
|
|
this.tableData = res.data.order_goods;
|
|
this.tableData.map((item) => {
|
|
item.buyer_messag = this.orderData.buyer_message;
|
|
});
|
|
this.order_create_time = res.data.create_time;
|
|
this.countdown();
|
|
// -1-已关闭 1-待收货 2-待发货 3-待付款 4-取消订单 5-已完成
|
|
if (this.orderData.order_status == -1) {
|
|
this.orderType = -1;
|
|
} else if (this.orderData.order_status == 1) {
|
|
this.orderType = 2;
|
|
} else if (this.orderData.order_status == 0) {
|
|
this.orderType = 3;
|
|
} else if (this.orderData.order_status == 3) {
|
|
this.orderType = 1;
|
|
// 待收货查询物流信息
|
|
this.getLogisticsData();
|
|
} else if (this.orderData.order_status == 4) {
|
|
this.orderType = 5;
|
|
this.getLogisticsData();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
getLogisticsData() {
|
|
let id = this.$route.query.order_id;
|
|
let obj = {
|
|
order_id: id,
|
|
};
|
|
this.$axios
|
|
.post(`/order/package`, obj)
|
|
.then((res) => {
|
|
console.log('xx2',res);
|
|
this.logisticsData = res.data[0];
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
// 确认收货
|
|
clickQrsh() {
|
|
this.dialogType = "qrsh";
|
|
this.dialogCon = {
|
|
tipsText: "提示",
|
|
contentText: "是否确认收货？",
|
|
cancelText: "返回",
|
|
confirmText: "是",
|
|
};
|
|
this.$refs.dialog.dialogShow = true;
|
|
},
|
|
// 更换地址
|
|
clickGhdz() {
|
|
this.dialogSlotType = "ghdz";
|
|
this.dialogSlotCon = {
|
|
dialogSlotShow: true,
|
|
tipsText: "选择地址",
|
|
cancelText: "返回",
|
|
};
|
|
},
|
|
|
|
// 提醒发货
|
|
clickTxfh() {
|
|
let obj = {
|
|
order_id: this.$route.query.order_id,
|
|
};
|
|
this.$axios
|
|
.post(`/order/doDeliveryMessage`, obj)
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.$message.success(res.message);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 订单取消
|
|
clickDdqx() {
|
|
this.dialogSlotType = "ddqx";
|
|
this.dialogSlotCon = {
|
|
dialogSlotShow: true,
|
|
tipsText: "订单取消",
|
|
cancelText: "暂不取消",
|
|
confirmText: "确定取消",
|
|
};
|
|
},
|
|
// 继续支付
|
|
clickJxfk() {
|
|
this.dialogSlotType = "jxfk";
|
|
this.dialogSlotCon = {
|
|
dialogSlotShow: true,
|
|
tipsText: "继续支付",
|
|
cancelText: "返回",
|
|
confirmText: "确定支付",
|
|
};
|
|
},
|
|
// 继续支付是否直接支付还是余额抵扣
|
|
paidChange(val) {
|
|
if (!val) {
|
|
this.paymentForm.is_balance = false;
|
|
this.Tobepaid = Number(this.orderData.pay_money);
|
|
} else if (val) {
|
|
let num = Number(this.userInfo.balance) - Number(this.payInfo.pay_money);
|
|
this.paymentForm.is_balance = true;
|
|
if (num < Number(this.userInfo.balance)) {
|
|
this.Tobepaid = 0;
|
|
} else if (num > Number(this.userInfo.balance)) {
|
|
this.Tobepaid = num - Number(this.userInfo.balance);
|
|
}
|
|
}
|
|
},
|
|
// 删除订单
|
|
clickScdd() {
|
|
this.$refs.dialog.dialogShow = true;
|
|
this.dialogCon = {
|
|
cancelText: "返回",
|
|
contentText: "确定删除？",
|
|
};
|
|
},
|
|
// 去评价
|
|
clickQpj() {
|
|
this.dialogSlotType = "qpj";
|
|
this.dialogSlotCon = {
|
|
dialogSlotShow: true,
|
|
tipsText: "商品评价",
|
|
cancelText: "取消",
|
|
confirmText: "确认",
|
|
};
|
|
},
|
|
// 申请开票
|
|
clickSqkp() {
|
|
this.contentText = "确定要申请开发票吗？";
|
|
this.$refs.billDialog.dialogShow = true;
|
|
},
|
|
billBtn() {
|
|
let obj = {
|
|
order_id: this.orderData.order_id,
|
|
store_id: JSON.parse(localStorage.getItem("drugstoreObj")).id,
|
|
};
|
|
this.$axios
|
|
.post(`/order/doInvoice`, obj)
|
|
.then((res) => {
|
|
this.$message.success(res.message);
|
|
this.getList();
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 申请售后
|
|
clickSpsh() {
|
|
console.log('xx1',this.orderData)
|
|
//打开售后页面
|
|
this.DialogOrderAfterSaleVisible = true;
|
|
},
|
|
//关闭售后弹出层
|
|
closrDialogOrderAfterSale(e){
|
|
console.log('xx1',e)
|
|
this.DialogOrderAfterSaleData = this.orderData
|
|
this.DialogOrderAfterSaleVisible = false
|
|
},
|
|
|
|
// 点击确认
|
|
clickConfirm() {
|
|
// 继续支付
|
|
if (this.dialogSlotType == "jxfk") {
|
|
let obj = {
|
|
is_balance: this.paymentForm.is_balance ? "1" : "0",
|
|
out_trade_no: this.orderData.out_trade_no,
|
|
pay_type: this.orderData.pay_type,
|
|
};
|
|
this.$axios
|
|
.post(`/pay/pay`, obj)
|
|
.then((res) => {
|
|
this.$message.success(res.message);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
// if (this.payState == 2) {
|
|
// this.dialogSlotCon = {
|
|
// dialogSlotShow: true,
|
|
// titleShow: false,
|
|
// cancelText: "返回首页",
|
|
// confirmText: "查看订单",
|
|
// };
|
|
// this.payState = 3;
|
|
// }
|
|
// if (this.payState == 1) {
|
|
// this.dialogSlotCon = {
|
|
// dialogSlotShow: true,
|
|
// tipsText: "微信扫码支付",
|
|
// cancelText: "返回",
|
|
// };
|
|
// this.payState = 2;
|
|
// }
|
|
}
|
|
// 申请开票成功
|
|
if (this.dialogSlotType == "sqkp") {
|
|
this.sqscussess = true;
|
|
this.dialogSlotCon = {
|
|
dialogSlotShow: true,
|
|
titleShow: false,
|
|
cancelText: "返回",
|
|
confirmBtnShow: false,
|
|
};
|
|
}
|
|
|
|
this.dialogSlotCon.dialogSlotShow = false;
|
|
},
|
|
submit() {
|
|
//确定收货
|
|
console.log(this.orderData);
|
|
if (this.dialogType == "qrsh") {
|
|
let obj = {
|
|
order_id: this.orderData.order_id,
|
|
};
|
|
this.$axios
|
|
.post(`/order/takeDelivery`, obj)
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.$message({
|
|
message: res.message,
|
|
type: "success",
|
|
});
|
|
this.$router.push({ path: `/order` });
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
},
|
|
// 继续兑换
|
|
clickJxdh() {
|
|
this.dialogSlotType = "dh";
|
|
this.dialogSlotCon = {
|
|
dialogSlotShow: true,
|
|
titleShow: false,
|
|
cancelText: "返回首页",
|
|
confirmText: "查看订单",
|
|
};
|
|
},
|
|
// 再次兑换
|
|
clickZcdh() {},
|
|
// 取消兑换
|
|
clickQxdh() {
|
|
this.dialogType = "zcdh";
|
|
this.dialogCon = {
|
|
tipsText: "提示",
|
|
contentText: "是否取消订单",
|
|
cancelText: "取消",
|
|
confirmText: "确认",
|
|
};
|
|
this.$refs.dialog.dialogShow = true;
|
|
},
|
|
// 点击取消或返回
|
|
clickCancel() {
|
|
this.dialogSlotCon.dialogSlotShow = false;
|
|
},
|
|
|
|
// 复制
|
|
playCopy(v) {
|
|
let url = v; //拿到想要复制的值
|
|
let copyInput = document.createElement("input"); //创建input元素
|
|
document.body.appendChild(copyInput); //向页面底部追加输入框
|
|
copyInput.setAttribute("value", url); //添加属性，将url赋值给input元素的value属性
|
|
copyInput.select(); //选择input元素
|
|
document.execCommand("Copy"); //执行复制命令
|
|
this.$message.success("复制成功"); //弹出提示信息，不同组件可能存在写法不同
|
|
//复制之后再删除元素，否则无法成功赋值
|
|
copyInput.remove(); //删除动态创建的节点
|
|
},
|
|
//倒计时
|
|
countdown() {
|
|
const end = this.order_create_time * 1000; // update_time是后台返的数据，代表创建订单的那一个时刻的毫秒数
|
|
const now = new Date().getTime(); // 获取当前时间的毫秒数
|
|
const minus = now - end;
|
|
const m_30 = 30 * 60 * 1000; // 30分钟毫秒数，如十分钟倒计时，公式即为10*60*100，以此类推
|
|
|
|
const differ = m_30 - minus; // 时间差
|
|
|
|
let m = parseInt((differ / 1000 / 60) % 60);
|
|
let s = parseInt((differ / 1000) % 60);
|
|
|
|
this.min = m > 9 ? m : "0" + m;
|
|
this.sec = s > 9 ? s : "0" + s;
|
|
|
|
const that = this;
|
|
if (m >= 0 && s >= 0) {
|
|
if (m == 0 && s == 0) {
|
|
return;
|
|
}
|
|
setTimeout(function () {
|
|
that.countdown();
|
|
}, 1000);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep {
|
|
.jxfk,
|
|
.ghdz {
|
|
.el-radio {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.qpj {
|
|
.el-textarea__inner {
|
|
background-color: #f6f6f6;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order_details {
|
|
.zfcg {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.code {
|
|
width: 110px;
|
|
height: 110px;
|
|
im {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
margin: 30px 0 50px;
|
|
}
|
|
}
|
|
.crumbs {
|
|
margin: 20px 0;
|
|
}
|
|
.cont {
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
padding: 30px;
|
|
margin-bottom: 20px;
|
|
.table {
|
|
.good_info {
|
|
display: flex;
|
|
.l {
|
|
width: 80px;
|
|
height: 80px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.r {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 20px;
|
|
p {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
text-align: left;
|
|
}
|
|
span {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.infoBoxF {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
|
|
.leftInfo {
|
|
width: 50%;
|
|
.item {
|
|
display: flex;
|
|
margin-bottom: 15px;
|
|
.l {
|
|
width: 110px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
}
|
|
.r {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
}
|
|
.red {
|
|
color: #ff3333;
|
|
}
|
|
.qx {
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
.address {
|
|
p {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
margin-bottom: 10px;
|
|
}
|
|
span {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rightInfo {
|
|
width: 50%;
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
line-height: 22px;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
margin-top: 15px;
|
|
.l {
|
|
width: 65px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
text-align: right;
|
|
}
|
|
.r {
|
|
margin-left: 25px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
span {
|
|
color: #ff2e2e;
|
|
}
|
|
.tm {
|
|
width: 113px;
|
|
height: 50px;
|
|
background-color: #999;
|
|
margin-top: 10px;
|
|
}
|
|
.code {
|
|
width: 113px;
|
|
height: 114px;
|
|
margin-top: 10px;
|
|
background-color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btns {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
div {
|
|
width: 68px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
margin-left: 15px;
|
|
cursor: pointer;
|
|
}
|
|
.hs {
|
|
background: #f6f6f6;
|
|
|
|
color: var(--themeColor);
|
|
}
|
|
.bs {
|
|
background: #f6f6f6;
|
|
|
|
color: #333;
|
|
}
|
|
.gl {
|
|
background: var(--themeColor);
|
|
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.playInfo {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
padding: 30px;
|
|
margin-bottom: 20px;
|
|
.left,
|
|
.right {
|
|
width: 50%;
|
|
.item {
|
|
display: flex;
|
|
.l {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
}
|
|
.r {
|
|
margin-left: 70px;
|
|
|
|
p {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
margin-bottom: 15px;
|
|
span {
|
|
// color: #0094f9;
|
|
color: var(--themeColor);
|
|
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ghdz {
|
|
.dz {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
.radio {
|
|
margin-left: 15px;
|
|
p {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
margin-bottom: 10px;
|
|
}
|
|
span {
|
|
font-size: 13px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ddqx {
|
|
span {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ff5d5d;
|
|
}
|
|
.slec {
|
|
margin-bottom: 30px;
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
margin: 15px 0 10px;
|
|
}
|
|
}
|
|
}
|
|
.jxfk {
|
|
.czText {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
margin-bottom: 20px;
|
|
.el-radio {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
.zf {
|
|
width: 100%;
|
|
.l {
|
|
display: flex;
|
|
align-items: center;
|
|
.radio {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
p {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
}
|
|
}
|
|
.rr {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-left: 54px;
|
|
}
|
|
}
|
|
.smzf {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.code {
|
|
width: 186px;
|
|
height: 186px;
|
|
border: 1px solid #e0e0e0;
|
|
im {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
margin: 20px 0 30px;
|
|
}
|
|
}
|
|
}
|
|
.qpj {
|
|
.tj {
|
|
p {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
margin: 20px 0 10px;
|
|
}
|
|
.upload {
|
|
width: 74px;
|
|
height: 74px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
border: 1px dashed #dcdcdc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
span {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|