535 lines
17 KiB
Vue
535 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view :data-theme="theme">
|
|||
|
|
<!-- 首页组合组件 -->
|
|||
|
|
<homeComb :bgInfo="bgInfo" v-if="showHomeComb && !merId" :dataConfig="homeCombData" @changeTab="changeTab"
|
|||
|
|
:isScrolled="isScrolled" :navIndex="navIndex" :isSmallPage="isSmallPage"></homeComb>
|
|||
|
|
<!-- 店铺组合组件 -->
|
|||
|
|
<merHomeComb :isSmallPage="isSmallPage" :bgInfo="bgInfo" v-if="showHomeComb && merId" :dataConfig="homeCombData"
|
|||
|
|
:isScrolled="isScrolled" :navIndex="navIndex" :merId="merId">
|
|||
|
|
</merHomeComb>
|
|||
|
|
<!-- 顶部搜索框 -->
|
|||
|
|
<headerSearch :isScrolled="isScrolled" :merId="merId" :isSmallPage="isSmallPage" v-if="showHeaderSerch" :dataConfig="headerSerchCombData">
|
|||
|
|
</headerSearch>
|
|||
|
|
<!-- 分类 -->
|
|||
|
|
<cateNav v-if="showCateNav" :dataConfig="cateNavData" @changeTab="changeTab"></cateNav>
|
|||
|
|
<view class="page_content skeleton">
|
|||
|
|
<view v-if="navIndex === 0">
|
|||
|
|
<view v-for="(item, index) in styleConfig" :key="index">
|
|||
|
|
<merHome v-if="item.name == 'homeStore'&&!item.isHide" :dataConfig="item" class="tui-skeleton-rect"
|
|||
|
|
:merchantInfo="merchantAPPInfo" :merId="merId" :isHome="true"></merHome>
|
|||
|
|
<!-- 新闻简报 -->
|
|||
|
|
<news v-if="item.name == 'news'&&!item.isHide" :dataConfig="item"></news>
|
|||
|
|
<!-- 导航组 -->
|
|||
|
|
<menus v-if="item.name == 'menus'&&!item.isHide" :dataConfig="item" :merId="merId"></menus>
|
|||
|
|
<!-- 文章列表 -->
|
|||
|
|
<articleList v-if="item.name == 'homeArticle'&&!item.isHide" :dataConfig="item">
|
|||
|
|
</articleList>
|
|||
|
|
<!-- 秒杀 -->
|
|||
|
|
<seckill-data v-if="item.name == 'seckill'&&!item.isHide" :dataConfig="item" :merId="merId"></seckill-data>
|
|||
|
|
<!-- 小程序直播 -->
|
|||
|
|
<!-- #ifdef MP -->
|
|||
|
|
<liveBroadcast v-if="item.name == 'liveBroadcast'&&!item.isHide" :dataConfig="item">
|
|||
|
|
</liveBroadcast>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- 优惠券 -->
|
|||
|
|
<coupon v-if="item.name == 'homeCoupon'&&!item.isHide" :dataConfig="item" :merId="merId"></coupon>
|
|||
|
|
<!-- 图片魔方 -->
|
|||
|
|
<pictureCube v-if="item.name == 'pictureCube'&&!item.isHide" :dataConfig="item" :merId="merId">
|
|||
|
|
</pictureCube>
|
|||
|
|
<!-- 热区 -->
|
|||
|
|
<hotSpot v-if="item.name == 'homeHotspot'&&!item.isHide" :dataConfig="item" :merId="merId"></hotSpot>
|
|||
|
|
<!-- 轮播图 -->
|
|||
|
|
<swiperBg v-if="item.name == 'swiperBg'&&!item.isHide" :dataConfig="item" :merId="merId"></swiperBg>
|
|||
|
|
<!-- 视频 -->
|
|||
|
|
<shortVideo v-if="item.name == 'video'&&!item.isHide" :dataConfig="item"></shortVideo>
|
|||
|
|
<!-- 店铺街 -->
|
|||
|
|
<merchant-list v-if="item.name == 'homeMerchant'&&!item.isHide"
|
|||
|
|
:dataConfig="item" :regionIds="regionIds"></merchant-list>
|
|||
|
|
<!-- 拼团 -->
|
|||
|
|
<group v-if="item.name == 'group'&&!item.isHide" :dataConfig="item" :merId="merId"></group>
|
|||
|
|
<!-- 积分 -->
|
|||
|
|
<intergralShop v-if="item.name == 'intergral'&&!item.isHide" :dataConfig="item">
|
|||
|
|
</intergralShop>
|
|||
|
|
<!-- 辅助线 -->
|
|||
|
|
<guide v-if="item.name == 'guide'&&!item.isHide" :dataConfig="item"></guide>
|
|||
|
|
<!-- 富文本-->
|
|||
|
|
<rich-text-editor v-if="item.name == 'richTextEditor'&&!item.isHide" :richTextVal="item.richText.val"
|
|||
|
|
:dataConfig="item"></rich-text-editor>
|
|||
|
|
<!-- 辅助空白-->
|
|||
|
|
<blank-page v-if="item.name == 'blankPage'&&!item.isHide" :dataConfig="item"></blank-page>
|
|||
|
|
<!-- 标题 -->
|
|||
|
|
<home-title v-if="item.name == 'titles'&&!item.isHide" :dataConfig="item" :merId="merId"></home-title>
|
|||
|
|
<!-- 逛逛 -->
|
|||
|
|
<discover v-if="item.name == 'homeDiscover'&&!item.isHide" :dataConfig="item"
|
|||
|
|
:isLogin="isLogin">
|
|||
|
|
</discover>
|
|||
|
|
<!-- 商品列表 圈层参数有特殊处理-->
|
|||
|
|
<goodList v-if="item.name == 'goodList'&&!item.isHide" :dataConfig="item" :merId="merId"
|
|||
|
|
:regionIds="regionIds" @detail="goDetail"></goodList>
|
|||
|
|
<!-- 选项卡商品列表-->
|
|||
|
|
<homeTab v-if="item.name == 'homeTab'&&!item.isHide" :dataConfig="item" @detail="goDetail" :merId="merId" :regionIds="regionIds">
|
|||
|
|
</homeTab>
|
|||
|
|
<member-card :merMemberInfo="merMemberInfo" v-if="item.name == 'memberCard'&&!item.isHide" @activate-membership="activateMembership" :merchantInfo="merchantAPPInfo" :configObj="item" :merId="merId">
|
|||
|
|
</member-card>
|
|||
|
|
<member-coupon v-if="item.name == 'memberCoupon'&&!item.isHide" @activate-membership="activateMembership" :merMemberInfo="merMemberInfo" :configObj="item" :merId="merId"></member-coupon>
|
|||
|
|
<member-benefits v-if="item.name == 'memberBenefits'&&!item.isHide" :merMemberInfo="merMemberInfo" :configObj="item" :merId="merId"></member-benefits>
|
|||
|
|
<member-recharge v-if="item.name == 'memberRecharge'&&!item.isHide" @activate-membership="activateMembership" :merMemberInfo="merMemberInfo" :configObj="item" :merId="merId"></member-recharge>
|
|||
|
|
<!-- 底部导航-->
|
|||
|
|
<page-footer v-if="item.name == 'footer'&&!item.isHide" :dataConfig="item" :isSmallPage="isSmallPage"
|
|||
|
|
:merId="merId" :fromTo="fromTo"></page-footer>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 分类页-->
|
|||
|
|
<view class="productList" v-if="navIndex === 1 && sortList.length>0">
|
|||
|
|
<view class="sort acea-row" :class="sortList.length ? '' : 'no_pad'"
|
|||
|
|
:style="{ marginTop: sortMarTop + 'px' }">
|
|||
|
|
<navigator hover-class="none"
|
|||
|
|
:url="'/pages/goods/goods_list/index?cid=' + item.id + '&title=' + item.name"
|
|||
|
|
class="item" v-for="(item, index) in sortList" :key="index">
|
|||
|
|
<view class="pictrue">
|
|||
|
|
<image :src="item.icon" class='slide-image tui-skeleton-rect'></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="text">{{ item.name }}</view>
|
|||
|
|
</navigator>
|
|||
|
|
<view class="item" @click="bindMore()" v-if="sortList.length >= 9">
|
|||
|
|
<view class="pictrues acea-row row-center-wrapper">
|
|||
|
|
<text class="iconfont icon-ic_more"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text">更多</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 推荐商品，分类商品列表-->
|
|||
|
|
<recommend v-if="categoryId>0 && isLoading" :key="categoryId" ref="recommendIndex"
|
|||
|
|
:categoryId='categoryId' :isShowTitle="isShowTitle" @getRecommendLength="getRecommendLength">
|
|||
|
|
</recommend>
|
|||
|
|
<view class='noCommodity' v-if="isNoCommodity&& navIndex > 0">
|
|||
|
|
<view class='pictrue'>
|
|||
|
|
<image :src="urlDomain+'crmebimage/presets/noShopper.png'"></image>
|
|||
|
|
</view>
|
|||
|
|
<text class="text-ccc">暂无商品</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 底部导航距离，做兼容处理的-->
|
|||
|
|
<view class="footerBottom"></view>
|
|||
|
|
<!-- #ifdef MP -->
|
|||
|
|
<aTip :isCustom="true" :text="wxText" :borderR="5"></aTip>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
|
|||
|
|
<!--加入会员-->
|
|||
|
|
<uni-popup ref="membershipRef" type="bottom" borderRadius="20px 20px 0 0">
|
|||
|
|
<join-membership @close="closeMembership" @handleSuccessful="handleSuccessful" :avatar="merchantAPPInfo.avatar" :name="merchantAPPInfo.name" :merId="merId"></join-membership>
|
|||
|
|
</uni-popup>
|
|||
|
|
<!--优惠券弹窗-->
|
|||
|
|
<uni-popup ref="couponRef" type="center" borderRadius="20px 20px 0 0">
|
|||
|
|
<coupon-pop @close="closeCoupon" :couponList="couponList"></coupon-pop>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { mapGetters } from "vuex";
|
|||
|
|
import aTip from "./addTips";
|
|||
|
|
import homeComb from "./homeComb";
|
|||
|
|
import tuiSkeleton from "@/components/base/tui-skeleton";
|
|||
|
|
import recommend from "@/components/base/recommend";
|
|||
|
|
import pageFooter from "@/components/pageFooter";
|
|||
|
|
import liveBroadcast from "./liveBroadcast";
|
|||
|
|
import couponDialog from "./couponDialog";
|
|||
|
|
import pictureCube from "./pictureCube";
|
|||
|
|
import coupon from "./coupon";
|
|||
|
|
import menus from "./menus";
|
|||
|
|
import headerSearch from "./headerSearch";
|
|||
|
|
import cateNav from "./cateNav";
|
|||
|
|
import goodList from "./goodList";
|
|||
|
|
import news from "./news";
|
|||
|
|
import articleList from "./articleList";
|
|||
|
|
import swiperBg from "./swiperBg";
|
|||
|
|
import richTextEditor from "./richTextEditor";
|
|||
|
|
import homeTab from "./homeTab";
|
|||
|
|
import intergralShop from "./intergralShop";
|
|||
|
|
import group from "./group";
|
|||
|
|
import hotSpot from "./hotSpot";
|
|||
|
|
import blankPage from "./blankPage";
|
|||
|
|
import discover from "./discover";
|
|||
|
|
import seckillData from "./seckill.vue";
|
|||
|
|
import shortVideo from './video';
|
|||
|
|
import homeTitle from './title';
|
|||
|
|
import merHomeComb from "./merHomeComb";
|
|||
|
|
import merHome from "@/components/merHome";
|
|||
|
|
import merchantList from "./merchant";
|
|||
|
|
import guide from "./guide";
|
|||
|
|
import {getCategoryThird} from "@/api/api";
|
|||
|
|
import {goProductDetail} from "@/libs/order";
|
|||
|
|
import memberCard from "./memberCard";
|
|||
|
|
import memberCoupon from "./memberCoupon";
|
|||
|
|
import memberBenefits from "./memberBenefits";
|
|||
|
|
import memberRecharge from "./memberRecharge";
|
|||
|
|
import JoinMembership from "./joinMembership";
|
|||
|
|
import CouponPop from "./couponPop";
|
|||
|
|
let app = getApp();
|
|||
|
|
const EVENT = {
|
|||
|
|
SmallPage: 0,
|
|||
|
|
Classify: 1,
|
|||
|
|
HomePage: 2
|
|||
|
|
}
|
|||
|
|
export default {
|
|||
|
|
name: "diyPage",
|
|||
|
|
computed: mapGetters(['isLogin','bottomNavigationIsCustom', 'merchantAPPInfo']),
|
|||
|
|
components: {
|
|||
|
|
CouponPop,
|
|||
|
|
merHome,
|
|||
|
|
merHomeComb,
|
|||
|
|
aTip,
|
|||
|
|
merchantList,
|
|||
|
|
homeComb,
|
|||
|
|
recommend,
|
|||
|
|
tuiSkeleton,
|
|||
|
|
seckillData,
|
|||
|
|
pageFooter,
|
|||
|
|
liveBroadcast,
|
|||
|
|
couponDialog,
|
|||
|
|
coupon,
|
|||
|
|
menus,
|
|||
|
|
pictureCube,
|
|||
|
|
news,
|
|||
|
|
goodList,
|
|||
|
|
articleList,
|
|||
|
|
swiperBg,
|
|||
|
|
headerSearch,
|
|||
|
|
cateNav,
|
|||
|
|
richTextEditor,
|
|||
|
|
shortVideo,
|
|||
|
|
homeTab,
|
|||
|
|
discover,
|
|||
|
|
blankPage,
|
|||
|
|
homeTitle,
|
|||
|
|
hotSpot,
|
|||
|
|
group,
|
|||
|
|
intergralShop,
|
|||
|
|
guide,
|
|||
|
|
memberCard,
|
|||
|
|
memberCoupon,
|
|||
|
|
memberBenefits,
|
|||
|
|
memberRecharge,
|
|||
|
|
JoinMembership,
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
merMemberInfo: { // 商户会员信息
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {}
|
|||
|
|
},
|
|||
|
|
componentData: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {}
|
|||
|
|
},
|
|||
|
|
merId: { // 商户id
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
// 圈层ID集合，逗号分隔
|
|||
|
|
regionIds: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
isScrolled: { //是否开始滚动
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
isSmallPage: { //是否是微页面，true是，false不是
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
diyId: { //diyid
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
fromTo: { //页面来源，为了区分店铺中底部导航使用的微页面，展示店铺配置的底部导航，
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
componentData: {
|
|||
|
|
handler(val) {
|
|||
|
|
this.getDiyInfo()
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data(){
|
|||
|
|
return {
|
|||
|
|
theme: app.globalData.theme,
|
|||
|
|
wxText: "点击添加到我的小程序，微信首页下拉即可访问商城。",
|
|||
|
|
urlDomain: this.$Cache.get("imgHost"),
|
|||
|
|
sortMarTop: 0,
|
|||
|
|
cateNavActive: 0,
|
|||
|
|
sortList: [],
|
|||
|
|
categoryId: 0,
|
|||
|
|
isLoading: false,
|
|||
|
|
isShowTitle: false, //是否显示头部标题，同时也判断是否展示分类下的商品列表
|
|||
|
|
styleConfig: [], //DIY数据
|
|||
|
|
showCateNav: false, //是否显示分类导航组件
|
|||
|
|
cateNavData: {}, //分类导航组件数据
|
|||
|
|
showHomeComb: false, //是否显示组合
|
|||
|
|
showHeaderSerch: false, //是否显示搜索框
|
|||
|
|
bgInfo: {
|
|||
|
|
colorPicker: '#f5f5f5',
|
|||
|
|
isBgColor: 1,
|
|||
|
|
},
|
|||
|
|
homeCombData: {}, //组合组件数据
|
|||
|
|
headerSerchCombData: {}, //搜索框对象
|
|||
|
|
navIndex: 0, //判断首页显示内容，1显示分类页和商品，0首页
|
|||
|
|
isNoCommodity: false,
|
|||
|
|
couponList: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
this.styleConfig = []
|
|||
|
|
this.getDiyInfo();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 开通会员
|
|||
|
|
activateMembership(){
|
|||
|
|
this.$refs.membershipRef.open()
|
|||
|
|
},
|
|||
|
|
closeMembership(){
|
|||
|
|
this.$emit('updateMemberInfo')
|
|||
|
|
this.$refs.membershipRef.close()
|
|||
|
|
},
|
|||
|
|
closeCoupon(){
|
|||
|
|
this.$refs.couponRef.close()
|
|||
|
|
},
|
|||
|
|
// 成为会员回调
|
|||
|
|
handleSuccessful(couponList){
|
|||
|
|
if(couponList.length){
|
|||
|
|
this.couponList = couponList
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.$refs.couponRef.open();
|
|||
|
|
}, 100)
|
|||
|
|
}else{
|
|||
|
|
this.$util.Tips({
|
|||
|
|
title: '开通会员成功'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.closeMembership()
|
|||
|
|
},
|
|||
|
|
goDetail(item) {
|
|||
|
|
goProductDetail(item.id, 0, '')
|
|||
|
|
},
|
|||
|
|
// diy数据
|
|||
|
|
getDiyInfo(){
|
|||
|
|
let data = this.componentData;
|
|||
|
|
this.styleConfig = this.$util.objToArr(data.value);
|
|||
|
|
this.bgInfo.isBgColor = data.isBgColor
|
|||
|
|
this.bgInfo.colorPicker = data.colorPicker
|
|||
|
|
this.styleConfig.forEach((item) => {
|
|||
|
|
if (item.name === 'tabNav' && !item.isHide) {
|
|||
|
|
this.showCateNav = true;
|
|||
|
|
this.cateNavData = item;
|
|||
|
|
}
|
|||
|
|
if (item.name === 'homeComb' && !item.isHide) {
|
|||
|
|
this.showHomeComb = true
|
|||
|
|
this.homeCombData = item;
|
|||
|
|
}
|
|||
|
|
if (item.name === 'headerSerch' && !item.isHide) {
|
|||
|
|
this.showHeaderSerch = true
|
|||
|
|
this.headerSerchCombData = item;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 分类切换点击
|
|||
|
|
changeTab(index, item) {
|
|||
|
|
//type=0微页面，1分类，2首页
|
|||
|
|
this.cateNavActive = index;
|
|||
|
|
if (item.type == EVENT.Classify) {
|
|||
|
|
this.navIndex = 1;
|
|||
|
|
if (!item.val) {
|
|||
|
|
this.sortList = [];
|
|||
|
|
this.categoryId = 0;
|
|||
|
|
this.$util.Tips({
|
|||
|
|
title: "请在平台端选择商品分类！确保加载商品分类数据。"
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
} else {
|
|||
|
|
this.isLoading = false; // 是否加载
|
|||
|
|
getCategoryThird(item.val).then(res => {
|
|||
|
|
this.sortList = res.data;
|
|||
|
|
// #ifdef H5
|
|||
|
|
self.sortMarTop = 10;
|
|||
|
|
// #endif
|
|||
|
|
this.isLoading = true;
|
|||
|
|
});
|
|||
|
|
this.categoryId = item.val;
|
|||
|
|
this.isShowTitle = false;
|
|||
|
|
}
|
|||
|
|
} else if (item.type == EVENT.SmallPage) {
|
|||
|
|
this.navIndex = 0;
|
|||
|
|
this.isShowTitle = true;
|
|||
|
|
this.categoryId = 0;
|
|||
|
|
if (!item.val) {
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: "请在平台端选择微页面链接！确保加载微页面数据。"
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.changeReset();
|
|||
|
|
this.$emit('getDiyData', item.val, true)
|
|||
|
|
// this.diyData(item.val, true);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.categoryId = 0;
|
|||
|
|
this.navIndex = 0;
|
|||
|
|
this.changeReset();
|
|||
|
|
this.$emit('getDiyData', this.isSmallPage ? this.diyId : item.val, false)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeReset(){
|
|||
|
|
if(this.isSmallPage){
|
|||
|
|
this.styleConfig = [];
|
|||
|
|
this.showCateNav = false;
|
|||
|
|
this.showHeaderSerch = false;
|
|||
|
|
}else{
|
|||
|
|
this.styleConfig = [];
|
|||
|
|
}
|
|||
|
|
// this.$emit('getDiyData')
|
|||
|
|
},
|
|||
|
|
bindMore() {
|
|||
|
|
uni.setStorageSync('cateNavActive', this.cateNavActive);
|
|||
|
|
uni.setStorageSync('categoryId', this.categoryId);
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: `/pages/goods_cate/index`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getRecommendLength(e) {
|
|||
|
|
this.isNoCommodity = e == 0 ? true : false;
|
|||
|
|
},
|
|||
|
|
getRecommend(){
|
|||
|
|
if(this.categoryId>0 && this.isLoading) this.$refs.recommendIndex.get_host_product();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.noCommodity {
|
|||
|
|
margin-top: 30%;
|
|||
|
|
}
|
|||
|
|
.productList {
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
// min-height: 70vh;
|
|||
|
|
.sort {
|
|||
|
|
width: 710rpx;
|
|||
|
|
max-height: 380rpx;
|
|||
|
|
background: rgba(255, 255, 255, 1);
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 0rpx 0rpx 20rpx 0rpx !important;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin: 25rpx auto 0 auto;
|
|||
|
|
|
|||
|
|
&.no_pad {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
width: 20%;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.pictrues {
|
|||
|
|
width: 90rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pictrue {
|
|||
|
|
width: 90rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slide-image {
|
|||
|
|
width: 90rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .easy-loadimage,
|
|||
|
|
uni-image,
|
|||
|
|
.easy-loadimage {
|
|||
|
|
width: 90rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
color: #272727;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
// overflow: hidden;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.productList .list {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.productList .list.on {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-top: 1px solid #f6f6f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.productList .list .item {
|
|||
|
|
width: 345rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.name_text {
|
|||
|
|
display: inline-block;
|
|||
|
|
max-width: 200rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page_content {
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
|
|||
|
|
// background-color: #f5f5f5;
|
|||
|
|
.swiper {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 246rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 25rpx;
|
|||
|
|
/* #ifdef MP */
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
/* #endif */
|
|||
|
|
swiper,
|
|||
|
|
swiper-item,
|
|||
|
|
.slide-image,
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 246rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|