Commit de5cfde9 authored by 彭佳妮(贵阳日报)'s avatar 彭佳妮(贵阳日报)
parents ab5ad951 48e969bf
<template>
<view class="container">
<Header title="售后"></Header>
<Header title="售后详情"></Header>
<view class="content">111</view>
<view class="content">
<view class="box box1">
<view class="money">
<view class="money_l">退款金额</view>
<view class="money_r">{{ afterSaleDetail.refundPrice }}</view>
</view>
<view class="intro">申请通过后退回至原账户</view>
</view>
<view class="box">
<view class="steps">
<view class="step" v-for="(item, index) in handleLog" :key="index">
<wd-icon name="check-circle-filled" size="12px" class="tag" v-if="index == 0"></wd-icon>
<view class="head">{{ item.title }}</view>
<view class="time" v-if="item.content">{{ item.content }}</view>
<view class="time">{{ item.time }}</view>
</view>
</view>
</view>
<view class="box">
<view class="goods">
<view class="g1">退款信息</view>
<view class="g2" v-for="(item, index) in orderItems" :key="index">
<img :src="fileDomain + item.pic" />
<view class="g2_item">
<view class="g2_info">
<view class="g2_name">{{ item.prodName }}</view>
<view class="g2_price">{{ item.actualTotal }}</view>
</view>
<view class="g2_number">X {{ item.prodCount }}</view>
</view>
</view>
<view class="g3">
<view class="g3_item">
<view class="g3_title">申请时间:</view>
<view class="g3_intro">{{ afterSaleDetail.applyTime }}</view>
</view>
<view class="g3_item">
<view class="g3_title">退款原因:</view>
<view class="g3_intro">{{ afterSaleDetail.refundMemo }}</view>
</view>
<view class="g3_item">
<view class="g3_title">订单号:</view>
<view class="g3_intro">{{ afterSaleDetail.orderNumber.split('-')[1] }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import { afterSale } from '@/api/order';
const fileDomain = import.meta.env.VITE_APP_IMG_URL;
const orderNumber = ref('');
const afterSaleDetail = ref();
const handleLog = ref();
const orderItems = ref();
const getAterSaleDetail = async (id) => {
const res = await afterSale({ orderNumber: id });
handleLog.value = res.data[0].handleLog;
afterSaleDetail.value = res.data[0];
orderItems.value = res.data[0].orderItems;
};
onLoad((options) => {
// orderNumber.value = options.orderNumber;
getAterSaleDetail('NEONO-2024080113095213631');
});
</script>
<style lang="scss" scoped>
......@@ -21,6 +84,162 @@ page {
.content {
padding-top: 88rpx;
.box1 {
display: flex;
flex-direction: column;
.intro {
font-size: 12px;
font-weight: normal;
line-height: 12px;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #bcbcbc;
}
.money {
display: flex;
line-height: 14px;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
font-family: Source Han Sans;
font-size: 14px;
margin-bottom: 10rpx;
.money_l {
font-weight: normal;
flex: 1;
}
.money_r {
font-weight: bold;
flex: 2;
text-align: right;
margin-top: -15rpx;
}
}
}
.box {
width: 710rpx;
margin: 10rpx auto 3rpx;
border-radius: 8px;
background-color: #fff;
padding: 40rpx 40rpx;
box-sizing: border-box;
.steps {
border-left: 2px solid #f3f3f3;
.step {
position: relative;
padding-left: 25rpx;
.tag {
position: absolute;
left: -6px;
top: 0px;
opacity: 1;
color: #fa5151;
}
.head {
font-family: Source Han Sans;
font-size: 14px;
font-weight: bold;
line-height: 14px;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-bottom: 10rpx;
}
.time {
font-family: Source Han Sans;
font-size: 11px;
font-weight: normal;
line-height: 14px;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #bcbcbc;
margin-bottom: 10rpx;
}
.time:last-child {
margin-bottom: 40rpx;
}
}
}
}
}
}
.goods {
.g1 {
font-family: Source Han Sans;
font-size: 14px;
font-weight: normal;
line-height: 14px;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-bottom: 40rpx;
}
.g2 {
display: flex;
margin-bottom: 20rpx;
img {
width: 176rpx;
height: 176rpx;
border-radius: 8px;
opacity: 1;
margin-right: 20rpx;
}
.g2_item {
flex: 1;
font-family: Source Han Sans;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
font-size: 14px;
line-height: 14px;
letter-spacing: 0em;
color: #3d3d3d;
.g2_info {
display: flex;
margin-top: 20rpx;
margin-bottom: 22rpx;
justify-content: space-between;
.g2_name {
font-weight: bold;
}
.g2_price {
font-weight: bold;
text-align: right;
}
}
.g2_number {
font-weight: normal;
}
}
}
.g3 {
font-family: Source Han Sans;
font-size: 14px;
font-weight: normal;
line-height: 14px;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
.g3_item {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.g3_title {
color: #767676;
width: 120rpx;
}
.g3_intro {
color: #3d3d3d;
text-align: right;
flex: 1;
}
}
}
}
</style>
......@@ -143,6 +143,18 @@
<view class="my-button-qg" @click="jumpProductDetails(item)">抢购</view>
</view>
</view>
<view
style="
width: 100%;
text-align: center;
font-size: 24rpx;
background: #fdfdfd;
color: #888989;
"
v-if="listOfGroupBuyingProducts.length === 0"
>
没有更多啦~
</view>
</view>
</view>
<!-- 团购优惠-end -->
......@@ -311,6 +323,8 @@ const shopInfo = ref({});
const shopSwiperList = ref([]);
// 当前位置的经纬度-// 店铺的经纬度
const currentLatitudeAndLongitude = ref({ latitude: 0, longitude: 0 });
// 店铺经纬度
const shopLocation = ref({ lat: 0, lon: 0 });
// 团购商品列表
const listOfGroupBuyingProducts = ref([]);
// 商家优惠券
......@@ -331,24 +345,77 @@ const commentTotal = ref(0);
const recommendedTypesOfPeripherals = ref([]);
// 商户id
const shopId = ref('');
const tagList2 = ref([{ name: '免费停车', id: 1 }]);
// 周边推荐-商家列表
const recommendedListOfPeripherals = ref([]);
onLoad((options) => {
// onLoad((options) => {
// params.value.shopId = options.shopId;
// getStoreInformationFn(options.shopId).then(() => {
// peripheryRecomFn();
// });
// groupBuyListFn(options.shopId);
// shopId.value = options.shopId;
// couponShopListFn(options.shopId);
// getEvaluationPageFn();
// });
// onShow(() => {
// getStoreInformationFn(params.value.shopId).then(() => {
// // 获取位置
// getLocationFn().then((res) => {
// const distance = getDistance(
// res.lat,
// res.lon,
// shopLocation.value.lat,
// shopLocation.value.lon,
// 1,
// );
// shopInfo.value.distance = distance;
// });
// });
// });
onLoad(async (options) => {
params.value.shopId = options.shopId;
getStoreInformationFn(options.shopId).then(() => {
peripheryRecomFn();
});
groupBuyListFn(options.shopId);
shopId.value = options.shopId;
couponShopListFn(options.shopId);
// 使用 Promise.all 并行请求,提升性能
await Promise.all([
getStoreInformationFn(options.shopId),
groupBuyListFn(options.shopId),
couponShopListFn(options.shopId),
]);
// 获取周边推荐信息
peripheryRecomFn();
// 获取评价信息
getEvaluationPageFn();
// 获取位置并计算距离
calculateDistance();
});
onShow(() => {
// 获取位置
getLocationFn();
onShow(async () => {
await getStoreInformationFn(params.value.shopId);
// 获取位置并计算距离
calculateDistance();
});
const value = ref(5);
// 计算距离的函数封装
async function calculateDistance() {
try {
const res = await getLocationFn();
const distance = getDistance(
res.lat,
res.lon,
shopLocation.value.lat,
shopLocation.value.lon,
1,
);
shopInfo.value.distance = distance;
console.log('distance', distance, shopLocation.value.lat, shopLocation.value.lon);
} catch (error) {
console.error('Error calculating distance:', error);
}
}
const handleClick = (e) => {
const { index } = e;
const imgSrc = shopSwiperList.value[index];
......@@ -369,9 +436,9 @@ function scroll(e) {
*/
function peripheryRecomFn() {
// 维度
const lat = currentLatitudeAndLongitude.value.latitude;
const lat = shopLocation.value.lat;
// 经度
const lon = currentLatitudeAndLongitude.value.longitude;
const lon = shopLocation.value.lon;
peripheryRecom({ lat, lon, distance: 10 }).then((res) => {
if (res.code === 0) {
recommendedTypesOfPeripherals.value = res.data;
......@@ -406,28 +473,28 @@ function sgyrddShopPageFn(categoryIds, lat, lon) {
.filter((item) => {
return item !== '';
});
console.log('res.data.content', res.data.content);
recommendedListOfPeripherals.value = res.data.content;
xma.hideLoading();
}
});
}
function getLocationFn() {
return new Promise((resolve, reject) => {
xma.getLocation({
type: 'wgs84',
isHighAccuracy: true,
success: function (res) {
// 经纬度
console.log('res.latitude, res.longitude', res.latitude, res.longitude);
// 店铺的经纬度
const myLatitude = currentLatitudeAndLongitude.value.latitude;
const myLongitude = currentLatitudeAndLongitude.value.longitude;
const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);
shopInfo.value.distance = distance;
resolve({ lat: res.latitude, lon: res.longitude });
},
fail: function (err) {
return err;
},
});
});
}
/**
* 跳转地图
......@@ -475,8 +542,9 @@ const getStoreInformationFn = (id) => {
if (res.data.shop.labels && res.data.shop.labels !== '') {
shopInfo.value.tagList = res.data.shop.labels.split(',');
}
currentLatitudeAndLongitude.value.latitude = res.data.shop.location.lat;
currentLatitudeAndLongitude.value.longitude = res.data.shop.location.lon;
const { lat, lon } = res.data.shop.location;
shopLocation.value.lat = lat;
shopLocation.value.lon = lon;
resolve();
}
});
......
......@@ -2,7 +2,79 @@
<view class="container">
<Header title="我的店铺"></Header>
<view class="content">111</view>
<view class="content">
<!-- 列表 -->
<view class="listcon">
<view class="pubList">
<!-- 列表头部 -->
<view class="titlecon">
<span>标题标题</span>
<span>未通过</span>
</view>
<!-- 列表详细 -->
<view class="delbox">
<view class="listPic">
<img
src="https://www.gywb.cn/upload/web/dataset/2024/08/01/2282c5c7e93b42c88dcfc606440f9716.jpg"
alt=""
/>
</view>
<view class="deltxt">
<ul>
<li>
<span>申请时间:</span>
<span>2024-08-02 16:21:19</span>
</li>
<li>
<span>签约时间:</span>
<span>2024-08-02 ~ 2024-08-02</span>
</li>
<li>
<span>地址:</span>
<span>贵州省贵阳市南明区彭家湾花果园项目M区3栋1单元25层5号房</span>
</li>
</ul>
</view>
</view>
</view>
<view class="pubList">
<!-- 列表头部 -->
<view class="titlecon">
<span>标题标题</span>
<span>未通过</span>
</view>
<!-- 列表详细 -->
<view class="delbox">
<view class="listPic">
<img
src="https://www.gywb.cn/upload/web/dataset/2024/08/01/2282c5c7e93b42c88dcfc606440f9716.jpg"
alt=""
/>
</view>
<view class="deltxt">
<ul>
<li>
<span>申请时间:</span>
<span>2024-08-02 16:21:19</span>
</li>
<li>
<span>签约时间:</span>
<span>2024-08-02 ~ 2024-08-02</span>
</li>
<li>
<span>地址:</span>
<span>贵州省贵阳市南明区彭家湾花果园项目M区3栋1单元25层5号房</span>
</li>
</ul>
</view>
</view>
</view>
</view>
<view class="shbox">审核被拒可点击修改重新提交</view>
</view>
<view class="butCon"><button class="butXz">主要按钮</button></view>
</view>
</template>
......@@ -16,11 +88,90 @@ page {
}
.container {
position: relative;
width: 375 * 2rpx;
margin: 0 auto;
background: #f1f1f1;
padding-bottom: 80px;
.content {
padding-top: 88rpx;
.listcon {
margin-top: 10px;
.pubList {
margin-top: 5px;
width: 100%;
height: auto;
.titlecon {
display: flex;
width: 96%;
padding: 2%;
background-color: #fff;
position: relative;
}
.titlecon span {
display: block;
font-size: 14px;
line-height: 30px;
font-weight: bold;
}
.titlecon span:last-child {
position: absolute;
right: 2%;
line-height: 30px;
color: #cb6429;
}
.delbox {
width: 96%;
padding: 2%;
display: flex;
margin-top: 2px;
background-color: #fff;
}
.delbox .listPic {
padding-top: 2%;
width: 25%;
}
.delbox .listPic img {
width: 100%;
}
.delbox .deltxt {
padding: 0;
padding-left: 2%;
width: 73%;
}
.delbox .deltxt ul {
list-style: none;
padding: 0;
}
.delbox .deltxt ul li {
text-align: left;
}
.delbox .deltxt ul li span {
font-size: 14px;
}
}
}
.shbox {
text-align: center;
margin-top: 10px;
font-size: 15px;
color: #7f7f7f;
}
}
.butCon {
width: 100%;
height: auto;
position: absolute;
bottom: 0px;
width: 96%;
padding: 2%;
background-color: #fff;
}
.butXz {
border-radius: 10px;
background-color: #fb3534;
color: #fff;
outline: none;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment