123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500 |
- <template>
- <view class="container">
- <view class="carousel-section">
- <view class="search flex">
- <!-- <image src="../../static/icon/img01.png" class="address"></image> -->
- <view class="shop-name clamp" @click.stop="navTo('/pages/index/selectCity')">{{chooseDistrict || '定位中'}}</view>
- <image src="../../static/icon/dingwei.png" mode="widthFix" style="width: 11rpx;"></image>
- <view class="input-box flex" @click.stop="clickSearch">
- <view class=" input-content flex">
- <view class="iconfont iconsearch"></view>
- <view class="input"><input type="text" disabled value="输入关键字搜索" /></view>
- </view>
- </view>
- </view>
- <swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange"
- :indicator-dots="true" indicator-active-color="#FFFFFF">
- <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
- <image :src="item.pic" mode="aspectFill" @click="bannerNavToUrl(item)"></image>
- </swiper-item>
- </swiper>
- </view>
- <swiper :interval="3000" :duration="1000" style="height: 300rpx;background: #fff;">
- <swiper-item v-for=" (shopitem,shopindex) in shopList" :key="shopindex">
- <view class="shop-list flex" style="padding-top: 40rpx;">
- <view class="shop-item flex" v-for="(item,index) in shopitem"
- @click="navto('/pages/shop/shopList?id=' + item.id)">
- <image :src="item.pic" mode="" class="shop-img"></image>
- <view class="shop-name">
- {{item.cate_name}}
- </view>
- </view>
- </view>
- </swiper-item>
- </swiper>
- <!-- <view class="shop-list flex" style="padding-top: 40rpx;">
- <view class="shop-item flex" v-for="(item,index) in shopList"
- @click="navto('/pages/shop/shopList?id=' + item.id)">
- <image :src="item.pic" mode="" class="shop-img"></image>
- <view class="shop-name">
- {{item.cate_name}}
- </view>
- </view>
- </view> -->
- <!-- 商品列表 -->
- <view class="" style="background: #fff;margin-top: 20rpx;padding-bottom: 20rpx;">
- <view class="title-wrapper flex">
- <image src="../../static/icon/shop-logo.png" mode=""></image>
- <view class="">礼包商品</view>
- <view class="title-b">超值体验</view>
- </view>
- <!-- <view class="gift-info">
- <view class="" style="padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">
- 最强商家联盟
- </view>
- <view class="">
- 买到就是赚到
- </view>
- </view>
- <view class="gift-good-list p-r">
- <view class="gift-list p-a flex f-j-s">
- <view class="gift-item flex f-d-c f-j-c" v-for="item in goodList"
- @click="navto('/pages/product/product?id=' + item.id)">
- <image :src="item.image" mode=""></image>
- <view class="gift-name clamp">
- {{item.store_name}}
- </view>
- <view class="gift-price">
- ¥{{item.price}}
- </view>
- </view>
- </view>
- </view> -->
- </view>
- <view class="product-box">
- <view class="hotgoods">
- <view class="hotgoods-item" v-for="item in goodList" :key="item.id"
- @click="navto('/pages/product/product?id=' + item.id)">
- <view class="image-wrapper">
- <!-- <image class="image-bg" src="../../static/img/libao-bg.png" mode=""></image> -->
- <image class="image" :src="item.image" mode="scaleToFill"></image>
- </view>
- <view class="title clamp2">{{ item.store_name }}</view>
- <view class="hot-price">
- <!-- <view class="hotPrice-box">会员价</view> -->
- <view class="price">
- <text class="font-size-sm">¥</text>
- {{ item.price * 1 }}
- </view>
- <view class="yuanPrice">
- 已售:{{item.sales}}
- </view>
- <!-- <view class="yuanPrice">{{ item.ot_price }}</view> -->
- </view>
- </view>
- </view>
- </view>
- <!-- 门店列表 -->
- <view class="" style="height: 20rpx;"></view>
- <view class="shop">
- <view class="shop-title">
- <view class="shop-item" @click="PXType = 0">
- <view class="sitem-font" :class="{'choose': PXType == 0}">智能排序</view>
- <image class="jt-down" src="../../static/index/index06.png" mode=""></image>
- </view>
- <view class="shop-item" @click="PXType = 1">
- <view class="sitem-font" :class="{'choose': PXType == 1}">距离排序</view>
- <image class="jt-down" src="../../static/index/index06.png" mode=""></image>
- </view>
- <view class="shop-item" @click="PXType = 2">
- <view class="sitem-font" :class="{'choose': PXType == 2}">销量排序</view>
- <image class="jt-down" src="../../static/index/index06.png" mode=""></image>
- </view>
- </view>
- </view>
- <view class="" style="height: 20rpx;"></view>
- <view class="djq-wrap flex f-ai-s" v-for="storeitem in storeList"
- @click="navto('/pages/shop/shopDetail?id=' + storeitem.id )">
- <image :src="storeitem.image" mode="" class="djq-img"></image>
- <view class="djq-right pl20">
- <view class="djq-tit flex f-j-sb f-ai-s">
- <view class="djq-name clamp">
- {{storeitem.name}}
- </view>
- <view class="djq-dis">
- <image src="../../static/index/index10.png" mode=""></image>
- 距离{{storeitem.range*1}}KM
- </view>
- </view>
- <view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
- <view class="djq-dz clamp2">
- {{storeitem.detailed_address}}
- </view>
- <view class="djq-hd flex f-j-sb">
- <view class="buy-info">
- <!-- {{storeitem.count}}人已购买 -->
- </view>
- <view class="hd-btn">
- <image src="../../static/icon/call.png" mode="" style="margin-right: 15rpx;"
- @click.stop="makeCall(storeitem.phone)"></image>
- <!-- #ifdef H5 -->
- <image src="../../static/icon/dh.png" mode=""
- @click.stop="toGaodeMap(storeitem.latitude,storeitem.longitude,storeitem.name)">
- </image>
- <!-- #endif -->
- <!-- #ifdef MP -->
- <image src="../../static/icon/dh.png" mode=""
- @click.stop="dh(storeitem)">
- </image>
- <!-- #endif -->
- </view>
- </view>
- </view>
- <view class="" style="padding: 10rpx 0 0 0;" v-if="storeitem.coupon && storeitem.coupon.length > 0">
- <view class="left-btm flex f-j-s" v-for="qitem in storeitem.coupon">
- <view class="j-logo">
- 券
- </view>
- <view class="j-price">
- <text>¥</text>{{qitem.price}}
- </view>
- <view class="j-zk">
- {{(((qitem.price*10)/(qitem.ot_price*1)).toFixed(1))}}折
- </view>
- <view class="j-name">
- {{qitem.store_name}}
- </view>
- </view>
- </view>
- </view>
- </view>
- <uni-load-more :status="loadingType"></uni-load-more>
- </view>
- </template>
- <script>
- // 地区选择
- import LeeSelectCity from '@/components/lee-select-city/lee-select-city.vue'
-
- import uniLoadMore from '@/uview-ui/components/u-loadmore/u-loadmore.vue';
- import {
- store_cate,
- getStoreList,
- getCity
- } from '@/api/shop.js'
- import {
- lookSubpoints,
- lookOneself
- } from '../../api/user.js';
- import seckill from '../../components/seckill/seckill.vue';
- import {
- loadIndexs,
- getVip
- } from '@/api/index.js';
- import {
- getUserInfo,
- spread
- } from '@/api/user.js';
- import {
- setCoupons
- } from '@/api/functionalUnit.js';
- import {
- getBargainList,
- getProducts
- } from '@/api/product.js';
- import {
- interceptor
- } from '@/utils/loginUtils';
- import {
- mapState,
- mapMutations
- } from 'vuex';
- import {
- tabbar
- } from '@/utils/tabbar.js';
- // #ifdef H5
- import {
- weixindata,
- shareLoad
- } from '@/utils/wxAuthorized';
- // #endif
- export default {
- components: {
- seckill,
- LeeSelectCity
- },
- data() {
- return {
- page:1,
- limitt:10,
- loadingType:'more',
- district: '定位中',
- PXType: 0, //店铺排序规则 0-》智能排序 1-》距离排序 2-》销量排序
- storeList: [],
- tabbar: tabbar,
- current: 0,
- shareShow: false, //分享海报
- pageProportion: 0, //保存页面基于750宽度的比例
- swiperHeight: 0,
- checkid: 0,
- titleNViewBackground: '',
- swiperCurrent: 0,
- swiperLength: 0,
- carouselList: [], //轮播列表
- bastList: [], //会员礼包
- page: 1,
- limit: 5,
- firstList: [],
- goodList: [],
- shopList: []
- };
- },
- computed: {
- ...mapState(['loginInterceptor', 'baseURL', 'latitude', 'longitude', 'weichatObj','chooseDistrict']),
- ...mapState('user', ['hasLogin', 'userInfo'])
- },
- onReachBottom() {
- this.getStoreList()
- },
- onLoad: function(option) {
- this.getaddress();
- // #ifdef MP
- if (option.scene) {
- // 存储小程序邀请人
- uni.setStorage({
- key: 'spread_code',
- data: option.scene
- });
- }
- // #endif
- // #ifdef H5
- this.IndexShare();
- //#endif
- },
- watch: {
- PXType(val, old) {
- this.getStoreList()
- },
- chooseDistrict(val,old) {
- this.reGetStoreList()
- }
- },
- onShow: function() {
- this.getGoodList()
- this.loadData();
- // this.getStoreList()
- // this.getCity()
- // this.getBargainList();
- this.getStoreCate()
- },
- //下拉刷新
- onPullDownRefresh() {
- this.loadData();
- },
- // #ifndef MP
- // 监听导航栏输入框点击事件
- onNavigationBarSearchInputClicked(e) {
- //跳转到搜索页面
- this.clickSearch();
- },
- //点击导航栏 buttons 时触发
- onNavigationBarButtonTap(e) {
- const index = e.index;
- if (index === 0) {
- this.$api.msg('点击了扫描');
- } else if (index === 1) {
- // #ifdef APP-PLUS
- const pages = getCurrentPages();
- const page = pages[pages.length - 1];
- const currentWebview = page.$getAppWebview();
- currentWebview.hideTitleNViewButtonRedDot({
- index
- });
- // #endif
- uni.navigateTo({
- url: '/pages/user/notice'
- });
- }
- },
- // #endif
- methods: {
- ...mapMutations(['setLat', 'setLon','setChoose']),
- // 刷新门店列表
- reGetStoreList() {
- this.page = 1
- this.loadingType = 'more'
- this.storeList = []
- console.log('地址刷新')
- this.getStoreList()
- },
- // 计算距离
- space(lat1, lng1, lat2, lng2) {
- console.log(lat1, lng1, lat2, lng2);
- var radLat1 = (lat1 * Math.PI) / 180.0;
- var radLat2 = (lat2 * Math.PI) / 180.0;
- var a = radLat1 - radLat2;
- var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
- var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
- .pow(Math.sin(b / 2), 2)));
- s = s * 6378.137;
- s = Math.round(s * 10000) / 10000;
- // return s * 1000; // 单位米
- return s //单位km
- },
- // 拨打电话
- makeCall(phone) {
- uni.makePhoneCall({
- phoneNumber: phone //仅为示例
- });
- },
- // 导航
- dh(item) {
- wx.openLocation({
- latitude: item.latitude * 1,
- longitude: item.longitude * 1,
- name: item.name,
- address: item.detailed_address
- })
- },
- // 获取商店列表
- getStoreList() {
- let obj = this
- if(obj.loadingType=='loading' || obj.loadingType == 'noMore'){
- return
- }
- obj.loadingType= 'loading'
- getStoreList({
- page:obj.page,
- latitude: obj.latitude,
- longitude: obj.longitude,
- limit:obj.limitt,
- // address: obj.$store.state.chooseProvince,
- address: obj.$store.state.chooseDistrict,
- sales: obj.PXType == 2 ? 1 : 0
- }).then(res => {
- if(res.data.list.length>0){
- obj.storeList = obj.storeList.concat( res.data.list)
- obj.page++
- console.log('数据加载完毕');
- }
-
- if(obj.limitt==res.data.list.length){
- //说明数据已经加载完毕了
- obj.loadingType= "more"
- console.log('加载完毕1111111');
- }else{
- console.log('加载完毕1222222222211');
- obj.loadingType ="noMore"
-
- }
- //说明还有数据
- uni.hideLoading()
- this.$set(obj.storeList,'loaded',true)
-
- })
- },
- // 获取店铺分类
- getStoreCate() {
- let obj = this
- store_cate().then(res => {
- console.log(res)
- obj.shopList = obj.chunkArr(res.data, 10)
- console.log(obj.shopList, 'this.shopList+++++++++++++')
- })
- },
- getLocation() {
- uni.getLocation({
- type: 'gcj02',
- success(e) {
- console.log(e, 'dingwei')
- }
- })
- },
- getGoodList() {
- let obj = this
- getProducts({
- page: 1,
- limit: 50,
- cid: 1
- }).then(res => {
- console.log(res, 'libao')
- obj.goodList = res.data.filter(item => {
- return item.price != 2999
- })
- })
- },
- navto(url) {
- uni.navigateTo({
- url,
- fail() {
- uni.switchTab({
- url
- })
- }
- })
- },
- // #ifdef H5
- IndexShare() {
- let obj = this;
- let pages = getCurrentPages();
- // 获取当前页面
- let page = pages[pages.length - 1];
- let path = '#/' + page.route + '?';
- // 保存传值
- for (let i in page.options) {
- path += i + '=' + page.options[i] + '&';
- }
- console.log(obj.Path);
- // 保存邀请人
- path += 'spread=' + this.userInfo.uid;
- let data = {
- link: this.baseURL + '/index/' + path,
- title: this.userInfo.nickname + '邀请您进入想亮',
- desc: '欢迎加入想亮',
- imgUrl: this.baseURL + '/index/static/img/logo.jpg'
- };
- console.log(data, '分享数据');
- shareLoad(data);
- },
- // #endif
- getaddress() {
- console.log('dizhi+++++++++++');
- let obj = this;
- uni.getLocation({
- type: 'gcj02',
- success: res => {
- console.log(res, 123456);
- obj.setLat(res.latitude);
- obj.setLon(res.longitude);
-
- obj.getCity()
- },
- fail: err => {
- console.log(err, 'shi+++++++++++++++');
- openMap().then(e => {
- this.getaddress();
- });
- }
- });
- },
- navTo(url) {
- if (url == '') {
- this.$api.msg('暂未开通,敬请期待');
- } else {
- uni.navigateTo({
- url
- });
- }
- },
- // 點擊搜索框
- clickSearch() {
- uni.navigateTo({
- url: '/pages/shop/shopList?id=0'
- });
- },
- // 监听图片加载完成
- onImageError(key, index) {
- this[key][index].image = '/static/error/errorImage.jpg';
- },
- // 请求载入数据
- async loadData() {
- loadIndexs({})
- .then(({
- data
- }) => {
- let goods = data.info;
- console.log(goods, '商品信息');
- this.carouselList = data.banner;
- this.swiperLength = this.carouselList.length;
- this.bastList = data.giftInfo; //会员礼包
- data.info.firstList.forEach(e => {
- e.isVip = e.store_type ? "3" : "0"
- })
- this.firstList = data.info.firstList //首页商品
- uni.stopPullDownRefresh();
- })
- .catch(e => {
- uni.stopPullDownRefresh();
- });
- },
- //轮播图切换修改背景色
- swiperChange(e) {
- const index = e.detail.current;
- this.swiperCurrent = index;
- this.titleNViewBackground = this.carouselList[index].background;
- },
- // 轮播图跳转
- bannerNavToUrl(item) {
- // #ifdef H5
- console.log(item.wap_url.indexOf('http'), 'banner');
- if (item.wap_url.indexOf('http') >= 0) {
- window.location.href = item.wap_url;
- }
- // #endif
- //测试数据没有写id,用title代替
- uni.navigateTo({
- url: item.wap_url
- });
- },
- // 根据指定个数分割数组
- chunkArr(arr, size) {
- console.log(arr, 'arr+++++')
- //判断如果不是数组(就没有length),或者size没有传值,size小于1,就返回空数组
- if (!arr.length || !size || size < 1) return []
- let [start, end, result] = [null, null, []]
- for (let i = 0; i < Math.ceil(arr.length / size); i++) {
- start = i * size
- end = start + size
- result.push(arr.slice(start, end))
- }
- return result
- },
- getCity() {
- let obj = this
- getCity({
- lat: obj.latitude,
- lng: obj.longitude
- }).then(res => {
- console.log(res, '逆解析结果')
- // obj.district = res.data.district
- if(!obj.chooseDistrict) {
- obj.setChoose({
- chooseProvince: res.data.province,
- chooseCity: res.data.city,
- chooseDistrict: res.data.district
- })
- }
-
- obj.getStoreList()
- })
- },
- // 调用高德
- toGaodeMap(latitude, longitude, address) {
- window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
- },
- }
- };
- </script>
- <style lang="scss">
- page {
- background: #f8f6f9;
- }
- .carousel-section {
- position: relative;
- // padding-top: 10px;
- .bg {
- position: absolute;
- top: 0;
- left: 0;
- width: 750rpx;
- height: 378rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .titleNview-placing {
- height: var(--status-bar-height);
- box-sizing: content-box;
- }
- .search {
- justify-content: space-between;
- padding: 10rpx 32rpx 20rpx;
- align-items: center;
- background-color: #fff;
- .address {
- width: 32rpx;
- height: 38rpx;
- }
- .shop-name {
- height: 38rpx;
- position: relative;
- top: -4rpx;
- z-index: 100;
- font-size: 30rpx;
- font-family: PingFang SC;
- font-weight: 500;
- padding-left: 10rpx;
- }
- .shop-jt {
- margin-left: 8rpx;
- width: 16rpx;
- height: 10rpx;
- }
- .input-box {
- margin-left: 10rpx;
- position: relative;
- z-index: 99;
- width: 550rpx;
- height: 60rpx;
- background: #EEEEEE;
- border-radius: 30rpx;
- .input-content {
- position: relative;
- z-index: 11;
- border-radius: 99rpx;
- flex-grow: 1;
- padding: 5rpx 30rpx;
- background: #EEEEEE;
- .iconsearch {
- font-size: 50rpx;
- color: #CBCBCB;
- }
- .input {
- margin-left: 19rpx;
- flex-grow: 1;
- color: #CBCBCB;
- input {
- font-size: 28rpx;
- color: #CBCBCB;
- }
- }
- }
- .input-button {
- padding-left: 20rpx;
- font-size: $font-base;
- height: 100%;
- }
- }
- }
- }
- .carousel {
- position: relative;
- z-index: 3;
- width: 100%;
- height: 360rpx;
- background-color: #fff;
- .carousel-item {
- width: 100%;
- height: 100%;
- padding: 0 28rpx;
- overflow: hidden;
- }
- image {
- width: 100%;
- height: 100%;
- border-radius: $border-radius-sm;
- }
- }
- .navbar {
- position: relative;
- z-index: 2;
- padding: 0 50rpx;
- margin-top: -200rpx;
- width: 750rpx;
- height: 420rpx;
- background: #ffffff;
- border-radius: 40rpx;
- .navbar-box {
- padding-top: 250rpx;
- .navbar-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 20%;
- .nitem-image {
- width: 90rpx;
- height: 90rpx;
- }
- .nitem-font {
- margin-top: 22rpx;
- font-size: 26rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #000000;
- }
- }
- }
- }
- .jx {
- background: #fff;
- width: 750rpx;
- }
- .jx-box {
- background: #fff;
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 750rpx;
- .jx-box-title {
- margin: 50rpx 0;
- width: 610rpx;
- height: 30rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .jx-box-img {
- width: 750rpx;
- height: 220rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- .cai {
- display: flex;
- justify-content: center;
- align-items: center;
- padding-bottom: 20rpx;
- font-size: 28rpx;
- font-weight: 500;
- color: #999999;
- }
- .jx-box-content {
- display: flex;
- .content-left {
- margin: 20rpx 15rpx;
- width: 236rpx;
- height: 236rpx;
- background: #E2E2E2;
- border-radius: 10rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .content-right {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- .shop-name {
- width: 382rpx;
- font-size: 32rpx;
- font-weight: bold;
- color: #333333;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- }
- .shop-content {
- width: 455rpx;
- display: flex;
- justify-content: space-between;
- .shop-content-left {
- display: flex;
- flex-direction: column;
- .price-box {
- display: flex;
- align-items: center;
- .yuan-price {
- font-size: 26rpx;
- font-weight: 500;
- text-decoration: line-through;
- color: #999999;
- }
- image {
- margin: 0 10rpx;
- width: 16rpx;
- height: 18rpx;
- }
- .j-price {
- font-size: 24rpx;
- font-weight: bold;
- color: #B59467;
- }
- }
- .price-x {
- font-size: 36rpx;
- font-weight: bold;
- color: #FF4C4C;
- }
- }
- .shop-content-right {
- margin-top: 20rpx;
- align-items: center;
- text-align: center;
- width: 137rpx;
- height: 52rpx;
- font-size: 26rpx;
- font-weight: 500;
- color: #F8DABA;
- background: #303030;
- border-radius: 26rpx;
- line-height: 52rpx;
- }
- }
- }
- }
- .shop {
- margin-top: 20rpx;
- background: #ffffff;
- padding: 0 12rpx;
- .shop-title {
- padding: 30rpx 0 20rpx;
- display: flex;
- align-items: center;
- border-bottom: 1px solid #e3e6e7;
- .shop-item {
- width: 25%;
- display: flex;
- align-items: center;
- justify-content: center;
- .sitem-font {
- font-size: 26rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #333333;
- }
- .choose {
- color: #ff4c4c;
- }
- .jt-down {
- width: 10rpx;
- height: 8rpx;
- margin-left: 12rpx;
- }
- }
- }
- }
- .shop-main {
- padding: 32rpx 18rpx 0 12rpx;
- align-items: flex-start;
- justify-content: flex-start;
- .main-left {
- width: 180rpx;
- height: 180rpx;
- border-radius: 10rpx;
- }
- .main-right {
- width: 500rpx;
- justify-content: space-between;
- align-items: flex-start;
- margin-left: 20rpx;
- padding: 13rpx 0 35rpx;
- border-bottom: 1px solid #eaeced;
- .shopm-info {
- max-width: 60%;
- line-height: 1;
- .shopm-title {
- display: flex;
- justify-content: flex-start;
- .shopmt-font {
- font-size: 34rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #333333;
- }
- .shopmt-good {
- margin-left: 6rpx;
- width: 30rpx;
- height: 30rpx;
- border: 1px solid #ff4c4c;
- border-radius: 5rpx;
- font-size: 20rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #ff4c4c;
- text-align: center;
- line-height: 30rpx;
- }
- }
- .address {
- margin-top: 16rpx;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #666666;
- }
- .shopmt-tip {
- position: relative;
- display: inline-block;
- flex-grow: 0;
- margin-top: 52rpx;
- padding: 8rpx;
- background: #fcf3f0;
- border-radius: 16rpx 16rpx 16rpx 0px;
- font-size: 20rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #ff440d;
- }
- }
- .right {
- height: 100%;
- margin-top: 5rpx;
- display: flex;
- flex-direction: column;
- .mright-top {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- .mrt-image {
- width: 20rpx;
- height: 28rpx;
- }
- .mrt-font {
- margin-left: 8rpx;
- font-size: 22rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #666666;
- }
- }
- .mright-bottom {
- margin-top: 80rpx;
- display: flex;
- justify-content: flex-end;
- .mrb-item {
- width: 46rpx;
- height: 46rpx;
- margin-left: 14rpx;
- }
- }
- }
- }
- }
- .good-list {
- width: 750rpx;
- background: linear-gradient(0deg, #FFFFFF, #F8F8F8);
- padding: 0 30rpx 30rpx;
- .good {
- width: 690rpx;
- height: 276rpx;
- background: #FFFFFF;
- box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
- border-radius: 10rpx;
- margin: auto;
- padding: 20rpx 15rpx;
- margin-bottom: 20rpx;
- &:last-of-type {
- margin-bottom: 0rpx;
- }
- .good-img {
- flex-shrink: 0;
- width: 236rpx;
- height: 236rpx;
- border-radius: 10rpx;
- margin-right: 22rpx;
- image {
- width: 236rpx;
- height: 236rpx;
- border-radius: 10rpx;
- }
- }
- .good-info {
- flex-grow: 1;
- height: 100%;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-start;
- .good-name {
- font-size: 32rpx;
- font-weight: bold;
- padding-top: 10rpx;
- color: #333333;
- }
- .good-price {
- width: 100%;
- image {
- width: 14rpx;
- margin: 0 6rpx 0 10rpx;
- }
- .old-price {
- .old-left {
- font-size: 26rpx;
- font-weight: 500;
- text-decoration: line-through;
- color: #999999;
- }
- .old-right {
- font-size: 24rpx;
- font-weight: bold;
- color: #B59467;
- }
- }
- .new-price {
- width: 100%;
- font-size: 36rpx;
- font-weight: bold;
- color: #FF4C4C;
- justify-content: space-between;
- .good-tip {
- display: inline-block;
- padding: 0 20rpx 0 17rpx;
- min-width: 160rpx;
- text-align: center;
- line-height: 40rpx;
- background: #303030;
- font-size: 24rpx;
- font-weight: 500;
- color: #F8DABA;
- border-radius: 10rpx;
- position: relative;
- &::before {
- content: '';
- display: inline-block;
- height: 17rpx;
- width: 17rpx;
- background-color: #fff;
- border-radius: 50%;
- position: absolute;
- top: 0;
- bottom: 0;
- left: -9rpx;
- margin: auto;
- }
- &::after {
- content: '';
- display: inline-block;
- height: 17rpx;
- width: 17rpx;
- background-color: #fff;
- border-radius: 50%;
- position: absolute;
- top: 0;
- bottom: 0;
- right: -9rpx;
- margin: auto;
- }
- }
- }
- }
- }
- }
- }
- .title-wrapper {
- padding-left: 20rpx;
- justify-content: flex-start;
- align-items: center;
- height: 86rpx;
- line-height: 86rpx;
- width: 690rpx;
- margin: auto;
- image {
- width: 36rpx;
- height: 36rpx;
- background: linear-gradient(43deg, #ffc063, #ffa163);
- border-radius: 50%;
- }
- view {
- padding-left: 10rpx;
- font-size: 32rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #242424;
- }
- .title-b {
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #8b8b8b;
- }
- }
- .shop-list {
- padding-top: 20rpx;
- flex-wrap: wrap;
- background-color: #fff;
- justify-content: flex-start;
- .shop-item {
- margin-bottom: 20rpx;
- flex-direction: column;
- width: 20%;
- height: 100rpx;
- image {
- width: 60rpx;
- height: 58rpx;
- }
- }
- }
- .gift-info {
- width: 690rpx;
- height: 155rpx;
- background: linear-gradient(43deg, #FFB242, #FF944D);
- border-radius: 12rpx 12rpx 0px 0px;
- margin: auto;
- color: #fff;
- font-size: 24rpx;
- font-weight: 400;
- color: #FFFFFF;
- view {
- padding-left: 28rpx;
- }
- }
- .gift-good-list {
- width: 690rpx;
- height: 243rpx;
- background: #f4f4f4;
- border-radius: 12rpx;
- margin: auto;
- .gift-list {
- width: 670rpx;
- height: 286rpx;
- background: #fff;
- border-radius: 12px;
- // margin: -54rpx auto 0;
- top: -54rpx;
- left: 0;
- right: 0;
- margin: auto;
- .gift-item {
- background-color: #fff;
- width: 223rpx;
- height: 100%;
- border-right: 1rpx solid #D6D7DC;
- &:first-of-type {
- border-radius: 12rpx 0 0 12rpx;
- }
- &:last-of-type {
- margin-right: 0;
- }
- image {
- width: 160rpx;
- height: 160rpx;
- }
- .gift-name {
- font-size: 22rpx;
- font-weight: bold;
- color: #3F3F3F;
- line-height: 34px;
- }
- .gift-price {
- font-size: 28rpx;
- font-weight: bold;
- color: #FF4C4C;
- }
- }
- }
- }
- .djq-wrap {
- width: 701rpx;
- // height: 255rpx;
- background: #FFFFFF;
- box-shadow: 0px 0px 27rpx 0px rgba(50, 50, 52, 0.06);
- border-radius: 20rpx;
- margin: 0 auto 20rpx;
- padding: 23rpx 22rpx;
- &:last-of-type {
- margin-bottom: 0;
- }
- .djq-img {
- flex-shrink: 0;
- width: 150rpx;
- height: 150rpx;
- border-radius: 10rpx;
- }
- .djq-right {
- flex-grow: 1;
- .djq-tit {
- font-size: 34rpx;
- font-weight: bold;
- color: #333333;
- line-height: 52rpx;
- .djq-name {
- max-width: 300rpx;
- }
- .djq-dis {
- flex-shrink: 0;
- image {
- width: 20rpx;
- height: 28rpx;
- margin-right: 10rpx;
- }
- font-size: 22rpx;
- font-weight: 500;
- color: #666666;
- }
- }
- .djq-dz {
- width: 100%;
- font-size: 24rpx;
- font-weight: 500;
- color: #666666;
- }
- .djq-hd {
- width: 100%;
- // border-bottom: 1rpx solid #EAECED;
- .buy-info {
- display: inline-block;
- height: 32rpx;
- border-radius: 16rpx 16rpx 16rpx 0px;
- line-height: 32rpx;
- font-size: 20rpx;
- font-weight: 500;
- color: #FF440D;
- padding: 0 15rpx;
- background-color: #fff;
- }
- .hd-btn {
- image {
- width: 46rpx;
- height: 46rpx;
- }
- }
- }
- }
- }
- .left-btm {
- height: 66rpx;
- .j-logo {
- width: 32rpx;
- line-height: 33rpx;
- background: linear-gradient(-48deg, #FFA30B, #FFD158);
- border-radius: 13rpx;
- font-size: 21rpx;
- font-weight: 500;
- color: #FFFFFF;
- text-align: center;
- }
- .j-price {
- font-size: 27rpx;
- font-weight: bold;
- color: #FF4C4C;
- margin: 0 10rpx 0 5rpx;
- }
- .j-zk {
- height: 31rpx;
- border: 1rpx solid #FF4C4C;
- border-radius: 7rpx;
- line-height: 31rpx;
- padding: 0 8rpx;
- font-size: 20rpx;
- font-weight: bold;
- color: #FF4C4C;
- margin-right: 5rpx;
- }
- .j-name {
- font-size: 23rpx;
- font-weight: bold;
- color: #333333;
- }
- }
- .hotgoods {
- // margin-top: 38rpx;
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- padding: 0 0 30rpx;
- .hotgoods-item {
- width: 48%;
- background-color: #ffffff;
- border-radius: 12rpx;
- &:nth-child(2n + 1) {
- margin-right: 24rpx;
- }
- .image-wrapper {
- width: 100%;
- height: 330rpx;
- border-radius: 3px;
- overflow: hidden;
- position: relative;
- .image-bg {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
- opacity: 1;
- border-radius: 12rpx 12rpx 0 0;
- z-index: 2;
- }
- .image {
- width: 100%;
- height: 100%;
- opacity: 1;
- border-radius: 12rpx 12rpx 0 0;
- }
- }
- .title {
- margin-top: 24rpx;
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- }
- .hot-price {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 14rpx 10rpx 30rpx;
- .hotPrice-box {
- width: 70rpx;
- height: 28rpx;
- background: linear-gradient(90deg, #c79a4c, #f9df7f);
- border-radius: 5rpx;
- text-align: center;
- line-height: 28rpx;
- font-size: 20rpx;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #ffffff;
- }
- .price {
- // margin-left: 10rpx;
- font-size: 40rpx;
- color: #ff0000;
- font-weight: 500;
- }
- .yuanPrice {
- margin-left: 10rpx;
- font-size: 20rpx;
- font-weight: 500;
- // text-decoration: line-through;
- color: #999999;
- }
- .cart-icon {
- image {
- width: 44rpx;
- height: 44rpx;
- }
- }
- }
- }
- }
- .product-box {
- // margin-top: 20rpx;
- background: #ffffff;
- padding: 0rpx 30rpx 20rpx;
- }
- </style>
|