|
|
@@ -0,0 +1,594 @@
|
|
|
+<template>
|
|
|
+ <div class="Appindex">
|
|
|
+ <div class="container_box">
|
|
|
+ <!-- 顶部 -->
|
|
|
+ <view class="head">
|
|
|
+ <!-- 专区入口 -->
|
|
|
+ <div class="search_box flex_r flex_jb">
|
|
|
+ <div class="search-box flex_r flex_jb flex_ac">
|
|
|
+ <div class="district">
|
|
|
+ <image
|
|
|
+ src="/static/img/consumer_logo.png"
|
|
|
+ alt="logo"
|
|
|
+ class="logo"
|
|
|
+ />
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ <div class="l_tabBar flex_r flex_jb">
|
|
|
+ <div
|
|
|
+ class="item flex_c flex_ac"
|
|
|
+ v-for="(i, s) in tabs"
|
|
|
+ :key="s"
|
|
|
+ @click="categoryClick(i)"
|
|
|
+ >
|
|
|
+ <img :src="i.image" alt="" class="ico" />
|
|
|
+ <span class="tit">{{ i.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 专区-end -->
|
|
|
+ <!-- 活动 -->
|
|
|
+ <view v-if="activeShow">
|
|
|
+ <view class="single_product">
|
|
|
+ <image
|
|
|
+ class="single_product_img"
|
|
|
+ mode="widthFix"
|
|
|
+ :src="homeImg[0]"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="activity" v-if="homeImg.length">
|
|
|
+ <image
|
|
|
+ class="act_img act_one_img"
|
|
|
+ :src="homeImg[1]"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ <view class="act_other">
|
|
|
+ <image
|
|
|
+ class="act_img act_two_img"
|
|
|
+ :src="homeImg[2]"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ <image
|
|
|
+ class="act_img act_two_img"
|
|
|
+ :src="homeImg[3]"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 活动-end -->
|
|
|
+ </view>
|
|
|
+ <view class="bou_head flex_r flex_ac flex_jc">
|
|
|
+ <image class="bou_img" src="/static/img/splite.png" mode=""></image>
|
|
|
+ <view class="bou_title">{{ categoryTitle }}</view>
|
|
|
+ <image class="bou_img" src="/static/img/splite.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="list_bar">
|
|
|
+ <view class="product-list">
|
|
|
+ <view
|
|
|
+ class="product"
|
|
|
+ v-for="(i, s) in productList"
|
|
|
+ :key="s"
|
|
|
+ @click="NavToGoodsDetail(i.id, 4)"
|
|
|
+ >
|
|
|
+ <view class="image-view">
|
|
|
+ <image class="product-image" :src="i.goods.original_img"></image>
|
|
|
+ </view>
|
|
|
+ <view class="content-view">
|
|
|
+ <view :class="['product-title', 'ellipsis']">{{
|
|
|
+ i.goods_name
|
|
|
+ }}</view>
|
|
|
+ <view class="product-price">
|
|
|
+ <text class="product-price-original">{{ i.cost_price }}</text>
|
|
|
+ <text class="product-text"
|
|
|
+ >赠<text class="corFE2C15">{{ i.give_cha_bao }}</text
|
|
|
+ >茶宝</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="product-txt">
|
|
|
+ <text class="product-price-favour">￥{{ i.market_price }}</text>
|
|
|
+ <text class="product-text">消费金抵</text>
|
|
|
+ <span class="corFE2C15">￥{{ Number(i.consume) }}</span>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="product-txt" v-if="i.type == 1">赠送{{ i.give_integral + "批发券" }}</view> -->
|
|
|
+ <view class="product-txt"
|
|
|
+ >限时赠送<text class="corFE2C15">{{ i.teac }}</text
|
|
|
+ >TeaC</view
|
|
|
+ >
|
|
|
+ <view class="product-txt fenxiang">
|
|
|
+ <text class="iconfont red"></text>
|
|
|
+ <text class="red">分享约获得 {{ i.first_teac }} 现金</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="con_nothing" v-if="haveGoods">
|
|
|
+ <image
|
|
|
+ mode="widthFix"
|
|
|
+ class="image"
|
|
|
+ src="/static/img/con_nothing.png"
|
|
|
+ ></image>
|
|
|
+ <text>{{ textStr ? textStr : "暂无商品信息" }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="fz_w_text">让数字经济赋能美好生活！</view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+// import tabs from "@/static/js/tabs"; //专区入口
|
|
|
+import { post } from "@/request/api.js";
|
|
|
+export default {
|
|
|
+ name: "consumerGoldIndex",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ not_list: [], // 公告列表
|
|
|
+ homeImg: [], //活动列表
|
|
|
+ productList: [], //商品数据
|
|
|
+ searchKey: "", //搜索关键词
|
|
|
+ // tabs,
|
|
|
+ tabs: [],
|
|
|
+ haveGoods: false, // 是否有商品
|
|
|
+ activeShow: true,
|
|
|
+ categoryId: 1, // 分类id
|
|
|
+ categoryTitle: "今日推荐",
|
|
|
+ page: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.getCategory();
|
|
|
+ // uni.Luserfun()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.page = 1;
|
|
|
+ this.productList = [];
|
|
|
+ this.loadData();
|
|
|
+ this.gethomeImg(); //活动列表
|
|
|
+ },
|
|
|
+ onHide() {},
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ let that = this;
|
|
|
+ uni.showLoading({ mask: true });
|
|
|
+ let params = {
|
|
|
+ page: this.page,
|
|
|
+ row: 20,
|
|
|
+ category_id: this.categoryId,
|
|
|
+ };
|
|
|
+ post("v1/goods/categoryInfo", params).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code === 0) {
|
|
|
+ let obj = res.data.data.data;
|
|
|
+ if (this.page == 1) {
|
|
|
+ that.productList = [];
|
|
|
+ }
|
|
|
+ if (this.page == 1 && obj.length <= 0) {
|
|
|
+ that.haveGoods = true;
|
|
|
+ } else {
|
|
|
+ that.haveGoods = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (obj.length > 0) {
|
|
|
+ obj.forEach((e) => {
|
|
|
+ that.productList.push(e);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // console.log("这里");
|
|
|
+ that.page = -1;
|
|
|
+ this.$toast("暂无更多");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.page = -1;
|
|
|
+ this.haveGoods = true;
|
|
|
+ this.$toast("暂无更多");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ categoryClick(item) {
|
|
|
+ this.page = 1;
|
|
|
+ this.categoryId = item.id;
|
|
|
+ this.categoryTitle = item.name;
|
|
|
+ this.activeShow = false;
|
|
|
+ this.productList = [];
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ // 跳转到商品详情页
|
|
|
+ NavToGoodsDetail(id, type) {
|
|
|
+ this.goto("/pages/product/p_details", { id, type });
|
|
|
+ },
|
|
|
+ // 分类列表
|
|
|
+ getCategory() {
|
|
|
+ post("v1/goods/category").then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.tabs = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 活动列表
|
|
|
+ gethomeImg() {
|
|
|
+ post("v1/goods/worthImg").then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.homeImg = res.data.data.img;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 金刚区跳转
|
|
|
+ setPageUrl(item) {
|
|
|
+ // if ([1, 3, 4, 6].includes(item.type)) {
|
|
|
+ // this.goto("/pages/product/productRetail", { type: item.type });
|
|
|
+ // } else if (item.type == 2) {
|
|
|
+ // this.goto("/pages/product/productWholesale", { type: 2 });
|
|
|
+ // } else if (item.type == 5) {
|
|
|
+ // this.goto("/pages/product/productTeaBaby", { type: item.type });
|
|
|
+ // } else {
|
|
|
+ // appEv.errTips("此功能暂未开放！");
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ goVipGift() {
|
|
|
+ this.goto("/pages/product/productRetail", { type: 4, is_vip: 1 });
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ toSearch() {
|
|
|
+ this.goto("/pagesC/settledMerchant/index", { key: this.searchKey });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //页面上拉触底事件的处理函数
|
|
|
+ onReachBottom: function () {
|
|
|
+ // console.log(this.page, "page");
|
|
|
+ if (this.page != -1) {
|
|
|
+ var that = this;
|
|
|
+ setTimeout(function () {
|
|
|
+ that.page = that.page + 1;
|
|
|
+ that.loadData();
|
|
|
+ }, 800);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang='scss'>
|
|
|
+.Appindex {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ overflow: auto;
|
|
|
+ background-color: #de9f4b;
|
|
|
+}
|
|
|
+.container_box {
|
|
|
+ border-radius: 60rpx 60rpx 0 0;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ background-color: #f5f6f8;
|
|
|
+}
|
|
|
+.head {
|
|
|
+ padding: 12rpx 28rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.head_search {
|
|
|
+ width: 100%;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ background: #f3f5f7;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #bbbbbb;
|
|
|
+ margin-bottom: 26rpx;
|
|
|
+
|
|
|
+ .search_text {
|
|
|
+ margin-left: 14rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.head_notice {
|
|
|
+ margin: 30rpx 0;
|
|
|
+
|
|
|
+ .notice_title {
|
|
|
+ width: 130rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ .gg_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice_swiper {
|
|
|
+ height: 40rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: calc(100% - 130rpx);
|
|
|
+
|
|
|
+ .not_list {
|
|
|
+ width: calc(100% - 50rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .not_ico {
|
|
|
+ width: 30rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .not_list,
|
|
|
+ .not_ico {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.search-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10rpx;
|
|
|
+ // margin-bottom: 12rpx;
|
|
|
+
|
|
|
+ .district {
|
|
|
+ .logo {
|
|
|
+ width: 92rpx;
|
|
|
+ height: 67rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ border: 1px solid #d78c2e;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ border-radius: 31rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inp {
|
|
|
+ font-size: 25rpx;
|
|
|
+ padding: 0 8rpx;
|
|
|
+ width: 360rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search_btn {
|
|
|
+ background-color: #d78c2e;
|
|
|
+ height: 100%;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 31rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-ico {
|
|
|
+ font-size: 55rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.l_tabBar {
|
|
|
+ margin: 32rpx 0;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 105rpx;
|
|
|
+ margin: 10rpx 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ico {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bou_head {
|
|
|
+ width: 100%;
|
|
|
+ height: 114rpx;
|
|
|
+ // margin-top: 50rpx;
|
|
|
+
|
|
|
+ .bou_img {
|
|
|
+ width: 92rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bou_title {
|
|
|
+ height: 30rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #121212;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 36rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.single_product {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ &_img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 活动
|
|
|
+.activity {
|
|
|
+ .act_one_img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 340rpx;
|
|
|
+ height: 424rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .act_other {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 340rpx - 10rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .act_two_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 208rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .act_img {
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 活动-end
|
|
|
+
|
|
|
+// 商品列表
|
|
|
+.list_bar {
|
|
|
+ .tit {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #121212;
|
|
|
+ padding: 40rpx 0 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.product-list {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 0 30rpx;
|
|
|
+
|
|
|
+ .product {
|
|
|
+ width: 48.5%;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding-bottom: 12rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-left: 3%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-image {
|
|
|
+ border-radius: 10rpx 10rpx 0 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 42.3vw;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-view {
|
|
|
+ padding: 0 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 1.5;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #121212;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-price {
|
|
|
+ color: #121212;
|
|
|
+ font-size: 28rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-price-original {
|
|
|
+ color: #18bb88;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: "￥";
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-price-favour {
|
|
|
+ color: #888888;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-tip {
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ background-color: #ff3333;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-unit {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #18bb88;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-txt,
|
|
|
+ .product-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #787878;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-price-msg {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #ff6d44;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-text {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: #fa2e18;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fenxiang {
|
|
|
+ font-size: 20rpx;
|
|
|
+ background: rgba(250, 46, 24, 0.08);
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.not_goods {
|
|
|
+ width: 600rpx;
|
|
|
+ height: 600rpx;
|
|
|
+ padding: 80rpx 30rpx;
|
|
|
+}
|
|
|
+.con_nothing {
|
|
|
+ padding: 80rpx 30rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.con_nothing .image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto 20rpx;
|
|
|
+}
|
|
|
+.con_nothing text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #aaa;
|
|
|
+ line-height: 1.5;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+</style>
|
2662043119@qq.com
