|
@@ -1,114 +1,127 @@
|
|
<template>
|
|
<template>
|
|
- <section class="screen talking-gift-container">
|
|
|
|
-
|
|
|
|
- <section class="rowACenter talking-gift-list"
|
|
|
|
- @mouseleave="closeIntroduce"
|
|
|
|
- >
|
|
|
|
- <div @click="bannerPrev" class="talking-gift-trigger center cursor-pointer">
|
|
|
|
- <svg t="1623035534357" class="talking-gift-trigger-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3411" width="200" height="200"><path d="M670.6 861.6c-7.6 0-15.1-2.9-20.9-8.6L329.4 532.7c-11.6-11.5-11.6-30.3 0-41.8l320.2-320.2c5.8-5.8 13.3-8.6 20.9-8.6 7.5 0 15.1 2.9 20.9 8.6 11.5 11.5 11.5 30.2 0 41.8L392 511.8l299.4 299.4c11.5 11.6 11.5 30.3 0 41.8-5.7 5.7-13.3 8.6-20.8 8.6z" p-id="3412" fill="#ffffff"></path></svg>
|
|
|
|
- </div>
|
|
|
|
- <aside class="flex-1 overflow talking-gift-banner-margin">
|
|
|
|
- <swiper
|
|
|
|
- :swiperOption="swiperOption"
|
|
|
|
- class="screen"
|
|
|
|
- ref="banner"
|
|
|
|
|
|
+ <flat-list
|
|
|
|
+ @fetch="fetch"
|
|
|
|
+ :paging="false"
|
|
|
|
+ indexes="gid"
|
|
|
|
+ ref="fetch"
|
|
|
|
+ @changeData="changeData"
|
|
|
|
+ >
|
|
|
|
+ <template v-slot:layout>
|
|
|
|
+ <section class="screen talking-gift-container">
|
|
|
|
+ <section class="rowACenter talking-gift-list"
|
|
|
|
+ @mouseleave="closeIntroduce"
|
|
>
|
|
>
|
|
- <swiper-item
|
|
|
|
- v-for="(item,index) in giftData"
|
|
|
|
- class="talking-gift-banner center cursor-pointer relative"
|
|
|
|
- :class="{
|
|
|
|
- 'talking-gift-banner-active': index === giftSelect
|
|
|
|
- }"
|
|
|
|
- :key="'image-item-'+index"
|
|
|
|
- @click="changeGiftSelect(index)"
|
|
|
|
- >
|
|
|
|
- <div class="absolute talking-gift-banner-container"
|
|
|
|
- @mouseover="openIntroduce(item,$event)"
|
|
|
|
- ></div>
|
|
|
|
- <div class="talking-gift-image-warp center">
|
|
|
|
- <v-image
|
|
|
|
- class="talking-gift-image"
|
|
|
|
- :id="index === giftSelect?'gift-active-'+item.gid:''"
|
|
|
|
- :src="item.base_image"
|
|
|
|
- backgroundColor="transparent"
|
|
|
|
- ></v-image>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div @click="bannerPrev" class="talking-gift-trigger center cursor-pointer">
|
|
|
|
+ <svg t="1623035534357" class="talking-gift-trigger-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3411" width="200" height="200"><path d="M670.6 861.6c-7.6 0-15.1-2.9-20.9-8.6L329.4 532.7c-11.6-11.5-11.6-30.3 0-41.8l320.2-320.2c5.8-5.8 13.3-8.6 20.9-8.6 7.5 0 15.1 2.9 20.9 8.6 11.5 11.5 11.5 30.2 0 41.8L392 511.8l299.4 299.4c11.5 11.6 11.5 30.3 0 41.8-5.7 5.7-13.3 8.6-20.8 8.6z" p-id="3412" fill="#ffffff"></path></svg>
|
|
|
|
+ </div>
|
|
|
|
+ <aside class="flex-1 overflow talking-gift-banner-margin">
|
|
|
|
+ <swiper
|
|
|
|
+ :swiperOption="swiperOption"
|
|
|
|
+ class="screen"
|
|
|
|
+ ref="banner"
|
|
|
|
+ >
|
|
|
|
+ <swiper-item
|
|
|
|
+ v-for="(item,index) in giftData"
|
|
|
|
+ class="talking-gift-banner center cursor-pointer relative"
|
|
|
|
+ :class="{
|
|
|
|
+ 'talking-gift-banner-active': index === giftSelect,
|
|
|
|
+ 'talking-gift-none': item.num <= 0
|
|
|
|
+ }"
|
|
|
|
+ :key="'image-item-'+index"
|
|
|
|
+ @click="changeGiftSelect(index)"
|
|
|
|
+ >
|
|
|
|
+ <div class="absolute talking-gift-banner-container"
|
|
|
|
+ @mouseover="openIntroduce(item,$event)"
|
|
|
|
+ ></div>
|
|
|
|
+ <div class="talking-gift-image-warp center">
|
|
|
|
+ <v-image
|
|
|
|
+ class="talking-gift-image"
|
|
|
|
+ :id="index === giftSelect?'gift-active-'+item.gid:''"
|
|
|
|
+ :src="item.base_image"
|
|
|
|
+ backgroundColor="transparent"
|
|
|
|
+ >
|
|
|
|
+ <layout-dot class="absolute talking-gift-dot" :value="item.num" :max="999"></layout-dot>
|
|
|
|
+ </v-image>
|
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="talking-gift-title overflow">{{item.gift_name}}</div>
|
|
|
|
- </swiper-item>
|
|
|
|
- </swiper>
|
|
|
|
- </aside>
|
|
|
|
- <div @click="bannerNext" class="talking-gift-trigger center cursor-pointer">
|
|
|
|
- <svg t="1623035654891" class="talking-gift-trigger-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1920" width="200" height="200"><path d="M671.5392 512L332.1344 172.544a32 32 0 0 1 45.2608-45.2096l358.4 358.4a37.12 37.12 0 0 1 0 52.5312l-358.4 358.4a32 32 0 0 1-45.2608-45.2608L671.5904 512z" fill="#ffffff" p-id="1921"></path></svg>
|
|
|
|
- </div>
|
|
|
|
- </section>
|
|
|
|
|
|
+ <div class="talking-gift-title overflow">{{item.gift_name}}</div>
|
|
|
|
+ </swiper-item>
|
|
|
|
+ </swiper>
|
|
|
|
+ </aside>
|
|
|
|
+ <div @click="bannerNext" class="talking-gift-trigger center cursor-pointer">
|
|
|
|
+ <svg t="1623035654891" class="talking-gift-trigger-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1920" width="200" height="200"><path d="M671.5392 512L332.1344 172.544a32 32 0 0 1 45.2608-45.2096l358.4 358.4a37.12 37.12 0 0 1 0 52.5312l-358.4 358.4a32 32 0 0 1-45.2608-45.2608L671.5904 512z" fill="#ffffff" p-id="1921"></path></svg>
|
|
|
|
+ </div>
|
|
|
|
+ </section>
|
|
|
|
|
|
- <footer class="talking-gift-footer rowACenter">
|
|
|
|
- <div class="talking-gift-footer-icon overflow center">
|
|
|
|
- <v-image v-if="giftData[giftSelect]" backgroundColor="transparent" :src="giftData[giftSelect].base_image" class="talking-gift-give-icon"></v-image>
|
|
|
|
- </div>
|
|
|
|
- <div class="talking-gift-footer-margin">数量</div>
|
|
|
|
- <div class="relative">
|
|
|
|
- <a-select v-model:value="number" class="talking-gift-number talking-gift-select" dropdownClassName="talking-gift-dropdown">
|
|
|
|
- <a-select-option
|
|
|
|
- v-for="(item,index) in numberData"
|
|
|
|
- :key="'options-'+item.pid"
|
|
|
|
- :value="item.value"
|
|
|
|
- >
|
|
|
|
- <div class="rowACenter talking-gift-number-item">
|
|
|
|
- <div class="talking-select-value">{{item.value}}</div>
|
|
|
|
- <div class="talking-select-label">{{item.label}}</div>
|
|
|
|
|
|
+ <footer class="talking-gift-footer rowACenter">
|
|
|
|
+ <div class="talking-gift-footer-icon overflow center">
|
|
|
|
+ <v-image v-if="giftData[giftSelect]" backgroundColor="transparent" :src="giftData[giftSelect].base_image" class="talking-gift-give-icon"></v-image>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="talking-gift-footer-margin">数量</div>
|
|
|
|
+ <div class="relative">
|
|
|
|
+ <a-select v-model:value="number" class="talking-gift-number talking-gift-select" dropdownClassName="talking-gift-dropdown">
|
|
|
|
+ <a-select-option
|
|
|
|
+ v-for="(item,index) in numberData"
|
|
|
|
+ :key="'options-'+item.pid"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ >
|
|
|
|
+ <div class="rowACenter talking-gift-number-item">
|
|
|
|
+ <div class="talking-select-value">{{item.value}}</div>
|
|
|
|
+ <div class="talking-select-label">{{item.label}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ <div class="absolute talking-gift-select-modal jCenter aEnd">
|
|
|
|
+ <icon type="down" class="talking-gift-select-icon"></icon>
|
|
</div>
|
|
</div>
|
|
- </a-select-option>
|
|
|
|
- </a-select>
|
|
|
|
- <div class="absolute talking-gift-select-modal jCenter aEnd">
|
|
|
|
- <icon type="down" class="talking-gift-select-icon"></icon>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="talking-gift-footer-margin">给</div>
|
|
|
|
- <div class="relative"
|
|
|
|
- :class="{
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div class="talking-gift-footer-margin">给</div>
|
|
|
|
+ <div class="relative"
|
|
|
|
+ :class="{
|
|
'talking-gift-not-user-select': giveUserNoHave
|
|
'talking-gift-not-user-select': giveUserNoHave
|
|
}"
|
|
}"
|
|
- >
|
|
|
|
- <a-select class="talking-gift-user talking-gift-select"
|
|
|
|
- dropdownClassName="talking-gift-dropdown"
|
|
|
|
-
|
|
|
|
- placeholder="送给TA"
|
|
|
|
- v-model:value="giveUserValue"
|
|
|
|
- >
|
|
|
|
- <a-select-option
|
|
|
|
- v-for="(item,index) in useUserData"
|
|
|
|
- :key="'options-'+item.uid"
|
|
|
|
- :value="item.uid"
|
|
|
|
>
|
|
>
|
|
- <div class="rowACenter talking-gift-user-item">
|
|
|
|
- <div v-if="item.custom" class="talking-gift-custom-avatar center">
|
|
|
|
- <v-image mode="center" backgroundColor="transparent" :src="item.icon" class="gift-user-custom-icon" radius="50%"></v-image>
|
|
|
|
- </div>
|
|
|
|
- <v-image v-else :src="item.icon" class="talking-gift-user-icon" radius="50%"></v-image>
|
|
|
|
- <div class="flex-1 talking-gift-select-margin">
|
|
|
|
- <div class="talking-select-label line-1">{{item.label}}</div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <a-select class="talking-gift-user talking-gift-select"
|
|
|
|
+ dropdownClassName="talking-gift-dropdown"
|
|
|
|
+
|
|
|
|
+ placeholder="送给TA"
|
|
|
|
+ v-model:value="giveUserValue"
|
|
|
|
+ >
|
|
|
|
+ <a-select-option
|
|
|
|
+ v-for="(item,index) in useUserData"
|
|
|
|
+ :key="'options-'+item.uid"
|
|
|
|
+ :value="item.uid"
|
|
|
|
+ >
|
|
|
|
+ <div class="rowACenter talking-gift-user-item">
|
|
|
|
+ <div v-if="item.custom" class="talking-gift-custom-avatar center">
|
|
|
|
+ <v-image mode="center" backgroundColor="transparent" :src="item.icon" class="gift-user-custom-icon" radius="50%"></v-image>
|
|
|
|
+ </div>
|
|
|
|
+ <v-image v-else :src="item.icon" class="talking-gift-user-icon" radius="50%"></v-image>
|
|
|
|
+ <div class="flex-1 talking-gift-select-margin">
|
|
|
|
+ <div class="talking-select-label line-1">{{item.label}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ <div class="absolute talking-gift-select-modal jCenter aEnd">
|
|
|
|
+ <icon type="down" class="talking-gift-select-icon"></icon>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="talking-gift-no-user absolute jCenter" v-if="giveUserNoHave">
|
|
|
|
+ <div class="talking-select-label line-1">{{giveUser.nick_name}}</div>
|
|
</div>
|
|
</div>
|
|
- </a-select-option>
|
|
|
|
- </a-select>
|
|
|
|
- <div class="absolute talking-gift-select-modal jCenter aEnd">
|
|
|
|
- <icon type="down" class="talking-gift-select-icon"></icon>
|
|
|
|
- </div>
|
|
|
|
- <div class="talking-gift-no-user absolute jCenter" v-if="giveUserNoHave">
|
|
|
|
- <div class="talking-select-label line-1">{{giveUser.nick_name}}</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <!-- 赠送 -->
|
|
|
|
- <div @click="giveUserGift" class="room-gift-give cursor-pointer center">
|
|
|
|
- <span v-if="pressNumber<1">赠送</span>
|
|
|
|
- <div v-else :key="'give-'+pressNumber" class="row room-gift-give-count"><span class="iconfont icon-close room-gift-give-close"></span>{{pressNumber}}</div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 赠送 -->
|
|
|
|
+ <div @click="giveUserGift" class="room-gift-give cursor-pointer center">
|
|
|
|
+ <span v-if="pressNumber<1">赠送</span>
|
|
|
|
+ <div v-else :key="'give-'+pressNumber" class="row room-gift-give-count"><span class="iconfont icon-close room-gift-give-close"></span>{{pressNumber}}</div>
|
|
|
|
+ </div>
|
|
|
|
|
|
- </footer>
|
|
|
|
|
|
+ </footer>
|
|
|
|
+
|
|
|
|
+ </section>
|
|
|
|
+ </template>
|
|
|
|
+ </flat-list>
|
|
|
|
|
|
- </section>
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -118,36 +131,27 @@ import {
|
|
vImage,
|
|
vImage,
|
|
icon
|
|
icon
|
|
} from '$components';
|
|
} from '$components';
|
|
-import unit from "$utils/unit/unit";
|
|
|
|
import mixins from '../mixins/index';
|
|
import mixins from '../mixins/index';
|
|
import {Select} from "ant-design-vue";
|
|
import {Select} from "ant-design-vue";
|
|
-import numberData from '../data/number';
|
|
|
|
import props from '../props';
|
|
import props from '../props';
|
|
|
|
+import FlatList from "$components/flat-list/src/main";
|
|
|
|
+import layoutDot from '$layout/layout-dot';
|
|
export default {
|
|
export default {
|
|
name: "room-gift-item",
|
|
name: "room-gift-item",
|
|
|
|
|
|
- data(){
|
|
|
|
- return {
|
|
|
|
- swiperOption:{
|
|
|
|
- slidesPerView:'auto',
|
|
|
|
- spaceBetween:unit.unitPx(20),
|
|
|
|
- threshold:unit.unitPx(10)
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- numberData
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
props,
|
|
props,
|
|
|
|
|
|
mixins,
|
|
mixins,
|
|
|
|
|
|
components:{
|
|
components:{
|
|
|
|
+ FlatList,
|
|
swiper,
|
|
swiper,
|
|
swiperItem,
|
|
swiperItem,
|
|
vImage,
|
|
vImage,
|
|
[Select.name]:Select,
|
|
[Select.name]:Select,
|
|
[Select.Option.displayName]:Select.Option,
|
|
[Select.Option.displayName]:Select.Option,
|
|
- icon
|
|
|
|
|
|
+ icon,
|
|
|
|
+ layoutDot
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|