|
|
@@ -1,522 +1,611 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <zs-skeleton type="index" :loading="loading"></zs-skeleton>
|
|
|
- <view class="navBarBox">
|
|
|
- <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
|
|
- <view class="navBar">
|
|
|
- <view>印象贵大文创</view>
|
|
|
- <image class="logo" mode="scaleToFill"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- <view class="search-box">
|
|
|
- <zs-search style="margin-top: 10px" :showBtn="false" :showPrefix="false" placeholder="请输入商品名称"
|
|
|
- height="80" bgColor="#F6F6F6"></zs-search>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="swiper-box">
|
|
|
- <view class="progress">
|
|
|
- {{ current + 1 + "/" + advList.length }}
|
|
|
- </view>
|
|
|
- <swiper class="swiper" @change="swiperChange" :current="current" :indicator-dots="false" circular
|
|
|
- :autoplay="true" :interval="3000" :duration="1000">
|
|
|
- <swiper-item v-for="(item, index) in advList" :key="item.id" @click="jump(item.jumpUrl)">
|
|
|
- <image class="swiper-item" mode="" :src="item.advertsImg"> </image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="discount-list">
|
|
|
- <view class="discount-item" v-for="(item, index) in discountsList" :key="index" @click="
|
|
|
+ <view>
|
|
|
+ <zs-skeleton type="index" :loading="loading"></zs-skeleton>
|
|
|
+ <view class="navBarBox">
|
|
|
+ <view
|
|
|
+ class="statusBar"
|
|
|
+ :style="{ paddingTop: statusBarHeight + 'px' }"
|
|
|
+ ></view>
|
|
|
+ <view class="navBar">
|
|
|
+ <view>印象贵大文创</view>
|
|
|
+ <image class="logo" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view @click="handleSearch" class="search-box">
|
|
|
+ <zs-search
|
|
|
+ style="margin-top: 10px"
|
|
|
+ :showBtn="false"
|
|
|
+ :showPrefix="false"
|
|
|
+ placeholder="请输入商品名称"
|
|
|
+ height="80"
|
|
|
+ bgColor="#F6F6F6"
|
|
|
+ ></zs-search>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="swiper-box">
|
|
|
+ <view class="progress">
|
|
|
+ {{ current + 1 + "/" + advList.length }}
|
|
|
+ </view>
|
|
|
+ <swiper
|
|
|
+ class="swiper"
|
|
|
+ @change="swiperChange"
|
|
|
+ :current="current"
|
|
|
+ :indicator-dots="false"
|
|
|
+ circular
|
|
|
+ :autoplay="true"
|
|
|
+ :interval="3000"
|
|
|
+ :duration="1000"
|
|
|
+ >
|
|
|
+ <swiper-item
|
|
|
+ v-for="(item, index) in advList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="jump(item.jumpUrl)"
|
|
|
+ >
|
|
|
+ <image class="swiper-item" mode="" :src="item.advertsImg"> </image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="discount-list">
|
|
|
+ <view
|
|
|
+ class="discount-item"
|
|
|
+ v-for="(item, index) in discountsList"
|
|
|
+ :key="index"
|
|
|
+ @click="
|
|
|
goDetail(item.linkUrl, item.id, item.secondaryImg, item.menuName)
|
|
|
- ">
|
|
|
- <image class="icon" :src="item.columnImg" mode=""></image>
|
|
|
- <view class="title">{{ item.columnName }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="swiper-box" style="height: 160rpx">
|
|
|
- <swiper class="swiper" @change="swiperChange" :indicator-dots="false" circular :autoplay="false"
|
|
|
- :interval="3000" :duration="1000">
|
|
|
- <swiper-item v-for="(item, index) in advList1" :key="item.id" @click="jump(item.jumpUrl)">
|
|
|
- <image class="swiper-item" mode="" :src="item.advertsImg"> </image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="sub-title">
|
|
|
- <view>精选推荐</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="goods-list">
|
|
|
- <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
|
|
|
- <view class="left">
|
|
|
- <view class="store-item" v-for="(item, index) in list" :key="index" @click="goShopDetail(item)">
|
|
|
- <zs-img :src="item.goodsImg" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
|
|
|
- <view class="info">
|
|
|
- <view class="title">
|
|
|
- {{ item.goodsName }}
|
|
|
- </view>
|
|
|
- <view class="goods-price">
|
|
|
- <view> ￥{{ item.realPrice }} </view>
|
|
|
- <view class="distance">
|
|
|
- 销售{{ (item.saleNum).toFixed(2) }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <view class="store-item" v-for="(item, index) in list1" :key="index"
|
|
|
- @click="goShopDetail(item)">
|
|
|
- <zs-img :src="item.goodsImg" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
|
|
|
- <view class="info">
|
|
|
- <view class="title">
|
|
|
- {{ item.goodsName }}
|
|
|
- </view>
|
|
|
- <view class="goods-price">
|
|
|
- <!-- <image
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <image class="icon" :src="item.columnImg" mode=""></image>
|
|
|
+ <view class="title">{{ item.columnName }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="swiper-box" style="height: 160rpx">
|
|
|
+ <swiper
|
|
|
+ class="swiper"
|
|
|
+ @change="swiperChange"
|
|
|
+ :indicator-dots="false"
|
|
|
+ circular
|
|
|
+ :autoplay="false"
|
|
|
+ :interval="3000"
|
|
|
+ :duration="1000"
|
|
|
+ >
|
|
|
+ <swiper-item
|
|
|
+ v-for="(item, index) in advList1"
|
|
|
+ :key="item.id"
|
|
|
+ @click="jump(item.jumpUrl)"
|
|
|
+ >
|
|
|
+ <image class="swiper-item" mode="" :src="item.advertsImg"> </image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="sub-title">
|
|
|
+ <view>精选推荐</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="goods-list">
|
|
|
+ <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
|
|
|
+ <view class="left">
|
|
|
+ <view
|
|
|
+ class="store-item"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click="goGoodsDetail(item)"
|
|
|
+ >
|
|
|
+ <zs-img
|
|
|
+ :src="item.goodsImg"
|
|
|
+ width="340rpx"
|
|
|
+ height="340rpx"
|
|
|
+ mode="widthFix"
|
|
|
+ ></zs-img>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">
|
|
|
+ {{ item.goodsName }}
|
|
|
+ </view>
|
|
|
+ <view class="goods-price">
|
|
|
+ <view> ￥{{ item.realPrice }} </view>
|
|
|
+ <view class="distance">
|
|
|
+ 销售{{ item.saleNum.toFixed(2) }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view
|
|
|
+ class="store-item"
|
|
|
+ v-for="(item, index) in list1"
|
|
|
+ :key="index"
|
|
|
+ @click="goGoodsDetail(item)"
|
|
|
+ >
|
|
|
+ <zs-img
|
|
|
+ :src="item.goodsImg"
|
|
|
+ width="340rpx"
|
|
|
+ height="340rpx"
|
|
|
+ mode="widthFix"
|
|
|
+ ></zs-img>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">
|
|
|
+ {{ item.goodsName }}
|
|
|
+ </view>
|
|
|
+ <view class="goods-price">
|
|
|
+ <!-- <image
|
|
|
class="position"
|
|
|
src="../../static/position.png"
|
|
|
mode=""
|
|
|
></image> -->
|
|
|
- <view> ￥{{ item.realPrice }}</view>
|
|
|
- <view class="distance">
|
|
|
- 销售{{ (item.saleNum).toFixed(2) }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </zs-list>
|
|
|
- </view>
|
|
|
-
|
|
|
- <zs-tab-bar :value="0"></zs-tab-bar>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view> ￥{{ item.realPrice }}</view>
|
|
|
+ <view class="distance">
|
|
|
+ 销售{{ item.saleNum.toFixed(2) }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </zs-list>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <zs-tab-bar :value="0"></zs-tab-bar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- getUserDetail,
|
|
|
- getAdv
|
|
|
- } from "@/api/common.js";
|
|
|
- import {
|
|
|
- appSearch
|
|
|
- } from "@/api/shop.js";
|
|
|
- import {searchMenu} from "@/api/study.js";
|
|
|
- // 腾讯地图
|
|
|
- var QQMapWX = require("../../libs/qqmap-wx-jssdk.min.js");
|
|
|
- var qqmapsdk = new QQMapWX({
|
|
|
- key: "KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF"
|
|
|
- });
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- advList: [],
|
|
|
- advList1: [],
|
|
|
- discountsList: [], //菜单
|
|
|
- current: 0,
|
|
|
- loading: false,
|
|
|
- navBarHeight: 0,
|
|
|
- statusBarHeight: 0,
|
|
|
- list: [],
|
|
|
- list1: [],
|
|
|
- status: "more",
|
|
|
- query: {
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 10,
|
|
|
- shopId: "",
|
|
|
- status:3
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad() {},
|
|
|
- created() {
|
|
|
- this.loading = true;
|
|
|
- this.navBarHeight = this.$navHight(1);
|
|
|
- this.navBarHeight = this.navBarHeight + 10 + "px";
|
|
|
- this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
|
|
- Promise.all([this.getSearchMenu(), this.getAdv(), this.getCity(),this.getBanner()]).then((res) => {
|
|
|
- this.appSearch();
|
|
|
- });
|
|
|
- this.query.shopId = uni.getStorageSync("gdShopId");
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // swiper变动
|
|
|
- swiperChange(val) {
|
|
|
- this.current = val.target.current;
|
|
|
+import { getUserDetail, getAdv } from "@/api/common.js";
|
|
|
+import { appSearch } from "@/api/shop.js";
|
|
|
+import { searchMenu } from "@/api/study.js";
|
|
|
+// 腾讯地图
|
|
|
+var QQMapWX = require("../../libs/qqmap-wx-jssdk.min.js");
|
|
|
+var qqmapsdk = new QQMapWX({
|
|
|
+ key: "KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF",
|
|
|
+});
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ advList: [],
|
|
|
+ advList1: [],
|
|
|
+ discountsList: [], //菜单
|
|
|
+ current: 0,
|
|
|
+ loading: false,
|
|
|
+ navBarHeight: 0,
|
|
|
+ statusBarHeight: 0,
|
|
|
+ list: [],
|
|
|
+ list1: [],
|
|
|
+ status: "more",
|
|
|
+ query: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ shopId: "",
|
|
|
+ status: 3,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ created() {
|
|
|
+ this.loading = true;
|
|
|
+ this.navBarHeight = this.$navHight(1);
|
|
|
+ this.navBarHeight = this.navBarHeight + 10 + "px";
|
|
|
+ this.statusBarHeight = uni.getSystemInfoSync()["statusBarHeight"];
|
|
|
+ Promise.all([
|
|
|
+ this.getSearchMenu(),
|
|
|
+ this.getAdv(),
|
|
|
+ this.appSearch(),
|
|
|
+ this.getBanner(),
|
|
|
+ this.getCity(),
|
|
|
+ ]).then((res) => {});
|
|
|
+ this.query.shopId = uni.getStorageSync("gdShopId");
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goGoodsDetail(item) {
|
|
|
+ uni.setStorageSync('shopInfo', JSON.stringify(item))
|
|
|
+ uni.reLaunch({
|
|
|
+ url: `../../detail/goodsDetail/index?id=${item.goodsId}`
|
|
|
+ })
|
|
|
},
|
|
|
- // Banner
|
|
|
- getBanner(){
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- getAdv({
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 99,
|
|
|
- advertsType: 1
|
|
|
- }).then((res) => {
|
|
|
- if (res.state == "Success") {
|
|
|
- this.advList = res.content.records
|
|
|
- this.loading = false;
|
|
|
- resolve(2);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- // 广告位
|
|
|
- getAdv() {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- getAdv({
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 99,
|
|
|
- advertsType: 2
|
|
|
- }).then((res) => {
|
|
|
- if (res.state == "Success") {
|
|
|
- this.advList1 = res.content.records
|
|
|
- this.loading = false;
|
|
|
- resolve(2);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- // 金刚区
|
|
|
- getSearchMenu() {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- searchMenu({
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 4,
|
|
|
- belongType:1,
|
|
|
- status:1
|
|
|
- }).then((res) => {
|
|
|
- if (res.state == "Success") {
|
|
|
- this.discountsList = res.content.records;
|
|
|
- resolve(1);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- // 跳转优惠详情
|
|
|
- goDetail(url, id, banner, title) {
|
|
|
- url = "/pages/home/detail";
|
|
|
- uni.navigateTo({
|
|
|
- url: `${url}`,
|
|
|
- success(res) {
|
|
|
- // res.eventChannel.emit("banner", banner);
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- appSearch() {
|
|
|
- if (this.status == "noMore") return;
|
|
|
- this.status = "loading";
|
|
|
- appSearch(this.query).then((res) => {
|
|
|
- if (res.state == "Success") {
|
|
|
- this.loading = false;
|
|
|
- let list = [];
|
|
|
- let list1 = [];
|
|
|
- res.content.records.map((item, index) => {
|
|
|
- if (index % 2) {
|
|
|
- list1.push(item);
|
|
|
- } else {
|
|
|
- list.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
- this.list = this.list.concat(list);
|
|
|
- this.list1 = this.list1.concat(list1);
|
|
|
- let total = this.list.length + this.list1.length;
|
|
|
- if (total >= res.content.total) {
|
|
|
- this.status = "noMore";
|
|
|
- } else {
|
|
|
- this.status = "more";
|
|
|
- this.query.currentPage++;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- loadMore() {
|
|
|
- console.log("loadMore");
|
|
|
- if (this.query["location.lat"] && this.query["location.lon"]) {
|
|
|
- this.appSearch();
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取当前城市
|
|
|
- getCity() {
|
|
|
- let that = this;
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- uni.getLocation({
|
|
|
- type: "gcj02",
|
|
|
- success: (res) => {
|
|
|
- // 解析地址
|
|
|
- that.query["location.lat"] = res.latitude;
|
|
|
- that.query["location.lon"] = res.longitude;
|
|
|
- // 存储经纬度
|
|
|
- uni.setStorageSync(
|
|
|
- "location",
|
|
|
- JSON.stringify({
|
|
|
- latitude: res.latitude,
|
|
|
- longitude: res.longitude,
|
|
|
- })
|
|
|
- );
|
|
|
- qqmapsdk.reverseGeocoder({
|
|
|
- location: {
|
|
|
- latitude: res.latitude,
|
|
|
- longitude: res.longitude,
|
|
|
- },
|
|
|
- success: function(res) {
|
|
|
- // 市
|
|
|
- that.city = res.result.address_component.city;
|
|
|
- resolve();
|
|
|
- },
|
|
|
- fail: function(res) {
|
|
|
- that.city = "定位失败";
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- fail: (res) => {
|
|
|
- console.log("获取经纬度失败");
|
|
|
- },
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
+ // 点击搜索
|
|
|
+ handleSearch() {
|
|
|
+ if (!uni.getStorageSync("token")) {
|
|
|
+ return uni.showModal({
|
|
|
+ title: "请登录",
|
|
|
+ confirmText: "去登录",
|
|
|
+ success(res) {
|
|
|
+ console.log(res);
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/login/login/login?redirect=/pages/index/index",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ uni.reLaunch({
|
|
|
+ url: "./search",
|
|
|
+ });
|
|
|
+ // if(!val) return
|
|
|
+ // this.query.queryName = val
|
|
|
+ // this.query.pageCurrent = 1
|
|
|
+ // this.list = []
|
|
|
+ // this.list1 = []
|
|
|
+ // this.status = 'more'
|
|
|
+ // this.search()
|
|
|
+ },
|
|
|
+ // swiper变动
|
|
|
+ swiperChange(val) {
|
|
|
+ this.current = val.target.current;
|
|
|
+ },
|
|
|
+ // Banner
|
|
|
+ getBanner() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ getAdv({
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 99,
|
|
|
+ advertsType: 1,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.state == "Success") {
|
|
|
+ this.advList = res.content.records;
|
|
|
+ this.loading = false;
|
|
|
+ resolve(2);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 广告位
|
|
|
+ getAdv() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ getAdv({
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 99,
|
|
|
+ advertsType: 2,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.state == "Success") {
|
|
|
+ this.advList1 = res.content.records;
|
|
|
+ this.loading = false;
|
|
|
+ resolve(2);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 金刚区
|
|
|
+ getSearchMenu() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ searchMenu({
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ belongType: 1,
|
|
|
+ status: 1,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.state == "Success") {
|
|
|
+ this.discountsList = res.content.records;
|
|
|
+ resolve(1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 跳转优惠详情
|
|
|
+ goDetail(url, id, banner, title) {
|
|
|
+ url = "/pages/home/detail";
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `${url}`,
|
|
|
+ success(res) {
|
|
|
+ // res.eventChannel.emit("banner", banner);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ appSearch() {
|
|
|
+ if (this.status == "noMore") return;
|
|
|
+ this.status = "loading";
|
|
|
+ appSearch(this.query).then((res) => {
|
|
|
+ if (res.state == "Success") {
|
|
|
+ this.loading = false;
|
|
|
+ let list = [];
|
|
|
+ let list1 = [];
|
|
|
+ res.content.records.map((item, index) => {
|
|
|
+ if (index % 2) {
|
|
|
+ list1.push(item);
|
|
|
+ } else {
|
|
|
+ list.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.list = this.list.concat(list);
|
|
|
+ this.list1 = this.list1.concat(list1);
|
|
|
+ let total = this.list.length + this.list1.length;
|
|
|
+ if (total >= res.content.total) {
|
|
|
+ this.status = "noMore";
|
|
|
+ } else {
|
|
|
+ this.status = "more";
|
|
|
+ this.query.currentPage++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadMore() {
|
|
|
+ console.log("loadMore");
|
|
|
+ if (this.query["location.lat"] && this.query["location.lon"]) {
|
|
|
+ this.appSearch();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取当前城市
|
|
|
+ getCity() {
|
|
|
+ let that = this;
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.getLocation({
|
|
|
+ type: "gcj02",
|
|
|
+ success: (res) => {
|
|
|
+ // 解析地址
|
|
|
+ that.query["location.lat"] = res.latitude;
|
|
|
+ that.query["location.lon"] = res.longitude;
|
|
|
+ // 存储经纬度
|
|
|
+ uni.setStorageSync(
|
|
|
+ "location",
|
|
|
+ JSON.stringify({
|
|
|
+ latitude: res.latitude,
|
|
|
+ longitude: res.longitude,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ qqmapsdk.reverseGeocoder({
|
|
|
+ location: {
|
|
|
+ latitude: res.latitude,
|
|
|
+ longitude: res.longitude,
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ // 市
|
|
|
+ that.city = res.result.address_component.city;
|
|
|
+ resolve();
|
|
|
+ },
|
|
|
+ fail: function (res) {
|
|
|
+ that.city = "定位失败";
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: (res) => {
|
|
|
+ console.log("获取经纬度失败");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .navBarBox .navBar .logo {
|
|
|
- width: 0rpx;
|
|
|
- height: 82rpx;
|
|
|
- // margin-right: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .navBarBox .navBar {
|
|
|
- font-size: 35rpx;
|
|
|
- font-weight: bold;
|
|
|
- padding: 3rpx 50rpx;
|
|
|
- padding-bottom: 8rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- // padding-top: 24%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background-color: #fafafa;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- page {
|
|
|
- background-color: #fafafa;
|
|
|
- }
|
|
|
-
|
|
|
- .search-box {
|
|
|
- width: 100vw;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-box {
|
|
|
- position: relative;
|
|
|
- margin: 0 24rpx 10rpx;
|
|
|
- padding-top: 20rpx;
|
|
|
- width: 702rpx;
|
|
|
- height: 280rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
-
|
|
|
- .progress {
|
|
|
- position: absolute;
|
|
|
- top: 38rpx;
|
|
|
- right: 20rpx;
|
|
|
- z-index: 2;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 16rpx;
|
|
|
- background: rgba(255, 255, 255, 0.3);
|
|
|
- padding: 2rpx 10rpx;
|
|
|
- border-radius: 14rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper {
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- padding: 0 10rpx;
|
|
|
-
|
|
|
- .swiper-item {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 16rpx;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .discount-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- width: 100%;
|
|
|
- justify-content: space-evenly;
|
|
|
- // padding: 30rpx 0;
|
|
|
- // margin: 0 0rpx 0rpx;
|
|
|
- background: #fafafa;
|
|
|
- border-radius: 16rpx;
|
|
|
- position: relative;
|
|
|
- top: 0rpx;
|
|
|
- padding-top: 20rpx;
|
|
|
-
|
|
|
- .discount-item {
|
|
|
- width: 20%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- margin-top: 10rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 26rpx;
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tag {
|
|
|
- position: absolute;
|
|
|
- top: -20rpx;
|
|
|
- left: 50%;
|
|
|
- background: #ff0615;
|
|
|
- box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
|
|
|
- border-radius: 12rpx 14rpx 14rpx 0rpx;
|
|
|
- color: #fff;
|
|
|
- white-space: nowrap;
|
|
|
- font-size: 18rpx;
|
|
|
- line-height: -14rpx;
|
|
|
- height: 24rpx;
|
|
|
- padding: 0 10rpx;
|
|
|
- // width: fit-content;
|
|
|
- background-size: 100% 34rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .desc {
|
|
|
- color: #ff0817;
|
|
|
- font-size: 16rpx;
|
|
|
- text-align: center;
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .sub-title {
|
|
|
- margin: 20rpx 0;
|
|
|
- padding-left: 40rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .goods-list {
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- margin-bottom: 60rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .zs-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 24rpx;
|
|
|
-
|
|
|
- .left {
|
|
|
- .adv-swiper {
|
|
|
- width: 340rpx;
|
|
|
- height: 444rpx;
|
|
|
- margin-bottom: 25rpx;
|
|
|
-
|
|
|
- .adv-item {
|
|
|
- width: 340rpx;
|
|
|
- height: 444rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {}
|
|
|
-
|
|
|
- .store-item {
|
|
|
- width: 340rpx;
|
|
|
- margin-bottom: 25rpx;
|
|
|
- // box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
|
|
|
- border-radius: 16rpx;
|
|
|
- background: #fff;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 100%;
|
|
|
- height: 300rpx;
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- padding: 20rpx;
|
|
|
- background: #fff;
|
|
|
- border-radius: 0 0 16rpx 16rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .title {
|
|
|
- // font-weight: bold;
|
|
|
- width: 100%;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .tags {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .tag-item {
|
|
|
- line-height: 50rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- padding: 6rpx 0;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .label {
|
|
|
- background: #fff;
|
|
|
- color: #fe5b47;
|
|
|
- padding: 0 10rpx;
|
|
|
- border-radius: 8rpx 0 0 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- color: #fff;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- padding: 0 14rpx;
|
|
|
- border-radius: 0 8rpx 8rpx 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .goods-price {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 15rpx;
|
|
|
- justify-content: space-between;
|
|
|
- color: #FF4D3A;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 30rpx;
|
|
|
- .distance {
|
|
|
- font-weight: normal;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-
|
|
|
- .position {
|
|
|
- color: 999;
|
|
|
- width: 25rpx;
|
|
|
- height: 29rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+.navBarBox .navBar .logo {
|
|
|
+ width: 0rpx;
|
|
|
+ height: 82rpx;
|
|
|
+ // margin-right: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.navBarBox .navBar {
|
|
|
+ font-size: 35rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 3rpx 50rpx;
|
|
|
+ padding-bottom: 8rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ // padding-top: 24%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #fafafa;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+page {
|
|
|
+ background-color: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+.search-box {
|
|
|
+ width: 100vw;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-box {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 24rpx 10rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ height: 280rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ position: absolute;
|
|
|
+ top: 38rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ z-index: 2;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ padding: 2rpx 10rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 10rpx;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.discount-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ // padding: 30rpx 0;
|
|
|
+ // margin: 0 0rpx 0rpx;
|
|
|
+ background: #fafafa;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ position: relative;
|
|
|
+ top: 0rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+
|
|
|
+ .discount-item {
|
|
|
+ width: 20%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ position: absolute;
|
|
|
+ top: -20rpx;
|
|
|
+ left: 50%;
|
|
|
+ background: #ff0615;
|
|
|
+ box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
|
|
|
+ border-radius: 12rpx 14rpx 14rpx 0rpx;
|
|
|
+ color: #fff;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 18rpx;
|
|
|
+ line-height: -14rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ // width: fit-content;
|
|
|
+ background-size: 100% 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ color: #ff0817;
|
|
|
+ font-size: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.sub-title {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.goods-list {
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.zs-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ .adv-swiper {
|
|
|
+ width: 340rpx;
|
|
|
+ height: 444rpx;
|
|
|
+ margin-bottom: 25rpx;
|
|
|
+
|
|
|
+ .adv-item {
|
|
|
+ width: 340rpx;
|
|
|
+ height: 444rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-item {
|
|
|
+ width: 340rpx;
|
|
|
+ margin-bottom: 25rpx;
|
|
|
+ // box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ padding: 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 0 0 16rpx 16rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ // font-weight: bold;
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tag-item {
|
|
|
+ line-height: 50rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 6rpx 0;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ background: #fff;
|
|
|
+ color: #fe5b47;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ border-radius: 8rpx 0 0 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ padding: 0 14rpx;
|
|
|
+ border-radius: 0 8rpx 8rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #ff4d3a;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ .distance {
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .position {
|
|
|
+ color: 999;
|
|
|
+ width: 25rpx;
|
|
|
+ height: 29rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
