b2894lxlx/yunxinwei-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
gxwebsoft
2023-08-04 13:04:21 +08:00
commit 7a73b38bd5
764 changed files with 166417 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

501
pages/groupon/index.vue Executable file
View File

@@ -0,0 +1,501 @@
<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 && setting.backdrop" class="banner">
<image class="image" :src="setting.backdrop.src" mode="widthFix"></image>
</view>
<!-- 拼团活动 -->
<view v-if="curTab == 0" class="groupon-hall active-list">
<view class="goods-item--container" v-for="(item, index) in goodsList.data" :key="index">
<view class="goods-item" @click="onTargetGoods(item)">
<!-- 商品图片 -->
<view class="goods-item_left">
<view v-if="item.active_type != ActiveTypeEnum.NORMAL.value" class="label">
<text>{{ ActiveTypeEnum[item.active_type].name2 }}</text>
</view>
<image class="image" :src="item.goods_image"></image>
</view>
<view class="goods-item_right">
<!-- 商品标题 -->
<view class="goods-name">
<text class="twoline-hide">{{ item.goods_name }}</text>
</view>
<!-- 商品信息 -->
<view class="goods-item_desc">
<view class="desc_situation">
<u-tag class="people" :color="appTheme.mainBg" :border-color="appTheme.mainBg" :text="`${item.show_people}人团`"
type="error" size="mini" mode="plain" />
<u-tag v-if="item.active_sales" :color="appTheme.mainBg" :border-color="tagBorderColor" :bg-color="tagBackgroundColor"
:text="`已团${item.active_sales}件`" type="error" size="mini" />
</view>
<view class="desc_footer">
<view class="item-prices oneline-hide">
<text class="price_x">¥{{ item.groupon_price }}</text>
<text class="price_y cl-9">¥{{ item.original_price }}</text>
</view>
<view class="settlement">去拼团</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 我的拼团 -->
<view v-if="curTab == 1" class="groupon-hall my-list">
<view class="goods-item--container" v-for="(item, index) in myList.data" :key="index">
<view class="goods-item" @click="onTargetTask(item)">
<!-- 商品图片 -->
<view class="goods-item_left">
<view v-if="item.active_type != ActiveTypeEnum.NORMAL.value" class="label">
<text>{{ ActiveTypeEnum[item.active_type].name2 }}</text>
</view>
<image class="image" :src="item.goods.goods_image"></image>
</view>
<view class="goods-item_right">
<!-- 商品标题 -->
<view class="goods-name">
<text class="twoline-hide">{{ item.goods.goods_name }}</text>
</view>
<!-- 商品信息 -->
<view class="goods-item_desc">
<view class="desc_situation">
<u-tag v-if="item.status == TaskStatusEnum.NORMAL.value" :text="`已拼${item.joined_people}人，还差${item.people - item.joined_people}人`"
type="warning" size="mini" />
<u-tag v-else class="people" :text="`${item.people}人团`" type="error" size="mini" mode="plain" />
</view>
<view class="desc_footer">
<view class="item-status">
<text>{{ TaskStatusEnum[item.status].name }}</text>
</view>
<view v-if="item.status == TaskStatusEnum.NORMAL.value" class="settlement">查看拼单</view>
</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 { hex2rgba } from '@/utils/color'
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
import { ActiveStatusEnum, ActiveTypeEnum, TaskStatusEnum } from '@/common/enum/groupon'
import * as TaskApi from '@/api/groupon/task'
import * as GoodsApi from '@/api/groupon/goods'
import SettingModel from '@/common/model/groupon/Setting'
const pageSize = 15
export default {
components: {
MescrollBody
},
mixins: [MescrollMixin],
data() {
return {
// 枚举类
ActiveStatusEnum,
ActiveTypeEnum,
TaskStatusEnum,
// 当前tab索引
curTab: 0,
// 上拉加载配置
upOption: {
// 首次自动执行
auto: true,
// 每页数据的数量; 默认10
page: { size: pageSize },
// 数量要大于3条才显示无更多数据
noMoreSize: 3,
},
// 拼团设置
setting: {},
// 拼团商品列表
goodsList: getEmptyPaginateObj(),
// 我的拼单列表
myList: getEmptyPaginateObj(),
}
},
watch: {
curTab(val) {
// 设置页面标题
uni.setNavigationBarTitle({ title: val == 0 ? '拼团活动' : '我的拼团' })
}
},
computed: {
// 标签背景色
tagBackgroundColor() {
return hex2rgba(this.appTheme.mainBg, 0.1)
},
// 标签边框颜色
tagBorderColor() {
return hex2rgba(this.appTheme.mainBg, 0.6)
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 设置当前tab索引
if (options.tab) {
this.curTab = options.tab
}
// 获取拼团设置
this.getSetting()
},
methods: {
// 获取拼团设置
getSetting() {
SettingModel.data(true).then(setting => this.setting = setting)
},
/**
* 上拉加载的回调
* 其中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.getGoodsList,
1: this.getMyList
}
return apiFuc[this.curTab](pageNo)
},
/**
* 获取拼团商品列表
* @param {Number} pageNo 页码
*/
getGoodsList(pageNo = 1) {
const app = this
return new Promise((resolve, reject) => {
GoodsApi.list({ page: pageNo }, { load: false })
.then(result => {
// 合并新数据
const newList = result.data.list
app.goodsList.data = getMoreListData(newList, app.goodsList, pageNo)
resolve(newList)
})
.catch(reject)
})
},
// 获取我的拼团列表
getMyList(pageNo) {
const app = this
return new Promise((resolve, reject) => {
TaskApi.myList({ 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.goodsList = getEmptyPaginateObj()
app.myList = getEmptyPaginateObj()
app.mescroll.resetUpScroll()
},
// 跳转到拼团商品详情
onTargetGoods(item) {
this.$navTo('pages/groupon/goods/index', { grouponGoodsId: item.groupon_goods_id })
},
// 跳转拼单详情页
onTargetTask(item) {
this.$navTo('pages/groupon/task/index', { taskId: item.task_id })
},
},
/**
* 分享当前页面
*/
onShareAppMessage() {
// 构建页面参数
const params = this.$getShareUrlParams()
return {
title: '拼团活动',
path: `/pages/groupon/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/groupon/index?${params}`
}
},
}
</script>
<style lang="scss">
page {
background: #F5F5F8;
}
</style>
<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);
}
.banner {
z-index: 0;
.image {
display: block;
width: 100%;
}
}
.groupon-hall {
padding: 0 24rpx;
position: relative;
z-index: 1;
&.active-list {
margin-top: -80rpx;
}
&.my-list {
padding-top: 30rpx;
}
}
.goods-item--container {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0 !important;
}
}
.goods-item {
padding: 28rpx 24rpx;
display: flex;
background: #fff;
box-sizing: border-box;
border-radius: 14rpx;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.07);
}
.goods-item_left {
position: relative;
background: #fff;
margin-right: 20rpx;
.label {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: linear-gradient(to right, #ffa600, #f5b914);
color: #fff;
font-size: 24rpx;
padding: 6rpx 8rpx;
border-radius: 8rpx;
}
.image {
display: block;
width: 220rpx;
height: 220rpx;
border-radius: 10rpx;
}
}
.goods-item_right {
position: relative;
flex: 1;
.goods-name {
display: block;
width: 100%;
min-height: 68rpx;
font-size: 28rpx;
line-height: 1.3;
color: #333;
}
}
.goods-item_desc {
margin-top: 20rpx;
.desc_situation {
font-size: 26rpx;
line-height: 1.3;
color: $main-bg;
margin-top: 20rpx;
}
.people {
margin-right: 14rpx;
}
.desc_footer {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0rpx;
bottom: 0rpx;
min-height: 44rpx;
.item-status {
color: $main-bg;
}
.item-prices {
padding-right: 6rpx;
.price_x {
margin-right: 14rpx;
color: $main-bg;
font-size: 28rpx;
}
.price_y {
color: #999;
text-decoration: line-through;
font-size: 24rpx;
}
}
.settlement {
padding: 0 30rpx;
line-height: 56rpx;
text-align: center;
font-size: 28rpx;
border-radius: 40rpx;
color: #fff;
background: linear-gradient(to right, $main-bg, $main-bg2);
color: $main-text;
}
}
}
// 底部选项卡
.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;
&.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>