Skip to content

P
pptist
Commit 84cd5807 authored by 罗超's avatar 罗超
Browse files
Options

完成订单列表

parent f488ceb4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 340 additions and 148 deletions
src/assets/styles/common.css
View file @ 84cd5807
......@@ -11,7 +11,7 @@ page {
font-family: "alifont";src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/L514hmGnjb2E.woff2") format("woff2"),
url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/idFuggDsYh7v.woff") format("woff");
font-display: swap;
}
}
@font-face {
font-family: "pingfangr";
......@@ -266,6 +266,15 @@ page {
padding-left: 30px;
padding-right: 30px;
}
.q-mb-xl{
margin-bottom: 30px;
}
.bg-info{
background-color: #f6f7f9;
}
.q-pb-xl{
margin-bottom: 30px;
}
.q-pa-xs{
padding: 5px;
}
......@@ -484,7 +493,9 @@ page {
.q-mb-lg{
margin-bottom:20px
}
.inline .el-statistic__content{
line-height: 0;
}
.text-weight-bold{
font-weight: bold;
}
......@@ -520,8 +531,8 @@ page {
.window-height{
height: 100vh;
}
.text-nategive{
color: #FF4B86;
.text-negative{
color: #FF4B86 !important;
}
.color0{
color: #000;
......
src/assets/styles/global.scss
View file @ 84cd5807
......@@ -138,9 +138,9 @@ textarea {
:root {
--el-color-primary: #564bec !important;
--el-color-primary-light-3: #564bec !important;
--el-color-primary-light-5: #e68d79 !important;
--el-color-primary-light-7: #f8a491 !important;
--el-color-primary-light-8: #fdcec4 !important;
--el-color-primary-light-9: #ffebe6 !important;
--el-color-primary-dark-2: #d43410 !important;
--el-color-primary-light-5: #6c63ec !important;
--el-color-primary-light-7: #8c85e6 !important;
--el-color-primary-light-8: #c7c5e9 !important;
--el-color-primary-light-9: #dedcff !important;
--el-color-primary-dark-2: #281ae6 !important;
}
\ No newline at end of file
src/components/User/UserCard.vue
View file @ 84cd5807
......@@ -88,7 +88,7 @@
/></el-icon>
<template #dropdown>
<div class="MarketPopoverMore row wrap pointer">
<div class="column" v-for="(item, index) in moreList">
<div class="column" v-for="(item, index) in moreList" @click="forward(item.Url)">
<div>
<img :src="item.icon" width="34" height="34" />
</div>
......@@ -104,6 +104,7 @@ import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import {USER_DEFAULT_HEADER} from '@/configs/customer'
import { openNewBlank } from "@/utils/common";
const props = defineProps({
size: {
type: Number,
......@@ -120,13 +121,19 @@ const format = (percentage: number) => {
const moreList = [
{ icon: require("@/assets/img/homeMore0.png"), Name: "添加到桌面" },
{ icon: require("@/assets/img/homeMore1.png"), Name: "关注公众号" },
{ icon: require("@/assets/img/homeMore2.png"), Name: "我的订单" },
{ icon: require("@/assets/img/homeMore2.png"), Name: "我的订单", Url:'/u/order' },
{ icon: require("@/assets/img/homeMore3.png"), Name: "意见反馈" },
];
const forwardUserCenter = ()=>{
router.push('/u')
}
const forward = (url:string|undefined)=>{
if(url){
if(url.includes('http://')||url.includes('https://')) openNewBlank(url)
else router.push(url)
}
}
const loginOutHandler = ()=>{
useUser.setUserLoginOut()
}
......
src/router/router.ts
View file @ 84cd5807
......@@ -186,6 +186,13 @@ const routes: RouteRecordRaw[] = [
title:'我的订单/发票'
}
},
{
path: '/u/order/:id',
component: () => import('@/views/UserCenter/OrderDetail.vue'),
meta:{
title:'订单详情'
}
},
{
path: '/u/setting',
component: () => import('@/views/UserCenter/Setting.vue'),
......
src/services/OrderService.ts
View file @ 84cd5807
......@@ -8,9 +8,14 @@ class OrderService{
return Api.Post("ppt_SetPPTOrder",msg)
}
static async GetOrders():Promise<HttpResponse>{
let msg = {Status: 0, is_show: 0, RB_Group_Id: 2}
return Api.Post("admin_get_BranchGetList",msg)
static async GetOrders(params:any):Promise<HttpResponse>{
let msg = params
return Api.Post("ppt_GetPPTOrderPage",msg)
}
static async GetOrder(orderid:string):Promise<HttpResponse>{
let msg = {orderid}
return Api.Post("ppt_GetPPTOrderDetails",msg)
}
}
export default OrderService;
\ No newline at end of file
src/views/Auth/Login.vue
View file @ 84cd5807
......@@ -66,9 +66,7 @@
<div style="font-size: 36px; " class="text-dark">已登录</div>
<div class="text-info text-small">你的创作空间</div>
<div class="q-py-xl flex-center items-center column">
<el-avatar :size="100" :scr="userInfo.photo">
{{ userInfo.photo && userInfo.photo.includes('http') ? '' :userInfo.nickname[0] }}
</el-avatar>
<el-avatar :size="100" shape="square" class="bg-transparent" :src="userInfo.photo && userInfo.photo.includes('http') ? userInfo.photo:USER_DEFAULT_HEADER"></el-avatar>
<div class="q-mt-md text-weight-bold" style="font-size: 18px;">{{ userInfo.nickname }}</div>
<div class="q-mt-md text-small text-info">{{ userInfo.company }}</div>
<div class="q-mt-lg row items-center">
......@@ -83,6 +81,7 @@
import { useUserStore } from '@/store/user';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import {USER_DEFAULT_HEADER} from '@/configs/customer'
interface RuleForm {
account: string
password: string
......
src/views/Company/Product.vue
View file @ 84cd5807
......@@ -11,7 +11,7 @@
</div>
<div style="margin-top: 50px;" class="row" v-loding="loading">
<div class="product-item" :class="{ active: choosenVersion && x.priceid == choosenVersion.priceid }" v-for="(x, i) in products" @click="choosenVersionHandler(x)" >
<div class="product-item" :class="{ active: choosenVersion && x.priceid == choosenVersion.priceid }" v-for="(x, i) in products" :key="i" @click="choosenVersionHandler(x)" >
<div class="rounded row items-center" style="height:90px;padding: 0 25px;" :style="{backgroundColor:colors[i]}">
<span class="text-white text-weight-bold col" style="font-size: 24px;">{{ x.vipname }}</span>
<img :src="imgs[i]" style="width:63px;">
......@@ -105,6 +105,7 @@ import { ref } from "vue";
import { ElMessage } from "element-plus";
import { openCustomerService } from "@/utils/common";
import WePay from '@/components/Pay/WePay.vue'
import router from "@/router";
const loading = ref(false);
const products = ref<any[]>();
......
src/views/UserCenter/Layout.vue
View file @ 84cd5807
......@@ -22,7 +22,7 @@
</el-menu>
<el-button class="full-width pingfangr text-weight-bolder" @click="forwardSpace" style="font-size: 14px !important;" icon="arrow-left">返回工作台</el-button>
</div>
<el-scrollbar class="col full-height user-center-body" wrap-style="overflow-x:unset;">
<el-scrollbar class="col full-height user-center-body" wrap-style="overflow-x:unset;" view-style="padding-bottom:30px;">
<router-view />
</el-scrollbar>
</div>
......@@ -63,6 +63,6 @@ watch(() => router.currentRoute.value.path, (toPath) => {
}
.user-center-body {
padding: 20px 40px 40px 40px;
padding: 20px 40px 0px 40px;
}
</style>
src/views/UserCenter/Order.vue
View file @ 84cd5807
This diff is collapsed.
src/views/UserCenter/OrderDetail.vue 0 → 100644
View file @ 84cd5807
<template>
<div class="row items-center">
<IconLeft :size="18" class="q-mr-md cursor-pointer" @click="forwardOrder"></IconLeft>
<div class="text-weight-bold cursor-pointer" @click="forwardOrder">订单/发票</div>
</div>
<template v-if="order && !loading">
<div class="q-mt-xl q-pa-xl rounded bg-info">
<el-steps style="max-width: 100%;margin: 0 auto;" :active="3" align-center>
<el-step title="选择商品" description="" />
<el-step title="确认下单" description="" />
<el-step title="支付" description="" />
<el-step title="交易完成" description="" />
</el-steps>
<div class="q-mt-xl text-center text-weight-bold" style="font-size: 18px;">订单状态：待支付</div>
<div class="q-mt-md row items-center flex-center" style="font-size: 13px;">
<span>请在 </span>
<el-countdown title="" format="DD [天] HH:mm:ss" :value="countValue" value-style="font-size:13px;color:#f89c53;"
class="q-mx-md inline" />
<span> 内完成转账，超时订单自动取消</span>
</div>
<div class="row items-center flex-center q-mt-xl">
<el-button size="large">取消订单</el-button>
<el-button type="primary" size="large">去支付</el-button>
</div>
</div>
<div class="order-bar rounded row q-mt-xl">
<div class="item" style="width: 280px !important; min-width: 280px; text-align: left;">商品信息</div>
<div class="item col">时长</div>
<div class="item col">单价</div>
<div class="item col">数量</div>
<div class="item none-width">
<div style="background-color: rgba(0,0,0,.08);width:1px">&nbsp;</div>
</div>
<div class="item col">小计</div>
</div>
<div class="order-body q-mt-lg">
<div class="order-item rounded">
<div class="title">
<span>{{ order.create }}</span>
<span class="q-ml-md">{{ order.ordernum }}</span>
</div>
<div class="bg-white rounded row items-center">
<div class="item row items-center"
style="width: 280px !important; min-width: 280px; text-align: left;padding:24px;">
<img :src="order.cover" style="width:72px;" class="rounded">
<div class="q-ml-lg">{{ order.pricetypename }}_{{ order.vipname }}</div>
</div>
<div class="item col">{{ order.productname }}</div>
<div class="item col">¥{{ order.price.toFixed(2) }}</div>
<div class="item col">{{ order.use }}席位</div>
<div class="item none-width">
<div style="background-color: rgba(0,0,0,.08);width:1px;height:72px;">&nbsp;</div>
</div>
<div class="item col">
<div class="text-weight-bold q-mb-sm" style="font-size: 16px">¥{{ order.price.toFixed(2) }}</div>
</div>
</div>
</div>
</div>
<div class="q-mt-lg text-right">
<span style="font-size: 14px;">订单总金额：￥</span>
<span style="font-size: 18px" class="text-weight-bold text-dark">{{ order.price.toFixed(2) }}</span>
</div>
<div class="q-mt-lg text-right" v-if="order.status==2">
<span style="font-size: 14px;">实付总金额：￥</span>
<span style="font-size: 18px" class="text-weight-bold text-dark text-negative">{{ order.price.toFixed(2) }}</span>
</div>
</template>
<div v-if="loading" style="height: 200px;margin-top: 100px;" v-loading="loading"></div>
<div v-if="!order && !loading">
<el-empty class="q-ma-xl" description="暂无数据" />
</div>
</template>
<script lang="ts" setup>
import { ApiResult } from "@/configs/axios"
import OrderService from "@/services/OrderService"
import { ref } from "vue"
import { useRouter } from "vue-router"
const order = ref<any>()
const loading = ref(false)
const router = useRouter()
const countValue = ref(Date.now() + 1000 * 60 * 60 * 7)
const forwardOrder = (id: string) => {
router.push('/u/order')
}
const getOrder = async () => {
const orderid = router.currentRoute.value.params.id?.toString()
if (!orderid) return
loading.value = true
const response = await OrderService.GetOrder(orderid)
if (response.data.resultCode == ApiResult.SUCCESS) {
order.value = response.data.data
countValue.value = new Date(order.value.create.replaceAll('-','/')).getTime() + 1000 * 60 * 60 * 720
}
loading.value = false
}
getOrder()
</script>
<style scoped>
.order-bar {
background: #f6f7f9 !important;
}
.order-bar .item,
.order-body .order-item .item {
padding: 0 24px;
height: 42px;
line-height: 42px;
font-size: 14px;
color: gray;
text-align: right;
min-width: 108px;
}
.order-bar .item.none-width,
.order-body .order-item .item.none-width {
min-width: unset;
}
.order-body {}
.order-body .order-item {
background: #f6f7f9;
border: 1px solid rgba(0, 0, 0, .08);
font-size: 14px;
}
.order-body .order-item .title {
padding: 0 24px;
height: 45px;
line-height: 45px;
color: grey;
white-space: nowrap;
overflow: hidden;
}
.order-body .order-item .item {
height: auto;
line-height: 1;
color: #000;
white-space: nowrap;
overflow: hidden;
}
</style>
\ No newline at end of file
src/views/UserCenter/Setting.vue
View file @ 84cd5807
......@@ -2,7 +2,7 @@
<div class="user-setting">
<div class="row flex-center">
<el-upload drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" class="avatar-upload">
<el-avatar :size="72" :src="userInfo.photo && userInfo.photo.includes('http') ? userInfo.photo:USER_DEFAULT_HEADER" shape="square" :style="{ BackgroundColor: userTheme?.color }"></el-avatar>
<el-avatar :size="72" :src="userInfo.photo && userInfo.photo.includes('http') ? userInfo.photo:USER_DEFAULT_HEADER" shape="square" class="bg-transparent"></el-avatar>
<div class="after-overlayer">上传</div>
</el-upload>
</div>
......@@ -29,6 +29,36 @@
</div>
<el-button>立即绑定</el-button>
</div>
<div class="setting-item">
<div>
<div class="text-dark">微信</div>
<div class="">已绑定</div>
</div>
<el-button>解出绑定</el-button>
</div>
<div class="setting-item">
<div>
<div class="text-dark">QQ</div>
<div class="">绑定QQ后，可以通过QQ授权登录</div>
</div>
<el-button>立即绑定</el-button>
</div>
<div class="setting-item">
<div>
<div class="text-dark">密码</div>
<div class="">已设置</div>
</div>
<el-button>更换密码</el-button>
</div>
</div>
<div class="q-mt-lg setting-body rounded">
<div class="setting-item">
<div>
<div class="text-dark">推送内容</div>
<div class="">开启后，我们将会通过服务邮箱或微信公众号向你推送最新的功能更新与模板更新。</div>
</div>
<el-switch v-model="pushAdStatus" />
</div>
</div>
</div>
</template>
......@@ -45,6 +75,7 @@ const { userInfo } = storeToRefs(useUser)
const userTheme = useUser.getUserTheme
const isEditorNickname = ref(false)
const nicknameRef=ref<HTMLElement>()
const pushAdStatus = ref(false)
const editorNicknameHandler = (target:HTMLElement|undefined)=>{
isEditorNickname.value=true
......
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