<template> <view class="container" :style="appThemeStyle"> <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" @up="upCallback"> <!-- 砍价会场 --> <view v-if="curTab == 0" class="bargain-hall"> <!-- 商品列表 --> <view class="goods-item" v-for="(item, index) in activeList.data" :key="index"> <view class="goods-item--container dis-flex" @click="onTargetActive(item)"> <!-- 商品图片 --> <view class="goods-image"> <image class="image" :src="item.goods.goods_image"></image> </view> <view class="goods-info"> <!-- 商品名称 --> <view class="goods-name"> <text class="twoline-hide">{{ item.goods.goods_name }}</text> </view> <!-- 参与的用户头像 --> <view v-if="item.helpsCount > 0" class="peoples dis-flex"> <view class="user-list dis-flex"> <view class="user-item-avatar" v-for="(help, hIdx) in item.helpList" :key="hIdx"> <avatar-image :url="help.user.avatar_url" :width="36" /> </view> </view> <view class="people__text"> <text>{{ item.helpsCount }}人正在砍价</text> </view> </view> <!-- 商品原价 --> <view class="goods-price"> <text>¥{{ item.goods.goods_price_min }}</text> </view> <!-- 砍价低价 --> <view class="floor-price"> <text class="small">最低¥</text> <text class="big">{{ item.floor_price }}</text> </view> <!-- 操作按钮 --> <view class="opt-touch"> <view class="touch-btn"> <text>立即参加</text> </view> </view> </view> </view> </view> </view> <!-- 我的砍价 --> <view v-if="curTab == 1" class="bargain-hall"> <!-- 商品列表 --> <view class="goods-item" v-for="(item, index) in myList.data" :key="index"> <view class="goods-item--container dis-flex" @click="onTargetTask(item.task_id)"> <!-- 商品图片 --> <view class="goods-image"> <image class="image" :src="item.goods.goods_image"></image> </view> <view class="goods-info"> <!-- 商品名称 --> <view class="goods-name"> <text class="twoline-hide">{{ item.goods.goods_name }}</text> </view> <!-- 砍价进度 --> <view class="task-rate"> <block v-if="item.status == true"> <text>已砍</text> <text class="col-m">{{ item.cut_money }}</text> <text>元,</text> <text>只差</text> <text class="col-m">{{ item.surplus_money }}</text> <text>元</text> </block> <block v-if="item.is_floor"> <text>已砍至最低</text> <text class="col-m">{{ item.floor_price }}</text> <text>元</text> </block> </view> <!-- 任务状态 --> <view class="task-status dis-flex flex-y-center"> <!-- 倒计时 --> <view v-if="item.status == true" class="count-down dis-flex flex-y-center"> <text class="m-r-6">剩余</text> <count-down :date="item.end_time" separator="colon" theme="custom" /> </view> <view v-if="item.status == false" class="task-status__text"> <text class="col-m">{{ item.is_buy ? '砍价成功' : '已结束' }}</text> </view> </view> <!-- 操作按钮 --> <view v-if="item.status == true" class="opt-touch"> <view class="touch-btn"> <text>继续砍价</text> </view> </view> </view> </view> </view> </view> <!-- 底部选项卡 --> <view class="footer-fixed"> <view class="footer-container"> <!-- 砍价会场 --> <view class="tabbar-item flex-box" :class="{ active: curTab == 0 }"> <view class="tabbar-item-content dis-flex flex-x-center flex-y-center" @click="onChangeTab(0)"> <view class="tabbar-item-icon"> <text class="iconfont icon-shangcheng"></text> </view> <view class="tabbar-item-name"> <text>砍价会场</text> </view> </view> </view> <!-- 分割线 --> <view class="tabbar-item__divider"> <view class="divider-line"></view> </view> <!-- 我的砍价 --> <view class="tabbar-item flex-box" :class="{ active: curTab == 1 }"> <view class="tabbar-item-content dis-flex flex-x-center flex-y-center" @click="onChangeTab(1)"> <view class="tabbar-item-icon"> <text class="iconfont icon-sy-yh"></text> </view> <view class="tabbar-item-name"> <text>我的砍价</text> </view> </view> </view> </view> </view> </mescroll-body> </view> </template> <script> import WxofficialMixin from '@/core/mixins/wxofficial' import AvatarImage from '@/components/avatar-image' import CountDown from '@/components/countdown' import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins' import { getEmptyPaginateObj, getMoreListData } from '@/core/app' import * as ActiveApi from '@/api/bargain/active' import * as TaskApi from '@/api/bargain/task' const pageSize = 15 export default { components: { AvatarImage, CountDown }, mixins: [MescrollMixin, WxofficialMixin], data() { return { // 是否正在加载中 isLoading: true, // 当前tab索引 curTab: 0, // 砍价会场商品列表 activeList: getEmptyPaginateObj(), // 我的砍价列表 myList: getEmptyPaginateObj(), // 上拉加载配置 upOption: { // 首次自动执行 auto: true, // 每页数据的数量; 默认10 page: { size: pageSize }, // 数量要大于3条才显示无更多数据 noMoreSize: 3, } } }, watch: { curTab(val) { // 设置页面标题 uni.setNavigationBarTitle({ title: val == 0 ? '砍价会场' : '我的砍价' }) } }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 设置当前tab索引 if (options.tab) { this.curTab = options.tab } // 设置微信公众号链接分享卡片内容 this.setWxofficialShareData() }, methods: { /** * 上拉加载的回调 (页面初始化时也会执行一次) * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 * @param {Object} page */ upCallback(page) { const app = this // 设置列表数据 app.getListData(page.num) .then(list => { const curPageLen = list.data.length const totalSize = list.data.total app.mescroll.endBySize(curPageLen, totalSize) }) .catch(() => app.mescroll.endErr()) }, // 获取列表数据(根据当前选项卡判断调用的方法) getListData(pageNo) { const apiFuc = { 0: this.getActiveList, 1: this.getMyList } return apiFuc[this.curTab](pageNo) }, // 获取砍价活动列表 getActiveList(pageNo) { const app = this return new Promise((resolve, reject) => { ActiveApi.list({ page: pageNo }, { load: false }) .then(result => { // 合并新数据 const newList = result.data.list app.activeList.data = getMoreListData(newList, app.activeList, pageNo) resolve(newList) }) .catch(reject) }) }, // 获取我的砍价列表 getMyList(pageNo) { const app = this return new Promise((resolve, reject) => { TaskApi.list({ page: pageNo }, { load: false }) .then(result => { // 合并新数据 const newList = result.data.list app.myList.data = getMoreListData(newList, app.myList, pageNo) resolve(newList) }) .catch(reject) }) }, // 切换当前选项卡 onChangeTab(key = 0) { const app = this // 记录选项卡索引 app.curTab = key // 刷新列表数据 app.activeList = getEmptyPaginateObj() app.myList = getEmptyPaginateObj() app.mescroll.resetUpScroll() }, // 跳转到砍价商品详情页 onTargetActive(item) { this.$navTo('pages/bargain/goods/index', { activeId: item.active_id, goodsId: item.goods_id }) }, // 跳转到砍价任务详情 onTargetTask(taskId) { this.$navTo('pages/bargain/task', { taskId }) }, // 设置微信公众号链接分享卡片内容 setWxofficialShareData() { this.updateShareCardData({ title: '砍价专区' }) }, }, /** * 分享当前页面 */ onShareAppMessage() { // 构建页面参数 const params = this.$getShareUrlParams() return { title: '砍价专区', path: `/pages/bargain/index?${params}` } }, /** * 分享到朋友圈 * 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta) * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html */ onShareTimeline() { // 构建页面参数 const params = this.$getShareUrlParams() return { title: '砍价专区', path: `/pages/bargain/index?${params}` } }, } </script> <style lang="scss" scoped> .container { // 设置ios刘海屏底部横线安全区域 // 110 - 18 + 4 padding-bottom: calc(constant(safe-area-inset-bottom) + 96rpx); padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx); } .bargain-hall { padding-top: 20rpx; } // 砍价商品 .goods-item { margin-bottom: 20rpx; background: #fff; padding: 20rpx 16rpx; &:last-child { margin-bottom: 0; } .goods-image { .image { display: block; width: 220rpx; height: 220rpx; } } .goods-info { width: 498rpx; padding-top: 8rpx; margin-left: 15rpx; position: relative; .goods-name { font-size: 28rpx; min-height: 60rpx; } // 正在参与的用户 .peoples { margin-top: 15rpx; .user-list { margin-right: 10rpx; .user-item-avatar { margin-left: -8rpx; &:first-child { margin-left: 0; } } } .people__text { font-size: 24rpx; color: #818181; } } // 商品原价 .goods-price { margin-top: 15rpx; color: #818181; font-size: 25rpx; text-decoration: line-through; } // 砍价底价 .floor-price { color: $main-bg; .small { font-size: 24rpx; } .big { font-size: 32rpx; } } } // 砍价进度 .task-rate { font-size: 25rpx; color: #a4a4a4; margin-top: 15rpx; } } /* 我的砍价 */ // 砍价状态 .task-status { margin-top: 32rpx; height: 58rpx; } .task-status__text { font-size: 26rpx; } // 倒计时 .count-down { font-size: 25rpx; } // 立即参加按钮 .opt-touch { position: absolute; bottom: 0; right: 10rpx; } .touch-btn { color: #fff; font-size: 28rpx; background: #d3a975; border-radius: 30rpx; padding: 10rpx 28rpx; } // 底部选项卡 .footer-fixed { position: fixed; bottom: var(--window-bottom); left: 0; right: 0; z-index: 11; box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24); background: #fff; // 设置ios刘海屏底部横线安全区域 padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .footer-container { display: flex; align-items: center; height: 96rpx; } .tabbar-item { font-size: 30rpx; // height: 42rpx; &.active { .tabbar-item-content { color: $main-bg; } } .tabbar-item-icon { margin-right: 15rpx; } } // 分割线 .tabbar-item__divider { padding: 22rpx 0; } .divider-line { width: 1rpx; height: 62rpx; background: #ddd; } </style>