|
|
@@ -0,0 +1,534 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="searchbackground">
|
|
|
+ <view class="backgroundimg">
|
|
|
+ <image src="../../static/index/index10.jpg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="input-box flex" @click="clickSearch">
|
|
|
+ <view class=" input-content flex">
|
|
|
+ <view class="iconfont iconsearch"></view>
|
|
|
+ <view class="input"><input type="text" disabled placeholder="请输入搜索内容" /></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="jifen-content">
|
|
|
+ <view class="jifen-box" v-for="(item,index) in bastList" :key="index"
|
|
|
+ @click="navTo('/pages/product/product?id=' + item.id)">
|
|
|
+ <view class="img">
|
|
|
+ <image class="hlbg" src="../../static/index/index04.png" mode=""></image>
|
|
|
+ <image :src="item.image" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="jifen-list">
|
|
|
+ <view class="box-title">
|
|
|
+ <view class="top clamp2">
|
|
|
+ {{item.store_name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-price">
|
|
|
+ <view class="huiyuan">
|
|
|
+ 会员价
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ ￥
|
|
|
+ </view>
|
|
|
+ <view class="price-left">
|
|
|
+ {{(item.price*1).toFixed(0)}}
|
|
|
+ </view>
|
|
|
+ <view class="price-right">
|
|
|
+ ￥{{item.ot_price}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ loadIndexs
|
|
|
+ } from '@/api/index.js';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ carouselList: [], //轮播列表
|
|
|
+ couponArray: '',
|
|
|
+ bastList: [], //精品推荐
|
|
|
+ fugou: '', //复购商品
|
|
|
+ price: '', //复购价格
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // 请求载入数据
|
|
|
+ async loadData() {
|
|
|
+ loadIndexs({})
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ console.log(data, 'dddd')
|
|
|
+ this.fugou = data.register_order;
|
|
|
+ this.price = data.register_price;
|
|
|
+ let goods = data.info;
|
|
|
+ this.carouselList = data.banner;
|
|
|
+ this.swiperLength = this.carouselList.length;
|
|
|
+ this.menusList = data.menus;
|
|
|
+ this.goodsList = goods.firstList; //最新商品
|
|
|
+ this.bastList = goods.bastList; //精品推荐
|
|
|
+ console.log(this.bastList, 'this.bastList6666666666666666666666');
|
|
|
+ this.bastBanner = data.benefit; //促销单品
|
|
|
+ this.$set(this, 'couponArray', data.couponList); //保存卡包券
|
|
|
+
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickSearch() {
|
|
|
+ console.log('点击')
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/product/search'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .searchbackground {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .backgroundimg {
|
|
|
+ // border-bottom-left-radius:30rpx ;
|
|
|
+ // border-bottom--radius:30rpx ;
|
|
|
+ position: absolute;
|
|
|
+ width: 750rpx;
|
|
|
+ height:350rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .jifen-content {
|
|
|
+
|
|
|
+ width: 700rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .jifen-box {
|
|
|
+ position: relative;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 342rpx;
|
|
|
+ height: 512rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ // box-shadow: 0px 7px 10px 1px #8BAFAB;
|
|
|
+
|
|
|
+ .img {
|
|
|
+
|
|
|
+ .hlbg{
|
|
|
+ border-radius: 10rpx;
|
|
|
+ z-index: 9;
|
|
|
+ position: absolute;
|
|
|
+ width:335rpx ;
|
|
|
+ height: 335rpx;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ flex-shrink: 0;
|
|
|
+ // margin-top: 20rpx;
|
|
|
+ height: 312rpx;
|
|
|
+ width: 312rpx;
|
|
|
+ background-color: #eee;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .jifen-list {
|
|
|
+ // margin-left: -80rpx;
|
|
|
+ width: 312rpx;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .box-title {
|
|
|
+ .top {
|
|
|
+ margin: 20rpx 0 10rpx 0;
|
|
|
+ // padding: 20rpx 0 10rpx 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3F7C1F;
|
|
|
+ line-height: 35rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3F7C1F;
|
|
|
+ line-height: 35rpx;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20rpx;
|
|
|
+
|
|
|
+ .pricebox {
|
|
|
+ height: 25rpx;
|
|
|
+ width: 25rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .huiyuan{
|
|
|
+ width: 70rpx;
|
|
|
+ height: 33rpx;
|
|
|
+ background: linear-gradient(90deg, #C79A4C, #F9DF7F);
|
|
|
+ border-radius: 5rpx;
|
|
|
+ font-size: 19rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: 33rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .price-left {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF0000;
|
|
|
+ line-height: 35rpx;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ margin: 0 5rpx;
|
|
|
+ font-size: 19rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF4C4C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-right {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 21rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 35rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .input-box {
|
|
|
+ margin: 40rpx 25rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ justify-content: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 1rpx 21rpx 0rpx rgba(255, 255, 255, 0.12);
|
|
|
+ border-radius: 35rpx;
|
|
|
+ width: 700rpx;
|
|
|
+ height: 70rpx;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #C4C4C4;
|
|
|
+ line-height: 38rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .carousel {
|
|
|
+ margin-top: 165rpx;
|
|
|
+ width: 700rpx;
|
|
|
+ height: 370rpx;
|
|
|
+
|
|
|
+ .carousel-item {
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .customs {
|
|
|
+ margin-left: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 37rpx;
|
|
|
+ height: 37rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vip {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .customs-content {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 14rpx;
|
|
|
+
|
|
|
+ .backgroundimg1 {
|
|
|
+ width: 700rpx;
|
|
|
+ height: 300rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ position: absolute;
|
|
|
+ margin-top: -250rpx;
|
|
|
+ padding: 0 38rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .customs-img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .customstext {
|
|
|
+ margin-left: 14rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // justify-content: space-around;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .customstext1 {
|
|
|
+ .customstext-title {
|
|
|
+ width: 350rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3F7C1F;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .customstext-product {
|
|
|
+ // margin-top: 25rpx;
|
|
|
+ width: 400rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ABD56F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .customsprice {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .customsprice-left {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF0000;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customsprice-between {
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF0000;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customsprice-right {
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+ width: 137rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ background: #3F7C1F;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .jifen-content {
|
|
|
+ width: 700rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .jifen-box {
|
|
|
+ position: relative;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 342rpx;
|
|
|
+ height: 512rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ // box-shadow: 0px 7px 10px 1px #8BAFAB;
|
|
|
+
|
|
|
+ .img {
|
|
|
+
|
|
|
+ .hlbg{
|
|
|
+ border-radius: 10rpx;
|
|
|
+ z-index: 9;
|
|
|
+ position: absolute;
|
|
|
+ width:335rpx ;
|
|
|
+ height: 335rpx;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ flex-shrink: 0;
|
|
|
+ // margin-top: 20rpx;
|
|
|
+ height: 312rpx;
|
|
|
+ width: 312rpx;
|
|
|
+ background-color: #eee;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .jifen-list {
|
|
|
+ // margin-left: -80rpx;
|
|
|
+ width: 312rpx;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .box-title {
|
|
|
+ .top {
|
|
|
+ margin: 20rpx 0 10rpx 0;
|
|
|
+ // padding: 20rpx 0 10rpx 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3F7C1F;
|
|
|
+ line-height: 35rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3F7C1F;
|
|
|
+ line-height: 35rpx;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20rpx;
|
|
|
+
|
|
|
+ .pricebox {
|
|
|
+ height: 25rpx;
|
|
|
+ width: 25rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .huiyuan{
|
|
|
+ width: 70rpx;
|
|
|
+ height: 33rpx;
|
|
|
+ background: linear-gradient(90deg, #C79A4C, #F9DF7F);
|
|
|
+ border-radius: 5rpx;
|
|
|
+ font-size: 19rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: 33rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .price-left {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF0000;
|
|
|
+ line-height: 35rpx;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ margin: 0 5rpx;
|
|
|
+ font-size: 19rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF4C4C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-right {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 21rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 35rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
