434aa8c69d
Phase1 后端核心：
- 新增 fsgx_v1.sql 迁移脚本（is_queue_goods/frozen_points/available_points/no_assess）
- SystemConfigServices 返佣设置扩展（周期人数/分档比例/范围/时机）
- StoreOrderCreateServices 周期循环佣金计算
- StoreOrderTakeServices 佣金发放后同步冻结积分
- StoreProductServices/StoreProduct 保存 is_queue_goods
Phase2 后端接口：
- GET /api/hjf/brokerage/progress 佣金周期进度
- GET /api/hjf/assets/overview 资产总览
- HjfPointsServices 每日 frozen_points 0.4‰ 释放定时任务
- PUT /adminapi/hjf/member/{uid}/no_assess 不考核接口
- GET /adminapi/hjf/points/release_log 积分日志接口
Phase3 前端清理：
- hjfCustom.js 路由精简（仅保留 points/log）
- hjfQueue.js/hjfMember.js API 清理/重定向至 CRMEB 原生接口
- pages.json 公排→推荐佣金/佣金记录/佣金规则
Phase4-5 前端改造：
- queue/status.vue 推荐佣金进度页整体重写
- 商品详情/订单确认/支付结果页文案与逻辑改造
- 个人中心/资产页/引导页/规则页文案改造
- HjfQueueProgress/HjfRefundNotice/HjfAssetCard 组件改造
- 推广中心嵌入佣金进度摘要
- hjfMockData.js 全量更新（公排字段→佣金字段）
Phase6 Admin 增强：
- 用户列表新增 frozen_points/available_points 列及不考核操作按钮
- hjfPoints.js USE_MOCK=false 对接真实积分日志接口
Phase7 配置文档：
- docs/fsgx-phase7-config-checklist.md 后台配置与全链路验收清单
Made-with: Cursor
312 lines
13 KiB
Vue
312 lines
13 KiB
Vue
<template>
|
|
<view :style="[boxStyle]" v-if="!dataConfig.isHide">
|
|
<view class="p-24" :style="[boxContentStyle]" @tap="goRank">
|
|
<view class="flex-between-center">
|
|
<text class="fs-32 fw-500" v-if="titleConfig">{{ titleTxtConfig }}</text>
|
|
<image :src="titleImg" class="w-102 h-32" v-else></image>
|
|
<text class="fs-24 text--w111-999" :style="[headerBntColor]">
|
|
{{ headerBtnText }}
|
|
<text class="iconfont icon-ic_rightarrow fs-24"></text>
|
|
</text>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full mt-32" show-scrollbar="false" v-if="styleConfig == 0">
|
|
<view class="inline-block mr-20">
|
|
<view class="rank-card" :style="[rankCardStyle]">
|
|
<view class="fs-28 lh-40rpx fw-600 flex-y-center" :style="[rankItemTitleStyle]">
|
|
<text class="iconfont icon-ic_fire fs-32"></text>
|
|
<text class="pl-8">销量榜</text>
|
|
</view>
|
|
<view class="rd-12rpx bg--w111-fff mt-18 p-14 h-400" v-if="sales.length">
|
|
<view class="rank-pro-item flex-y-center" v-for="(item, index) in sales" :key="index">
|
|
<view class="w-108 h-108 relative">
|
|
<easy-loadimage :image-src="item.image" width="108rpx" height="108rpx" :borderRadius="imgStyle"></easy-loadimage>
|
|
<view class="rank_count fs-24 text--w111-fff flex-center" :class="'rank-count' + (index + 1)">{{ index + 1 }}</view>
|
|
</view>
|
|
<view class="pl-16">
|
|
<view class="w-180 line1 fs-26 lh-36rpx mb-8">{{ item.store_name }}</view>
|
|
<baseMoney :money="item.price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="inline-block mr-20">
|
|
<view class="rank-card" :style="[rankCardStyle]">
|
|
<view class="fs-28 lh-40rpx fw-600 flex-y-center" :style="[rankItemTitleStyle]">
|
|
<text class="iconfont icon-ic_fire fs-32"></text>
|
|
<text class="pl-8">收藏榜</text>
|
|
</view>
|
|
<view class="rd-12rpx bg--w111-fff mt-18 p-14 h-400" v-if="collect.length">
|
|
<view class="rank-pro-item flex-y-center" v-for="(item, index) in collect" :key="index">
|
|
<view class="w-108 h-108 relative">
|
|
<easy-loadimage :image-src="item.image" width="108rpx" height="108rpx" :borderRadius="imgStyle"></easy-loadimage>
|
|
<view class="rank_count fs-24 text--w111-fff flex-center" :class="'rank-count' + (index + 1)">{{ index + 1 }}</view>
|
|
</view>
|
|
<view class="pl-16">
|
|
<view class="w-130 line1 fs-26 lh-36rpx mb-8">{{ item.store_name }}</view>
|
|
<baseMoney :money="item.price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="inline-block mr-20">
|
|
<view class="rank-card" :style="[rankCardStyle]">
|
|
<view class="fs-28 lh-40rpx fw-600 flex-y-center" :style="[rankItemTitleStyle]">
|
|
<text class="iconfont icon-ic_fire fs-32"></text>
|
|
<text class="pl-8">好评榜</text>
|
|
</view>
|
|
<view class="rd-12rpx bg--w111-fff mt-18 p-14 h-400" v-if="star.length">
|
|
<view class="rank-pro-item flex-y-center" v-for="(item, index) in star" :key="index">
|
|
<view class="w-108 h-108 relative">
|
|
<easy-loadimage :image-src="item.image" width="108rpx" height="108rpx" :borderRadius="imgStyle"></easy-loadimage>
|
|
<view class="rank_count fs-24 text--w111-fff flex-center" :class="'rank-count' + (index + 1)">{{ index + 1 }}</view>
|
|
</view>
|
|
<view class="pl-16">
|
|
<view class="w-130 line1 fs-26 lh-36rpx mb-8">{{ item.store_name }}</view>
|
|
<baseMoney :money="item.price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- <scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full mt-28"
|
|
show-scrollbar="false" v-else>
|
|
<view class="inline-block mr-20" v-for="item in 4" :key="item">
|
|
<view>
|
|
<view class="w-204 h-204 relative">
|
|
<image class="w-full h-full rd-16rpx" src="https://test-pro30.crmeb.net/uploads/thumb_water/0998eb5cef0946cc00eb5f0e17ca3e94.png"></image>
|
|
<image class="abs-lt w-72 h-72"
|
|
:src="`${imgHost}/statics/images/product/rank_icon${item}.png`" v-if="item < 4"></image>
|
|
</view>
|
|
<view class="w-204 mt-20 mb-10 fs-26 line1">小米新款高配说不定是你的房间看</view>
|
|
<baseMoney money="350.00" symbolSize="20" integerSize="28" decimalSize="28" color="#e93323" weight></baseMoney>
|
|
</view>
|
|
</view>
|
|
</scroll-view> -->
|
|
<view class="mt-26" v-else>
|
|
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full mt-20" show-scrollbar="false">
|
|
<view class="inline-block type-3 rd-16rpx mr-24" :style="[rankCardStyle]" v-if="sales.length">
|
|
<view class="fs-26 fw-500" :style="[rankItemTitleStyle]">销量榜</view>
|
|
<view class="flex mt-20">
|
|
<view class="w-296 h-296 relative mr-12">
|
|
<image :src="sales[0].image" class="w-full h-full" :style="{ borderRadius: imgStyle }"></image>
|
|
<image class="abs-lt w-72 h-72" :src="`${imgHost}/statics/images/product/rank_icon1.png`"></image>
|
|
</view>
|
|
<view>
|
|
<view class="relative">
|
|
<easy-loadimage :image-src="sales[1].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
|
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon2.png`"></image>
|
|
</view>
|
|
<view class="w-142 h-142 relative mt-12" v-if="sales.length > 2">
|
|
<easy-loadimage :image-src="sales[2].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
|
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon3.png`"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mt-20 fs-26 w-280 line1">{{ sales[0].store_name }}</view>
|
|
<view class="flex items-baseline mt-10">
|
|
<baseMoney :money="sales[0].price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
|
<text class="fs-20 text--w111-999 text-line pl-8">¥{{ sales[0].ot_price || '' }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="inline-block type-3 rd-16rpx mr-24" :style="[rankCardStyle]" v-if="star.length">
|
|
<view class="fs-26 fw-500" :style="[rankItemTitleStyle]">好评榜</view>
|
|
<view class="flex mt-20">
|
|
<view class="w-296 h-296 relative mr-12">
|
|
<image :src="star[0].image" class="w-full h-full" :style="{ borderRadius: imgStyle }"></image>
|
|
<image class="abs-lt w-72 h-72" :src="`${imgHost}/statics/images/product/rank_icon1.png`"></image>
|
|
</view>
|
|
<view>
|
|
<view class="w-142 h-142 relative">
|
|
<easy-loadimage :image-src="star[1].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
|
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon2.png`"></image>
|
|
</view>
|
|
<view class="w-142 h-142 relative mt-12" v-if="sales.length > 2">
|
|
<easy-loadimage :image-src="star[2].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
|
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon3.png`"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mt-20 fs-26 w-280 line1">{{ star[0].store_name }}</view>
|
|
<view class="flex items-baseline mt-10">
|
|
<baseMoney :money="star[0].price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
|
<text class="fs-20 text--w111-999 text-line pl-8">¥{{ star[0].ot_price }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="inline-block type-3 rd-16rpx mr-24" :style="[rankCardStyle]" v-if="collect.length">
|
|
<view class="fs-26 fw-500" :style="[rankItemTitleStyle]">收藏榜</view>
|
|
<view class="flex mt-20">
|
|
<view class="w-296 h-296 relative mr-12">
|
|
<image :src="collect[0].image" class="w-full h-full" :style="{ borderRadius: imgStyle }"></image>
|
|
<image class="abs-lt w-72 h-72" :src="`${imgHost}/statics/images/product/rank_icon1.png`"></image>
|
|
</view>
|
|
<view>
|
|
<view class="w-142 h-142 relative">
|
|
<easy-loadimage :image-src="collect[1].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
|
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon2.png`"></image>
|
|
</view>
|
|
<view class="w-142 h-142 relative mt-12" v-if="collect.length > 2">
|
|
<easy-loadimage :image-src="collect[2].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
|
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon3.png`"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mt-20 fs-26 w-280 line1">{{ collect[0].store_name }}</view>
|
|
<view class="flex items-baseline mt-10">
|
|
<baseMoney :money="collect[0].price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
|
<text class="fs-20 text--w111-999 text-line pl-8">¥{{ collect[0].ot_price }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { HTTP_REQUEST_URL } from '@/config/app';
|
|
import { diyRankApi } from '@/api/activity.js';
|
|
export default {
|
|
name: 'ranking',
|
|
props: {
|
|
dataConfig: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
imgHost: HTTP_REQUEST_URL,
|
|
collect: [],
|
|
sales: [],
|
|
star: []
|
|
};
|
|
},
|
|
computed: {
|
|
boxStyle() {
|
|
return {
|
|
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
|
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
|
background: this.dataConfig.bottomBgColor.color[0].item
|
|
};
|
|
},
|
|
boxContentStyle() {
|
|
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
|
if (this.dataConfig.fillet.type) {
|
|
borderRadius = `${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${
|
|
this.dataConfig.fillet.valList[2].val * 2
|
|
}rpx`;
|
|
}
|
|
return {
|
|
borderRadius,
|
|
background: `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`
|
|
};
|
|
},
|
|
styleConfig() {
|
|
return this.dataConfig.styleConfig.tabVal;
|
|
},
|
|
/*标题是文本还是图片*/
|
|
titleConfig() {
|
|
return this.dataConfig.titleConfig.tabVal;
|
|
},
|
|
/*标题文本*/
|
|
titleTxtConfig() {
|
|
return this.dataConfig.titleTxtConfig.value;
|
|
},
|
|
/*标题图片*/
|
|
titleImg() {
|
|
return this.dataConfig.imgConfig.url;
|
|
},
|
|
/*卡片颜色和圆角*/
|
|
rankCardStyle() {
|
|
let filletBg = this.dataConfig.filletBg.type;
|
|
let valListBg = this.dataConfig.filletBg.valList;
|
|
let filletValBg = this.dataConfig.filletBg.val;
|
|
console.log(filletBg, 'filletBg');
|
|
return {
|
|
'border-radius': filletBg ? valListBg[0].val + 'px ' + valListBg[1].val + 'px ' + valListBg[3].val + 'px ' + valListBg[2].val + 'px' : filletValBg + 'px',
|
|
background: `linear-gradient(90deg,${this.dataConfig.listBgColor.color[0].item} 0%,${this.dataConfig.listBgColor.color[1].item} 100%)`
|
|
};
|
|
},
|
|
/*商品图片圆角样式*/
|
|
imgStyle() {
|
|
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
|
if (this.dataConfig.filletImg.type) {
|
|
borderRadius = `${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${
|
|
this.dataConfig.filletImg.valList[2].val * 2
|
|
}rpx`;
|
|
}
|
|
return borderRadius;
|
|
},
|
|
rankItemTitleStyle() {
|
|
return {
|
|
color: this.dataConfig.toneConfig.tabVal ? this.dataConfig.classColor.color[0].item : 'var(--view-theme)'
|
|
};
|
|
},
|
|
/* 价格颜色 */
|
|
priceColor() {
|
|
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.goodsPriceColor.color[0].item : 'var(--view-theme)';
|
|
},
|
|
/*头部按钮样式*/
|
|
headerBntColor() {
|
|
return {
|
|
color: this.dataConfig.headerBntColor.color[0].item,
|
|
fontSize: `${this.dataConfig.bntNumber.val * 2}rpx`
|
|
};
|
|
},
|
|
headerBtnText() {
|
|
return this.dataConfig.rightBntConfig.value;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
getList() {
|
|
diyRankApi().then((res) => {
|
|
this.collect = res.data.collect;
|
|
this.sales = res.data.sales;
|
|
this.star = res.data.star;
|
|
});
|
|
},
|
|
goRank() {
|
|
uni.navigateTo({
|
|
url: '/pages/columnGoods/rank/index'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.rank-card {
|
|
width: 372rpx;
|
|
padding: 22rpx 16rpx 18rpx;
|
|
}
|
|
.rank_count {
|
|
width: 30rpx;
|
|
height: 32rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-size: cover;
|
|
}
|
|
.rank-count1 {
|
|
background-image: url('@/static/img/rank1_icon.png');
|
|
}
|
|
.rank-count2 {
|
|
background-image: url('@/static/img/rank2_icon.png');
|
|
}
|
|
.rank-count3 {
|
|
background-image: url('@/static/img/rank3_icon.png');
|
|
}
|
|
.type-3 {
|
|
padding: 20rpx 36rpx 20rpx 18rpx;
|
|
}
|
|
.rank-pro-item ~ .rank-pro-item {
|
|
margin-top: 16rpx;
|
|
}
|
|
</style>
|