jone/crmeb-mp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
crmeb-mp/pages/index/components/goodList.vue
karlcarlo a5c5d753b6 feat: 添加静态资源文件及基础组件 
- 新增大量图片资源，包括图标、背景图、海报等，用于页面展示
- 添加字体文件及样式配置，支持自定义字体
- 引入 uni-ui 组件库，包括图标、弹窗、日期选择器等常用组件
- 添加网络状态监听、加密工具等基础工具函数
- 配置 Vuex 状态管理，包括购物车数量、热门搜索词等
- 增加页面组件，如用户协议、分销信息、提现状态等
- 配置项目构建和忽略文件，优化开发体验
2026-02-26 17:59:51 +08:00

793 lines
31 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view :style="[boxStyle]" v-if="tempArr.length && !dataConfig.isHide">
<view>
<!-- 单列 -->
<view v-if="goodStyleConfig == 0">
<view class="w-full flex justify-between item bg--w111-fff p-20"
v-for="(item,index) in tempArr" :key="index"
@tap="goDetail(item)">
<easy-loadimage
:image-src="item.image"
:borderSrc="item.activity_frame.image"
width="224rpx"
height="224rpx"
:borderRadius="imgStyle"></easy-loadimage>
<view class="flex-1 flex-col justify-between pl-20">
<view class="w-full fs-28 h-80 lh-40rpx line2"
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
<BaseTag
:text="label.label_name"
:color="label.color"
:background="label.bg_color"
:borderColor="label.border_color"
:circle="label.border_color ? true : false"
:imgSrc="label.icon"
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
</view>
<view class="flex-between-center" v-if="onlyShowPrice">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor"></baseMoney>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
<view v-else>
<view class="flex-y-center mt-4">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
</view>
</view>
<view class="flex justify-between items-end">
<view class="flex-y-center">
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
<text class="fs-22 text--w111-999 pl-16" v-if="checkboxInfo.includes(4)">评分{{item.star}}</text>
</view>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 两列瀑布流 -->
<view class="wf-page" v-if="goodStyleConfig == 1">
<!-- left -->
<view class="w-full">
<view id="left" v-if="leftList.length">
<view v-for="(item,index) in leftList" :key="index" class="wf-item" :style="[wfItemStyle]" @tap="goDetail(item)">
<view class='pictrue'>
<easy-loadimage
mode="widthFix"
:image-src="item.image"
:borderSrc="item.activity_frame.image"
width="100%"
:borderRadius="imgStyle"></easy-loadimage>
</view>
<view class="info_box">
<view class="w-full line2 fs-28 text--w111-333 lh-40rpx"
v-if="checkboxInfo.includes(0)" :style="[productStyle]">
<text v-if="item.brand_name" class="brand-tag">{{ item.brand_name }}</text>
{{item.store_name}}</view>
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
<BaseTag
:text="label.label_name"
:color="label.color"
:background="label.bg_color"
:borderColor="label.border_color"
:circle="label.border_color ? true : false"
:imgSrc="label.icon"
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
</view>
<view class="flex-between-center mt-20" v-if="onlyShowPrice">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor"></baseMoney>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
<view v-else>
<view class="flex-y-center mt-8">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
</view>
</view>
<view class="flex-between-center mt-20">
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- right -->
<view class="w-full">
<view id="right" v-if="rightList.length">
<view v-for="(item,index) in rightList" :key="index"
class="wf-item" :style="[wfItemStyle]" @tap="goDetail(item)">
<view class='pictrue'>
<easy-loadimage
mode="widthFix"
:image-src="item.image"
:borderSrc="item.activity_frame.image"
width="100%"
:borderRadius="imgStyle"></easy-loadimage>
</view>
<view class="info_box">
<view class="w-full line2 fs-28 text--w111-333 lh-40rpx"
v-if="checkboxInfo.includes(0)" :style="[productStyle]">
<text v-if="item.brand_name" class="brand-tag">{{ item.brand_name }}</text>
{{item.store_name}}</view>
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
<BaseTag
:text="label.label_name"
:color="label.color"
:background="label.bg_color"
:borderColor="label.border_color"
:circle="label.border_color ? true : false"
:imgSrc="label.icon"
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
</view>
<view class="flex-between-center mt-20" v-if="onlyShowPrice">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor"></baseMoney>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
<view v-else>
<view class="flex-y-center mt-8">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
</view>
</view>
<view class="flex-between-center mt-20">
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 两列展示(横向) -->
<view class="pt-32 pr-24 pb-32 pl-24" :style="[moduleColor]" v-if="goodStyleConfig == 3">
<view class="grid-column-2 grid-gap-20rpx">
<view class="flex" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
<easy-loadimage
:image-src="item.image"
:borderSrc="item.activity_frame.image"
width="144rpx"
height="144rpx"
:borderRadius="imgStyle"></easy-loadimage>
<view class="flex-1 pl-20">
<view class="w-full fs-26 h-72 lh-36rpx line2 mb-20"
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
</view>
</view>
</view>
</view>
<!-- 三列 -->
<view class="pt-32 pr-24 pb-32 pl-24" :style="[moduleColor]" v-if="goodStyleConfig == 2">
<view class="grid-column-3 grid-gap-20rpx">
<view v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
<easy-loadimage
:image-src="item.image"
:borderSrc="item.activity_frame.image"
width="100%"
height="210rpx"
:borderRadius="imgStyle"></easy-loadimage>
<view class="w-full fs-28 h-80 lh-40rpx line2 mt-20"
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
<view class="flex-between-center mt-14">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 大图展示 -->
<view v-if="goodStyleConfig ==4">
<view class="w-full item" v-for="(item,index) in tempArr" :key="index"
@tap="goDetail(item)">
<easy-loadimage
:image-src="item.image"
width="100%"
height="360rpx"
:borderRadius="imgStyle"></easy-loadimage>
<view class="rd-b-24rpx p-24 bg--w111-fff">
<view class="w-full line1 fs-28 text--w111-333 lh-40rpx mt-22"
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
<BaseTag
:text="label.label_name"
:color="label.color"
:background="label.bg_color"
:borderColor="label.border_color"
:circle="label.border_color ? true : false"
:imgSrc="label.icon"
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
</view>
<view class="flex-between-center" v-if="onlyShowPrice">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor"></baseMoney>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
<view v-else>
<view class="flex-y-center mt-8">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8"
v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
</view>
</view>
<view class="flex justify-between items-end">
<view class="flex-y-center">
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
<text class="fs-22 text--w111-999 pl-16" v-if="checkboxInfo.includes(4)">评分{{item.star}}</text>
</view>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 横向滑动 -->
<view class="pt-32 pb-32 pl-24" :style="[moduleColor]" v-if="goodStyleConfig == 5">
<scroll-view scroll-x="true" show-scrollbar="false"
class="white-nowrap vertical-middle w-full">
<view class="inline-block mr-20" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
<easy-loadimage
:image-src="item.image"
:borderSrc="item.activity_frame.image"
width="200rpx"
height="200rpx"
:borderRadius="imgStyle"></easy-loadimage>
<view class="w-200 fs-28 h-80 lh-40rpx line2 break_word mt-20"
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
<view class="flex-between-center mt-8">
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_increase fs-26"></text>
</view>
</view>
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
<view class="flex-center cart-btn">
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<productWindow
:attr="attr"
:isShow='1'
:iSplus='1'
:iScart='1'
:fangda="false"
type="2"
:storeInfo="storeInfo"
@myevent="onMyEvent"
@ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNumDuo" @attrVal="attrVal"
@iptCartNum="iptCartNum" @goCat="goCatNum" id='product-window' :is_vip="is_vip"></productWindow>
</view>
</template>
<script>
import { getProductslist, getAttr } from '@/api/store.js';
import skuSelect from '@/mixins/skuSelect.js'
import { toLogin } from '@/libs/login.js';
import { mapGetters, mapState } from 'vuex';
import { getCartCounts } from '@/api/order.js';
import { goShopDetail } from '@/libs/order.js';
import productWindow from '@/components/productWindow';
export default {
name: 'goodList',
props: {
dataConfig: {
type: Object,
default: () => {}
},
isSortType: {
type: String | Number,
default: 0
}
},
components: {
productWindow
},
mixins: [skuSelect],
data() {
return {
tempArr: [],
type:0,
attr: {
cartAttr: false,
productAttr: [],
productSelect: {}
},
id: 0,
productValue: [],
attrValue: '', //已选属性
storeName: '', //多属性产品名称
is_vip: 0, //是否是会员
storeInfo: {},
allList: [], // 全部列表
leftList: [], // 左边列表
rightList: [], // 右边列表
mark: 0, // 列表标记
boxHeight: [], // 下标0和1分别为左列和右列高度
updateNum:10
};
},
watch: {
// 监听列表数据变化
tempArr: {
handler(nVal,oVal){
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
if (!this.tempArr.length ||
(this.tempArr.length === this.updateNum && this.tempArr.length <= this.allList.length)) {
this.allList = [];
this.leftList = [];
this.rightList = [];
this.boxHeight = [];
this.mark = 0;
}
// 如果列表有值，调用waterfall方法
if (this.tempArr.length) {
this.allList = this.tempArr;
this.leftList = [];
this.rightList = [];
this.boxHeight = [];
this.allList.forEach((v, i) => {
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
if(i % 2){
this.rightList.push(v);
}else{
this.leftList.push(v);
}
}
});
if(this.allList.length < 3){
this.mark = this.allList.length+1;
}else if(this.allList.length <= 7){
this.mark = this.allList.length - 1;
}else{
this.mark = this.allList.length - 2;
}
if(this.mark < this.allList.length){
this.waterFall()
}
}
},
immediate: true,
deep:true
},
// 监听标记，当标记发生变化，则执行下一个item排序
mark() {
const len = this.allList.length;
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
this.waterFall();
}
},
dataConfig() {
this.productslist();
}
},
computed:{
...mapState({
cartNum: state => state.indexData.cartNum
}),
...mapGetters(['isLogin', 'uid', 'cartNum']),
/*外层盒子样式*/
boxStyle(){
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,
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,
}
},
styleConfig(){
return this.dataConfig.styleConfig.tabVal
},
wfItemStyle(){
let windowWidth = uni.getWindowInfo().windowWidth;
return {
width: (windowWidth - 10 - (this.dataConfig.prConfig.val * 2))/2 + 'px'
}
},
/*商品图片圆角样式*/
imgStyle(){
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
if (this.dataConfig.styleConfig.tabVal == 1) {
borderRadius = `${this.dataConfig.filletImg.val * 2}rpx ${this.dataConfig.filletImg.val * 2}rpx 0 0`;
}
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`;
if (this.dataConfig.styleConfig.tabVal == 1) {
borderRadius = `${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx 0 0`;
}
}
return borderRadius
},
/*商品名称样式*/
productStyle(){
return {
color: this.dataConfig.goodsNameColor.color[0].item,
fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : '500'
}
},
/* 展示信息 */
checkboxInfo(){
return this.dataConfig.checkboxInfo.type
},
/* 价格颜色 */
priceColor(){
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.goodsPriceColor.color[0].item : 'var(--view-theme)'
},
/* 原价颜色 */
otPriceColor(){
return this.dataConfig.goodsPriceColor.color[0].item
},
btnStyle(){
return this.dataConfig.bntStyleConfig.tabVal
},
showBtn(){
return this.dataConfig.cartConfig.tabVal
},
/* 按钮颜色 */
btnBgColor(){
return {
background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.bntBgColor.color[0].item} 0%,${this.dataConfig.bntBgColor.color[1].item} 100%)`: 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)'
}
},
btnTextColor(){
return {
color: '#FFFFFF',
background: this.dataConfig.toneCartConfig.tabVal ? `linear-gradient(90deg, ${this.dataConfig.bntBgColor.color[0].item} 0%, ${this.dataConfig.bntBgColor.color[1].item} 100%)` : 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)',
}
},
/*商品数量*/
numberConfig(){
return this.dataConfig.numberConfig.val
},
/*商品模板*/
goodStyleConfig(){
return this.dataConfig.styleConfig.tabVal
},
/*检索条件 0综合 1销量 2价格*/
goodsSort(){
return this.dataConfig.goodsSort.tabVal
},
/*按照什么方式选择商品 0 指定商品 1 指定品牌 2指定分类 3 商品标签 */
typeConfig(){
return this.dataConfig.typeConfig.activeValue
},
bntConfig(){
return this.dataConfig.bntConfig.tabVal
},
onlyShowPrice(){
if(this.checkboxInfo.toString() == '0,2' || this.checkboxInfo.toString() == '2,0' || this.checkboxInfo.toString() == '2'){
return true
}else{
return false
}
},
moduleColor(){
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%)`
}
}
},
created() {
// #ifndef APP-PLUS
// this.$eventHub.$on('product_video_observe', () => {
// this.observeVideo();
// });
// #endif
},
mounted() {
this.productslist();
},
methods: {
observeVideo() {
let observer = uni.createIntersectionObserver(this, { observeAll: true });
observer.relativeToViewport().observe('.video', res => {
if (res.intersectionRatio) {
uni.createVideoContext(res.id, this).play();
} else{
uni.createVideoContext(res.id, this).pause();
}
});
},
productslist() {
let limit = this.$config.LIMIT;
let data = {};
if (this.typeConfig == 1) {
data = {
ids: this.dataConfig.goodsList.ids.join(','),
};
} else {
data = {
priceOrder: this.goodsSort == 2 ? 'desc' : '',
salesOrder: this.goodsSort == 1 ? 'desc' : '',
brand_id: this.typeConfig == 2 ? this.dataConfig.brandList.brandVal.join(',') : '',
store_label_id: this.typeConfig == 4 ? this.dataConfig.goodsLabel.activeValue.join(',') : '',
cate_id: this.typeConfig == 3 ? this.dataConfig.classList.classVal.join(',') : '',
page:1,
limit: this.numberConfig
};
}
getProductslist(data).then(res => {
this.tempArr = res.data;
});
},
goDetail(item) {
goShopDetail(item, this.$store.state.app.uid).catch(res => {
uni.navigateTo({
url: `/pages/goods_details/index?id=${item.id}`
});
});
},
// 商品详情接口；
getAttrs(id) {
let that = this;
getAttr(id, 0).then(res => {
that.$set(that.attr, 'productAttr', res.data.productAttr);
that.$set(that, 'productValue', res.data.productValue);
that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
that.$set(that, 'storeInfo', res.data.storeInfo);
that.DefaultSelect();
})
},
addCartChange(item, index){
if(this.bntConfig == 1){
if(item.spec_type){
this.goCartDuo(item);
}else{
this.goCartDan(item,index);
}
}else{
this.goDetail(item);
}
},
getCartNum() {
let that = this;
getCartCounts().then(res => {
this.$store.commit('indexData/setCartNum', res.data.count)
});
},
// 瀑布流排序
waterFall() {
const i = this.mark;
if (i == 0) {
// 初始化，从左边开始插入
this.leftList.push(this.allList[i]);
// 更新左边列表高度
this.getViewHeight(0);
} else if (i == 1) {
// 第二个item插入，默认为右边插入
this.rightList.push(this.allList[i]);
// 更新右边列表高度
this.getViewHeight(1);
} else {
// 根据左右列表高度判断下一个item应该插入哪边
if(!this.boxHeight.length){
this.rightList.length < this.leftList.length
? this.rightList.push(this.allList[i])
: this.leftList.push(this.allList[i]);
} else {
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
if (leftOrRight) {
this.rightList.push(this.allList[i])
} else {
this.leftList.push(this.allList[i])
}
}
// 更新插入列表高度
this.getViewHeight();
}
},
// 获取列表高度
getViewHeight() {
// 使用nextTick，确保页面更新结束后，再请求高度
this.$nextTick(() => {
setTimeout(()=>{
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
res ? this.boxHeight[1] = res.height : '';
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
res ? this.boxHeight[0] = res.height : '';
this.mark = this.mark + 1;
}).exec();
}).exec();
},100)
})
},
}
};
</script>
<style lang="scss" scoped>
// $page-padding: 10px;
// $grid-gap: 10px;
.wf-page {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20rpx;
}
.wf-item {
// width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
padding-bottom: 20rpx;
}
.wf-page1 .wf-item{
margin-top: 20rpx;
background-color: #fff;
border-radius: 20rpx;
padding-bottom: 0;
}
.item ~ .item{
margin-top: 32rpx;
}
.wf-page .wf-item .pictrue{
max-height: 560rpx;
overflow-y: hidden;
}
.info_box{
padding: 16rpx 20rpx;
border-radius: 0 0 20rpx 20rpx;
background-color: #fff;
}
.bg--w111-484643{
background: linear-gradient(90deg, #484643 0%, #1F1B17 100%);
}
.text--w111-FDDAA4{
color: #FDDAA4;
}
.svip_rd{
border-radius: 14rpx 0 8rpx 14rpx;
}
.cart-btn{
// background:rgba(255,255,255,0.9);
width: 100%;
height: 100%;
}
</style>
Reference in New Issue View Git Blame Copy Permalink