Skip to content

M
mallapp
Commit a99f5910 authored by 罗超's avatar 罗超
Browse files
Options

完善订单信息

parent a6040332
Hide whitespace changes
Inline Side-by-side
Showing with 2779 additions and 142 deletions
components/goods/order-good-list.vue
View file @ a99f5910
......@@ -20,7 +20,7 @@
>
<view class="title-box">
<view class="title">商品清单</view>
<view class="tips">共6件</view>
<view class="tips">共{{list.length}}件</view>
</view>
<view class="goodbox update-goodbox" v-for="(y, i) in list" :key="i">
<image :src="y.cover_pic" mode="aspectFill" class="image" />
......
components/userorder/after-sale.vue 0 → 100644
View file @ a99f5910
<template>
<u-popup
mode="bottom"
border-radius="20"
:popup="false"
v-model="show"
:maskCloseAble="true"
length="auto"
:safeAreaInsetBottom="true"
@close="popupClose"
:z-index="9999"
close-icon="cross"
:closeable="true"
>
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
class="afterSale"
>
<view class="title-box">
<view class="title">商品清单</view>
<view class="tips">共{{ list.length }}件</view>
</view>
<view class="goodbox update-goodbox" v-for="(y, i) in list" :key="i">
<image :src="y.goods_info.pic_url" mode="aspectFill" class="image" />
<view class="goodinfo">
<view class="name">{{ y.goods_info.name }}</view>
<view class="attr">
<text>已选择 </text>
<text
v-for="(x, xi) in y.goods_info.attr_list"
:key="xi"
style="margin:0 5px;"
>
{{ x.attr_group_name }}：{{ x.attr_name }}
</text>
</view>
<view class="price">
<view class="left" :style="{ color: mc }">
<text class="small">￥</text>
<text>{{ y.total_original_price.split(".")[0] }}</text>
<text class="small"
>.{{ y.total_original_price.split(".")[1] || "00" }}</text
>
</view>
<view class="right">x{{ y.num }}</view>
</view>
<view style="display: flex; flex-direction: row-reverse;margin-top:10px;">
<u-button
shape="circle"
size="medium"
:custom-style="customStyle"
@click="goService(y.id)"
v-if="y.refund_status==0"
>申请售后</u-button
>
<text v-if="y.refund_status!=0" style="font-size:28rpx;color:gray;">
已申请售后（{{y.refund.status_text}}）
</text>
</view>
</view>
</view>
</scroll-view>
</u-popup>
</template>
<script>
export default {
props: ["list"],
data() {
return {
show: true,
mc: "",
customStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
};
},
mounted() {
this.mc = this.$uiConfig.mainColor;
},
methods: {
popupClose() {
this.$emit("close");
},
goService(id){
uni.navigateTo({
url: '/pages/order/after-sale/index?id='+id
});
}
},
};
</script>
<style>
.afterSale {
height: 50vh;
padding-bottom: 50px;
text-align: left !important;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow-y: auto;
position: relative;
padding: 69px 10px 0 10px;
}
.afterSale .title-box {
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
z-index: 2;
}
.afterSale .title-box .title {
font-size: 22px;
color: #000;
padding: 20px;
background: #fff;
flex: 1;
}
.afterSale .title-box .tips {
font-size: 13px;
color: #777;
flex: 1;
text-align: right;
padding-right: 12px;
}
.afterSale .goodbox.update-goodbox {
width: calc(100% - 20px);
padding-bottom: 10px;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 10px;
}
.afterSale .goodbox.update-goodbox:last-child {
border: none;
}
.afterSale .goodbox {
margin-bottom: 20px;
display: flex;
}
.afterSale .goodbox .image {
width: 200rpx;
height: 200rpx;
border-radius: 5px;
margin-right: 10px;
}
.afterSale .goodbox .goodinfo {
width: 1px;
flex: 1;
}
.afterSale .goodbox .goodinfo .name {
height: 16px;
font-size: 14px;
color: #232323;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 5px;
}
.afterSale .goodbox .goodinfo .attr {
height: 14px;
font-size: 12px;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 5px;
}
.afterSale .goodbox .goodinfo .price {
display: flex;
align-items: center;
}
.afterSale .goodbox .goodinfo .price .left {
font-size: 20px;
font-family: "oswald";
width: 1px;
flex: 1;
}
.afterSale .goodbox .goodinfo .price .left .small {
font-size: 13px;
}
.afterSale .goodbox .goodinfo .price .right {
color: #444;
font-size: 13px;
}
</style>
node_modules/uview-ui/components/u-picker/u-picker.vue
View file @ a99f5910
......@@ -32,35 +32,53 @@
</view>
</picker-view-column>
</picker-view>
<picker-view v-else :value="valueArr" @change="change" class="u-picker-view">
<picker-view v-else-if="mode == 'time'" :value="valueArr" @change="change" class="u-picker-view">
<picker-view-column v-if="!reset && params.year">
<view class="u-column-item" v-for="(item,index) in years" :key="index">
{{ item }}<text class="u-text">年</text>
{{ item }}<text class="u-text" v-if="showTimeTag">年</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.month">
<view class="u-column-item" v-for="(item,index) in months" :key="index">
{{ formatNumber(item)}}<text class="u-text">月</text>
{{ formatNumber(item)}}<text class="u-text" v-if="showTimeTag">月</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.day">
<view class="u-column-item" v-for="(item,index) in days" :key="index">
{{ formatNumber(item) }}<text class="u-text">日</text>
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">日</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.hour">
<view class="u-column-item" v-for="(item,index) in hours" :key="index">
{{ formatNumber(item) }}<text class="u-text">时</text>
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">时</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.minute">
<view class="u-column-item" v-for="(item,index) in minutes" :key="index">
{{ formatNumber(item) }}<text class="u-text">分</text>
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">分</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.second">
<view class="u-column-item" v-for="(item,index) in seconds" :key="index">
{{ formatNumber(item) }}<text class="u-text">秒</text>
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">秒</text>
</view>
</picker-view-column>
</picker-view>
<picker-view v-else-if="mode == 'selector'" :value="defaultSelector" @change="change" class="u-picker-view">
<picker-view-column>
<view class="u-column-item" v-for="(item,index) in range" :key="index">
<view class="u-line-1">
{{getItemValue(item, 'selector')}}
</view>
</view>
</picker-view-column>
</picker-view>
<picker-view v-else-if="mode == 'multiSelector'" :value="defaultSelector" @change="change" class="u-picker-view">
<picker-view-column v-for="(item,index) in range" :key="index">
<view class="u-column-item" v-for="(item1,index1) in item" :key="index1">
<view class="u-line-1">
{{getItemValue(item1, 'multiSelector')}}
</view>
</view>
</picker-view-column>
</picker-view>
......@@ -73,7 +91,6 @@
import provinces from '../../libs/util/province.js';
import citys from '../../libs/util/city.js';
import areas from '../../libs/util/area.js';
/**
* picker picker弹出选择器
* @description 此选择器有两种弹出模式：一是时间模式，可以配置年，日，月，时，分，秒参数 二是地区模式，可以配置省，市，区参数
......@@ -83,6 +100,7 @@
* @property {String Number} start-year 可选的开始年份，mode=time时有效（默认1950）
* @property {String Number} end-year 可选的结束年份，mode=time时有效（默认2050）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
* @property {String} cancel-color 取消按钮的颜色（默认#606266）
* @property {String} confirm-color 确认按钮的颜色（默认#2979ff）
* @property {String} default-time 默认选中的时间，mode=time时有效
......@@ -90,6 +108,9 @@
* @property {String} default-code 默认选中的地区，编号形式，mode=region时有效
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
* @property {String Number} z-index 弹出时的z-index值（默认1075）
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
* @property {Array} range 自定义选择的数据，mode=selector或mode=multiSelector时有效
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
* @event {Function} confirm 点击确定按钮，返回当前选择的值
* @event {Function} cancel 点击取消按钮，返回当前选择的值
* @example <u-picker v-model="show" mode="time"></u-picker>
......@@ -114,7 +135,26 @@
}
}
},
// 模式选择，region-地区类型，time-时间类型
// 当mode=selector或者mode=multiSelector时，提供的数组
range: {
type: Array,
default() {
return []
}
},
// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
defaultSelector: {
type: Array,
default() {
return [0]
}
},
// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
rangeKey: {
type: String,
default: ''
},
// 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
mode: {
type: String,
default: 'time'
......@@ -151,6 +191,11 @@
return [];
}
},
// 时间模式时，是否显示后面的年月日中文提示
showTimeTag: {
type: Boolean,
default: true
},
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
areaCode: {
type: Array,
......@@ -201,7 +246,7 @@
areas: areas[0][0],
province: 0,
city: 0,
area: 0
area: 0,
}
},
mounted() {
......@@ -210,7 +255,7 @@
computed: {
propsChange() {
// 引用这几个变量，是为了监听其变化
return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${this.defaultRegion}-${this.defaultCode}`;
return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${this.defaultRegion}-${this.areaCode}`;
},
regionChange() {
// 引用这几个变量，是为了监听其变化
......@@ -239,17 +284,23 @@
yearAndMonth(val) {
if (this.params.year) this.setDays();
},
// 微信和QQ小程序由于一些奇怪的原因，需要重新初始化才能显示正确的值
// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值
value(n) {
if (n) {
// #ifdef MP-WEIXIN || MP-QQ
this.reset = true;
setTimeout(() => this.init(), 10);
// #endif
}
}
},
methods: {
// 对单列和多列形式的判断是否有传入变量的情况
getItemValue(item, mode) {
// 目前(2020-05-25)uni-app对微信小程序编译有错误，导致v-if为false中的内容也执行，错误导致
// 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断
if(this.mode == mode) {
return typeof item == 'object' ? item[this.rangeKey] : item
}
},
// 小于10前面补0，用于月份，日期，时分秒等
formatNumber(num) {
return +num < 10 ? '0' + num : String(num);
......@@ -312,7 +363,7 @@
this.valueArr.push(0);
this.setSeconds();
}
} else {
} else if(this.mode == 'region') {
if (this.params.province) {
this.valueArr.push(0);
this.setProvinces();
......@@ -325,6 +376,11 @@
this.valueArr.push(0);
this.setAreas();
}
} else if(this.mode == 'selector') {
this.valueArr = this.defaultSelector;
} else if(this.mode == 'multiSelector') {
this.valueArr = this.defaultSelector;
this.multiSelectorValue = this.defaultSelector;
}
this.$forceUpdate();
},
......@@ -437,11 +493,24 @@
if (this.params.hour) this.hour = this.hours[this.valueArr[i++]];
if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]];
if (this.params.second) this.second = this.seconds[this.valueArr[i++]];
} else {
} else if(this.mode == 'region') {
if (this.params.province) this.province = this.valueArr[i++];
if (this.params.city) this.city = this.valueArr[i++];
if (this.params.area) this.area = this.valueArr[i++];
}
} else if(this.mode == 'multiSelector') {
let index = null;
// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
this.defaultSelector.map((val, idx) => {
if(val != e.detail.value[idx]) index = idx;
})
// 为了让用户对多列变化时，对动态设置其他列的变更
if(index != null) {
this.$emit('columnchange', {
column: index,
index: e.detail.value[index]
})
}
}
},
// 用户点击确定按钮
getResult(event = null) {
......@@ -454,10 +523,14 @@
if (this.params.hour) result.hour = this.formatNumber(this.hour || 0);
if (this.params.minute) result.minute = this.formatNumber(this.minute || 0);
if (this.params.second) result.second = this.formatNumber(this.second || 0);
} else {
} else if (this.mode == 'region') {
if (this.params.province) result.province = provinces[this.province];
if (this.params.city) result.city = citys[this.province][this.city];
if (this.params.area) result.area = areas[this.province][this.city][this.area];
} else if (this.mode == 'selector') {
result = this.valueArr;
} else if (this.mode == 'multiSelector') {
result = this.valueArr;
}
if (event) this.$emit(event, result);
this.close();
......@@ -471,12 +544,10 @@
position: relative;
z-index: 999;
}
.u-picker-view {
height: 100%;
box-sizing: border-box;
}
.u-picker-header {
width: 100%;
height: 90rpx;
......@@ -489,7 +560,6 @@
background: #fff;
position: relative;
}
.u-picker-header::after {
content: '';
position: absolute;
......@@ -500,14 +570,12 @@
right: 0;
left: 0;
}
.u-picker-body {
width: 100%;
height: 500rpx;
overflow: hidden;
background-color: #fff;
}
.u-column-item {
display: flex;
align-items: center;
......@@ -516,19 +584,16 @@
color: $u-main-color;
padding: 0 8rpx;
}
.u-text {
font-size: 24rpx;
padding-left: 8rpx;
}
.u-btn-picker {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.u-opacity {
opacity: 0.5;
}
......@@ -540,4 +605,4 @@
.u-btn-picker--tips {
color: $u-tips-color;
}
</style>
</style>
\ No newline at end of file
node_modules/uview-ui/components/u-steps/u-steps.vue
View file @ a99f5910
......@@ -3,7 +3,9 @@
<view class="u-steps">
<view class="u-steps-item" v-for="(item,index) in list" :key="index">
<view class="u-steps-item-num" v-if="mode == 'number' && current < index">{{index+1}}</view>
<view class="u-steps-item-dot" v-if="mode == 'dot'" :style="{backgroundColor: index <= current ? innerActiveColor : unActiveColor}"></view>
<view class="u-steps-item-dot" v-if="mode == 'dot'" :style="{backgroundColor: index <= current ? innerActiveColor : unActiveColor}">
<u-icon v-if="index <= current" name="success" size="28" :color="dotColor"></u-icon>
</view>
<u-icon size="22" class="u-steps-item-checked" :style="{backgroundColor: index <= current ? innerActiveColor : unActiveColor}"
v-if="mode == 'number' && current >= index" name="checkmark"></u-icon>
<text :style="{color: index <= current ? innerActiveColor : unActiveColor}">{{item.name}}</text>
......@@ -57,6 +59,10 @@
type: String,
default: ''
},
dotColor: {
type: String,
default: '#FFF'
},
// 未激活的颜色
unActiveColor: {
type: String,
......@@ -119,11 +125,12 @@
}
.u-steps-item-dot {
width: 20rpx;
height: 20rpx;
width: 36rpx;
height: 36rpx;
display: flex;
border-radius: 50%;
margin: 14rpx auto;
margin: 10rpx auto;
padding:0 4rpx;
}
.u-steps-item-checked {
......
node_modules/uview-ui/components/u-upload/u-upload.vue
View file @ a99f5910
......@@ -5,7 +5,7 @@
height: width + 'rpx'
}">
<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)">
<u-icon class="u-icon" name="close" size="20" color="#ffffff"></u-icon>
<u-icon class="u-icon" name="cross" size="20" color="#ffffff"></u-icon>
</view>
<u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false" height="16" class="u-progress" :percent="item.progress"></u-line-progress>
<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
......
pages.json
View file @ a99f5910
......@@ -3,12 +3,32 @@
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"pages": [{
"path": "pages/order/after-sale/refunds-list"
},
{
"path": "pages/order/index/index"
},
{
"path": "pages/order/order-detail",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/index"
},
{
"path": "pages/order/after-sale/refunds-detail"
},
{
"path": "pages/order/after-sale/refunds"
},
{
"path": "pages/order/after-sale/index"
},
{
"path": "pages/order-submit/order-submit"
},
......
pages/goods/goods.vue
View file @ a99f5910
......@@ -230,7 +230,8 @@ export default {
currentSku: {},
isExsitGoods: true,
pageTitle: "商品详情",
setting:{}
setting:{},
prevPage:""
};
},
components: {
......@@ -298,7 +299,7 @@ export default {
});
console.log(this.skuimage);
var richtext = this.g.detail;
richtext = richtext.replace(/<img/g, '<img style="max-width:100%"');
richtext = richtext.replace(/<img/g, '<img style="max-width:100%;height:auto !important;"');
this.detailContent = richtext;
this.loading = false;
this.initComments();
......
pages/order/after-sale/index.vue 0 → 100644
View file @ a99f5910
<template>
<view class="applyrefund" v-if="!loading">
<view class="head">
<view class="goods">
<image :src="good.goods_info.pic_url" mode="aspectFill" class="image" />
<view class="good-info">
<view class="name-box">
<view class="name">{{ good.goods_info.name }}</view>
</view>
<view class="price">
<text>单价：</text>
<text style="color: #222; margin-right: 30rpx;">{{
good.unit_price
}}</text>
<text>购买数量：</text>
<text style="color: #222;">{{ good.num }}</text>
</view>
</view>
</view>
</view>
<view class="apply">
<view class="item" @click="refundsHandler">
<image
src="@/static/images/icon/tui.png"
mode="aspectFill"
class="image"
/>
<view class="name">退货</view>
<view class="tips">退回收到的商品</view>
<view class="arrow">
<u-icon name="arrow" size="32" color="#333"></u-icon>
</view>
</view>
<view class="item">
<image
src="@/static/images/icon/huan.png"
mode="aspectFill"
class="image"
/>
<view class="name">换货</view>
<view class="tips">更换收到的商品</view>
<view class="arrow">
<u-icon name="arrow" size="32" color="#333"></u-icon>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: 0,
chosenId: 0,
good: {},
loading: false,
};
},
onLoad(option) {
console.log("jump in");
uni.showNavigationBarLoading();
this.id = option.id || 98180;
console.log(this.id)
this.chosenId = option.chosenId;
uni.setNavigationBarTitle({
title: "选择售后类型",
});
this.init();
},
methods: {
init() {
let h = this.apiheader();
this.request(
{
url: "",
header: h,
data: {
r: "api/order/apply-refund",
id: this.id,
},
},
(res) => {
this.good = res.data.detail;
this.loading = false;
uni.hideNavigationBarLoading();
}
);
},
refundsHandler() {
uni.navigateTo({
url: "/pages/order/after-sale/refunds?id=" + this.id,
});
},
},
};
</script>
<style>
.applyrefund {
height: 100vh;
background: #f5f5f5;
}
.applyrefund .goods {
display: flex;
padding: 20px;
margin-bottom: 20px;
background: #fff;
}
.applyrefund .goods .image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
margin-right: 40rpx;
}
.applyrefund .goods .good-info {
display: flex;
flex: 1;
flex-direction: column;
}
.applyrefund .goods .good-info .name-box {
flex: 1;
height: 1rpx;
color: gray;
font-size: 26rpx;
}
.applyrefund .goods .good-info .name-box .name {
height: 70rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.5;
}
.applyrefund .goods .good-info .price {
height: 32rpx;
color: gray;
font-size: 26rpx;
}
.applyrefund .apply {
margin: 0 20rpx;
padding: 0 30rpx;
background: #fff;
border-radius: 20rpx;
}
.applyrefund .apply .item {
padding: 40rpx 0;
border-bottom: 2rpx solid #eee;
display: flex;
align-items: center;
}
.applyrefund .apply .item .image {
width: 50rpx;
height: 50rpx;
margin-right: 30rpx;
}
.applyrefund .apply .item .name {
font-size: 34rpx;
font-weight: 600;
color: #000;
flex: 1;
width: 1rpx;
}
.applyrefund .apply .item .tips {
font-size: 26rpx;
flex: 1;
width: 1rpx;
color: gray;
text-align: right;
}
.applyrefund .apply .item .arrow {
width: 32rpx;
height: 32rpx;
margin-left: 24rpx;
}
</style>
pages/order/after-sale/refunds-detail.vue 0 → 100644
View file @ a99f5910
<template>
<view class="refundsDetails" v-if="!loading">
<u-top-tips ref="uTips"></u-top-tips>
<view class="head" :style="[headStyle]">
<view class="detail">
<view class="status">{{
d.status_text == "已退款" ? "已完成" : d.status_text
}}</view>
<view style="margin: 0 -40rpx;" v-if="d.status!=3">
<u-steps
:list="d.type==1?statusList:statusHuanList"
:current="currentStatus"
active-color="#FFF"
un-active-color="#eee"
:dot-color="mc"
></u-steps>
</view>
<!-- <view style="height:45px" v-if="d.status==3">&nbsp;</view> -->
</view>
</view>
<view class="block shenhe">
<view class="title" v-if="d.status == 1">商家正在审核</view>
<view class="title" v-else-if="d.status == 2">商家审核通过</view>
<view class="title" v-else>商家拒绝退货</view>
<view class="content" v-if="d.status == 1"
>商家已经收到了您的申请，会尽快和您取得联系，处理本次申请，请您耐心等待</view
>
<view class="content" v-else-if="d.status == 2">
尊敬的客户，让您久等了，很抱歉出现了让您不满意的情况，我们将配合您尽快完成本次售后申请
</view>
<view class="content" v-else>
审核留言：{{d.merchant_remark}}
</view>
</view>
<view
style="margin-top: 40rpx;"
class="block"
v-if="d.status_text=='已换货'"
>
<view class="good-title">换货物流</view>
<view class="filed">
<view class="key">快递公司</view>
<view class="val">
{{ d.merchant_express }}
</view>
</view>
<view class="filed">
<view class="key">快递单号</view>
<view class="val">
{{ d.merchant_express_no }}
</view>
</view>
<view class="filed">
<view class="key">商家留言</view>
<view class="val" style="color:#c0392b">
{{ d.merchant_remark }}
</view>
</view>
</view>
<view style="margin-top: 40rpx; padding-bottom: 16rpx;" class="block">
<view class="good-title">商品信息</view>
<view class="good-info" @click="reditrectToGoodHandler(d.detail[0].goods_info.id)">
<image
:src="d.detail[0].goods_info.pic_url"
class="img"
mode="aspectFill"
/>
<view class="detail">
<view class="name-box">
<view class="name">{{ d.detail[0].goods_info.name }}</view>
</view>
<view>
<text>单价：</text>
<text style="font-size: 30rpx; color: #000; margin-right: 40rpx;"
>￥{{ d.detail[0].unit_price }}</text
>
<text>数量：</text>
<text style="font-size: 30rpx; color: #000; margin-right: 40rpx;"
>￥{{ d.detail[0].num }}</text
>
</view>
</view>
</view>
<view class="customer">
<button
open-type="contact"
:send-message-title="d.detail[0].goods_info.name"
:send-message-path="path"
:send-message-img="d.detail[0].goods_info.pic_url"
:show-message-card="true"
>
<u-icon
style="display: inline-block; vertical-align: middle;"
size="36"
color="#111"
name="chat-o"
></u-icon>
<text style="margin-left: 10rpx;">联系客服</text>
</button>
</view>
</view>
<view style="margin-top: 40rpx;" class="block">
<view class="good-title">申诉原因</view>
<view class="reason">{{ d.remark }}</view>
<view class="grid-reasion">
<image
v-for="(x, i) in d.pic_list"
:key="i"
:src="x"
class="img"
@click="previewImage(i, d.pic_list)"
mode="aspectFill"
/>
</view>
</view>
<view style="margin-top: 40rpx;" class="block">
<view class="filed center">
<view class="key">服务单号</view>
<view class="val" style="font-size: 24rpx;">{{ d.order_no }}</view>
<view class="op">
<u-button size="mini" shape="circle" @click="paste(d.order_no)"
>复制</u-button
>
</view>
</view>
<view class="filed">
<view class="key">申请时间</view>
<view class="val">{{ d.created_at }}</view>
</view>
<view class="filed split">
<view class="key">服务类型</view>
<view class="val">{{ d.type == 1 ? "退货" : "换货" }}</view>
</view>
<template v-if="d.status == 2">
<view class="filed">
<view class="key">商品退回</view>
<view class="val">快递返回</view>
</view>
<view class="filed">
<view class="key">收件地址</view>
<view class="val">{{ d.refundAddress.address }}</view>
</view>
<view class="filed">
<view class="key">收件人</view>
<view class="val">{{ d.refundAddress.name }}</view>
</view>
<view class="filed">
<view class="key">联系电话</view>
<view class="val">{{ d.refundAddress.mobile }}</view>
</view>
<view class="filed">
<view class="key">快递备注</view>
<view class="val">{{ d.refundAddress.remark }}</view>
</view>
</template>
</view>
<view
style="margin-top: 40rpx;"
class="block"
v-if="d.status == 2 && (!d.express || d.express == '')"
>
<view class="good-title">商品寄回</view>
<view class="filed">
<view class="key">快递公司</view>
<view class="val" @click="showExpressHandler">
<text
v-if="forms.expressId == -1"
style="font-size: 13px; color: gray;"
>请选择快递公司</text
>
<text v-else>{{ forms.expressName }}</text>
<u-picker
mode="selector"
v-model="showExpress"
:default-selector="[0]"
:range="expressList"
range-key="name"
:safe-area-inset-bottom="true"
@confirm="chosenExpressHandler"
></u-picker>
</view>
</view>
<view class="filed">
<view class="key">快递单号</view>
<view class="val">
<input
type="text"
v-model="forms.expressNo"
placeholder="请输入快递单号"
/>
</view>
</view>
<view class="filed">
<view class="val">
<u-button
@click="submitHandler"
:ripple="true"
:hair-line="false"
:custom-style="btn2"
>
<u-loading mode="circle" v-if="submitStatus"></u-loading>
<text v-if="submitStatus" style="margin-left: 20rpx;">提交中</text>
<text v-if="!submitStatus">提 交</text>
</u-button>
</view>
</view>
</view>
<view
style="margin-top: 40rpx;"
class="block"
v-if="d.status == 2 && d.express && d.express != ''"
>
<view class="good-title">商品寄回</view>
<view class="filed">
<view class="key">快递公司</view>
<view class="val">
{{ d.express }}
</view>
</view>
<view class="filed">
<view class="key">快递单号</view>
<view class="val">
{{ d.express_no }}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
mc: "",
secondary: "",
headStyle: {},
statusList: [
{
name: "申请售后",
},
{
name: "同意受理",
},
{
name: "回寄商品",
},
{
name: "商家收货",
},
{
name: "退款",
},
],
statusHuanList: [
{
name: "申请售后",
},
{
name: "同意受理",
},
{
name: "回寄商品",
},
{
name: "商家换货",
}
],
d: {},
loading: true,
path: "",
btn2: {
flex: 1,
height: "100%",
borderRadius: "40px",
border: "none",
color: "#FFF",
fontSize: "13px",
width: "100%",
},
submitStatus: false,
expressList: [],
showExpress: false,
forms: {
expressId: -1,
expressNo: "",
expressName: "",
},
currentStatus: 0,
};
},
onLoad(option) {
this.id = option.id || 834;
this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.headStyle.background = `linear-gradient(to right, ${this.mc},80%, ${this.secondary})`;
this.btn2.background = this.$uiConfig.mainColor;
let p = getCurrentPages();
if (p.length > 1) {
this.prevPage = p[p.length - 2].rou;
}
this.init();
let t = getCurrentPages();
this.path = "/" + t[t.length - 1].route;
uni.setNavigationBarTitle({
title: "售后详情",
});
},
methods: {
reditrectToGoodHandler(id){
uni.navigateTo({
url: '/pages/goods/goods?id='+id
});
},
paste(value) {
uni.setClipboardData({
data: value,
});
// uni.showToast({
// title: "复制售后服务单号成功",
// position: "bottom",
// icon: "none",
// duration: 2000,
// });
},
submitHandler() {
let that = this;
that.submitStatus = true;
uni.requestSubscribeMessage({
tmplIds: that.d.template_message_list,
complete(res) {
let msg = "";
if (that.forms.expressId == -1) {
msg = "请选择快递公司";
} else if (that.forms.expressNo == "") {
msg = "请输入快递单号";
}
if (msg == "") {
let h = that.apiheader();
h["content-type"] = "application/x-www-form-urlencoded";
that.request(
{
url: "",
header: h,
data: {
r: "api/order/refund-send",
id: that.id,
express: that.forms.expressName,
customer_name: "",
express_no: that.forms.expressNo,
},
method: "POST",
},
(res) => {
if (res.code == 0) {
that.$refs.uTips.show({
title: "已提交快递信息，请等待商家签收",
type: "success",
duration: "2300",
});
that.init();
} else {
that.$refs.uTips.show({
title: res.msg,
type: "error",
duration: "2300",
});
}
that.submitStatus = false;
}
);
} else {
that.submitStatus = false;
that.$refs.uTips.show({
title: msg,
type: "error",
duration: "2300",
});
}
},
});
},
showExpressHandler() {
this.showExpress = true;
},
chosenExpressHandler(i) {
this.forms.expressId = this.expressList[i[0]].id;
this.forms.expressName = this.expressList[i[0]].name;
},
previewImage(i, images) {
uni.previewImage({
urls: images,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {
console.log(
"选中了第" +
(data.tapIndex + 1) +
"个按钮,第" +
(data.index + 1) +
"张图片"
);
},
fail: function (err) {
console.log(err.errMsg);
},
},
});
},
init() {
this.isover = false;
let h = this.apiheader();
this.request(
{
url: "",
header: h,
data: {
r: "api/order/refund-detail",
id: this.id,
},
},
(res) => {
this.d = res.data.detail;
this.expressList = res.data.express_list;
this.loading = false;
this.currentStatus = this.d.status - 1;
if (this.d.status_text == "已发货,待商家处理") {
this.currentStatus += 1;
} else if (this.d.status_text == "待退款" || this.d.status_text == "已换货") {
this.currentStatus += 2;
} else if (this.d.status_text == "已退款") {
this.currentStatus += 3;
}
}
);
},
},
};
</script>
<style>
.refundsDetails {
min-height: 100vh;
background: #f1f2f3;
padding-bottom: 40rpx;
}
.refundsDetails .head {
position: relative;
width: 140vw;
padding-right: 40vw;
}
.refundsDetails .head .detail {
padding: 40rpx 70rpx 60rpx 50rpx;
}
.refundsDetails .head .detail .status {
font-size: 16px;
color: #fff;
font-weight: 600;
margin-bottom: 18rpx;
}
.refundsDetails .block {
margin: 0rpx 20rpx;
margin-top: 0;
background: #fff;
border-radius: 20rpx;
padding: 60rpx 40rpx;
}
.refundsDetails .shenhe {
margin-top: -40rpx;
position: relative;
}
.refundsDetails .shenhe .title {
font-size: 30rpx;
color: #333;
margin-bottom: 20rpx;
}
.refundsDetails .shenhe .content {
font-size: 24rpx;
color: gray;
line-height: 1.5;
}
.refundsDetails .good-title {
font-size: 32rpx;
font-weight: 500;
color: #111;
margin-bottom: 40rpx;
}
.refundsDetails .good-info {
display: flex;
align-items: center;
}
.refundsDetails .good-info .img {
width: 140rpx;
height: 140rpx;
border-radius: 8rpx;
}
.refundsDetails .good-info .detail {
width: 1rpx;
flex: 1;
display: flex;
flex-direction: column;
margin-left: 30rpx;
height: 140rpx;
color: gray;
}
.refundsDetails .good-info .detail .name-box {
height: 1rpx;
flex: 1;
}
.refundsDetails .good-info .detail .name-box .name {
font-size: 28rpx;
max-height: 90rpx;
overflow: hidden;
word-break: break-all; /* break-all(允许在单词内换行。) */
text-overflow: ellipsis; /* 超出部分省略号 */
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
}
.refundsDetails .customer {
padding-top: 30rpx;
margin-top: 60rpx;
border-top: 2rpx solid #f5f5f5;
}
.refundsDetails .customer button {
width: 100%;
display: inline-block;
background: none;
border: none;
outline: none;
font-size: 14px;
font-weight: 600;
color: #111;
}
.refundsDetails .customer button::after {
border: none;
outline: none;
}
.refundsDetails .reason {
background: #f5f5f5;
border-radius: 8rpx;
padding: 20rpx;
font-size: 26rpx;
color: #222;
line-height: 1.5;
margin-bottom: 30rpx;
}
.refundsDetails .grid-reasion {
display: flex;
flex-wrap: wrap;
margin-right: 20rpx;
}
.refundsDetails .grid-reasion .img {
width: 120rpx;
height: 120rpx;
border-radius: 8rpx;
margin-bottom: 20rpx;
margin-right: 20rpx;
}
.refundsDetails .filed {
display: flex;
align-items: flex-start;
margin-bottom: 60rpx;
}
.refundsDetails .filed.center {
align-items: center;
}
.refundsDetails .filed.split {
padding-bottom: 60rpx;
border-bottom: 2rpx solid #f5f5f5;
}
.refundsDetails .filed .key {
width: 128rpx;
margin-right: 40rpx;
font-size: 28rpx;
color: gray;
}
.refundsDetails .filed .val {
font-size: 28rpx;
color: #333;
font-family: microsoft yahei;
flex: 1;
width: 1rpx;
}
.refundsDetails .filed .op {
margin-left: 20rpx;
}
.refundsDetails .filed .val input {
width: 100%;
font-size: 13px;
color: #111;
background: transparent;
border: none;
outline: none;
}
</style>
pages/order/after-sale/refunds-list.vue 0 → 100644
View file @ a99f5910
<template>
<view
class="orderindexStyle"
:style="{
height: contentHeight,
}"
v-if="!loading"
>
<view
style="height: calc(100vh - 50px); background: #fff;"
v-if="g.length == 0"
>
<u-empty text="暂无相关记录" mode="order"></u-empty>
</view>
<view
v-if="g.length > 0"
style="
height: calc(100vh - 50px);
width: calc(100vw);
overflow: hidden;
padding-bottom: 20px;
"
>
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' }"
>
<view class="orderList">
<view
class="listBox"
@click="redirectToDetail(item.id)"
v-for="(item, index) in g"
:key="index"
>
<view class="listBox_t">
<Text
style="
font-family: microsoft yahei;
font-size: 13px;
color: #777;
flex: 1;
width: 1rpx;
"
>单号：{{ item.order_no }}</Text
>
<view class="viewtype">
<image
class="img"
v-if="item.type == 1"
src="/static/images/icon/tui.png"
mode="aspectFill"
/>
<image
class="img"
v-if="item.type == 2"
src="/static/images/icon/huan.png"
mode="aspectFill"
/>
<text>{{ item.type == 1 ? "退货" : "换货" }}</text>
</view>
</view>
<view class="listBox_c">
<template v-if="item.detail.length == 1">
<view
v-for="(cx, ci) in item.detail"
:key="ci"
class="box_bottom"
>
<image
:src="cx.goods_info.pic_url"
style="width: 140rpx; height: 140rpx; border-radius: 8rpx;"
mode="aspectFill"
/>
<view
style="
width: 1rpx;
flex: 1;
display: flex;
flex-direction: column;
margin-left: 30rpx;
height: 140rpx;
"
>
<view style="height: 1rpx; flex: 1;">
<view class="topic_cont_text">{{
cx.goods_info.name
}}</view>
</view>
<view>
<text style="font-size: 24rpx; color: gray;"
>申请数量：</text
>
<text style="font-size: 26rpx; color: #000;">{{
cx.goods_info.num
}}</text>
</view>
</view>
</view>
<view class="progress">
<view class="status-text">{{ item.status_text=='已退款'?'已完成':item.status_text }}</view>
<view class="status-tips">
<text v-if="item.status == 1"
>请您耐心等待商家审核</text
>
</view>
<view class="status-arrow">
<u-icon name="arrow" size="32" color="#ccc"></u-icon>
</view>
</view>
</template>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import goodList from "@/components/goods/order-good-list2";
export default {
components: {
goodList,
},
data() {
return {
mainColor: "",
contentHeight: 0,
page: 1,
page_count: 1,
g: [],
loading: true,
showModal: false,
item: "",
index: 0,
goodData: [],
showGoodList: false,
isover: false,
customStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
themCustomStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
};
},
created() {
this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
this.mainColor = this.$uiConfig.mainColor;
this.themCustomStyle.color = this.mainColor;
this.themCustomStyle.borderColor = this.mainColor;
},
mounted() {
uni.setNavigationBarTitle({
title: "退还/售后",
});
},
onLoad(option) {
this.loading = true;
},
onShow(){
this.page=1
this.g=[]
this.loading = true;
this.init();
},
methods: {
redirectToDetail(id) {
uni.navigateTo({
url: "/pages/order/after-sale/refunds-detail?id=" + id,
});
},
init() {
this.isover = false;
let h = this.apiheader();
this.request(
{
url: "",
header: h,
data: {
r: "api/order/list",
status: 5,
page: this.page,
},
},
(res) => {
this.loading = false;
this.g = this.g.concat(res.data.list);
this.page_count = res.data.pagination.page_count;
if (this.page_count == 1) {
this.isover = true;
}
}
);
},
lower(e) {
if (this.page < this.page_count) {
this.page++;
this.init();
} else {
this.isover = true;
}
},
},
};
</script>
<style>
.orderindexStyle {
width: 100%;
height: 100%;
background: #f3f4f6;
}
.orderindexStyle .orderList {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.orderList .listBox {
/* width: 94%; */
background: #fff;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
width: 100%;
margin-top: 30rpx;
}
.orderList .listBox .listBox_t {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 20px;
color: #000;
}
.orderList .listBox .listBox_c {
width: 100%;
display: block;
/* flex-direction: column;
align-items: center; */
}
.orderList .listBox .box_bottom {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
/* margin-bottom: 20px; */
}
.orderList .handle {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-top: 10rpx;
}
.orderList .handle_item {
padding: 0 24rpx;
border: 1px solid #c8c9cc;
margin-left: 20rpx;
height: 50rpx;
border-radius: 25rpx;
line-height: 50rpx;
}
.orderindexStyle .loading {
width: 200rpx;
height: 200rpx;
background: #000000;
opacity: 0.7;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
left: 50%;
top: 30%;
margin-left: -100rpx;
z-index: 999;
}
.listBox_c .goodboxmore {
margin-bottom: 20px;
display: flex;
width: 100%;
align-items: center;
}
.listBox_c .goodboxmore .good-list {
display: flex;
flex: 1;
overflow-x: auto;
}
.listBox_c .goodboxmore .good-list .item {
width: 70px;
height: 70px;
border-radius: 5px;
margin-right: 10px;
}
.listBox_c .goodboxmore .infos {
margin-left: 15px;
}
.listBox_c .goodboxmore .infos .text {
text-align: center;
font-size: 12px;
margin-top: 5px;
}
.listBox_c .left {
flex: 1;
color: #232323;
font-size: 16px;
flex: 1;
font-family: "oswald";
}
.listBox_c .small {
font-size: 13px;
}
.listBox_c .topic_cont_text {
font-size: 30rpx;
max-height: 90rpx;
overflow: hidden;
word-break: break-all; /* break-all(允许在单词内换行。) */
text-overflow: ellipsis; /* 超出部分省略号 */
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
}
.listBox .viewtype {
color: #000;
display: flex;
align-items: center;
font-size: 14px;
font-weight: 600;
}
.listBox .viewtype .img {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.listBox_c .progress {
padding: 20rpx;
background: #f5f5f5;
display: flex;
margin-top: 40rpx;
align-items: center;
}
.listBox_c .progress .status-text {
font-size: 28rpx;
color: #444;
margin-right: 40rpx;
font-weight: 500;
}
.listBox_c .progress .status-tips {
font-size: 12px;
color: gray;
width: 1rpx;
flex: 1;
}
.listBox_c .progress .status-arrow {
width: 32rpx;
height: 32rpx;
margin-left: 40rpx;
}
</style>
pages/order/after-sale/refunds.vue 0 → 100644
View file @ a99f5910
<template>
<view class="refunds" v-if="!loading">
<u-top-tips ref="uTips"></u-top-tips>
<view class="head">
<view class="goods">
<image :src="good.goods_info.pic_url" mode="aspectFill" class="image" />
<view class="good-info">
<view class="name-box">
<view class="name">{{ good.goods_info.name }}</view>
</view>
<view class="price">
<text>单价：</text>
<text style="color: #222; margin-right: 30rpx;">{{
good.unit_price
}}</text>
<text>购买数量：</text>
<text style="color: #222;">{{ good.num }}</text>
</view>
</view>
</view>
<view class="num-box">
<view class="left">申请数量</view>
<view class="right">
<u-number-box :disabled="forms.type==1" :min="1" :max="good.num" v-model="good.num"></u-number-box>
</view>
</view>
</view>
<view class="apply">
<view class="title">
<view class="left">申请原因</view>
<view class="right">请您描述问题并上传收到的商品照片</view>
</view>
<view class="content">
<textarea
placeholder="请描述申请售后服务的具体原因"
maxlength="150"
placeholder-style="font-size:13px"
:value="forms.remark"
@input="inputremarkHandler"
/>
<view class="maxnum">{{ forms.remark.length }}/150</view>
</view>
<view class="upload">
<u-upload
:action="action"
:file-list="fileList"
max-count="9"
:custom-btn="true"
@on-success="uploadSuccessHandler"
>
<view slot="addBtn" class="slot-btn">
<u-icon name="photograph" size="40" color="#888"></u-icon>
<view class="mian-title">上传凭证</view>
<view class="sub-title">(最多9张)</view>
</view>
</u-upload>
</view>
<view style="color: #d81e06; font-size: 26rpx;"
>为了帮您更好的解决问题，请务必上传照片凭证</view
>
</view>
<view class="apply" v-if="forms.type==1">
<view class="title">
<view class="left">退款方式</view>
<view class="right active">原支付返回</view>
</view>
</view>
<view class="apply">
<view class="title">
<view class="left">返回方式</view>
<view class="right active">快递返回</view>
</view>
<view class="tips" style="text-align: left;">
<text
>商品寄回地址将在审核通过后以客服通知的形式告知，或者申请记录中查询。商铺不收取快递附加费。</text
>
</view>
</view>
<view class="apply">
<view class="user">
<view
class="user-item"
style="padding-bottom: 40rpx; border-bottom: 2rpx solid #f5f5f5;"
>
<view class="icon">
<u-icon name="user-circle-o" size="32" color="#000"></u-icon>
</view>
<view>{{ good.order.name }}</view>
</view>
<view class="user-item" style="padding-top: 40rpx;">
<view class="icon">
<u-icon name="phone-circle-o" size="32" color="#000"></u-icon>
</view>
<view>{{ good.order.mobile }}</view>
</view>
</view>
</view>
<view class="tips">
<text>提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</text>
</view>
<view style="margin: 0 40rpx 40rpx 40rpx;">
<u-button
@click="submitHandler"
:ripple="true"
:hair-line="false"
:custom-style="btn2"
>
<u-loading mode="circle" v-if="submitStatus"></u-loading>
<text v-if="submitStatus" style="margin-left: 20rpx;">提交中</text>
<text v-if="!submitStatus">提 交</text>
</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: 0,
chosenId: 0,
good: {},
loading: false,
forms: {
id: 0,
type: 1,
pic_list: [],
refund_price: 0,
remark: "",
},
submitStatus: false,
fileList: [],
btn2: {
flex: 1,
height: "100%",
borderRadius: "40px",
border: "none",
color: "#FFF",
fontSize: "13px",
width: "100%",
},
action:
"https://wx.weibaoge.cn/web/index.php?_mall_id=1285&r=api/attachment/upload",
};
},
onLoad(option) {
console.log("jump in");
uni.showNavigationBarLoading();
this.id = option.id || 98180;
this.forms.type = option.type || 1;
this.forms.id = this.id;
this.chosenId = option.chosenId;
uni.setNavigationBarTitle({
title: "退货",
});
this.btn2.background = this.$uiConfig.mainColor;
this.init();
},
methods: {
init() {
let h = this.apiheader();
this.request(
{
url: "",
header: h,
data: {
r: "api/order/apply-refund",
id: this.id,
},
},
(res) => {
this.good = res.data.detail;
if (this.forms.type == 1) {
this.forms.refund_price = this.good.total_price;
}
this.loading = false;
uni.hideNavigationBarLoading();
}
);
},
inputremarkHandler(e) {
this.forms.remark = e.detail.value;
},
uploadSuccessHandler(data, index, lists) {
console.log(JSON.parse(data));
let r = JSON.parse(data);
this.forms.pic_list.push(r.data.url);
},
submitHandler() {
let that = this;
uni.requestSubscribeMessage({
tmplIds: that.good.template_message_list,
complete(res) {
if (!that.submitStatus) {
that.submitStatus = true;
let msg = "";
if (that.forms.remark == "") {
msg = "亲，请描述一下你遇到的问题吧";
} else if (that.forms.pic_list.length == 0) {
msg = "亲，请上传一张说明截图吧";
}
if (msg == "") {
let h = that.apiheader();
h["content-type"] = "application/x-www-form-urlencoded";
that.forms["r"] = "api/order/refund-submit";
that.request(
{
url: "",
header: h,
data: that.forms,
method: "POST",
},
(res) => {
console.log(res);
if (res.code == 0) {
uni.showModal({
content: "提交售后申请成功，稍后客服专员将与您取得联系。",
showCancel: false,
confirmText: "查看记录",
success: function (res) {
if (res.confirm) {
uni.navigateTo({
url: "/pages/order/after-sale/refunds-list",
});
}
that.submitStatus = false;
},
});
} else {
that.submitStatus = false;
that.$refs.uTips.show({
title: res.msg,
type: "error",
duration: "2300",
});
}
}
);
} else {
that.submitStatus = false;
that.$refs.uTips.show({
title: msg,
type: "error",
duration: "2300",
});
}
}
},
});
},
},
};
</script>
<style>
.refunds {
background: #f5f5f5;
}
.refunds .tips {
margin: 40rpx 0;
text-align: center;
color: gray;
font-size: 12px;
}
.refunds .goods {
display: flex;
padding: 20px;
background: #fff;
}
.refunds .goods .image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
margin-right: 40rpx;
}
.refunds .goods .good-info {
display: flex;
flex: 1;
flex-direction: column;
}
.refunds .goods .good-info .name-box {
flex: 1;
height: 1rpx;
color: gray;
font-size: 26rpx;
}
.refunds .goods .good-info .name-box .name {
height: 70rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.5;
}
.refunds .goods .good-info .price {
height: 32rpx;
color: gray;
font-size: 26rpx;
}
.refunds .head {
padding-bottom: 20rpx;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
background: #fff;
}
.refunds .head .num-box {
padding: 20px;
border-top: 2rpx solid #f5f5f5;
display: flex;
align-items: center;
}
.refunds .head .num-box .left {
font-size: 32rpx;
color: #000;
width: 1rpx;
flex: 1;
font-weight: 600;
}
.refunds .head .num-box .right {
margin-left: 10rpx;
}
.refunds .apply {
margin: 40rpx 20rpx 0 20rpx;
padding: 40rpx 30rpx;
background: #fff;
border-radius: 20rpx;
}
.refunds .apply .title {
display: flex;
align-items: center;
}
.refunds .apply .title .left {
flex: 1;
width: 1rpx;
font-size: 30rpx;
font-weight: 600;
color: gray;
}
.refunds .apply .title .right {
color: gray;
text-align: right;
font-size: 26rpx;
}
.refunds .apply .title .right.active {
color: #111;
text-align: right;
font-size: 32rpx;
font-weight: 600;
}
.refunds .apply .tips {
margin-top: 20rpx;
font-size: 12px;
color: gray;
}
.refunds .apply .content {
margin: 40rpx 0 40rpx 0;
position: relative;
}
.refunds .apply .content .maxnum {
font-size: 24rpx;
position: absolute;
bottom: 10rpx;
right: 10rpx;
color: gray;
}
.refunds .apply .content textarea {
height: 140rpx;
background: #f5f5f5;
padding: 15px;
font-size: 26rpx;
color: #000;
line-height: 1.5;
border-radius: 6rpx;
}
.refunds .apply .upload {
margin-bottom: 20rpx;
}
.refunds .apply .user {
font-size: 14px;
font-weight: 600;
color: #000;
}
.refunds .apply .user .user-item {
display: flex;
align-items: center;
}
.refunds .apply .user .user-item .icon {
width: 32rpx;
height: 32rpx;
margin-right: 20rpx;
}
.slot-btn {
width: 140rpx;
height: 140rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: rgb(244, 245, 246);
border-radius: 10rpx;
}
.slot-btn .mian-title {
font-size: 28rpx;
color: #888;
font-weight: 600;
margin: 10rpx 0;
}
.slot-btn .sub-title {
color: #999;
font-size: 26rpx;
font-family: "microsoft yahei" !important;
}
.refunds .apply .item {
padding: 40rpx 0;
border-bottom: 2rpx solid #eee;
display: flex;
align-items: center;
}
/* .refunds .apply .item .image {
width: 50rpx;
height: 50rpx;
margin-right: 30rpx;
}
.refunds .apply .item .name {
font-size: 34rpx;
font-weight: 600;
color: #000;
flex: 1;
width: 1rpx;
}
.refunds .apply .item .tips {
font-size: 26rpx;
flex: 1;
width: 1rpx;
color: gray;
text-align: right;
}
.refunds .apply .item .arrow {
width: 32rpx;
height: 32rpx;
margin-left: 24rpx;
} */
</style>
pages/order/index/index.vue
View file @ a99f5910
<template>
<view class="orderindexStyle" :style="{ height: contentHeight }">
<u-tabs
:list="list"
:is-scroll="false"
:current="current"
@change="change"
:active-color="mainColor"
bg-color="#f3f4f6"
></u-tabs>
<u-empty v-if="g.length == 0" text="暂无相关订单" mode="order"></u-empty>
<view
class="orderindexStyle"
:style="{
height: contentHeight,
}"
>
<view style="padding: 10px 0; background: #fff;">
<u-tabs
:list="list"
:is-scroll="false"
:current="current"
@change="change"
:active-color="mainColor"
bg-color="#FFF"
height="80"
></u-tabs>
</view>
<view
style="height: calc(100vh - 50px); background: #fff;"
v-if="g.length == 0"
>
<u-empty text="暂无相关订单" mode="order"></u-empty>
</view>
<view
v-if="g.length > 0"
......@@ -16,7 +29,7 @@
height: calc(100vh - 50px);
width: calc(100vw);
overflow: hidden;
padding-top: 10px;
padding-bottom: 20px;
"
>
<scroll-view
......@@ -30,7 +43,7 @@
<view class="listBox" v-for="(item, index) in g" :key="index">
<view class="listBox_t">
<Text>订单号：{{ item.order_no }}</Text>
<Text>{{ item.status_text }}</Text>
<Text style="color: gray;">{{ item.status_text }}</Text>
</view>
<view class="listBox_c">
<template v-if="item.detail.length == 1">
......@@ -38,67 +51,33 @@
v-for="(cx, ci) in item.detail"
:key="ci"
class="box_bottom"
@click="redirectToDetail(item.id)"
>
<image
:src="cx.goods_info.pic_url"
style="width: 75px; height: 75px;"
style="width: 80px; height: 80px; border-radius: 2px;"
mode="aspectFill"
/>
<view
style="
width: calc(100% - 85px);
height: 75px;
display: flex;
flex-direction: column;
margin-left: 10px;
justify-content: space-between;
"
>
<view style="margin-left: 15px; flex: 1;">
<Text class="topic_cont_text">{{
cx.goods_info.name
}}</Text>
<view
style="
width: calc(100% - 85px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
<view
v-for="(attr, index2) in cx.goods_info.attr_list"
:key="index2"
>
<Text
style="
color: #a0a09d;
font-size: 24rpx;
margin-right: 5rpx;
"
>规格:{{ attr.attr_name }}</Text
>
</view>
</view>
<view
style="
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
"
</view>
<view style="margin-left: 15px;">
<text style="font-size: 10px;">￥</text>
<text style="font-size: 17px;">{{
item.total_price.toString().split(".")[0]
}}</text>
<text style="font-size: 11px;"
>.{{
item.total_price.toString().split(".")[1] || "00"
}}</text
>
<Text style="color: #a0a09d; font-size: 24rpx;"
>X{{ cx.num }}</Text
>
<Text style="font-size: 24rpx;"
>￥{{ cx.total_price }}</Text
>
</view>
</view>
</view>
</template>
<template v-else>
<view class="goodboxmore">
<view class="goodboxmore" @click="redirectToDetail(item.id)">
<view class="good-list">
<view style="white-space: nowrap;">
<image
......@@ -110,45 +89,94 @@
/>
</view>
</view>
<view class="infos">
<view class="infos" @click.stop="showGoodListHandler(index)">
<view>
<text style="font-size: 10px;">￥</text>
<text style="font-size: 17px;">{{
item.total_price.toString().split(".")[0]
}}</text>
<text style="font-size: 11px;"
>.{{
item.total_price.toString().split(".")[1] || "00"
}}</text
>
</view>
<view class="text">共{{ item.detail.length }}件</view>
<u-icon
name="ellipsis"
size="36"
@click="showGoodListHandler(index)"
></u-icon>
</view>
</view>
</template>
<Text style="font-size: 32rpx; text-align: right; width: 100%;"
>合计：￥{{ item.total_price }}
<Text
v-if="item.express_price != 0"
style="font-size: 20rpx; color: #a0a09d;"
>(含运费 ￥{{ item.express_price }})</Text
>
</Text>
<!-- TODO 样式结构修改-->
<view class="handle">
<view class="handle_item" @click="cancel(item, index)">
<Text>取消</Text>
</view>
<view class="handle_item">
<Text>付款</Text>
</view>
<u-button
shape="circle"
size="medium"
:custom-style="customStyle"
v-on:click.stop="cancel(item, index)"
v-if="
item.status_text == '待付款' || item.status_text == '待发货'
"
>取消订单</u-button
>
<!-- <u-button
shape="circle"
size="medium"
:custom-style="customStyle"
@click.stop="cancel(item, index)"
v-if="item.status_text == '待发货'"
>申请退货</u-button
> -->
<u-button
shape="circle"
size="medium"
:custom-style="customStyle"
v-if="item.status_text == '待评价'"
>评价晒单</u-button
>
<u-button
shape="circle"
size="medium"
:custom-style="themCustomStyle"
v-if="item.status_text == '待付款'"
>立即支付</u-button
>
<u-button
shape="circle"
size="medium"
:custom-style="
item.status_text == '待收货' ? customStyle : themCustomStyle
"
v-if="item.status_text != '待付款'"
@click.stop="buy(item)"
>再次购买</u-button
>
<u-button
shape="circle"
size="medium"
:custom-style="customStyle"
v-if="item.status_text == '待收货'"
>查看物流</u-button
>
<u-button
shape="circle"
size="medium"
:custom-style="customStyle"
v-if="item.status_text == '待收货'"
@click="shouhuoHandler(item.id)"
>确认收货</u-button
>
</view>
</view>
</view>
</view>
<u-divider
<!-- <u-divider
contentPosition="center"
v-if="isover"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
>没有更多订单了</u-divider
>
> -->
</scroll-view>
</view>
<!-- 加载中 -->
......@@ -163,6 +191,15 @@
:show-cancel-button="true"
:show-title="false"
@confirm="confirm"
:border-radius="20"
></u-modal>
<u-modal
v-model="showReviceModal"
content="是否确认收货？"
:show-cancel-button="true"
:show-title="false"
@confirm="submitReviceGoodHandler"
:border-radius="20"
></u-modal>
<u-toast ref="uToast" />
<good-list
......@@ -189,9 +226,9 @@ export default {
{ name: "待付款" },
{ name: "待发货" },
{ name: "待收货" },
{ name: "待评价" },
{ name: "已完成" },
{ name: "已取消" }
{ name: "待评价" },
// { name: "已完成" },
// { name: "已取消" },
],
mainColor: "",
contentHeight: 0,
......@@ -204,12 +241,24 @@ export default {
index: 0,
goodData: [],
showGoodList: false,
showReviceModal: false,
isover: false,
customStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
themCustomStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
template_message: [],
};
},
created() {
this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
this.mainColor = this.$uiConfig.mainColor;
this.themCustomStyle.color = this.mainColor;
this.themCustomStyle.borderColor = this.mainColor;
},
mounted() {
let currentPages = getCurrentPages();
......@@ -228,11 +277,43 @@ export default {
},
onLoad: function (option) {
//option为object类型，会序列化上个页面传递的参数
this.current = option.status;
this.current = option.status || -1;
this.loading = true;
this.init();
},
methods: {
redirectToDetail(id) {
uni.navigateTo({
url: "/pages/order/order-detail?id=" + id,
});
},
shouhuoHandler(id) {
this.showReviceModal = true;
this.submitId = id;
},
submitReviceGoodHandler() {
let that = this;
let h = this.apiheader();
uni.requestSubscribeMessage({
tmplIds: that.template_message_list,
complete(res) {
that.request(
{
url: "",
header: h,
data: {
r: "api/order/confirm",
id: that.submitId,
},
},
(res) => {
that.$refs.uToast.show({ title: res.msg });
that.change(4);
}
);
},
});
},
change(index) {
this.current = index;
this.page = 1;
......@@ -256,6 +337,7 @@ export default {
(res) => {
this.loading = false;
this.g = this.g.concat(res.data.list);
this.template_message = res.data.template_message;
this.page_count = res.data.pagination.page_count;
if (this.page_count == 1) {
this.isover = true;
......@@ -293,7 +375,7 @@ export default {
(res) => {
this.$refs.uToast.show({ title: res.msg });
this.g.splice(this.index, 1);
//this.g.splice(this.index, 1);
}
);
},
......@@ -306,6 +388,45 @@ export default {
console.log(this.goodData);
this.showGoodList = true;
},
buy(y) {
let forms = {
list: [],
address_id: 0,
};
let good = {
mch_id: y.mch_id,
goods_list: [],
distance: 0,
remark: "",
order_form: [],
use_integral: 0,
user_coupon_id: 0,
};
y.detail.forEach((x) => {
if (x.checked) {
let g = {
id: x.goods_id,
num: x.num,
cart_id: 0,
goods_attr_id: 0,
attr: [],
};
x.goods_info.attr_list.forEach((x) => {
g.attr.push({
attr_id: x.attr_id,
attr_group_id: x.attr_group_id,
});
});
good.goods_list.push(g);
}
});
forms.list.push(good);
uni.navigateTo({
url:
"/pages/order-submit/order-submit?formData=" +
encodeURIComponent(JSON.stringify(forms)),
});
},
},
};
</script>
......@@ -322,14 +443,15 @@ export default {
align-items: center;
}
.orderList .listBox {
width: 94%;
/* width: 94%; */
background: #fff;
border-radius: 10rpx;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
margin-bottom: 30rpx;
padding: 20px;
width: 100%;
margin-top: 30rpx;
}
.orderList .listBox .listBox_t {
width: 100%;
......@@ -337,8 +459,9 @@ export default {
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
margin: 10rpx 0;
font-size: 28rpx;
margin-bottom: 20px;
color: #000;
}
.orderList .listBox .listBox_c {
width: 100%;
......@@ -351,7 +474,7 @@ export default {
flex-direction: row;
align-items: center;
width: 100%;
margin-bottom: 18rpx;
margin-bottom: 20px;
}
.orderList .handle {
width: 100%;
......@@ -389,6 +512,7 @@ export default {
margin-bottom: 20px;
display: flex;
width: 100%;
align-items: center;
}
.listBox_c .goodboxmore .good-list {
display: flex;
......@@ -402,15 +526,12 @@ export default {
margin-right: 10px;
}
.listBox_c .goodboxmore .infos {
display: flex;
width: 80px;
margin-left: 15px;
}
.listBox_c .goodboxmore .infos .text {
text-align: center;
font-size: 13px;
width: 57px;
margin-right: 5px;
line-height: 70px;
font-size: 12px;
margin-top: 5px;
}
.listBox_c .left {
flex: 1;
......@@ -423,8 +544,8 @@ export default {
font-size: 13px;
}
.listBox_c .topic_cont_text {
font-size: 26rpx;
max-height: 70rpx;
font-size: 30rpx;
max-height: 90rpx;
overflow: hidden;
word-break: break-all; /* break-all(允许在单词内换行。) */
text-overflow: ellipsis; /* 超出部分省略号 */
......
pages/order/order-detail.vue
View file @ a99f5910
<template>
<scroll-view
:scroll-y="true"
@scroll="scrollHandler"
@scrolltoupper="scrollTopHandler"
style="height: 100vh;"
>
<view class="orderdetail" :style="[contentStyle]" v-if="!loading">
<view
class="headStatus"
:style="[
headStyle,
{
zIndex: scrollTop < 10 ? 'unset' : 2,
opacity: scrollTop < 10 ? '100' : scrollTop,
},
]"
>
<view class="arrow" @click="redirectPrev">
<u-icon name="arrow-left" size="48" color="#FFF"></u-icon>
</view>
<view class="title" v-if="scrollTop > 50">订单详情</view>
</view>
<view class="status" :style="[headStyle]">
<view class="status-title">{{ orders.status_text }}</view>
<view class="sub-title">
<u-icon
style="display: inline-block; vertical-align: middle;"
name="warning-o"
color="#FFF"
size="28"
></u-icon>
<text style="margin-left: 5px;">交易成功14天，系统自动确认完成</text>
<!-- TODO 交易情况说明 -->
</view>
</view>
<view class="block address">
<view class="icon">
<u-icon name="location-o" color="#111" size="40"></u-icon>
</view>
<view class="content">
<view class="concat">
<text style="font-weight: 700; margin-right: 20px;">{{
orders.name
}}</text>
<text>{{ orders.mobile }}</text>
</view>
<view class="address">{{ orders.address }}</view>
</view>
</view>
<view class="block goods">
<view class="item" v-for="(x, i) in orders.detail" :key="i">
<view style="display: flex;">
<image
:src="x.goods_info.pic_url"
class="img"
@click="redirectGoods(x.goods_id)"
mode="aspectFill"
/>
<view class="good-info">
<view class="good-name" @click="redirectGoods(x.goods_id)">{{
x.goods_info.name
}}</view>
<view class="good-attr">
<text>数量：{{ x.num }}</text>
<text
v-for="(y, yi) in x.goods_info.attr_list"
:key="yi"
style="margin-right: 5px;"
>
{{ y.attr_group_name }}：{{ y.attr_name }}
</text>
</view>
<view class="good-price">￥{{ x.total_original_price }}</view>
</view>
</view>
<view
style="
margin-top: 20px;
display: flex;
flex-direction: row-reverse;
align-items: center;
"
>
<u-button
shape="circle"
size="medium"
:custom-style="customStyle"
@click="joinCart(x)"
>加购物车</u-button
>
<view
v-if="x.refund_status == 1"
style="margin-right: 40rpx; font-size: 28rpx; color: gray;"
>
已申请售后（{{ x.refund.status_text }}）
</view>
</view>
</view>
</view>
<view class="block">
<view class="order-info-item">
<view class="field">
<view class="label">订单编号：</view>
<view class="content">{{ orders.order_no }}</view>
</view>
<view class="field">
<view class="label">下单时间：</view>
<view class="content">{{ orders.created_at }}</view>
</view>
</view>
<view class="order-info-item">
<view class="field">
<view class="label">支付方式：</view>
<view class="content">{{ orders.pay_type_text }}</view>
</view>
<view class="field">
<view class="label">支付时间：</view>
<view class="content">{{ orders.pay_time }}</view>
</view>
</view>
<view class="order-info-item">
<view class="field">
<view class="label">配送方式：</view>
<view class="content">{{
orders.detailExpress[0].express_content
}}</view>
</view>
</view>
</view>
<view class="block">
<view class="order-info-item">
<view class="field">
<view class="label">商品总额</view>
<view class="content right">￥{{ orders.total_goods_price }}</view>
</view>
<view class="field">
<view class="label">运费</view>
<view class="content right">+￥{{ orders.express_price }}</view>
</view>
<view class="field">
<view class="label">优惠</view>
<view class="content right"
>-￥{{ orders.coupon_discount_price }}</view
>
</view>
<view class="field">
<view class="label">积分抵扣</view>
<view class="content right"
>-￥{{ orders.integral_deduction_price }}</view
>
</view>
<view class="field">
<view class="label">&nbsp;</view>
<view class="content right">
<text style="margin-right: 10px;">实付款：</text>
<text
style="font-size: 11px; font-weight: 700;"
:style="{ color: mc }"
>￥</text
>
<text style="font-size: 17px;" :style="{ color: mc }">{{
orders.total_pay_price.split(".")[0]
}}</text>
<text style="font-size: 12px;" :style="{ color: mc }"
>.{{ orders.total_pay_price.split(".")[1] || "00" }}</text
>
</view>
</view>
</view>
</view>
<u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent">
<view style="display: flex;">
<u-icon name="like" size="20px" :color="mc"></u-icon>
<text style="margin-left: 5px;">为你推荐</text>
</view>
</u-divider>
<view style="padding: 12px;" v-if="recommend.length > 0">
<goodlist :list="recommend"></goodlist>
</view>
<view class="btn-box" v-if="orders.status_text != '已完成'">
<view class="item" v-if="orders.status_text == '待收货'">
<u-button
shape="circle"
size="medium"
@click="shouhuoHandler"
:custom-style="themCustomStyle"
>确认收货</u-button
>
</view>
<view
class="item"
v-if="orders.status_text == '待付款'"
>
<u-button
shape="circle"
size="medium"
:custom-style="themCustomStyle"
>立即支付</u-button
>
</view>
<view class="item" v-if="orders.status_text == '待收货'">
<u-button shape="circle" size="medium" :custom-style="customStyle"
>查看物流</u-button
>
</view>
<view class="item" v-if="orders.status_text == '待收货'">
<u-button
shape="circle"
size="medium"
:custom-style="customStyle"
@click="openAfterHandler"
>申请售后</u-button
>
</view>
<view
class="item"
v-if="orders.status_text == '待发货' && orders.cancel_status == 0"
>
<u-button
shape="circle"
size="medium"
:custom-style="customStyle"
@click="cancel"
>取消订单</u-button
>
</view>
<view
class="item"
style="line-height: 34px;"
v-if="orders.cancel_status == 2"
>
等待取消审核
</view>
<view
class="item"
style="
line-height: 34px;
font-size: 16px;
color: gray;
font-weight: 600;
"
v-if="orders.cancel_status == 1"
>
已取消
</view>
</view>
<after-sale
:list="orders.detail"
v-if="showAfter"
@close="closeAfterHandler"
></after-sale>
</view>
<u-modal
v-model="showModal"
content="是否取消订单？"
:show-cancel-button="true"
:show-title="false"
@confirm="confirm"
:border-radius="20"
></u-modal>
<u-modal
v-model="showReviceModal"
content="是否确认收货？"
:show-cancel-button="true"
:show-title="false"
@confirm="submitReviceGoodHandler"
:border-radius="20"
></u-modal>
<u-toast ref="uToast" />
</scroll-view>
</template>
<script>
import afterSale from "@/components/userorder/after-sale";
export default {
components: {
afterSale,
},
data() {
return {
mc: "",
secondary: "",
headStyle: {},
contentStyle: {},
orders: {},
loading: true,
showReviceModal: false,
id: 0,
customStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
scrollTop: 0,
recommend: [],
prevPage: "",
themCustomStyle: {
marginLeft: "20px",
padding: "0 30rpx",
color: "#FFF",
},
showAfter: false,
showModal: false,
};
},
onLoad(option) {
this.id = option.id || 63702;
this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.headStyle.background = `linear-gradient(to right, ${this.mc},80%, ${this.secondary})`;
let nav = uni.getMenuButtonBoundingClientRect();
this.headStyle.paddingTop = nav.top + "px";
this.contentStyle.paddingTop = nav.top + 44 + "px";
let p = getCurrentPages();
if (p.length > 1) {
this.prevPage = p[p.length - 2].rou;
}
this.themCustomStyle.background = this.mc;
this.init();
},
methods: {
shouhuoHandler() {
this.showReviceModal = true;
},
submitReviceGoodHandler() {
let that = this;
let h = this.apiheader();
uni.requestSubscribeMessage({
tmplIds: that.template_message_list,
complete(res) {
that.request(
{
url: "",
header: h,
data: {
r: "api/order/confirm",
id: that.id,
},
},
(res) => {
that.$refs.uToast.show({ title: res.msg });
that.init();
}
);
},
});
},
cancel(e, index) {
this.showModal = true;
},
confirm() {
let that = this;
uni.requestSubscribeMessage({
tmplIds: that.orders.template_message_list,
complete(res) {
that.showModal = false;
let h = that.apiheader();
that.request(
{
url: "",
header: h,
data: {
r: "api/order/cancel",
id: that.id,
},
},
(res) => {
uni.showToast({
title: "取消成功，请等待审核",
position: "bottom",
icon: "none",
duration: 2000,
});
that.init();
}
);
},
});
},
openAfterHandler() {
this.showAfter = true;
},
closeAfterHandler() {
this.showAfter = false;
},
init() {
let h = this.apiheader();
this.request(
{
url: "",
header: h,
data: {
r: "api/order/detail",
id: this.id,
},
},
(res) => {
this.orders = res.data.detail;
this.loading = false;
this.initRecommend(this.orders.detail[0].goods_id);
}
);
},
formatAttr(attr) {
let arr = JSON.parse(attr);
},
scrollHandler(e) {
this.scrollTop = e.detail.scrollTop;
//this.$forceUpdate();
},
scrollTopHandler() {
this.scrollTop = 0;
},
initRecommend(id) {
this.request(
{
url: "",
data: {
r: "api/goods/new-recommend",
goods_id: id,
type: "goods",
},
},
(res) => {
this.recommend = res.data.list;
}
);
},
redirectGoods(id) {
uni.navigateTo({
url: "/pages/goods/goods?id=" + id,
});
},
redirectPrev() {
if (this.prevPage != "") {
uni.navigateBack({
delta: 1,
});
}
},
joinCart(x) {
let h = this.apiheader();
h["content-type"] = "application/x-www-form-urlencoded";
this.request(
{
url: "",
data: {
r: "api/cart/add",
goods_id: x.goods_id,
attr: x.goods_info.goods_attr.id,
num: 1,
},
header: h,
method: "POST",
},
(res) => {
uni.showToast({
title: "加入购物车成功",
icon: "success",
duration: 2000,
});
this.popupClose();
}
);
},
},
};
</script>
<style>
.orderdetail {
overflow: hidden;
background: #f3f4f6;
padding-bottom: 50px;
}
.orderdetail .headStatus {
overflow: hidden;
position: relative;
width: 140vw;
padding-right: 40vw;
padding-bottom: 10px;
position: fixed;
left: 0;
right: 0;
top: 0;
display: flex;
}
.orderdetail .headStatus .arrow {
height: 24px;
margin: 5px 10px;
width: 24px;
}
.orderdetail .headStatus .title {
font-size: 18px;
color: #fff;
flex: 1;
width: 1px;
margin-left: 10px;
line-height: 34px;
}
.orderdetail .status {
padding-bottom: 25px;
position: relative;
width: 140vw;
padding-right: 40vw;
padding-top: 0 !important;
}
.orderdetail .status .status-title {
text-align: center;
font-size: 22px;
color: #fff;
margin-top: -18px;
}
.orderdetail .status .sub-title {
font-size: 14px;
color: #fff;
text-align: center;
margin-top: 10px;
font-weight: 300;
}
.orderdetail .block {
background: #fff;
border-radius: 10px;
margin-top: -10px;
padding: 20px;
position: relative;
margin-bottom: 20px;
}
.orderdetail .address {
display: flex;
margin-bottom: 20px;
}
.orderdetail .address .icon {
width: 20px;
height: 20px;
margin-right: 10px;
}
.orderdetail .address .content {
flex: 1;
}
.orderdetail .address .content .concat {
font-size: 14px;
color: #000;
}
.orderdetail .address .content .address {
font-size: 13px;
margin-top: 10px;
color: gray;
}
.orderdetail .goods {
/* display: flex; */
}
.orderdetail .goods .item {
margin-bottom: 20px;
/* display: flex; */
}
.orderdetail .goods .item:last-child {
margin-bottom: 0;
}
.orderdetail .goods .item .img {
width: 80px;
height: 80px;
border-radius: 2px;
}
.orderdetail .goods .item .good-info {
margin-left: 15px;
flex: 1;
flex-direction: column;
width: 1px;
display: flex;
}
.orderdetail .goods .item .good-info .good-name {
font-size: 15px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 24px;
}
.orderdetail .goods .item .good-info .good-attr {
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: gray;
flex: 1;
}
.orderdetail .goods .item .good-info .good-price {
font-size: 16px;
height: 20px;
}
.orderdetail .order-info-item {
padding: 20px 0;
border-bottom: 1px solid #f5f5f5;
}
.orderdetail .order-info-item:last-child {
border-bottom: none;
}
.orderdetail .order-info-item .field {
margin-bottom: 15px;
display: flex;
}
.orderdetail .order-info-item .field:last-child {
margin-bottom: 0;
}
.orderdetail .order-info-item .field .label {
width: 80px;
margin-right: 20px;
color: gray;
}
.orderdetail .order-info-item .field .content {
flex: 1;
width: 1px;
color: #000;
}
.orderdetail .order-info-item .field .content.right {
text-align: right;
}
.orderdetail .btn-box {
display: flex;
flex-direction: row-reverse;
height: 45px;
padding: 5px 20px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
border-top: 1px solid #f5f5f5;
background: #fff;
}
.orderdetail .btn-box .item {
/* margin-left: 20px; */
}
</style>
plugin/api.js
View file @ a99f5910
......@@ -13,16 +13,15 @@ export default {
data: param.data,
success: res => {
if (res.data.code != 0 && res.data.msg != "商品未上架") {
wx.showModal({
uni.showModal({
content: '网络开小差了，刷新页面重新加载吧',
showCancel: false
})
console.group("发生了异常情况");
console.error(res.data.msg);
console.groupEnd();
} else {
typeof success == "function" && success(res.data);
}
typeof success == "function" && success(res.data);
},
fail: (e) => {
console.log("网络请求fail:" + JSON.stringify(e));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment