|
@@ -1,1578 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <view class="carousel-section">
|
|
|
- <swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange"
|
|
|
- :indicator-dots="true" indicator-active-color="#FFFFFF">
|
|
|
- <swiper-item class="carousel-item">
|
|
|
- <!-- #ifndef APP-PLUS -->
|
|
|
- <image src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/f8564202304061452591511.png"
|
|
|
- mode="aspectFill"></image>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifdef APP-PLUS -->
|
|
|
- <image src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/f8564202304061452591511.png"
|
|
|
- mode="aspectFill"></image>
|
|
|
- <!-- #endif -->
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <!-- <view class="search flex">
|
|
|
- <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> -->
|
|
|
- </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/store/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="" style="height: 20rpx;"></view>
|
|
|
- <view class="shop">
|
|
|
- <view class="shop-title">
|
|
|
- <view class="shop-item" @click="changePx(0)">
|
|
|
- <view class="sitem-font" :class="{ choose: PXType == 0 }">销量</view>
|
|
|
- <view class="p-box">
|
|
|
- <text :class="{ active: PXType == 0 && numberOrder === 1 }" class="iconfont iconfold"></text>
|
|
|
- <text :class="{ active: PXType == 0 && numberOrder === 2 }"
|
|
|
- class="iconfont iconfold xia"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="shop-item" @click="changePx(1)">
|
|
|
- <view class="sitem-font" :class="{ choose: PXType == 1 }">位置距离</view>
|
|
|
- <view class="p-box">
|
|
|
- <text :class="{ active: PXType == 1 && distance === 1 }" class="iconfont iconfold"></text>
|
|
|
- <text :class="{ active: PXType == 1 && distance === 2 }" class="iconfont iconfold xia"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="shop-item" @click="changePx(2)">
|
|
|
- <view class="sitem-font" :class="{ choose: PXType == 2 }">趣豆赠送</view>
|
|
|
- <view class="p-box">
|
|
|
- <text :class="{ active: PXType == 2 && qudou === 1 }" class="iconfont iconfold"></text>
|
|
|
- <text :class="{ active: PXType == 2 && qudou === 2 }" class="iconfont iconfold xia"></text>
|
|
|
- </view>
|
|
|
- </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/store/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="https://hy.liuniu946.com/app/index/index10.png" mode=""></image>
|
|
|
- 距离{{ (storeitem.range * 1).toFixed(2) * 1 }}KM
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
|
|
|
- <view class="djq-dz-box">
|
|
|
- <view class="djq-dz clamp2">{{ storeitem.detailed_address }}</view>
|
|
|
- <view class="djq-dz">每100元赠送趣豆{{ storeitem.gift_integral * 1 }}</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="djq-hd flex f-j-sb">
|
|
|
- <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 -->
|
|
|
- <!-- #ifdef APP-PLUS -->
|
|
|
- <image src="../../static/icon/dh.png" mode=""
|
|
|
- @click.stop="gomapApp(storeitem.latitude, storeitem.longitude, storeitem.name)"></image>
|
|
|
- <!-- #endif -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="" style="padding: 10rpx 0 0 0;" v-if="storeitem.cou && storeitem.cou.length > 0">
|
|
|
- <view class="left-btm flex f-j-s" v-for="qitem in storeitem.cou">
|
|
|
- <view class="j-price">
|
|
|
- <text>¥</text>
|
|
|
- {{ qitem.coupon_price }}
|
|
|
- </view>
|
|
|
- <view class="j-name">{{ qitem.title }}</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 {
|
|
|
- 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 {
|
|
|
- getBargainList,
|
|
|
- getProducts
|
|
|
- } from '@/api/product.js';
|
|
|
- import {
|
|
|
- interceptor
|
|
|
- } from '@/utils/loginUtils';
|
|
|
- import {
|
|
|
- openMap
|
|
|
- } from '@/utils/rocessor';
|
|
|
- import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from 'vuex';
|
|
|
- // #ifdef H5
|
|
|
- import {
|
|
|
- weixindata,
|
|
|
- shareLoad
|
|
|
- } from '@/utils/wxAuthorized';
|
|
|
- // #endif
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- seckill,
|
|
|
- LeeSelectCity
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- page: 1,
|
|
|
- limitt: 20,
|
|
|
- loadingType: 'more',
|
|
|
- district: '定位中',
|
|
|
- PXType: 0, //店铺排序规则 0-》销量排序 1-》距离排序 2-》趣豆多少排序
|
|
|
- numberOrder: 1, //销量排序1升2降
|
|
|
- distance: 1, //距离排序1升2降
|
|
|
- qudou: 1, //趣豆多少排序1升2降
|
|
|
- storeList: [],
|
|
|
- current: 0,
|
|
|
- carouselList: [], //轮播列表
|
|
|
- page: 1,
|
|
|
- limit: 5,
|
|
|
- shopList: [],
|
|
|
- period: 1,
|
|
|
- order: ''
|
|
|
- };
|
|
|
- },
|
|
|
- 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
|
|
|
- },
|
|
|
- watch: {
|
|
|
- PXType(val, old) {
|
|
|
- console.log('切换显示');
|
|
|
- this.getStoreList();
|
|
|
- }
|
|
|
- // chooseDistrict(val,old) {
|
|
|
- // this.reGetStoreList()
|
|
|
- // }
|
|
|
- },
|
|
|
- onShow: function() {
|
|
|
- this.getStoreCate();
|
|
|
- this.getStoreList();
|
|
|
- // this.loadData();
|
|
|
- },
|
|
|
- //下拉刷新
|
|
|
- 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: '/user/page/notice'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // #endif
|
|
|
- methods: {
|
|
|
- ...mapMutations(['setLat', 'setLon', 'setChoose']),
|
|
|
- // 切换排序
|
|
|
- changePx(index) {
|
|
|
- let obj = this;
|
|
|
- obj.PXType = index;
|
|
|
- if (index === 0) {
|
|
|
- this.order = this.numberOrder === 1 ? 'asc' : 'desc';
|
|
|
- this.numberOrder = this.numberOrder === 1 ? 2 : 1;
|
|
|
- }
|
|
|
- if (index === 1) {
|
|
|
- this.order = this.distance === 1 ? 'asc' : 'desc';
|
|
|
- this.distance = this.distance === 1 ? 2 : 1;
|
|
|
- }
|
|
|
- // 判断是否为价格优先
|
|
|
- if (index === 2) {
|
|
|
- this.order = this.qudou === 1 ? 'asc' : 'desc';
|
|
|
- this.qudou = this.qudou === 1 ? 2 : 1;
|
|
|
- }
|
|
|
- console.log('切换显示');
|
|
|
- this.page = 1;
|
|
|
- this.loadingType = 'more';
|
|
|
- this.getStoreList('reload');
|
|
|
- },
|
|
|
- // 刷新门店列表
|
|
|
- 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
|
|
|
- },
|
|
|
- // 获取店铺分类
|
|
|
- getStoreCate() {
|
|
|
- let obj = this;
|
|
|
- store_cate().then(res => {
|
|
|
- console.log(res);
|
|
|
- obj.shopList = obj.chunkArr(res.data, 10);
|
|
|
- console.log(obj.shopList, 'this.shopList+++++++++++++');
|
|
|
- });
|
|
|
- },
|
|
|
- // 拨打电话
|
|
|
- makeCall(phone) {
|
|
|
- console.log(phone, '123456');
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: phone, //仅为示例
|
|
|
- fail(err) {
|
|
|
- console.log(err, 'fail');
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- console.log(res, 'success');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 导航
|
|
|
- dh(item) {
|
|
|
- wx.openLocation({
|
|
|
- latitude: item.latitude * 1,
|
|
|
- longitude: item.longitude * 1,
|
|
|
- name: item.name,
|
|
|
- address: item.detailed_address
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取商店列表
|
|
|
- getStoreList(type) {
|
|
|
- let obj = this;
|
|
|
- if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
|
|
|
- return;
|
|
|
- }
|
|
|
- obj.loadingType = 'loading';
|
|
|
- let data = {
|
|
|
- page: obj.page,
|
|
|
- latitude: obj.latitude,
|
|
|
- longitude: obj.longitude,
|
|
|
- limit: obj.limitt,
|
|
|
- // address: obj.$store.state.chooseProvince,
|
|
|
- sort: obj.PXType == 0 ? 'achievement' : obj.PXType == 1 ? 'distance' : 'gift_integral',
|
|
|
- order: obj.order
|
|
|
- };
|
|
|
- getStoreList(data)
|
|
|
- .then(res => {
|
|
|
- console.log(res, '1111');
|
|
|
- if (type == 'reload') {
|
|
|
- obj.storeList = [];
|
|
|
- }
|
|
|
- console.log(type);
|
|
|
- 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);
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err, '报错');
|
|
|
- });
|
|
|
- },
|
|
|
- getLocation() {
|
|
|
- uni.getLocation({
|
|
|
- type: 'gcj02',
|
|
|
- success(e) {
|
|
|
- console.log(e, 'dingwei');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- navto(url) {
|
|
|
- uni.navigateTo({
|
|
|
- url,
|
|
|
- fail() {
|
|
|
- uni.switchTab({
|
|
|
- url
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- getaddress() {
|
|
|
- console.log('dizhi+++++++++++');
|
|
|
- let obj = this;
|
|
|
- uni.getLocation({
|
|
|
- type: 'wgs84',
|
|
|
- success: res => {
|
|
|
- // uni.showModal({
|
|
|
- // title: '成功',
|
|
|
- // content: JSON.stringify(res)
|
|
|
- // });
|
|
|
- let wz = obj.wgs84Togcj02(res.longitude, res.latitude);
|
|
|
- obj.setLat(wz[1]);
|
|
|
- obj.setLon(wz[0]);
|
|
|
- console.log(wz, '经纬度');
|
|
|
- this.getStoreList();
|
|
|
- // obj.getCity();
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- // uni.showModal({
|
|
|
- // title: '失败',
|
|
|
- // content: JSON.stringify(err)
|
|
|
- // });
|
|
|
- this.getStoreList();
|
|
|
- openMap().then(e => {
|
|
|
- this.getaddress();
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- wgs84Togcj02(lng, lat) {
|
|
|
- if (this.out_of_china(lng, lat)) {
|
|
|
- return [lng, lat];
|
|
|
- }
|
|
|
- //定义一些常量
|
|
|
- //GCJ02 转换为 WGS84
|
|
|
- var that = this;
|
|
|
- const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
|
|
|
- const PI = 3.1415926535897932384626;
|
|
|
- const a = 6378245.0;
|
|
|
- const ee = 0.00669342162296594323;
|
|
|
- let dlat = that.transformlat(lng - 105.0, lat - 35.0);
|
|
|
- let dlng = that.transformlng(lng - 105.0, lat - 35.0);
|
|
|
- let radlat = (lat / 180.0) * PI;
|
|
|
- let magic = Math.sin(radlat);
|
|
|
- magic = 1 - ee * magic * magic;
|
|
|
- let sqrtmagic = Math.sqrt(magic);
|
|
|
- dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
|
|
|
- dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
|
|
|
- var mglat = lat + dlat;
|
|
|
- var mglng = lng + dlng;
|
|
|
- return [mglng, mglat];
|
|
|
- },
|
|
|
-
|
|
|
- out_of_china(lng, lat) {
|
|
|
- return lng < 72.004 || lng > 137.8347 || (lat < 0.8293 || lat > 55.8271 || false);
|
|
|
- },
|
|
|
-
|
|
|
- transformlat(lng, lat) {
|
|
|
- const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
|
|
|
- const PI = 3.1415926535897932384626;
|
|
|
- const a = 6378245.0;
|
|
|
- const ee = 0.00669342162296594323;
|
|
|
- let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(
|
|
|
- lng));
|
|
|
- ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
|
|
|
- ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0;
|
|
|
- ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0;
|
|
|
- return ret;
|
|
|
- },
|
|
|
- transformlng(lng, lat) {
|
|
|
- const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
|
|
|
- const PI = 3.1415926535897932384626;
|
|
|
- const a = 6378245.0;
|
|
|
- const ee = 0.00669342162296594323;
|
|
|
- let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
|
|
|
- ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
|
|
|
- ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0;
|
|
|
- ret += ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0;
|
|
|
- return ret;
|
|
|
- },
|
|
|
- navTo(url) {
|
|
|
- if (url == '') {
|
|
|
- this.$api.msg('暂未开通,敬请期待');
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 點擊搜索框
|
|
|
- clickSearch() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/store/shopList'
|
|
|
- });
|
|
|
- },
|
|
|
- // 监听图片加载完成
|
|
|
- onImageError(key, index) {
|
|
|
- this[key][index].image = '/static/error/errorImage.jpg';
|
|
|
- },
|
|
|
- // 请求载入数据
|
|
|
- async loadData() {
|
|
|
- loadIndexs({})
|
|
|
- .then(({
|
|
|
- data
|
|
|
- }) => {
|
|
|
- this.carouselList = data.info.storebanner;
|
|
|
- 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;
|
|
|
- },
|
|
|
- gomapApp(latitude, longitude, name) {
|
|
|
- let url = '';
|
|
|
- if (plus.os.name == 'Android') {
|
|
|
- //判断是安卓端
|
|
|
- plus.nativeUI.actionSheet({
|
|
|
- //选择菜单
|
|
|
- title: '选择地图应用',
|
|
|
- cancel: '取消',
|
|
|
- buttons: [{
|
|
|
- title: '腾讯地图'
|
|
|
- }, {
|
|
|
- title: '百度地图'
|
|
|
- }, {
|
|
|
- title: '高德地图'
|
|
|
- }]
|
|
|
- },
|
|
|
- function(e) {
|
|
|
- switch (e.index) {
|
|
|
- //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
|
|
|
- case 1:
|
|
|
- //注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
|
|
|
- url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- url =
|
|
|
- `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- url =
|
|
|
- `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- if (url != '') {
|
|
|
- url = encodeURI(url);
|
|
|
- //plus.runtime.openURL(url,function(e){})调起手机APP应用
|
|
|
- plus.runtime.openURL(url, function(e) {
|
|
|
- plus.nativeUI.alert('本机未安装指定的地图应用');
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
- } else {
|
|
|
- // iOS上获取本机是否安装了百度高德地图,需要在manifest里配置
|
|
|
- // 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
|
|
|
- //(如urlschemewhitelist:["iosamap","baidumap"])
|
|
|
- plus.nativeUI.actionSheet({
|
|
|
- title: '选择地图应用',
|
|
|
- cancel: '取消',
|
|
|
- buttons: [{
|
|
|
- title: '腾讯地图'
|
|
|
- }, {
|
|
|
- title: '百度地图'
|
|
|
- }, {
|
|
|
- title: '高德地图'
|
|
|
- }]
|
|
|
- },
|
|
|
- function(e) {
|
|
|
- switch (e.index) {
|
|
|
- case 1:
|
|
|
- url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- url =
|
|
|
- `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- url =
|
|
|
- `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- if (url != '') {
|
|
|
- url = encodeURI(url);
|
|
|
- plus.runtime.openURL(url, function(e) {
|
|
|
- plus.nativeUI.alert('本机未安装指定的地图应用');
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
- },
|
|
|
- getCity() {
|
|
|
- let obj = this;
|
|
|
- console.log('进入city');
|
|
|
- getCity({
|
|
|
- lat: obj.latitude,
|
|
|
- lng: obj.longitude
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- console.log(res, '逆解析结果');
|
|
|
- obj.chooseDistrict = res.data.district;
|
|
|
- if (!obj.chooseDistrict) {
|
|
|
- obj.setChoose({
|
|
|
- chooseProvince: res.data.province,
|
|
|
- chooseCity: res.data.city,
|
|
|
- chooseDistrict: res.data.district
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- obj.getStoreList();
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err, 'shibai');
|
|
|
- });
|
|
|
- },
|
|
|
- // 调用高德
|
|
|
- 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: 30rpx 32rpx 20rpx;
|
|
|
- align-items: center;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .address {
|
|
|
- width: 32rpx;
|
|
|
- height: 38rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .shop-name {
|
|
|
- height: 38rpx;
|
|
|
- position: relative;
|
|
|
- top: -4rpx;
|
|
|
- z-index: 100;
|
|
|
- width: 120rpx;
|
|
|
- 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: 650rpx;
|
|
|
- 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%;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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: #fff;
|
|
|
- background: #f75022;
|
|
|
- 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;
|
|
|
- }
|
|
|
-
|
|
|
- .p-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .iconfont {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 30rpx;
|
|
|
- height: 14rpx;
|
|
|
- line-height: 1;
|
|
|
- margin-left: 4rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #888;
|
|
|
-
|
|
|
- &.active {
|
|
|
- color: $base-color;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .xia {
|
|
|
- transform: scaleY(-1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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: #f75022;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #fff;
|
|
|
- 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 {
|
|
|
- padding-left: 10rpx;
|
|
|
- width: 500rpx;
|
|
|
-
|
|
|
- .djq-tit {
|
|
|
- font-size: 34rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- line-height: 52rpx;
|
|
|
-
|
|
|
- .djq-name {
|
|
|
- max-width: 300rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .djq-dis {
|
|
|
- flex-shrink: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 20rpx;
|
|
|
- height: 28rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .djq-dz-box {
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
-
|
|
|
- .djq-dz {
|
|
|
- width: 100%;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
-
|
|
|
- .djq-hd {
|
|
|
- width: 30%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- .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>
|