Browse Source

fix:修改支付走马灯样式

dxj
杜贤金 1 year ago
parent
commit
b915cd60b2
  1. 22
      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

22
src/components/AppRecharge/index.vue

@ -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() {
if (currentIndex.value > 3) {
currentIndex.value--
carouselRef.value.prev() carouselRef.value.prev()
}
} }
// //
function onNextClick() { function onNextClick() {
if (currentIndex.value < goodslists.value.length) {
currentIndex.value++
carouselRef.value.next() carouselRef.value.next()
}
} }
// //
@ -150,7 +163,8 @@ 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">
<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 v-for="(item, index) in goodslists" :key="index" class="carouse-box">
<div class="carouse-item"> <div class="carouse-item">
<div class="dotnumbox"> <div class="dotnumbox">
@ -207,6 +221,7 @@ function separator(num: number | string) {
</div> </div>
</div> </div>
</Carousel> </Carousel>
<div v-show="goodslists.length > 3" class="next-button next" @click="onNextClick"> <div v-show="goodslists.length > 3" class="next-button next" @click="onNextClick">
<RightOutlined /> <RightOutlined />
</div> </div>
@ -233,6 +248,7 @@ function separator(num: number | string) {
</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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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">

Loading…
Cancel
Save