|
|
@@ -2,36 +2,28 @@
|
|
|
<div class="Appindex">
|
|
|
<!-- 顶部 -->
|
|
|
<view class="head">
|
|
|
- <!-- 轮播图 -->
|
|
|
- <swiper-banner :radius="1" imgScale="5:2" :imgArr="BannerImg" :duration="1000" :interval="5000" :circular="true" :autoplay="true" @goList="goList" :indicator-dots="true" indicator-active-color="#12B280" indicator-color="rgba(255, 255, 255, .82)"></swiper-banner>
|
|
|
- <!-- 轮播图-end -->
|
|
|
- <!-- 公告 -->
|
|
|
- <view class="head_notice clearfix">
|
|
|
- <view class="notice_title" @click="goNoticeList">
|
|
|
- <image class="gg_img" src="/static/img/gg.png"></image>
|
|
|
+ <view style="background-color: #fff; border-radius: 30rpx; padding: 0 0 2rpx;">
|
|
|
+ <!-- 轮播图 -->
|
|
|
+ <swiper-banner :radius="10" imgScale="5:3" :imgArr="BannerImg" :duration="1000" :interval="5000" :circular="true" :autoplay="true" @goList="goList" :indicator-dots="true" indicator-active-color="#12B280" indicator-color="rgba(255, 255, 255, .82)"></swiper-banner>
|
|
|
+ <!-- 轮播图-end -->
|
|
|
+ <!-- 公告 -->
|
|
|
+ <view class="head_notice clearfix flex_r flex_jb flex_ac">
|
|
|
+ <view class="notice_title" @click="goNoticeList">
|
|
|
+ <!-- <image class="gg_img" src="@/static/img/gg.png"></image> -->
|
|
|
+ <span>公告</span>
|
|
|
+ </view>
|
|
|
+ <swiper class="notice_swiper" vertical autoplay circular :interval="5000" :duration="1000">
|
|
|
+ <swiper-item v-for="(item, index) in not_list" :key="index" @click="toDetail(item.article_id)" sty>
|
|
|
+ <text class="not_list ellipsis">{{ item.title }}</text>
|
|
|
+ <!-- <text class="not_ico iconfont"></text> -->
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <image class="gg_img" src="/static/my/menu1.png" @click="goNoticeList" />
|
|
|
</view>
|
|
|
- <swiper class="notice_swiper" vertical autoplay circular :interval="5000" :duration="1000">
|
|
|
- <swiper-item v-for="(item, index) in not_list" :key="index" @click="toDetail(item.article_id)">
|
|
|
- <text class="not_list ellipsis">{{ item.title }}</text>
|
|
|
- <text class="not_ico iconfont"></text>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
+ <!-- 公告-end -->
|
|
|
</view>
|
|
|
- <!-- 公告-end -->
|
|
|
<!-- 专区入口 -->
|
|
|
<div class="l_tabBar flex_r flex_jb">
|
|
|
- <div class="search-box flex_r flex_jb flex_ac">
|
|
|
- <div class="district" @click="showAddress = !showAddress">
|
|
|
- <span>{{ LocationCity }}</span>
|
|
|
- <span class="iconfont"></span>
|
|
|
- </div>
|
|
|
- <div class="search flex_r flex_jb flex_ac">
|
|
|
- <span class="iconfont"></span>
|
|
|
- <input v-model="searchKey" @confirm="toSearch" class="inp" placeholder="搜索你要的内容">
|
|
|
- <span class="search_btn" @click="toSearch">搜索</span>
|
|
|
- </div>
|
|
|
- <!-- <div class="scan-ico iconfont"></div> -->
|
|
|
- </div>
|
|
|
<div class="item" v-for="(i,s) in tabs" :key="s" @click="goto(i.url)">
|
|
|
<img :src="i.ico" alt="" class="ico">
|
|
|
<!-- <div class="tit">{{ i.tit }}</div> -->
|
|
|
@@ -40,35 +32,11 @@
|
|
|
|
|
|
</view>
|
|
|
|
|
|
- <div class="list" v-if="list.length">
|
|
|
- <div class="li_item" v-for="(i,s) in list" :key="s" @click="goMerchant(i)">
|
|
|
- <div class="logo_img">
|
|
|
- <img :src="i.logo" alt="">
|
|
|
- </div>
|
|
|
- <div class="con_box">
|
|
|
- <div class="p1 ellipsis"><span class="topicon" v-if="i.is_recom == 1">⭐️</span>{{ i.name }}</div>
|
|
|
- <div class="p2">{{ i.address }}</div>
|
|
|
- <div class="p3">{{ $h.Div(i.distance, 1000).toFixed(2) }} km</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <not-goods v-else textStr="暂无附近商家"></not-goods>
|
|
|
- <view class="fz_w_text">好生活,茶付宝!</view>
|
|
|
- <!-- 城市选择 -->
|
|
|
- <h-address @select="selectaddress" :visible.sync="showAddress" />
|
|
|
- <!-- 隐私指引 -->
|
|
|
- <!-- <xh-privacy title="隐私保护指引" color="#18bb88"></xh-privacy> -->
|
|
|
- <!-- #ifdef APP-PLUS -->
|
|
|
- <uni-popup ref="popup">
|
|
|
- <view class="progressBox">
|
|
|
- <icon type="loading" size="26"/>
|
|
|
- <text class="words">下载中 请勿退出 {{ totalBytesWritten + " / " + totalBytesExpectedToWrite }}</text>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
- <!-- #endif -->
|
|
|
+ <shopping-mall></shopping-mall>
|
|
|
<uni-popup ref="bannerPopup" class="bannerPopup">
|
|
|
<image :src="bannerBig" mode="widthFix"></image>
|
|
|
</uni-popup>
|
|
|
+ <bottom-nav></bottom-nav>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -79,12 +47,16 @@ import hAddress from "@/components/h-address/address.vue"; //城市选择
|
|
|
import notGoods from "@/components/not-goods/index.vue";
|
|
|
import { post } from "@/request/api.js";
|
|
|
import { formatBytes } from "@/utils/index";
|
|
|
+import bottomNav from "@/components/bottom-nav/index.vue";
|
|
|
+import shoppingMall from "@/pages/shoppingMall/index.vue";
|
|
|
export default {
|
|
|
name: "Appindex",
|
|
|
components: {
|
|
|
swiperBanner, //轮播
|
|
|
hAddress,
|
|
|
- notGoods
|
|
|
+ notGoods,
|
|
|
+ bottomNav,
|
|
|
+ shoppingMall
|
|
|
// xhPrivacy,
|
|
|
},
|
|
|
data() {
|
|
|
@@ -94,25 +66,11 @@ export default {
|
|
|
homeImg: "", //活动列表
|
|
|
productList: [], //商品数据
|
|
|
searchKey: "", //搜索关键词
|
|
|
- LocationCity: "中国",
|
|
|
- showAddress: false,
|
|
|
tabs: [],
|
|
|
- totalBytesWritten: "0B", // 已经下载的数据长度
|
|
|
- totalBytesExpectedToWrite: "0B", // 预期需要下载的数据总长度
|
|
|
- filePath:"",
|
|
|
- percentVal:0,
|
|
|
- newAppInfo:{},
|
|
|
- list: [],
|
|
|
- Query: {
|
|
|
- latitude: "",
|
|
|
- longitude: "",
|
|
|
- page: 1,
|
|
|
- rows: 20,
|
|
|
- city: "",
|
|
|
- business: -1
|
|
|
- },
|
|
|
pageData: {},
|
|
|
bannerBig: "",
|
|
|
+ tablist: [],
|
|
|
+ current: 0
|
|
|
};
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
@@ -123,22 +81,17 @@ export default {
|
|
|
this.getToCity()
|
|
|
// this.loadData()
|
|
|
// uni.Luserfun()
|
|
|
- // #ifdef APP-PLUS
|
|
|
- this.getNewVersion()
|
|
|
- // #endif
|
|
|
+
|
|
|
},
|
|
|
onShow() {
|
|
|
uni.setTabBarStyle({
|
|
|
color: '#999',
|
|
|
selectedColor: '#18bb88',
|
|
|
})
|
|
|
- this.Query.page = 1
|
|
|
- this.list = []
|
|
|
- this.pageData = {}
|
|
|
this.getBanner(); //获取轮播图
|
|
|
this.getAnnounce(); //获取公告列表
|
|
|
this.getTabs(); //获取专区
|
|
|
- this.getList(); //商家列表
|
|
|
+ // this.getList(); //商家列表
|
|
|
},
|
|
|
onHide() {},
|
|
|
methods: {
|
|
|
@@ -150,43 +103,6 @@ export default {
|
|
|
});
|
|
|
|
|
|
},
|
|
|
- async getList(page) {
|
|
|
- let { lat, lng } = await uni.Location();
|
|
|
- this.Query.latitude = lat;
|
|
|
- this.Query.longitude = lng;
|
|
|
- if (page) {
|
|
|
- this.list = []
|
|
|
- this.Query.page = 1
|
|
|
- }
|
|
|
- post("v1/merchant/list", this.Query).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- let da = res.data.data
|
|
|
- delete res.data.data
|
|
|
- this.pageData = res.data
|
|
|
- this.list = [...this.list, ...da]
|
|
|
- this.Query.page++
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getNewVersion(){
|
|
|
- post("v1/getAppVersion").then((res) => {
|
|
|
- if (res.code === 0) {
|
|
|
- console.log(res.data.data);
|
|
|
- if(plus.os.name == "Android"){
|
|
|
- this.filePath = res.data.data.android.url
|
|
|
- this.newAppInfo = res.data.data.android
|
|
|
- // 获取当前版本
|
|
|
- plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
|
|
|
- console.log();
|
|
|
- if(wgtinfo.versionCode < this.newAppInfo.version){
|
|
|
- this.update()
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
// 跳转到商品详情页
|
|
|
NavToGoodsDetail(id, type) {
|
|
|
this.goto("/pages/product/p_details", { id, type });
|
|
|
@@ -286,109 +202,23 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- // 选择城市
|
|
|
- selectaddress(da) {
|
|
|
- this.LocationCity = da.cityName;
|
|
|
- this.showAddress = false;
|
|
|
- },
|
|
|
- update(){
|
|
|
- const _this = this;
|
|
|
- uni.showModal({
|
|
|
- title: "版本更新",
|
|
|
- content: "APP有新版本发布,点击 立即更新 进行最新版本下载。",
|
|
|
- showCancel: this.newAppInfo.is_mast == 1 ? true: false,
|
|
|
- confirmText: "立即更新",
|
|
|
- cancelText: "稍后进行",
|
|
|
- success: function (res) {
|
|
|
- if (res.confirm) {
|
|
|
- _this.$refs.popup.open()
|
|
|
-
|
|
|
- // _this.show = true; // show变量控制一个下载进度弹框(这个UI样式自己写即可)
|
|
|
- // 创建一个下载任务,并根据后端返回的apk静态资源地址filePath进行下载
|
|
|
-
|
|
|
- let downloadTask = uni.downloadFile({
|
|
|
- url: _this.filePath,
|
|
|
- success: (res) => {
|
|
|
- console.log(res, "下载成功");
|
|
|
- this.updateProgressShow = false;
|
|
|
- if (res.statusCode === 200) {
|
|
|
- _this.$refs.popup.close()
|
|
|
- plus.runtime.install(
|
|
|
- res.tempFilePath,
|
|
|
- {},
|
|
|
- function () {
|
|
|
- console.log("install success...");
|
|
|
- plus.runtime.restart();
|
|
|
- // uni.hideLoading();
|
|
|
- uni.setStorageSync("wgtinfo", null);
|
|
|
- },
|
|
|
- function (e) {
|
|
|
- uni.showToast({
|
|
|
- icon: "error",
|
|
|
- title: "更新失败",
|
|
|
- duration: 1500,
|
|
|
- });
|
|
|
- }
|
|
|
- );
|
|
|
- } else {
|
|
|
- _this.$refs.popup.close()
|
|
|
- uni.showToast({
|
|
|
- icon: "error",
|
|
|
- title: "更新失败",
|
|
|
- duration: 1500,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- _this.$refs.popup.close()
|
|
|
- uni.showToast({
|
|
|
- icon: "error",
|
|
|
- title: "更新失败",
|
|
|
- duration: 1500,
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
- downloadTask.onProgressUpdate((res) => {
|
|
|
- // console.log(res, "进度");
|
|
|
- // console.log("下载进度" + res.progress);
|
|
|
- // console.log("已经下载的数据长度" + res.totalBytesWritten);
|
|
|
- // console.log(
|
|
|
- // "预期需要下载的数据总长度" + res.totalBytesExpectedToWrite
|
|
|
- // );
|
|
|
- let totalBytesWritten = formatBytes(res.totalBytesWritten);
|
|
|
- let totalBytesExpectedToWrite = formatBytes(
|
|
|
- res.totalBytesExpectedToWrite
|
|
|
- );
|
|
|
- let num1 = totalBytesWritten.fileSize.split(
|
|
|
- totalBytesWritten.matchUnit.unitName
|
|
|
- );
|
|
|
- let num2 = totalBytesExpectedToWrite.fileSize.split(
|
|
|
- totalBytesExpectedToWrite.matchUnit.unitName
|
|
|
- );
|
|
|
- _this.totalBytesWritten =
|
|
|
- Math.floor(num1[0] * 100) / 100 +
|
|
|
- totalBytesWritten.matchUnit.unitName;
|
|
|
- _this.totalBytesExpectedToWrite =
|
|
|
- Math.floor(num2[0] * 100) / 100 +
|
|
|
- totalBytesExpectedToWrite.matchUnit.unitName;
|
|
|
- _this.percentVal = res.progress;
|
|
|
- });
|
|
|
- } else if (res.cancel) {
|
|
|
- console.log("稍后更新");
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
+
|
|
|
+ onChange(e){
|
|
|
+ console.log(e)
|
|
|
+ this.current = e.detail.current
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
onReachBottom() {
|
|
|
- if (this.Query.page <= this.pageData.last_page) this.getList();
|
|
|
+ this.$bus.$emit("onReachBottom");
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang='scss'>
|
|
|
+.Appindex {
|
|
|
+ padding-bottom: 220rpx;
|
|
|
+}
|
|
|
.head {
|
|
|
padding: 12rpx 28rpx;
|
|
|
}
|
|
|
@@ -410,19 +240,24 @@ export default {
|
|
|
}
|
|
|
|
|
|
.head_notice {
|
|
|
- margin: 30rpx 0;
|
|
|
+ margin: 30rpx 0 10rpx;
|
|
|
+ padding: 0 10rpx 0;
|
|
|
|
|
|
.notice_title {
|
|
|
- width: 130rpx;
|
|
|
- height: 40rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ // height: 40rpx;
|
|
|
float: left;
|
|
|
-
|
|
|
- .gg_img {
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- }
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 6rpx 0;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background-color: #D78C2E;
|
|
|
+ }
|
|
|
+ .gg_img {
|
|
|
+ width: 35rpx;
|
|
|
+ height: 24rpx;
|
|
|
}
|
|
|
-
|
|
|
.notice_swiper {
|
|
|
height: 40rpx;
|
|
|
padding-left: 20rpx;
|
|
|
@@ -432,7 +267,7 @@ export default {
|
|
|
width: calc(100% - 130rpx);
|
|
|
|
|
|
.not_list {
|
|
|
- width: calc(100% - 50rpx);
|
|
|
+ width: calc(100% - 30rpx);
|
|
|
}
|
|
|
|
|
|
.not_ico {
|
|
|
@@ -445,16 +280,16 @@ export default {
|
|
|
.not_ico {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
- height: 40rpx;
|
|
|
+ height: 45rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.l_tabBar {
|
|
|
- margin: 32rpx 0 20rpx;
|
|
|
+ margin: 32rpx 0 0;
|
|
|
background-color: #fff;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
+ padding: 12rpx 20rpx;
|
|
|
border-radius: 10rpx;
|
|
|
box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
|
|
|
flex-wrap: wrap;
|
|
|
@@ -462,7 +297,7 @@ export default {
|
|
|
.search-box {
|
|
|
width: 100%;
|
|
|
padding: 10rpx;
|
|
|
- margin-bottom: 12rpx;
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
|
.district {
|
|
|
font-size: 32rpx;
|
|
|
@@ -507,6 +342,102 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .swiper-1 {
|
|
|
+ padding: 10rpx;
|
|
|
+ height: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ ::v-deep.uni-swiper-dots-horizontal {
|
|
|
+ bottom: 3rpx !important;
|
|
|
+ }
|
|
|
+ ::v-deep.uni-swiper-dot {
|
|
|
+ width: 20rpx !important;
|
|
|
+ height: 8rpx !important;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ }
|
|
|
+ ::v-deep .uni-swiper-dot-active {
|
|
|
+ background-color: #D78C2E;
|
|
|
+ }
|
|
|
+ ::v-deep .uni-swiper-dot:first-child {
|
|
|
+ overflow: hidden;
|
|
|
+ // border-radius: 4rpx 0 0 4rpx !important;
|
|
|
+
|
|
|
+ border-bottom-left-radius: 4rpx !important;
|
|
|
+ border-top-left-radius: 4rpx !important;
|
|
|
+ }
|
|
|
+ ::v-deep.uni-swiper-dot:last-child {
|
|
|
+ // border-radius: 0 4rpx 4rpx 0 !important;
|
|
|
+ border-bottom-right-radius: 4rpx !important;
|
|
|
+ border-top-right-radius: 4rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .custom-dots {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 3rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ .swiper-box {
|
|
|
+ position: relative;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(7, 1fr);
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 2px;
|
|
|
+ height: 3px;
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background:#D78C2E;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ width: 20rpx !important;
|
|
|
+ height: 8rpx !important;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ background: #D5D5D7;
|
|
|
+ transition: background-color 0.3s;
|
|
|
+ }
|
|
|
+ .dot.active {
|
|
|
+ background: #D78C2E;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ ::v-deep .dot:first-child {
|
|
|
+ overflow: hidden;
|
|
|
+ // border-radius: 4rpx 0 0 4rpx !important;
|
|
|
+
|
|
|
+ border-bottom-left-radius: 4rpx !important;
|
|
|
+ border-top-left-radius: 4rpx !important;
|
|
|
+ }
|
|
|
+ ::v-deep.dot:last-child {
|
|
|
+ // border-radius: 0 4rpx 4rpx 0 !important;
|
|
|
+ border-bottom-right-radius: 4rpx !important;
|
|
|
+ border-top-right-radius: 4rpx !important;
|
|
|
+ }
|
|
|
+ .item_box {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, 1fr); /* 一行5列,平均分配 */
|
|
|
+ grid-template-rows: repeat(2, 100px); /* 两行,每行100px高 */
|
|
|
+ gap: 0;
|
|
|
+ overflow: hidden; /* 超出隐藏 */
|
|
|
+ height: 210px;
|
|
|
+ }
|
|
|
+
|
|
|
.item {
|
|
|
width: 105rpx;
|
|
|
margin: 10rpx 10rpx;
|