charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

增加新模块

Browse Source
This commit is contained in:
何江明
2025-03-20 08:46:07 +08:00
parent 15014e22aa
commit 2ae62b59ed
1729 changed files with 94700 additions and 4232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/mine_order/mine_order.vue
+470
View File
@@ -0,0 +1,470 @@
<template>
<view class="order_warp">
<view class="order_header">
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpLeft"></up-image>
<up-search shape="round" bgColor="#FFFFFFFF" :showAction="false" @search="searchFun"></up-search>
</view>
<view class="order_type_title">
<view
:class="type === item.id ? 'order_type_title_item order_type_title_item_sel':'order_type_title_item'"
v-for="item in orderTypeList"
@click="checkType(item)"
:key="item.id"
>
{{item.title}}
</view>
</view>
<view>
<view v-if="orderList && orderList.length!==0" class="order_list_warp">
<view class="order_item" v-for="item in orderList" :key="item.id">
<!-- 头部 -->
<view class="order_item_header">
<view class="order_item_header_left">
<up-image :src="item.url" width="22" height="22" bgColor="#f1f6ff00"></up-image>
<view class="order_product_title">{{item.name}}</view>
</view>
<!-- 除开待付款 -->
<view
v-if="item.status !== 1"
class="order_item_header_right"
:style="{'color': ORDER_STATUS_CSS[item.status]}">
{{getValue(ORDER_STATUS,item.status)}}
</view>
<!-- 待付款 -->
<view v-else class="order_item_header_right order_right_due">
<view class="order_right_due_msg">等待付款</view>
<view class="order_right_due_time">{{item.paymentTime}}分钟</view>
</view>
</view>
<!-- 产品详情 -->
<view class="order_item_content">
<view v-for="pItem in item.product" :key="pItem.id" class="content_item">
<up-image :src="pItem.url" width="80" height="80" bgColor="#f1f6ff00"></up-image>
<view class="content_info">
<view class="content_info_title">{{pItem.title}}</view>
<view class="content_info_tag">{{pItem.tag.join(" ")}}</view>
<view>
<text class="content_info_description" v-for="dItem in pItem.description">
{{dItem}}
</text>
</view>
</view>
<view class="content_right">
<view class="content_right_total">￥{{pItem.total}}</view>
<view class="content_right_quantity">x{{pItem.quantity}}</view>
</view>
</view>
</view>
<!-- 汇总 -->
<view class="order_item_collect">
<view class="collect_msg">共1件,合计￥3599</view>
<view class="collect_operate">
<view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.UNSHIPPED" @click="checkCancel(true)">取消订单</view>
<view class="operate_comm operate_but_2" v-if="item.status === ORDER_TYPE.UNPAID" @click="jumpOrderInfo">去付款</view>
<view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.COMPLETED">申请退款</view>
<view class="operate_comm operate_but_2" v-if="item.status === ORDER_TYPE.NOT_RECEIVE">确认收货</view>
<view class="operate_comm operate_but_3" v-if="item.status === ORDER_TYPE.UNSHIPPED">提醒发货</view>
<view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.COMPLETED">申请售后</view>
<view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.AFTER_SALE">查看售后</view>
<view class="operate_comm operate_but_1" v-if="[ORDER_TYPE.COMPLETED].includes(item.status)">删除记录</view>
<view class="operate_comm operate_but_3" v-if="[ORDER_TYPE.COMPLETED,ORDER_TYPE.CANCELED].includes(item.status)">再次购买</view>
</view>
</view>
</view>
</view>
<view v-else class="not_order_warp">
<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
<view class="not_order_msg_warp">暂无相关订单</view>
</view>
</view>
<up-popup v-model:show="cancelShow" :round="10" :closeOnClickOverlay="false">
<view class="cancel_show_warp">
<view class="cancel_show_title_warp">
<view>取消订单</view>
<view class="cancel_show_title_icon" @click="checkCancel(false)"><up-icon name="close-circle" color="#9e9e9e" size="20"></up-icon></view>
</view>
<view class="cancel_show_msg_warp">
<view>温馨提示：</view>
<view>1.限时特价、预约资格等购买优惠可能一并取消</view>
<view>2.订单一旦取消，支付优惠一并取消，可能无法恢复</view>
</view>
<view class="cancel_show_reason_warp">
<view class="reason_title">请选择取消订单的原因（必选）：</view>
<up-radio-group
v-model="cancelForm.reason"
placement="column"
>
<up-radio
:customStyle="{marginBottom: '8px'}"
v-for="(item, index) in reasonList"
:key="index"
:label="item.name"
:name="item.name"
>
</up-radio>
</up-radio-group>
<up-textarea v-model="cancelForm.remark"></up-textarea>
</view>
</view>
<view class="but_border_warp"></view>
<view class="cancel_show_but">
<view class="add_but" @click="cancelOk">提交</view>
</view>
</up-popup>
<up-toast ref="uToastRef"></up-toast>
</view>
</template>
<script>
import { ORDER_TYPE,ORDER_STATUS,getValue } from '@/utils/enumUtils.js';
import { ORDER_STATUS_CSS } from '@/utils/enumCssUtils.js';
export default {
computed: {
ORDER_TYPE() {
return ORDER_TYPE;
},
ORDER_STATUS() {
return ORDER_STATUS;
},
ORDER_STATUS_CSS() {
return ORDER_STATUS_CSS;
}
},
data() {
return {
type:0,// 选中的类型
orderTypeList:[
{
id:0,
title:"全部",
},
{
id:ORDER_TYPE.UNPAID,
title:"待支付",
},{
id:ORDER_TYPE.UNSHIPPED,
title:"待发货",
},{
id:ORDER_TYPE.NOT_RECEIVE,
title:"待收货",
},{
id:ORDER_TYPE.AFTER_SALE,
title:"退款售后",
},
],
form:{
search:null,//搜索
},
orderList:[
{
id:1,
url:'/static/common/order_defal.png',
name:"哈希店铺",
status:1,
paymentTime:29,// 剩余付款时间，单位：分钟
product:[
{
id:1,
url:'/static/common/product_def.png',
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
description:['双开门','大容量'],
tag:['7天无理由退货','退货险'],
quantity:1,
total:3599,
}
],
productTotal:3599,
},
{
id:2,
url:'/static/common/order_defal.png',
name:"哈希店铺",
status:2,
product:[
{
id:1,
url:'/static/common/product_def.png',
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
description:['双开门','大容量'],
tag:['7天无理由退货','退货险'],
quantity:1,
total:3599,
},{
id:2,
url:'/static/common/product_def.png',
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
description:['双开门','大容量'],
tag:['7天无理由退货','退货险'],
quantity:1,
total:3599,
}
],
productTotal:7099.88,
},{
id:3,
url:'/static/common/order_defal.png',
name:"哈希店铺",
status:4,
product:[
{
id:1,
url:'/static/common/product_def.png',
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
description:['双开门','大容量'],
tag:['7天无理由退货','退货险'],
quantity:1,
total:3599,
}
],
productTotal:3599,
},{
id:4,
url:'/static/common/order_defal.png',
name:"哈希店铺",
status:5,
product:[
{
id:1,
url:'/static/common/product_def.png',
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
description:['双开门','大容量'],
tag:['7天无理由退货','退货险'],
quantity:1,
total:3599,
}
],
productTotal:3599,
},{
id:6,
url:'/static/common/order_defal.png',
name:"哈希店铺",
status:6,
product:[
{
id:1,
url:'/static/common/product_def.png',
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
description:['双开门','大容量'],
tag:['7天无理由退货','退货险'],
quantity:1,
total:3599,
}
],
productTotal:3599,
},
],
cancelShow:false,// 取消订单
reasonList:[
{
id:1,
name:'地址信息填写错误',
},{
id:2,
name:'不想要了',
},{
id:3,
name:'商品错选/多选',
},{
id:4,
name:'没用/少用/错用优惠券',
},{
id:5,
name:'商品降价',
},{
id:6,
name:'其他原因',
},
],
cancelForm:{
reason:null,
remark:null,
},
}
},
onLoad(options) {
const type = options.type;
this.type = type ? parseInt(type,10) : 0;
},
methods: {
getValue,
jumpLeft(){
uni.switchTab({
url: '/pages/mine/mine',
})
},
searchFun(val){
console.log("searchFun",val);
},
checkType(item){
this.type = item.id;
},
jumpOrderInfo(){
uni.navigateTo({
url:"/pages/mine_order_info/mine_order_info?type="+this.type,
})
},
checkCancel(status){
this.cancelShow = status;
if(!status){
this.cancelForm={
reason:null,
remark:null,
}
}
},
/**
* 确认取消
*/
cancelOk(){
const params={
...this.cancelForm,
}
if(!params.reason){
this.$refs.uToastRef.show({
type: 'error',
message: "请选择取消原因",
});
return;
}
console.log("params",params);
this.checkCancel(false);
}
}
}
</script>
<style lang="scss" scoped>
.order_warp{
height: calc(100vh - 130rpx);
background-color: $app-bj;
padding: 100rpx 30rpx 30rpx;
overflow-y: hidden;
}
.order_header{
display: flex;
align-items: center;
}
.order_type_title{
display: flex;
margin-top: 30rpx;
align-items: center;
.order_type_title_item{
margin-right: 40rpx;
font-weight: 500;
font-size: 30rpx;
color: #222222;
}
.order_type_title_item_sel{
font-weight: 800;
font-size: 36rpx;
color: $app-bt-bj;
}
}
.order_list_warp{
height: calc(100vh - 270rpx);
overflow-y: auto;
}
.order_item{
background: #FFFFFF;
border-radius: 20rpx;
padding: 30rpx 20rpx;
margin-top: 20rpx;
.order_item_header{
display: flex;
justify-content: space-between;
align-items: center;
}
.order_product_title{
font-weight: bold;
font-size: 28rpx;
color: #1A1A1A;
margin-left: 10rpx;
}
.order_item_header_left{
display: flex;
align-items: center;
}
.order_item_header_right{
font-weight: 500;
font-size: 22rpx;
}
.order_right_due{
display: flex;
background: #FFF9F2;
border-radius: 19rpx 22rpx 22rpx 19rpx;
}
.order_right_due_msg{
background: $app-bt-bj;
border-radius: 22rpx 0rpx 12rpx 22rpx;
color: #FFFFFF;
padding: 10rpx 20rpx;
}
.order_right_due_time{
font-weight: bold;
font-size: 24rpx;
color: $app-bt-bj;
padding: 10rpx 20rpx;
}
.order_item_collect{
margin-top: 20rpx;
.collect_msg{
font-weight: 500;
font-size: 24rpx;
color: #666666;
text-align: right;
}
}
}
.cancel_show_warp{
padding: 20rpx;
.cancel_show_title_warp{
position: relative;
font-weight: bold;
font-size: 36rpx;
color: #222222;
line-height: 48rpx;
text-align: center;
}
.cancel_show_title_icon{
position: absolute;
right: 14rpx;
top: 6rpx;
}
.cancel_show_msg_warp{
background: #F8F8F8;
padding: 30rpx;
font-weight: 500;
font-size: 26rpx;
color: #222222;
line-height: 48rpx;
margin-top: 20rpx;
}
.cancel_show_reason_warp{
margin-top: 20rpx;
.reason_title{
font-weight: bold;
font-size: 32rpx;
color: #222222;
line-height: 36rpx;
margin-bottom: 20rpx;
}
}
}
.but_border_warp{
border: 1rpx solid #eeeeee94;
margin: 30rpx 0;
}
.cancel_show_but{
display: flex;
justify-content: center;
}
.add_but {
position: initial;
width: 94%;
}
</style>