Refactor(ALL):Vue3同步调整为Vue2
This commit is contained in:
+80
-76
@@ -49,88 +49,92 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from '@vue/composition-api'
|
||||
<script>
|
||||
import {getCurAddress, getLocation} from "@/utils/common";
|
||||
import {getVideoCity} from "@/api/video";
|
||||
|
||||
const watchCity = ref(uni.getStorageSync('watchCity') || [])
|
||||
|
||||
onMounted(() => {
|
||||
getMapData()
|
||||
fetchList()
|
||||
})
|
||||
|
||||
const ready = ref(false)
|
||||
const cityName = ref('')
|
||||
const keyword = ref('')
|
||||
|
||||
const onSearch = () => {
|
||||
const name = keyword.value.trim()
|
||||
if (name.length > 0) {
|
||||
navToWatch(name)
|
||||
}
|
||||
}
|
||||
|
||||
const raw = ref()
|
||||
const searchList = ref([])
|
||||
const onChange = (value) => {
|
||||
searchList.value = []
|
||||
if (value.trim().length === 0) return
|
||||
searchList.value = raw.value.filter(city => {
|
||||
if (city['name'].indexOf(value) > -1) return city
|
||||
})
|
||||
}
|
||||
|
||||
const handleHistory = (name) => {
|
||||
for (let i = 0; i < watchCity.value.length; i++) {
|
||||
if (name === watchCity.value[i]) return
|
||||
}
|
||||
if (watchCity.value.length === 4) {
|
||||
watchCity.value.pop()
|
||||
}
|
||||
watchCity.value.unshift(name)
|
||||
uni.setStorageSync('watchCity', watchCity.value)
|
||||
}
|
||||
|
||||
const getMapData = async () => {
|
||||
const map = await getLocation();
|
||||
if (map.length > 1) {
|
||||
const {latitude, longitude} = map[1];
|
||||
const address = await getCurAddress(latitude, longitude);
|
||||
cityName.value = address[1].data.result['ad_info']['city']
|
||||
}
|
||||
}
|
||||
|
||||
const indexList = ref(["A", "B", "C"])
|
||||
const itemArr = ref([
|
||||
['列表A1', '列表A2', '列表A3'],
|
||||
['列表B1', '列表B2', '列表B3'],
|
||||
['列表C1', '列表C2', '列表C3']
|
||||
])
|
||||
|
||||
const fetchList = async () => {
|
||||
const res = await getVideoCity()
|
||||
if (res.success) {
|
||||
raw.value = res.data
|
||||
const groupedByName = res.data.reduce((accumulator, current) => {
|
||||
const groupKey = current['firstLetter'].toUpperCase()
|
||||
if (!accumulator[groupKey]) {
|
||||
accumulator[groupKey] = []
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
watchCity: [],
|
||||
ready: false,
|
||||
cityName: '',
|
||||
keyword: '',
|
||||
raw: null,
|
||||
searchList: [],
|
||||
indexList: ["A", "B", "C"],
|
||||
itemArr: [
|
||||
['列表A1', '列表A2', '列表A3'],
|
||||
['列表B1', '列表B2', '列表B3'],
|
||||
['列表C1', '列表C2', '列表C3']
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.watchCity = uni.getStorageSync('watchCity') || []
|
||||
this.getMapData()
|
||||
this.fetchList()
|
||||
},
|
||||
methods: {
|
||||
async getMapData() {
|
||||
const map = await getLocation();
|
||||
if (map.length > 1) {
|
||||
const {latitude, longitude} = map[1];
|
||||
const address = await getCurAddress(latitude, longitude);
|
||||
this.cityName = address[1].data.result['ad_info']['city']
|
||||
}
|
||||
accumulator[groupKey].push(current)
|
||||
return accumulator
|
||||
}, {})
|
||||
},
|
||||
|
||||
indexList.value = Object.keys(groupedByName)
|
||||
itemArr.value = Object.values(groupedByName)
|
||||
async fetchList() {
|
||||
const res = await getVideoCity()
|
||||
if (res.success) {
|
||||
this.raw = res.data
|
||||
const groupedByName = res.data.reduce((accumulator, current) => {
|
||||
const groupKey = current['firstLetter'].toUpperCase()
|
||||
if (!accumulator[groupKey]) {
|
||||
accumulator[groupKey] = []
|
||||
}
|
||||
accumulator[groupKey].push(current)
|
||||
return accumulator
|
||||
}, {})
|
||||
|
||||
this.indexList = Object.keys(groupedByName)
|
||||
this.itemArr = Object.values(groupedByName)
|
||||
}
|
||||
this.ready = true
|
||||
},
|
||||
|
||||
onSearch () {
|
||||
const name = this.keyword.trim()
|
||||
if (name.length > 0) {
|
||||
this.navToWatch(name)
|
||||
}
|
||||
},
|
||||
|
||||
navToWatch (name) {
|
||||
this.handleHistory(name)
|
||||
uni.redirectTo({url: '/pkg-video/views/watch?name=' + name})
|
||||
},
|
||||
|
||||
handleHistory (name) {
|
||||
for (let i = 0; i < this.watchCity.length; i++) {
|
||||
if (name === this.watchCity[i]) return
|
||||
}
|
||||
if (this.watchCity.length === 4) {
|
||||
watchCity.value.pop()
|
||||
}
|
||||
this.watchCity.unshift(name)
|
||||
uni.setStorageSync('watchCity', this.watchCity)
|
||||
},
|
||||
|
||||
onChange (value) {
|
||||
this.searchList = []
|
||||
if (value.trim().length === 0) return
|
||||
this.searchList = this.raw.filter(city => {
|
||||
if (city['name'].indexOf(value) > -1) return city
|
||||
})
|
||||
}
|
||||
}
|
||||
ready.value = true
|
||||
}
|
||||
|
||||
const navToWatch = (name) => {
|
||||
handleHistory(name)
|
||||
uni.redirectTo({url: '/pkg-video/views/watch?name=' + name})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -22,63 +22,71 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from '@vue/composition-api'
|
||||
import {onShow} from '@dcloudio/uni-app'
|
||||
import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
|
||||
<script>
|
||||
import {getLogs, takePrize} from "@/api/lottery";
|
||||
|
||||
const ready = ref(false)
|
||||
|
||||
onShow(() => {
|
||||
list.value = []
|
||||
fetchList()
|
||||
})
|
||||
|
||||
const page = ref(1)
|
||||
const list = ref([])
|
||||
const fetchList = async () => {
|
||||
const res = await getLogs(page.value, 20)
|
||||
if (res.success) {
|
||||
res.data['records']?.forEach(item => list.value.push(item))
|
||||
ready.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const onBottom = () => {
|
||||
page.value++
|
||||
fetchList()
|
||||
}
|
||||
|
||||
const takeItem = async (item) => {
|
||||
if (item['prizeType'] === 1 && item['status'] === 1) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + item['id']
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const res = await takePrize(item.id)
|
||||
if (res.success) {
|
||||
item['status'] = 2
|
||||
uni.showModal({
|
||||
title: '领取成功',
|
||||
content: '您的奖品已经领取成功,请前往我的订单查看奖品发货信息',
|
||||
cancelText: '下次再说',
|
||||
confirmText: '查看订单',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/MyOrder/index'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
ready: false,
|
||||
page: 1,
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.page = 1
|
||||
this.list = []
|
||||
this.fetchList()
|
||||
},
|
||||
methods: {
|
||||
async fetchList() {
|
||||
const res = await getLogs(this.page, 20)
|
||||
if (res.success) {
|
||||
res.data['records']?.forEach(item => this.list.push(item))
|
||||
this.ready = true
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onBottom() {
|
||||
this.page++
|
||||
this.fetchList()
|
||||
},
|
||||
|
||||
async takeItem (item) {
|
||||
if (item['prizeType'] === 1 && item['status'] === 1) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + item['id']
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const res = await takePrize(item.id)
|
||||
if (res.success) {
|
||||
item['status'] = 2
|
||||
uni.showModal({
|
||||
title: '领取成功',
|
||||
content: '您的奖品已经领取成功,请前往我的订单查看奖品发货信息',
|
||||
cancelText: '下次再说',
|
||||
confirmText: '查看订单',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/MyOrder/index'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
+143
-115
@@ -16,14 +16,17 @@
|
||||
<view class="btn-close" @click="onlyClose"/>
|
||||
<view class="img-box flex flex-col ai-center" v-if="diceResult['prizeImage']">
|
||||
<image style="width: 240rpx;height: 240rpx" :src="diceResult['prizeImage']" mode="scaleToFill"/>
|
||||
<image style="width: 80rpx;height: 80rpx;margin-top: 40rpx;" :src="diceResult['diceImage']"
|
||||
<image style="width: 80rpx;height: 80rpx;margin-top: 34rpx;" :src="diceResult['diceImage']"
|
||||
mode="scaleToFill"/>
|
||||
<view class="one-t bold" style="width:300rpx;margin-top: 40rpx;color:#F7E7B2">
|
||||
<view class="one-t bold tc" style="width:300rpx;margin-top: 46rpx;color:#F7E7B2;font-size: 30rpx"
|
||||
v-if="diceResult['isHit']===0">感谢您的参与
|
||||
</view>
|
||||
<view class="one-t bold tc" style="width:320rpx;margin-top: 46rpx;color:#F7E7B2;font-size: 30rpx" v-else>
|
||||
获得{{ diceResult['prizeName'] }}一份
|
||||
</view>
|
||||
</view>
|
||||
<image class="btn-result" style="width: 240rpx;height: 68rpx" :src="webUrl+'/20240125205521152611.png'"
|
||||
mode="scaleToFill" @click="closeResultModel"/>
|
||||
mode="scaleToFill" @click="closeResultModel" v-if="diceResult['isHit']!==0"/>
|
||||
</view>
|
||||
|
||||
<view class="dialog-take flex jc-center" :style="{'backgroundImage':`url(${webUrl}/20240124210904824337.png)`}"
|
||||
@@ -43,13 +46,19 @@
|
||||
<view class="btn-submit" @click="onSubmit"/>
|
||||
<view class="today-limit">{{ lotteryDetail.todayLimit }}</view>
|
||||
|
||||
<scroll-view class="prize-list flex" scroll-x="true" enable-flex="true">
|
||||
<view class="item flex flex-0 jc-center ai-center"
|
||||
:style="{'backgroundImage':`url(${webUrl}/20240122212856857899.png)`}"
|
||||
v-for="(item,index) in lotteryDetail.prizeList" :key="index">
|
||||
<image style="width: 120rpx;height: 120rpx" :src="item['prizeImage']" mode="scaleToFill"/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="prize-list">
|
||||
<!-- mould 图文 模式 left -->
|
||||
<gbro-marquee broadcastType='mould' @changeEvent='navToCoupons' direction="left" :viewHeight="300"
|
||||
:broadcastIconIsDisplay="!true" :touchEvent="true" :imgdata='imgData'
|
||||
:broadcastStyle='broadcastStyle2' style="width: 100%;margin-top: 20rpx;">
|
||||
<block v-for="c in 2" :key="c"> <!--在小程序里遇到一个坑不能使用两个slot 所有统一复制一份做衔接 -->
|
||||
<view class="flex flex-0 jc-center ai-center" style="width: 164rpx;height: 164rpx;background-size: 164rpx 164rpx;background-repeat: no-repeat;" :style="{'backgroundImage':`url(${webUrl}/20240122212856857899.png)`}" v-for="(item,index) in imgData" :key="index">
|
||||
<image style="width: 120rpx;height: 120rpx" :src="item" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</block>
|
||||
</gbro-marquee>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="hit-box flex" @click="navToCoupons">
|
||||
<view class="img-first flex jc-center ai-center"
|
||||
@@ -63,111 +72,136 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from '@vue/composition-api'
|
||||
import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
|
||||
<script>
|
||||
import {getDetail, getPrize, takePrize} from "@/api/lottery";
|
||||
import gbroMarquee from "@/components/gbro-marquee/marquee.vue";
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
export default {
|
||||
components: {gbroMarquee},
|
||||
data() {
|
||||
return {
|
||||
ready: false,
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
lotteryDetail: {
|
||||
diceConfig: {},
|
||||
prizeList: [],
|
||||
todayHitPrizeList: [],
|
||||
todayLimit: 0
|
||||
},
|
||||
diceImg: '',
|
||||
diceResult: {
|
||||
prizeName: '',
|
||||
prizeImage: '',
|
||||
diceImage: '',
|
||||
diceValue: 0
|
||||
},
|
||||
showDialog: false,
|
||||
showRules: false,
|
||||
showResult: false,
|
||||
showTake: false,
|
||||
broadcastStyle2: {
|
||||
speed: 20,
|
||||
font_size: "32", //字体大小(rpx)
|
||||
text_color: "#333", //字体颜色
|
||||
back_color: "red", //背景色
|
||||
},
|
||||
imgData: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
moveDistance: function () {
|
||||
const elWidth = this.lotteryDetail['prizeList'].length * 164
|
||||
const diff = elWidth > 576 ? elWidth - 576 : 0
|
||||
return uni.$u.getPx(diff + 'rpx')
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getDetail().then(res => {
|
||||
if (res.success) {
|
||||
this.lotteryDetail = res.data
|
||||
this.diceImg = this.lotteryDetail.diceConfig['diceDefaultImage']
|
||||
this.ready = true
|
||||
setTimeout(()=>{
|
||||
this.imgData = res.data['prizeList']?.map(item => item['prizeImage'])
|
||||
},1000)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
const showDialog = ref(false)
|
||||
const showRules = ref(false)
|
||||
const showResult = ref(false)
|
||||
const showTake = ref(false)
|
||||
onSubmit() {
|
||||
getPrize().then(res => {
|
||||
if (res.success) {
|
||||
this.diceResult = res.data
|
||||
const diceIndex = this.lotteryDetail.diceConfig['diceValues'].findIndex(item => item['diceValue'] === this.diceResult.diceValue)
|
||||
this.diceImg = this.lotteryDetail.diceConfig['diceValues'][diceIndex]['diceValueGif']
|
||||
setTimeout(() => {
|
||||
this.showDialog = true
|
||||
this.showResult = true
|
||||
this.diceImg = this.lotteryDetail.diceConfig['diceValues'][diceIndex]['diceValueImage']
|
||||
setTimeout(() => {
|
||||
this.init()
|
||||
}, 1000)
|
||||
}, 2800)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
const ready = ref(false)
|
||||
const lotteryDetail = ref({
|
||||
diceConfig: {},
|
||||
prizeList: [],
|
||||
todayHitPrizeList: [],
|
||||
todayLimit: 0
|
||||
})
|
||||
navToLog() {
|
||||
uni.navigateTo({url: './lottery-log'})
|
||||
},
|
||||
|
||||
const navToLog = () => {
|
||||
uni.navigateTo({url: './lottery-log'})
|
||||
}
|
||||
navToCoupons() {
|
||||
uni.navigateTo({url: '/pkg_user/views/myCoupons'})
|
||||
},
|
||||
|
||||
openRulesModel() {
|
||||
this.showDialog = true
|
||||
this.showRules = true
|
||||
},
|
||||
|
||||
const openRulesModel = () => {
|
||||
showDialog.value = true
|
||||
showRules.value = true
|
||||
}
|
||||
const closeRulesModel = () => {
|
||||
showDialog.value = false
|
||||
showRules.value = false
|
||||
}
|
||||
closeRulesModel() {
|
||||
this.showDialog = false
|
||||
this.showRules = false
|
||||
},
|
||||
|
||||
const init = async () => {
|
||||
const res = await getDetail()
|
||||
if (res.success) {
|
||||
lotteryDetail.value = res.data
|
||||
diceImg.value = lotteryDetail.value.diceConfig['diceDefaultImage']
|
||||
ready.value = true
|
||||
onlyClose() {
|
||||
this.showResult = false
|
||||
this.showDialog = false
|
||||
},
|
||||
|
||||
closeResultModel() {
|
||||
if (this.diceResult['prizeType'] === 4) {
|
||||
this.showResult = false
|
||||
this.showDialog = false
|
||||
return
|
||||
}
|
||||
if (this.diceResult['prizeType'] === 1) {
|
||||
this.showResult = false
|
||||
this.showDialog = false
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + this.diceResult['id']
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
takePrize(this.diceResult.id).then(res => {
|
||||
if (res.success) {
|
||||
this.showResult = false
|
||||
this.showTake = true
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
closeTakeModel() {
|
||||
this.showTake = false
|
||||
this.showDialog = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const diceIndex = ref(0)
|
||||
const diceImg = ref('')
|
||||
const onSubmit = async () => {
|
||||
const res = await getPrize()
|
||||
if (res.success) diceResult.value = res.data
|
||||
|
||||
diceIndex.value = lotteryDetail.value.diceConfig['diceValues'].findIndex(item => item['diceValue'] === diceResult.value.diceValue)
|
||||
diceImg.value = lotteryDetail.value.diceConfig['diceValues'][diceIndex.value]['diceValueGif']
|
||||
setTimeout(() => {
|
||||
diceImg.value = lotteryDetail.value.diceConfig['diceValues'][diceIndex.value]['diceValueImage']
|
||||
setTimeout(() => {
|
||||
init()
|
||||
showDialog.value = true
|
||||
showResult.value = true
|
||||
}, 1000)
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
const diceResult = ref({
|
||||
prizeName: '',
|
||||
prizeImage: '',
|
||||
diceImage: '',
|
||||
diceValue: 0
|
||||
})
|
||||
|
||||
const navToCoupons = () => {
|
||||
uni.navigateTo({url: '/pkg_user/views/myCoupons'})
|
||||
}
|
||||
|
||||
const onlyClose = () => {
|
||||
showResult.value = false
|
||||
showDialog.value = false
|
||||
}
|
||||
|
||||
const closeResultModel = async () => {
|
||||
if (diceResult.value['prizeType'] === 4) {
|
||||
showResult.value = false
|
||||
showDialog.value = false
|
||||
return
|
||||
}
|
||||
if (diceResult.value['prizeType'] === 1) {
|
||||
showResult.value = false
|
||||
showDialog.value = false
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + diceResult.value['id']
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const res = await takePrize(diceResult.value.id)
|
||||
if (res.success) {
|
||||
showResult.value = false
|
||||
showTake.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const closeTakeModel = () => {
|
||||
showTake.value = false
|
||||
showDialog.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@@ -232,8 +266,8 @@ image {
|
||||
.dialog-result {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 200rpx;
|
||||
transform: translate(-50%, 0);
|
||||
width: 476rpx;
|
||||
height: 856rpx;
|
||||
box-sizing: border-box;
|
||||
@@ -252,7 +286,7 @@ image {
|
||||
.img-box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 345rpx;
|
||||
top: 344rpx;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
@@ -314,13 +348,7 @@ image {
|
||||
top: 888rpx;
|
||||
width: 576rpx;
|
||||
height: 164rpx;
|
||||
|
||||
.item {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
background-size: 164rpx 164rpx;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hit-box {
|
||||
|
||||
+211
-204
@@ -14,19 +14,18 @@
|
||||
<view class="item">
|
||||
<video :id="`video-${index}`" :src="item['video']" loop :controls="false" :show-center-play-btn="false"/>
|
||||
|
||||
<view class="btn-play flex jc-center ai-center" @click="controlVideo">
|
||||
<image style="width:57rpx;height:65rpx" :src="webUrl+'/20240123093125710999.png'" mode="scaleToFill"
|
||||
v-if="showPlay"/>
|
||||
</view>
|
||||
<cover-view class="btn-play flex jc-center ai-center" @click="controlVideo">
|
||||
<cover-image style="width:57rpx;height:65rpx" :src="webUrl+'/20240123093125710999.png'" v-if="showPlay"/>
|
||||
</cover-view>
|
||||
</view>
|
||||
|
||||
<view class="fixed-footer flex jc-between ai-end"
|
||||
:style="{'bottom':systemInfo['safeAreaInsets']['bottom']+'px'}" v-if="!showDialog">
|
||||
<view class="flex ai-center">
|
||||
<cover-view class="fixed-footer flex jc-between ai-end"
|
||||
:style="{'bottom':systemInfo['safeAreaInsets']['bottom']+'px'}" v-if="!showDialog">
|
||||
<cover-view class="flex ai-center">
|
||||
<cover-image style="width: 80rpx;height: 80rpx;border-radius: 50%;z-index: 10" :src="item['hotelLogo']"
|
||||
@click="navToStore(item['hotelId'])"/>
|
||||
<cover-view class="more-t">{{ item['hotelName'] }}</cover-view>
|
||||
</view>
|
||||
</cover-view>
|
||||
|
||||
<cover-view class="flex ai-center">
|
||||
<cover-view class="flex flex-col ai-center" style="width:78rpx;margin-right: 16rpx;"
|
||||
@@ -48,7 +47,7 @@
|
||||
<cover-view class="one-t tc">{{ item['replyCount'] }}</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</view>
|
||||
</cover-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
@@ -81,210 +80,217 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from '@vue/composition-api'
|
||||
import {onLoad, onShow} from '@dcloudio/uni-app'
|
||||
import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
|
||||
<script>
|
||||
import {getReplyList, likeVideo, randomList, removeFavoriteVideo, removeLikeVideo, submitReply} from "@/api/video";
|
||||
import {addVideo} from "@/api/favorite";
|
||||
import {getCurAddress, getLocation} from "@/utils/common";
|
||||
|
||||
const systemInfo = ref()
|
||||
|
||||
onLoad((options) => {
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
systemInfo.value = res
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
systemInfo: null,
|
||||
ready: false,
|
||||
cityName: '',
|
||||
videoId: '',
|
||||
list: [],
|
||||
current: 0,
|
||||
showPlay: false,
|
||||
currentContext: null,
|
||||
showDialog: false,
|
||||
comment: '',
|
||||
page: 1,
|
||||
replyList: []
|
||||
}
|
||||
})
|
||||
|
||||
videoId.value = options.videoId || ''
|
||||
const name = options.name
|
||||
if (name) {
|
||||
cityName.value = name
|
||||
fetchList()
|
||||
} else {
|
||||
getMapData()
|
||||
}
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
ready.value = false
|
||||
setTimeout(() => {
|
||||
if (cityName.value) fetchList()
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
const ready = ref(false)
|
||||
const cityName = ref('')
|
||||
const videoId = ref('')
|
||||
|
||||
const navToCity = () => {
|
||||
uni.redirectTo({url: '/pkg-video/views/city'})
|
||||
}
|
||||
|
||||
const navToHome = () => {
|
||||
uni.switchTab({url: '/pages/home/index'})
|
||||
}
|
||||
|
||||
const navToStore = (id) => {
|
||||
console.log(typeof id, id)
|
||||
uni.navigateTo({url: '/pagesInn/inn/innHome?id=' + id})
|
||||
}
|
||||
|
||||
const getMapData = async () => {
|
||||
const map = await getLocation();
|
||||
if (map.length > 1) {
|
||||
const {latitude, longitude} = map[1];
|
||||
const address = await getCurAddress(latitude, longitude);
|
||||
cityName.value = address[1].data.result['ad_info']['city']
|
||||
}
|
||||
|
||||
await fetchList()
|
||||
}
|
||||
|
||||
const list = ref([])
|
||||
const fetchList = async () => {
|
||||
let param
|
||||
if (videoId.value) {
|
||||
param = {
|
||||
videoId: videoId.value,
|
||||
limit: 2
|
||||
}
|
||||
} else {
|
||||
param = {
|
||||
cityName: cityName.value,
|
||||
limit: 2
|
||||
}
|
||||
}
|
||||
const res = await randomList(param)
|
||||
if (res.success) {
|
||||
res.data?.forEach(item => list.value.push(item))
|
||||
if (!ready.value && list.value.length === 0) {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '当前城市还没有视频,可以先看看其他城市的喔~',
|
||||
cancelText: '返回',
|
||||
cancelColor: '#3A87FC',
|
||||
confirmText: '选择城市',
|
||||
confirmColor: '#3A87FC',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
navToCity()
|
||||
} else if (res.cancel) {
|
||||
navToHome()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
ready.value = true
|
||||
if (list.value.length > 0) handleVideoPlay()
|
||||
}
|
||||
}
|
||||
|
||||
const changeLike = async (item) => {
|
||||
const videoId = item['id']
|
||||
if (item['hasLike']) {
|
||||
const res = await removeLikeVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasLike'] = false
|
||||
item['likeCount'] = res.data['likeCount']
|
||||
}
|
||||
} else {
|
||||
const res = await likeVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasLike'] = true
|
||||
item['likeCount'] = res.data['likeCount']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const changeFav = async (item) => {
|
||||
const videoId = item['id']
|
||||
if (item['hasFavorite']) {
|
||||
const res = await removeFavoriteVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasFavorite'] = false
|
||||
item['favoriteCount'] = res.data['favoriteCount']
|
||||
}
|
||||
} else {
|
||||
const res = await addVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasFavorite'] = true
|
||||
item['favoriteCount'] = res.data['favoriteCount']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const current = ref(0)
|
||||
const onChange = (event) => {
|
||||
current.value = event.detail.current
|
||||
if (current.value + 2 >= list.value.length) fetchList()
|
||||
handleVideoPlay()
|
||||
}
|
||||
|
||||
const showPlay = ref(false)
|
||||
const currentContext = ref()
|
||||
const handleVideoPlay = () => {
|
||||
for (let i = 0; i < list.value.length; i++) {
|
||||
let id = `video-${i}`
|
||||
let videoContext = uni.createVideoContext(id)
|
||||
videoContext.pause()
|
||||
if (current.value === i) videoContext.play()
|
||||
}
|
||||
}
|
||||
const controlVideo = () => {
|
||||
let id = `video-${current.value}`
|
||||
currentContext.value = uni.createVideoContext(id)
|
||||
if (showPlay.value) {
|
||||
currentContext.value.play()
|
||||
} else {
|
||||
currentContext.value.pause()
|
||||
}
|
||||
showPlay.value = !showPlay.value
|
||||
}
|
||||
|
||||
const showDialog = ref(false)
|
||||
const dialogClose = () => {
|
||||
showDialog.value = false
|
||||
}
|
||||
const dialogOpen = () => {
|
||||
comment.value = ''
|
||||
page.value = 1
|
||||
replyList.value = []
|
||||
fetchReply()
|
||||
}
|
||||
const comment = ref('')
|
||||
const page = ref(1)
|
||||
|
||||
const replyList = ref([])
|
||||
const fetchReply = async () => {
|
||||
const id = list.value[current.value]['id']
|
||||
const res = await getReplyList(id, page.value)
|
||||
if (res.success && res.data['records']?.length > 0) {
|
||||
res.data['records']?.forEach(item => {
|
||||
item.time = uni.$u.timeFrom(Date.parse(item.createTime))
|
||||
replyList.value.push(item)
|
||||
})
|
||||
page.value++
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (comment.value.trim().length === 0) return
|
||||
const videoId = list.value[current.value]['id']
|
||||
const res = await submitReply(videoId, comment.value)
|
||||
if (res.success) {
|
||||
uni.showToast({
|
||||
title: '评论已发布',
|
||||
icon: 'none',
|
||||
success() {
|
||||
list.value[current.value]['replyCount']++
|
||||
showDialog.value = false
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.systemInfo = res
|
||||
}
|
||||
})
|
||||
|
||||
that.videoId = options.videoId || ''
|
||||
const name = options.name
|
||||
if (name) {
|
||||
that.cityName = name
|
||||
that.fetchList()
|
||||
} else {
|
||||
that.getMapData()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.ready = false
|
||||
setTimeout(() => {
|
||||
if (this.cityName) this.fetchList()
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
navToCity() {
|
||||
uni.redirectTo({url: '/pkg-video/views/city'})
|
||||
},
|
||||
|
||||
navToHome() {
|
||||
uni.switchTab({url: '/pages/home/index'})
|
||||
},
|
||||
|
||||
navToStore(id) {
|
||||
uni.navigateTo({url: '/pagesInn/inn/innHome?id=' + id})
|
||||
},
|
||||
|
||||
async getMapData() {
|
||||
const map = await getLocation();
|
||||
if (map.length > 1) {
|
||||
const {latitude, longitude} = map[1];
|
||||
const address = await getCurAddress(latitude, longitude);
|
||||
this.cityName = address[1].data.result['ad_info']['city']
|
||||
}
|
||||
|
||||
await this.fetchList()
|
||||
},
|
||||
|
||||
async fetchList() {
|
||||
let that = this
|
||||
let param
|
||||
if (this.videoId) {
|
||||
param = {
|
||||
videoId: this.videoId,
|
||||
limit: 2
|
||||
}
|
||||
} else {
|
||||
param = {
|
||||
cityName: this.cityName,
|
||||
limit: 2
|
||||
}
|
||||
}
|
||||
const res = await randomList(param)
|
||||
if (res.success) {
|
||||
res.data?.forEach(item => this.list.push(item))
|
||||
if (!this.ready && this.list.length === 0) {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '当前城市还没有视频,可以先看看其他城市的喔~',
|
||||
cancelText: '返回',
|
||||
cancelColor: '#3A87FC',
|
||||
confirmText: '选择城市',
|
||||
confirmColor: '#3A87FC',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
that.navToCity()
|
||||
} else if (res.cancel) {
|
||||
that.navToHome()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
that.ready = true
|
||||
if (that.list.length > 0) that.handleVideoPlay()
|
||||
}
|
||||
},
|
||||
|
||||
async changeLike(item) {
|
||||
const videoId = item['id']
|
||||
if (item['hasLike']) {
|
||||
const res = await removeLikeVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasLike'] = false
|
||||
item['likeCount'] = res.data['likeCount']
|
||||
}
|
||||
} else {
|
||||
const res = await likeVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasLike'] = true
|
||||
item['likeCount'] = res.data['likeCount']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async changeFav(item) {
|
||||
const videoId = item['id']
|
||||
if (item['hasFavorite']) {
|
||||
const res = await removeFavoriteVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasFavorite'] = false
|
||||
item['favoriteCount'] = res.data['favoriteCount']
|
||||
}
|
||||
} else {
|
||||
const res = await addVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasFavorite'] = true
|
||||
item['favoriteCount'] = res.data['favoriteCount']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
this.current = event.detail.current
|
||||
if (this.current + 2 >= this.list.length) this.fetchList()
|
||||
this.handleVideoPlay()
|
||||
},
|
||||
|
||||
handleVideoPlay() {
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
let id = `video-${i}`
|
||||
let videoContext = uni.createVideoContext(id)
|
||||
videoContext.pause()
|
||||
if (this.current === i) videoContext.play()
|
||||
}
|
||||
},
|
||||
|
||||
controlVideo() {
|
||||
let id = `video-${current.value}`
|
||||
this.currentContext = uni.createVideoContext(id)
|
||||
if (this.showPlay) {
|
||||
this.currentContext.play()
|
||||
} else {
|
||||
this.currentContext.pause()
|
||||
}
|
||||
this.showPlay = !this.showPlay
|
||||
},
|
||||
|
||||
dialogClose() {
|
||||
this.showDialog = false
|
||||
},
|
||||
|
||||
dialogOpen() {
|
||||
this.comment = ''
|
||||
this.page = 1
|
||||
this.replyList = []
|
||||
this.fetchReply()
|
||||
},
|
||||
|
||||
async fetchReply() {
|
||||
const id = this.list[this.current]['id']
|
||||
const res = await getReplyList(id, this.page)
|
||||
if (res.success && res.data['records']?.length > 0) {
|
||||
res.data['records']?.forEach(item => {
|
||||
item.time = uni.$u.timeFrom(Date.parse(item.createTime))
|
||||
this.replyList.push(item)
|
||||
})
|
||||
this.page++
|
||||
}
|
||||
},
|
||||
|
||||
async onSubmit() {
|
||||
if (this.comment.trim().length === 0) return
|
||||
const videoId = this.list[this.current]['id']
|
||||
const res = await submitReply(videoId, this.comment)
|
||||
if (res.success) {
|
||||
uni.showToast({
|
||||
title: '评论已发布',
|
||||
icon: 'none',
|
||||
success() {
|
||||
this.list[this.current]['replyCount']++
|
||||
this.showDialog = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@@ -328,6 +334,7 @@ video {
|
||||
color: #FFFFFF;
|
||||
font-size: 36rpx;
|
||||
line-height: 52rpx;
|
||||
white-space: pre-wrap;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user