Commit de5cfde9 authored by 彭佳妮(贵阳日报)'s avatar 彭佳妮(贵阳日报)
parents ab5ad951 48e969bf
<template> <template>
<view class="container"> <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> </view>
</template> </template>
<script setup> <script setup>
import Header from '@/pages/order/components/Header/index.vue'; 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -21,6 +84,162 @@ page { ...@@ -21,6 +84,162 @@ page {
.content { .content {
padding-top: 88rpx; 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> </style>
...@@ -143,6 +143,18 @@ ...@@ -143,6 +143,18 @@
<view class="my-button-qg" @click="jumpProductDetails(item)">抢购</view> <view class="my-button-qg" @click="jumpProductDetails(item)">抢购</view>
</view> </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>
</view> </view>
<!-- 团购优惠-end --> <!-- 团购优惠-end -->
...@@ -311,6 +323,8 @@ const shopInfo = ref({}); ...@@ -311,6 +323,8 @@ const shopInfo = ref({});
const shopSwiperList = ref([]); const shopSwiperList = ref([]);
// 当前位置的经纬度-// 店铺的经纬度 // 当前位置的经纬度-// 店铺的经纬度
const currentLatitudeAndLongitude = ref({ latitude: 0, longitude: 0 }); const currentLatitudeAndLongitude = ref({ latitude: 0, longitude: 0 });
// 店铺经纬度
const shopLocation = ref({ lat: 0, lon: 0 });
// 团购商品列表 // 团购商品列表
const listOfGroupBuyingProducts = ref([]); const listOfGroupBuyingProducts = ref([]);
// 商家优惠券 // 商家优惠券
...@@ -331,24 +345,77 @@ const commentTotal = ref(0); ...@@ -331,24 +345,77 @@ const commentTotal = ref(0);
const recommendedTypesOfPeripherals = ref([]); const recommendedTypesOfPeripherals = ref([]);
// 商户id // 商户id
const shopId = ref(''); const shopId = ref('');
const tagList2 = ref([{ name: '免费停车', id: 1 }]);
// 周边推荐-商家列表 // 周边推荐-商家列表
const recommendedListOfPeripherals = ref([]); 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; params.value.shopId = options.shopId;
getStoreInformationFn(options.shopId).then(() => {
peripheryRecomFn();
});
groupBuyListFn(options.shopId);
shopId.value = 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(); getEvaluationPageFn();
// 获取位置并计算距离
calculateDistance();
}); });
onShow(() => {
// 获取位置 onShow(async () => {
getLocationFn(); 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 handleClick = (e) => {
const { index } = e; const { index } = e;
const imgSrc = shopSwiperList.value[index]; const imgSrc = shopSwiperList.value[index];
...@@ -369,9 +436,9 @@ function scroll(e) { ...@@ -369,9 +436,9 @@ function scroll(e) {
*/ */
function peripheryRecomFn() { 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) => { peripheryRecom({ lat, lon, distance: 10 }).then((res) => {
if (res.code === 0) { if (res.code === 0) {
recommendedTypesOfPeripherals.value = res.data; recommendedTypesOfPeripherals.value = res.data;
...@@ -406,27 +473,27 @@ function sgyrddShopPageFn(categoryIds, lat, lon) { ...@@ -406,27 +473,27 @@ function sgyrddShopPageFn(categoryIds, lat, lon) {
.filter((item) => { .filter((item) => {
return item !== ''; return item !== '';
}); });
console.log('res.data.content', res.data.content);
recommendedListOfPeripherals.value = res.data.content; recommendedListOfPeripherals.value = res.data.content;
xma.hideLoading(); xma.hideLoading();
} }
}); });
} }
function getLocationFn() { function getLocationFn() {
xma.getLocation({ return new Promise((resolve, reject) => {
type: 'wgs84', xma.getLocation({
isHighAccuracy: true, type: 'wgs84',
success: function (res) { isHighAccuracy: true,
// 经纬度 success: function (res) {
console.log('res.latitude, res.longitude', res.latitude, res.longitude); // 经纬度
// 店铺的经纬度 console.log('res.latitude, res.longitude', res.latitude, res.longitude);
const myLatitude = currentLatitudeAndLongitude.value.latitude; resolve({ lat: res.latitude, lon: res.longitude });
const myLongitude = currentLatitudeAndLongitude.value.longitude; },
const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1); fail: function (err) {
shopInfo.value.distance = distance; return err;
}, },
fail: function (err) { });
return err;
},
}); });
} }
/** /**
...@@ -475,8 +542,9 @@ const getStoreInformationFn = (id) => { ...@@ -475,8 +542,9 @@ const getStoreInformationFn = (id) => {
if (res.data.shop.labels && res.data.shop.labels !== '') { if (res.data.shop.labels && res.data.shop.labels !== '') {
shopInfo.value.tagList = res.data.shop.labels.split(','); shopInfo.value.tagList = res.data.shop.labels.split(',');
} }
currentLatitudeAndLongitude.value.latitude = res.data.shop.location.lat; const { lat, lon } = res.data.shop.location;
currentLatitudeAndLongitude.value.longitude = res.data.shop.location.lon; shopLocation.value.lat = lat;
shopLocation.value.lon = lon;
resolve(); resolve();
} }
}); });
......
...@@ -2,7 +2,79 @@ ...@@ -2,7 +2,79 @@
<view class="container"> <view class="container">
<Header title="我的店铺"></Header> <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> </view>
</template> </template>
...@@ -16,11 +88,90 @@ page { ...@@ -16,11 +88,90 @@ page {
} }
.container { .container {
position: relative;
width: 375 * 2rpx; width: 375 * 2rpx;
margin: 0 auto; margin: 0 auto;
background: #f1f1f1;
padding-bottom: 80px;
.content { .content {
padding-top: 88rpx; 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> </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