feat(uniapp_v2): 二开功能迁移与小程序主包优化
- 从 uniapp 迁移 HJF 页面、API、组件及用户/订单相关改动 - queue、assets 使用独立分包以降低主包体积 - 修复首页单根节点与支付结果页 v-if 链 - 关闭 HjfDemoPanel 全局注册；uniNoticeBar 注释 $getAppWebview 避免 __webviewId__ 报错 - 配置域名与 manifest 应用名称；cache/store 防御性处理 Made-with: Cursor
This commit is contained in:
apple
471
pro_v3.5.1/view/uniapp_v2/pages/index/components/seckill.vue
Normal file
471
pro_v3.5.1/view/uniapp_v2/pages/index/components/seckill.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<!-- 秒杀列表 -->
|
||||
<view :style="[boxStyle]" v-if="spikeList.length && !dataConfig.isHide">
|
||||
<view :style="[boxContentStyle]">
|
||||
<!-- 秒杀头部 -->
|
||||
<view class="w-full h-96 px-24 flex-between-center bg-cover" :style="[headerStyle]">
|
||||
<view class="flex-y-center">
|
||||
<text class="fs-32 lh-44rpx fw-500" :style="[titleStyle]" v-if="titleConfig">{{titleTxtConfig}}</text>
|
||||
<image :src="titleImg" class="w-140 h-32" v-else></image>
|
||||
<text class="fs-26 text--w111-999 lh-36rpx pl-20" :style="[tipsColor]">距离结束</text>
|
||||
<countDown
|
||||
:is-day="false"
|
||||
tip-text=" "
|
||||
day-text=" "
|
||||
hour-text=":"
|
||||
minute-text=":"
|
||||
second-text=" "
|
||||
:datatime="datatime"
|
||||
:bgColor="numberBgColor"
|
||||
:colors="numberColor"
|
||||
:dotColor="dotColor"></countDown>
|
||||
</view>
|
||||
<view class="flex-y-center fs-24 text--w111-999" :style="[headerBntColor]"
|
||||
@tap="goPage('/pages/activity/goods_seckill/index')">
|
||||
<text>{{rightBntTxt}}</text>
|
||||
<text class="iconfont icon-ic_rightarrow fs-24"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 单列 -->
|
||||
<view class="pt-32 pr-20 pb-32 pl-20" :style="[contentBox]"
|
||||
v-if="goodStyleConfig == 0">
|
||||
<view class="w-full flex justify-between item"
|
||||
v-for="(item,index) in spikeList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:border-src="item.activity_image"
|
||||
width="240rpx"
|
||||
height="240rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="flex-1 flex-col justify-between pl-20 h-240">
|
||||
<view>
|
||||
<view class="w-full fs-28 h-80 lh-40rpx line2" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="w-full flex-y-center mt-20" v-if="checkboxInfo.includes(1)">
|
||||
<view class="progress relative">
|
||||
<view class="active" :style="{'width': item.percent +'%',background:progressBgColor}"></view>
|
||||
<image src="@/static/img/lightning.png" class="lightning"
|
||||
:style="{left: item.percent == 100 ? '107px' : item.percent +'%'}"></image>
|
||||
</view>
|
||||
<text class="fs-22 lh-30rpx pl-12" :style="{color: priceColor}">{{item.percent +'%'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-end">
|
||||
<view class="flex-col">
|
||||
<baseMoney
|
||||
:money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36" weight
|
||||
:color="priceColor"
|
||||
preFix="秒杀价"
|
||||
preFixSize="24"
|
||||
:textColor="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<text class="text-line fs-28 pt-14 Regular"
|
||||
v-if="checkboxInfo.includes(3)"
|
||||
:style="[otPriceColor]">¥{{item.ot_price.toString().split('.')[1] ? item.ot_price : item.ot_price + '.00'}}</text>
|
||||
</view>
|
||||
<view class='w-144 h-56 rd-30rpx flex-center fs-24'
|
||||
v-if="!showBtn" :style="[btnBgColor]">去抢购</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两列 -->
|
||||
<view class="grid-column-2 grid-gap-22rpx pt-32 pr-20 pb-32 pl-20" v-if="goodStyleConfig == 1">
|
||||
<view v-for="(item,index) in spikeList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:border-src="item.activity_image"
|
||||
width="100%"
|
||||
height="324rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full line2 mt-16 fs-28 lh-40rpx"
|
||||
:style="[productStyle]" v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="flex justify-between items-end mt-10">
|
||||
<view class="flex-col">
|
||||
<baseMoney
|
||||
:money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<text class="text-line fs-28 text--w111-999 pt-14 Regular"
|
||||
v-if="checkboxInfo.includes(3)" :style="[otPriceColor]"
|
||||
>¥{{item.ot_price.toString().split('.')[1] ? item.ot_price : item.ot_price + '.00'}}</text>
|
||||
</view>
|
||||
<view class='w-144 h-56 rd-30rpx flex-center fs-24'
|
||||
v-if="!showBtn" :style="[btnBgColor]">去抢购</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 三列 -->
|
||||
<view class="grid-column-3 grid-gap-18rpx pt-32 pr-20 pb-32 pl-20" v-if="goodStyleConfig == 2">
|
||||
<view v-for="(item,index) in spikeList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:border-src="item.activity_image"
|
||||
width="100%"
|
||||
height="212rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full line1 mt-16 fs-26" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="price-box flex-center relative" v-if="checkboxInfo.includes(2)">
|
||||
<baseMoney :money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
color="#ffffff"
|
||||
></baseMoney>
|
||||
<image src="@/static/img/shandian.png" class="shandian"></image>
|
||||
</view>
|
||||
<view class="text-line fs-24 text--w111-999 Regular lh-32rpx mt-10"
|
||||
:style="[otPriceColor]" v-if="checkboxInfo.includes(3)"
|
||||
>¥{{item.ot_price.toString().split('.')[1] ? item.ot_price : item.ot_price + '.00'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 滑动 -->
|
||||
<scroll-view scroll-x="true" show-scrollbar="false"
|
||||
class="white-nowrap vertical-middle w-full pt-32 pb-32"
|
||||
v-if="goodStyleConfig == 3">
|
||||
<view class="inline-block ml-20" v-for="(item,index) in spikeList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:border-src="item.activity_image"
|
||||
width="224rpx"
|
||||
height="224rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-222 line1 mt-16 fs-26" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="flex justify-between items-end mt-16">
|
||||
<view>
|
||||
<baseMoney :money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<view class="text-line fs-24 text--w111-999 Regular lh-32rpx"
|
||||
:style="[otPriceColor]" v-if="checkboxInfo.includes(3)"
|
||||
>¥{{item.ot_price.toString().split('.')[1] ? item.ot_price : item.ot_price + '.00'}}</view>
|
||||
</view>
|
||||
<view class="qiang flex-center fs-24"
|
||||
v-if="!showBtn" :style="[btnBgColor]">抢</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countDown from '@/components/countDown';
|
||||
import {
|
||||
getSeckillIndexTime,
|
||||
getSeckillList
|
||||
} from '@/api/activity.js';
|
||||
export default {
|
||||
options: {
|
||||
styleIsolation: 'shared' ,
|
||||
},
|
||||
name: 'seckill',
|
||||
components:{
|
||||
countDown
|
||||
},
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType:{
|
||||
type: String | Number,
|
||||
default:0
|
||||
},
|
||||
pullReset:{
|
||||
type: Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datatime:'',
|
||||
spikeList: [],
|
||||
seckillTimeIndex:0,
|
||||
seckillTime: [],
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
pullReset(val){
|
||||
if(val == 1){
|
||||
this.getSeckillIndexTime();
|
||||
}
|
||||
}
|
||||
},
|
||||
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%)`,
|
||||
};
|
||||
},
|
||||
contentBox(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `0 0 ${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx`
|
||||
}else{
|
||||
borderRadius = `0 0 ${br} ${br}`
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
/*商品模板*/
|
||||
goodStyleConfig(){
|
||||
return this.dataConfig.goodStyleConfig.tabVal
|
||||
},
|
||||
styleConfig(){
|
||||
return this.dataConfig.styleConfig.tabVal
|
||||
},
|
||||
headerStyle(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx 0 0`
|
||||
}else{
|
||||
borderRadius = `${br} ${br} 0 0`
|
||||
}
|
||||
return {
|
||||
backgroundImage: this.styleConfig ? 'url(' + imgBgUrl + ')' : `linear-gradient(90deg,${this.dataConfig.headerBgColor.color[0].item} 0%,${this.dataConfig.headerBgColor.color[1].item} 100%)`,
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
/*标题是文本还是图片*/
|
||||
titleConfig(){
|
||||
return this.dataConfig.titleConfig.tabVal
|
||||
},
|
||||
/*标题文本*/
|
||||
titleTxtConfig(){
|
||||
return this.dataConfig.titleTxtConfig.value
|
||||
},
|
||||
/*标题图片*/
|
||||
titleImg(){
|
||||
return this.styleConfig ? this.titleUrl : this.titleColorUrl
|
||||
},
|
||||
titleColorUrl(){
|
||||
return this.dataConfig.imgColorConfig.url
|
||||
},
|
||||
titleUrl(){
|
||||
return this.dataConfig.imgConfig.url
|
||||
},
|
||||
titleStyle(){
|
||||
return {
|
||||
'font-style': this.dataConfig.titleText.tabVal == 2 ? 'italic' : '',
|
||||
'font-size': `${this.dataConfig.titleNumber.val * 2}rpx`,
|
||||
'font-weight': this.dataConfig.titleText.tabVal == 0 ? 'bold' : '',
|
||||
color: this.dataConfig.titleColor.color[0].item
|
||||
}
|
||||
},
|
||||
/*标题提示文字*/
|
||||
tipsColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.tipsColor.color[0].item : this.dataConfig.tipsColor2.color[0].item
|
||||
}
|
||||
},
|
||||
/*头部按钮文本*/
|
||||
rightBntTxt(){
|
||||
return this.dataConfig.rightBntConfig.value
|
||||
},
|
||||
/*头部按钮样式*/
|
||||
headerBntColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.headerBntColor.color[0].item : this.dataConfig.headerBntColor2.color[0].item,
|
||||
fontSize: `${this.dataConfig.bntNumber.val * 2}rpx`
|
||||
}
|
||||
},
|
||||
/*商品图片圆角样式*/
|
||||
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
|
||||
},
|
||||
/*商品名称样式*/
|
||||
productStyle(){
|
||||
return {
|
||||
color: this.dataConfig.goodsNameColor.color[0].item,
|
||||
fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : 'bold'
|
||||
}
|
||||
},
|
||||
/* 展示信息 */
|
||||
checkboxInfo(){
|
||||
return this.dataConfig.checkboxInfo.type
|
||||
},
|
||||
/* 价格颜色 */
|
||||
priceColor(){
|
||||
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.seckillPriceColor.color[0].item : 'var(--view-theme)'
|
||||
},
|
||||
/* 原价颜色 */
|
||||
otPriceColor(){
|
||||
return {
|
||||
color: this.dataConfig.goodsPriceColor.color[0].item
|
||||
}
|
||||
},
|
||||
showBtn(){
|
||||
return this.dataConfig.seckillConfig.tabVal
|
||||
},
|
||||
/* 按钮颜色 */
|
||||
btnBgColor(){
|
||||
return {
|
||||
background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.goodsBntColor.color[1].item} 0%,${this.dataConfig.goodsBntColor.color[0].item} 100%)`: 'linear-gradient(90deg, var(--view-gradient) 0%, var(--view-theme) 100%)',
|
||||
color: this.dataConfig.goodsBntTxtColor.color[0].item
|
||||
}
|
||||
},
|
||||
progressBgColor(){
|
||||
return this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.progressColor.color[0].item} 0%,${this.dataConfig.progressColor.color[1].item} 100%)`: 'linear-gradient(45deg, var(--view-gradient) 0%, var(--view-theme) 100%)'
|
||||
},
|
||||
/*倒计时背景色*/
|
||||
numberBgColor(){
|
||||
return this.styleConfig ? `linear-gradient(90deg, ${this.dataConfig.numberBgColor.color[0].item}, ${this.dataConfig.numberBgColor.color[1].item})` : this.dataConfig.numberBgColor2.color[0].item
|
||||
},
|
||||
numberColor(){
|
||||
return this.styleConfig ? this.dataConfig.numberColor.color[0].item : this.dataConfig.numberColor2.color[0].item
|
||||
},
|
||||
dotColor(){
|
||||
return this.styleConfig ? this.dataConfig.numberBgColor.color[0].item : this.dataConfig.numberBgColor2.color[0].item
|
||||
},
|
||||
/*商品数量*/
|
||||
numberConfig(){
|
||||
return this.dataConfig.numberConfig.val
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSeckillIndexTime();
|
||||
},
|
||||
methods: {
|
||||
goPage(url){
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
goDetails(item){
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/goods_details/index?id=' + item.id + '&type=1&time_id=' + this.timeList[this.active].id
|
||||
})
|
||||
},
|
||||
getSeckillIndexTime() {
|
||||
let limit = this.$config.LIMIT;
|
||||
let params = {
|
||||
page: 1,
|
||||
limit: this.numberConfig>=limit?limit:this.numberConfig,
|
||||
type: 'index'
|
||||
}
|
||||
getSeckillIndexTime().then(res => {
|
||||
this.timeList = res.data.seckillTime;
|
||||
this.active = res.data.seckillTimeIndex;
|
||||
if (res.data.seckillTimeIndex === -1) {
|
||||
return;
|
||||
}
|
||||
this.datatime = res.data.seckillTime[res.data.seckillTimeIndex].stop
|
||||
let id = res.data.seckillTime[res.data.seckillTimeIndex].id
|
||||
getSeckillList(id, params).then(({data}) => {
|
||||
this.spikeList = data
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Regular{
|
||||
font-family: 'Regular';
|
||||
}
|
||||
::v-deep .styleAll{
|
||||
padding: 0 8rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.bg-cover{
|
||||
background-size: cover;
|
||||
}
|
||||
.item ~ .item{
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.progress{
|
||||
width:240rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: rgba(253, 240, 237, 1);
|
||||
.active{
|
||||
height: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(45deg, #FF7931 0%, #E93323 100%);
|
||||
}
|
||||
.lightning{
|
||||
position: absolute;
|
||||
top: -2rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
.price-box{
|
||||
width: 150rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(45deg, var(--view-gradient) 0%, var(--view-theme) 100%);
|
||||
border-radius: 0px 8rpx 8rpx 0px;
|
||||
margin: 20rpx 0 0 10rpx;
|
||||
.shandian{
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 44rpx;
|
||||
top: 0;
|
||||
left: -10rpx;
|
||||
}
|
||||
}
|
||||
.qiang{
|
||||
width: 66rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(45deg, #FF7931 0%, #E93323 100%);
|
||||
border-radius: 0px 22rpx 22rpx 0px;
|
||||
position: relative;
|
||||
&:before{
|
||||
content:'';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -10rpx;
|
||||
width: 24rpx;
|
||||
height: 40rpx;
|
||||
background-image: url('@/static/img/shandian.png');
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user