Skip to content

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

完善订单信息

parent a6040332
Expand all 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-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
This diff is collapsed.
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
This diff is collapsed.
pages/order/index/index.vue
View file @ a99f5910
This diff is collapsed.
pages/order/order-detail.vue
View file @ a99f5910
This diff is collapsed.
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