|
@@ -0,0 +1,771 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="container home clearfix" :style="{paddingTop:CustomBar+'px'}">
|
|
|
|
+ <cm-custom :navbar-data='nvabarData'></cm-custom>
|
|
|
|
+ <!-- 头部轮播 -->
|
|
|
|
+ <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
|
|
+ <view class="container-home tui-skeleton">
|
|
|
|
+ <view class="swiper-banner-box" >
|
|
|
|
+ <swiper class="tui-banner-swiper tui-banner tui-skeleton-fillet" :autoplay="true" :interval="5000" :duration="500" @change="swiperChange" :circular="true">
|
|
|
|
+ <swiper-item v-for="(item,index) in bannerImageList" :key="index">
|
|
|
|
+ <image :src="item" class="tui-slide-image" mode="scaleToFill"/>
|
|
|
|
+ </swiper-item>
|
|
|
|
+ </swiper>
|
|
|
|
+ <view class="swiper__dots-box" v-if="bannerImageList.length > 1">
|
|
|
|
+ <view v-for="(item,idx) in bannerImageList"
|
|
|
|
+ :key="idx"
|
|
|
|
+ :class="[idx===current?'swiper__dots-long':'none']"
|
|
|
|
+ :data-index="current" class="swiper__dots-item">
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="cate-section clearfix">
|
|
|
|
+ <!-- 自定义分类导航栏 -->
|
|
|
|
+ <view class="tabbar clearfix">
|
|
|
|
+ <view class="cate-item" v-for="(nav,idx) in productsClassifyList" :key="idx" @click.stop="navigateToGoods(nav)">
|
|
|
|
+ <image class="tui-skeleton-circular" :src="nav.classifyImage"></image>
|
|
|
|
+ <text class="tui-skeleton-fillet">{{nav.classifyName}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 优选分类 -->
|
|
|
|
+ <view class="tabbar bot clearfix">
|
|
|
|
+ <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:firstModulesName})">
|
|
|
|
+ <image class="tui-skeleton-circular" :src="firstModulesImage"></image>
|
|
|
|
+ <text class="tui-skeleton-fillet">{{firstModulesName}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'2',value:secondModulesName})">
|
|
|
|
+ <image class="tui-skeleton-circular" :src="secondModulesImage"></image>
|
|
|
|
+ <text class="tui-skeleton-fillet">{{secondModulesName}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="cate-item-info" @click="showTost">
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navInforList[0].icon"></image>
|
|
|
|
+ <text class="tui-skeleton-fillet">{{navInforList[0].text}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="cate-item-info">
|
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
|
+ <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navInforList[1].icon"></image>
|
|
|
|
+ </button>
|
|
|
|
+ <!-- #endif -->
|
|
|
|
+ <text class="tui-skeleton-fillet">{{navInforList[1].text}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 热销商品 -->
|
|
|
|
+ <view class="hotgoods-section">
|
|
|
|
+ <view class="s-header" @click="this.$api.navToListPage({type:'3',value:thirdModulesName})">
|
|
|
|
+ <text class="tip tui-skeleton-fillet">{{thirdModulesName}}</text>
|
|
|
|
+ <text class="tit tui-skeleton-fillet">更多</text>
|
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="hotgoods-swiper">
|
|
|
|
+ <view class="scoll-wrapper clearfix">
|
|
|
|
+ <view class="floor-item" v-for="(item, index) in organizeProducts" :key="index" @click.stop="navToDetailPage(item.productID)">
|
|
|
|
+ <image class="tui-skeleton-fillet" :src="item.mainImage" mode="aspectFill"></image>
|
|
|
|
+ <view class="floor-item-content">
|
|
|
|
+ <view class="title tui-skeleton-rect">
|
|
|
|
+ <text class="mclap">{{item.name}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="floor-item-act">
|
|
|
|
+ <template v-if="item.actStatus==1">
|
|
|
|
+ <view class="floor-tags" v-if="item.promotions.type == 1 && item.promotions.mode==1">{{item.promotions.name}}<text v-if="hasLogin">:¥{{item.price | NumFormat}}</text></view>
|
|
|
|
+ <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="item.actStatus ==0 && item.ladderPriceFlag==1">
|
|
|
|
+ <view class="floor-tags">阶梯价格</view>
|
|
|
|
+ </template>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="" v-if="hasLogin">
|
|
|
|
+ <view v-if="userIdentity == 4">
|
|
|
|
+ <view class="title-none" v-show="item.price1TextFlag == '1'">
|
|
|
|
+ <text class="p big">¥未公开价格</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="title-none" v-show="item.price1TextFlag == '2'">
|
|
|
|
+ <text class="p big">¥价格仅会员可见</text>
|
|
|
|
+ <text class="p btn" @click.stop="this.$api.navigateTo(`/pages/login/apply?clubStatus=${clubStatus}`)">去升级</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="price tui-skeleton-rect" v-show="item.price1TextFlag == '0'">
|
|
|
|
+ <text class="p sm">¥</text>
|
|
|
|
+ <text class="p big">{{ item.price | NumFormat}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view v-else>
|
|
|
|
+ <view class="title-none" v-if="item.price1TextFlag == '1'">
|
|
|
|
+ <text class="p big">未公开价格</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="price tui-skeleton-rect" v-else :class="item.promotions.type == 1 && item.promotions.mode==1 ? 'none' : ''">
|
|
|
|
+ <text class="p sm">¥</text>
|
|
|
|
+ <text class="p big">{{item.price | NumFormat}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view v-else class="no-price">
|
|
|
|
+ <view class="p-stars">
|
|
|
|
+ <text class="p-no">¥</text>
|
|
|
|
+ <uni-stars :stars="parseInt(item.price1Grade)" :fontSize="36" :widthInfo="180"></uni-stars>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 底部 -->
|
|
|
|
+ <view class="footer-section ">
|
|
|
|
+ <view class="s-header member tui-skeleton-fillet">
|
|
|
|
+ <text class="tip">医美机构正品联盟</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="f-content tui-skeleton-fillet" @click="navto('/pages/service/member')">
|
|
|
|
+ <image class="tui-banner" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AEwQlAAjGFdpI2LM357.png" mode="scaleToFill"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="f-tab-section">
|
|
|
|
+ <!-- 优选分类 -->
|
|
|
|
+ <view class="tabbar clearfix">
|
|
|
|
+ <view class="cate-item" @click="showTost">
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navServerList[0].icon"></image>
|
|
|
|
+ <text class="tui-skeleton-fillet">{{navServerList[0].text}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="cate-item" @click="navto(navServerList[1].path)">
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navServerList[1].icon"></image>
|
|
|
|
+ <text class="tui-skeleton-fillet">{{navServerList[1].text}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="cate-item" @click="navto(navServerList[2].path)">
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navServerList[2].icon"></image>
|
|
|
|
+ <text class="tui-skeleton-fillet">{{navServerList[2].text}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="cate-item" @click="telPhoneTo">
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navServerList[3].icon"></image>
|
|
|
|
+ <text class="tui-skeleton-fillet">{{navServerList[3].text}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="f-text tui-skeleton-fillet">
|
|
|
|
+ <view class="">
|
|
|
|
+ <image class="logo" src="../../../static/logo-c@2x.png" mode=""></image>
|
|
|
|
+ <text class="">采美365网</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 活动弹窗 -->
|
|
|
|
+ <!-- <activityAlert :show="isActivity" @click="handleClick" @cancel="handleCancelClick"></activityAlert> -->
|
|
|
|
+ <!-- 透明模态层 -->
|
|
|
|
+ <modal-layer v-if='modallayer'></modal-layer>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
|
+ import authorize from '@/common/config/authorize.js'
|
|
|
|
+ import modalLayer from "@/components/modal-layer"
|
|
|
|
+ import cmCustom from '@/components/cm-module/homeIndex/customer.vue'
|
|
|
|
+ import activityAlert from '@/components/cm-module/activity/activity_on_1.vue'
|
|
|
|
+ import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
|
+ import { userInfoLogin, queryHomeInfo } from "@/api/use.js"
|
|
|
|
+ import { mapState,mapMutations} from 'vuex';
|
|
|
|
+ export default {
|
|
|
|
+ components:{
|
|
|
|
+ tuiSkeleton,
|
|
|
|
+ modalLayer,
|
|
|
|
+ cmCustom,
|
|
|
|
+ uniStars,
|
|
|
|
+ activityAlert
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ nvabarData: {//顶部自定义导航
|
|
|
|
+ showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
|
+ showSearch: 0,
|
|
|
|
+ title: '采美采购商城', // 导航栏 中间的标题
|
|
|
|
+ haveBack:false,
|
|
|
|
+ textLeft:this.$store.state.isIphone,
|
|
|
|
+ textColor:'#FFFFFF'
|
|
|
|
+ },
|
|
|
|
+ CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
|
+ userID:0,
|
|
|
|
+ clubStatus:'',
|
|
|
|
+ current:0,
|
|
|
|
+ mode:'round',
|
|
|
|
+ modallayer:false,
|
|
|
|
+ isLogin:false,
|
|
|
|
+ bannerImageList:[],
|
|
|
|
+ skeletonShow: true,
|
|
|
|
+ userIdentity:'',
|
|
|
|
+ organizeProducts:[],//常用商品
|
|
|
|
+ productsClassifyList:[
|
|
|
|
+ {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
|
|
|
|
+ {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
|
|
|
|
+ {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
|
|
|
|
+ {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
|
|
|
|
+ {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'}
|
|
|
|
+ ],//分类导航
|
|
|
|
+ firstModulesName:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png', //优惠模块1
|
|
|
|
+ secondModulesName:'', //优惠模块2
|
|
|
|
+ firstModulesImage:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png',//优惠模块icon1
|
|
|
|
+ secondModulesImage:'',//优惠模块icon2
|
|
|
|
+ thirdModulesName:'', //优惠模块3
|
|
|
|
+ navInforList:[
|
|
|
|
+ {text:'会员中心',icon:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9LCABdf_AAAfdMmM_xY655.png'},
|
|
|
|
+ {text:'在线客服',icon:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9BSAXPobAAApo6I0Tlo684.png'}
|
|
|
|
+ ],
|
|
|
|
+ navServerList:[
|
|
|
|
+ {text:'会员优惠',icon:'../../../static/temp/server1@2x.png',path:'/pages/service/member'},
|
|
|
|
+ {text:'售后无忧',icon:'../../../static/temp/server2@2x.png',path:'/pages/service/aftersale'},
|
|
|
|
+ {text:'购物须知',icon:'../../../static/temp/server3@2x.png',path:'/pages/service/shoppingnotice'},
|
|
|
|
+ {text:'联系我们',icon:'../../../static/temp/server4@2x.png',path:''},
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.$api.getStorage().then((resolve) =>{
|
|
|
|
+ this.userID = resolve.userID
|
|
|
|
+ this.getSellerHomeInfo()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ filters: {
|
|
|
|
+ NumFormat:function(text) {//处理金额
|
|
|
|
+ return Number(text).toFixed(2);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapState(['hasLogin','userInfo','isActivity'])
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ getSellerHomeInfo(){
|
|
|
|
+ this.getHomeInformation()
|
|
|
|
+ this.getOrganizeProducts()
|
|
|
|
+ },
|
|
|
|
+ getHomeInformation(){
|
|
|
|
+ this.CommonService.GetHomeModulesDataInfo({}).then(res =>{
|
|
|
|
+ let data = res.data;
|
|
|
|
+ this.bannerImageList = data.bannerImageList
|
|
|
|
+ this.mallPageModules = data.mallPageModules
|
|
|
|
+ this.firstModulesName= data.firstModulesName
|
|
|
|
+ this.secondModulesName= data.secondModulesName
|
|
|
|
+ this.firstModulesImage= data.firstModulesImage
|
|
|
|
+ this.secondModulesImage= data.secondModulesImage
|
|
|
|
+ this.thirdModulesName= data.thirdModulesName
|
|
|
|
+ this.productsClassifyList = data.productsClassifyList
|
|
|
|
+ this.skeletonShow = false;
|
|
|
|
+ this.$store.commit('updateAllNum',data.shoppingCartCount)
|
|
|
|
+ }).catch(error =>{
|
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getOrganizeProducts(){//获取模块三商品
|
|
|
|
+ this.ProductService.queryProductPreferred({userId:this.userID,preferredFlag:100,pageNum:1,pageSize:6}).then(res =>{
|
|
|
|
+ this.organizeProducts = res.data.results
|
|
|
|
+ this.getProductPrice()
|
|
|
|
+ }).catch(error =>{
|
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getProductPrice(){//获取商品或者活动价格
|
|
|
|
+ let productIdArr = [];
|
|
|
|
+ let productIds ='';
|
|
|
|
+ this.organizeProducts.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
|
|
|
|
+ productIdArr.push(item.productID)
|
|
|
|
+ })
|
|
|
|
+ productIds = productIdArr.join(",");
|
|
|
|
+ this.ProductService.querySearchProductPrice({userId: this.userID,productIds:productIds}).then(response =>{
|
|
|
|
+ this.organizeProducts = this.ReturnNewProducts(this.organizeProducts,response.data);
|
|
|
|
+ this.skeletonShow = false;
|
|
|
|
+ }).catch(error =>{
|
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ ReturnNewProducts(Array,list){
|
|
|
|
+ let NewArray = []
|
|
|
|
+ Array.map(item=>{
|
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
|
+ if( item.productID == list[i].productId ){
|
|
|
|
+ NewArray.push(Object.assign(item,list[i]))
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ return NewArray
|
|
|
|
+ },
|
|
|
|
+ //轮播图切换修改背景色
|
|
|
|
+ swiperChange(e) {
|
|
|
|
+ const index = e.detail.current;
|
|
|
|
+ this.current = index;
|
|
|
|
+ },
|
|
|
|
+ formatMoney(num){
|
|
|
|
+ return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
|
|
|
|
+ return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
|
|
|
|
+ return $1 + ",";
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ handleBannerActivity(item,index){
|
|
|
|
+ switch(index){
|
|
|
|
+ case 0:
|
|
|
|
+ this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleClick(data){
|
|
|
|
+ this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
|
|
|
|
+ this.$store.commit('setActivity',data)
|
|
|
|
+ },
|
|
|
|
+ handleCancelClick(data){
|
|
|
|
+ this.$store.commit('setActivity',data)
|
|
|
|
+ },
|
|
|
|
+ //分类导航跳转
|
|
|
|
+ navToListPage(nav){
|
|
|
|
+ let self = this;
|
|
|
|
+ uni.setStorage({
|
|
|
|
+ key: 'commodity_id',
|
|
|
|
+ data: nav.id,
|
|
|
|
+ success: function () {
|
|
|
|
+ self.$api.navToListPage({type:'0',value:nav.classifyName,id:nav.id});
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ navigateToGoods(nav){
|
|
|
|
+ let self = this;
|
|
|
|
+ uni.setStorage({
|
|
|
|
+ key: 'commodity_id',
|
|
|
|
+ data: nav.id,
|
|
|
|
+ success: function () {
|
|
|
|
+ self.$api.navigateToGoods({type:'0',value:nav.classifyName,id:nav.id});
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ navToDetailPage(id) {//跳转商品详情页
|
|
|
|
+ this.modallayer = true;
|
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
|
+ this.modallayer = false;
|
|
|
|
+ },
|
|
|
|
+ handleContact(e){
|
|
|
|
+ console.log(e.detail.path)
|
|
|
|
+ console.log(e.detail.query)
|
|
|
|
+ },
|
|
|
|
+ showTost(){
|
|
|
|
+ this.$util.msg("正在开发中,敬请期待~",2000)
|
|
|
|
+ // uni.navigateToMiniProgram({
|
|
|
|
+ // appId: 'wx5a5cda32926f55ac',
|
|
|
|
+ // path: '/pages/tabBar/home/home',
|
|
|
|
+ // extraData: {
|
|
|
|
+ // 'data1': 'test'
|
|
|
|
+ // },
|
|
|
|
+ // envVersion: 'develop',
|
|
|
|
+ // success(res) {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ // // 打开成功
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+ },
|
|
|
|
+ navto(url){
|
|
|
|
+ this.$api.navigateTo(url)
|
|
|
|
+ },
|
|
|
|
+ swiperNavtopage(link){
|
|
|
|
+ this.$api.navigateTo(`/h5/pages/activity/activity?productID=4204&path=${link}`)
|
|
|
|
+ },
|
|
|
|
+ telPhoneTo(){
|
|
|
|
+ let self = this;
|
|
|
|
+ this.$api.get('/home/afterSale',{organizeID:this.userOrganizeID},
|
|
|
|
+ response => {
|
|
|
|
+ console.log(response.data.contactNumber)
|
|
|
|
+ uni.makePhoneCall({
|
|
|
|
+ phoneNumber:response.data.contactNumber //仅为示例
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onPageScroll(e){//实时获取到滚动的值
|
|
|
|
+ if(e.scrollTop>50){
|
|
|
|
+ this.inputActive = 'fixed'
|
|
|
|
+ }else{
|
|
|
|
+ this.inputActive = 'float'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onPullDownRefresh() {//下拉刷新
|
|
|
|
+ this.getHomeInformation()
|
|
|
|
+ this.getOrganizeProducts()
|
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
|
+ },
|
|
|
|
+ onShareAppMessage(res){//分享转发
|
|
|
|
+ if (res.from === 'button') {
|
|
|
|
+ // 来自页面内转发按钮
|
|
|
|
+ }
|
|
|
|
+ return {
|
|
|
|
+ title: '采美采购商城-生美/医美采购服务平台',
|
|
|
|
+ path: 'pages/tabBar/home/home',
|
|
|
|
+ imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+ page,.home{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ }
|
|
|
|
+ .container-home{
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ }
|
|
|
|
+ .swiper-banner-box{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 360rpx;
|
|
|
|
+ padding-top:100rpx;
|
|
|
|
+ background:#FFFFFF url(https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9LCALu9wAAAv45Bdpsk814.png)no-repeat;
|
|
|
|
+ position: relative;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ }
|
|
|
|
+ .tui-banner-swiper {
|
|
|
|
+ width: 700rpx;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ height: 340rpx;
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ transform: translateY(0);
|
|
|
|
+ box-shadow:0px 3px 6px rgba(225,86,22,0.08);
|
|
|
|
+ margin-top: 16rpx;
|
|
|
|
+ .banner-item{
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
+ }
|
|
|
|
+ .tui-slide-image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 340rpx;
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .swiper__dots-box{
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 30rpx;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ /* #ifndef APP-NVUE */
|
|
|
|
+ display: flex;
|
|
|
|
+ /* #endif */
|
|
|
|
+ flex: 1;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .swiper__dots-item{
|
|
|
|
+ width: 8rpx;
|
|
|
|
+ height: 8rpx;
|
|
|
|
+ border-radius: 100%;
|
|
|
|
+ margin-left: 6px;
|
|
|
|
+ background-color:rgba(255,255,255,.7);
|
|
|
|
+ }
|
|
|
|
+ .swiper__dots-long{
|
|
|
|
+ width: 35rpx;
|
|
|
|
+ height: 8rpx;
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
+ background-color: #ffff;
|
|
|
|
+ transition: all 0.4s;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ /* 分类 */
|
|
|
|
+ .cate-section {
|
|
|
|
+ width: 702rpx;
|
|
|
|
+ height: auto;
|
|
|
|
+ padding:34rpx 24rpx 14rpx 24rpx;
|
|
|
|
+ background: #fff;
|
|
|
|
+ .tabbar{
|
|
|
|
+ margin-bottom: 26rpx;
|
|
|
|
+ &.bot{
|
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ box-shadow:0px 3px 6px rgba(225,86,22,0.07);
|
|
|
|
+ border: 1px solid #F9F9F9;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .cate-item {
|
|
|
|
+ width: 118rpx;
|
|
|
|
+ margin-right:28rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ float: left;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: $font-size-26;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ &:last-child{
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(5n){
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ image {
|
|
|
|
+ width: 90rpx;
|
|
|
|
+ height: 90rpx;
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
+ border-radius: 32rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .cate-item-info {
|
|
|
|
+ width: 118rpx;
|
|
|
|
+ margin-right:59.5rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ float: left;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: $font-size-26;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ &:last-child{
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ image {
|
|
|
|
+ width: 90rpx;
|
|
|
|
+ height: 90rpx;
|
|
|
|
+ margin-bottom: 16rpx;
|
|
|
|
+ border-radius: 32rpx;
|
|
|
|
+ }
|
|
|
|
+ button.contact-btn{
|
|
|
|
+ width: 118rpx;
|
|
|
|
+ height: 90rpx;
|
|
|
|
+ margin: 0;
|
|
|
|
+ padding: 0;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ text-align: center;
|
|
|
|
+ text-decoration: none;
|
|
|
|
+ border-radius: 0;
|
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ background-color:#FFFFFF;
|
|
|
|
+ margin-bottom: 16rpx;
|
|
|
|
+ image{
|
|
|
|
+ width: 90rpx;
|
|
|
|
+ height: 90rpx;
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ border-radius: 32rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .hotgoods-section{
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ .s-header{
|
|
|
|
+ display:flex;
|
|
|
|
+ align-items:center;
|
|
|
|
+ height: 50rpx;
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
|
+ .tip{
|
|
|
|
+ flex: 4;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ font-weight: bolder;
|
|
|
|
+ padding-left: 24rpx;
|
|
|
|
+ }
|
|
|
|
+ .tit{
|
|
|
|
+ flex: 4.4;
|
|
|
|
+ font-size: $font-size-28;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ .icon-xiayibu{
|
|
|
|
+ flex: 0.6;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .hotgoods-swiper{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ padding-top: 24rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ // box-shadow:0px 3px 6px rgba(225,86,22,0.07);
|
|
|
|
+ .scoll-wrapper{
|
|
|
|
+ width: 702rpx;
|
|
|
|
+ height: auto;
|
|
|
|
+ padding:24rpx 24rpx 0 24rpx;
|
|
|
|
+ background: #F7F7F7;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ .floor-item{
|
|
|
|
+ width: 341rpx;
|
|
|
|
+ height: 568rpx;
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding-bottom: 16rpx;
|
|
|
|
+ &:nth-child(2n){
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ image{
|
|
|
|
+ width: 341rpx;
|
|
|
|
+ height: 341rpx;
|
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
|
+ display: block;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ .floor-item-content{
|
|
|
|
+ width: 311rpx;
|
|
|
|
+ padding: 0 15rpx;
|
|
|
|
+ }
|
|
|
|
+ .floor-item-act{
|
|
|
|
+ display: block;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 68rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 16rpx 0;
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
+ .floor-tags{
|
|
|
|
+ float: left;
|
|
|
|
+ height: 36rpx;
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
+ background-color: rgba(225, 86, 22, 0.1);
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ color: $color-system;
|
|
|
|
+ text-align: center;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ padding:0 16rpx;
|
|
|
|
+ font-size: $font-size-20;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .title-none{
|
|
|
|
+ font-size: $font-size-26;
|
|
|
|
+ color: #FF2A2A;
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
+ .btn{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ float: right;
|
|
|
|
+ width: 112rpx;
|
|
|
|
+ height: 44rpx;
|
|
|
|
+ background: $btn-confirm;
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-radius: 22rpx;
|
|
|
|
+ margin-top: 17rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .title{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 72rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .mclap{
|
|
|
|
+ width: 100%;
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ text-overflow:ellipsis;
|
|
|
|
+ display: -webkit-box;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .no-price{
|
|
|
|
+ height: 54rpx;
|
|
|
|
+ line-height: 54rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ .p-no{
|
|
|
|
+ font-size: $font-size-30;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ display: block;
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+ .p-stars{
|
|
|
|
+ width: 230rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .price{
|
|
|
|
+ color: #FF2A2A;
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
+ &.none{
|
|
|
|
+ text-decoration: line-through;
|
|
|
|
+ color: #999999;
|
|
|
|
+ }
|
|
|
|
+ .sm{
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ }
|
|
|
|
+ .big{
|
|
|
|
+ font-size: $font-size-28;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .footer-section{
|
|
|
|
+ width: 702rpx;
|
|
|
|
+ padding: 0 24rpx 0 24rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ .s-header{
|
|
|
|
+ display:flex;
|
|
|
|
+ align-items:center;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
+ .tip{
|
|
|
|
+ flex: 1;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ font-weight: bolder;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .f-content{
|
|
|
|
+ width: 100%;
|
|
|
|
+ image{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 350rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ /*底部服务导航*/
|
|
|
|
+ .f-tab-section {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ padding: 38rpx 0;
|
|
|
|
+ background: #fff;
|
|
|
|
+ /*底部服务导航*/
|
|
|
|
+ .cate-item {
|
|
|
|
+ width: 99rpx;
|
|
|
|
+ margin-right: 102rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ &:last-child{
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ image {
|
|
|
|
+ width: 75rpx;
|
|
|
|
+ height: 75rpx;
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .f-text{
|
|
|
|
+ .logo{
|
|
|
|
+ width: 80rpx;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ margin: 0 6rpx;
|
|
|
|
+ }
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
+ padding-top: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|