code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-08-06 02:47:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 更新多个页面的样式和结构

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-07-01 16:05:08 +08:00
parent 6654c1de51
commit 5f293d929d
50 changed files with 3337 additions and 1837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
pages/order/afterSales/afterSales.vue
View File

@@ -27,34 +27,31 @@
:key="orderIndex"
>
<!-- 店铺名称 -->
<view class="seller-info u-flex u-row-between" v-if="current == 0">
<view class="seller-name">
<view class="name">{{ order.storeName }}</view>
</view>
<view class="order-sn">订单编号:{{ order.sn }}</view>
<view class="seller-info" v-if="current == 0">
<view class="seller-name wes">{{ order.storeName }}</view>
<view class="order-sn wes">订单编号:{{ order.sn }}</view>
</view>
<!-- 申请记录 选项卡 -->
<view class="seller-info u-flex u-row-between" v-if="current != 0">
<view class="order-sn"
>售后单号：{{ order.service_sn || order.sn }}</view
>
<view class="order-sn">{{ order.serviceType_text }}</view>
<view class="seller-info" v-if="current != 0">
<view class="order-sn wes">售后单号：{{ order.service_sn || order.sn }}</view>
<view class="order-sn service-type">{{ order.serviceType_text }}</view>
</view>
<view v-for="(sku, goodsIndex) in order.orderItems" :key="goodsIndex">
<view class="goods-item-view" @click="onDetail(order, sku)">
<view class="goods-img">
<u-image
border-radius="6"
width="100%"
height="100%"
:src="sku.image"
width="131rpx"
height="131rpx"
mode="aspectFill"
:src="getGoodsImage(sku, order, goodsIndex)"
></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ sku.name }}</view>
<view class="goods-title">{{ getGoodsName(sku) }}</view>
<!-- 如果商品多个则不显示每个商品价格-->
<view class="goods-price" v-if="order.orderItems.length <= 1">
￥{{unitPrice(order.flowPrice) }}
￥{{ unitPrice(order.flowPrice) }}
</view>
</view>
<view class="goods-num">
@@ -119,7 +116,7 @@
<!-- 申请记录 -->
</view>
<view class="btn-view u-flex u-row-right">
<view class="btn-view">
<!-- 售后申请 -->
<div class="sale" v-if="current === 0 && sku.afterSaleStatus">
@@ -172,7 +169,7 @@
order.groupAfterSaleStatus != 'ALREADY_APPLIED' &&
order.orderItems.length >= 1
"
class="btn-view u-flex u-row-between"
class="btn-view order-total"
>
<!-- 多个商品显示订单总价格 -->
<view class="cannot_apply">
@@ -252,6 +249,17 @@ export default {
this.change(this.current);
},
methods: {
getGoodsName(sku) {
return sku.goodsName || sku.name || "";
},
getGoodsImage(goods, order, index) {
let image = goods.image || goods.goodsImage || goods.thumbnail;
if (!image && order.groupImages) {
const images = String(order.groupImages).split(",");
image = images[index] || images[0];
}
return this.parseGoodsImageUrl(image);
},
/**
* 点击搜索执行搜索
*/
@@ -471,6 +479,8 @@ page,
.body-view {
overflow-y: auto;
height: calc(100vh - 44px - 80rpx - 104rpx);
padding: 0 20rpx;
box-sizing: border-box;
}
.u-tabs-search {
@@ -486,47 +496,70 @@ page,
.seller-view {
background-color: #fff;
margin: 20rpx 0rpx;
padding: 0rpx 20rpx;
margin: 20rpx 0;
padding: 0 20rpx 24rpx;
border-radius: 20rpx;
.seller-info {
height: 70rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
min-height: 70rpx;
padding: 20rpx 0 16rpx;
gap: 20rpx;
.seller-name {
flex-shrink: 0;
max-width: 40%;
font-size: 28rpx;
display: flex;
flex-direction: row;
.name {
margin-left: 15rpx;
margin-top: -2rpx;
}
font-weight: 600;
color: #333;
}
.order-sn {
flex: 1;
min-width: 0;
font-size: 22rpx;
color: #909399;
text-align: right;
}
.service-type {
flex-shrink: 0;
text-align: right;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 10rpx;
align-items: flex-start;
padding: 16rpx 0;
.goods-img {
flex-shrink: 0;
width: 131rpx;
height: 131rpx;
border-radius: 6rpx;
overflow: hidden;
}
.goods-info {
padding-left: 30rpx;
flex: 1;
min-width: 0;
padding: 0 20rpx;
.goods-title {
margin-bottom: 10rpx;
color: #333333;
font-size: 26rpx;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
}
.goods-specs {
@@ -537,23 +570,44 @@ page,
.goods-price {
font-size: 28rpx;
margin-bottom: 10rpx;
color: #ff5a10;
}
}
.goods-num {
width: 60rpx;
flex-shrink: 0;
min-width: 60rpx;
text-align: right;
color: $main-color;
font-size: 26rpx;
line-height: 1.4;
}
}
.btn-view {
padding: 16rpx 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
padding: 16rpx 0 0;
.after-line {
display: flex;
line-height: 90rpx;
flex-direction: row;
align-items: center;
gap: 15rpx;
}
}
.order-total {
justify-content: flex-start;
padding-top: 8rpx;
padding-bottom: 4rpx;
.cannot_apply {
text-align: left;
height: auto;
line-height: 1.5;
}
}
}

522
pages/order/afterSales/afterSalesDetail.vue
View File

@@ -1,7 +1,8 @@
<template>
<view class="content">
<u-form :model="form" ref="uForm">
<view class="after-sales-goods-detail-view">
<view class="page-wrap">
<scroll-view scroll-y class="page-scroll">
<u-form :model="form" ref="uForm">
<view class="after-sales-goods-detail-view">
<view class="header">
<view>
本次售后服务将由
@@ -12,88 +13,147 @@
<view>
<template v-for="(item,index) in sku.orderItems" :key="index">
<view class="goods-item-view" v-if="item.sn == sn"
@click="gotoGoodsDetail(sku.goods_id)">
@click="gotoGoodsDetail(sku.goodsId || sku.goods_id)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
<u-image
border-radius="6"
width="131rpx"
height="131rpx"
mode="aspectFill"
:src="getGoodsImage(item)"
></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ item.name }}</view>
<view class="goods-title">{{ getGoodsName(item) }}</view>
<view class="goods-price">
<span>￥{{ applyInfo.applyRefundPrice }}</span>
<span class="num">购买数量:{{ item.num }}</span>
<text>￥{{ unitPrice(applyInfo.applyRefundPrice) }}</text>
<text class="num">购买数量: {{ item.num }}</text>
</view>
</view>
</view>
</template>
</view>
<view class="after-num">
<view>申请数量</view>
<view>
<u-number-box :value="parseInt(form.num)" disabled-input :min="1" :max="parseInt(sku.num)" bg-color="#fff"
@change="valChange"></u-number-box>
</view>
<text class="after-num-label">申请数量</text>
<u-number-box
:value="parseInt(form.num)"
disabled-input
:min="1"
:max="parseInt(sku.num)"
bg-color="#fff"
@change="valChange"
></u-number-box>
</view>
</view>
<view class="body-view">
<!-- 退款原因 -->
<view class="opt-view">
<u-form-item label="申请原因" :label-width="150" >
<div style="width: 100%; text-align: right;" @click="reasonSelectShow = true">{{ form.reason || '请选择申请原因' }}</div>
<view class="opt-view form-block">
<view class="form-row" @click="openReasonPicker">
<text class="form-row-label">申请原因</text>
<view class="form-row-value">
<text class="form-value" :class="{ placeholder: !form.reason }">
{{ form.reason || '请选择申请原因' }}
</text>
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
</view>
</view>
<u-form-item label="申请说明" label-width="150" :border-bottom="false" class="desc-item">
<u-input
v-model="form.problemDesc"
type="textarea"
border="none"
input-align="right"
height="120"
placeholder="请描述申请售后的说明"
/>
</u-form-item>
<u-form-item label="申请说明" :label-width="150">
<u-input input-align="right" type="textarea" v-model="form.problemDesc" placeholder="请描述申请售后的说明" />
</view>
<!-- 退款方式 / 银行信息 -->
<view class="opt-view form-block">
<u-form-item label="退款方式" label-width="150" :border-bottom="true">
<view class="form-value">{{
applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'
}}</view>
</u-form-item>
<template v-if="
applyInfo.accountType === 'BANK_TRANSFER' &&
applyInfo.applyRefundPrice != 0
">
<u-form-item label="银行开户行" label-width="150" :border-bottom="true">
<u-input
v-model="form.bankDepositName"
border="none"
input-align="right"
placeholder="请输入银行开户行"
/>
</u-form-item>
<u-form-item label="银行开户名" label-width="150" :border-bottom="true">
<u-input
v-model="form.bankAccountName"
border="none"
input-align="right"
placeholder="请输入银行开户名"
/>
</u-form-item>
<u-form-item label="银行账号" label-width="150" :border-bottom="true" class="bank-account-item">
<u-input
v-model="form.bankAccountNumber"
border="none"
input-align="right"
placeholder="请输入银行账号"
/>
</u-form-item>
</template>
<u-form-item
v-if="form.serviceType !== 'RETURN_MONEY'"
label="返回方式"
label-width="150"
:border-bottom="false"
>
<view class="form-value">快递至第三方卖家</view>
</u-form-item>
</view>
<!-- 上传凭证 -->
<view class="opt-view">
<view class="opt-view upload-block">
<view class="img-title">上传凭证（最多5张）</view>
<view class="images-view">
<u-upload :file-list="fileList" :auto-upload="false" width="150"
@afterRead="onUploadAfterRead" :max-count="5"></u-upload>
<u-upload
:file-list="fileList"
:auto-upload="false"
width="150"
@afterRead="onUploadAfterRead"
:max-count="5"
></u-upload>
</view>
</view>
<view class="opt-view">
<u-form-item label="退款方式" :label-width="150">
<u-input :value="
applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'
" type="text" input-align="right" :disabled="true" />
</u-form-item>
<view v-if="
applyInfo.accountType === 'BANK_TRANSFER' &&
applyInfo.applyRefundPrice != 0">
<u-form-item label="银行开户行" :label-width="150">
<u-input v-model="form.bankDepositName" type="text" input-align="right" placeholder="请输入银行开户行" />
</u-form-item>
<u-form-item label="银行开户名" :label-width="150">
<u-input v-model="form.bankAccountName" type="text" input-align="right" placeholder="请输入银行开户名" />
</u-form-item>
<u-form-item label="银行账号" :label-width="150">
<u-input v-model="form.bankAccountNumber" type="text" input-align="right" placeholder="请输入银行账号" />
</u-form-item>
</view>
<u-form-item label="返回方式" :label-width="150">
<u-input type="text" input-align="right" value="快递至第三方卖家" :disabled="true" />
</u-form-item>
</view>
<view class="opt-tip">提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</view>
</view>
</u-form>
</u-form>
</scroll-view>
<view class="submit-view">
<u-button type="primary" ripple shape="circle" v-if="applyInfo.refundWay" :custom-style="customStyle"
@click="onSubmit">提交申请</u-button>
<u-button
type="primary"
ripple
shape="circle"
v-if="applyInfo.refundWay"
:custom-style="{ backgroundColor: $lightColor, width: '100%' }"
@click="onSubmit"
>提交申请</u-button>
</view>
<u-select mode="single-column" :list="reasonList" v-model:show="reasonSelectShow" @confirm="reasonSelectConfirm">
</u-select>
<u-select mode="single-column" :list="typeList" v-model:show="typeSelectShow" @confirm="typeSelectConfirm"></u-select>
<u-select mode="single-column" :list="returnList" v-model:show="returnSelectShow" @confirm="returnSelectConfirm">
</u-select>
<u-picker
v-model:show="reasonSelectShow"
:columns="[reasonList]"
keyName="label"
valueName="value"
title="申请原因"
@confirm="reasonSelectConfirm"
></u-picker>
<u-toast ref="uToast" />
</view>
</template>
@@ -107,7 +167,6 @@ import {
import city from "@/components/m-city/m-city";
import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
import { checkBankno } from "@/utils/Foundation";
import storage from "@/utils/storage.js";
export default {
component: {
@@ -127,34 +186,6 @@ export default {
//退款原因 弹出框
reasonSelectShow: false,
reasonList: [],
//退款方式为账号退款 账号类型弹出框
typeSelectShow: false,
typeList: [
{
value: "ALIPAY",
label: "支付宝",
},
{
value: "WEIXINPAY",
label: "微信",
},
{
value: "BANK_TRANSFER",
label: "银行卡",
},
],
//返回方式
returnSelectShow: false,
returnList: [
{
value: 1,
label: "快递至第三方卖家",
},
],
customStyle: {
backgroundColor: this.$lightColor,
},
applyInfo: {},
form: {
orderItemSn: "", // 订单sn
@@ -206,6 +237,19 @@ export default {
this.init(options.sn);
},
methods: {
getGoodsName(item) {
return item.goodsName || item.name || "";
},
getGoodsImage(item) {
const image = item.image || item.goodsImage || item.thumbnail;
return this.parseGoodsImageUrl(image);
},
gotoGoodsDetail(goodsId) {
if (!goodsId) return;
uni.navigateTo({
url: `/pages/product/goods?id=${this.form.skuId}&goodsId=${goodsId}`,
});
},
/** 获取申请原因下拉框数据 */
async getReasonActions(serviceType) {
uni.showLoading({
@@ -248,17 +292,24 @@ export default {
});
},
openReasonPicker() {
if (!this.reasonList.length) {
uni.showToast({
title: "暂无可选原因",
icon: "none",
});
return;
}
this.reasonSelectShow = true;
},
//退款原因
reasonSelectConfirm(e) {
this.form.reason = e[0].label;
reasonSelectConfirm(val) {
const selected = val?.value?.[0] || val?.[0];
if (selected) {
this.form.reason = selected.label || selected.text || "";
}
},
//退款方式
typeSelectConfirm(e) {
this.form.accountType = e[0].value;
this.form.accountType_label = e[0].label;
},
//返回方式
returnSelectConfirm(e) {},
//修改申请数量
valChange(e) {
@@ -269,6 +320,17 @@ export default {
this.form.images = urls;
});
},
showToast(message, type = "error") {
const text = message || (type === "success" ? "操作成功" : "操作失败");
if (this.$refs.uToast) {
this.$refs.uToast.show({ message: text, type });
return;
}
uni.showToast({
title: text,
icon: type === "success" ? "success" : "none",
});
},
//提交申请
onSubmit() {
//提交申请前检测参数
@@ -286,62 +348,48 @@ export default {
applyReturn(this.sn, this.form).then((resp) => {
if (this.$store.state.isShowToast){ uni.hideLoading() };
if (resp.data.success) {
this.$refs.uToast.show({ title: "提交成功", type: "success" });
this.showToast("提交成功", "success");
uni.redirectTo({
url: "/pages/order/afterSales/applySuccess",
});
} else {
this.$refs.uToast.show({ title: resp.data.message, type: "error" });
this.showToast(resp.data.message || "提交失败", "error");
}
});
},
//检测提交参数
handleCheckParams() {
if (this.$u.test.isEmpty(this.form.reason)) {
this.$refs.uToast.show({ title: "请选择 退款原因", type: "error" });
this.showToast("请选择退款原因");
return false;
}
if (this.$u.test.isEmpty(this.form.problemDesc)) {
this.$refs.uToast.show({ title: "请输入 退款说明", type: "error" });
this.showToast("请输入退款说明");
return false;
}
console.log(this.form.accountType)
if (this.form.accountType == "BANK_TRANSFER") {
// 银行开户行校验
if (
this.applyInfo.accountType === "BANK_TRANSFER" &&
this.applyInfo.applyRefundPrice != 0
) {
if (this.$u.test.isEmpty(this.form.bankDepositName)) {
this.$refs.uToast.show({
title: "请输入 银行开户行",
type: "error",
});
this.showToast("请输入银行开户行");
return false;
}
// 银行开户名校验
if (this.$u.test.isEmpty(this.form.bankAccountName)) {
this.$refs.uToast.show({
title: "请输入 银行开户名",
type: "error",
});
this.showToast("请输入银行开户名");
return false;
}
// 银行账号校验
if (this.$u.test.isEmpty(this.form.bankAccountNumber)) {
this.$refs.uToast.show({
title: "请输入 银行账号",
type: "error",
});
this.showToast("请输入银行账号");
return false;
} else if (this.$u.test.chinese(this.form.bankAccountName) === false) {
this.$refs.uToast.show({
title: "银行开户名输入错误",
type: "error",
});
}
if (this.$u.test.chinese(this.form.bankAccountName) === false) {
this.showToast("银行开户名需为中文");
return false;
} else if (this.$u.test.chinese(this.form.bankDepositName) === false) {
this.$refs.uToast.show({
title: "银行开户行输入错误",
type: "error",
});
}
if (this.$u.test.chinese(this.form.bankDepositName) === false) {
this.showToast("银行开户行需为中文");
return false;
}
}
@@ -353,16 +401,31 @@ export default {
</script>
<style lang="scss" scoped>
page,
.content {
page {
background: $page-color-base;
height: 100%;
}
.body-view {
margin-bottom: 150rpx;
.page-wrap {
display: flex;
flex-direction: column;
height: 100vh;
background: $page-color-base;
}
.page-scroll {
flex: 1;
height: 0;
box-sizing: border-box;
}
.body-view {
padding-bottom: 24rpx;
}
.after-sales-goods-detail-view {
background-color: #fff;
.header {
background-color: #f7f7f7;
color: #999999;
@@ -372,11 +435,7 @@ page,
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
@@ -385,78 +444,157 @@ page,
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 30rpx;
align-items: flex-start;
padding: 24rpx 30rpx;
background-color: #eef1f2;
.goods-img {
flex-shrink: 0;
width: 131rpx;
height: 131rpx;
border-radius: 6rpx;
overflow: hidden;
}
.goods-info {
padding-left: 30rpx;
flex: 1;
min-width: 0;
padding-left: 24rpx;
.goods-title {
margin-bottom: 10rpx;
margin-bottom: 12rpx;
color: $font-color-dark;
font-size: 26rpx;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 10rpx;
color: $light-color;
.num {
flex-shrink: 0;
margin-left: 16rpx;
font-size: 24rpx;
color: #999999;
}
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
}
.after-num {
margin: 0rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
margin: 0 30rpx;
padding: 24rpx 0;
border-top: 1px solid #f0f0f0;
.after-num-label {
font-size: 30rpx;
color: #333;
}
}
.opt-tip {
margin-top: 20rpx;
padding: 10rpx 30rpx;
padding: 10rpx 30rpx 30rpx;
font-size: 22rpx;
color: #999;
line-height: 1.6;
}
.opt-view {
background-color: #fff;
margin-top: 20rpx;
padding: 10rpx 30rpx;
.how-view {
}
.form-block {
padding: 0;
.form-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
border-bottom: 1px solid $page-color-base;
min-height: 100rpx;
padding: 0 30rpx;
border-bottom: 1px solid #f0f0f0;
.form-row-label {
flex-shrink: 0;
width: 150rpx;
font-size: 30rpx;
color: #333;
}
.form-row-value {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 8rpx;
}
}
.explain-view {
display: flex;
flex-direction: row;
:deep(.u-form-item) {
padding: 0 30rpx;
min-height: 100rpx;
}
:deep(.u-form-item__body) {
min-height: 100rpx;
align-items: center;
height: 150rpx;
}
:deep(.u-form-item__body__left__content__label) {
font-size: 30rpx;
color: #333;
}
:deep(.u-form-item__body__right__content__slot) {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
:deep(.u-input) {
padding: 0 !important;
}
:deep(.u-input__content) {
background: transparent !important;
}
:deep(.u-input__content__field-wrapper__field) {
font-size: 28rpx !important;
color: #666 !important;
}
}
.upload-block {
padding: 24rpx 30rpx 30rpx;
.img-title {
height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
font-size: 30rpx;
color: #333;
margin-bottom: 20rpx;
}
.images-view {
display: flex;
flex-direction: row;
@@ -464,26 +602,50 @@ page,
flex-wrap: wrap;
}
}
.item-apply-voucher {
width: 100%;
display: flex;
justify-content: flex-end;
}
.submit-view {
position: fixed;
z-index: 999;
bottom: 0px;
left: 0px;
margin-top: 100rpx;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
height: 100rpx;
width: 750rpx;
justify-content: flex-end;
display: flex;
align-items: center;
.form-value {
width: 100%;
padding-right: 32rpx;
text-align: right;
font-size: 28rpx;
color: #666;
&.placeholder {
color: #c0c4cc;
}
}
.desc-item {
:deep(.u-form-item__body) {
align-items: flex-start;
padding-top: 24rpx;
padding-bottom: 24rpx;
min-height: auto;
}
:deep(.u-form-item__body__left) {
padding-top: 8rpx;
}
:deep(.u-form-item__body__right__content__slot) {
justify-content: flex-end;
align-items: flex-start;
}
:deep(.u-input__content__field-wrapper__field) {
text-align: right !important;
}
:deep(.u-input__content__field-wrapper__field--placeholder) {
text-align: right !important;
}
}
.submit-view {
flex-shrink: 0;
z-index: 999;
box-sizing: border-box;
padding: 16rpx 32rpx calc(16rpx + env(safe-area-inset-bottom));
background-color: #ffffff;
border-top: 1px solid #f2f2f2;
}
</style>

130
pages/order/afterSales/afterSalesSelect.vue
View File

@@ -12,14 +12,19 @@
<template v-for="(item,index) in sku.orderItems" :key="index">
<view class="goods-item-view" v-if="item.sn == sn" @click="navigateToGoodsDetail(sku.skuId)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
<u-image
border-radius="6"
width="131rpx"
height="131rpx"
mode="aspectFill"
:src="getGoodsImage(item)"
></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ item.name }}</view>
<view class="goods-title">{{ getGoodsName(item) }}</view>
<view class="goods-price">
<span v-if="sku.orderItems.length <= 1">￥{{ sku.flowPrice }}</span>
<span class="num" v-else>购买数量{{item.num}}</span>
<span v-if="sku.orderItems.length <= 1" class="num">购买数量: {{ item.num }}</span>
<text v-if="sku.orderItems.length <= 1">￥{{ unitPrice(sku.flowPrice) }}</text>
<text class="num">购买数量: {{ item.num }}</text>
</view>
</view>
</view>
@@ -28,29 +33,25 @@
</view>
<view class="select-view">
<view class="select-cell" v-if="applyInfo.returnGoods" @click="onSelect(1)">
<view class="select-cell" v-if="applyInfo.returnGoods" @click="onSelect(1)">
<view class="select-image">
<image style="height: 51rpx; width: 51rpx" src="/static/order/t1.png"></image>
<image class="select-icon" src="/static/order/t1.png"></image>
</view>
<view class="right">
<view class="cell-body">
<view class="select-title">退货</view>
<view class="select-sub-title">
退回收到的商品
<u-icon name="arrow-right" color="#bababa"></u-icon>
</view>
<view class="select-sub-title">退回收到的商品</view>
</view>
<u-icon name="arrow-right" color="#bababa" size="28rpx"></u-icon>
</view>
<view class="select-cell" v-if="applyInfo.returnMoney" @click="onSelect(3)">
<view class="select-cell" v-if="applyInfo.returnMoney" @click="onSelect(3)">
<view class="select-image">
<image style="height: 51rpx; width: 51rpx" src="/static/order/t3.png"></image>
<image class="select-icon" src="/static/order/t3.png"></image>
</view>
<view class="right">
<view class="cell-body">
<view class="select-title">退款</view>
<view class="select-sub-title">
退款商品返还金额
<u-icon name="arrow-right" color="#bababa"></u-icon>
</view>
<view class="select-sub-title">退款商品返还金额</view>
</view>
<u-icon name="arrow-right" color="#bababa" size="28rpx"></u-icon>
</view>
</view>
</view>
@@ -74,6 +75,13 @@ export default {
this.init()
},
methods: {
getGoodsName(item) {
return item.goodsName || item.name || "";
},
getGoodsImage(item) {
const image = item.image || item.goodsImage || item.thumbnail;
return this.parseGoodsImageUrl(image);
},
// 初始化数据
init() {
getAfterSaleInfo(this.sn).then((response) => {
@@ -134,69 +142,97 @@ page,
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 30rpx;
align-items: flex-start;
padding: 24rpx 30rpx;
background-color: #eef1f2;
.goods-img {
flex-shrink: 0;
width: 131rpx;
height: 131rpx;
border-radius: 6rpx;
overflow: hidden;
}
.goods-info {
padding-left: 30rpx;
flex: 1;
min-width: 0;
padding-left: 24rpx;
.goods-title {
margin-bottom: 10rpx;
margin-bottom: 12rpx;
color: $font-color-dark;
font-size: 26rpx;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 10rpx;
color: $light-color;
.num {
flex-shrink: 0;
margin-left: 16rpx;
font-size: 24rpx;
color: #999999;
}
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
}
.select-view {
background-color: #fff;
margin-top: 20rpx;
.select-cell {
display: flex;
flex-direction: row;
align-items: center;
margin: 0rpx 20rpx;
line-height: 110rpx;
padding: 32rpx 30rpx;
border-bottom: 1px solid $page-color-base;
.select-image {
width: 51rpx;
height: 110rpx;
line-height: 110rpx;
display: flex;
align-items: center;
&:last-child {
border-bottom: none;
}
.right {
flex: 1;
.select-image {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
.select-title {
margin-left: 18rpx;
color: #666666;
width: 200rpx;
justify-content: center;
.select-icon {
width: 51rpx;
height: 51rpx;
}
}
.cell-body {
flex: 1;
min-width: 0;
margin-left: 24rpx;
margin-right: 16rpx;
.select-title {
font-size: 30rpx;
color: #666666;
line-height: 1.4;
}
.select-sub-title {
margin-top: 8rpx;
font-size: 24rpx;
color: #cccccc;
line-height: 1.4;
}
}
}

266
pages/order/afterSales/applyDetail.vue
View File

@@ -11,40 +11,35 @@
<view class="apply-info-view">
<view class="status-info">
<view class="status-info-box">
<view class="status-val">{{serviceStatusList(serviceDetail.serviceStatus)
}}</view>
<view class="status-tip">{{statusFilter(serviceDetail.serviceStatus)
}}</view>
<view class="status-val">{{ serviceStatusList(serviceDetail.serviceStatus) }}</view>
<view class="status-tip">{{ statusFilter(serviceDetail.serviceStatus) }}</view>
</view>
</view>
<view class="log-box-bottom"></view>
<view class="log-box-top" @click="onProgress()">
<view class="top01">
<view>审核日志</view>
<view class="log-first-show" v-if="logs[0]">{{
logs[0].message
}}</view>
<view class="log-title">审核日志</view>
<view class="log-first-show wes" v-if="logs[0]">{{ logs[0].message }}</view>
</view>
<u-icon name="arrow-right" style="margin-right: 5px" size="30" color="#999"></u-icon>
<u-icon name="arrow-right" size="16" color="#999"></u-icon>
</view>
</view>
<view class="goods-info">
<view class="info-box">
<view class="goods-item-view" @click="navgiateToGoodsDetail(serviceDetail)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="serviceDetail.goodsImage"></u-image>
<u-image
border-radius="6"
width="131rpx"
height="131rpx"
mode="aspectFill"
:src="parseGoodsImageUrl(serviceDetail.goodsImage)"
></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{
serviceDetail.goodsName
}}</view>
<view class="goods-content">
<view class="goods-title">{{ serviceDetail.goodsName }}</view>
<view class="goods-price">
<view class="price"> ￥{{unitPrice(serviceDetail.flowPrice) }}</view>
<view>
<view>申请售后数量：{{ serviceDetail.num }}</view>
</view>
<text class="price">￥{{ unitPrice(serviceDetail.flowPrice) }}</text>
<text class="num">申请售后数量：{{ serviceDetail.num }}</text>
</view>
</view>
</view>
@@ -384,13 +379,13 @@ export default {
</script>
<style lang="scss" scoped>
page,
.content {
page {
background: $page-color-base;
height: 100%;
}
.after-sales-goods-detail-view {
background-color: #fff;
.header {
background-color: #f7f7f7;
color: #999999;
@@ -400,149 +395,166 @@ page,
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
}
.apply-info-view {
background: $page-color-base;
padding-bottom: 8rpx;
}
.goods-info {
background: #fff;
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 20rpx 30rpx;
align-items: flex-start;
padding: 24rpx 30rpx;
background-color: #eef1f2;
.goods-info {
padding-left: 30rpx;
.goods-img {
flex-shrink: 0;
width: 131rpx;
height: 131rpx;
border-radius: 6rpx;
overflow: hidden;
}
.goods-content {
flex: 1;
min-width: 0;
padding-left: 24rpx;
.goods-title {
margin-bottom: 10rpx;
font-size: 28rpx;
margin-bottom: 12rpx;
font-size: 26rpx;
line-height: 1.4;
color: $font-color-dark;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #999999;
}
.price {
color: $light-color;
.price {
color: $light-color;
font-size: 28rpx;
}
.num {
flex-shrink: 0;
margin-left: 16rpx;
}
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
}
.apply-detail-view {
background-color: #f7f7f7;
margin-top: 10rpx;
padding: 20rpx;
color: #666666;
.detail-item {
padding: 12rpx;
display: flex;
flex-direction: row;
align-items: center;
font-size: 24rpx;
.title {
padding-left: 10rpx;
width: 140rpx;
}
.value {
padding-left: 40rpx;
}
}
}
.log-box-bottom {
height: 120rpx;
flex-direction: column;
background-color: rgb(247, 247, 247);
}
.log-box-top {
height: 153rpx;
display: flex;
flex-direction: row;
background-color: rgb(255, 255, 255);
position: absolute;
top: 200rpx;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
margin-left: 22rpx;
margin-right: 22rpx;
margin-top: 22rpx;
border-radius: 22rpx;
justify-content: space-between;
align-items: center;
padding-bottom: 52rpx;
padding-top: 52rpx;
padding-left: 32rpx;
.top01 {
width: 90%;
font-family: PingFangSC-Regular;
font-size: 28rpx;
line-height: 30rpx;
color: rgb(46, 45, 45);
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
.log-first-show {
flex-direction: row;
margin-top: 16rpx;
margin-right: 44rpx;
font-family: PingFangSC-Regular;
font-size: 22rpx;
color: rgb(140, 140, 140);
line-height: 30rpx;
}
}
}
.status-info {
flex-direction: row;
display: flex;
background-color: $light-color;
padding: 32rpx 54rpx 56rpx;
.status-info-box {
height: 180rpx;
flex-direction: row;
padding-left: 54rpx;
padding-right: 54rpx;
padding-top: 20rpx;
font-family: PingFangSC-Regular;
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0);
line-height: 50rpx;
display: flex;
flex-direction: column;
color: #fff;
line-height: 1.5;
.status-val {
font-size: 32rpx;
font-weight: 600;
}
.status-tip {
margin-top: 12rpx;
font-size: 24rpx;
opacity: 0.95;
}
}
}
.log-box-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: -36rpx 22rpx 0;
padding: 28rpx 32rpx;
background-color: #fff;
border-radius: 22rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
.top01 {
flex: 1;
min-width: 0;
padding-right: 16rpx;
.log-title {
font-size: 28rpx;
color: #333;
line-height: 1.4;
}
.log-first-show {
margin-top: 12rpx;
font-size: 22rpx;
color: #8c8c8c;
line-height: 1.4;
}
}
}
.info-box {
padding-right: 40rpx 0rpx;
background-color: #eef1f2;
}
.apply-detail-view {
background-color: #fff;
margin-top: 20rpx;
padding: 8rpx 30rpx 30rpx;
color: #666666;
.detail-item {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
padding: 24rpx 0;
font-size: 28rpx;
border-bottom: 1px solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.title {
flex-shrink: 0;
width: 160rpx;
color: #333;
}
.value {
flex: 1;
min-width: 0;
text-align: right;
color: #666;
word-break: break-all;
}
}
}
</style>

37
pages/order/myOrder.vue
View File

@@ -18,9 +18,10 @@
<view class="name">{{ order.storeName }}</view>
<view class="name" v-if="renderOrderTag(order.orderPromotionType)">
<u-tag
:text="renderOrderTag(order.orderPromotionType)"
:color="renderOrderTagColor(order.orderPromotionType)"
<u-tag
:text="renderOrderTag(order.orderPromotionType)"
:type="renderOrderTagType(order.orderPromotionType)"
size="mini"
/>
</view>
@@ -65,10 +66,6 @@
取消订单
</view>
<!-- 等待收货 -->
<view ripple shape="circle" class="rebuy-btn" size="mini"
v-if="order.allowOperationVO.showLogistics" @click="navigateToLogistics(order)">
查看物流
</view>
<view ripple shape="circle" class="pay-btn" size="mini"
v-if="order.allowOperationVO.rog" @click="onRog(order.sn)">
确认收货
@@ -301,23 +298,18 @@
return "";
}
},
renderOrderTagColor(orderPromotionType) {
renderOrderTagType(orderPromotionType) {
switch (orderPromotionType) {
case "NORMAL":
return "main";
case "PINTUAN":
return "red";
break;
return "error";
case "GIFT":
return "blue";
break;
return "primary";
case "POINTS":
return "black";
break;
return "info";
case "KANJIA":
return "pink";
return "warning";
default:
return "";
return "info";
}
},
getOrderItemImage(goods, order, index) {
@@ -566,15 +558,6 @@
url: "/pages/product/goods?id=" + order.id + "&goodsId=" + order.goodsId,
});
},
/**
* 查看物流
*/
navigateToLogistics(order) {
uni.navigateTo({
url: "/pages/order/deliverDetail?order_sn=" + order.sn,
});
},
},
};
</script>

113
pages/order/orderDetail.vue
View File

@@ -90,11 +90,6 @@
</view>
<view class="goods-num">
<view>x{{ sku.num }}</view>
<view class="good-complaint">
<u-tag size="mini" mode="plain" @click="complaint(sku)" v-if="sku.complainStatus == 'NO_APPLY'"
text="投诉" type="info" />
</view>
</view>
</view>
@@ -195,29 +190,28 @@
<view style="padding-bottom: 150rpx"></view>
<view class="bottom_view">
<view class="btn-view u-flex u-row-between">
<view class="btn-view">
<view class="description">
<!-- 全部 -->
<!-- 等待付款 -->
<text v-if="order.payStatus === 'PAID'">已付金额：</text>
<text v-else>应付金额：</text>
<text class="price" v-if="order.priceDetailDTO">￥{{unitPrice(order.priceDetailDTO.flowPrice) }}</text>
</view>
<view>
<!-- 全部 -->
<!-- 等待付款 -->
<u-button type="error" ripple size="mini" v-if="orderDetail.allowOperationVO && orderDetail.allowOperationVO.pay"
@click="toPay(order)">立即付款</u-button>
<!-- <u-button class="rebuy-btn" size="mini" v-if="order.order_operate_allowable_vo.allow_service_cancel"> 提醒发货</u-button> -->
<!-- <div class="pay-btn">确认收货</div> -->
<u-button shape="circle" ripple type="warning" size="mini" v-if="order.orderStatus == 'DELIVERED'"
@click="onRog(order.sn)">确认收货</u-button>
<!-- 交易完成 未评价 -->
<u-button shape="circle" ripple size="mini" v-if="order.orderStatus == 'COMPLETE'"
@click="onComment(order.sn)">评价商品</u-button>
<view class="goods-btn">
<view
class="pay-btn"
v-if="orderDetail.allowOperationVO && orderDetail.allowOperationVO.pay"
@click="toPay(order)"
>立即付款</view>
<view
class="pay-btn"
v-if="order.orderStatus == 'DELIVERED'"
@click="onRog(order.sn)"
>确认收货</view>
<view
class="rebuy-btn"
v-if="order.orderStatus == 'COMPLETE'"
@click="onComment(order.sn)"
>评价商品</view>
</view>
</view>
</view>
@@ -416,18 +410,6 @@ export default {
setClipboard(sn)
},
/**
* 投诉
*/
complaint(sku) {
uni.navigateTo({
url:
"/pages/order/complain/complain?sn=" +
this.sn +
"&skuId=" +
sku.skuId,
});
},
//售后按钮
onAfterSales(sn, sku) {
uni.navigateTo({
@@ -549,6 +531,15 @@ export default {
<style lang="scss">
@import "./goods.scss";
.goods-item-view {
.goods-info {
.goods-title {
font-size: 24rpx;
line-height: 1.4;
}
}
}
.empty {
width: 100%;
}
@@ -582,12 +573,15 @@ export default {
color: #fff;
width: 100%;
text-align: center;
font-size: 36rpx;
margin-top: 40rpx;
font-size: 30rpx;
font-weight: 500;
margin-top: 36rpx;
>div {
font-size: 24rpx;
margin-top: 10rpx;
font-size: 22rpx;
font-weight: normal;
margin-top: 8rpx;
opacity: 0.95;
}
}
@@ -749,22 +743,59 @@ page,
position: fixed;
bottom: 0;
left: 0;
z-index: 99;
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
.btn-view {
display: flex;
align-items: center;
justify-content: space-between;
height: 100rpx;
padding: 0 30rpx;
line-height: 100rpx;
font-size: 26rpx;
.description {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
color: #909399;
size: 25rpx;
font-size: 26rpx;
.price {
color: $main-color;
font-weight: 600;
}
}
}
.goods-btn {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: 20rpx;
}
.pay-btn,
.rebuy-btn {
text-align: center;
font-size: 26rpx;
padding: 16rpx 36rpx;
border-radius: 8rpx;
white-space: nowrap;
}
.pay-btn {
background-color: $main-color;
color: #ffffff;
}
.rebuy-btn {
color: $light-color;
border: 1rpx solid $light-color;
background-color: #ffffff;
}
.cancel-btn {
color: #999999;
border-color: #999999;