1495 lines
38 KiB
Vue
1495 lines
38 KiB
Vue
<template>
|
||
<view class="">
|
||
<z-nav-bar title="订单详情"> </z-nav-bar>
|
||
<view>
|
||
<view style="padding: 20rpx">
|
||
<view
|
||
v-if="
|
||
orderContet.orderType != 'point' &&
|
||
orderContet.addressId != 0 &&
|
||
orderContet.addressId != null
|
||
"
|
||
class="order_top common_radius_box color_shandow goods_box address_box">
|
||
<u-icon
|
||
name="map-fill"
|
||
color="#7dc1f0"
|
||
size="20"
|
||
style="display: inline-block; margin-right: 10rpx"
|
||
></u-icon>
|
||
<view class="normal_box">
|
||
<view class="normal_box_top">
|
||
<view class="curriulum_title">
|
||
{{ orderContet.province }}
|
||
{{ orderContet.city }}
|
||
{{ orderContet.county }}
|
||
{{ orderContet.address }}
|
||
</view>
|
||
<view class="user_info">
|
||
<text class="name">
|
||
{{ orderContet.shippingUser }}
|
||
</text>
|
||
<text class="tel">
|
||
{{ orderContet.userPhone }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="orderList" v-if="consigneeShow">
|
||
<view
|
||
class=""
|
||
v-if="sheetList.length > 1 && orderContet.orderStatus == 2"
|
||
style="
|
||
background-color: rgb(113, 213, 161);
|
||
margin-bottom: 20rpx;
|
||
border-radius: 20rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
padding: 10rpx;
|
||
"
|
||
>
|
||
订单已被拆分成 {{ sheetList.length }} 个包裹
|
||
</view>
|
||
<view class="orderItem">
|
||
<view class="" style="position: relative; height: 60rpx">
|
||
<text
|
||
class="orderState orderState0"
|
||
v-if="orderContet.orderStatus == 0">待支付</text>
|
||
<text
|
||
class="orderState orderState1"
|
||
v-if="orderContet.orderStatus == 1">待发货</text>
|
||
<text
|
||
class="orderState orderState2"
|
||
v-if="orderContet.orderStatus == 2">待收货</text>
|
||
<text
|
||
class="orderState orderState3"
|
||
v-if="orderContet.orderStatus == 3">已完成</text>
|
||
<text
|
||
class="orderState orderState5"
|
||
v-if="orderContet.orderStatus == 5">已超时</text>
|
||
</view>
|
||
|
||
<view class="order_block">
|
||
<view
|
||
class="orderContent"
|
||
v-for="(item, index) in goodsList"
|
||
:key="index"
|
||
@click="goDetail(item.productId, item)"
|
||
v-if="goodsList.length > 0"
|
||
style=" display: flex; align-items: center; justify-content: center;"
|
||
>
|
||
<view class="feng" style="position: relative">
|
||
<view v-if="item.delFlag == -1" class="delisted">已下架</view>
|
||
<image
|
||
style="width: 100%; height: 100%"
|
||
v-if="item.productImages"
|
||
:src="item.productImages"
|
||
mode="aspectFit"
|
||
></image>
|
||
<view
|
||
v-else style="
|
||
color: #c0c4cc;
|
||
font-size: 22rpx;
|
||
line-height: 140rpx;
|
||
text-align: center;">暂无封面图</view>
|
||
</view>
|
||
|
||
<view class="goods_info">
|
||
<view class="flexbox itemJian">
|
||
<view class="booknameleft">
|
||
<text :style="`${item.delFlag == -1 ? 'color:#c0c4cc;' : ''}`">{{ item.productName }}</text>
|
||
</view>
|
||
<view style="color: #c0c4cc; font-size: 26rpx; font-weight: 700">
|
||
×{{ item.quantity ? item.quantity : "" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<br clear="both" />
|
||
</view>
|
||
|
||
<view class="orderContent" v-if="orderContet.orderType == 'trainingClass'">
|
||
<image
|
||
src="/static/icon/icon_pxb.png"
|
||
mode="aspectFill"
|
||
style="width: 100rpx; height: 100rpx"
|
||
></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle" style="line-height: 100rpx">
|
||
<text>{{orderContet.remark}}</text>
|
||
</view>
|
||
|
||
<br clear="both" />
|
||
</view>
|
||
<br clear="both" />
|
||
</view>
|
||
<view class="orderContent" v-if="orderContet.orderType == 'relearn'">
|
||
<image
|
||
src="/static/icon/fugou.png"
|
||
mode="aspectFill"
|
||
style="width: 100rpx; height: 100rpx"
|
||
></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle" style="line-height: 60rpx">
|
||
<text>{{ orderContet.remark }}</text>
|
||
</view>
|
||
<view class="orderPrice">
|
||
<text style="font-weight: bold"> </text>
|
||
</view>
|
||
<br clear="both" />
|
||
</view>
|
||
<br clear="both" />
|
||
</view>
|
||
|
||
<view class="orderContent" v-if="orderContet.orderType == 'vip'" style=" display: flex; align-items: center; justify-content: center;">
|
||
<image
|
||
src="/static/icon/vip.png"
|
||
mode="aspectFill"
|
||
style="width: 100rpx; height: 100rpx;"
|
||
></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle" style="line-height: 46rpx; margin-bottom: 0;">
|
||
{{ orderContet.vipBuyConfigEntity.title }}
|
||
<text class="vip_year" v-if="orderContet.vipBuyConfigEntity.year">({{ orderContet.vipBuyConfigEntity.year }}年)</text>
|
||
</view>
|
||
<br clear="both" />
|
||
</view>
|
||
<br clear="both" />
|
||
</view>
|
||
|
||
<view class="orderContent" v-if="orderContet.orderType == 'aiVip'||orderContet.orderType == 'upgradeAiVip'" style=" display: flex; align-items: center; justify-content: center;">
|
||
<image src="/static/icon/order_vip.png" mode="aspectFill" style="width: 100rpx; height: 100rpx; flex-shrink: 0;"></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle" style="line-height: 46rpx; margin-bottom: 0;">
|
||
{{ orderContet.aiBuyConfig.title }}<span style=" color: red;">（{{ orderContet.aiBuyConfig.count }}次）<span v-if="orderContet.orderType=='upgradeAiVip'">（VIP升级）</span></span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="orderContent" v-if="orderContet.orderType == 'point'">
|
||
<image
|
||
src="/static/icon/pay_3.png"
|
||
mode="aspectFill"
|
||
style="width: 100rpx; height: 100rpx"
|
||
></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle" style="line-height: 100rpx">
|
||
<text>充值 {{ orderContet.bookBuyConfigEntity.money }}天医币</text>
|
||
</view>
|
||
<br clear="both" />
|
||
</view>
|
||
<br clear="both" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order_item">
|
||
<view class="orderallpri">
|
||
<span style="color: #666; margin-right: 10rpx; float: left">商品总价 :
|
||
</span>
|
||
<span>￥</span>{{ orderContet.orderMoney }}
|
||
</view>
|
||
<view class="orderReal" v-if="orderContet.orderType == 'order'">
|
||
<span style="color: #666; margin-right: 10rpx; float: left">运费 :
|
||
</span>
|
||
<span>￥</span>{{ orderContet.shippingMoney }}
|
||
</view>
|
||
<view class="orderReal" v-if="orderContet.orderType == 'order'&&orderContet.vipDiscountAmount&&orderContet.vipDiscountAmount>0">
|
||
<span style="color: red; margin-right: 10rpx; float: left;">VIP专享立减 :
|
||
</span>
|
||
<span style=" color: red;">-￥{{orderContet.vipDiscountAmount}}</span>
|
||
</view>
|
||
<view class="orderReal" v-if="orderContet.orderType == 'order'&&orderContet.districtMoney&&orderContet.districtMoney>0">
|
||
<span style="color: red; margin-right: 10rpx; float: left;">活动立减 :
|
||
</span>
|
||
<span style=" color: red;">-￥{{orderContet.districtMoney}}</span>
|
||
</view>
|
||
<view class="orderReal" v-if="orderContet.jfDeduction > 0">
|
||
<span style="color: #666; margin-right: 10rpx; float: left"
|
||
>积分抵扣:
|
||
</span>
|
||
<span style="color: #fa2d12" v-if="orderContet.jfDeduction > 0"
|
||
>- </span
|
||
>
|
||
<span style="color: #fa2d12"> {{ orderContet.jfDeduction }}</span>
|
||
</view>
|
||
<view
|
||
class="orderReal"
|
||
v-if="orderContet.paymentMethod == 4 && orderContet.realMoney > 0"
|
||
>
|
||
<span style="color: #666; margin-right: 10rpx; float: left"
|
||
>天医币抵扣:
|
||
</span>
|
||
<span style="color: #fa2d12">- </span>
|
||
<span style="color: #fa2d12">￥{{ orderContet.realMoney }}</span>
|
||
</view>
|
||
|
||
<view class="orderReal" v-if="orderContet.orderStatus != 0">
|
||
<span style="color: #666; margin-right: 10rpx; float: left">
|
||
实付款:
|
||
</span>
|
||
<b v-if="orderContet.orderType == 'point'" style="color: #dd3c0c"
|
||
>￥ {{ orderContet.bookBuyConfigEntity.realMoney }}</b
|
||
>
|
||
<b style="color: #dd3c0c" v-else>
|
||
<template v-if="orderContet.realMoney">
|
||
￥{{ orderContet.realMoney }}
|
||
|
||
<text style="font-size: 24rpx;margin-left: 10rpx;">
|
||
<span
|
||
style=""
|
||
v-if="orderContet.paymentMethod == 1"
|
||
>微信支付</span
|
||
>
|
||
<span
|
||
style=""
|
||
v-if="orderContet.paymentMethod == 2"
|
||
>支付宝支付</span
|
||
>
|
||
<span
|
||
style=""
|
||
v-if="orderContet.paymentMethod == 3"
|
||
>苹果支付</span
|
||
>
|
||
<span
|
||
style=""
|
||
v-if="orderContet.paymentMethod == 4"
|
||
>
|
||
天医币支付
|
||
</span>
|
||
</text>
|
||
</template>
|
||
<template v-if="orderContet.realMoney == 0&&orderContet.jfDeduction==0">￥0</template>
|
||
<text
|
||
style="margin: 0 4rpx"
|
||
v-if="
|
||
orderContet.realMoney > 0 && orderContet.jfDeduction > 0
|
||
"
|
||
>
|
||
+
|
||
</text>
|
||
|
||
<text v-if="orderContet.jfDeduction > 0"
|
||
>{{ orderContet.jfDeduction }} 积分</text
|
||
>
|
||
</b>
|
||
</view>
|
||
<view class="orderReal" v-if="orderContet.remark">
|
||
<span style="color: #666; margin-right: 10rpx; float: left">
|
||
备注 :
|
||
</span>
|
||
<text style="color: #666; line-height: 36rpx; display: inline-block; max-width: 80%;">{{ orderContet.remark }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="order_item">
|
||
<view class="orderYunf">
|
||
<span style="color: #666; float: left">订单编号 : </span>
|
||
<text style="font-size: 24rpx; color: #666">{{ orderContet.orderSn }}
|
||
</text>
|
||
<u-tag
|
||
@click="handleCopy(orderContet.orderSn, '订单编号')"
|
||
borderColor="#7dc1f0"
|
||
color="#7dc1f0"
|
||
text="复制"
|
||
plain
|
||
style="float: right; margin-left: 15rpx;"
|
||
size="mini"
|
||
type="success"
|
||
></u-tag>
|
||
</view>
|
||
<view class="orderReal" style=" width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;">
|
||
<span style="color: #666; margin-right: 10rpx; float: left">
|
||
创建时间 :
|
||
</span>
|
||
<text style="font-size: 24rpx; color: #666">{{orderContet.createTime}}</text>
|
||
</view>
|
||
<view
|
||
class="orderReal"
|
||
v-if=" orderContet.orderStatus >= 1 && orderContet.orderStatus != 5 &&orderContet.paymentDate">
|
||
<span style="color: #666; margin-right: 10rpx; float: left">
|
||
付款时间 :
|
||
</span>
|
||
<text style="font-size: 24rpx; color: #666">{{orderContet.paymentDate}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="goods_nav_box">
|
||
<common-goods-nav
|
||
:iconList="iconList"
|
||
:customButton="customButton"
|
||
@submit="goBuyJie"
|
||
@clickIcon="clickIcon"
|
||
>
|
||
<!-- leftSlot -->
|
||
<template slot="leftSlot" slot-scope="slotProps">
|
||
<view
|
||
class="price_box order_bottom_box"
|
||
v-if="orderContet.orderStatus == 0"
|
||
>
|
||
<text class="price">
|
||
合计:
|
||
<text class="total">￥{{ orderContet.realMoney }}</text>
|
||
</text>
|
||
</view>
|
||
</template>
|
||
</common-goods-nav>
|
||
</view>
|
||
<!-- 对话框 -->
|
||
<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
|
||
<view class="tanchu">
|
||
<view class="dp_title" v-if="pjType != 'zhuiping'">添加评价</view>
|
||
<view class="dp_title" v-else>添加追评</view>
|
||
|
||
<view style="max-height: 1000rpx; overflow-y: scroll">
|
||
<uni-forms :modelValue="Pform">
|
||
</uni-forms>
|
||
<view
|
||
class="padding-bottom-sm flex padding-lr-sm"
|
||
style="border-bottom: 1px solid #eeeeee"
|
||
>
|
||
<view class="mb30" v-if="pjType != 'zhuiping'">
|
||
<span
|
||
:class="['star', Pform.star >= 1 ? 'starLight' : 'starGray']"
|
||
@click="getStar(1)"
|
||
></span>
|
||
<span
|
||
:class="['star', Pform.star >= 2 ? 'starLight' : 'starGray']"
|
||
@click="getStar(2)"
|
||
></span>
|
||
<span
|
||
:class="['star', Pform.star >= 3 ? 'starLight' : 'starGray']"
|
||
@click="getStar(3)"
|
||
></span>
|
||
<span
|
||
:class="['star', Pform.star >= 4 ? 'starLight' : 'starGray']"
|
||
@click="getStar(4)"
|
||
></span>
|
||
<span
|
||
:class="['star', Pform.star >= 5 ? 'starLight' : 'starGray']"
|
||
@click="getStar(5)"
|
||
></span>
|
||
</view>
|
||
<view class="mb30" v-if="pjType != 'zhuiping'">
|
||
<u-upload
|
||
:fileList="Pform.img"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
multiple
|
||
:maxCount="4"
|
||
width="80"
|
||
height="80"
|
||
:previewFullImage="true"
|
||
>
|
||
</u-upload>
|
||
</view>
|
||
<view class="flex-sub flexbox">
|
||
<i @click="showEmj()" :class="emojiIcon"></i>
|
||
<textarea
|
||
class="textarea"
|
||
v-model="Pform.comment"
|
||
@focus="InputFocus"
|
||
@blur="InputBlur"
|
||
@input="textareaBInput"
|
||
placeholder-style="font-size:24rpx;color:#aaaaaa;"
|
||
placeholder="请输入您要发送的内容"
|
||
></textarea>
|
||
</view>
|
||
<view class="">
|
||
<u-button
|
||
type="success"
|
||
@click="submitPJ"
|
||
v-if="pjType != 'zhuiping'"
|
||
>提交评价</u-button
|
||
>
|
||
<u-button type="success" @click="zhuiping" v-else
|
||
>提交追评</u-button
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="position: relative">
|
||
<emotion
|
||
@emotion="handleEmj"
|
||
:height="220"
|
||
v-if="isShowEmj"
|
||
:windowWidth="windowWidth"
|
||
></emotion>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup
|
||
mode="bottom"
|
||
:show="sheetListShow"
|
||
:round="10"
|
||
@close="sheetListShow = false"
|
||
>
|
||
<view
|
||
class="tanchu expresslist"
|
||
style="height: 500rpx; overflow-y: scroll"
|
||
>
|
||
<view class="title"> 请选择要查看包裹 </view>
|
||
<view class="list">
|
||
<view
|
||
class="item"
|
||
v-for="(item, index) in sheetList"
|
||
@click="seeExpressDetails(item)"
|
||
>
|
||
<h4 style="margin-bottom: 10rpx">包裹 {{ index + 1 }}</h4>
|
||
<view class=""
|
||
>运单号：{{ item.expressOrderSn }}
|
||
<u-tag
|
||
@click="copyData(item.expressOrderSn)"
|
||
size="mini"
|
||
class="copyCode"
|
||
text="复制单号"
|
||
plain
|
||
type="success"
|
||
/></view>
|
||
<view class="">发货时间：{{ item.createTime }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import emotion from "@/static/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue";
|
||
import $http from "@/config/requestConfig.js";
|
||
import { setPay, setPayAssign, setWXPay } from "@/config/utils";
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
iconList: [
|
||
{
|
||
text: "联系客服",
|
||
iconType: 1,
|
||
icon: "server-fill",
|
||
infoColor: "#666",
|
||
},
|
||
],
|
||
userRecordid: null, // 用户的评价状态
|
||
playData: {},
|
||
title: "Hello",
|
||
isShowEmj: false,
|
||
emojiIcon: "cuIcon-emoji",
|
||
message: "",
|
||
|
||
windowWidth: 0,
|
||
windowHeight: 500,
|
||
Pform: {
|
||
// 评价表单
|
||
star: 0,
|
||
comment: "",
|
||
img: [],
|
||
html: "",
|
||
},
|
||
pingID: null,
|
||
productID: null, // 订单商品id
|
||
imageStyles: {
|
||
width: 64,
|
||
height: 64,
|
||
border: {
|
||
color: "#89aa7d",
|
||
width: 2,
|
||
style: "dashed",
|
||
radius: "2px",
|
||
},
|
||
},
|
||
pingjiaShow: false,
|
||
logisticsData: [], // 快递信息列表
|
||
titleStat: "",
|
||
orderID: 0,
|
||
orderSn: "",
|
||
orderType: "",
|
||
orderContet: {},
|
||
goodsList: [],
|
||
deliverDetails: [
|
||
{
|
||
Traces: [],
|
||
},
|
||
], // 物流详情信息全部
|
||
deliverDetailsLength: null,
|
||
emoji: [],
|
||
Files: [],
|
||
pjType: "",
|
||
sheetList: [], // 面单数据
|
||
consigneeShow: false,
|
||
sheetListShow: false,
|
||
customButton: [],
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||
this.orderID = e.orderId;
|
||
this.orderType = e.orderType;
|
||
this.orderSn = e.orderSn;
|
||
console.log(this.orderID, "this.orderID");
|
||
},
|
||
onHide() {
|
||
this.sheetList = [];
|
||
},
|
||
onShow() {
|
||
this.getOrderList();
|
||
},
|
||
components: {
|
||
emotion
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
},
|
||
|
||
methods: {
|
||
async goBuyJie(data) {
|
||
if (data.text == "继续付款") {
|
||
this.goPay(this.orderContet);
|
||
} else if (data.text == "取消订单") {
|
||
this.canceOrder();
|
||
} else if (data.text == "确认收货") {
|
||
this.OverOrder();
|
||
} else if (data.text == "查看物流") {
|
||
this.seeExpressDetail(this.orderContet);
|
||
}
|
||
},
|
||
async clickIcon(data) {
|
||
console.log("index at line 532:", data);
|
||
if (data.text == "联系客服") {
|
||
this.kefu();
|
||
}
|
||
},
|
||
// 复制到剪切板
|
||
copyData(data) {
|
||
uni.setClipboardData({
|
||
data,
|
||
success: function () {
|
||
console.log("success");
|
||
},
|
||
});
|
||
},
|
||
seeExpressDetails(item) {
|
||
console.log(item, "item");
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/order/deliverDetail?orderSn=" +
|
||
this.orderContet.orderSn +
|
||
"&expressOrderSn=" +
|
||
item.expressOrderSn +
|
||
"&expressCompanyCode=" +
|
||
item.expressCompanyCode +
|
||
"&expressCompanyName=" +
|
||
item.expressCompanyName,
|
||
});
|
||
},
|
||
// 获得输入的表情数组
|
||
handleEmj(i) {
|
||
this.inputValue = i;
|
||
// console.log(this.inputValue);
|
||
if (i.emotioni == "[em_98]") {
|
||
//匹配最后一个表情符号并删除11。
|
||
this.Pform.comment = this.Pform.comment.replace(
|
||
/(\[[^\]]+\]|[\s\S])$/,
|
||
""
|
||
);
|
||
if (this.emoji.length > 0) {
|
||
this.emoji = this.emoji.slice(0, -1);
|
||
}
|
||
} else {
|
||
this.emoji.push({ tag: i.emotion, name: i.emotioni });
|
||
// console.log(this.emoji,'this.emoji')
|
||
this.Pform.comment += i.emotioni;
|
||
}
|
||
},
|
||
// 追加评论
|
||
zhuiping() {
|
||
let data = {
|
||
oid: this.userRecordid,
|
||
userId: this.userInfo.id,
|
||
bookid: this.productID,
|
||
conTent: this.Pform.comment,
|
||
};
|
||
$http.request({
|
||
url: "user/followUp/userFollowUp",
|
||
method: "POST",
|
||
data,
|
||
header: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: "追评成功！",
|
||
icon: "success",
|
||
});
|
||
this.pingjiaShow = false;
|
||
this.pjType = "";
|
||
(this.productID = null), (this.userRecordid = null);
|
||
this.Pform.comment = "";
|
||
this.Pform.html = "";
|
||
this.emoji = [];
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}, 2000);
|
||
}
|
||
});
|
||
},
|
||
textareaBInput(e) {
|
||
this.Pform.comment = e.detail.value;
|
||
},
|
||
showEmj() {
|
||
let bool = !this.isShowEmj;
|
||
if (bool) {
|
||
this.emojiIcon = "cuIcon-keyboard";
|
||
} else {
|
||
this.emojiIcon = "cuIcon-emoji";
|
||
}
|
||
|
||
this.isShowEmj = bool;
|
||
this.$emit("show");
|
||
},
|
||
InputFocus(e) {
|
||
this.isShowEmj = false;
|
||
this.emojiIcon = "cuIcon-emoji";
|
||
this.$emit("foc");
|
||
},
|
||
getStar(i) {
|
||
this.Pform.star = i;
|
||
},
|
||
deletePic() {
|
||
let that = this;
|
||
that.Pform.img.splice(0, 1);
|
||
},
|
||
afterRead(e) {
|
||
let that = this;
|
||
for (var i = 0; i < e.file.length; i++) {
|
||
uni.uploadFile({
|
||
url: this.$baseUrl + "/oss/fileoss",
|
||
filePath: e.file[i].url,
|
||
name: "file",
|
||
formData: {},
|
||
success: (res) => {
|
||
that.Pform.img.push({
|
||
url: JSON.parse(res.data).url,
|
||
});
|
||
},
|
||
});
|
||
}
|
||
},
|
||
closePingjia() {
|
||
this.pingjiaShow = false;
|
||
this.Pform.comment = "";
|
||
this.Pform.html = "";
|
||
this.emoji = [];
|
||
},
|
||
// 提交评价
|
||
submitPJ() {
|
||
if (this.Pform.comment != "") {
|
||
let data = {
|
||
userid: this.userInfo.id,
|
||
orderSn: this.orderSn,
|
||
bookid: this.productID,
|
||
content: this.Pform.comment,
|
||
starLevel: this.Pform.star,
|
||
images: this.Pform.img
|
||
};
|
||
$http.request({
|
||
url: "buy/record/UserRecordcomment",
|
||
method: "POST",
|
||
data,
|
||
header: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: "评价成功！",
|
||
icon: "success",
|
||
});
|
||
|
||
this.pingjiaShow = false;
|
||
this.Pform.comment = "";
|
||
this.Pform.html = "";
|
||
this.emoji = [];
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}, 2000);
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "请先输入您的评价内容 ！",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
// 添加评价
|
||
pingji(id) {
|
||
console.log(id);
|
||
this.pjType = "";
|
||
this.productID = id;
|
||
this.pingjiaShow = true;
|
||
},
|
||
// 联系客服
|
||
kefu() {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "微信号：yilujiankangkefu",
|
||
});
|
||
},
|
||
// 查看物流
|
||
seeExpressDetail(item) {
|
||
if (this.sheetList.length > 1) {
|
||
this.sheetListShow = true;
|
||
} else if (this.sheetList.length == 1) {
|
||
// 直接展示详情
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/order/deliverDetail?orderSn=" +
|
||
item.orderSn +
|
||
"&expressOrderSn=" +
|
||
this.sheetList[0].expressOrderSn,
|
||
});
|
||
}
|
||
},
|
||
handleCopy(value, title) {
|
||
this.$commonJS.handleCopy(value, title);
|
||
},
|
||
onPageJump(item) {
|
||
uni.navigateTo({
|
||
url: "/pages/order/deliverDetail?objId=" + item,
|
||
});
|
||
},
|
||
OverOrder() {
|
||
// 确认收货
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确认收货？",
|
||
success: (res) => {
|
||
let data = {
|
||
orderId: this.orderID,
|
||
orderStatus: "3",
|
||
};
|
||
if (res.confirm) {
|
||
uni.showLoading();
|
||
$http.request({
|
||
url: "book/buyOrder/update",
|
||
method: "POST",
|
||
data,
|
||
header: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "收货成功",
|
||
icon: "success",
|
||
duration: 1000,
|
||
});
|
||
this.getOrderList();
|
||
}
|
||
});
|
||
} else if (res.cancel) {
|
||
}
|
||
},
|
||
});
|
||
},
|
||
// 切换订单状态
|
||
orderTabCLi(e) {
|
||
this.orderListTab = e;
|
||
},
|
||
// 获取订单详情
|
||
getOrderList() {
|
||
this.$http
|
||
.request({
|
||
url: "common/buyOrder/commonOrderDetail",
|
||
method: "POST",
|
||
data: {
|
||
orderId: this.orderID,
|
||
},
|
||
header: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
this.customButton = [];
|
||
this.orderContet = res.data.buyOrder;
|
||
this.goodsList = res.data.productInfo;
|
||
this.consigneeShow = true;
|
||
if (
|
||
this.orderContet.orderStatus == 2 &&
|
||
this.sheetList.length > 0 &&
|
||
this.orderContet.orderStatus != 5
|
||
) {
|
||
this.customButton.push({
|
||
width: "160rpx",
|
||
text: "查看物流",
|
||
color: "#333",
|
||
backgroundColor: "#f0f0f0",
|
||
color: "#fff",
|
||
});
|
||
}
|
||
if (this.orderContet.orderStatus == 2) {
|
||
this.customButton.push({
|
||
width: "160rpx",
|
||
text: "确认收货",
|
||
|
||
color: "#fff",
|
||
});
|
||
}
|
||
if (this.orderContet.orderStatus == 0) {
|
||
this.customButton.push({
|
||
width: "160rpx",
|
||
text: "继续付款",
|
||
});
|
||
}
|
||
if (this.orderContet.orderStatus == 0) {
|
||
this.customButton.push({
|
||
width: "160rpx",
|
||
text: "取消订单",
|
||
color: "#333",
|
||
backgroundColor: "#f0f0f0",
|
||
});
|
||
}
|
||
if (this.orderContet.orderStatus == 0) {
|
||
this.titleStat = "待支付";
|
||
} else if (this.orderContet.orderStatus == 1) {
|
||
this.titleStat = "待发货";
|
||
} else if (this.orderContet.orderStatus == 2) {
|
||
this.titleStat = "待收货";
|
||
} else if (this.orderContet.orderStatus == 3) {
|
||
this.titleStat = "已完成";
|
||
}
|
||
if (
|
||
this.orderContet.orderStatus >= 2 &&
|
||
this.orderContet.orderType == "order" &&
|
||
this.orderContet.expressOrders
|
||
) {
|
||
this.sheetList = this.orderContet.expressOrders;
|
||
} else {
|
||
this.sheetList = [];
|
||
}
|
||
console.log(this.orderContet, "订单详情");
|
||
});
|
||
},
|
||
|
||
// 取消订单
|
||
canceOrder() {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定要取消订单吗？",
|
||
confirmText: "取消订单",
|
||
cancelText: "考虑一下",
|
||
confirmColor: "#c96713",
|
||
cancelColor: "#555",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.$http
|
||
.post(
|
||
"book/buyOrder/appDelete?orderId=" + this.orderContet.orderId
|
||
)
|
||
.then((res) => {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "取消订单成功",
|
||
});
|
||
uni.switchTab({
|
||
url: "./orderList",
|
||
});
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
// 支付
|
||
goPay(payItem) {
|
||
if (payItem.paymentMethod == 2) {
|
||
console.log("阿里支付");
|
||
setPay(
|
||
{
|
||
typePay: "alipay",
|
||
subject: "order",
|
||
totalAmount: payItem.realMoney,
|
||
type: 2,
|
||
relevanceoid: payItem.orderSn,
|
||
customerId: this.userInfo.id,
|
||
},
|
||
(res) => {
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "支付失败",
|
||
icon: "none"
|
||
});
|
||
}
|
||
this.getOrderList();
|
||
}
|
||
);
|
||
} else if (payItem.paymentMethod == 1) {
|
||
console.log("微信支付");
|
||
if (this.isAndorid == false) {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "很抱歉，苹果系统暂不支持微信支付",
|
||
showCancel: false,
|
||
});
|
||
return false;
|
||
} else {
|
||
let data1 = {
|
||
orderSn: payItem.orderSn,
|
||
buyOrderId: null,
|
||
totalAmount: payItem.realMoney,
|
||
};
|
||
console.log(data1, "data1");
|
||
setWXPay(data1, (res) => {
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
});
|
||
} else {
|
||
console.log(res);
|
||
if (res.data.errMsg.indexOf("User canceled") != -1) {
|
||
uni.showToast({
|
||
title: "用户取消支付",
|
||
icon: "none"
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "支付失败",
|
||
icon: "none"
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
} else if (payItem.paymentMethod == 3) {
|
||
// 苹果充值
|
||
console.log("苹果二次支付");
|
||
if (this.isAndorid) {
|
||
uni.showModal({
|
||
title: "提示",
|
||
showCancel: false,
|
||
content:
|
||
"很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单",
|
||
});
|
||
} else {
|
||
this.iphonepay(payItem);
|
||
}
|
||
}
|
||
},
|
||
|
||
// 商品内容跳转
|
||
goDetail(id, data) {
|
||
if (data.delFlag == -1) {
|
||
this.$commonJS.showToast("商品已下架");
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/goods/index?isMiaosha=1&id=${id}`,
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/static/mixin.scss";
|
||
@import "@/static/common.scss";
|
||
view,uni-view {
|
||
font-size: 28rpx;
|
||
}
|
||
.expresslist {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
.title {
|
||
text-align: center;
|
||
}
|
||
.item {
|
||
padding: 30rpx;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
}
|
||
.orderState {
|
||
color: #fff;
|
||
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0rpx;
|
||
padding: 6rpx 10rpx;
|
||
border-radius: 0 24rpx 24rpx 0;
|
||
font-size: 26rpx;
|
||
// font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
.orderState0 {
|
||
background-color: #e6a23c;
|
||
}
|
||
.orderState1 {
|
||
background-color: #409eff;
|
||
}
|
||
.orderState2 {
|
||
background-color: #f56c6c;
|
||
}
|
||
.orderState3 {
|
||
background-color: #7dc1f0;
|
||
}
|
||
.orderState5 {
|
||
background-color: #787878;
|
||
}
|
||
.guoqi {
|
||
font-size: 28rpx;
|
||
align-items: center;
|
||
color: red;
|
||
float: right;
|
||
line-height: 40rpx;
|
||
}
|
||
.star {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10rpx;
|
||
}
|
||
.starGray {
|
||
background: url(../../static/icon/star_greey.png) no-repeat;
|
||
background-size: contain;
|
||
}
|
||
.starLight {
|
||
background: url(../../static/icon/star_light.png) no-repeat;
|
||
background-size: contain;
|
||
}
|
||
.cuIcon-emoji {
|
||
background: url(../../static/biaoqing.png) no-repeat;
|
||
background-size: contain;
|
||
display: block;
|
||
margin-right: 20rpx;
|
||
width: 30px;
|
||
}
|
||
.cuIcon-keyboard {
|
||
background: url(../../static/biaoqing.png) no-repeat;
|
||
background-size: contain;
|
||
display: block;
|
||
width: 30px;
|
||
}
|
||
.mb30 {
|
||
margin-bottom: 30rpx;
|
||
overflow: hidden;
|
||
}
|
||
.tanchu {
|
||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||
position: relative;
|
||
|
||
.dp_title {
|
||
font-size: 32rpx;
|
||
margin-bottom: 50rpx;
|
||
color: #555;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dp_add {
|
||
position: absolute;
|
||
top: 40rpx;
|
||
right: 30rpx;
|
||
font-size: 22rpx;
|
||
background-color: #fd6004;
|
||
color: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 5rpx 10rpx;
|
||
|
||
.u-icon {
|
||
display: inline-block;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
|
||
.addressItem {
|
||
border: 2px dashed #d9d9d9;
|
||
border-radius: 10rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 20rpx 10rpx;
|
||
margin: 25rpx 0 0 0;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
|
||
.addrContent {
|
||
margin-left: 40rpx;
|
||
flex: 1;
|
||
|
||
.addrContentTop {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin: 0 0 15rpx 0;
|
||
position: relative;
|
||
|
||
.userName {
|
||
font-size: 35rpx;
|
||
font-weight: bold;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.userTel {
|
||
font-size: 25rpx;
|
||
color: #888;
|
||
}
|
||
|
||
.userMoren {
|
||
border: 1px solid #fd6004;
|
||
color: #fd6004;
|
||
padding: 3rpx 10rpx;
|
||
font-size: 22rpx;
|
||
border-radius: 10rpx;
|
||
margin: 0 0 0 20rpx;
|
||
}
|
||
|
||
.chooseCheck {
|
||
position: absolute;
|
||
top: 3rpx;
|
||
right: 6rpx;
|
||
}
|
||
}
|
||
|
||
.addrContentBottom {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.addressItem.addItem_style {
|
||
border-color: #fd6004;
|
||
}
|
||
|
||
.youhuiItem {
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 10rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 20rpx 10rpx;
|
||
margin: 25rpx 0 0 0;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.youhuiItem > view {
|
||
float: left;
|
||
}
|
||
|
||
.youhuiItem.youItem_style {
|
||
border-color: #fd6004;
|
||
}
|
||
}
|
||
.opShou {
|
||
border-color: $uni-color-success !important;
|
||
}
|
||
|
||
.adDefault {
|
||
padding: 30rpx 50rpx 30rpx 100rpx;
|
||
background-color: #fff;
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 2px dashed #b2e9d7;
|
||
margin: 0 0 5rpx 0;
|
||
position: relative;
|
||
|
||
.defalTop {
|
||
.userName {
|
||
font-size: 35rpx;
|
||
font-weight: bold;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.userTel {
|
||
font-size: 25rpx;
|
||
color: #888;
|
||
}
|
||
}
|
||
|
||
.defalBottom {
|
||
.userAddress {
|
||
font-size: 32rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.defalLeft {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 55rpx;
|
||
}
|
||
}
|
||
|
||
.orderList {
|
||
padding: 20rpx;
|
||
padding-top: 0;
|
||
margin-bottom: 120rpx;
|
||
|
||
.orderItem {
|
||
padding-top: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
|
||
.orderContent {
|
||
padding: 20rpx;
|
||
|
||
image {
|
||
width: 150rpx;
|
||
height: 180rpx;
|
||
margin-right: 20rpx;
|
||
float: left;
|
||
}
|
||
.goods_info {
|
||
float: left;
|
||
width: calc(100% - 180rpx) !important;
|
||
justify-content: space-between;
|
||
}
|
||
.itemJian {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
.orderTitle {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
margin: 0 0 20rpx 0;
|
||
float: left;
|
||
width: 540rpx;
|
||
}
|
||
|
||
.orderPrice {
|
||
font-size: 28rpx;
|
||
float: right;
|
||
width: 60rpx;
|
||
text-align: right;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.orderallpri {
|
||
text-align: right;
|
||
margin: 10rpx 0;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.orderReal {
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
margin: 10rpx 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.orderYunf {
|
||
text-align: right;
|
||
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.orderOper {
|
||
text-align: right;
|
||
margin: 40rpx 20rpx 0 0;
|
||
|
||
view {
|
||
margin-left: 20rpx;
|
||
padding: 10rpx 0;
|
||
display: inline-block;
|
||
width: 160rpx;
|
||
font-size: 25rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.opFix {
|
||
color: #555;
|
||
border: 1px solid #ddd;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.opCan {
|
||
color: #c96713;
|
||
border: 1px solid #eba00b;
|
||
border-radius: 30rpx;
|
||
}
|
||
.kefu {
|
||
float: left;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.order_block .orderContent:last-child{
|
||
padding-bottom: 30rpx;
|
||
}
|
||
.copyCode {
|
||
display: inline-block;
|
||
margin-left: 20rpx;
|
||
}
|
||
.deliverCntent {
|
||
padding: 32rpx;
|
||
position: relative;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
border-top: 1px solid #eee;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
|
||
.img_icon {
|
||
padding-right: 5px;
|
||
}
|
||
|
||
.moreBtnF {
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
height: 100%;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.wuliu {
|
||
.time {
|
||
color: #888;
|
||
}
|
||
|
||
.moreBtn {
|
||
display: inline-block;
|
||
width: 50px;
|
||
}
|
||
}
|
||
.address_box {
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
.order_top {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.user_info {
|
||
width: 100%;
|
||
float: left;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.name {
|
||
color: #838282;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.tel {
|
||
color: #838282;
|
||
}
|
||
}
|
||
|
||
.curriulum_title {
|
||
width: auto;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
float: left;
|
||
margin-right: 10rpx;
|
||
color: #333;
|
||
line-height: 40rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.normal_box {
|
||
margin-left: 5rpx;
|
||
width: calc(100% - 120rpx);
|
||
}
|
||
|
||
.goods_box {
|
||
padding: 20rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.rightArrow {
|
||
margin-left: 40rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.feng {
|
||
background-color: #fafafa;
|
||
margin: 0rpx 22rpx 0 0;
|
||
height: 140rpx !important;
|
||
width: 140rpx !important;
|
||
float: left;
|
||
border-radius: 14rpx;
|
||
// border: 1rpx solid #e9e9e9;
|
||
}
|
||
.booknameleft {
|
||
font-size: 32rpx;
|
||
width: calc(100% - 100rpx);
|
||
color: #070707;
|
||
letter-spacing: 0.5rpx;
|
||
font-weight: 600;
|
||
}
|
||
.order_item {
|
||
padding: 20rpx 20rpx;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
/deep/.goods_nav_box {
|
||
.left {
|
||
margin-top: -10rpx;
|
||
width: auto;
|
||
height: auto;
|
||
position: relative;
|
||
// overflow: hidden;
|
||
}
|
||
}
|
||
.delisted {
|
||
background-color: red;
|
||
color: #fff;
|
||
// padding: 2rpx 4rpx;
|
||
position: absolute;
|
||
border-radius: 4rpx;
|
||
font-size: 22rpx;
|
||
width: 100rpx;
|
||
text-align: center;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
left: calc((100% - 100rpx) / 2);
|
||
top: calc((100% - 40rpx) / 2);
|
||
}
|
||
.order_bottom_box {
|
||
margin-left: 20rpx;
|
||
|
||
.number {
|
||
font-size: 28rpx;
|
||
margin-right: 15rpx;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
.price {
|
||
.total {
|
||
font-size: 38rpx;
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
.vip_year{
|
||
padding-left: 20rpx;
|
||
color: #f5342b;
|
||
font-size: 30rpx;
|
||
}
|
||
</style>
|