123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367 |
- <template>
- <view class="container">
- <!-- 头部轮播 -->
- <!-- <view class="carousel-section">
- <swiper class="carousel" autoplay="true" duration="400" interval="5000">
- <swiper-item v-for="(item, index) in bannerImg" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
- <image :src="item.img" mode=" scaleToFill" />
- </swiper-item>
- </swiper>
- </view> -->
- <view class="top">
- <view class="bg"></view>
- <view class="title-box">
- <view class="title-one">
- <text>555</text>
- <text>推销得分</text>
- </view>
- <view class="title-one">
- <text>555</text>
- <text>推荐得分</text>
- </view>
- <view class="title-one">
- <text>555</text>
- <text>购买得分</text>
- </view>
- </view>
- <view class="title-box1" @click="navTo()">
- <view class="title-bg">
- <image src="../../static/img/libao.jpg" mode=""></image>
- </view>
- <view class="title-between">
- <text>邀请有礼</text>
- <text>转发海报邀请好友获得更多奖励</text>
- </view>
- <view class="title-right">
- <image src="../../static/user/right01.png" mode=""></image>
- </view>
- </view>
- </view>
- <view class="goodsList-box">
- <view class="goodsList-item flex" :key="ind" v-for="(ls, ind) in list">
- <image :src="ls.image" mode=" scaleToFill"></image>
- <view class="goodsList-content">
- <view class="title">
- <text class="clamp2">{{ ls.store_name }}</text>
- </view>
- <view class="goods-money flex">
- <view class="money-box">
- <text class="otMoney">¥{{ ls.ot_price }}</text>
- <image src="../../static/icon/in2.png"></image>
- <!-- <image src="../../static/error/errorImage.jpg"></image> -->
- <text class="decline">直降{{ ls.ot_price - ls.price}}元</text>
- <!-- <view class="otMoney-box"> -->
- <view class="money">¥{{ ls.price }}</view>
- <!-- <text class="sales">已售{{ ls.sales }}件</text> -->
- <!-- </view> -->
- </view>
- <view class="button" @click="navTo(ls)">立即购买</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { loadIndexs,groom } from '@/api/index.js';
- export default {
- data() {
- return {
- list: [],
- bannerImg: [],
- title: '',
- goods: [],
- page: 1,
- limit: 10
- };
- },
- onLoad(option) {
- // 获取查询对象
- this.type = option.type;
- // 加载基础数据
- // this.loadData();
- },
- methods: {
- //动态改变标头
- getTitle() {
- let title = ''
- if(this.type == 1) {
- title = "精选好货"
- // this.list = this.goods.bastList
- }else if(this.type == 2) {
- title = "热销专区"
- // this.list = this.goods.likeInfo
- }else if(this.type == 3) {
- title = "收藏夹"
- }else {
- title = "促销单品"
- }
- uni.setNavigationBarTitle({
- title: title
- });
- },
- navTo: function(ls) {
- uni.navigateTo({
- url: '/pages/product/product?id=' + ls.id
- });
- },
- // 请求载入数据
- async loadData() {
- // loadIndexs({})
- // .then(({ data }) => {
- // let goods = data.info;
- // console.log(data)
- // this.goods = goods
- // this.goods.likeInfo = data.likeInfo
- // // this.goodsList = goods.firstList; //最新商品
- // // this.bastList = goods.bastList; //精品推荐
- // this.getTitle()
- // uni.stopPullDownRefresh();
- // })
- // .catch(e => {
- // uni.stopPullDownRefresh();
- // });
- let data = {
- page: this.page,
- limit: this.limit
- }
- let type = this.type
- groom(data,type).then(res => {
- this.list = res.data.list
- this.getTitle()
- console.log(res.data)
- })
- },
- // 轮播图跳转
- // bannerNavToUrl(item) {
- // // #ifdef H5
- // if (item.wap_link.indexOf('http') > 0) {
- // window.location.href = item.wap_link;
- // }
- // // #endif
- // if (item.wap_link) {
- // uni.navigateTo({
- // url: item.wap_link
- // });
- // }
- // }
- }
- };
- </script>
- <style lang="scss">
- page {
- background: $page-color-base;
- }
- .top{
- .bg{
- width: 1000rpx;
- height: 200rpx;
- background: #52C696;
- overflow: hidden;
- text-align: center;
- border-bottom-left-radius: 50%;
- border-bottom-right-radius: 50%;
- margin-left: -125rpx;
-
- }
- .title-box{
- position: relative;
- z-index: 999;
- margin: -100rpx auto;
- display: flex;
- justify-content: space-around;
- align-items: center;
- width: 702rpx;
- height: 137rpx;
- background: #FFFFFF;
- box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
- border-radius: 10rpx;
- .title-one{
- display: flex;
- flex-direction: column;
- align-items: center;
- text:nth-child(2){
- font-size: 26rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #666666;
-
- }
- }
- }
- .title-box1{
- margin: 120rpx auto;
- display: flex;
- justify-content: space-around;
- align-items: center;
- width: 702rpx;
- height: 137rpx;
- background: #FFFFFF;
- box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
- border-radius: 10rpx;
- .title-bg{
- width: 123rpx;
- height: 123rpx;
- image{
- width: 100%;
- height: 100%;
- }
- }
- .title-between{
- display: flex;
-
- flex-direction: column;
- text:nth-child(1){
- width: 131rpx;
- font-size: 33rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #333333;
- line-height: 34rpx;
-
- }
- text:nth-child(2){
- width: 350rpx;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #999999;
- line-height: 44rpx;
- }
- }
- .title-right{
- width: 16rpx;
- height: 30rpx;
- image{
- width: 100%;
- height: 100%;
- }
- }
-
- }
- }
- .carousel-section {
- padding: 0;
- .titleNview-placing {
- padding-top: 0;
- height: 0;
- }
- .swiper-dots {
- left: 45rpx;
- bottom: 40rpx;
- }
- .carousel {
- width: 100%;
- height: 360rpx;
- .carousel-item {
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- // 中间标题样式
- .type-title-box {
- padding: 40rpx;
- .title-content {
- height: 100%;
- width: 200rpx;
- text-align: center;
- font-size: $font-lg;
- font-weight: 500;
- color: $font-color-dark;
- }
- .title-border {
- width: 250rpx;
- height: 2rpx;
- background-color: #e9e9e9;
- }
- }
- // 商品列表
- .goodsList-box {
- padding: 30rpx;
- .goodsList-item {
- box-shadow:0 0 20rpx 6rpx #f1f1f1;
- border-radius: 10rpx;
- margin-bottom: 30rpx;
- background-color: #ffffff;
- padding: 30rpx;
- image {
- flex-shrink: 0;
- border-radius: $border-radius-sm;
- height: 180rpx;
- width: 180rpx;
- }
- .goodsList-content {
- margin-left: 20rpx;
- flex-grow: 1;
- height: 180rpx;
- position: relative;
- .title {
- font-size: $font-base;
- color: $font-color-dark;
- font-weight: bold;
- }
- .goods-money {
- position: absolute;
- left: 0;
- bottom: 0;
- width:100%;
- .money-box {
- .otMoney {
- color: #999999;
- text-decoration: line-through;
- margin-right: 15rpx;
- font-size: 20rpx;
- }
- .money {
- color: #FF6F0F;
- font-weight: bold;
- font-size: 35rpx;
- }
- image {
- width: 20rpx;
- height: 20rpx;
- margin-right: 5rpx;
- }
- .decline {
- color: #B59467;
- font-size: 20rpx;
- }
- .sales {
- color: $font-color-light;
- }
- }
- .button {
- background: #52C696;
- height: 50rpx;
- border-radius: 20rpx;
- padding: 10rpx 15rpx;
- color: #fff;
- font-size: 25rpx;
- position: relative;
- top: 20rpx;
- }
- .cart {
- border: 1px solid $color-red;
- color: $color-red;
- font-size: $font-base;
- font-weight: bold;
- border-radius: 99px;
- width: 55rpx;
- height: 55rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- }
- }
- }
- </style>
|