mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 18:13:26 +08:00
【优化】优化首页组件的样式，将一些常见方法进行统一封装到混合器里面。
This commit is contained in:
JianWeie
@@ -1,3 +1,5 @@
|
||||
import { navLinkType } from '@/common/setting/constVarsHelper.js';
|
||||
|
||||
/**
|
||||
* 全局混入型
|
||||
*/
|
||||
@@ -231,6 +233,70 @@ module.exports = {
|
||||
this.$u.route('/pages/member/serviceOrder/details/details', { id: serviceId });
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 广告相关
|
||||
*/
|
||||
|
||||
// 广告点击查看详情
|
||||
showSliderInfo(type, val) {
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
if (type == navLinkType.urlLink) {
|
||||
if (val.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
this.$u.route('/pages/webview/webview', { src: val });
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val == '/pages/index/member/member') {
|
||||
this.$u.route({ type: 'switchTab', url: val });
|
||||
return;
|
||||
} else if (val.indexOf('/pages/coupon/coupon') > -1) {
|
||||
var id = val.replace('/pages/coupon/coupon?id=', "");
|
||||
this.receiveCoupon(id)
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else if (type == navLinkType.shop) {
|
||||
// 商品详情
|
||||
this.$u.route('/pages/goods/goodDetails/goodDetails', { id: val });
|
||||
} else if (type == navLinkType.article) {
|
||||
// 文章详情
|
||||
this.$u.route('/pages/article/details/details', { idType: 1, id: val });
|
||||
} else if (type == navLinkType.articleCategory) {
|
||||
// 文章列表
|
||||
this.$u.route('/pages/article/list/list')
|
||||
} else if (type == navLinkType.intelligentForms) {
|
||||
//自定义表单
|
||||
this.$u.route('/pages/form/details/details', { id: val });
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
}
|
||||
},
|
||||
// 用户领取优惠券
|
||||
receiveCoupon(couponId) {
|
||||
let _this = this;
|
||||
let coreshopdata = {
|
||||
id: couponId
|
||||
}
|
||||
this.$u.api.getCoupon(coreshopdata).then(res => {
|
||||
if (res.status) {
|
||||
_this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
|
||||
} else {
|
||||
_this.$u.toast(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 工具函数
|
||||
*/
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<view class="adpop-center">
|
||||
<view class="adpop-img">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view @click="showSliderInfo2" :data-type="coreshopdata.parameters.list[0].linkType" :data-val="coreshopdata.parameters.list[0].linkValue">
|
||||
<view @click="showSliderInfo(coreshopdata.parameters.list[0].linkType, coreshopdata.parameters.list[0].linkValue)">
|
||||
<image class="ad-img" :src="coreshopdata.parameters.list[0].image" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
@@ -44,101 +44,6 @@
|
||||
closePop() {
|
||||
this.closeAd = false
|
||||
},
|
||||
showSliderInfo(type, val) {
|
||||
console.log(type);
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
if (type == 1) {
|
||||
if (val.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val == '/pages/index/member/member') {
|
||||
this.$u.route({ type: 'switchTab', url: val });
|
||||
return;
|
||||
} else if (val.indexOf('/pages/coupon/coupon') > -1) {
|
||||
var id = val.replace('/pages/coupon/coupon?id=', "");
|
||||
this.receiveCoupon(id)
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else if (type == 2) {
|
||||
// 商品详情
|
||||
this.goGoodsDetail(val)
|
||||
} else if (type == 3) {
|
||||
// 文章详情
|
||||
this.$u.route('/pages/article/details/details?id=' + val + '&idType=1')
|
||||
} else if (type == 4) {
|
||||
// 文章列表
|
||||
this.$u.route('/pages/article/list/list?cid=' + val)
|
||||
} else if (type == 5) {
|
||||
//智能表单
|
||||
this.$u.route('/pages/form/details/details?id=' + val)
|
||||
}
|
||||
},
|
||||
// 用户领取优惠券
|
||||
receiveCoupon(couponId) {
|
||||
let data = {
|
||||
promotion_id: couponId
|
||||
}
|
||||
this.$u.api.getCoupon(data).then(res => {
|
||||
if (res.status) {
|
||||
this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
|
||||
} else {
|
||||
this.$u.toast(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// #ifdef MP-WEIXIN
|
||||
showSliderInfo2: function (e) {
|
||||
let type = e.currentTarget.dataset.type;
|
||||
let val = e.currentTarget.dataset.val;
|
||||
console.log(type);
|
||||
console.log(val)
|
||||
console.log(type);
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
if (type == 1) {
|
||||
if (val.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val == '/pages/index/member/member') {
|
||||
this.$u.route({ type: 'switchTab', url: val });
|
||||
return;
|
||||
} else if (val.indexOf('/pages/coupon/coupon') > -1) {
|
||||
var id = val.replace('/pages/coupon/coupon?id=', "");
|
||||
this.receiveCoupon(id)
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else if (type == 2) {
|
||||
// 商品详情
|
||||
this.goGoodsDetail(val)
|
||||
} else if (type == 3) {
|
||||
// 文章详情
|
||||
this.$u.route('/pages/article/details/details?id=' + val + '&idType=1')
|
||||
} else if (type == 4) {
|
||||
// 文章列表
|
||||
this.$u.route('/pages/article/list/list?cid=' + val)
|
||||
} else if (type == 5) {
|
||||
//智能表单
|
||||
this.$u.route('/pages/form/details/details?id=' + val)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class='coreshop-index-article coreshop-cell-group coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-bottom-10 coreshop-margin-top-10 coreshop-bg-white' v-if="coreshopdata.parameters.list && count">
|
||||
<view class='coreshop-cell-item' v-for="item in coreshopdata.parameters.list" :key="item.id" @click="articleDetail(item.id)">
|
||||
<view class="coreshop-cell-item-bd">
|
||||
<view class="article-title ">
|
||||
<view class="article-title">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="article-des u-line-2">
|
||||
|
||||
@@ -1,37 +1,63 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 首页优惠券卡片 -->
|
||||
<view class="coupon-box coreshop-margin-bottom-5 coreshop-padding-10" v-if="count">
|
||||
<!--提示框组件-->
|
||||
<u-toast ref="uToast" />
|
||||
<view class="coreshop-coupon coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-bottom-10 coreshop-margin-top-10" v-if="count">
|
||||
<view class="coreshop-coupon-card-view coreshop-margin-bottom-10 coreshop-margin-top-10" :class="item.maxRecevieNums > 0 && item.getNumber >= item.maxRecevieNums ?'coreshop-lower-shelf':''" v-for="(item, key) in coreshopdata.parameters.list" :key="key">
|
||||
<view class="img-lower-box" v-if="item.maxRecevieNums > 0 && item.getNumber >= item.maxRecevieNums ">已领完</view>
|
||||
<view class="card-price-view">
|
||||
<view class="price-left-view">
|
||||
<image class="icon" src="/static/images/coupon/coupon-element.png" mode=""></image>
|
||||
</view>
|
||||
<view class="name-content-view">
|
||||
<view class="u-line-1 coreshop-text-red"> {{item.name}}</view>
|
||||
<view class="coreshop-font-xs">
|
||||
优惠方式：<text v-for="(itemResult, index) in item.results" :key="index">{{itemResult}}</text>
|
||||
<view class="head-box coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-margin-bottom-10">
|
||||
<view class="head-title u-ellipsis-1">领券专区</view>
|
||||
<!--<view class="head-more coreshop-flex coreshop-align-center coreshop-flex-direction-row u-col-center" @tap="$Router.push('/pages/app/coupon/list')">
|
||||
<text class="more-text coreshop-margin-right-10">查看更多</text>
|
||||
<text class="iconfont icon-youjiantou-tianchong more-icon"></text>
|
||||
</view>-->
|
||||
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="$u.route('/pages/coupon/coupon')"></u-icon>
|
||||
|
||||
</view>
|
||||
<scroll-view class="groupon-scroll" enable-flex scroll-anchoring scroll-x scroll-with-animation>
|
||||
<view class="groupon-card-wrap coreshop-flex coreshop-align-center">
|
||||
<view v-for="(item, index) in coreshopdata.parameters.list" :key="item.id">
|
||||
<!-- mini -->
|
||||
<!--<view class="coupon-card u-flex u-row-between u-m-r-16" v-if="couponType === 2" :style="{ background: `linear-gradient(to right, ${bgColor1}, ${bgColor2})` }">
|
||||
<view class="card-left u-flex-col u-row-center u-p-l-30">
|
||||
<view class="price coreshop-margin-bottom-10" :style="{ color: priceColor }">{{ item.amount }}</view>
|
||||
<view class="notice" :style="{ color: color }">满{{ item.enough }}元可用</view>
|
||||
<view class="notice coreshop-margin-bottom-10" :style="{ color: color }">仅剩{{ item.stock }}张</view>
|
||||
</view>
|
||||
<view class="card-right u-p-y-20 u-p-r-10 u-flex-col u-row-center u-col-center">
|
||||
<button class="u-reset-button get-btn coreshop-margin-bottom-10" :style="{ color: color }" @tap="getCoupon(item.id, index)">
|
||||
{{ item.status_code === 'cannot_get' ? '不可领取' : '领券购买' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>-->
|
||||
<!-- big -->
|
||||
<view class="coreshop-padding-right-5">
|
||||
<view class="coupon-wrap " :style="{ background: `linear-gradient(to right, ${bgColor1}, ${bgColor2})` }">
|
||||
<view class="coupon-item coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between">
|
||||
<view class="coupon-left coreshop-flex coreshop-flex-direction ">
|
||||
<view class="sum-box">
|
||||
<text class="unit" style="color: #6b3f12">￥</text>
|
||||
<!--<text class="sum " style="color: #6b3f12">{{ item.name }}</text>-->
|
||||
<text class="sub" style="color: #6b3f12">{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="notice " style="color: #9d6d25">
|
||||
<text v-for="(itemCondition, index) in item.conditions" :key="index">【{{itemCondition}}】</text>
|
||||
</view>
|
||||
<view class="notice" style="color: #9d6d25">
|
||||
有效期：{{$u.timeFormat(item.startTime, 'yyyy-mm-dd')}} 至 {{$u.timeFormat(item.endTime, 'yyyy-mm-dd')}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon-right coreshop-flex coreshop-flex-direction">
|
||||
<button class="get-btn" :style="{ color: bgColor1 }" @tap.stop="receiveCoupon(item.id)">立即领取</button>
|
||||
<view class="surplus-num" style="color: #9d6d25">
|
||||
<text v-for="(itemResult, index) in item.results" :key="index">{{itemResult}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-font-xs">领取时间：{{$u.timeFormat(item.startTime, 'yyyy-mm-dd')}} 至 {{$u.timeFormat(item.endTime, 'yyyy-mm-dd')}}</view>
|
||||
</view>
|
||||
<view class="btn-right-view">
|
||||
<u-button type="success" shape="circle" size="mini" @click="receiveCoupon(item.id)">立即领取</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-num-view coreshop-flex coreshop-flex-direction-row coreshop-justify-between">
|
||||
<view class="coreshop-font-xs coreshop-flex-direction-row coreshop-basis-9 u-line-1">
|
||||
<text v-for="(itemCondition, index) in item.conditions" :key="index">【{{itemCondition}}】</text>
|
||||
</view>
|
||||
<view class="coreshop-width-fit-content">
|
||||
<u-icon name="arrow-down-fill" class="coreshop-float-right" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -92,4 +118,44 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 失效
|
||||
.gray-wrap { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) !important; -webkit-filter: grayscale(100%) !important; -moz-filter: grayscale(100%) !important; -ms-filter: grayscale(100%) !important; -o-filter: grayscale(100%) !important; filter: grayscale(100%) !important; filter: gray !important; }
|
||||
.groupon-scroll { height: 85px; width: 375px;
|
||||
.groupon-card-wrap { height: 85px; width: 375px; }
|
||||
}
|
||||
.coupon-box { background-color: #fff;
|
||||
.head-box {
|
||||
.head-title { width: 150px; font-size: 16px; font-weight: bold; color: #333333; }
|
||||
.head-more {
|
||||
.more-text { font-size: 11px; font-weight: 500; color: #333333; }
|
||||
.more-icon { color: #333333; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
.coupon-card { width: 171.5px; height: 85px; background: linear-gradient(90deg, #f8dca5, #efc480); border-radius: 5px; mask: url($apiFilesUrl+'/static/images/coupon/coupon_mini_bg.png'); -webkit-mask-box-image: url($apiFilesUrl+'/static/images/coupon/coupon_mini_bg.png'); mask-size: 100% 100%;
|
||||
.card-left { height: 100%; width: 130px;
|
||||
.price { color: #4f3a1e; font-size: 15px; font-weight: bold;
|
||||
&::before { content: '￥'; font-size: 10px; }
|
||||
}
|
||||
.notice { font-size: 11px; font-weight: 500; color: #a8700d; }
|
||||
}
|
||||
.card-right { height: 100%; width: 30px;
|
||||
.get-btn { font-size: 12px; font-weight: 500; text-align: right; color: #a8700d; writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/ }
|
||||
}
|
||||
}
|
||||
}
|
||||
// 未领取，已领取
|
||||
.coupon-wrap { mask: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); -webkit-mask-box-image: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); mask-size: 100% 100%; position: relative; border-radius: 5px; width: 355px; height: 85px; background: linear-gradient(to right, $u-type-warning-disabled, $u-type-warning);
|
||||
.coupon-item { width: 100%; height: 168rpx; border-radius: 5px;
|
||||
.coupon-left { height: 100%; justify-content: center; padding-left: 20px;
|
||||
.unit { font-size: 12px; color: #fff; }
|
||||
.sum { font-size: 22.5px; font-weight: bold; color: #fff; line-height: 22.5px; padding-right: 5px; }
|
||||
.sub { font-size: 18px; font-weight: bold; color: #fff; line-height: 18px; padding-right: 5px; }
|
||||
.notice { font-size: 11px; color: rgba(#fff, 0.7); margin-top: 3px; }
|
||||
}
|
||||
.coupon-right { height: 100%; width: 110px; justify-content: center; align-items: center;
|
||||
.get-btn { width: 72px; height: 27px; background: #ffffff; border-radius: 13px; padding: 0; font-size: 12px; font-weight: 500; color: $u-type-warning; }
|
||||
.surplus-num { font-size: 11px; font-weight: 500; color: #fff; margin-top: 7px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<u-grid col="3" border="false" align="center">
|
||||
<u-grid-item bg-color="transparent" :custom-style="{padding: '0rpx'}" v-for="item in 3" :key="item" @click="goGoodsDetail(item.id)">
|
||||
<view class="good_box">
|
||||
<u--image src="/static/images/common/empty.png" mode="widthFix" width="100%" radius="10"></u--image>
|
||||
<u--image src="/static/images/common/empty.png" mode="widthFix" width="100%" radius="10"></u--image>
|
||||
<view class="good_title u-line-2">
|
||||
无
|
||||
</view>
|
||||
@@ -59,7 +59,7 @@
|
||||
<view class="good_box">
|
||||
<u-row gutter="5" justify="space-between">
|
||||
<u-col span="4">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image>
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image>
|
||||
<view class="good-tag-recommend2" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
|
||||
@@ -1,51 +1,52 @@
|
||||
<template>
|
||||
|
||||
<view class="goodsBox coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-bottom-10 coreshop-padding-top-5 coreshop-bg-white">
|
||||
<view class="goodsBox coreshop-margin-bottom-10 coreshop-padding-top-5 coreshop-bg-white">
|
||||
<!-- 列表平铺两列三列 -->
|
||||
<view v-if="coreshopdata.parameters.column == '2' && coreshopdata.parameters.display == 'list' || coreshopdata.parameters.column == '3' && coreshopdata.parameters.display == 'list'" v-bind:class="'column'+coreshopdata.parameters.column">
|
||||
<view class="coreshop-margin-left-5 coreshop-margin-right-5 coreshop-margin-top-10 coreshop-margin-bottom-10 ">
|
||||
<view class="coreshop-margin-left-5 coreshop-margin-right-5 coreshop-margin-top-10 coreshop-margin-bottom-10 " v-if="coreshopdata.parameters.lookTitle == 'true'">
|
||||
<coreshop-section font-size="15" :title="coreshopdata.parameters.title" v-if="coreshopdata.parameters.title != ''" @click="coreshopdata.parameters.lookMore == 'true' ? goGoodsList({catId: coreshopdata.parameters.classifyId,brandId:coreshopdata.parameters.brandId}) :''" :arrow="coreshopdata.parameters.lookMore == 'true'" :sub-title="coreshopdata.parameters.lookMore == 'true'?'更多':''"></coreshop-section>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-align-start" style="flex-flow: row wrap;">
|
||||
<view :class="['good_box',coreshopdata.parameters.column==2?'cla2':'cla3']" @tap="goGoodsDetail(item.id)" v-for="(item, index) in coreshopdata.parameters.list" :key="index" v-if="count">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" :height="coreshopdata.parameters.column==2?'164px':'104px'" radius="10"></u--image>
|
||||
<view class="good_title u-line-2 coreshop-min-height-34">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="good-price coreshop-display-block">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="!count && !coreshopdata.parameters.listAjax">
|
||||
<u-grid col="3" border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="item in 3" :key="item">
|
||||
<view class="good_box">
|
||||
<view class="good_title u-line-2">
|
||||
无
|
||||
</view>
|
||||
<view class="good-price">
|
||||
0元
|
||||
</view>
|
||||
<view class="good-tag-recommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot">
|
||||
热门
|
||||
</view>
|
||||
<view class="" v-if="count">
|
||||
<u-grid :col="coreshopdata.parameters.column" :border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="(item, index) in coreshopdata.parameters.list" :key="index">
|
||||
<view class="good_box" @tap="goGoodsDetail(item.id)">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" :height="coreshopdata.parameters.column==2?'164px':'104px'" radius="10"></u--image>
|
||||
<view class="good_title u-line-2">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<view class="good-price coreshop-display-block">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<view v-else-if="!count && !coreshopdata.parameters.listAjax">
|
||||
<u-grid col="3" border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="item in 3" :key="item">
|
||||
<view class="good_box">
|
||||
<view class="good_title u-line-2">
|
||||
无
|
||||
</view>
|
||||
<view class="good-price">
|
||||
0元
|
||||
</view>
|
||||
<view class="good-tag-recommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot">
|
||||
热门
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 列表平铺单列 -->
|
||||
@@ -53,20 +54,26 @@
|
||||
<view class="coreshop-margin-left-5 coreshop-margin-right-5 coreshop-margin-top-10 coreshop-margin-bottom-10 ">
|
||||
<coreshop-section font-size="15" :title="coreshopdata.parameters.title" v-if="coreshopdata.parameters.title != ''" @click="coreshopdata.parameters.lookMore == 'true' ? goGoodsList({catId: coreshopdata.parameters.classifyId,brandId:coreshopdata.parameters.brandId}) :''" :arrow="coreshopdata.parameters.lookMore == 'true'" :sub-title="coreshopdata.parameters.lookMore == 'true'?'更多':''"></coreshop-section>
|
||||
</view>
|
||||
<view class="good_box" @click="goGoodsDetail(item.id)" v-for="item in coreshopdata.parameters.list" :key="item.id" v-if="count">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image>
|
||||
<view class="good_title u-line-2">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="good-price coreshop-display-block">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
</view>
|
||||
<view v-if="count">
|
||||
<u-grid :col="1" :border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="item in coreshopdata.parameters.list" :key="item.id">
|
||||
<view class="good_box" @click="goGoodsDetail(item.id)">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image>
|
||||
<view class="good_title u-line-2">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="good-price coreshop-display-block">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<view class="order-none" v-else>
|
||||
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无" mode="list"></u-empty>
|
||||
@@ -76,30 +83,32 @@
|
||||
<!-- 横向滚动 -->
|
||||
<block v-if="coreshopdata.parameters.column == '2' && coreshopdata.parameters.display == 'slide' || coreshopdata.parameters.column == '3' && coreshopdata.parameters.display == 'slide'"
|
||||
v-bind:class="'slide'+coreshopdata.parameters.column">
|
||||
<view class="coreshop-margin-left-15 coreshop-margin-right-15 coreshop-margin-top-15 coreshop-margin-bottom-15 ">
|
||||
<view class="coreshop-margin-left-15 coreshop-margin-right-15 coreshop-margin-top-15 coreshop-margin-bottom-15" v-if="coreshopdata.parameters.lookTitle == 'true'">
|
||||
<coreshop-section font-size="15" :title="coreshopdata.parameters.title" v-if="coreshopdata.parameters.title != ''" @click="coreshopdata.parameters.lookMore == 'true' ? goGoodsList({catId: coreshopdata.parameters.classifyId,brandId:coreshopdata.parameters.brandId}) :''" :arrow="coreshopdata.parameters.lookMore == 'true'" :sub-title="coreshopdata.parameters.lookMore == 'true'?'更多':''"></coreshop-section>
|
||||
</view>
|
||||
<block v-if="count">
|
||||
<swiper :class="coreshopdata.parameters.column==3?'swiper3':coreshopdata.parameters.column==2?'swiper2':''" @change="change">
|
||||
<swiper-item v-for="no of pageCount" :key="no">
|
||||
<view class="coreshop-flex coreshop-align-start" style="flex-flow: row wrap;">
|
||||
<view :class="['good_box',coreshopdata.parameters.column==2?'cla2':'cla3']" v-for="(item, index) in coreshopdata.parameters.list" v-if="index >=coreshopdata.parameters.column*no && index <coreshopdata.parameters.column*(no+1)" :key="index" @click="goGoodsDetail(item.id)">
|
||||
<u-image :src="item.image" :index="item.id" mode="widthFit" width="100%" :height="coreshopdata.parameters.column==3?'104px':coreshopdata.parameters.column==2?'164px':''" radius="10">
|
||||
</u-image>
|
||||
<view class="good_title u-line-2">
|
||||
{{item.name}}
|
||||
<u-grid :col="coreshopdata.parameters.column" :border="false" align="left">
|
||||
<u-grid-item v-for="(item, index) in coreshopdata.parameters.list" v-if="index >=coreshopdata.parameters.column*no && index <coreshopdata.parameters.column*(no+1)" :key="index" @click="goGoodsDetail(item.id)">
|
||||
<view class="good_box">
|
||||
<u-image :src="item.image" :index="item.id" mode="widthFit" width="100%" :height="coreshopdata.parameters.column==3?'104px':coreshopdata.parameters.column==2?'164px':'104px'" radius="10">
|
||||
</u-image>
|
||||
<view class="good_title u-line-2">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="good-price coreshop-display-block">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
</view>
|
||||
</view>
|
||||
<view class="good-price coreshop-display-block">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indicator-dots">
|
||||
@@ -162,8 +171,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goodsBox { border-radius: 8px; color: #333333 !important; padding: 0 5px; overflow: hidden;
|
||||
.good_box { border-radius: 8px; margin: 5px; background-color: #ffffff; position: relative;
|
||||
.goodsBox { color: #333333 !important; padding: 0 5px; overflow: hidden;
|
||||
.good_box { border-radius: 8px; margin: 3px; background-color: #ffffff; padding: 5px; position: relative;
|
||||
.good_title { font-size: 13px; margin-top: 5px; color: $u-main-color; }
|
||||
.good_title-xl { font-size: 14px; margin-top: 5px; color: $u-main-color; }
|
||||
.good-tag-hot { display: flex; margin-top: 5px; position: absolute; top: 7.5px; left: 7.5px; background-color: $u-type-error; color: #FFFFFF; display: flex; align-items: center; padding: 2px 7px; border-radius: 25px; font-size: 10px; line-height: 1; }
|
||||
@@ -171,8 +180,6 @@
|
||||
.good-tag-recommend2 { display: flex; margin-top: 5px; position: absolute; bottom: 7.5px; left: 7.5px; background-color: $u-type-primary; color: #FFFFFF; border-radius: 25px; line-height: 1; padding: 2px 7px; display: flex; align-items: center; border-radius: 25px; font-size: 10px; }
|
||||
.good-price { font-size: 15px; color: $u-type-error; margin-top: 5px; }
|
||||
}
|
||||
.cla2 { width: calc(50% - 10px); }
|
||||
.cla3 { width: calc(33% - 10px); }
|
||||
|
||||
.indicator-dots { margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; flex-direction: row;
|
||||
.indicator-dots-item { background-color: $u-tips-color; height: 6px; width: 6px; border-radius: 10px; margin: 0 3px; }
|
||||
|
||||
@@ -1,16 +1,11 @@
|
||||
<template>
|
||||
<!-- 单图 -->
|
||||
<view class="coreshop-imgsingle coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-bottom-10 coreshop-margin-top-10 coreshop-bg-white" v-if="coreshopdata.parameters.list && coreshopdata.parameters.list.length > 0">
|
||||
<view class="" v-for="item in coreshopdata.parameters.list" :key="item.id">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view @click="showSliderInfo2" :data-type="item.linkType" :data-val="item.linkValue">
|
||||
<image class="ad-img" :src="item.image" mode="widthFix"></image>
|
||||
<view class="coreshop-imgsingle coreshop-bg-white" v-if="coreshopdata.parameters.list && coreshopdata.parameters.list.length > 0">
|
||||
<view class="" v-for="child in coreshopdata.parameters.list">
|
||||
<view @click="taped(child)">
|
||||
<image class="ad-img" :src="child.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<image class="ad-img" :src="item.image" mode="widthFix" @click="showSliderInfo(item.linkType, item.linkValue)"></image>
|
||||
<!-- #endif -->
|
||||
<view class="imgup-btn" v-if="item.buttonText != ''" @click="showSliderInfo(item.linkType, item.linkValue)">
|
||||
<view class="imgup-btn" v-if="item.buttonText != ''" @click="showSliderInfo(child.linkType, child.linkValue)">
|
||||
<button class="coreshop-btn" :style="{background:item.buttonColor,color:item.textColor}">{{item.buttonText}}</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -34,101 +29,9 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
showSliderInfo(type, val) {
|
||||
console.log(type);
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
if (type == 1) {
|
||||
if (val.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val == '/pages/index/member/member') {
|
||||
this.$u.route({ type: 'switchTab', url: val });
|
||||
return;
|
||||
} else if (val.indexOf('/pages/coupon/coupon') > -1) {
|
||||
var id = val.replace('/pages/coupon/coupon?id=', "");
|
||||
this.receiveCoupon(id)
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else if (type == 2) {
|
||||
// 商品详情
|
||||
this.goGoodsDetail(val)
|
||||
} else if (type == 3) {
|
||||
// 文章详情
|
||||
this.$u.route('/pages/article/details/details?id=' + val + '&idType=1')
|
||||
} else if (type == 4) {
|
||||
// 文章列表
|
||||
this.$u.route('/pages/article/list/list?cid=' + val)
|
||||
} else if (type == 5) {
|
||||
//智能表单
|
||||
this.$u.route('/pages/form/details/details?id=' + val)
|
||||
}
|
||||
taped(item) {
|
||||
this.showSliderInfo(item.linkType, item.linkValue);
|
||||
},
|
||||
// 用户领取优惠券
|
||||
receiveCoupon(couponId) {
|
||||
let data = {
|
||||
promotion_id: couponId
|
||||
}
|
||||
this.$u.api.getCoupon(data).then(res => {
|
||||
if (res.status) {
|
||||
this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
|
||||
} else {
|
||||
this.$u.toast(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// #ifdef MP-WEIXIN
|
||||
showSliderInfo2: function (e) {
|
||||
let type = e.currentTarget.dataset.type;
|
||||
let val = e.currentTarget.dataset.val;
|
||||
console.log(type);
|
||||
console.log(val)
|
||||
console.log(type);
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
if (type == 1) {
|
||||
if (val.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val == '/pages/index/member/member') {
|
||||
this.$u.route({ type: 'switchTab', url: val });
|
||||
return;
|
||||
} else if (val.indexOf('/pages/coupon/coupon') > -1) {
|
||||
var id = val.replace('/pages/coupon/coupon?id=', "");
|
||||
this.receiveCoupon(id)
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else if (type == 2) {
|
||||
// 商品详情
|
||||
this.goGoodsDetail(val)
|
||||
} else if (type == 3) {
|
||||
// 文章详情
|
||||
this.$u.route('/pages/article/details/details?id=' + val + '&idType=1')
|
||||
} else if (type == 4) {
|
||||
// 文章列表
|
||||
this.$u.route('/pages/article/list/list?cid=' + val)
|
||||
} else if (type == 5) {
|
||||
//智能表单
|
||||
this.$u.route('/pages/form/details/details?id=' + val)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -47,57 +47,6 @@
|
||||
taped: function (e) {
|
||||
this.showSliderInfo(this.swiperItems[e].linkType, this.swiperItems[e].linkValue);
|
||||
},
|
||||
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>鿴<EFBFBD><E9BFB4><EFBFBD><EFBFBD>
|
||||
showSliderInfo(type, val) {
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
if (type == 1) {
|
||||
if (val.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val == '/pages/index/member/member') {
|
||||
this.$u.route({ type: 'switchTab', url: val });
|
||||
return;
|
||||
} else if (val.indexOf('/pages/coupon/coupon') > -1) {
|
||||
var id = val.replace('/pages/coupon/coupon?id=', "");
|
||||
this.receiveCoupon(id)
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else if (type == 2) {
|
||||
// <20><>Ʒ<EFBFBD><C6B7><EFBFBD><EFBFBD>
|
||||
this.goGoodsDetail(val)
|
||||
} else if (type == 3) {
|
||||
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
this.$u.route('/pages/article/details/details?id=' + val + '&idType=1')
|
||||
} else if (type == 4) {
|
||||
// <20><><EFBFBD><EFBFBD><EFBFBD>б<EFBFBD>
|
||||
this.$u.route('/pages/article/list/list?cid=' + val)
|
||||
} else if (type == 5) {
|
||||
//<2F><><EFBFBD>ܱ<EFBFBD><DCB1><EFBFBD>
|
||||
this.$u.route('/pages/form/details/details?id=' + val)
|
||||
}
|
||||
},
|
||||
// <20>û<EFBFBD><C3BB><EFBFBD>ȡ<EFBFBD>Ż<EFBFBD>ȯ
|
||||
receiveCoupon(couponId) {
|
||||
let data = {
|
||||
promotion_id: couponId
|
||||
}
|
||||
this.$u.api.getCoupon(data).then(res => {
|
||||
if (res.status) {
|
||||
this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
|
||||
} else {
|
||||
this.$u.toast(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -40,57 +40,6 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showSliderInfo(type, val) {
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
if (type == 1) {
|
||||
if (val.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val ==
|
||||
'/pages/index/member/member') {
|
||||
this.$u.route({ type: 'switchTab', url: val });
|
||||
return;
|
||||
} else if (val.indexOf('/pages/coupon/coupon') > -1) {
|
||||
var id = val.replace('/pages/coupon/coupon?id=', "");
|
||||
this.receiveCoupon(id)
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else if (type == 2) {
|
||||
// 商品详情
|
||||
this.goGoodsDetail(val)
|
||||
} else if (type == 3) {
|
||||
// 文章详情
|
||||
this.$u.route('/pages/article/details/details?id=' + val + '&idType=1')
|
||||
} else if (type == 4) {
|
||||
// 文章列表
|
||||
this.$u.route('/pages/article/list/list?cid=' + val)
|
||||
} else if (type == 5) {
|
||||
//智能表单
|
||||
this.$u.route('/pages/form/details/details?id=' + val)
|
||||
}
|
||||
},
|
||||
// 用户领取优惠券
|
||||
receiveCoupon(couponId) {
|
||||
let data = {
|
||||
promotion_id: couponId
|
||||
}
|
||||
this.$u.api.getCoupon(data).then(res => {
|
||||
if (res.status) {
|
||||
this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
|
||||
} else {
|
||||
this.$u.toast(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="coreshop-padding-top-10 coreshop-padding-bottom-10 coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-bottom-10 coreshop-margin-top-10 coreshop-bg-white">
|
||||
<view class=" coreshop-margin-bottom-5 coreshop-padding-top-10 coreshop-padding-bottom-10 coreshop-bg-white">
|
||||
<u-grid :col="limit" :border="false">
|
||||
<u-grid-item v-for="(item, index) in ListData" :key="index" @click="showSliderInfo(item.linkType, item.linkValue)">
|
||||
<view class="coreshop-padding-bottom-10 coreshop-padding-top-10">
|
||||
@@ -39,46 +39,6 @@
|
||||
this.limit = this.coreshopdata.parameters.limit;
|
||||
},
|
||||
methods: {
|
||||
showSliderInfo(type, val) {
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
if (this.$u.test.url(val)) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
this.$u.route('/pages/webview/webview', { src: val });
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val == '/pages/index/member/member') {
|
||||
this.$u.route({ type: 'switchTab', url: val });
|
||||
return;
|
||||
} else {
|
||||
|
||||
if (type == navLinkType.urlLink) {
|
||||
this.$u.route(val);
|
||||
} else if (type == navLinkType.shop) {
|
||||
this.$u.route('/pages/goods/goodDetails/goodDetails', { id: val });
|
||||
}
|
||||
else if (type == navLinkType.article) {
|
||||
this.$u.route('/pages/article/details/details', { idType: 1, id: val });
|
||||
}
|
||||
else if (type == navLinkType.articleCategory) {
|
||||
this.$u.route('/pages/article/list/list')
|
||||
}
|
||||
else if (type == navLinkType.intelligentForms) {
|
||||
this.$u.route('/pages/form/details/details', { id: val });
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,37 +1,29 @@
|
||||
<template>
|
||||
<!-- 拼团 -->
|
||||
<view v-if="count">
|
||||
<view class="coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-top-10 coreshop-margin-bottom-10">
|
||||
<coreshop-section font-size="15" :title="coreshopdata.parameters.title" @click="goPinTuanList()"></coreshop-section>
|
||||
<!-- 活动商品 -->
|
||||
<view class="activity-wrap coreshop-padding-left-10 coreshop-padding-right-10 coreshop-padding-bottom-10 coreshop-margin-bottom-5 groupon-card" v-if="count">
|
||||
<!-- 标题栏 -->
|
||||
<view class="title-box coreshop-flex coreshop-justify-between coreshop-padding-top-10 coreshop-padding-bottom-10 groupon-title">
|
||||
<view class="coreshop-flex coreshop-flex-direction coreshop-align-center">
|
||||
<view class="title-text coreshop-margin-right-10 u-line-1">每日拼团</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="goPinTuanList()"></u-icon>
|
||||
</view>
|
||||
<view class="coreshop-margin-left-15 coreshop-margin-right-15 coreshop-bg-white coreshop-padding-10" v-if="goodsList && count">
|
||||
<view class="goods-box swiper-box coreshop-flex coreshop-align-center">
|
||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
|
||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
|
||||
<view class="coreshop-flex-direction-row coreshop-flex coreshop-align-center">
|
||||
<view class="goods-item" v-for="item in goods" :key="item.id" @tap="goPinTuanDetail(item.goodsId,item.id)">
|
||||
<view class="min-goods">
|
||||
<view class="img-box">
|
||||
<view class="tag">{{item.peopleNumber}}人团</view>
|
||||
<image class="img" :src="item.goodsImage" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<view class="coreshop-flex coreshop-flex-direction coreshop-align-center">
|
||||
<text class="seckill-current">￥{{item.pinTuanPrice}}</text>
|
||||
<text class="original">￥{{item.pinTuanPrice + item.discountAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title"><slot name="titleText"></slot></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots" v-if="goodsList.length > 1">
|
||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" :key="index"></text>
|
||||
<!-- 活动商品 -->
|
||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
||||
<view class="goods-box coreshop-flex">
|
||||
<view class="min-goods coreshop-margin-right-6" v-for="mgoods in coreshopdata.parameters.list" :key="mgoods.id" @tap="goPinTuanDetail(mgoods.goodsId,mgoods.id)">
|
||||
<view class="img-box">
|
||||
<image class="img" :src="mgoods.goodsImage" mode=""></image>
|
||||
</view>
|
||||
<view class="mgoods-card-bottom coreshop-padding-10">
|
||||
<view class="goods-title coreshop-margin-bottom-5 u-line-1">{{ mgoods.name }}</view>
|
||||
<view class="price coreshop-margin-bottom-5">{{mgoods.pinTuanPrice}}</view>
|
||||
<view class="original-price">￥{{ mgoods.pinTuanPrice + mgoods.discountAmount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -84,44 +76,65 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiper-box,
|
||||
.carousel { width: 350px; height: 240upx; position: relative; border-radius: 10px; }
|
||||
.swiper-box .carousel-item,
|
||||
.carousel .carousel-item { width: 100%; height: 100%; }
|
||||
.swiper-box .swiper-image,
|
||||
.carousel .swiper-image { width: 100%; height: 100%; }
|
||||
.swiper-dots { display: flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; z-index: 66;
|
||||
.dot { width: 22.5px; height: 1.5px; background: #eee; border-radius: 50%; margin-right: 5px; }
|
||||
.dot-active { width: 22.5px; height: 1.5px; background: #a8700d; border-radius: 50%; margin-right: 5px; }
|
||||
}
|
||||
.group-goods { background: #fff; border-radius: 10px; overflow: hidden;
|
||||
.title-box { padding-bottom: 10px;
|
||||
.title { font-size: 16px; font-weight: bold; }
|
||||
.group-people {
|
||||
.time-box { font-size: 13px; color: #edbf62;
|
||||
.count-text-box { width: 15px; height: 17px; background: #edbf62; text-align: center; line-height: 17px; font-size: 12px; border-radius: 3px; color: rgba(255, 255, 255, 0.9); margin: 0 4px; }
|
||||
}
|
||||
.head-box {
|
||||
.head-img { width: 20px; height: 20px; border-radius: 50%; background: #ccc; }
|
||||
}
|
||||
.tip { font-size: 14px; padding-left: 15px; color: #666; }
|
||||
.cuIcon-right { font-size: 15px; line-height: 14px; color: #666; }
|
||||
<style lang="scss" scoped>
|
||||
.groupon-card { background: linear-gradient(#faecca 20%, #ffffff 30%, #ffffff 100%); }
|
||||
|
||||
.groupon-title { background: url($apiFilesUrl+'/static/images/pinTuan/groupon_title_bg.png') no-repeat; background-position: center top; background-size: 100% auto; }
|
||||
.activity-wrap { background-color: #fff; min-height: 300rpx;
|
||||
.title-box {
|
||||
.title-text { font-size: 32rpx; font-weight: bold; color: #333333; }
|
||||
.more-box {
|
||||
.more-text { font-size: 22rpx; font-weight: 500; color: #333333; }
|
||||
.more-icon { font-size: 24rpx; color: #333333; }
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box,
|
||||
.goods-box { height: 380rpx; width: 100%; }
|
||||
}
|
||||
.goods-item { margin-right: 11px;
|
||||
&:nth-child(4n) { margin-right: 0; }
|
||||
|
||||
// 小商品卡片
|
||||
.min-goods { width: 220rpx; height: 380rpx; background: #fffaef; box-shadow: 0px 7rpx 8rpx 1rpx rgba(162, 117, 27, 0.24); border-radius: 10rpx;
|
||||
.img-box { width: 220rpx; height: 220rpx; overflow: hidden; position: relative; border-radius: 10rpx 10rpx 0 0;
|
||||
.img { width: 220rpx; height: 220rpx; background-color: #ccc; }
|
||||
}
|
||||
.mgoods-card-bottom { height: 160rpx; background: url($apiFilesUrl+'/static/images/pinTuan/groupon_goods_bg.png') no-repeat; background-position: bottom center; background-size: 100% 100%; }
|
||||
.goods-title { font-size: 26rpx; font-weight: 500; color: #000000; width: 180rpx; line-height: 26rpx; }
|
||||
|
||||
.price { font-size: 30rpx; font-weight: 500; color: #ff0000;
|
||||
&::before { content: '￥'; font-size: 24rpx; }
|
||||
}
|
||||
.original-price { font-size: 20rpx; font-weight: 500; text-decoration: line-through; color: #c4c4c4; }
|
||||
.groupon-num-box {
|
||||
.avatar-box { direction: rtl; unicode-bidi: bidi-override; height: 30rpx;
|
||||
.avatar-img { width: 30rpx; height: 30rpx; border-radius: 50%; background-color: #f5f5f5; }
|
||||
}
|
||||
.groupon-num-text { font-size: 18rpx; font-weight: 500; color: #e9b461; }
|
||||
}
|
||||
}
|
||||
.min-goods { width: 75px; background: #fff;
|
||||
.img-box { width: 76px; height: 76px; overflow: hidden; position: relative;
|
||||
.tag { position: absolute; left: 0; bottom: 0px; z-index: 2; line-height: 17.5px; background: linear-gradient(132deg, #f3dfb1, #f3dfb1, #ecbe60); border-radius: 0px 9px 9px 0px; padding: 0 5px; font-size: 12px; font-family: PingFang SC; font-weight: bold; color: #784f06; }
|
||||
.img { width: 100%; background-color: #ccc; }
|
||||
|
||||
// 大商品卡片
|
||||
.big-goods { width: 710rpx; min-height: 260rpx; background: #ffffff; box-shadow: 0px 7rpx 8rpx 1rpx #fffaef; border-radius: 20rpx;
|
||||
.goods-img { width: 220rpx; height: 220rpx; border-radius: 6rpx; }
|
||||
.card-right { width: 430rpx; height: 100%; }
|
||||
.goods-title { font-size: 26rpx; font-weight: 600; width: 400rpx; color: #000000; vertical-align: middle;
|
||||
.title-tag { transform: scale(0.9); }
|
||||
}
|
||||
.price-box { width: 100%; margin-top: 5px;
|
||||
.seckill-current { font-size: 15px; font-weight: 500; color: #e1212b; }
|
||||
.original { font-size: 10px; font-weight: 400; text-decoration: line-through; color: #999999; margin-left: 7px; }
|
||||
.subtitle-text { font-size: 22rpx; width: 400rpx; font-weight: 500; color: #666666; }
|
||||
.buy-btn { width: 120rpx; line-height: 50rpx; background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%); border-radius: 25rpx; font-size: 24rpx; font-weight: 500; color: #ffffff; }
|
||||
|
||||
.sell-box { background: rgba(#f9efd6, 0.3); border-radius: 16rpx; line-height: 32rpx;
|
||||
.sell-num { font-size: 20rpx; font-weight: 400; color: #ff6904; }
|
||||
|
||||
.hot-icon { font-size: 26rpx; color: #ff6904; margin-right: 8rpx; }
|
||||
}
|
||||
.group-num { font-size: 20rpx; font-weight: 500; color: rgba(153, 153, 153, 1); margin-left: 20rpx; }
|
||||
|
||||
.price { color: #ff0000; font-weight: 600;
|
||||
&::before { content: '￥'; font-size: 20rpx; }
|
||||
}
|
||||
.origin-price { color: #c4c4c4; font-size: 24rpx; text-decoration: line-through;
|
||||
&::before { content: '￥'; font-size: 20rpx; }
|
||||
}
|
||||
.title { font-size: 13px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,22 +8,11 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- <view class="coreshop-tabbar coreshop-margin-bottom-10 tabbar-fixed" v-show="tabbarFixed">
|
||||
<scroll-view scroll-x='true' class="tabbar-list">
|
||||
<view class="tabbar-item" v-for="(item, index) in coreshopdata.parameters.list" :key="index" @click="showSliderInfo(item.linkType, item.linkValue)">
|
||||
{{item.text}}
|
||||
<view class="active-tabbar"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
name: "coreshopTabbar",
|
||||
props: {
|
||||
coreshopdata: {
|
||||
@@ -46,13 +35,10 @@
|
||||
// #endif
|
||||
this.searchStyle()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// #ifdef H5
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
// #endif
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
searchStyle() {
|
||||
@@ -66,43 +52,6 @@
|
||||
goClassify() {
|
||||
this.$u.route({ type: 'switchTab', url: '/pages/category/index/index' });
|
||||
},
|
||||
showSliderInfo(type, val) {
|
||||
console.log(val)
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
console.log("11")
|
||||
if (type == 1) {
|
||||
if (val.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val == '/pages/index/member/member') {
|
||||
this.$u.route({ type: 'switchTab', url: val });
|
||||
return;
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else if (type == 2) {
|
||||
// 商品详情
|
||||
this.goGoodsDetail(val)
|
||||
} else if (type == 3) {
|
||||
// 文章详情
|
||||
this.$u.route('/pages/article/details/details?id=' + val + '&idType=1')
|
||||
} else if (type == 4) {
|
||||
// console.log("11")
|
||||
// 文章列表
|
||||
this.$u.route('/pages/article/list/list?cid=' + val)
|
||||
} else if (type == 5) {
|
||||
//智能表单
|
||||
this.$u.route('/pages/form/details/details?id=' + val)
|
||||
}
|
||||
},
|
||||
},
|
||||
onPageScroll() {
|
||||
var _this = this;
|
||||
|
||||
@@ -240,61 +240,6 @@
|
||||
taped: function (e) {
|
||||
this.showSliderInfo(this.swiperItems[e].linkType, this.swiperItems[e].linkValue);
|
||||
},
|
||||
// 广告点击查看详情
|
||||
showSliderInfo(type, val) {
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
if (type == 1) {
|
||||
if (val.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
window.location.href = val
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
|
||||
if (val == '/pages/index/default/default' || val == '/pages/category/index/index' || val == '/pages/index/cart/cart' || val == '/pages/index/member/member') {
|
||||
this.$u.route({
|
||||
type: 'switchTab',
|
||||
url: val
|
||||
});
|
||||
return;
|
||||
} else if (val.indexOf('/pages/coupon/coupon') > -1) {
|
||||
var id = val.replace('/pages/coupon/coupon?id=', "");
|
||||
this.receiveCoupon(id)
|
||||
} else {
|
||||
this.$u.route(val);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else if (type == 2) {
|
||||
// 商品详情
|
||||
this.goGoodsDetail(val)
|
||||
} else if (type == 3) {
|
||||
// 文章详情
|
||||
this.$u.route('/pages/article/details/details?id=' + val + '&idType=1')
|
||||
} else if (type == 4) {
|
||||
// 文章列表
|
||||
this.$u.route('/pages/article/list/list?cid=' + val)
|
||||
} else if (type == 5) {
|
||||
//智能表单
|
||||
this.$u.route('/pages/form/details/details?id=' + val)
|
||||
}
|
||||
},
|
||||
// 用户领取优惠券
|
||||
receiveCoupon(couponId) {
|
||||
let data = {
|
||||
promotion_id: couponId
|
||||
}
|
||||
this.$u.api.getCoupon(data).then(res => {
|
||||
if (res.status) {
|
||||
this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
|
||||
} else {
|
||||
this.$u.toast(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.swiperItems = [];
|
||||
|
||||
Reference in New Issue
Block a user