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

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

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

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

@ -55,6 +55,7 @@ export const useUserStore = defineStore('useUserStore', {
getChatInfoFun() {
chatInfo().then((res) => {
console.log(res, 'sotre')
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
receiveCount: number
finishEnableCount: number
finishCount: number
finishEnableMaxCount: number
}
export { SignType, TaskType }

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

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

Write Preview
Loading…
Cancel
Save