lipenghui
/
qn-ai-pc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix:修改支付走马灯样式

dxj
杜贤金 1 year ago
parent
3e62a2c1d5
commit
b915cd60b2
8 changed files with 102 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 156
      src/components/AppRecharge/index.vue
  2. 16
      src/components/AppRoleDefault/index.vue
  3. 1
      src/components/AppUserInfo/index.vue
  4. 1
      src/store/moules/userStore/index.ts
  5. 2
      src/views/task/components/BasicTask/index.d.ts
  6. 2
      src/views/task/components/BasicTask/index.vue
  7. 2
      src/views/task/components/TaskList/index.d.ts
  8. 3
      src/views/task/components/TaskList/index.vue

156
src/components/AppRecharge/index.vue
Unescape View File

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue' import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import { Button, Carousel, Modal, QRCode, message } from 'ant-design-vue' import { Button, Carousel, Modal, QRCode, Spin, message } from 'ant-design-vue'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import type { GoodsData, Racharge } from './index.d' import type { GoodsData, Racharge } from './index.d'
import { getIsPay, goodsList, goodsType, payment } from '@/api/recharge/index' import { getIsPay, goodsList, goodsType, payment } from '@/api/recharge/index'
@ -13,6 +13,7 @@ import { RechargeEnum } from '@/enums/recharge'
const userStore = useUserStore() const userStore = useUserStore()
const rechargeStore = useRechargeStore() const rechargeStore = useRechargeStore()
const currentIndex = ref(3)
// 轮播的ref // 轮播的ref
const carouselRef = ref() const carouselRef = ref()
// 选项卡索引 // 选项卡索引
@ -23,6 +24,8 @@ const qrshow = ref<boolean>(false)
const tabs = ref<Racharge[]>([]) const tabs = ref<Racharge[]>([])
// 套餐列表 // 套餐列表
const goodslists = ref<GoodsData[]>([]) const goodslists = ref<GoodsData[]>([])
const isDataLoaded = ref(false)
// 支付路径 // 支付路径
const payData = ref<any>({ const payData = ref<any>({
orderCode: '', orderCode: '',
@ -40,14 +43,19 @@ function getType() {
// 套餐列表 // 套餐列表
function getgoodsList(type: string) { function getgoodsList(type: string) {
isDataLoaded.value = true
goodsList({ type }).then((res) => { goodsList({ type }).then((res) => {
goodslists.value = res goodslists.value = res
setTimeout(() => {
isDataLoaded.value = false
}, 300)
}) })
} }
// 选择选项卡 // 选择选项卡
function selectTab(index: number, key: string) { function selectTab(index: number, key: string) {
activeTab.value = index activeTab.value = index
currentIndex.value = 3
getgoodsList(key) getgoodsList(key)
} }
@ -78,7 +86,6 @@ function stopPolling() {
clearInterval(intervalId.value) clearInterval(intervalId.value)
intervalId.value = null intervalId.value = null
qrshow.value = false qrshow.value = false
userStore.getChatInfoFun() userStore.getChatInfoFun()
} }
} }
@ -111,11 +118,17 @@ function tabClass(index: number) {
// 走马灯向上 // 走马灯向上
function onPrevClick() { function onPrevClick() {
carouselRef.value.prev() if (currentIndex.value > 3) {
currentIndex.value--
carouselRef.value.prev()
}
} }
// 走马灯向下 // 走马灯向下
function onNextClick() { function onNextClick() {
carouselRef.value.next() if (currentIndex.value < goodslists.value.length) {
currentIndex.value++
carouselRef.value.next()
}
} }
// 数字分隔符 // 数字分隔符
@ -150,89 +163,92 @@ function separator(num: number | string) {
<div v-show="goodslists.length > 3" class="prev-button prev" @click="onPrevClick"> <div v-show="goodslists.length > 3" class="prev-button prev" @click="onPrevClick">
<LeftOutlined /> <LeftOutlined />
</div> </div>
<Carousel ref="carouselRef" arrows :dots="false" :autoplay="false" :slides-to-show="goodslists.length > 3 ? 3 : goodslists.length" :slides-to-scroll="1"> <Spin :spinning="isDataLoaded">
<div v-for="(item, index) in goodslists" :key="index" class="carouse-box"> <Carousel :key="activeTab" ref="carouselRef" arrows :dots="false" :infinite="false" :autoplay="false" :slides-to-show="goodslists.length > 3 ? 3 : goodslists.length" :slides-to-scroll="1">
<div class="carouse-item"> <div v-for="(item, index) in goodslists" :key="index" class="carouse-box">
<div class="dotnumbox"> <div class="carouse-item">
<div class="dotnum"> <div class="dotnumbox">
{{ item.giveNum }}点数 <div class="dotnum">
</div> {{ item.giveNum }}点数
<div class="discount">
限时折扣
</div>
</div>
<div class="deadline">
{{ item.title }}
</div>
<div class="equitiesbox">
<div class="equities">
<div class="left">
GPT3.5版本
</div> </div>
<div class="right"> <div class="discount">
{{ item.gpt35Num }}条 限时折扣
</div> </div>
</div> </div>
<div class="deadline">
{{ item.title }}
</div>
<div class="equitiesbox">
<div class="equities">
<div class="left">
GPT3.5版本
</div>
<div class="right">
{{ item.gpt35Num }}条
</div>
</div>
<div class="equities"> <div class="equities">
<div class="left"> <div class="left">
GPT4.0版本 GPT4.0版本
</div>
<div class="right">
{{ item.gpt40Num }}条
</div>
</div> </div>
<div class="right"> <div class="equities">
{{ item.gpt40Num }}条 <div class="left">
AI绘图
</div>
<div class="right">
{{ item.pictureNum }}幅
</div>
</div> </div>
</div> </div>
<div class="equities"> <div class="price">
<div class="left"> <div class="nowprice">
AI绘图 ¥{{ item.price }}
</div> </div>
<div class="right"> <div class="oldprice">
{{ item.pictureNum }}幅 ¥{{ item.costPrice }}
</div> </div>
</div> </div>
</div> <div class="payBtn">
<div class="price"> <Button class="customBtn" @click="handlePay(item.id)">
<div class="nowprice"> 立即充值
¥{{ item.price }} </Button>
</div> </div>
<div class="oldprice">
¥{{ item.costPrice }}
</div>
</div>
<div class="payBtn">
<Button class="customBtn" @click="handlePay(item.id)">
立即充值
</Button>
</div> </div>
</div> </div>
</Carousel>
<div v-show="goodslists.length > 3" class="next-button next" @click="onNextClick">
<RightOutlined />
</div> </div>
</Carousel> <div class="line">
<div v-show="goodslists.length > 3" class="next-button next" @click="onNextClick"> <div class="colorLine"></div>
<RightOutlined /> </div>
</div> <div class="broadcastBox">
<div class="line"> <div class="broadcast">
<div class="colorLine"></div> <div class="trumpet">
</div> <img :src="trumpet" alt="">
<div class="broadcastBox"> </div>
<div class="broadcast"> <div class="marquee">
<div class="trumpet"> <div class="content">
<img :src="trumpet" alt=""> <span>152****0062 在 2024/1/25开通了至尊礼遇卡！</span>
</div> <span>178****6455 在 2024/1/24开通了年套餐！</span>
<div class="marquee"> <span>151****2519 在 2024/1/23开通了日套餐！</span>
<div class="content"> <span>178****0062 在 2024/1/22开通了至尊礼遇卡！</span>
<span>152****0062 在 2024/1/25开通了至尊礼遇卡！</span> <span>178****6556 在 2024/1/21开通了年套餐！</span>
<span>178****6455 在 2024/1/24开通了年套餐！</span> <span>131****9871 在 2024/1/20开通了日套餐！</span>
<span>151****2519 在 2024/1/23开通了日套餐！</span> <span>198****2091 在 2024/1/19开通了至尊礼遇卡！</span>
<span>178****0062 在 2024/1/22开通了至尊礼遇卡！</span> <span>138****4848 在 2024/1/18开通了年套餐！</span>
<span>178****6556 在 2024/1/21开通了年套餐！</span> <span>195****2519 在 2024/1/17开通了日套餐！</span>
<span>131****9871 在 2024/1/20开通了日套餐！</span> </div>
<span>198****2091 在 2024/1/19开通了至尊礼遇卡！</span>
<span>138****4848 在 2024/1/18开通了年套餐！</span>
<span>195****2519 在 2024/1/17开通了日套餐！</span>
</div> </div>
</div> </div>
</div> </div>
</div> </Spin>
</div> </div>
<div v-else class="extreme-box"> <div v-else class="extreme-box">
<div class="extreme"> <div class="extreme">

16
src/components/AppRoleDefault/index.vue
Unescape View File

@ -14,7 +14,6 @@ const typeIndex = ref(0)
function getRoleData() { function getRoleData() {
getRole(1).then((res) => { getRole(1).then((res) => {
roleList.value = res roleList.value = res
console.log('角色', res)
}) })
} }
getRoleData() getRoleData()
@ -22,7 +21,6 @@ getRoleData()
function getAppData() { function getAppData() {
getAppList().then((res) => { getAppList().then((res) => {
application.value = res application.value = res
console.log('应用', res)
}) })
} }
@ -134,11 +132,13 @@ function handleChange(index: number) {
height: 100px; height: 100px;
margin-bottom: 35px; margin-bottom: 35px;
background: linear-gradient(169deg, #edf3ff 0%, #f7f9ff 100%); background: linear-gradient(169deg, #edf3ff 0%, #f7f9ff 100%);
box-shadow: 1px 4px 10px 0px rgba(194, 205, 235, 0.49); // box-shadow: 1px 4px 10px 0px rgba(194, 205, 235, 0.49);
border-radius: 10px; border-radius: 10px;
transition: all 0.3s linear 0s;
cursor: pointer; cursor: pointer;
&:hover {
box-shadow: 1px 4px 10px 0px rgba(194, 205, 235, 0.49);
}
.top { .top {
display: flex; display: flex;
position: relative; position: relative;
@ -157,7 +157,7 @@ function handleChange(index: number) {
right: 0px; right: 0px;
width: 4px; width: 4px;
height: 30px; height: 30px;
background: linear-gradient(131deg, #226aff 0%, #3fc6ff 100%); background: #4670e3;
font-size: 0; font-size: 0;
border-radius: 100px 0px 0px 100px; border-radius: 100px 0px 0px 100px;
transition: width 0.3s linear 0s; transition: width 0.3s linear 0s;
@ -199,8 +199,8 @@ function handleChange(index: number) {
} }
} }
&:hover .exchange { &:hover .exchange {
width: 50px; width: 70px;
background: linear-gradient(131deg, #226aff 0%, #3fc6ff 100%); background: #4670e3;
border-radius: 100px 0px 0px 100px; border-radius: 100px 0px 0px 100px;
text-align: center; text-align: center;
color: white; color: white;

1
src/components/AppUserInfo/index.vue
Unescape View File

@ -9,6 +9,7 @@ import { useRechargeStore } from '@/store/moules/rechareStore'
const rechargeStore = useRechargeStore() const rechargeStore = useRechargeStore()
const userStore = useUserStore() const userStore = useUserStore()
const info = computed(() => userStore.getChatInfo) const info = computed(() => userStore.getChatInfo)
function handleRecharge() { function handleRecharge() {

1
src/store/moules/userStore/index.ts
Unescape View File

@ -55,6 +55,7 @@ export const useUserStore = defineStore('useUserStore', {
getChatInfoFun() { getChatInfoFun() {
chatInfo().then((res) => { chatInfo().then((res) => {
console.log(res, 'sotre')
this.setChatInfo(crypto.encryptAES(JSON.stringify(res), crypto.localKey)) this.setChatInfo(crypto.encryptAES(JSON.stringify(res), crypto.localKey))
}) })
}, },

2
src/views/task/components/BasicTask/index.d.ts vendored
Unescape View File

@ -12,5 +12,7 @@ interface TaskType {
id: string id: string
receiveCount: number receiveCount: number
finishEnableCount: number finishEnableCount: number
finishCount: number
finishEnableMaxCount: number
} }
export { SignType, TaskType } export { SignType, TaskType }

2
src/views/task/components/BasicTask/index.vue
Unescape View File

@ -157,7 +157,7 @@ function handleInvite() {
已获得{{ item.points }}点数 已获得{{ item.points }}点数
</div> </div>
<div v-show="item.status !== 2" class="unfinished"> <div v-show="item.status !== 2" class="unfinished">
{{ item.receiveCount }}/{{ item.finishEnableCount }} {{ item.finishCount }}/{{ item.finishEnableMaxCount }}
</div> </div>
</div> </div>
<div class="earn-list-right"> <div class="earn-list-right">

2
src/views/task/components/TaskList/index.d.ts vendored
Unescape View File

@ -5,4 +5,6 @@ export interface TaskType {
id: string id: string
receiveCount: number receiveCount: number
finishEnableCount: number finishEnableCount: number
finishCount: number
finishEnableMaxCount: number
} }

3
src/views/task/components/TaskList/index.vue
Unescape View File

@ -28,7 +28,6 @@ const props = defineProps({
}) })
const emit = defineEmits(['updateList']) const emit = defineEmits(['updateList'])
const reactiveList: ComputedRef<TaskType[]> = computed(() => props.list) const reactiveList: ComputedRef<TaskType[]> = computed(() => props.list)
console.log(reactiveList, 'reactiveList')
const userStore = useUserStore() const userStore = useUserStore()
// 领取积分 // 领取积分
@ -84,7 +83,7 @@ const dynamicStyle = computed(() => {
已获得{{ item.points }}点数 已获得{{ item.points }}点数
</div> </div>
<div v-show="item.status !== 2" class="unfinished"> <div v-show="item.status !== 2" class="unfinished">
{{ item.receiveCount }}/{{ item.finishEnableCount }} {{ item.finishCount }}/{{ item.finishEnableMaxCount }}
</div> </div>
</div> </div>
<div class="earn-list-right"> <div class="earn-list-right">

Write Preview
Loading…
Cancel
Save