Compare commits
3 Commits
0a71636436
...
9dffbedf94
| Author | SHA1 | Date | |
|---|---|---|---|
| 9dffbedf94 | |||
|
|
62442b4798 | ||
|
|
09e949af6f |
3
api/order.js
Normal file
3
api/order.js
Normal file
@ -0,0 +1,3 @@
|
||||
export const apiArr = {
|
||||
orderList: '/api/v2/wechat/commodity/order', // 商品订单列表
|
||||
}
|
||||
@ -19,8 +19,7 @@
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"Payment" : {},
|
||||
"OAuth" : {},
|
||||
"Share" : {}
|
||||
"OAuth" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
@ -52,7 +51,7 @@
|
||||
"appleiap" : {},
|
||||
"weixin" : {
|
||||
"__platform__" : [ "ios", "android" ],
|
||||
"appid" : "wxb4018c78fa143450",
|
||||
"appid" : "",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
},
|
||||
@ -61,12 +60,6 @@
|
||||
"appid" : "wxb4018c78fa143450",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
},
|
||||
"share" : {
|
||||
"weixin" : {
|
||||
"appid" : "wxb4018c78fa143450",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,26 +17,27 @@
|
||||
<view v-for="(item, index) in orderData" :key="index">
|
||||
<view class="contentList">
|
||||
<!-- 订单头部信息 -->
|
||||
<view class="order-header" @click="toDetails(item.status)">
|
||||
<text>提交订单:{{ item.createTime }}</text>
|
||||
<view class="order-header" @click="toDetails(item.order_status)">
|
||||
<text>提交订单:{{ item.order_time }}</text>
|
||||
<view
|
||||
v-if="item.status == '已取消' || item.status == '已完成'"
|
||||
v-if="item.order_status == 6 || item.order_status == 5"
|
||||
class="status3"
|
||||
>{{ item.status }}</view
|
||||
>{{ getOrderStatus(item.order_status) }}</view
|
||||
>
|
||||
<view v-else-if="item.status == '退款中'" class="status2">
|
||||
<img
|
||||
src="http://localhost:8080/refund.png"
|
||||
/>
|
||||
{{ item.status }}
|
||||
<view v-else-if="item.order_status == 7" class="status2">
|
||||
<img src="http://localhost:8080/refund.png" />
|
||||
{{ getOrderStatus(item.order_status) }}
|
||||
</view>
|
||||
<view v-else class="status">{{ item.status }}</view>
|
||||
<view v-else class="order_status">{{
|
||||
getOrderStatus(item.order_status)
|
||||
}}</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods-list" @click="toDetails(item.status)">
|
||||
<view class="goods-list" @click="toDetails(item.order_status)">
|
||||
<view
|
||||
v-for="(goods, goodsIndex) in item.goodsList"
|
||||
v-for="(goods, goodsIndex) in item.commodity_order_item_list
|
||||
.commodity_pic"
|
||||
:key="goodsIndex"
|
||||
class="goods-item"
|
||||
>
|
||||
@ -46,28 +47,30 @@
|
||||
|
||||
<!-- 订单底部信息 -->
|
||||
<view class="order-footer">
|
||||
<view class="order-footer-text" @click="toDetails(item.status)"
|
||||
>共{{ item.totalCount }}件商品,共计
|
||||
<text> {{ item.totalPrice }}</text>
|
||||
<view
|
||||
class="order-footer-text"
|
||||
@click="toDetails(item.order_status)"
|
||||
>共{{ item.total_count }}件商品,共计
|
||||
<text> {{ item.total_amount }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="btn-group" v-if="item.status === '待付款'">
|
||||
<view class="btn-group" v-if="item.order_status === 1">
|
||||
<button class="cancel-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.status === '待发货'">
|
||||
<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.status === '已取消'">
|
||||
<view class="btn-group" v-if="item.order_status === 6">
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<button class="pay-btn" @click="cancelOrder">
|
||||
再来一单
|
||||
</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.status === '配送中'">
|
||||
<view class="btn-group" v-if="item.order_status === 4">
|
||||
<button class="cancel-btn" @click="checkLogistics">
|
||||
查看物流
|
||||
</button>
|
||||
@ -76,7 +79,7 @@
|
||||
再来一单
|
||||
</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.status === '已完成'">
|
||||
<view class="btn-group" v-if="item.order_status === 5">
|
||||
<button class="cancel-btn" @click="orderEvaluate">
|
||||
服务评价
|
||||
</button>
|
||||
@ -85,7 +88,7 @@
|
||||
再来一单
|
||||
</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.status === '退款中'">
|
||||
<view class="btn-group" v-if="item.order_status === 7">
|
||||
<button class="pay-btn" @click="cancelOrder">
|
||||
再来一单
|
||||
</button>
|
||||
@ -100,7 +103,8 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { picUrl, NavgateTo } from "../../../utils";
|
||||
import { picUrl, NavgateTo, request } from "../../../utils";
|
||||
import { apiArr } from "../../../api/order"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -113,91 +117,13 @@ export default {
|
||||
{ category_name: "已完成" },
|
||||
],
|
||||
selectedTab: 0,
|
||||
orderData: [
|
||||
{
|
||||
createTime: "2025-07-15 23:23:23",
|
||||
status: "待付款",
|
||||
goodsList: [
|
||||
{ image: "http://localhost:8080/order_index1.png" },
|
||||
{ image: "http://localhost:8080/order_index2.png" },
|
||||
{ image: "http://localhost:8080/order_index3.png" },
|
||||
{ image: "http://localhost:8080/order_index4.png" },
|
||||
{ image: "http://localhost:8080/order_index5.png" },
|
||||
],
|
||||
totalCount: 1,
|
||||
totalPrice: "¥4704.00",
|
||||
},
|
||||
{
|
||||
createTime: "2025-07-15 23:23:23",
|
||||
status: "待发货",
|
||||
goodsList: [
|
||||
{ image: "http://localhost:8080/order_index1.png" },
|
||||
{ image: "http://localhost:8080/order_index2.png" },
|
||||
{ image: "http://localhost:8080/order_index3.png" },
|
||||
{ image: "http://localhost:8080/order_index4.png" },
|
||||
{ image: "http://localhost:8080/order_index5.png" },
|
||||
],
|
||||
totalCount: 2,
|
||||
totalPrice: "¥4704.00",
|
||||
},
|
||||
{
|
||||
createTime: "2025-07-15 23:23:23",
|
||||
status: "已取消",
|
||||
goodsList: [
|
||||
{ image: "http://localhost:8080/order_index1.png" },
|
||||
{ image: "http://localhost:8080/order_index2.png" },
|
||||
{ image: "http://localhost:8080/order_index3.png" },
|
||||
{ image: "http://localhost:8080/order_index4.png" },
|
||||
{ image: "http://localhost:8080/order_index5.png" },
|
||||
],
|
||||
totalCount: 3,
|
||||
totalPrice: "¥4704.00",
|
||||
},
|
||||
{
|
||||
createTime: "2025-07-15 23:23:23",
|
||||
status: "配送中",
|
||||
goodsList: [
|
||||
{ image: "http://localhost:8080/order_index1.png" },
|
||||
{ image: "http://localhost:8080/order_index2.png" },
|
||||
{ image: "http://localhost:8080/order_index3.png" },
|
||||
{ image: "http://localhost:8080/order_index4.png" },
|
||||
{ image: "http://localhost:8080/order_index5.png" },
|
||||
],
|
||||
totalCount: 2,
|
||||
totalPrice: "¥4704.00",
|
||||
},
|
||||
{
|
||||
createTime: "2025-07-15 23:23:23",
|
||||
status: "已完成",
|
||||
goodsList: [
|
||||
{ image: "http://localhost:8080/order_index1.png" },
|
||||
{ image: "http://localhost:8080/order_index2.png" },
|
||||
{ image: "http://localhost:8080/order_index3.png" },
|
||||
{ image: "http://localhost:8080/order_index4.png" },
|
||||
{ image: "http://localhost:8080/order_index5.png" },
|
||||
],
|
||||
totalCount: 3,
|
||||
totalPrice: "¥4704.00",
|
||||
},
|
||||
{
|
||||
createTime: "2025-07-15 23:23:23",
|
||||
status: "退款中",
|
||||
goodsList: [
|
||||
{ image: "http://localhost:8080/order_index1.png" },
|
||||
{ image: "http://localhost:8080/order_index2.png" },
|
||||
{ image: "http://localhost:8080/order_index3.png" },
|
||||
{ image: "http://localhost:8080/order_index4.png" },
|
||||
{ image: "http://localhost:8080/order_index5.png" },
|
||||
],
|
||||
totalCount: 3,
|
||||
totalPrice: "¥4704.00",
|
||||
},
|
||||
],
|
||||
orderData:[],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectTab(index, item) {
|
||||
this.selectedTab = index;
|
||||
this.getOrderList()
|
||||
},
|
||||
cancelOrder() {
|
||||
// 取消订单逻辑
|
||||
@ -214,8 +140,8 @@ export default {
|
||||
goToPay() {
|
||||
console.log("🚀 ~ goToPay ~ goToPay:", "去支付...");
|
||||
},
|
||||
toDetails(status) {
|
||||
NavgateTo(`/packages/myOrders/orderDetails/index?status=${status}`);
|
||||
toDetails(order_status) {
|
||||
NavgateTo(`/packages/myOrders/orderDetails/index?order_status=${order_status}`);
|
||||
},
|
||||
|
||||
checkLogistics() {
|
||||
@ -224,8 +150,56 @@ export default {
|
||||
|
||||
orderEvaluate(){
|
||||
NavgateTo(`/packages/myOrders/orderEvaluate/index`);
|
||||
},
|
||||
|
||||
getOrderStatus(order_status){
|
||||
switch(order_status){
|
||||
case 1:
|
||||
return '待付款'
|
||||
case 2:
|
||||
return '支付中'
|
||||
case 3:
|
||||
return '待发货'
|
||||
case 4:
|
||||
return '配送中'
|
||||
case 5:
|
||||
return '已完成'
|
||||
case 6:
|
||||
return '已取消'
|
||||
case 7:
|
||||
return '退款中'
|
||||
case 8:
|
||||
return '已退款'
|
||||
}
|
||||
},
|
||||
|
||||
getOrderList(){
|
||||
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;
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.getOrderList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
|
||||
182
pages/test.vue
182
pages/test.vue
@ -1,92 +1,92 @@
|
||||
<template>
|
||||
<div class="animation-container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||||
<img :src="spriteImage" :style="spriteStyle" alt="Animation sprite" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SpriteAnimation',
|
||||
data() {
|
||||
return {
|
||||
frame: 1, // 当前帧数 (1-60)
|
||||
type: '外', // 动画类型 ('内'或'外')
|
||||
running: false, // 是否正在执行动画
|
||||
timer: null, // 动画定时器
|
||||
spriteImage: 'http://192.168.0.172:5500/test1.png' // 示例base64图片
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
spriteStyle() {
|
||||
return {
|
||||
position: 'absolute',
|
||||
top: `-${(this.frame - 1) * 120}px`,
|
||||
left: '0px',
|
||||
width: '100%',
|
||||
height: 'auto'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearAnimationTimer() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
startAnimation() {
|
||||
this.clearAnimationTimer()
|
||||
this.running = true
|
||||
|
||||
const targetFrame = this.type === '内' ? 60 : 1
|
||||
const step = this.type === '内' ? 1 : -1
|
||||
const frameDuration = 2000 / 60 // 2秒完成60帧动画
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.frame += step
|
||||
|
||||
if ((step > 0 && this.frame >= targetFrame) ||
|
||||
(step < 0 && this.frame <= targetFrame)) {
|
||||
this.frame = targetFrame
|
||||
this.clearAnimationTimer()
|
||||
this.running = false
|
||||
this.checkAutoReverse()
|
||||
}
|
||||
}, frameDuration)
|
||||
},
|
||||
handleMouseEnter() {
|
||||
this.type = '内'
|
||||
if (!this.running) this.startAnimation()
|
||||
},
|
||||
handleMouseLeave() {
|
||||
this.type = '外'
|
||||
if (!this.running) this.startAnimation()
|
||||
},
|
||||
checkAutoReverse() {
|
||||
if (this.type === '外' && this.frame === 60) {
|
||||
this.type = '内'
|
||||
this.startAnimation()
|
||||
} else if (this.type === '内' && this.frame === 1) {
|
||||
this.type = '外'
|
||||
this.startAnimation()
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.clearAnimationTimer()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.animation-container {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
border: 1px solid pink;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
left: 20%;
|
||||
top: 200px;
|
||||
}
|
||||
<template>
|
||||
<div class="animation-container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||||
<img :src="spriteImage" :style="spriteStyle" alt="Animation sprite" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SpriteAnimation',
|
||||
data() {
|
||||
return {
|
||||
frame: 1, // 当前帧数 (1-60)
|
||||
type: '外', // 动画类型 ('内'或'外')
|
||||
running: false, // 是否正在执行动画
|
||||
timer: null, // 动画定时器
|
||||
spriteImage: 'http://192.168.0.172:5500/test1.png' // 示例base64图片
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
spriteStyle() {
|
||||
return {
|
||||
position: 'absolute',
|
||||
top: `-${(this.frame - 1) * 120}px`,
|
||||
left: '0px',
|
||||
width: '100%',
|
||||
height: 'auto'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearAnimationTimer() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
startAnimation() {
|
||||
this.clearAnimationTimer()
|
||||
this.running = true
|
||||
|
||||
const targetFrame = this.type === '内' ? 60 : 1
|
||||
const step = this.type === '内' ? 1 : -1
|
||||
const frameDuration = 2000 / 60 // 2秒完成60帧动画
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.frame += step
|
||||
|
||||
if ((step > 0 && this.frame >= targetFrame) ||
|
||||
(step < 0 && this.frame <= targetFrame)) {
|
||||
this.frame = targetFrame
|
||||
this.clearAnimationTimer()
|
||||
this.running = false
|
||||
this.checkAutoReverse()
|
||||
}
|
||||
}, frameDuration)
|
||||
},
|
||||
handleMouseEnter() {
|
||||
this.type = '内'
|
||||
if (!this.running) this.startAnimation()
|
||||
},
|
||||
handleMouseLeave() {
|
||||
this.type = '外'
|
||||
if (!this.running) this.startAnimation()
|
||||
},
|
||||
checkAutoReverse() {
|
||||
if (this.type === '外' && this.frame === 60) {
|
||||
this.type = '内'
|
||||
this.startAnimation()
|
||||
} else if (this.type === '内' && this.frame === 1) {
|
||||
this.type = '外'
|
||||
this.startAnimation()
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.clearAnimationTimer()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.animation-container {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
border: 1px solid pink;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
left: 20%;
|
||||
top: 200px;
|
||||
}
|
||||
</style>
|
||||
@ -8,15 +8,15 @@
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "packages/shop/goods/index",
|
||||
"pathName": "packages/shop/goods/index",
|
||||
"query": "id=30",
|
||||
"name": "packages/shop/address/index",
|
||||
"pathName": "packages/shop/address/index",
|
||||
"query": "",
|
||||
"scene": null,
|
||||
"launchMode": "default"
|
||||
},
|
||||
{
|
||||
"name": "packages/shop/shopCar/index",
|
||||
"pathName": "packages/shop/shopCar/index",
|
||||
"name": "packages/shop/addAddress/index",
|
||||
"pathName": "packages/shop/addAddress/index",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user