Compare commits
8 Commits
743532973d
...
5b934ecd17
| Author | SHA1 | Date | |
|---|---|---|---|
|
5b934ecd17 | ||
|
|
8418040927 | ||
|
|
ffc510fc08 | ||
|
|
b53bf393d4 | ||
|
|
41f655373f | ||
|
|
6f84133a0a | ||
|
|
2999d37de6 | ||
|
|
5e413a021f |
5
api/afterSale.js
Normal file
5
api/afterSale.js
Normal file
@ -0,0 +1,5 @@
|
||||
export const apiArr = {
|
||||
afterSaleCreate: "/api/v2/wechat/commodity/after-sales/refund-info/create", //商品订单售后信息创建
|
||||
cancelOrConfirm: "/api/v2/wechat/commodity/order/cancel_or_confirm", //商品订单确认收货或取消
|
||||
isAllow: "/api/v2/wechat/commodity/after-sales/is-allow", //判断订单是否能申请售后
|
||||
};
|
||||
131
packages/community/list/index.css
Normal file
131
packages/community/list/index.css
Normal file
@ -0,0 +1,131 @@
|
||||
page {
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.community-list-container {
|
||||
padding: 20rpx;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 50rpx;
|
||||
padding: 15rpx 20rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
font-family: 'iconfont';
|
||||
color: #999;
|
||||
margin-right: 15rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.search-input input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.community-list {
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.community-item {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
margin-bottom: 15rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.community-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.community-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.community-image image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.community-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.community-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.community-address {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-top: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.community-distance {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
/* 适配不同屏幕尺寸 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.community-list-container {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.community-item {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.community-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.community-name {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.community-address {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.community-distance {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
85
packages/community/list/index.vue
Normal file
85
packages/community/list/index.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view class="community-list-container">
|
||||
<!-- <view class="search-bar">
|
||||
<view class="search-input">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
mode="aspectFill" class="search-icon"></image>
|
||||
<input type="text" placeholder="搜索社区" />
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="community-list">
|
||||
<view class="community-item" v-for="(item, index) in communityList" :key="index">
|
||||
<view class="community-image">
|
||||
<image :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="community-info">
|
||||
<view class="community-name">{{ item.name }}</view>
|
||||
<view class="community-address">{{ item.address }}</view>
|
||||
<view class="community-distance">{{ item.distance }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'CommunityList',
|
||||
data() {
|
||||
return {
|
||||
communityList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '凯旋城东区',
|
||||
address: '衡水市,桃城-衡水市人民路与育才街交叉口西行100米路南',
|
||||
distance: '0 m',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '岸芷庭蓝（一区）',
|
||||
address: '衡水市,河阳西路与中华南大街交叉口东220米',
|
||||
distance: '1000 m',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '滏阳锦苑',
|
||||
address: '衡水市,滏阳苑',
|
||||
distance: '2 km',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '隆兴小区',
|
||||
address: '衡水市,河北省衡水市高新区隆兴西路隆兴小区',
|
||||
distance: '5 km',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '紫金广场',
|
||||
address: '衡水市,衡水市桃城区人民西路与庆丰南街交叉口',
|
||||
distance: '894 km',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '万和瑞景',
|
||||
address: '衡水市,政通街46号',
|
||||
distance: '12249 km',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
@ -1,5 +1,4 @@
|
||||
.container {
|
||||
margin-top: 87rpx;
|
||||
padding: 0 15rpx;
|
||||
background-color: whte;
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 头部标题 -->
|
||||
<view class="header">
|
||||
<!-- <view class="header">
|
||||
<text class="title">榴园到家 服务至上</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 位置和搜索 -->
|
||||
<view class="location-search">
|
||||
|
||||
364
packages/localLife/classify/index.css
Normal file
364
packages/localLife/classify/index.css
Normal file
@ -0,0 +1,364 @@
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header_tit {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.local {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#local {
|
||||
height: 30rpx;
|
||||
width: 28.08rpx;
|
||||
margin-right: 17rpx;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.search {
|
||||
background-color: #f6f7fb;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
width: 710rpx;
|
||||
height: 70rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.searchBox image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
|
||||
.swiperBox {
|
||||
height: 350rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 350rpx;
|
||||
width: 100%;
|
||||
/* position: relative; */
|
||||
}
|
||||
|
||||
.navList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
height: 350rpx;
|
||||
width: 100%;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.navItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 116rpx;
|
||||
height: 105rpx;
|
||||
margin-right: 34rpx;
|
||||
margin-bottom: 43rpx;
|
||||
}
|
||||
|
||||
.navItemImg {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navItem image {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.navItem:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 25rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.dotItem {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #E6E6E6;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.actives {
|
||||
width: 20rpx;
|
||||
height: 8rpx;
|
||||
background: #FF370B;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
}
|
||||
|
||||
.scrollBox {
|
||||
background-color: #f6f7fb;
|
||||
padding-bottom: 25rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.scrollView {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 14rpx;
|
||||
}
|
||||
|
||||
|
||||
.scroll-viewItem {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
height: 54rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
border: 1rpx solid #FFFFFF;
|
||||
padding: 10rpx 18rpx;
|
||||
margin-right: 10rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scroll-viewItem image {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
position: absolute;
|
||||
left: 7rpx;
|
||||
top: 5rpx;
|
||||
}
|
||||
|
||||
.btnList {
|
||||
width: 389rpx;
|
||||
height: 119rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.btnList_after {
|
||||
width: 389rpx;
|
||||
height: 119rpx;
|
||||
filter: blur(8.600000381469727rpx);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 200rpx;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.btn_left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.btn_left image {
|
||||
width: 47.97rpx;
|
||||
height: 44.79rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.btn_right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.btn_right image {
|
||||
height: 47rpx;
|
||||
width: 47rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1rpx;
|
||||
height: 82rpx;
|
||||
border-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(215, 215, 215, 1), rgba(255, 255, 255, 1)) 1 1;
|
||||
}
|
||||
|
||||
.lines {
|
||||
background-color: #f5f7f9;
|
||||
height: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.merchantList {
|
||||
padding: 0 20rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.merchantItem {
|
||||
display: flex;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1rpx solid #EBEBEB;
|
||||
;
|
||||
}
|
||||
|
||||
.merchantItem_left {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.merchantItem_left image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.merchantItem_right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.merchantItem_right_tit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.merchantItem_right_tit_left {
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.merchantItem_right_tit_right {
|
||||
font-size: 24rpx;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.merchantItem_right_con {
|
||||
margin-top: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.merchangtItem_tag {
|
||||
font-size: 22rpx;
|
||||
color: #555555;
|
||||
padding: 5rpx 12rpx;
|
||||
white-space: nowrap;
|
||||
background: rgba(255, 81, 42, 0.1);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
display: inline-block;
|
||||
margin-top: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.startList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.startList image {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
margin-right: 3rpx;
|
||||
}
|
||||
|
||||
.merchantItem_right_con_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
|
||||
}
|
||||
|
||||
.merchantItem_right_con_right image {
|
||||
width: 32rpx;
|
||||
height: 28.59rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.merchantItem_right_add {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-top: 110rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty image {
|
||||
width: 366rpx;
|
||||
height: 226rpx;
|
||||
margin-bottom: 27rpx;
|
||||
}
|
||||
231
packages/localLife/classify/index.vue
Normal file
231
packages/localLife/classify/index.vue
Normal file
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header" :style="{ paddingTop: top + 'px', height: localHeight + 'px' }">
|
||||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||
<view class="header_tit">{{ headerTitle }}</view>
|
||||
</view>
|
||||
<view class="local">
|
||||
<image id="local" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
{{ address }}
|
||||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="search">
|
||||
<view class="searchBox">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
<input type="text" placeholder="请输入您想搜索的内容" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="merchantList" v-if="merchatList.length > 0">
|
||||
<view class="merchantItem" v-for="item in merchatList" :key="item.id" @click="Info(item)">
|
||||
<view class="merchantItem_left">
|
||||
<image :src="picUrl + item.bigImg[0]" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="merchantItem_right">
|
||||
<view class="merchantItem_right_tit">
|
||||
<view class="merchantItem_right_tit_left">
|
||||
{{ item.merchant_name }}
|
||||
</view>
|
||||
<view class="merchantItem_right_tit_right">
|
||||
{{ item.distances }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="merchantItem_right_con">
|
||||
<view class="merchantItem_right_con_left">
|
||||
<view class="startList">
|
||||
<image v-for="index in 5" :key="index" :src="index < item.rating
|
||||
? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png'
|
||||
: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'
|
||||
" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">
|
||||
买单返物业费
|
||||
</view>
|
||||
<view class="merchangtItem_tag" v-if="item.refund_user_points_ratio">
|
||||
买单返积分
|
||||
</view>
|
||||
</view>
|
||||
<view class="merchantItem_right_con_right" @click="toJump(item)">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
|
||||
mode="aspectFill"></image>
|
||||
点评
|
||||
</view>
|
||||
</view>
|
||||
<view class="merchantItem_right_add">
|
||||
{{ item.comAddress }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="empty">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png"
|
||||
mode="aspectFill"></image>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="btnList">
|
||||
<view class="btn_left">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
到店服务券
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="btn_right">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
快捷支付记录
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnList_after"></view>
|
||||
|
||||
<!-- <nav-footer :current="2" /> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
request,
|
||||
picUrl,
|
||||
uniqueByField,
|
||||
menuButtonInfo,
|
||||
calculateDistance,
|
||||
NavgateTo,
|
||||
} from "../../../utils";
|
||||
|
||||
import { apiArr } from "../../../api/v2local";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
headerTitle: "",
|
||||
picUrl,
|
||||
top: "",
|
||||
localHeight: "",
|
||||
swiperList: [],
|
||||
currentIndex: 0,
|
||||
checkedItems: [false, false, false, false],
|
||||
address: "",
|
||||
page_size: "10",
|
||||
page_num: "1",
|
||||
flag: false,
|
||||
merchatList: [],
|
||||
|
||||
changeId: "",
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.changeId = JSON.parse(options.item).id;
|
||||
this.headerTitle = JSON.parse(options.item).cate_name;
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
// this.top = meun.height + meun.top;
|
||||
this.localHeight = meun.height;
|
||||
this.getCateList();
|
||||
this.getMechantList();
|
||||
this.address = uni.getStorageSync("location").address;
|
||||
console.log(this.address);
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.flag) {
|
||||
this.getMechantList();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
back() {
|
||||
NavgateTo("1");
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.currentIndex = e.detail.current;
|
||||
},
|
||||
|
||||
checkItem(index) {
|
||||
this.$set(this.checkedItems, index, !this.checkedItems[index]);
|
||||
},
|
||||
//查询商家分类
|
||||
async getCateList() {
|
||||
let that = this;
|
||||
await request(apiArr.getMerChantCateList, "POST").then((res) => {
|
||||
res.rows = res.rows.filter((item) => item.is_visible == 1)
|
||||
console.log(res);
|
||||
// 将数据分成每10个一组
|
||||
const chunkSize = 10;
|
||||
that.swiperList = [];
|
||||
for (let i = 0; i < res.rows.length; i += chunkSize) {
|
||||
that.swiperList.push(res.rows.slice(i, i + chunkSize));
|
||||
}
|
||||
});
|
||||
},
|
||||
//查询商家列表
|
||||
async getMechantList() {
|
||||
let that = this;
|
||||
const params = {
|
||||
merchant_cate_id: this.changeId,
|
||||
page_num: that.page_num,
|
||||
page_size: that.page_size,
|
||||
}
|
||||
await request(apiArr.getMerchantList, "POST", params).then((res) => {
|
||||
let latitude = uni.getStorageSync("location").lat;
|
||||
let longitude = uni.getStorageSync("location").lng;
|
||||
res.rows.forEach((item) => {
|
||||
item.bigImg = item.album_images.split(",");
|
||||
const distanceInKm = calculateDistance(
|
||||
latitude,
|
||||
longitude,
|
||||
item.latitude,
|
||||
item.longitude
|
||||
);
|
||||
item.distances =
|
||||
distanceInKm >= 1
|
||||
? `${distanceInKm.toFixed(1)}km`
|
||||
: `${(distanceInKm * 1000).toFixed(1)}m`;
|
||||
|
||||
if (item.ad) {
|
||||
item.comAddress = item.ad.ad_name.replace(/,/g, "") + item.address;
|
||||
} else {
|
||||
item.comAddress = item.address;
|
||||
}
|
||||
});
|
||||
res.rows.sort((a, b) => {
|
||||
const valueA =
|
||||
parseFloat(a.distances.replace("km", "").replace("m", "")) *
|
||||
(a.distances.includes("km") ? 1000 : 1);
|
||||
const valueB =
|
||||
parseFloat(b.distances.replace("km", "").replace("m", "")) *
|
||||
(b.distances.includes("km") ? 1000 : 1);
|
||||
return valueA - valueB;
|
||||
});
|
||||
|
||||
if (res.rows.length == this.page_size) {
|
||||
this.page_num = this.page_num + 1;
|
||||
this.flag = true;
|
||||
} else {
|
||||
this.flag = false;
|
||||
}
|
||||
this.merchatList = this.merchatList.concat(res.rows);
|
||||
});
|
||||
},
|
||||
//跳转商家详情
|
||||
Info(e) {
|
||||
uni.setStorageSync("merchantInfo", e);
|
||||
NavgateTo("../detail/index");
|
||||
},
|
||||
//跳转点评
|
||||
toJump(e) {
|
||||
NavgateTo('../comment/index');
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
@ -2,7 +2,7 @@ page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container{
|
||||
.container {
|
||||
/* padding-top: 100rpx; */
|
||||
}
|
||||
|
||||
@ -86,9 +86,17 @@ page {
|
||||
margin-bottom: 43rpx;
|
||||
}
|
||||
|
||||
.navItemImg {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navItem image {
|
||||
width: 70rpx;
|
||||
height: auto;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.navItem:nth-child(5n) {
|
||||
@ -121,11 +129,12 @@ page {
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
}
|
||||
|
||||
.scrollBox{
|
||||
.scrollBox {
|
||||
background-color: #f6f7fb;
|
||||
padding-bottom: 25rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.scrollView {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -223,11 +232,13 @@ page {
|
||||
height: 82rpx;
|
||||
border-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(215, 215, 215, 1), rgba(255, 255, 255, 1)) 1 1;
|
||||
}
|
||||
.lines{
|
||||
|
||||
.lines {
|
||||
background-color: #f5f7f9;
|
||||
height: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.merchantList {
|
||||
padding: 0 20rpx;
|
||||
width: 100%;
|
||||
@ -238,7 +249,8 @@ page {
|
||||
display: flex;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1rpx solid #EBEBEB;;
|
||||
border-bottom: 1rpx solid #EBEBEB;
|
||||
;
|
||||
}
|
||||
|
||||
.merchantItem_left {
|
||||
|
||||
@ -1,145 +1,112 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="local">
|
||||
<image
|
||||
id="local"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="container">
|
||||
<view class="local">
|
||||
<image id="local" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
{{ address }}
|
||||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<div class="search">
|
||||
<div class="searchBox">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="search">
|
||||
<view class="searchBox">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
<input type="text" placeholder="请输入您想搜索的内容" />
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="swiperBox">
|
||||
<view class="swiperBox">
|
||||
<swiper class="swiper" @change="swiperChange" :current="currentIndex">
|
||||
<swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex">
|
||||
<div class="navList">
|
||||
<div
|
||||
class="navItem"
|
||||
v-for="(item, itemIndex) in page"
|
||||
:key="itemIndex"
|
||||
>
|
||||
<image :src="picUrl + item.cate_image" mode="widthFix"></image>
|
||||
<div class="navName">{{ item.cate_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<view class="navList">
|
||||
<view class="navItem" v-for="(item, itemIndex) in page" :key="itemIndex" @click="changeNav(item)">
|
||||
<view class="navItemImg">
|
||||
<image :src="picUrl + item.cate_image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="navName">{{ item.cate_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<div class="dot">
|
||||
<div
|
||||
class="dotItem"
|
||||
v-for="(page, index) in swiperList" :key="index"
|
||||
:class="currentIndex == index ? 'actives' : ''"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<view class="dot">
|
||||
<view class="dotItem" v-for="(page, index) in swiperList" :key="index"
|
||||
:class="currentIndex == index ? 'actives' : ''"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="lines"></div>
|
||||
<view class="lines"></view>
|
||||
<!-- <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox">
|
||||
<div class="scrollView">
|
||||
<div class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)">
|
||||
<view class="scrollView">
|
||||
<view class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)">
|
||||
<image v-show="!checkedItems[index]" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_uncheck.png"
|
||||
mode="aspectFill"></image>
|
||||
<image v-show="checkedItems[index]" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local-check.png"
|
||||
mode="aspectFill"></image>
|
||||
买单返物业费
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view> -->
|
||||
|
||||
<div class="merchantList">
|
||||
<div
|
||||
class="merchantItem"
|
||||
v-for="item in merchatList"
|
||||
:key="item.id"
|
||||
@click="Info(item)"
|
||||
>
|
||||
<div class="merchantItem_left">
|
||||
<view class="merchantList">
|
||||
<view class="merchantItem" v-for="item in merchatList" :key="item.id" @click="Info(item)">
|
||||
<view class="merchantItem_left">
|
||||
<image :src="picUrl + item.bigImg[0]" mode="aspectFill"></image>
|
||||
</div>
|
||||
<div class="merchantItem_right">
|
||||
<div class="merchantItem_right_tit">
|
||||
<div class="merchantItem_right_tit_left">
|
||||
</view>
|
||||
<view class="merchantItem_right">
|
||||
<view class="merchantItem_right_tit">
|
||||
<view class="merchantItem_right_tit_left">
|
||||
{{ item.merchant_name }}
|
||||
</div>
|
||||
<div class="merchantItem_right_tit_right">
|
||||
</view>
|
||||
<view class="merchantItem_right_tit_right">
|
||||
{{ item.distances }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="merchantItem_right_con">
|
||||
<div class="merchantItem_right_con_left">
|
||||
<div class="startList">
|
||||
<image
|
||||
v-for="index in 5"
|
||||
:key="index"
|
||||
:src="
|
||||
index < item.rating
|
||||
? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png'
|
||||
: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'
|
||||
"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</div>
|
||||
<div
|
||||
class="merchangtItem_tag"
|
||||
v-if="item.refund_property_fee_ratio"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="merchantItem_right_con">
|
||||
<view class="merchantItem_right_con_left">
|
||||
<view class="startList">
|
||||
<image v-for="index in 5" :key="index" :src="index < item.rating
|
||||
? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png'
|
||||
: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'
|
||||
" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">
|
||||
买单返物业费
|
||||
</div>
|
||||
<div
|
||||
class="merchangtItem_tag"
|
||||
v-if="item.refund_user_points_ratio"
|
||||
>
|
||||
</view>
|
||||
<view class="merchangtItem_tag" v-if="item.refund_user_points_ratio">
|
||||
买单返积分
|
||||
</div>
|
||||
</div>
|
||||
<div class="merchantItem_right_con_right" @click="toJump(item)">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="merchantItem_right_con_right" @click="toJump(item)">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
|
||||
mode="aspectFill"></image>
|
||||
点评
|
||||
</div>
|
||||
</div>
|
||||
<div class="merchantItem_right_add">
|
||||
</view>
|
||||
</view>
|
||||
<view class="merchantItem_right_add">
|
||||
{{ item.comAddress }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="btnList">
|
||||
<div class="btn_left">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="btnList">
|
||||
<view class="btn_left">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
到店服务券
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="btn_right">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="btn_right">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
快捷支付记录
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnList_after"></div>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnList_after"></view>
|
||||
|
||||
<!-- <nav-footer :current="2" /> -->
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -192,6 +159,13 @@ export default {
|
||||
this.currentIndex = e.detail.current;
|
||||
},
|
||||
|
||||
changeNav(item) {
|
||||
console.log("🚀 ~ changeNav ~ item:", item)
|
||||
NavgateTo(`/packages/localLife/classify/index?item=${JSON.stringify(item)}`)
|
||||
|
||||
},
|
||||
|
||||
|
||||
checkItem(index) {
|
||||
this.$set(this.checkedItems, index, !this.checkedItems[index]);
|
||||
},
|
||||
@ -262,7 +236,7 @@ export default {
|
||||
NavgateTo("../detail/index");
|
||||
},
|
||||
//跳转点评
|
||||
toJump(e){
|
||||
toJump(e) {
|
||||
NavgateTo('../comment/index');
|
||||
},
|
||||
|
||||
|
||||
190
packages/myOrders/afterSale/afterSale.json
Normal file
190
packages/myOrders/afterSale/afterSale.json
Normal file
@ -0,0 +1,190 @@
|
||||
[
|
||||
{
|
||||
"id": 9001,
|
||||
"after_sales_no": "AS202508130001",
|
||||
"commodity_order_id": 1001,
|
||||
"after_sales_status": 1,
|
||||
"applicant": "张三",
|
||||
"after_sales_reason": "拍错商品/不想要了",
|
||||
"after_sales_type": 1,
|
||||
"application_description": "请尽快处理退款",
|
||||
"application_images": "http://localhost:8080/test.png",
|
||||
"is_need_process": 1,
|
||||
"process_status": 1,
|
||||
"refund_amount": 68.00,
|
||||
"after_sales_goods": "1@8001",
|
||||
"refund_method": 1,
|
||||
"review_status": 1,
|
||||
"creator": "customer",
|
||||
"create_time": "2025-08-13T11:20:00Z",
|
||||
"commodity_order_item": [
|
||||
{
|
||||
"id": 7001,
|
||||
"goods_id": 8001,
|
||||
"goods_name": "澳洲牛排",
|
||||
"is_support_same_day": 1,
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"sales_price": 68.00,
|
||||
"count": 1,
|
||||
"after_sales_status": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 9002,
|
||||
"after_sales_no": "AS202508130002",
|
||||
"commodity_order_id": 1002,
|
||||
"after_sales_status": 1,
|
||||
"after_sales_type": 1,
|
||||
"refund_no": "RF202508130001",
|
||||
"refund_completed_time": "2025-08-13T14:30:00Z",
|
||||
"is_need_process": 2,
|
||||
"process_status": 2,
|
||||
"refund_amount": 45.80,
|
||||
"after_sales_goods": "2@8004",
|
||||
"refund_method": 1,
|
||||
"review_status": 2,
|
||||
"review_remark": "审核通过，已原路退款",
|
||||
"reviewer": "客服008",
|
||||
"review_time": "2025-08-13T14:15:00Z",
|
||||
"create_time": "2025-08-13T13:45:00Z",
|
||||
"commodity_order_item": [
|
||||
{
|
||||
"id": 7004,
|
||||
"goods_id": 8004,
|
||||
"goods_name": "东北大米",
|
||||
"sales_price": 22.90,
|
||||
"count": 2,
|
||||
"after_sales_status": 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 9003,
|
||||
"after_sales_no": "AS202508130003",
|
||||
"commodity_order_id": 1003,
|
||||
"after_sales_status": 1,
|
||||
"applicant": "李四",
|
||||
"after_sales_reason": "商品质量问题",
|
||||
"after_sales_type": 2,
|
||||
"application_description": "商品包装破损",
|
||||
"application_images": "http://localhost:8080/test.png",
|
||||
"return_description": "已通过顺丰寄回",
|
||||
"return_images": "http://localhost:8080/test.png",
|
||||
"return_tracking_no": "SF1234567890",
|
||||
"return_logistics_company": "顺丰速运",
|
||||
"return_contact_phone": "13800138000",
|
||||
"is_need_process": 1,
|
||||
"process_status": 1,
|
||||
"refund_amount": 152.00,
|
||||
"after_sales_goods": "1@8003",
|
||||
"refund_method": 1,
|
||||
"review_status": 1,
|
||||
"create_time": "2025-08-13T15:30:00Z",
|
||||
"commodity_order_item": [
|
||||
{
|
||||
"id": 7003,
|
||||
"goods_id": 8003,
|
||||
"goods_name": "精品榴莲",
|
||||
"sales_price": 152.00,
|
||||
"count": 1,
|
||||
"after_sales_status": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 9004,
|
||||
"after_sales_no": "AS202508130004",
|
||||
"after_sales_type": 2,
|
||||
"after_sales_status": 1,
|
||||
"process_status": 2,
|
||||
"refund_amount": 39.90,
|
||||
"review_status": 2,
|
||||
"review_remark": "商品已验货，符合退款条件",
|
||||
"reviewer": "质检005",
|
||||
"review_time": "2025-08-13T16:45:00Z",
|
||||
"refund_no": "RF202508130002",
|
||||
"refund_completed_time": "2025-08-13T17:30:00Z",
|
||||
"create_time": "2025-08-13T09:30:00Z",
|
||||
"commodity_order_item": [
|
||||
{
|
||||
"id": 7005,
|
||||
"goods_name": "酸奶套装",
|
||||
"sales_price": 39.90,
|
||||
"count": 1,
|
||||
"after_sales_status": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 9005,
|
||||
"after_sales_no": "AS202508130005",
|
||||
"commodity_order_id": 1004,
|
||||
"after_sales_type": 3,
|
||||
"after_sales_status": 1,
|
||||
"applicant": "王五",
|
||||
"after_sales_reason": "商品发错型号",
|
||||
"application_description": "购买的是XL码，收到L码",
|
||||
"application_images": "http://localhost:8080/test.png",
|
||||
"is_need_process": 1,
|
||||
"process_status": 1,
|
||||
"after_sales_goods": "1@8006",
|
||||
"receiving_address": "上海市浦东新区张江高科88号",
|
||||
"review_status": 1,
|
||||
"create_time": "2025-08-13T10:15:00Z",
|
||||
"commodity_order_item": [
|
||||
{
|
||||
"id": 7006,
|
||||
"goods_id": 8006,
|
||||
"goods_name": "冷冻虾仁",
|
||||
"sales_price": 76.50,
|
||||
"count": 1,
|
||||
"after_sales_status": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 9006,
|
||||
"after_sales_no": "AS202508130006",
|
||||
"after_sales_type": 3,
|
||||
"after_sales_status": 1,
|
||||
"process_status": 2,
|
||||
"processor": "客服012",
|
||||
"process_time": "2025-08-13T14:20:00Z",
|
||||
"process_remark": "已补发新商品，物流单号：YT987654321",
|
||||
"review_status": 2,
|
||||
"reviewer": "客服主管",
|
||||
"review_time": "2025-08-13T13:40:00Z",
|
||||
"create_time": "2025-08-13T09:00:00Z",
|
||||
"commodity_order_item": [
|
||||
{
|
||||
"id": 7007,
|
||||
"goods_id": 8007,
|
||||
"goods_name": "进口橙子",
|
||||
"sales_price": 32.00,
|
||||
"count": 2,
|
||||
"after_sales_status": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 9007,
|
||||
"after_sales_no": "AS202508130007",
|
||||
"after_sales_status": 2,
|
||||
"revoke_time": "2025-08-13T11:05:00Z",
|
||||
"after_sales_type": 1,
|
||||
"applicant": "赵六",
|
||||
"after_sales_reason": "商品运输损坏",
|
||||
"create_time": "2025-08-13T10:30:00Z",
|
||||
"update_time": "2025-08-13T11:05:00Z",
|
||||
"commodity_order_item": [
|
||||
{
|
||||
"id": 7002,
|
||||
"goods_name": "有机西兰花",
|
||||
"sales_price": 10.50,
|
||||
"count": 1,
|
||||
"after_sales_status": 4
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
182
packages/myOrders/afterSale/index.css
Normal file
182
packages/myOrders/afterSale/index.css
Normal file
@ -0,0 +1,182 @@
|
||||
.container {
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.after-sale-item{
|
||||
margin: 20rpx;
|
||||
min-height: 250rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.asGoodTag {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 8rpx 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.asGoodTag1 {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
top: 105rpx;
|
||||
left: 40rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.after-sale-no {
|
||||
font-size: 24rpx;
|
||||
color: #ff4d4f;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: 26rpx;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-top: 1rpx solid #eeeeee;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
margin-bottom: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
background-color: #fff2f0;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.price-count {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 30rpx;
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goods-count {
|
||||
font-size: 26rpx;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.refund-amount {
|
||||
font-size: 28rpx;
|
||||
align-self: flex-end;
|
||||
margin-left: 20rpx;
|
||||
float: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-container {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #fafafa;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 26rpx;
|
||||
color: #888888;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #d9d9d9;
|
||||
color: black;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #ffe8e5;
|
||||
color: #f84723;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
126
packages/myOrders/afterSale/index.vue
Normal file
126
packages/myOrders/afterSale/index.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-for="(item, index) in currentAfterSale" :key="index">
|
||||
<view class="after-sale-item">
|
||||
<!-- 头部信息 -->
|
||||
<view class="header">
|
||||
<view class="company-info">
|
||||
<text class="company-name">{{ item.commodity_order_item[0].goods_name || '衡水喜屏传媒有限公司'
|
||||
}}</text>
|
||||
<text class="after-sale-no">退货退款</text>
|
||||
</view>
|
||||
<text class="order-time">提交订单：{{ formatDate(item.create_time) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-info" v-for="(ite, index) in item.commodity_order_item" :key="index">
|
||||
<view class="asGoodTag tag-img" v-if="ite.is_support_same_day === 1">当日达</view>
|
||||
<image :src="ite.commodity_pic" class="goods-image"></image>
|
||||
<view class="goods-details">
|
||||
<text class="goods-name">
|
||||
<text class="asGoodTag asGoodTag1" v-if="ite.is_support_same_day === 1">当日达</text>
|
||||
{{ ite.goods_name }}
|
||||
<text class="refund-amount">退款：¥{{ ite.sales_price }}</text>
|
||||
</text>
|
||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
||||
<view class="price-count">
|
||||
<text class="goods-price">¥{{ ite.sales_price }}/个</text>
|
||||
<text class="goods-count">x{{ ite.count }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退款状态 -->
|
||||
<view class="status-container">
|
||||
<view class="status-item" @click="pendingPage(item)">
|
||||
<text class="status-label">{{ getStatusText(item.after_sales_status) }}</text>
|
||||
<text class="status-desc">商家将在<text style="color: #e73b05;">{{
|
||||
calculateProcessingTime(item.create_time) }}</text>内处理</text>
|
||||
<view class="arrow-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<button class="modify-btn" @click="modifyApplication">修改申请</button>
|
||||
<button class="cancel-btn" @click="cancelApplication">撤销申请</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import afterSaleData from './afterSale.json';
|
||||
import {
|
||||
isPhone,
|
||||
picUrl,
|
||||
request,
|
||||
upload,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentAfterSale: afterSaleData
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getStatusText(status) {
|
||||
// 根据状态码返回对应的状态文本
|
||||
const statusMap = {
|
||||
1: '商家待处理',
|
||||
2: '已撤销',
|
||||
3: '已完成',
|
||||
4: '已拒绝'
|
||||
};
|
||||
return statusMap[status] || '未知状态';
|
||||
},
|
||||
calculateProcessingTime(createTime) {
|
||||
return '2天';
|
||||
},
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
},
|
||||
modifyApplication() {
|
||||
console.log('修改申请');
|
||||
},
|
||||
cancelApplication() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要撤销退款申请吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('撤销申请');
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
pendingPage(item) {
|
||||
NavgateTo(`/packages/myOrders/pending/index?item=${JSON.stringify(item)}`); //拒绝申请
|
||||
// NavgateTo(`/packages/myOrders/sendBack/index?item=${JSON.stringify(item)}`); //自行寄回
|
||||
// NavgateTo(`/packages/myOrders/refundOver/index?item=${JSON.stringify(item)}`); //退款成功
|
||||
// NavgateTo(`/packages/myOrders/changeInfo/index?item=${JSON.stringify(item)}`); //换货
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url(./index.css);
|
||||
</style>
|
||||
254
packages/myOrders/apply/index.css
Normal file
254
packages/myOrders/apply/index.css
Normal file
@ -0,0 +1,254 @@
|
||||
page {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.apply-container {
|
||||
/* padding: 10rpx; */
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.refund-info-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.refund-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.refund-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.refund-label {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff4500;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
|
||||
.refund-value {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
display: inline-block;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 2rpx solid #999999;
|
||||
border-right: 2rpx solid #999999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff4500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
color: #007aff;
|
||||
margin-left: 10rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.refund-hint {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
margin: 20rpx -30rpx;
|
||||
}
|
||||
|
||||
.refund-item2 {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.refund-description {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
padding: 15rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.imgCon {
|
||||
font-size: 18rpx;
|
||||
color: #222222;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: #F6F7FB;
|
||||
border: 1rpx solid #D1D1D1;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.imgCon image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.u-upload__wrap__preview {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx 0rpx 10rpx 10rpx !important;
|
||||
margin-top: 20rpx !important;
|
||||
}
|
||||
|
||||
.u-upload__wrap__preview__image {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 60%;
|
||||
height: 88rpx;
|
||||
background-color: #ff451b;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
margin-top: 50rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 选择退款原因弹窗样式 */
|
||||
.cancel-reason-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.asTabs2 {
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.asTab2 {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 15rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.asTab2.active {
|
||||
color: #ff451b;
|
||||
}
|
||||
|
||||
.asTab2.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1rpx;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 4rpx;
|
||||
background-color: #ff451b;
|
||||
}
|
||||
|
||||
.reason-list {
|
||||
max-height: 500rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.reason-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 2rpx solid #999999;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.radio.active {
|
||||
border-color: #ff451b;
|
||||
background-color: #ff451b;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background-color: #ff451b;
|
||||
color: #ffffff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
/* 打开弹窗按钮样式 */
|
||||
.open-popup-btn {
|
||||
height: 88rpx;
|
||||
background-color: #ff451b;
|
||||
color: #ffffff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
margin: 40rpx auto;
|
||||
display: block;
|
||||
}
|
||||
263
packages/myOrders/apply/index.vue
Normal file
263
packages/myOrders/apply/index.vue
Normal file
@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<view class="apply-container">
|
||||
<!-- 确认退款信息弹窗 -->
|
||||
<view class="refund-info-container">
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">服务类型<text class="required">*</text></view>
|
||||
<view class="refund-value" @click="openAfterSalePopup2('serviceType')">
|
||||
{{ selectedServiceType || '请选择服务类型' }}
|
||||
<text class="arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">退款原因<text class="required">*</text></view>
|
||||
<view class="refund-value" @click="openAfterSalePopup2('refundReason')">
|
||||
{{ selectedRefundReason || '请选择退款原因' }}
|
||||
<text class="arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refund-item" style="border-bottom: none;">
|
||||
<view class="refund-label">退款金额<text class="required">*</text></view>
|
||||
<view class="refund-value">
|
||||
<text class="price">¥{{ refundAmount || '0.00' }}</text>
|
||||
<text class="modify-btn" @click="modifyRefundAmount">修改</text>
|
||||
<view class="refund-hint">可修改，最多¥{{ maxRefundAmount || '0.00' }}，含发货邮费¥{{ postage || '0.00' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="refund-item2">
|
||||
<view class="refund-label">补充描述和凭证</view>
|
||||
<textarea class="refund-description" placeholder="补充描述，有助于商家更好的处理售后问题" v-model="refundDescription"
|
||||
maxlength="200"></textarea>
|
||||
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
||||
:maxCount="3">
|
||||
<view class="imgCon">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
||||
mode="widthFix"></image>
|
||||
上传凭证
|
||||
</view>
|
||||
</u-upload>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">退款方式</view>
|
||||
<view class="refund-value" style="margin-bottom: 10rpx;">
|
||||
{{ refundMethod || '自行寄回' }}
|
||||
<view class="refund-hint">您可自行安排将商品退回商家</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">商家地址</view>
|
||||
<view class="refund-value" @click="viewAddressDetails">
|
||||
{{ merchantAddress || '未设置' }}
|
||||
<text class="arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contact-info">
|
||||
<text>{{ merchantContact || '未设置' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="submit-btn" @click="submitRefundApplication">提交申请</button>
|
||||
|
||||
<!-- 选择退款原因弹窗 -->
|
||||
<u-popup ref="popup2" :show="afterSalePopup2" :round="10" @close="closeAfterSalePopup2"
|
||||
:mask-close-able="false">
|
||||
<view class="cancel-reason-container">
|
||||
<view class="title">选择退款原因</view>
|
||||
<view class="asTabs2">
|
||||
<view :class="['asTab2', selectedAfterSaleType2 === 0 ? 'active' : '']"
|
||||
@click="selectAfterSaleType2(0)">
|
||||
退货退款</view>
|
||||
<view :class="['asTab2', selectedAfterSaleType2 === 1 ? 'active' : '']"
|
||||
@click="selectAfterSaleType2(1)">
|
||||
退货
|
||||
</view>
|
||||
</view>
|
||||
<view class="reason-list" v-if="selectedAfterSaleType2 === 0">
|
||||
<view v-for="(reason, index) in applyRefundReasons" :key="index" class="reason-item"
|
||||
@click="selectAsReason(index)">
|
||||
<view :class="['radio', selectedAsReason === index ? 'active' : '']"></view>
|
||||
<text>{{ reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="reason-list" v-if="selectedAfterSaleType2 === 1">
|
||||
<view v-for="(reason, index) in cancelReasons" :key="index" class="reason-item"
|
||||
@click="selectAsReason(index)">
|
||||
<view :class="['radio', selectedAsReason === index ? 'active' : '']"></view>
|
||||
<text>{{ reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="confirmAfterSaleCancel2">确定</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
isPhone,
|
||||
picUrl,
|
||||
request,
|
||||
upload,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentAfterSale: null,
|
||||
afterSalePopup2: false,
|
||||
afterSalePopup3: false,
|
||||
selectedAfterSaleType2: 0, // 0:退货/退款, 1:退货
|
||||
selectedAsReason: 0,
|
||||
selectedServiceType: '',
|
||||
selectedRefundReason: '',
|
||||
refundAmount: 0,
|
||||
maxRefundAmount: 0,
|
||||
postage: 0,
|
||||
refundDescription: '',
|
||||
refundMethod: '自行寄回',
|
||||
merchantAddress: '衡水市路北街道中心北大街世纪名城41号楼',
|
||||
merchantContact: '高尚 18032753127',
|
||||
imgList: [],
|
||||
applyRefundReasons: [
|
||||
'商品质量问题',
|
||||
'商品与描述不符',
|
||||
'商品破损',
|
||||
'商品错发/漏发',
|
||||
'其他原因'
|
||||
],
|
||||
cancelReasons: [
|
||||
'不想要了',
|
||||
'拍错了',
|
||||
'商品质量问题',
|
||||
'其他原因'
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
const item = JSON.parse(options?.item);
|
||||
console.log("🚀 ~ onLoad ~ item:", item)
|
||||
this.currentAfterSale = item;
|
||||
// 设置初始退款金额等数据
|
||||
if (item) {
|
||||
this.refundAmount = item.sales_price || 0;
|
||||
this.maxRefundAmount = item.sales_price || 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 关闭弹窗
|
||||
closeAfterSalePopup2() {
|
||||
this.afterSalePopup2 = false;
|
||||
},
|
||||
|
||||
closeAfterSalePopup3() {
|
||||
this.afterSalePopup3 = false;
|
||||
},
|
||||
|
||||
// 选择售后类型
|
||||
selectAfterSaleType2(index) {
|
||||
this.selectedAfterSaleType2 = index;
|
||||
},
|
||||
|
||||
// 选择退款原因
|
||||
selectAsReason(index) {
|
||||
this.selectedAsReason = index;
|
||||
},
|
||||
|
||||
// 确认退款原因选择
|
||||
confirmAfterSaleCancel2() {
|
||||
const afterSaleTypes = ['退货退款', '退货'];
|
||||
const selectedType = afterSaleTypes[this.selectedAfterSaleType2];
|
||||
console.log('选中的售后类型:', selectedType);
|
||||
|
||||
let selectedReasonText = '';
|
||||
if (selectedType == '退货退款') {
|
||||
selectedReasonText = this.applyRefundReasons[this.selectedAsReason];
|
||||
} else {
|
||||
selectedReasonText = this.cancelReasons[this.selectedAsReason];
|
||||
}
|
||||
console.log('退款原因:', selectedReasonText);
|
||||
|
||||
// 设置选中的服务类型和退款原因
|
||||
this.selectedServiceType = selectedType;
|
||||
this.selectedRefundReason = selectedReasonText;
|
||||
|
||||
this.selectAsReason(0);
|
||||
this.afterSalePopup2 = false;
|
||||
},
|
||||
|
||||
// 打开选择服务类型或退款原因弹窗
|
||||
openAfterSalePopup2(type) {
|
||||
this.afterSalePopup3 = false;
|
||||
this.afterSalePopup2 = true;
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
afterReadImg(e) {
|
||||
e.file.forEach(item => {
|
||||
upload(item.url, res => {
|
||||
this.imgList.push({ url: picUrl + res.data.path });
|
||||
console.log('imgList:', this.imgList);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
deletePic(e) {
|
||||
this.imgList.splice(e.index, 1);
|
||||
},
|
||||
|
||||
// 修改退款金额
|
||||
modifyRefundAmount() {
|
||||
console.log('修改退款金额');
|
||||
// 这里可以添加修改退款金额的逻辑
|
||||
},
|
||||
|
||||
// 查看地址详情
|
||||
viewAddressDetails() {
|
||||
console.log('查看地址详情');
|
||||
// 这里可以添加查看地址详情的逻辑
|
||||
},
|
||||
|
||||
// 提交退款申请
|
||||
submitRefundApplication() {
|
||||
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
||||
uni.showToast({
|
||||
title: '请选择服务类型和退款原因',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 输出弹窗中的所有内容
|
||||
const refundInfo = {
|
||||
serviceType: this.selectedServiceType,
|
||||
refundReason: this.selectedRefundReason,
|
||||
refundAmount: this.refundAmount,
|
||||
maxRefundAmount: this.maxRefundAmount,
|
||||
postage: this.postage,
|
||||
refundDescription: this.refundDescription,
|
||||
refundMethod: this.refundMethod,
|
||||
merchantAddress: this.merchantAddress,
|
||||
merchantContact: this.merchantContact,
|
||||
imgList: this.imgList
|
||||
};
|
||||
console.log('提交退款申请:', refundInfo);
|
||||
|
||||
this.afterSalePopup3 = false;
|
||||
// 这里可以添加提交后的处理逻辑
|
||||
uni.showToast({
|
||||
title: '退款申请提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
495
packages/myOrders/changeInfo/index.css
Normal file
495
packages/myOrders/changeInfo/index.css
Normal file
@ -0,0 +1,495 @@
|
||||
page {
|
||||
background-color: #f6f7fb;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
/* 全部流程弹窗样式 */
|
||||
.all-process-popup {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.process-steps_top {
|
||||
padding: 30rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.process-steps {
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
margin-bottom: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
width: 2rpx;
|
||||
height: 100%;
|
||||
background-color: #d9d9d9;
|
||||
position: absolute;
|
||||
left: 12rpx;
|
||||
top: 30rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-line.active {
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
background-color: #ffffff;
|
||||
margin-right: 20rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-circle.active {
|
||||
border-color: #ff4d4f;
|
||||
background-color: #fff2f0;
|
||||
}
|
||||
|
||||
.step-circle.active2 {
|
||||
border-color: #ff4d4f;
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.step-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-title.active {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin: 10rpx;
|
||||
}
|
||||
|
||||
.step-desc2 {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 90%;
|
||||
height: 90rpx;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
border-radius: 45rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
margin: 40rpx auto;
|
||||
display: block;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.all-process-link {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-top: 20rpx;
|
||||
margin-left: 240rpx;
|
||||
}
|
||||
|
||||
.status-tip {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
display: block;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 20rpx;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.asGoodTag {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 8rpx 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.asGoodTag1 {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
top: 133rpx;
|
||||
left: 80rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
background-color: #fff2f0;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.goods-count {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.refund-info {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 25rpx 20rpx;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.info-item2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 25rpx 20rpx;
|
||||
}
|
||||
|
||||
.address-content {
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.text-wrapper_8 {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.text_41 {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.text_42 {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.block_15 {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.address-view {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.address-val{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-break: break-all;
|
||||
border: 1rpx solid red;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.icon_2 {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-s2ize: 28rpx;
|
||||
color: #666666;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.info-arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 2rpx solid #999999;
|
||||
border-right: 2rpx solid #999999;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #d9d9d9;
|
||||
color: #333;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.urge-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffe8e5;
|
||||
color: #ed4d1c;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.bottomImg{
|
||||
width: 70rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
/* 退款去向弹窗样式 */
|
||||
.money-path-popup-content {
|
||||
background-color: #ffffff;
|
||||
border-top-left-radius: 30rpx;
|
||||
border-top-right-radius: 30rpx;
|
||||
padding: 20rpx;
|
||||
height: 45vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.refund-method {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.method-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.wechat-icon {
|
||||
width: 40rpx;
|
||||
height: 35rpx;
|
||||
background-size: cover;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.method-text {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.method-text2 {
|
||||
font-size: 28rpx;
|
||||
color: #9d9d9d;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.method-amount {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.refund-status {
|
||||
padding: 0 70rpx;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
position: relative;
|
||||
padding-left: 40rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.status-item.active .status-dot {
|
||||
border: 3rpx solid #e35e38;
|
||||
}
|
||||
|
||||
.status-item.active .status-line {
|
||||
/* background-color: #e35e38; */
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.status-line {
|
||||
border-left: 4rpx dotted #ea704b86;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 7rpx;
|
||||
top: 40rpx;
|
||||
}
|
||||
|
||||
.status-item:last-child .status-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
display: block;
|
||||
}
|
||||
314
packages/myOrders/changeInfo/index.vue
Normal file
314
packages/myOrders/changeInfo/index.vue
Normal file
@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<view class="container page">
|
||||
<!-- 进度指示器 -->
|
||||
<view class="process-steps_top" v-if="false">
|
||||
<view class="step-item">
|
||||
<view class="step-line"></view>
|
||||
<view class="step-circle active"></view>
|
||||
<view class="step-info">
|
||||
<text class="step-title">申请换货</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="step-line"></view>
|
||||
<view class="step-circle active active2"></view>
|
||||
<view class="step-info">
|
||||
<text class="step-title active">等待商家处理退货申请<text class="step-desc">还剩6天23时26分</text></text>
|
||||
<text class="step-desc2">如卖家同意,请按照卖家给出的地址及时寄出</text>
|
||||
<text class="step-desc2">如卖超时未及时处理,平台将自动同意,请按照平台给出的地址及时寄出</text>
|
||||
<text class="step-desc2">等待买家退货</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="step-circle"></view>
|
||||
<view class="step-info">
|
||||
<text class="step-title">
|
||||
待卖家确认收货并发货
|
||||
<text class="all-process-link" @click="showAllProcess">全部流程 ></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="status-tip" v-if="false">
|
||||
<text class="status-title">换货关闭</text>
|
||||
<text class="status-desc">2025年7月25日 11:30</text>
|
||||
<text class="status-desc">由于您主动撤销换货申请,换货关闭。</text>
|
||||
</view>
|
||||
|
||||
<view class="status-tip">
|
||||
<text class="status-title">换货关闭</text>
|
||||
<text class="status-desc">2025年7月25日 11:30</text>
|
||||
<text class="status-desc" style="color: #f63b08;">商家拒绝了您的换货申请,换货关闭</text>
|
||||
</view>
|
||||
|
||||
<view class="hr"></view>
|
||||
|
||||
<view v-if="false">
|
||||
<view class="info-item2">
|
||||
<view class="address-content">
|
||||
<view class="text-wrapper_8">
|
||||
<text class="text_41">高尚</text>
|
||||
<text class="text_42">15901518415</text>
|
||||
</view>
|
||||
<view class="block_15">
|
||||
<view class="address-view">
|
||||
<view class="address-val">
|
||||
<text>河北省衡水市桃城区路北街道中心北大街世纪名城41号楼</text>
|
||||
<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png"
|
||||
class="copy-icon" @click="copyRefundNo"/> -->
|
||||
</view>
|
||||
</view>
|
||||
<image src="http://localhost:8080/af_update_address.png" class="icon_2" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="addOrderIdBtn" @click="addOrderId">填写单号</button>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-item">
|
||||
<view class="asGoodTag tag-img"
|
||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</view>
|
||||
<image class="goods-image" :src="currentAfterSale.commodity_order_item[0].commodity_pic"></image>
|
||||
<view class="goods-details">
|
||||
<text class="goods-name">
|
||||
<text class="asGoodTag asGoodTag1"
|
||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
|
||||
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
||||
</text>
|
||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
||||
<text class="goods-price">
|
||||
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
||||
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退款信息 -->
|
||||
<view class="refund-info">
|
||||
<view class="info-item">
|
||||
<text class="info-label">服务类型</text>
|
||||
<text class="info-value">{{ getServiceTypeText(currentAfterSale.after_sales_type) }}</text>
|
||||
<text class="info-arrow"></text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款原因</text>
|
||||
<text class="info-value">{{ currentAfterSale.after_sales_reason }}</text>
|
||||
<text class="info-arrow"></text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">换货数量</text>
|
||||
<text class="info-value">{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">申请时间</text>
|
||||
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款编号</text>
|
||||
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
||||
<text class="copy-icon" @click="copyRefundNo"></text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">收货地址</text>
|
||||
<text class="info-value">{{ currentAfterSale.user_address }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="false">
|
||||
<text class="info-label">退款完结</text>
|
||||
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons" v-if="false">
|
||||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||
<button class="urge-btn" @click="modifyRefund">修改申请</button>
|
||||
</view>
|
||||
|
||||
<!-- 全部流程弹窗 -->
|
||||
<u-popup ref="allProcessPopup" :show="allProcessPopupShow" :round="10" @close="closeAllProcessPopup">
|
||||
<view class="all-process-popup">
|
||||
<view class="popup-title">全部退款流程</view>
|
||||
<view class="close-btn" @click="closeAllProcessPopup">取消</view>
|
||||
<view class="process-steps">
|
||||
<view class="step-item">
|
||||
<view class="step-line"></view>
|
||||
<view class="step-circle active"></view>
|
||||
<view class="step-info">
|
||||
<text class="step-title">申请换货</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="step-line"></view>
|
||||
<view class="step-circle active"></view>
|
||||
<view class="step-info">
|
||||
<text class="step-title">商家同意换货</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="step-line"></view>
|
||||
<view class="step-circle active active2"></view>
|
||||
<view class="step-info">
|
||||
<text class="step-title active">等待商家处理退货申请<text class="step-desc">还剩6天23时26分</text></text>
|
||||
<text class="step-desc2">卖家已同意换货，请您及时退回需更换的商品。</text>
|
||||
<text class="step-desc2">如您超时未填写退货物流信息，平台将自动关闭本次换货申请。</text>
|
||||
<text class="step-desc2">未经卖家同意，请不要使用到付或平邮。</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="step-line"></view>
|
||||
<view class="step-circle"></view>
|
||||
<view class="step-info">
|
||||
<text class="step-title">待卖家确认收货并发货</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="step-line"></view>
|
||||
<view class="step-circle"></view>
|
||||
<view class="step-info">
|
||||
<text class="step-title">卖家已发货，请注意查收</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="step-circle"></view>
|
||||
<view class="step-info">
|
||||
<text class="step-title">换货完成</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="closeAllProcessPopup">我知道了</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
isPhone,
|
||||
picUrl,
|
||||
request,
|
||||
upload,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentAfterSale: {},
|
||||
pickerDefaultDate: new Date(),
|
||||
allProcessPopupShow: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 初始化日期选择器默认值为当前申请时间
|
||||
this.pickerDefaultDate = new Date(this.currentAfterSale.create_time);
|
||||
},
|
||||
onLoad(options) {
|
||||
const item = JSON.parse(options?.item);
|
||||
console.log("🚀 ~ onLoad ~ item:", item)
|
||||
this.currentAfterSale = item;
|
||||
},
|
||||
methods: {
|
||||
getServiceTypeText(type) {
|
||||
return type === 1 ? '退货退款' : '仅退款';
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
|
||||
},
|
||||
|
||||
// 复制商家地址
|
||||
copyAdress() {
|
||||
uni.setClipboardData({
|
||||
data: this.currentAfterSale.after_sales_no,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addOrderId() {
|
||||
NavgateTo(`../returnLogistics/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||||
},
|
||||
|
||||
// 复制退款编号
|
||||
copyRefundNo() {
|
||||
uni.setClipboardData({
|
||||
data: this.currentAfterSale.after_sales_no,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 撤销申请
|
||||
cancelRefund() {
|
||||
uni.showModal({
|
||||
title: "确定要撤销本次售后申请吗？",
|
||||
showCancel: true,
|
||||
cancelText: "暂不撤销",
|
||||
confirmText: "确认撤销",
|
||||
confirmColor: "#ff4d4f",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 撤销售后接口
|
||||
uni.showToast({
|
||||
title: '订单撤销成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 修改申请
|
||||
modifyRefund() {
|
||||
NavgateTo(`../apply/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||||
},
|
||||
|
||||
// 显示全部流程弹窗
|
||||
showAllProcess() {
|
||||
this.allProcessPopupShow = true;
|
||||
},
|
||||
|
||||
// 关闭全部流程弹窗
|
||||
closeAllProcessPopup() {
|
||||
this.allProcessPopupShow = false;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url('./index.css')
|
||||
</style>
|
||||
@ -160,7 +160,7 @@ export default {
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 这里添加提交评价的API调用逻辑
|
||||
//
|
||||
uni.showToast({
|
||||
title: "评价提交成功",
|
||||
icon: "success",
|
||||
|
||||
@ -137,6 +137,16 @@ page {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.afterSaleNum {
|
||||
font-size: 26rpx;
|
||||
color: #ff3710;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
right: 230rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.yfd-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
@ -157,4 +167,404 @@ page {
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
margin: 0;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.required{
|
||||
color: red;
|
||||
}
|
||||
|
||||
.cancel-reason-container {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.asType {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.asType text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.asTabs {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.asTab {
|
||||
padding: 15rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.asTab.active {
|
||||
border: 1rpx solid #ff5252;
|
||||
color: #ff5252;
|
||||
}
|
||||
|
||||
.asTabs2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.asTab2 {
|
||||
width: 50%;
|
||||
padding: 15rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.asTab2.active {
|
||||
border-bottom: 1rpx solid #ff5252;
|
||||
color: #ff5252;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.asGoodsInfo {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.asGoodInfo {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.asGoodRadio{
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
.asGoodImg {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.asGoodDetail {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.asGoodTitle {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 40rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.asGoodTag {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.asGoodTag1 {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
top: 145rpx;
|
||||
left: 130rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.asGoodDesc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.asGoodPrice {
|
||||
font-size: 28rpx;
|
||||
color: #ff5252;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.asGoodNum {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
align-self: flex-start;
|
||||
margin-top: 120rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.reason-list {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.reason-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #999;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio.active {
|
||||
border-color: #e60012;
|
||||
}
|
||||
|
||||
.radio.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background-color: #e60012;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.reason-item text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background-color: #ff451b;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.noSalePopup {
|
||||
padding: 50rpx 50rpx 0 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.noSalePopup-btn {
|
||||
width: 250rpx;
|
||||
height: 70rpx;
|
||||
background-color: #e60012;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 确认退款信息弹窗样式 */
|
||||
.refund-info-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.refund-title {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.refund-item {
|
||||
display: flex;
|
||||
margin-bottom: 26rpx;
|
||||
padding-bottom: 26rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.hr{
|
||||
position: relative;
|
||||
left: -30rpx;
|
||||
right: -30rpx;
|
||||
width: 120%;
|
||||
height: 20rpx;
|
||||
background-color: #f0f2f5;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.refund-item2 {
|
||||
margin-bottom: 26rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.refund-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.refund-label {
|
||||
width: 200rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.refund-value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff4d4f;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
color: #989898;
|
||||
font-size: 26rpx;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.refund-hint {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 45rpx;
|
||||
}
|
||||
|
||||
.refund-description {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
border: 1rpx solid #e8e8e8;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
resize: none;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.refund-attachment {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
margin-top: 10rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 45rpx;
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
display: inline-block;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-top: 2rpx solid #999999;
|
||||
border-right: 2rpx solid #999999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 图片上传 */
|
||||
.imgCon {
|
||||
font-size: 18rpx;
|
||||
color: #222222;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: #F6F7FB;
|
||||
border: 1rpx solid #D1D1D1;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.imgCon image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.u-upload__wrap__preview {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx 0rpx 10rpx 10rpx !important;
|
||||
margin-top: 20rpx !important;
|
||||
}
|
||||
|
||||
.u-upload__wrap__preview__image {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
@ -1,12 +1,8 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="(item, index) in categoryList"
|
||||
:key="index"
|
||||
:class="['tabItem', selectedTab === index ? 'active2' : '']"
|
||||
@click="selectTab(index, item)"
|
||||
>
|
||||
<view v-for="(item, index) in categoryList" :key="index"
|
||||
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
||||
{{ item.category_name }}
|
||||
</view>
|
||||
</view>
|
||||
@ -18,17 +14,17 @@
|
||||
<view v-if="selectedTab === 7">
|
||||
<rated />
|
||||
</view>
|
||||
<view v-if="selectedTab === 8">
|
||||
<afterSale />
|
||||
</view>
|
||||
<view v-else>
|
||||
<view v-for="(item, index) in orderData" :key="index">
|
||||
<view class="contentList">
|
||||
<!-- 订单头部信息 -->
|
||||
<view class="order-header" @click="toDetails(item.order_status)">
|
||||
<view class="order-header" @click="toDetails(item)">
|
||||
<text>提交订单：{{ item.order_time }}</text>
|
||||
<view
|
||||
v-if="item.order_status == 6 || item.order_status == 5"
|
||||
class="status3"
|
||||
>{{ getOrderStatus(item.order_status) }}</view
|
||||
>
|
||||
<view v-if="item.order_status == 6 || item.order_status == 5" class="status3">{{
|
||||
getOrderStatus(item.order_status) }}</view>
|
||||
<view v-else-if="item.order_status == 7" class="status2">
|
||||
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/refund.png" />
|
||||
{{ getOrderStatus(item.order_status) }}
|
||||
@ -39,53 +35,43 @@
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods-list" @click="toDetails(item.order_status)">
|
||||
<view
|
||||
v-for="(goods, goodsIndex) in item.commodity_order_item_list
|
||||
.commodity_pic"
|
||||
:key="goodsIndex"
|
||||
class="goods-item"
|
||||
>
|
||||
<image :src="goods.image" class="goods-img"></image>
|
||||
<view class="goods-list" @click="toDetails(item)">
|
||||
<view v-for="(goods, goodsIndex) in item.commodity_order_item_list" :key="goodsIndex" class="goods-item">
|
||||
<image :src="goods.commodity_pic" class="goods-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单底部信息 -->
|
||||
<view class="order-footer">
|
||||
<view
|
||||
class="order-footer-text"
|
||||
@click="toDetails(item.order_status)"
|
||||
>共{{ item.total_count }}件商品，共计
|
||||
<view class="order-footer-text" @click="toDetails(item)">共{{ item.total_count }}件商品，共计
|
||||
<text> {{ item.total_amount }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="btn-group" v-if="item.order_status === 1">
|
||||
<button class="cancel-btn" @click="cancelOrder">
|
||||
<button class="cancel-btn" @click="cancelOrder(item)">
|
||||
取消订单
|
||||
</button>
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<button class="pay-btn" @click="goToPay">立即支付</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 3">
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 6">
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
||||
<button class="cancel-btn" @click="applyRefund(item)">申请退款</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 4">
|
||||
<button class="cancel-btn" @click="checkLogistics">
|
||||
查看物流
|
||||
</button>
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
||||
<button class="cancel-btn" @click="cancelOrder">查看物流</button>
|
||||
<button class="pay-btn" @click="confirmReceiving(item)">确认收货</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 5">
|
||||
<button class="cancel-btn" @click="orderEvaluate">
|
||||
<text class="afterSaleNum">4笔售后</text>
|
||||
<button class="cancel-btn" @click="afterSale(item)">退换/售后</button>
|
||||
<button class="pay-btn" @click="cancelOrder">评价</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 6">
|
||||
<!-- <button class="cancel-btn" @click="orderEvaluate">
|
||||
服务评价
|
||||
</button>
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
||||
<button class="pay-btn" @click="cancelOrder">再来一单</button> -->
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 7">
|
||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
||||
@ -96,18 +82,59 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!------------------ 以下为popup ------------------>
|
||||
<!-- 取消订单 -->
|
||||
<cancel-order-popup :showPopup.sync="showPopup" @orderCancelled="handleOrderCancelled" />
|
||||
|
||||
<!-- 申请退款 -->
|
||||
<refund-popup :showPopup.sync="showTkPopup" @refundConfirmed="handleRefundConfirmed" />
|
||||
|
||||
<!-- 退换 售后 - 选择退款原因 -->
|
||||
<!-- 售后弹窗组件 -->
|
||||
<after-sale-popup :afterSaleGoods.sync="afterSaleGoods" ref="afterSalePopupRef"
|
||||
@refundSubmitted="handleRefundSubmitted" />
|
||||
|
||||
<!-- 无售后商品 -->
|
||||
<view>
|
||||
<u-popup ref="popup" mode="center" :show="noSalePopup" :round="15" :mask-close-able="false">
|
||||
<view class="noSalePopup">
|
||||
<view>抱歉该订单已无可申请售后的商品</view>
|
||||
<button class="noSalePopup-btn" @click="noSalePopup = false">我知道了</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { picUrl, NavgateTo, request } from "../../../utils";
|
||||
import {
|
||||
isPhone,
|
||||
picUrl,
|
||||
request,
|
||||
upload,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
import { apiArr } from "../../../api/order";
|
||||
import Rated from "./rated.vue";
|
||||
import AwaitRated from "./awaitRated.vue";
|
||||
import { apiArr as afterSaleApi } from "../../../api/afterSale";
|
||||
import Rated from "../rated/rated.vue";
|
||||
import AwaitRated from "../awaitRated/awaitRated.vue";
|
||||
import AfterSale from "../afterSale/index.vue";
|
||||
import cancelOrderPopup from './popup/cancelOrder/cancelOrder.vue';
|
||||
import refundPopup from './popup/refund/refund.vue';
|
||||
import afterSalePopup from './popup/afterSale/index.vue';
|
||||
import orderMockData from "./orderMockData.json";
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Rated,
|
||||
AwaitRated,
|
||||
AfterSale,
|
||||
cancelOrderPopup,
|
||||
refundPopup,
|
||||
afterSalePopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -123,7 +150,13 @@ export default {
|
||||
{ category_name: "售后" },
|
||||
],
|
||||
selectedTab: 0,
|
||||
orderData: [],
|
||||
orderData: orderMockData,
|
||||
|
||||
showPopup: false,//取消订单
|
||||
afterSaleGoods: [],//售后商品列表
|
||||
noSalePopup: false,//无售后商品
|
||||
showTkPopup: false,//申请退款
|
||||
afterSaleItem: '',//操作对象
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -133,23 +166,100 @@ export default {
|
||||
this.getOrderList();
|
||||
}
|
||||
},
|
||||
cancelOrder() {
|
||||
// 取消订单逻辑
|
||||
// 取消订单
|
||||
cancelOrder(item) {
|
||||
this.afterSaleItem = item;
|
||||
this.showPopup = true
|
||||
},
|
||||
|
||||
// 处理订单取消事件
|
||||
handleOrderCancelled(data) {
|
||||
console.log("🚀 ~ handleOrderCancelled ~ 取消原因:", data.reason);
|
||||
const params = {
|
||||
order_id: this.afterSaleItem.id,
|
||||
method: 1,
|
||||
cancel_reason: data.reason,
|
||||
}
|
||||
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
||||
console.log("🚀 ~ handleOrderCancelled ~ res:", res)
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// 售后按钮
|
||||
afterSale(item) {
|
||||
this.afterSaleGoods = item.commodity_order_item_list;
|
||||
this.$refs.afterSalePopupRef.openAfterSalePopup();
|
||||
|
||||
// // 根据条件判断是否可以售后
|
||||
// request(afterSaleApi.isAllow, "POST", {
|
||||
// order_id: item.id,
|
||||
// }).then((res) => {
|
||||
// console.log("🚀 ~ afterSale ~ res:", res)
|
||||
// if (res.data.is_allow_after_sales) {
|
||||
// this.afterSaleGoods = res.data.allow_items;
|
||||
// // this.selectedAsGood = item.commodity_order_item_list[0].id;
|
||||
// this.$refs.afterSalePopupRef.openAfterSalePopup();
|
||||
// } else {
|
||||
// this.noSalePopup = true
|
||||
// }
|
||||
// });
|
||||
},
|
||||
|
||||
// 处理退款提交事件
|
||||
handleRefundSubmitted(data) {
|
||||
console.log("🚀 ~ handleRefundSubmitted ~ 退款申请提交成功:", data);
|
||||
},
|
||||
|
||||
|
||||
// 申请退款
|
||||
applyRefund(item) {
|
||||
this.afterSaleItem = item;
|
||||
this.showTkPopup = true
|
||||
},
|
||||
|
||||
// 处理退款确认事件
|
||||
handleRefundConfirmed(data) {
|
||||
console.log("🚀 ~ handleRefundConfirmed ~ handleRefundConfirmed:", this.afterSaleItem)
|
||||
console.log("🚀 ~ handleRefundConfirmed ~ 退款原因:", data.reason);
|
||||
const params = {
|
||||
nick_name: uni.getStorageSync("nickName"),
|
||||
order_id: this.afterSaleItem.id,
|
||||
after_sales_type: 1,
|
||||
after_sales_reason: data.reason,
|
||||
refund_amount: this.afterSaleItem.total_amount,
|
||||
order_status: 3
|
||||
}
|
||||
console.log("🚀 ~ handleRefundConfirmed ~ parasm:", params)
|
||||
request(afterSaleApi.afterSaleCreate, "POST", params).then((res) => {
|
||||
console.log("🚀 ~ handleRefundConfirmed ~ res:", res)
|
||||
});
|
||||
},
|
||||
|
||||
// 确认收货
|
||||
confirmReceiving(item) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定要取消订单吗？",
|
||||
title: "确认收货",
|
||||
content: "确认收货后订单状态将变为【已完成】,如有售后需求可正常申请退款/售后,确定要确认收货吗？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 调用取消订单API
|
||||
const params = {
|
||||
order_id: item.id,
|
||||
method: 2,
|
||||
}
|
||||
console.log("🚀 ~ confirmReceiving ~ params:", params)
|
||||
request(afterSaleApi.cancelOrConfirm, "POST", params).then((res) => {
|
||||
console.log("🚀 ~ handleRefundConfirmed ~ res:", res)
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
goToPay() {
|
||||
},
|
||||
toDetails(order_status) {
|
||||
toDetails(item) {
|
||||
NavgateTo(
|
||||
`/packages/myOrders/orderDetails/index?order_status=${order_status}`
|
||||
`/packages/myOrders/orderDetails/index?item=${JSON.stringify(item)}`
|
||||
);
|
||||
},
|
||||
|
||||
@ -186,24 +296,7 @@ export default {
|
||||
request(apiArr.orderList, "POST", {
|
||||
user_id: uni.getStorageSync("userId"),
|
||||
}).then((res) => {
|
||||
const orderList = res.order_list || [];
|
||||
let filteredData = orderList;
|
||||
|
||||
if (this.selectedTab !== 0) {
|
||||
const statusMap = {
|
||||
1: 1, // 待付款
|
||||
2: 3, // 待发货
|
||||
3: 4, // 配送中
|
||||
4: 5, // 已完成
|
||||
};
|
||||
const targetStatus = statusMap[this.selectedTab];
|
||||
if (targetStatus) {
|
||||
filteredData = orderList.filter(
|
||||
(item) => item.order_status === targetStatus
|
||||
);
|
||||
}
|
||||
}
|
||||
this.orderData = filteredData;
|
||||
//
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
167
packages/myOrders/index/orderMockData.json
Normal file
167
packages/myOrders/index/orderMockData.json
Normal file
@ -0,0 +1,167 @@
|
||||
[
|
||||
{
|
||||
"id": 1001,
|
||||
"user_id": 2001,
|
||||
"supplier_id": 3001,
|
||||
"supplier_name": "生鲜优选",
|
||||
"order_group_id": 5001,
|
||||
"order_no": "DD202508131001",
|
||||
"total_amount": 88.50,
|
||||
"total_count": 3,
|
||||
"order_status": 1,
|
||||
"evauate_status": 2,
|
||||
"after_sales_status": 2,
|
||||
"receiving_name": "张三",
|
||||
"receiving_phone": "13800138001",
|
||||
"receiving_address": "北京市朝阳区科技园A座101",
|
||||
"pay_method": "微信支付",
|
||||
"payment_amount": 0,
|
||||
"payment_status": "未支付",
|
||||
"payment_serial": "",
|
||||
"payer_name": "",
|
||||
"order_time": "2025-08-13T10:30:00Z",
|
||||
"is_same_day": 1,
|
||||
"estimated_delivery_time": "今日14:00-16:00",
|
||||
"remark": "请尽快配送",
|
||||
"shiliu_score": 88.5,
|
||||
"shiliu_seed": 22.1,
|
||||
"timeout_time_stamp": 1755086400,
|
||||
"commodity_order_item_list": [
|
||||
{
|
||||
"id": 7001,
|
||||
"order_id": 1001,
|
||||
"goods_id": 8001,
|
||||
"goods_name": "澳洲牛排",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"goods_unit": "盒",
|
||||
"goods_spec": "200g/盒",
|
||||
"cost_price": 45.0,
|
||||
"sales_price": 68.0,
|
||||
"count": 1,
|
||||
"is_support_same_day": 1,
|
||||
"is_same_day": true
|
||||
},
|
||||
{
|
||||
"id": 7002,
|
||||
"goods_id": 8002,
|
||||
"goods_name": "有机西兰花",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"goods_unit": "份",
|
||||
"goods_spec": "500g/份",
|
||||
"cost_price": 8.0,
|
||||
"sales_price": 10.5,
|
||||
"count": 2,
|
||||
"is_support_same_day": 1,
|
||||
"is_same_day": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 1002,
|
||||
"order_no": "DD202508131002",
|
||||
"total_amount": 152.0,
|
||||
"total_count": 5,
|
||||
"order_status": 2,
|
||||
"payment_status": "支付中",
|
||||
"payment_time": "2025-08-13T10:35:22Z",
|
||||
"payer_name": "李四",
|
||||
"order_time": "2025-08-13T10:32:15Z",
|
||||
"commodity_order_item_list": [
|
||||
{
|
||||
"id": 7003,
|
||||
"goods_id": 8003,
|
||||
"goods_name": "精品榴莲",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"sales_price": 152.0,
|
||||
"count": 1,
|
||||
"is_support_same_day": 1,
|
||||
"is_same_day": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 1003,
|
||||
"order_no": "DD202508131003",
|
||||
"total_amount": 45.8,
|
||||
"order_status": 3,
|
||||
"payment_status": "已支付",
|
||||
"payment_amount": 45.8,
|
||||
"payment_serial": "PY20250813100003",
|
||||
"order_time": "2025-08-13T09:15:30Z",
|
||||
"is_same_day": 2,
|
||||
"commodity_order_item_list": [
|
||||
{
|
||||
"id": 7004,
|
||||
"goods_name": "东北大米",
|
||||
"count": 2,
|
||||
"sales_price": 22.9
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 1004,
|
||||
"order_no": "DD202508131004",
|
||||
"order_status": 4,
|
||||
"receiving_name": "王五",
|
||||
"receiving_phone": "13900139000",
|
||||
"payment_serial": "PY20250813090001",
|
||||
"order_time": "2025-08-13T08:45:00Z",
|
||||
"is_same_day": 1,
|
||||
"commodity_order_item_list": [
|
||||
{
|
||||
"id": 7005,
|
||||
"goods_name": "酸奶套装",
|
||||
"count": 1,
|
||||
"sales_price": 39.9
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 1005,
|
||||
"order_no": "DD202508131005",
|
||||
"order_status": 5,
|
||||
"evauate_status": 2,
|
||||
"payment_status": "已支付",
|
||||
"completed_at": "2025-08-13T15:20:18Z",
|
||||
"order_time": "2025-08-13T11:20:18Z",
|
||||
"commodity_order_item_list": [
|
||||
{
|
||||
"id": 7003,
|
||||
"goods_id": 8003,
|
||||
"goods_name": "冷冻虾仁",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"sales_price": 152.0,
|
||||
"count": 3,
|
||||
"is_support_same_day": 1,
|
||||
"is_same_day": false
|
||||
},
|
||||
{
|
||||
"id": 7004,
|
||||
"goods_id": 8004,
|
||||
"goods_name": "精品榴莲",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"sales_price": 152.0,
|
||||
"count": 1,
|
||||
"is_support_same_day": 2,
|
||||
"is_same_day": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 1006,
|
||||
"order_no": "DD202508131006",
|
||||
"order_status": 6,
|
||||
"cancelled_by": "user",
|
||||
"cancel_time": "2025-08-13T10:40:05Z",
|
||||
"cancel_reason": "选错商品",
|
||||
"order_time": "2025-08-13T10:38:12Z",
|
||||
"commodity_order_item_list": [
|
||||
{
|
||||
"id": 7007,
|
||||
"goods_name": "进口橙子",
|
||||
"count": 2,
|
||||
"sales_price": 32.0
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
473
packages/myOrders/index/popup/afterSale/index.css
Normal file
473
packages/myOrders/index/popup/afterSale/index.css
Normal file
@ -0,0 +1,473 @@
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.cancel-reason-container {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.asType {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.asType text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.asTabs {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.asTab {
|
||||
padding: 15rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.asTab.active {
|
||||
border: 1rpx solid #ff5252;
|
||||
color: #ff5252;
|
||||
}
|
||||
|
||||
.asTabs2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.asTab2 {
|
||||
width: 50%;
|
||||
padding: 15rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.asTab2.active {
|
||||
border-bottom: 1rpx solid #ff5252;
|
||||
color: #ff5252;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.asGoodsInfo {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.asGoodInfo {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.asGoodRadio {
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
.asGoodImg {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.asGoodDetail {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.asGoodTitle {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 40rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.asGoodTag {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.asGoodTag1 {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
top: 145rpx;
|
||||
left: 130rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.asGoodDesc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.asGoodPrice {
|
||||
font-size: 28rpx;
|
||||
color: #ff5252;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.asGoodNum {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
align-self: flex-start;
|
||||
margin-top: 120rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.reason-list {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.reason-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #999;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio.active {
|
||||
border-color: #e60012;
|
||||
}
|
||||
|
||||
.radio.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background-color: #e60012;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.reason-item text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background-color: #ff451b;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 确认退款信息弹窗样式 */
|
||||
.refund-info-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.refund-title {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.refund-item {
|
||||
display: flex;
|
||||
margin-bottom: 26rpx;
|
||||
padding-bottom: 26rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.hr {
|
||||
position: relative;
|
||||
left: -30rpx;
|
||||
right: -30rpx;
|
||||
width: 120%;
|
||||
height: 20rpx;
|
||||
background-color: #f0f2f5;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.refund-item2 {
|
||||
margin-bottom: 26rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.refund-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.refund-label {
|
||||
width: 200rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.refund-value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff4d4f;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
color: #989898;
|
||||
font-size: 26rpx;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.refund-hint {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 45rpx;
|
||||
}
|
||||
|
||||
.refund-description {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
border: 1rpx solid #e8e8e8;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
resize: none;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background-color: #ff451b;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
display: inline-block;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.imgCon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border: 1rpx dashed #e8e8e8;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.imgCon image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.imgCon text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.text_42{
|
||||
font-size: 24rpx;
|
||||
color: #a7a7a7;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.block_15{
|
||||
display: flex;
|
||||
margin-top: 15rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.address-view{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||
background-size: cover;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.icon_2 {
|
||||
width: 55rpx;
|
||||
height: 50rpx;
|
||||
position: relative;
|
||||
top: -30rpx;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
padding-left: 80rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.popup-header-h3 {
|
||||
font-weight: bold;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.popup-header-view {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.temp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.temp1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #959595;
|
||||
margin: 20rpx 0 5rpx 0;
|
||||
}
|
||||
|
||||
.temp_img {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.temp_img1 {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin: 5rpx 5rpx 0 5rpx;
|
||||
}
|
||||
|
||||
.itemSize {
|
||||
width: 30%;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
background: #F6F7FB;
|
||||
border-radius: 40rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
white-space: nowrap;
|
||||
margin:20rpx 30rpx;
|
||||
}
|
||||
|
||||
.itemSize_active {
|
||||
background: #FF370B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.itemSize-img{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
border:1rpx solid red;
|
||||
}
|
||||
|
||||
.itemSize_top{
|
||||
display: flex;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.itemSize_info {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.itemSize_name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.itemSize_price {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
margin-top: 10rpx;
|
||||
color: red;
|
||||
}
|
||||
501
packages/myOrders/index/popup/afterSale/index.vue
Normal file
501
packages/myOrders/index/popup/afterSale/index.vue
Normal file
@ -0,0 +1,501 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 选择售后商品 -->
|
||||
<view>
|
||||
<u-popup ref="popup" :show="afterSalePopup" :round="10" @close="closeAfterSalePopup"
|
||||
:mask-close-able="false">
|
||||
<view class="cancel-reason-container">
|
||||
<view class="title">选择退款原因</view>
|
||||
<view class="asType">
|
||||
<text>请选择售后类型</text>
|
||||
<view class="asTabs">
|
||||
<view :class="['asTab', selectedAfterSaleType === 0 ? 'active' : '']"
|
||||
@click="selectAfterSaleType(0)">
|
||||
退货/退款</view>
|
||||
<view :class="['asTab', selectedAfterSaleType === 1 ? 'active' : '']"
|
||||
@click="selectAfterSaleType(1)">换货
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="asGoodsInfo" v-for="(item, index) in afterSaleGoods" :key="index">
|
||||
<view class="asGoodInfo" @click="selectAsGood(item)">
|
||||
<view :class="['radio asGoodRadio', selectedAsGood == item.id ? 'active' : '']"></view>
|
||||
<view class="asGoodTag tag-img" v-if="item.is_support_same_day === 1">当日达</view>
|
||||
<image :src="item.commodity_pic" class="asGoodImg"></image>
|
||||
<view class="asGoodDetail">
|
||||
<view class="asGoodTitle">
|
||||
<text class="asGoodTag asGoodTag1" v-if="item.is_support_same_day === 1">当日达</text>
|
||||
{{ item.goods_name}}
|
||||
</view>
|
||||
<view class="asGoodDesc">{{ item.goods_spec }}</view>
|
||||
<view class="asGoodPrice">¥{{ item.cost_price }}/个</view>
|
||||
</view>
|
||||
<view class="asGoodNum">x{{ item.count }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="confirmAfterSaleCancel">下一步</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
|
||||
<!------------------------ 退货退款逻辑 ------------------------>
|
||||
<!-- 选择退款原因 -->
|
||||
<view v-if="selectedAfterSaleType === 0">
|
||||
<u-popup ref="popup" :show="afterSalePopup2" :round="10" @close="closeAfterSalePopup2"
|
||||
:mask-close-able="false">
|
||||
<view class="cancel-reason-container">
|
||||
<view class="title">选择退款原因</view>
|
||||
<view class="asTabs2">
|
||||
<view :class="['asTab2', selectedAfterSaleType2 === 0 ? 'active' : '']"
|
||||
@click="selectAfterSaleType2(0)">
|
||||
退货退款</view>
|
||||
<view :class="['asTab2', selectedAfterSaleType2 === 1 ? 'active' : '']"
|
||||
@click="selectAfterSaleType2(1)">退货
|
||||
</view>
|
||||
</view>
|
||||
<view class="reason-list" v-if="selectedAfterSaleType2 === 0">
|
||||
<view v-for="(reason, index) in applyRefundReasons" :key="index" class="reason-item"
|
||||
@click="selectAsReason(index)">
|
||||
<view :class="['radio', selectedAsReason === index ? 'active' : '']"></view>
|
||||
<text>{{ reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="reason-list" v-if="selectedAfterSaleType2 === 1">
|
||||
<view v-for="(reason, index) in cancelReasons" :key="index" class="reason-item"
|
||||
@click="selectAsReason(index)">
|
||||
<view :class="['radio', selectedAsReason === index ? 'active' : '']"></view>
|
||||
<text>{{ reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="confirmAfterSaleCancel2">下一步</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
<!-- 确认退款信息 -->
|
||||
<view v-if="selectedAfterSaleType === 0">
|
||||
<u-popup ref="popup" :show="afterSalePopup3" :round="10" @close="closeAfterSalePopup3"
|
||||
:mask-close-able="false">
|
||||
<view class="refund-info-container">
|
||||
<view class="refund-title">确认退款信息</view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">服务类型<text class="required">*</text></view>
|
||||
|
||||
<view class="refund-value" @click="openAfterSalePopup2('serviceType')">
|
||||
{{ selectedServiceType || '请选择服务类型' }}
|
||||
<text class="arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">退款原因<text class="required">*</text></view>
|
||||
<view class="refund-value" @click="openAfterSalePopup2('refundReason')">
|
||||
{{ selectedRefundReason || '请选择退款原因' }}
|
||||
<text class="arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refund-item" style="border-bottom: none;">
|
||||
<view class="refund-label">退款金额<text class="required">*</text></view>
|
||||
<view class="refund-value">
|
||||
<text class="price">¥{{ refundAmount || '0.00' }}</text>
|
||||
<text class="modify-btn" @click="modifyRefundAmount">修改</text>
|
||||
<view class="refund-hint">可修改，最多¥{{ maxRefundAmount || '0.00' }}，含发货邮费¥{{ postage || '0.00'
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="refund-item2">
|
||||
<view class="refund-label">补充描述和凭证</view>
|
||||
<textarea class="refund-description" placeholder="补充描述，有助于商家更好的处理售后问题"
|
||||
v-model="refundDescription" maxlength="200"></textarea>
|
||||
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
||||
:maxCount="3">
|
||||
<view class="imgCon">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
||||
mode="widthFix"></image>
|
||||
上传凭证
|
||||
</view>
|
||||
</u-upload>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">退款方式</view>
|
||||
<view class="refund-value" style="margin-bottom: 30rpx;">
|
||||
{{ refundMethod || '自行寄回' }}
|
||||
<view class="refund-hint">您可自行安排将商品退回商家</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">商家地址</view>
|
||||
<view class="refund-value" @click="viewAddressDetails">
|
||||
{{ merchantAddress || '未设置' }}
|
||||
<text class="arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contact-info">
|
||||
<text>{{ merchantContact || '未设置' }}</text>
|
||||
</view>
|
||||
<button class="submit-btn" @click="submitRefundApplication">提交申请</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
|
||||
<!------------------------ 换货逻辑 ------------------------>
|
||||
<!-- 选择退款原因 -->
|
||||
<view v-if="selectedAfterSaleType === 1">
|
||||
<u-popup ref="popup" :show="afterSalePopup2" :round="10" @close="closeAfterSalePopup2"
|
||||
:mask-close-able="false">
|
||||
<view class="cancel-reason-container">
|
||||
<view class="title">选择换货原因</view>
|
||||
<view class="reason-list">
|
||||
<view v-for="(reason, index) in exchangeReasons" :key="index" class="reason-item"
|
||||
@click="selectReason(index)">
|
||||
<view :class="['radio', selectedReason === index ? 'active' : '']"></view>
|
||||
<text>{{ reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="confirmChange">下一步</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
<!-- 确认退款信息 -->
|
||||
<view v-if="selectedAfterSaleType === 1">
|
||||
<u-popup ref="popup" :show="afterSalePopup3" :round="10" @close="closeAfterSalePopup3"
|
||||
:mask-close-able="false">
|
||||
<view class="refund-info-container">
|
||||
<view class="refund-title">申请退换</view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">换货原因<text class="required">*</text></view>
|
||||
<view class="refund-value" @click="openAfterSalePopup2('refundReason')">
|
||||
{{ changeRefundReason || '请选择退换原因' }}
|
||||
<text class="arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">换货商品<text class="required">*</text></view>
|
||||
<view class="refund-value" @click="changeGood()">
|
||||
{{ changeServiceType || '请选择需要换的商品' }}
|
||||
<text class="arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-wrapper_8">
|
||||
<text class="text_41">高尚</text>
|
||||
<text class="text_42">15901518415</text>
|
||||
</view>
|
||||
<view class="block_15">
|
||||
<view class="address-view">
|
||||
<text> {{ merchantAddress }} </text>
|
||||
<view class="copy-icon" @click="copyRefundNo"></view>
|
||||
</view>
|
||||
<image src="http://localhost:8080/af_update_address.png" class="icon_2"></image>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="refund-item2">
|
||||
<view class="refund-label">补充描述和凭证</view>
|
||||
<textarea class="refund-description" placeholder="补充描述，有助于商家更好的处理售后问题"
|
||||
v-model="refundDescription" maxlength="200"></textarea>
|
||||
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
||||
:maxCount="3">
|
||||
<view class="imgCon">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
||||
mode="widthFix"></image>
|
||||
上传凭证
|
||||
</view>
|
||||
</u-upload>
|
||||
</view>
|
||||
<button class="submit-btn" @click="submitRefundApplication">提交申请</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
|
||||
<!-- 选择商品 -->
|
||||
<u-popup :show="showSize" round="20rpx" mode="bottom" @close="closeSize">
|
||||
<view class="popup-header">
|
||||
<h3 class="popup-header-h3">选择款式</h3>
|
||||
<view class="popup-header-view" @click="closeSize">取消</view>
|
||||
</view>
|
||||
<view class="itemSize_top">
|
||||
<image :src="changeImg" class="itemSize-img"></image>
|
||||
<view class="itemSize_info">
|
||||
<view class="itemSize_name">{{ changeName }}</view>
|
||||
<view class="itemSize_price">￥{{ changePrice }}/袋</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itemSize" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'itemSize_active' : ''">
|
||||
{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { upload, picUrl } from '../../../../../utils';
|
||||
|
||||
export default {
|
||||
name: 'AfterSalePopup',
|
||||
props: {
|
||||
afterSaleGoods: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
afterSalePopup: false,
|
||||
afterSalePopup2: false,
|
||||
afterSalePopup3: false,
|
||||
selectedAsGood: '',
|
||||
selectedAfterSaleType: 0, // 0:退货/退款, 1:换货
|
||||
selectedAfterSaleType2: 0, // 0:退货/退款, 1:退货
|
||||
selectedAsReason: 0,
|
||||
selectedReason: 0,//换货原因
|
||||
selectedServiceType: '',
|
||||
selectedRefundReason: '',
|
||||
changeRefundReason: '', // 换货原因回显
|
||||
changeServiceType: '', // 换货商品回显
|
||||
showSize: false,//选择款式弹窗
|
||||
changeImg: "",
|
||||
changeName: "",
|
||||
changePrice: "",
|
||||
|
||||
refundAmount: 0,
|
||||
maxRefundAmount: 0,
|
||||
postage: 0,
|
||||
refundDescription: '',
|
||||
refundMethod: '自行寄回',
|
||||
merchantAddress: '衡水市路北街道中心北大街世纪名城41号楼',
|
||||
merchantContact: '高尚 18032753127',
|
||||
imgList: [],
|
||||
applyRefundReasons: [
|
||||
'商品质量问题',
|
||||
'商品与描述不符',
|
||||
'商品破损',
|
||||
'商品错发/漏发',
|
||||
'其他原因'
|
||||
],
|
||||
cancelReasons: [
|
||||
'不想要了',
|
||||
'拍错了',
|
||||
'商品质量问题',
|
||||
'其他原因'
|
||||
],
|
||||
exchangeReasons: [
|
||||
'不想要了，无理由换货',
|
||||
'商品信息拍错',
|
||||
'没用/少用优惠',
|
||||
'缺货',
|
||||
'其他'
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 打开售后弹窗
|
||||
openAfterSalePopup() {
|
||||
this.$nextTick(() => {
|
||||
if (this.afterSaleGoods && this.afterSaleGoods.length > 0) {
|
||||
this.selectedAsGood = this.afterSaleGoods[0].id;
|
||||
this.afterSalePopup = true;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 选择售后商品
|
||||
selectAsGood(item) {
|
||||
this.selectedAsGood = item.id;
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
closeAfterSalePopup() {
|
||||
this.afterSalePopup = false;
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
closeAfterSalePopup() {
|
||||
this.afterSalePopup = false;
|
||||
},
|
||||
|
||||
closeAfterSalePopup2() {
|
||||
if (this.selectedReason !== null && this.selectedReason !== undefined) {
|
||||
this.changeRefundReason = this.exchangeReasons[this.selectedReason];
|
||||
}
|
||||
this.afterSalePopup2 = false;
|
||||
},
|
||||
|
||||
closeAfterSalePopup3() {
|
||||
this.afterSalePopup3 = false;
|
||||
},
|
||||
|
||||
// 选择售后类型
|
||||
selectAfterSaleType(index) {
|
||||
this.selectedAfterSaleType = index;
|
||||
},
|
||||
|
||||
selectAfterSaleType2(index) {
|
||||
this.selectedAfterSaleType2 = index;
|
||||
},
|
||||
|
||||
// 确认售后商品选择
|
||||
confirmAfterSaleCancel() {
|
||||
const afterSaleTypes = ['退货/退款', '换货'];
|
||||
const selectedType = afterSaleTypes[this.selectedAfterSaleType];
|
||||
console.log('售后商品 - 选中的售后类型:', selectedType);
|
||||
console.log('选中的售后商品:', this.selectedAsGood);
|
||||
|
||||
this.afterSalePopup = false;
|
||||
this.afterSalePopup2 = true;
|
||||
},
|
||||
|
||||
// 选择退款原因
|
||||
selectAsReason(index) {
|
||||
this.selectedAsReason = index;
|
||||
},
|
||||
|
||||
// 换货原因
|
||||
selectReason(index) {
|
||||
this.selectedReason = index;
|
||||
},
|
||||
|
||||
// 选择换货原因
|
||||
confirmChange() {
|
||||
let selectedReasonText = '';
|
||||
selectedReasonText = this.exchangeReasons[this.selectedReason];
|
||||
console.log('换货原因:', selectedReasonText);
|
||||
|
||||
// 将选中的换货原因赋值给changeRefundReason变量以回显
|
||||
this.changeRefundReason = selectedReasonText;
|
||||
|
||||
this.afterSalePopup2 = false;
|
||||
this.afterSalePopup3 = true;
|
||||
},
|
||||
|
||||
// 关闭换货原因弹窗时保存选择
|
||||
closeAfterSalePopup2() {
|
||||
if (this.selectedReason !== null && this.selectedReason !== undefined) {
|
||||
this.changeRefundReason = this.exchangeReasons[this.selectedReason];
|
||||
}
|
||||
this.afterSalePopup2 = false;
|
||||
},
|
||||
|
||||
// 确认退款原因选择
|
||||
confirmAfterSaleCancel2() {
|
||||
const afterSaleTypes = ['退货退款', '退货'];
|
||||
const selectedType = afterSaleTypes[this.selectedAfterSaleType2];
|
||||
console.log('选中的售后类型:', selectedType);
|
||||
|
||||
let selectedReasonText = '';
|
||||
if (selectedType == '退货退款') {
|
||||
selectedReasonText = this.applyRefundReasons[this.selectedAsReason];
|
||||
} else {
|
||||
selectedReasonText = this.cancelReasons[this.selectedAsReason];
|
||||
}
|
||||
console.log('退款原因:', selectedReasonText);
|
||||
|
||||
// 设置选中的服务类型和退款原因
|
||||
this.selectedServiceType = selectedType;
|
||||
this.selectedRefundReason = selectedReasonText;
|
||||
// 模拟退款金额数据
|
||||
this.refundAmount = 4704.00;
|
||||
this.maxRefundAmount = 53.80;
|
||||
this.postage = 0.00;
|
||||
|
||||
this.selectAsReason(0);
|
||||
this.afterSalePopup2 = false;
|
||||
this.afterSalePopup3 = true;
|
||||
},
|
||||
|
||||
// 打开选择服务类型或退款原因弹窗
|
||||
openAfterSalePopup2(type) {
|
||||
this.afterSalePopup3 = false;
|
||||
this.afterSalePopup2 = true;
|
||||
},
|
||||
|
||||
// 选择换货商品
|
||||
changeGood() {
|
||||
this.afterSalePopup3 = false;
|
||||
this.showSize = true;
|
||||
},
|
||||
|
||||
closeSize() {
|
||||
this.showSize = false;
|
||||
},
|
||||
|
||||
// 切换规格
|
||||
changeGG(item, index) {
|
||||
console.log("🚀 ~ changeGG ~ item:", item);
|
||||
this.currentGG = item;
|
||||
this.currentGGIndex = index;
|
||||
if (this.currentGG.cart_count) {
|
||||
this.currentNum = this.currentGG.cart_count.count;
|
||||
} else {
|
||||
this.currentGG.cart_count = { count: 0 };
|
||||
}
|
||||
this.changeImg = item.commodity_pic[0]
|
||||
this.changeName = item.goods_alias
|
||||
this.changePrice = item.sales_price
|
||||
|
||||
this.afterSalePopup3 = true;
|
||||
this.showSize = false;
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
afterReadImg(e) {
|
||||
e.file.forEach(item => {
|
||||
upload(item.url, res => {
|
||||
this.imgList.push({ url: picUrl + res.data.path });
|
||||
console.log('imgList:', this.imgList);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
deletePic(e) {
|
||||
this.imgList.splice(e.index, 1);
|
||||
},
|
||||
|
||||
// 修改退款金额
|
||||
modifyRefundAmount() {
|
||||
console.log('修改退款金额');
|
||||
},
|
||||
|
||||
// 查看地址详情
|
||||
viewAddressDetails() {
|
||||
console.log('查看地址详情');
|
||||
},
|
||||
|
||||
// 提交退款申请
|
||||
submitRefundApplication() {
|
||||
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
||||
uni.showToast({
|
||||
title: '请选择服务类型和退款原因',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 输出弹窗中的所有内容
|
||||
const refundInfo = {
|
||||
serviceType: this.selectedServiceType,
|
||||
refundReason: this.selectedRefundReason,
|
||||
refundAmount: this.refundAmount,
|
||||
maxRefundAmount: this.maxRefundAmount,
|
||||
postage: this.postage,
|
||||
refundDescription: this.refundDescription,
|
||||
refundMethod: this.refundMethod,
|
||||
merchantAddress: this.merchantAddress,
|
||||
merchantContact: this.merchantContact,
|
||||
imgList: this.imgList
|
||||
};
|
||||
console.log('提交退款申请:', refundInfo);
|
||||
|
||||
this.afterSalePopup3 = false;
|
||||
// 触发父组件事件，传递退款信息
|
||||
this.$emit('refundSubmitted', refundInfo);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
64
packages/myOrders/index/popup/cancelOrder/cancelOrder.css
Normal file
64
packages/myOrders/index/popup/cancelOrder/cancelOrder.css
Normal file
@ -0,0 +1,64 @@
|
||||
.cancel-reason-container {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 20rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.reason-list {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.reason-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid #999;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio.active {
|
||||
border-color: #ff4400;
|
||||
}
|
||||
|
||||
.radio.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ff4400;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #ff4400;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
padding: 15rpx 0;
|
||||
width: 80%;
|
||||
font-size: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
81
packages/myOrders/index/popup/cancelOrder/cancelOrder.vue
Normal file
81
packages/myOrders/index/popup/cancelOrder/cancelOrder.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-popup ref="popup" :show="showPopup" :round="10" @close="closePopup" :mask-close-able="false">
|
||||
<view class="cancel-reason-container">
|
||||
<view class="title">选择取消原因</view>
|
||||
<view class="reason-list">
|
||||
<view v-for="(reason, index) in cancelReasons" :key="index" class="reason-item" @click="selectReason(index)">
|
||||
<view :class="['radio', selectedReason === index ? 'active' : '']"></view>
|
||||
<text>{{ reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="confirmCancel">确认取消</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NavgateTo } from '../../../../../utils';
|
||||
|
||||
export default {
|
||||
name: 'cancelOrderPopup',
|
||||
props: {
|
||||
showPopup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cancelReasons: [
|
||||
'商品价格不稳定',
|
||||
'买错规格/品种',
|
||||
'未按时发货',
|
||||
'业务反馈没货',
|
||||
'不想要了，无理由退货'
|
||||
],
|
||||
selectedReason: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closePopup() {
|
||||
this.$emit('update:showPopup', false);
|
||||
},
|
||||
|
||||
selectReason(index) {
|
||||
this.selectedReason = index;
|
||||
},
|
||||
|
||||
confirmCancel() {
|
||||
const selectedText = this.cancelReasons[this.selectedReason];
|
||||
console.log("🚀 ~ confirmCancel ~ 取消原因:", selectedText);
|
||||
uni.showModal({
|
||||
title: "取消订单",
|
||||
content: "千辛万苦挑选的商品，确定要取消吗？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$emit('update:showPopup', false);
|
||||
this.$emit('orderCancelled', { reason: selectedText });
|
||||
uni.showToast({
|
||||
title: '订单取消成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showPopup(newVal) {
|
||||
if (newVal) {
|
||||
this.selectedReason = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './cancelOrder.css';
|
||||
</style>
|
||||
67
packages/myOrders/index/popup/refund/refund.css
Normal file
67
packages/myOrders/index/popup/refund/refund.css
Normal file
@ -0,0 +1,67 @@
|
||||
.cancel-reason-container {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 20rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.reason-list {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.reason-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid #999;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio.active {
|
||||
border-color: #ff4400;
|
||||
}
|
||||
|
||||
.radio.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ff4400;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #ff4400;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
padding: 15rpx 0;
|
||||
width: 80%;
|
||||
font-size: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin-left: 10%;
|
||||
}
|
||||
80
packages/myOrders/index/popup/refund/refund.vue
Normal file
80
packages/myOrders/index/popup/refund/refund.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup ref="popup" :show="showPopup" :round="10" @close="closePopup" :mask-close-able="false">
|
||||
<view class="cancel-reason-container">
|
||||
<view class="title">选择退款原因</view>
|
||||
<view class="reason-list">
|
||||
<view v-for="(reason, index) in applyRefundReasons" :key="index" class="reason-item"
|
||||
@click="selectReason(index)">
|
||||
<view :class="['radio', selectedReason === index ? 'active' : '']"></view>
|
||||
<text>{{ reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="confirmRefund">确认取消</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NavgateTo } from '../../../../../utils';
|
||||
|
||||
export default {
|
||||
name: 'refundPopup',
|
||||
props: {
|
||||
showPopup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
applyRefundReasons: [
|
||||
'不想要了，无理由退货',
|
||||
'商品信息拍错',
|
||||
'没用/少用优惠',
|
||||
'缺货',
|
||||
'其他'
|
||||
],
|
||||
selectedReason: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closePopup() {
|
||||
this.$emit('update:showPopup', false);
|
||||
},
|
||||
|
||||
selectReason(index) {
|
||||
this.selectedReason = index;
|
||||
},
|
||||
|
||||
confirmRefund() {
|
||||
const selectedText = this.applyRefundReasons[this.selectedReason];
|
||||
console.log("🚀 ~ confirmRefund ~ 退款原因:", selectedText);
|
||||
this.$emit('update:showPopup', false);
|
||||
this.$emit('refundConfirmed', { reason: selectedText });
|
||||
uni.showModal({
|
||||
title: '退款申请成功',
|
||||
content: '将在审核后完成退款',
|
||||
showCancel: false,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showPopup(newVal) {
|
||||
if (newVal) {
|
||||
this.selectedReason = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './refund.css';
|
||||
</style>
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 顶部状态栏 -->
|
||||
<view class="status-bar" v-if="status === '待付款'">
|
||||
<view class="status-bar" v-if="status === '1'">
|
||||
<view class="status">待付款</view>
|
||||
<view class="countdown">剩余支付时间: {{ countdown }}</view>
|
||||
<view class="tips">10分钟内未支付订单自动取消</view>
|
||||
</view>
|
||||
<view class="status-bar" v-if="status === '待发货'">
|
||||
<view class="status-bar" v-if="status === '3'">
|
||||
<view class="status">待发货</view>
|
||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
||||
<view class="tips">商家正在加急打包中了，请耐心等候</view>
|
||||
</view>
|
||||
<view class="status-bar" v-if="status === '配送中'">
|
||||
<view class="status-bar" v-if="status === '4'">
|
||||
<view class="status">待配送</view>
|
||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
||||
<view class="tips">
|
||||
@ -19,12 +19,12 @@
|
||||
<img class="phone" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/phone.png" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-bar" v-if="status === '已完成' || status === '退款中'">
|
||||
<view class="status-bar" v-if="status === '5' || status === '退款中'">
|
||||
<view class="status">已完成</view>
|
||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
||||
<view class="tips">感谢对我们的信任，期待下次光临</view>
|
||||
</view>
|
||||
<view class="status-bar" v-if="status === '已取消'">
|
||||
<view class="status-bar" v-if="status === '6'">
|
||||
<view class="status">已取消</view>
|
||||
<view class="countdown">订单已取消</view>
|
||||
<view class="tips">您的订单已取消，再来一单吧</view>
|
||||
@ -39,27 +39,22 @@
|
||||
<!-- 订单金额 -->
|
||||
<view class="amount-section">
|
||||
<view v-if="status !== '退款中'">
|
||||
<view class="total-amount">¥{{ orderInfo.totalAmount }}</view>
|
||||
<view class="original-price"
|
||||
>商品下单应付
|
||||
<text> ¥{{ orderInfo.originalPrice }}</text>
|
||||
<view class="total-amount">¥{{ orderInfo.shiliu_score }}</view>
|
||||
<view class="original-price">商品下单应付
|
||||
<text> ¥{{ orderInfo.shiliu_score }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="goods-item"
|
||||
v-for="(item, index) in orderInfo.goodsList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="goods-item" v-for="(item, index) in orderInfo.commodity_order_item_list" :key="index">
|
||||
<view class="goods-content">
|
||||
<image :src="item.image" class="goods-img"></image>
|
||||
<image :src="item.commodity_pic" class="goods-img"></image>
|
||||
<view class="goods-info">
|
||||
<view>
|
||||
<view class="goods-name">{{ item.name }}</view>
|
||||
<view class="goods-name">{{ item.goods_name }}</view>
|
||||
<view class="goods-desc">{{ item.desc }}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="goods-price">¥{{ item.price }}</view>
|
||||
<view class="goods-info-right"> x{{ item.quantity }}</view>
|
||||
<view class="goods-price">¥{{ item.sales_price }}</view>
|
||||
<view class="goods-info-right"> x{{ item.count }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -67,14 +62,12 @@
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="info-item">
|
||||
<view class="info-label1"
|
||||
>下单总金额( ¥{{ orderInfo.orderAmount }} )</view
|
||||
>
|
||||
<view class="info-label1">下单总金额( ¥{{ orderInfo.orderAmount }} )</view>
|
||||
<view class="info-action">明细</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">商品下单总金额</view>
|
||||
<view class="info-value">¥{{ orderInfo.goodsTotal }}</view>
|
||||
<view class="info-value">¥{{ orderInfo.total_amount }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">运费总计</view>
|
||||
@ -88,11 +81,12 @@
|
||||
<view class="section-title">配送信息</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">配送方式</view>
|
||||
<view class="info-value">{{ orderInfo.deliveryType }}</view>
|
||||
<!-- <view class="info-value">{{ orderInfo.deliveryType }}</view> -->
|
||||
<view class="info-value">商家自配</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">预计配送时间</view>
|
||||
<view class="info-value">{{ orderInfo.deliveryTime }}</view>
|
||||
<view class="info-value"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -101,14 +95,13 @@
|
||||
<view class="section-title">收货信息</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">收货人</view>
|
||||
<view class="info-value"
|
||||
>{{ orderInfo.recipientName }}
|
||||
<text> {{ orderInfo.recipientPhone }}</text>
|
||||
<view class="info-value">{{ orderInfo.receiving_name }}
|
||||
<text> {{ orderInfo.receiving_phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">收货地址</view>
|
||||
<view class="info-value">{{ orderInfo.recipientAddress }}</view>
|
||||
<view class="info-value">{{ orderInfo.receiving_address }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -117,15 +110,15 @@
|
||||
<view class="section-title">订单信息</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">订单编号</view>
|
||||
<view class="info-value">{{ orderInfo.orderNumber }}</view>
|
||||
<view class="info-value">{{ orderInfo.order_no }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">支付方式</view>
|
||||
<view class="info-value">{{ orderInfo.paymentMethod }}</view>
|
||||
<view class="info-value">{{ orderInfo.pay_method }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">下单时间</view>
|
||||
<view class="info-value">{{ orderInfo.orderTime }}</view>
|
||||
<view class="info-value">{{ orderInfo.order_time }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">备注</view>
|
||||
@ -134,28 +127,28 @@
|
||||
</view>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="bottom-buttons" v-if="status === '待付款'">
|
||||
<view class="bottom-buttons" v-if="status === '1'">
|
||||
<button class="cancel-btn" @click="cancelOrder">取消订单</button>
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
||||
</view>
|
||||
<view class="bottom-buttons" v-if="status === '待发货'">
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<view class="bottom-buttons" v-if="status === '3'">
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<button class="cancel-btn" @click="cancelOrder">取消订单</button>
|
||||
<!-- <button class="pay-btn" @click="gotoPayment">立即支付</button> -->
|
||||
</view>
|
||||
<view class="bottom-buttons" v-if="status === '配送中'">
|
||||
<view class="bottom-buttons" v-if="status === '4'">
|
||||
<button class="cancel-btn" @click="checkLogistics">查看物流</button>
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
||||
</view>
|
||||
<view class="bottom-buttons" v-if="status === '已完成'">
|
||||
<view class="bottom-buttons" v-if="status === '5'">
|
||||
<button class="cancel-btn" @click="orderEvaluate">服务评价</button>
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
||||
</view>
|
||||
<view class="bottom-buttons" v-if="status === '已取消'">
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<view class="bottom-buttons" v-if="status === '6'">
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<!-- <button class="cancel-btn" @click="cancelOrder">服务评价</button> -->
|
||||
<button class="pay-btn" @click="gotoPayment">再来一单</button>
|
||||
</view>
|
||||
@ -172,57 +165,20 @@ export default {
|
||||
return {
|
||||
status: "",
|
||||
countdown: "9:59:59",
|
||||
orderInfo: {
|
||||
totalAmount: "4704.00",
|
||||
payAmount: "4704.00",
|
||||
originalPrice: "4704.00",
|
||||
orderAmount: "290.00",
|
||||
goodsTotal: "4704.00",
|
||||
freight: "4704.00",
|
||||
deliveryType: "商家配送",
|
||||
deliveryTime: "2021-04-16 20:00-22:00",
|
||||
recipientName: "杜先生",
|
||||
recipientPhone: "15901518415",
|
||||
recipientAddress: "河北省衡水市桃城区上海公馆",
|
||||
orderNumber: "159144551545654",
|
||||
paymentMethod: "微信支付",
|
||||
orderTime: "2021-03-16 20:00-22:00",
|
||||
remark: "明天9点之前送到",
|
||||
goodsList: [
|
||||
{
|
||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_details.png",
|
||||
name: "泰国金枕榴莲",
|
||||
desc: "泰国金枕榴莲 软糯 香甜",
|
||||
price: "125.9",
|
||||
quantity: 1,
|
||||
},
|
||||
{
|
||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_details.png",
|
||||
name: "泰国金枕榴莲",
|
||||
desc: "泰国金枕榴莲 软糯 香甜",
|
||||
price: "125.9",
|
||||
quantity: 1,
|
||||
},
|
||||
{
|
||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_details.png",
|
||||
name: "泰国金枕榴莲",
|
||||
desc: "泰国金枕榴莲 软糯 香甜",
|
||||
price: "125.9",
|
||||
quantity: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
orderInfo: {},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
const item = JSON.parse(options?.item);
|
||||
console.log("🚀 ~ onLoad ~ item:", item)
|
||||
// 启动倒计时
|
||||
options?.status === "待付款" ? this.startCountdown() : "";
|
||||
this.status = options?.status;
|
||||
item.order_status == "1" ? this.startCountdown() : "";
|
||||
this.status = JSON.stringify(item.order_status);
|
||||
this.orderInfo = item;
|
||||
},
|
||||
methods: {
|
||||
startCountdown() {
|
||||
// 实际项目中应该从服务器获取剩余时间
|
||||
// 这里使用模拟倒计时
|
||||
// 倒计时模拟
|
||||
let seconds = 10 * 60; // 10分钟
|
||||
const timer = setInterval(() => {
|
||||
seconds--;
|
||||
@ -234,7 +190,7 @@ export default {
|
||||
.padStart(2, "0")}`;
|
||||
if (seconds <= 0) {
|
||||
clearInterval(timer);
|
||||
// 倒计时结束，处理订单取消逻辑
|
||||
// 倒计时结束，处理订单
|
||||
uni.showToast({ title: "订单已取消", icon: "none" });
|
||||
setTimeout(() => uni.navigateBack(), 1500);
|
||||
}
|
||||
@ -264,7 +220,7 @@ export default {
|
||||
NavgateTo(`/packages/myOrders/logistics/index`);
|
||||
},
|
||||
|
||||
orderEvaluate(){
|
||||
orderEvaluate() {
|
||||
NavgateTo(`/packages/myOrders/orderEvaluate/index`);
|
||||
}
|
||||
},
|
||||
|
||||
322
packages/myOrders/pending/index.css
Normal file
322
packages/myOrders/pending/index.css
Normal file
@ -0,0 +1,322 @@
|
||||
.page {
|
||||
background-color: #f6f7fb;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.progress-item.active .progress-text {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 200rpx;
|
||||
height: 2rpx;
|
||||
background-color: #d9d9d9;
|
||||
align-self: center;
|
||||
flex-grow: 1;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.status-tip {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
display: block;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 20rpx;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.asGoodTag {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 8rpx 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.asGoodTag1 {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
top: 133rpx;
|
||||
left: 80rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
background-color: #fff2f0;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.goods-count {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.refund-amount {
|
||||
font-size: 28rpx;
|
||||
align-self: flex-start;
|
||||
margin-top: 20rpx;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
left: 140rpx;
|
||||
}
|
||||
|
||||
.refund-info {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 25rpx 20rpx;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 2rpx solid #999999;
|
||||
border-right: 2rpx solid #999999;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #d9d9d9;
|
||||
color: #333;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffebcb;
|
||||
color: #983012;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.urge-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.popup-content {
|
||||
width: 600rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.check-circle {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background-color: #00c853;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.check-mark {
|
||||
color: #ffffff;
|
||||
font-size: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.popup-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.popup-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.continue-btn {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
background-color: #f6f7fb;
|
||||
color: #333333;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.know-btn {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
216
packages/myOrders/pending/index.vue
Normal file
216
packages/myOrders/pending/index.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 进度条 -->
|
||||
<view class="progress-container" v-if="false">
|
||||
<view class="progress-item active">
|
||||
<text class="progress-text">商家处理</text>
|
||||
</view>
|
||||
<view class="progress-line"></view>
|
||||
<view class="progress-item">
|
||||
<text class="progress-text">寄回商品</text>
|
||||
</view>
|
||||
<view class="progress-line"></view>
|
||||
<view class="progress-item">
|
||||
<text class="progress-text">退款结束</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="progress-container">
|
||||
<view class="progress-item active">
|
||||
<text class="progress-text">商家处理</text>
|
||||
</view>
|
||||
<view class="progress-line"></view>
|
||||
<view class="progress-item">
|
||||
<text class="progress-text">退款结束</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态提示 -->
|
||||
<view class="status-tip" v-if="false">
|
||||
<text class="status-title">请等待商家处理</text>
|
||||
<text class="status-desc"><text style="font-weight: bold;">2天</text>后商家未处理将自动同意</text>
|
||||
<text class="status-desc">您已成功发起退款申请，请耐心等待商家处理</text>
|
||||
</view>
|
||||
|
||||
<view class="status-tip">
|
||||
<text class="status-title">商家拒绝申请,请您处理</text>
|
||||
<text class="status-desc"><text style="color: #f63b08;">2天</text>后未处理将自动关闭</text>
|
||||
</view>
|
||||
|
||||
<view class="hr"></view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-info">
|
||||
<view class="goods-item">
|
||||
<view class="asGoodTag tag-img"
|
||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</view>
|
||||
<image class="goods-image" :src="currentAfterSale.commodity_order_item[0].commodity_pic"></image>
|
||||
<view class="goods-details">
|
||||
<text class="goods-name">
|
||||
<text class="asGoodTag asGoodTag1"
|
||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
|
||||
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
||||
<text class="refund-amount">退款：¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||
</text>
|
||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
||||
<text class="goods-price">
|
||||
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
||||
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退款信息 -->
|
||||
<view class="refund-info">
|
||||
<view class="info-item">
|
||||
<text class="info-label">服务类型<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value">{{ getServiceTypeText(currentAfterSale.after_sales_type) }}</text>
|
||||
<text class="info-arrow"></text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款原因<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value">{{ currentAfterSale.after_sales_reason }}</text>
|
||||
<text class="info-arrow"></text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款金额<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value amount">{{ '¥' + currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">申请时间<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款编号<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
||||
<text class="copy-icon" @click="copyRefundNo"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||
<button class="modify-btn" @click="modifyRefund">修改申请</button>
|
||||
<button class="urge-btn" @click="urgeProcess">催处理</button>
|
||||
</view>
|
||||
|
||||
<u-popup ref="popup" :show="showPopup" @close="closePopup" :mask-close-able="false"
|
||||
:close-on-click-overlay="false">
|
||||
<view class="popup-content">
|
||||
<view class="success-icon">
|
||||
<view class="check-circle">
|
||||
<text class="check-mark">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-title">已为您催处理</view>
|
||||
<view class="popup-desc">平台客服已帮您催促卖家，07月26日20:49前卖家未处理系统将自动退款。</view>
|
||||
<view class="popup-buttons">
|
||||
<button class="continue-btn" @click="closePopup">继续联系卖家</button>
|
||||
<button class="know-btn" @click="closePopup">我知道了</button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
isPhone,
|
||||
picUrl,
|
||||
request,
|
||||
upload,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentAfterSale: {},
|
||||
pickerDefaultDate: new Date(),
|
||||
showPopup: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 初始化日期选择器默认值为当前申请时间
|
||||
this.pickerDefaultDate = new Date(this.currentAfterSale.create_time);
|
||||
},
|
||||
onLoad(options) {
|
||||
const item = JSON.parse(options?.item);
|
||||
console.log("🚀 ~ onLoad ~ item:", item)
|
||||
this.currentAfterSale = item;
|
||||
},
|
||||
methods: {
|
||||
getServiceTypeText(type) {
|
||||
return type === 1 ? '退货退款' : '仅退款';
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
|
||||
},
|
||||
|
||||
// 复制退款编号
|
||||
copyRefundNo() {
|
||||
// 使用uni-app的复制API
|
||||
uni.setClipboardData({
|
||||
data: this.currentAfterSale.after_sales_no,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 撤销申请
|
||||
cancelRefund() {
|
||||
uni.showModal({
|
||||
title: "确定要撤销本次售后申请吗？",
|
||||
showCancel: true,
|
||||
cancelText: "暂不撤销",
|
||||
confirmText: "确认撤销",
|
||||
confirmColor: "#ff4d4f",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 撤销售后接口
|
||||
uni.showToast({
|
||||
title: '订单撤销成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 修改申请
|
||||
modifyRefund() {
|
||||
NavgateTo(`../apply/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||||
},
|
||||
|
||||
// 催处理
|
||||
urgeProcess() {
|
||||
this.showPopup = true;
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
closePopup() {
|
||||
this.showPopup = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url('./index.css')
|
||||
</style>
|
||||
392
packages/myOrders/refundOver/index.css
Normal file
392
packages/myOrders/refundOver/index.css
Normal file
@ -0,0 +1,392 @@
|
||||
.page {
|
||||
background-color: #f6f7fb;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.progress-item.active .progress-text {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 200rpx;
|
||||
height: 2rpx;
|
||||
background-color: #d9d9d9;
|
||||
align-self: center;
|
||||
flex-grow: 1;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.status-tip {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
display: block;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.status-desc2 {
|
||||
font-size: 24rpx;
|
||||
background-color: #ffeeeb;
|
||||
color: #fe441a;
|
||||
width: 80%;
|
||||
margin: 20rpx auto 0;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.addOrderIdBtn{
|
||||
width: 70%;
|
||||
margin: 10rpx auto 0;
|
||||
border-radius: 50rpx;
|
||||
background-color: #ff3f14;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 20rpx;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.asGoodTag {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 8rpx 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.asGoodTag1 {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
top: 133rpx;
|
||||
left: 80rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
background-color: #fff2f0;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.goods-count {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.refund-amount {
|
||||
font-size: 28rpx;
|
||||
align-self: flex-start;
|
||||
margin-top: 20rpx;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
left: 140rpx;
|
||||
}
|
||||
|
||||
.refund-info {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 25rpx 20rpx;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 2rpx solid #999999;
|
||||
border-right: 2rpx solid #999999;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #d9d9d9;
|
||||
color: #333;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffebcb;
|
||||
color: #983012;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.urge-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffe8e5;
|
||||
color: #ed4d1c;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bottomImg{
|
||||
width: 70rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
/* 退款去向弹窗样式 */
|
||||
.money-path-popup-content {
|
||||
background-color: #ffffff;
|
||||
border-top-left-radius: 30rpx;
|
||||
border-top-right-radius: 30rpx;
|
||||
padding: 20rpx;
|
||||
height: 45vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.refund-method {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.method-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.wechat-icon {
|
||||
width: 40rpx;
|
||||
height: 35rpx;
|
||||
background-size: cover;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.method-text {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.method-text2 {
|
||||
font-size: 28rpx;
|
||||
color: #9d9d9d;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.method-amount {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.refund-status {
|
||||
padding: 0 70rpx;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
position: relative;
|
||||
padding-left: 40rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.status-item.active .status-dot {
|
||||
border: 3rpx solid #e35e38;
|
||||
}
|
||||
|
||||
.status-item.active .status-line {
|
||||
/* background-color: #e35e38; */
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.status-line {
|
||||
border-left: 4rpx dotted #ea704b86;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 7rpx;
|
||||
top: 40rpx;
|
||||
}
|
||||
|
||||
.status-item:last-child .status-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
display: block;
|
||||
}
|
||||
270
packages/myOrders/refundOver/index.vue
Normal file
270
packages/myOrders/refundOver/index.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 进度条 -->
|
||||
<view class="progress-container" v-if="false">
|
||||
<view class="progress-item">
|
||||
<text class="progress-text">商家处理</text>
|
||||
</view>
|
||||
<view class="progress-line"></view>
|
||||
<view class="progress-item">
|
||||
<text class="progress-text">寄回商品</text>
|
||||
</view>
|
||||
<view class="progress-line"></view>
|
||||
<view class="progress-item active">
|
||||
<text class="progress-text">退款结束</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="progress-container">
|
||||
<view class="progress-item">
|
||||
<text class="progress-text">商家处理</text>
|
||||
</view>
|
||||
<view class="progress-line"></view>
|
||||
<view class="progress-item active">
|
||||
<text class="progress-text">退款结束</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态提示 -->
|
||||
<view class="status-tip">
|
||||
<text class="status-title">退款成功</text>
|
||||
<text class="status-desc">若您的问题未解决，可在有效期内再次申请售后</text>
|
||||
</view>
|
||||
|
||||
<view class="hr"></view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-info">
|
||||
<view class="goods-item">
|
||||
<view class="asGoodTag tag-img"
|
||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</view>
|
||||
<image class="goods-image" :src="currentAfterSale.commodity_order_item[0].commodity_pic"></image>
|
||||
<view class="goods-details">
|
||||
<text class="goods-name">
|
||||
<text class="asGoodTag asGoodTag1"
|
||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
|
||||
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
||||
<text class="refund-amount">退款：¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||
</text>
|
||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
||||
<text class="goods-price">
|
||||
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
||||
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退款信息 -->
|
||||
<view class="refund-info">
|
||||
<view class="info-item">
|
||||
<text class="info-label">服务类型</text>
|
||||
<text class="info-value">{{ getServiceTypeText(currentAfterSale.after_sales_type) }}</text>
|
||||
<text class="info-arrow"></text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款原因</text>
|
||||
<text class="info-value">{{ currentAfterSale.after_sales_reason }}</text>
|
||||
<text class="info-arrow"></text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款金额</text>
|
||||
<text class="info-value amount">{{ '¥' + currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">申请时间</text>
|
||||
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款编号</text>
|
||||
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
||||
<text class="copy-icon" @click="copyRefundNo"></text>
|
||||
</view>
|
||||
<view class="info-item" v-if="false">
|
||||
<text class="info-label">退款完结</text>
|
||||
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons" v-if="false">
|
||||
<button class="modify-btn" @click="modifyRefund">寄件详情</button>
|
||||
<button class="cancel-btn" @click="moneyGo">钱款去向</button>
|
||||
</view>
|
||||
|
||||
<view class="action-buttons">
|
||||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||
<button class="urge-btn" @click="modifyRefund">修改申请</button>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-popup ref="popup" :show="moneyGoPopup" :round="10" @close="closeMoneyGoPopup" :mask-close-able="false"
|
||||
mode="bottom">
|
||||
<view class="money-path-popup-content">
|
||||
<!-- 弹窗头部 -->
|
||||
<view class="popup-header">
|
||||
<text class="header-title">退款总额 ¥{{ currentAfterSale.refund_amount ?
|
||||
currentAfterSale.refund_amount.toFixed(2) : '34.18' }}</text>
|
||||
<text class="close-btn" @click="closeMoneyGoPopup">取消</text>
|
||||
</view>
|
||||
|
||||
<!-- 退款方式 -->
|
||||
<view class="refund-method">
|
||||
<view class="method-item">
|
||||
<view class="wechat-icon">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||
class="icon-image"></image>
|
||||
</view>
|
||||
<text class="method-text">退回微信</text>
|
||||
<text class="method-amount">{{ currentAfterSale.refund_amount ? '¥' +
|
||||
currentAfterSale.refund_amount.toFixed(2) : '¥34.18' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 退款状态 -->
|
||||
<view class="refund-status">
|
||||
<view class="method-text2">微信</view>
|
||||
<view class="status-item active">
|
||||
<view class="status-dot"></view>
|
||||
<view class="status-line"></view>
|
||||
<view class="status-info">
|
||||
<text class="status-text">到账成功</text>
|
||||
<text class="status-desc">钱已退回至微信账户</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-item active">
|
||||
<view class="status-dot"></view>
|
||||
<view class="status-info">
|
||||
<text class="status-text">卖家退款</text>
|
||||
<text class="status-desc">卖家已退款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
isPhone,
|
||||
picUrl,
|
||||
request,
|
||||
upload,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentAfterSale: {},
|
||||
pickerDefaultDate: new Date(),
|
||||
moneyGoPopup: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 初始化日期选择器默认值为当前申请时间
|
||||
this.pickerDefaultDate = new Date(this.currentAfterSale.create_time);
|
||||
},
|
||||
onLoad(options) {
|
||||
const item = JSON.parse(options?.item);
|
||||
console.log("🚀 ~ onLoad ~ item:", item)
|
||||
this.currentAfterSale = item;
|
||||
},
|
||||
methods: {
|
||||
getServiceTypeText(type) {
|
||||
return type === 1 ? '退货退款' : '仅退款';
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
|
||||
},
|
||||
|
||||
// 复制商家地址
|
||||
copyAdress() {
|
||||
uni.setClipboardData({
|
||||
data: this.currentAfterSale.after_sales_no,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addOrderId() {
|
||||
NavgateTo(`../returnLogistics/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||||
},
|
||||
|
||||
// 复制退款编号
|
||||
copyRefundNo() {
|
||||
uni.setClipboardData({
|
||||
data: this.currentAfterSale.after_sales_no,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 撤销申请
|
||||
cancelRefund() {
|
||||
uni.showModal({
|
||||
title: "确定要撤销本次售后申请吗？",
|
||||
showCancel: true,
|
||||
cancelText: "暂不撤销",
|
||||
confirmText: "确认撤销",
|
||||
confirmColor: "#ff4d4f",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 撤销售后接口
|
||||
uni.showToast({
|
||||
title: '订单撤销成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 修改申请
|
||||
modifyRefund() {
|
||||
NavgateTo(`../apply/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||||
},
|
||||
|
||||
// 显示钱款去向弹窗
|
||||
moneyGo() {
|
||||
this.moneyGoPopup = true;
|
||||
},
|
||||
|
||||
// 关闭钱款去向弹窗
|
||||
closeMoneyGoPopup() {
|
||||
this.moneyGoPopup = false;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url('./index.css')
|
||||
</style>
|
||||
254
packages/myOrders/returnLogistics/index.css
Normal file
254
packages/myOrders/returnLogistics/index.css
Normal file
@ -0,0 +1,254 @@
|
||||
page {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.apply-container {
|
||||
/* padding: 10rpx; */
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.refund-info-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.refund-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.refund-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.refund-label {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff4500;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
|
||||
.refund-value {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
display: inline-block;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 2rpx solid #999999;
|
||||
border-right: 2rpx solid #999999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff4500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
color: #007aff;
|
||||
margin-left: 10rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.refund-hint {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
margin: 20rpx -30rpx;
|
||||
}
|
||||
|
||||
.refund-item2 {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.refund-description {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
padding: 15rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.imgCon {
|
||||
font-size: 18rpx;
|
||||
color: #222222;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: #F6F7FB;
|
||||
border: 1rpx solid #D1D1D1;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.imgCon image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.u-upload__wrap__preview {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx 0rpx 10rpx 10rpx !important;
|
||||
margin-top: 20rpx !important;
|
||||
}
|
||||
|
||||
.u-upload__wrap__preview__image {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 60%;
|
||||
height: 88rpx;
|
||||
background-color: #ff451b;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
margin-top: 50rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 选择退款原因弹窗样式 */
|
||||
.cancel-reason-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.asTabs2 {
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.asTab2 {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 15rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.asTab2.active {
|
||||
color: #ff451b;
|
||||
}
|
||||
|
||||
.asTab2.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1rpx;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 4rpx;
|
||||
background-color: #ff451b;
|
||||
}
|
||||
|
||||
.reason-list {
|
||||
max-height: 500rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.reason-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 2rpx solid #999999;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.radio.active {
|
||||
border-color: #ff451b;
|
||||
background-color: #ff451b;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background-color: #ff451b;
|
||||
color: #ffffff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
/* 打开弹窗按钮样式 */
|
||||
.open-popup-btn {
|
||||
height: 88rpx;
|
||||
background-color: #ff451b;
|
||||
color: #ffffff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
margin: 40rpx auto;
|
||||
display: block;
|
||||
}
|
||||
152
packages/myOrders/returnLogistics/index.vue
Normal file
152
packages/myOrders/returnLogistics/index.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<view class="apply-container">
|
||||
<!-- 确认退款信息弹窗 -->
|
||||
<view class="refund-info-container">
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">物流单号<text class="required">*</text></view>
|
||||
<input class="refund-value" v-model="selectedServiceType" placeholder="请填写物流单号" type="text">
|
||||
</view>
|
||||
<view class="refund-item">
|
||||
<view class="refund-label">物流公司<text class="required">*</text></view>
|
||||
<view class="refund-value" @click="openAfterSalePopup2('refundReason')">
|
||||
{{ selectedRefundReason || '请选择' }}
|
||||
<text class="arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refund-item" style="border-bottom: none;">
|
||||
<view class="refund-label">联系电话</view>
|
||||
<view class="refund-value">
|
||||
111111111
|
||||
</view>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="refund-item2">
|
||||
<view class="refund-label">补充描述和凭证</view>
|
||||
<textarea class="refund-description" placeholder="有助于小二更好的处理售后问题" v-model="refundDescription"
|
||||
maxlength="200"></textarea>
|
||||
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
||||
:maxCount="3">
|
||||
<view class="imgCon">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
||||
mode="widthFix"></image>
|
||||
上传凭证
|
||||
</view>
|
||||
</u-upload>
|
||||
</view>
|
||||
</view>
|
||||
<button class="submit-btn" @click="submitRefundApplication">提交</button>
|
||||
|
||||
<!-- 选择退款原因弹窗 -->
|
||||
<u-popup ref="popup2" :show="afterSalePopup2" :round="10" @close="closeAfterSalePopup2"
|
||||
:mask-close-able="false">
|
||||
<view class="cancel-reason-container">
|
||||
<view class="title">选择物流公司</view>
|
||||
<view class="reason-list">
|
||||
<view v-for="(company, index) in logisticsCompanies" :key="index" class="reason-item"
|
||||
@click="selectLogisticsCompany(index)">
|
||||
<view :class="['radio', selectedRefundReason === company ? 'active' : '']"></view>
|
||||
<text>{{ company }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
isPhone,
|
||||
picUrl,
|
||||
request,
|
||||
upload,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
afterSalePopup2: false,
|
||||
selectedServiceType: '',
|
||||
selectedRefundReason: '',
|
||||
refundDescription: '',
|
||||
imgList: [],
|
||||
logisticsCompanies: [
|
||||
'顺丰速运',
|
||||
'京东物流',
|
||||
'中通快递',
|
||||
'圆通速递',
|
||||
'申通快递',
|
||||
'韵达快递',
|
||||
'百世快递',
|
||||
'邮政EMS'
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
// 可以在这里添加物流相关的初始化逻辑
|
||||
},
|
||||
methods: {
|
||||
// 关闭弹窗
|
||||
closeAfterSalePopup2() {
|
||||
this.afterSalePopup2 = false;
|
||||
},
|
||||
|
||||
// 打开选择物流公司弹窗
|
||||
openAfterSalePopup2(type) {
|
||||
this.afterSalePopup2 = true;
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
afterReadImg(e) {
|
||||
e.file.forEach(item => {
|
||||
upload(item.url, res => {
|
||||
this.imgList.push({ url: picUrl + res.data.path });
|
||||
console.log('imgList:', this.imgList);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
deletePic(e) {
|
||||
this.imgList.splice(e.index, 1);
|
||||
},
|
||||
|
||||
// 选择物流公司
|
||||
selectLogisticsCompany(index) {
|
||||
this.selectedRefundReason = this.logisticsCompanies[index];
|
||||
this.afterSalePopup2 = false;
|
||||
},
|
||||
|
||||
// 提交物流信息
|
||||
submitRefundApplication() {
|
||||
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
||||
uni.showToast({
|
||||
title: '请完善物流信息',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 输出提交的物流信息
|
||||
const logisticsInfo = {
|
||||
serviceType: this.selectedServiceType,
|
||||
refundReason: this.selectedRefundReason,
|
||||
refundDescription: this.refundDescription,
|
||||
imgList: this.imgList
|
||||
};
|
||||
console.log('提交物流信息:', logisticsInfo);
|
||||
|
||||
// 这里可以添加提交后的处理逻辑
|
||||
uni.showToast({
|
||||
title: '物流信息提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
269
packages/myOrders/sendBack/index.css
Normal file
269
packages/myOrders/sendBack/index.css
Normal file
@ -0,0 +1,269 @@
|
||||
.page {
|
||||
background-color: #f6f7fb;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.progress-item.active .progress-text {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 200rpx;
|
||||
height: 2rpx;
|
||||
background-color: #d9d9d9;
|
||||
align-self: center;
|
||||
flex-grow: 1;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.status-tip {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
display: block;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.status-desc2 {
|
||||
font-size: 24rpx;
|
||||
background-color: #ffeeeb;
|
||||
color: #fe441a;
|
||||
width: 80%;
|
||||
margin: 20rpx auto 0;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.addOrderIdBtn{
|
||||
width: 70%;
|
||||
margin: 10rpx auto 0;
|
||||
border-radius: 50rpx;
|
||||
background-color: #ff3f14;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 20rpx;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.asGoodTag {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 8rpx 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.asGoodTag1 {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
top: 133rpx;
|
||||
left: 80rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
background-color: #fff2f0;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.goods-count {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.refund-amount {
|
||||
font-size: 28rpx;
|
||||
align-self: flex-start;
|
||||
margin-top: 20rpx;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
left: 140rpx;
|
||||
}
|
||||
|
||||
.refund-info {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 25rpx 20rpx;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 2rpx solid #999999;
|
||||
border-right: 2rpx solid #999999;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #d9d9d9;
|
||||
color: #333;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffebcb;
|
||||
color: #983012;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.urge-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bottomImg{
|
||||
width: 70rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
204
packages/myOrders/sendBack/index.vue
Normal file
204
packages/myOrders/sendBack/index.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 进度条 -->
|
||||
<view class="progress-container">
|
||||
<view class="progress-item">
|
||||
<text class="progress-text">商家处理</text>
|
||||
</view>
|
||||
<view class="progress-line"></view>
|
||||
<view class="progress-item active">
|
||||
<text class="progress-text">寄回商品</text>
|
||||
</view>
|
||||
<view class="progress-line"></view>
|
||||
<view class="progress-item">
|
||||
<text class="progress-text">退款结束</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态提示 -->
|
||||
<view class="status-tip">
|
||||
<text class="status-title">自行寄回</text>
|
||||
<text class="status-desc"><text style="color: #ff481f;">2天</text>后未寄出将撤销退货申请</text>
|
||||
<view class="status-desc2">需您自行联系快递公司退回，请不要邮寄到付</view>
|
||||
<view class="info-item" style="border: none;">
|
||||
<text class="info-label">商家地址</text>
|
||||
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
||||
<text class="copy-icon" @click="copyAdress"></text>
|
||||
</view>
|
||||
|
||||
<button class="addOrderIdBtn" @click="addOrderId">填写单号</button>
|
||||
</view>
|
||||
|
||||
<view class="hr"></view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-info">
|
||||
<view class="goods-item">
|
||||
<view class="asGoodTag tag-img"
|
||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</view>
|
||||
<image class="goods-image" :src="currentAfterSale.commodity_order_item[0].commodity_pic"></image>
|
||||
<view class="goods-details">
|
||||
<text class="goods-name">
|
||||
<text class="asGoodTag asGoodTag1"
|
||||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
|
||||
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
||||
<text class="refund-amount">退款：¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||
</text>
|
||||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
||||
<text class="goods-price">
|
||||
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
||||
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退款信息 -->
|
||||
<view class="refund-info">
|
||||
<view class="info-item">
|
||||
<text class="info-label">服务类型<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value">{{ getServiceTypeText(currentAfterSale.after_sales_type) }}</text>
|
||||
<text class="info-arrow"></text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款原因<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value">{{ currentAfterSale.after_sales_reason }}</text>
|
||||
<text class="info-arrow"></text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款金额<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value amount">{{ '¥' + currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">申请时间<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退款编号<text style="color: #fc3811;">*</text></text>
|
||||
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
||||
<text class="copy-icon" @click="copyRefundNo"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view>
|
||||
<image class="bottomImg" src="http://localhost:8080/secdBack_bottom.png" alt=""/>
|
||||
</view>
|
||||
<button class="modify-btn" @click="modifyRefund">平台介入</button>
|
||||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
isPhone,
|
||||
picUrl,
|
||||
request,
|
||||
upload,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentAfterSale: {},
|
||||
pickerDefaultDate: new Date()
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 初始化日期选择器默认值为当前申请时间
|
||||
this.pickerDefaultDate = new Date(this.currentAfterSale.create_time);
|
||||
},
|
||||
onLoad(options) {
|
||||
const item = JSON.parse(options?.item);
|
||||
console.log("🚀 ~ onLoad ~ item:", item)
|
||||
this.currentAfterSale = item;
|
||||
},
|
||||
methods: {
|
||||
getServiceTypeText(type) {
|
||||
return type === 1 ? '退货退款' : '仅退款';
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
|
||||
},
|
||||
|
||||
// 赋值商家地址
|
||||
copyAdress() {
|
||||
uni.setClipboardData({
|
||||
data: this.currentAfterSale.after_sales_no,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addOrderId(){
|
||||
NavgateTo(`../returnLogistics/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||||
},
|
||||
|
||||
// 复制退款编号
|
||||
copyRefundNo() {
|
||||
uni.setClipboardData({
|
||||
data: this.currentAfterSale.after_sales_no,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 撤销申请
|
||||
cancelRefund() {
|
||||
uni.showModal({
|
||||
title: "确定要撤销本次售后申请吗？",
|
||||
showCancel: true,
|
||||
cancelText: "暂不撤销",
|
||||
confirmText: "确认撤销",
|
||||
confirmColor: "#ff4d4f",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 撤销售后接口
|
||||
uni.showToast({
|
||||
title: '订单撤销成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 修改申请
|
||||
modifyRefund() {
|
||||
NavgateTo(`../apply/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url('./index.css')
|
||||
</style>
|
||||
193
packages/payTheFees/index/index.css
Normal file
193
packages/payTheFees/index/index.css
Normal file
@ -0,0 +1,193 @@
|
||||
page {
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.pay-container {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 15rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: #ff6c00;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.operator-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.operator-item {
|
||||
width: 200rpx;
|
||||
height: 120rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.operator-item.active {
|
||||
border-color: #ff6c00;
|
||||
background-color: #ff6a0013;
|
||||
}
|
||||
|
||||
.operator-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.operator-item text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 自动识别运营商显示样式 */
|
||||
.selected-operator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.selected-operator .operator-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.selected-operator text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.change-btn {
|
||||
margin-left: auto;
|
||||
color: #ff6c00;
|
||||
font-size: 28rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.amount-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.amount-item {
|
||||
width: 160rpx;
|
||||
height: 70rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.amount-item:active {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #ff6c00;
|
||||
color: #fff;
|
||||
border-radius: 45rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pay-btn:disabled {
|
||||
background-color: #cccccc;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.pay-container {
|
||||
max-width: 600rpx;
|
||||
margin: 0 auto;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 错误提示样式 */
|
||||
.error-message {
|
||||
color: #ff4d4f;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
156
packages/payTheFees/index/index.vue
Normal file
156
packages/payTheFees/index/index.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<view class="pay-container">
|
||||
<!-- <view class="header">
|
||||
<text class="title">手机缴费</text>
|
||||
</view> -->
|
||||
|
||||
<view class="form-container">
|
||||
<!-- 手机号码输入 -->
|
||||
<view class="form-item">
|
||||
<view class="label">手机号码</view>
|
||||
<input class="input" type="number" v-model="phoneNumber" placeholder="请输入手机号码" maxlength="11" @input="onPhoneInput" />
|
||||
</view>
|
||||
|
||||
<!-- 运营商选择 -->
|
||||
<view class="form-item" v-if="showOperatorSelect">
|
||||
<view class="label">选择运营商</view>
|
||||
<view class="operator-list">
|
||||
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaMobile' }" @click="selectOperator('chinaMobile')">
|
||||
<image class="operator-icon" src="http://localhost:8080/payTheFees_yidong.png" mode="aspectFit" />
|
||||
<text>移动</text>
|
||||
</view>
|
||||
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaUnicom' }" @click="selectOperator('chinaUnicom')">
|
||||
<image class="operator-icon" src="http://localhost:8080/payTheFees_liantong.png" mode="aspectFit" />
|
||||
<text>中国联通</text>
|
||||
</view>
|
||||
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaTelecom' }" @click="selectOperator('chinaTelecom')">
|
||||
<image class="operator-icon" src="http://localhost:8080/payTheFees_dianxin.png" mode="aspectFit" />
|
||||
<text>中国电信</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 自动识别的运营商显示 -->
|
||||
<view class="form-item" v-else-if="selectedOperator">
|
||||
<view class="label">运营商</view>
|
||||
<view class="selected-operator">
|
||||
<image class="operator-icon" :src="getOperatorIcon()" mode="aspectFit" />
|
||||
<text>{{ getOperatorName() }}</text>
|
||||
<text class="change-btn" @click="showOperatorSelect = true">更换</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 缴费金额 -->
|
||||
<view class="form-item">
|
||||
<view class="label">缴费金额</view>
|
||||
<input class="input amount-input" type="number" v-model="amount" placeholder="请输入金额" />
|
||||
|
||||
<view class="amount-list">
|
||||
<view class="amount-item" v-for="item in amountOptions" :key="item" @click="selectAmount(item)">{{ item }}元</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 缴费按钮 -->
|
||||
<button class="pay-btn" :disabled="!isFormValid" @click="handlePay">立即缴费</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phoneNumber: '',
|
||||
selectedOperator: '',
|
||||
amount: '',
|
||||
amountOptions: [10, 20, 30, 50, 100, 200],
|
||||
showOperatorSelect: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isFormValid() {
|
||||
// 简单验证：手机号11位，选择了运营商，金额大于0
|
||||
return this.phoneNumber.length === 11 &&
|
||||
this.selectedOperator &&
|
||||
this.amount &&
|
||||
Number(this.amount) > 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPhoneInput() {
|
||||
if (this.phoneNumber.length >= 3) {
|
||||
this.autoDetectOperator();
|
||||
}
|
||||
},
|
||||
autoDetectOperator() {
|
||||
// 获取手机号前3位或前4位
|
||||
const prefix = this.phoneNumber.substring(0, 3);
|
||||
const prefix4 = this.phoneNumber.substring(0, 4);
|
||||
|
||||
// 中国移动号段
|
||||
const chinaMobilePrefixes = ['134', '135', '136', '137', '138', '139', '147', '150', '151', '152', '157', '158', '159', '178', '182', '183', '184', '187', '188', '198'];
|
||||
// 中国联通号段
|
||||
const chinaUnicomPrefixes = ['130', '131', '132', '145', '155', '156', '166', '175', '176', '185', '186'];
|
||||
// 中国电信号段
|
||||
const chinaTelecomPrefixes = ['133', '149', '153', '173', '177', '180', '181', '189', '199'];
|
||||
|
||||
if (chinaMobilePrefixes.includes(prefix) || chinaMobilePrefixes.includes(prefix4)) {
|
||||
this.selectedOperator = 'chinaMobile';
|
||||
this.showOperatorSelect = false;
|
||||
} else if (chinaUnicomPrefixes.includes(prefix) || chinaUnicomPrefixes.includes(prefix4)) {
|
||||
this.selectedOperator = 'chinaUnicom';
|
||||
this.showOperatorSelect = false;
|
||||
} else if (chinaTelecomPrefixes.includes(prefix) || chinaTelecomPrefixes.includes(prefix4)) {
|
||||
this.selectedOperator = 'chinaTelecom';
|
||||
this.showOperatorSelect = false;
|
||||
} else {
|
||||
// 无法识别时显示选择界面
|
||||
this.showOperatorSelect = true;
|
||||
}
|
||||
},
|
||||
selectOperator(operator) {
|
||||
this.selectedOperator = operator;
|
||||
this.showOperatorSelect = false;
|
||||
},
|
||||
selectAmount(amount) {
|
||||
this.amount = amount;
|
||||
},
|
||||
handlePay() {
|
||||
if (this.isFormValid) {
|
||||
uni.showToast({
|
||||
title: '缴费成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
getOperatorName() {
|
||||
switch (this.selectedOperator) {
|
||||
case 'chinaMobile':
|
||||
return '中国移动';
|
||||
case 'chinaUnicom':
|
||||
return '中国联通';
|
||||
case 'chinaTelecom':
|
||||
return '中国电信';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
},
|
||||
getOperatorIcon() {
|
||||
switch (this.selectedOperator) {
|
||||
case 'chinaMobile':
|
||||
return 'http://localhost:8080/payTheFees_yidong.png';
|
||||
case 'chinaUnicom':
|
||||
return 'http://localhost:8080/payTheFees_liantong.png';
|
||||
case 'chinaTelecom':
|
||||
return 'http://localhost:8080/payTheFees_dianxin.png';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
102
packages/shop/creditsExchange/index.css
Normal file
102
packages/shop/creditsExchange/index.css
Normal file
@ -0,0 +1,102 @@
|
||||
page {
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.credits-exchange-container {
|
||||
padding: 20rpx;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: 48%;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-image image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.goods-points {
|
||||
font-size: 32rpx;
|
||||
color: #e64340;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goods-points text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/* 适配不同屏幕尺寸 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.credits-exchange-container {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 44rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: 32%;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 32rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
.goods-points {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.goods-points text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
68
packages/shop/creditsExchange/index.vue
Normal file
68
packages/shop/creditsExchange/index.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<view class="credits-exchange-container">
|
||||
<view class="goods-list">
|
||||
<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
|
||||
<view class="goods-image">
|
||||
<image :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">{{ item.name }}</view>
|
||||
<view class="goods-points">{{ item.points }} <text>积分</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'CreditsExchange',
|
||||
data() {
|
||||
return {
|
||||
goodsList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '兰蔻持妆粉底液 持久遮瑕保湿',
|
||||
points: 31800,
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '福临门一级小磨香油400ML',
|
||||
points: 999999,
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '九阳（Joyoung）不用翻面 空气炸锅',
|
||||
points: 999999,
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '福临门礼包（福临门自然香五常大米）',
|
||||
points: 999999,
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '福临门礼包（福临门自然香五常大米）',
|
||||
points: 999999,
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '福临门礼包（福临门自然香五常大米）',
|
||||
points: 999999,
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
@ -7,8 +7,8 @@
|
||||
class="searchBox"
|
||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||||
>
|
||||
<div class="searchBox_left">
|
||||
<!-- <u-icon name="arrow-left" size="20px" color="#000"></u-icon> -->
|
||||
<div class="searchBox_left" @click="back">
|
||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||
</div>
|
||||
<div class="searchBox_ipt" @click="searchPage">
|
||||
<image
|
||||
@ -400,6 +400,10 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
NavgateTo('1')
|
||||
},
|
||||
|
||||
changeCate(id) {
|
||||
// 根据id查找对应的分类
|
||||
const category = this.CateList.find((item) => item.id === id);
|
||||
|
||||
79
pages.json
79
pages.json
@ -279,6 +279,13 @@
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "list/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "湖畔社区",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -490,8 +497,16 @@
|
||||
"pages": [
|
||||
{
|
||||
"path": "index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "本地生活",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "classify/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
@ -648,6 +663,13 @@
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "添加收货地址"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "creditsExchange/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "积分商城"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -657,11 +679,8 @@
|
||||
{
|
||||
"path": "index/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationStyle": "custom",
|
||||
"usingComponents": {
|
||||
"nav-footer": "/components/nav/nav"
|
||||
}
|
||||
"navigationBarTitleText": "榴园到家 服务至上",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -774,7 +793,8 @@
|
||||
{
|
||||
"path": "orderDetails/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的订单"
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"navigationBarBackgroundColor": "#ff5601"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -806,6 +826,53 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "评价"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pending/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商家处理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "sendBack/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "自行寄回"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "returnLogistics/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "填写退货物流"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "refundOver/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "退款结束"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "apply/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请退货退款"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "changeInfo/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "换货详情"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "packages/payTheFees",
|
||||
"pages": [
|
||||
{
|
||||
"path": "index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.hot-word-container {
|
||||
width: auto;
|
||||
width: 60%;
|
||||
height: 50rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@ -69,7 +69,10 @@ page {
|
||||
}
|
||||
|
||||
.search2 {
|
||||
padding: 20rpx 0;
|
||||
padding: 10rpx 0;
|
||||
width: 55%;
|
||||
position: relative;
|
||||
left: -190rpx;
|
||||
}
|
||||
|
||||
.function-nav {
|
||||
@ -120,12 +123,12 @@ page {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.searchBox2 image {
|
||||
width: 28rpx;
|
||||
width: 40rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
@ -180,6 +183,10 @@ page {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.tabList text{
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.tabItem {
|
||||
width: 33.33%;
|
||||
display: flex;
|
||||
|
||||
@ -9,6 +9,25 @@
|
||||
{{ currentCity.cityName || '选择城市' }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<view class="search2" v-if="isShowSearch">
|
||||
<view class="searchBox2">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="hot-word-container">
|
||||
<view class="hot-word-scroll" :style="{ transform: 'translateY(' + scrollPosition + 'rpx)' }">
|
||||
<view v-for="(word, index) in hotWord" :key="index" class="hot-word-item"
|
||||
@click="handleHotWordClick(word)">
|
||||
{{ word }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<input class="search_input" placeholder='请输入内容' confirm-type='search' @input="searchInput"
|
||||
@confirm="searchInput" :value="selectKeyWord" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 功能导航区 -->
|
||||
<view class="function-nav" v-if="showNav">
|
||||
@ -34,27 +53,11 @@
|
||||
<text>物业管理</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="search2" v-if="isShowSearch">
|
||||
<view class="searchBox2">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="hot-word-container">
|
||||
<view class="hot-word-scroll" :style="{ transform: 'translateY(' + scrollPosition + 'rpx)' }">
|
||||
<view v-for="(word, index) in hotWord" :key="index" class="hot-word-item"
|
||||
@click="handleHotWordClick(word)">
|
||||
{{ word }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<input class="search_input" placeholder='请输入内容' confirm-type='search' @input="searchInput"
|
||||
@confirm="searchInput" :value="selectKeyWord" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper">
|
||||
<swiper @animationfinish="swipers" autoplay circular>
|
||||
<swiper-item v-for="(item, index) in bannerList" :key="index" @click="headerServerClick(item)">
|
||||
<!-- <swiper-item v-for="(item, index) in bannerList" :key="index" @click="headerServerClick(item)"> -->
|
||||
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
||||
<image :src="item.pic_src" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
@ -101,7 +104,7 @@
|
||||
<view class="serverList_left">
|
||||
<swiper>
|
||||
<swiper-item v-for="(item, index) in homeLeftList" :key="index" @click="headerServerClick(item)">
|
||||
<image :src="item.pic_src" alt="" mode="aspectFit" />
|
||||
<image :src="item.pic_src" alt=""/>
|
||||
<!-- <view>{{ item.ad_position }}</view> -->
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
@ -493,12 +496,14 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
headerServerClick2(e) {
|
||||
async headerServerClick2(e) {
|
||||
if (e.title == '更多') {
|
||||
NavgateTo('/packages/localLife/index/index')
|
||||
}
|
||||
const cate_id = this.categoryList.find(item => item.cate_name == e.title)?.id;
|
||||
if (cate_id) { this.switchCategory(cate_id) }
|
||||
if (cate_id) {
|
||||
await this.switchCategory(cate_id);
|
||||
}
|
||||
return
|
||||
},
|
||||
|
||||
@ -988,21 +993,27 @@ export default {
|
||||
this.hotWord = res.search_hot_word.split(/[,，]/)
|
||||
},
|
||||
|
||||
switchCategory(id) {
|
||||
async switchCategory(id) {
|
||||
this.currentCategoryId = id;
|
||||
this.activeCategoryId = `category-${id}`;
|
||||
this.getMechantList()
|
||||
await this.getMechantList(); // 等待数据加载完成
|
||||
|
||||
this.showDropdown = false;
|
||||
this.$nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 1000,
|
||||
duration: 300
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
toggleDropdown() {
|
||||
this.showDropdown = !this.showDropdown;
|
||||
// 当展开下拉菜单时，页面滑动
|
||||
if (this.showDropdown) {
|
||||
if (this.showDropdown) {
|
||||
this.$nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 2500,
|
||||
scrollTop: 1000,
|
||||
duration: 300
|
||||
});
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user