105 lines
2.9 KiB
Vue
105 lines
2.9 KiB
Vue
<template>
|
||
<view class="record-container">
|
||
<!-- 动态渲染月份分组 -->
|
||
<view v-for="group in records" :key="group.time" class="month-group">
|
||
<view class="month-header">
|
||
<text class="month-title">{{ group.time }}</text>
|
||
<text class="month-count">{{ group.total }}单兑换商品</text>
|
||
</view>
|
||
|
||
<!-- 动态渲染每个记录项 -->
|
||
<view v-for="item in group.orders" :key="item.id" class="record-item">
|
||
<view class="item-left">
|
||
<image class="item-image" :src="item.commodity_order_item_list[0].commodity_pic" mode="aspectFill">
|
||
</image>
|
||
<view class="item-info">
|
||
<text class="item-name">{{ item.commodity_order_item_list[0].goods_name }}</text>
|
||
<view class="item-data">
|
||
<view class="item-label">订单号：</view>
|
||
<view>{{ item.order_no }}</view>
|
||
</view>
|
||
<view class="item-data">
|
||
<view class="item-label">积分变动：</view>
|
||
<view>{{ item.total_amount }}积分</view>
|
||
</view>
|
||
<view class="item-data">
|
||
<view class="item-label">交易日期：</view>
|
||
<view>{{ item.order_time }}</view>
|
||
</view>
|
||
<view class="item-data">
|
||
<view class="item-label">交易地点：</view>
|
||
<view>{{ item.receiving_address }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item-right">
|
||
<button class="nav-btn" @click="navigateToStore(item)">导航</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { request, picUrl, NavgateTo } from "../../../utils";
|
||
import { apiArr } from "../../../api/pointShop";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
records: []
|
||
};
|
||
},
|
||
methods: {
|
||
getList() {
|
||
request(apiArr.pointShopRecord, 'POST', {}, { silent: false }).then(res => {
|
||
// 处理商品图片路径
|
||
res.rows.forEach(item => {
|
||
item.orders.forEach(ite => {
|
||
if (ite.commodity_order_item_list && ite.commodity_order_item_list.length > 0) {
|
||
ite.commodity_order_item_list.forEach(parm => {
|
||
if (parm.commodity_pic) {
|
||
parm.commodity_pic = picUrl + parm.commodity_pic;
|
||
}
|
||
});
|
||
}
|
||
})
|
||
});
|
||
this.records = res.rows;
|
||
});
|
||
},
|
||
navigateToStore(item) {
|
||
// 检查是否有经纬度信息
|
||
if (item.merchant_info.latitude && item.merchant_info.longitude) {
|
||
uni.openLocation({
|
||
latitude: Number(item.merchant_info.latitude),
|
||
longitude: Number(item.merchant_info.longitude),
|
||
name: item.merchant_info.merchant_name,
|
||
address: item.receiving_address,
|
||
success: (res) => {
|
||
console.log('导航成功', res);
|
||
},
|
||
fail: (err) => {
|
||
console.log('导航失败', err);
|
||
uni.showToast({
|
||
title: '导航失败，请检查位置权限',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '暂无门店位置信息',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getList();
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
@import url('./index.css');
|
||
</style> |